@nanahoshi/mona-ui 0.22.0 → 0.23.0

package/fesm2022/{nanahoshi-mona-ui-grid-grid-toggle.component-BDMX9KGc.mjs → nanahoshi-mona-ui-grid-grid-row.component-Dwy8hCm7.mjs}

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, computed, input, Directive, Component, signal, ElementRef, viewChild, output, effect, untracked, afterNextRender, ChangeDetectionStrategy, Injector, LOCALE_ID, model } from '@angular/core';
-import { c as GridService, n as gridListTableCellThemeVariants, o as gridDetailContentCellThemeVariants, p as gridDetailIndentCellThemeVariants, q as gridDetailRowThemeVariants, r as gridListTableRowThemeVariants, s as gridCellEditorBaseThemeVariants, t as gridCellEditorInputThemeVariants, j as GridLockedCellDirective, i as GridLogicalCellDirective, G as GridNavigationService, u as gridCellBaseThemeVariants, v as gridCellContainerThemeVariants, w as gridCellDirtyIndicatorThemeVariants, x as gridCellTextThemeVariants, y as gridRowReorderHandleThemeVariants, z as gridSelectionCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CIfTr1Qm.mjs';
-import { ImmutableList } from '@mirei/ts-collections';
+import { inject, computed, input, Directive, Component, signal, ElementRef, viewChild, output, effect, untracked, afterNextRender, ChangeDetectionStrategy, model, Injector, LOCALE_ID } from '@angular/core';
+import { a as GridService, i as gridListTableCellThemeVariants, j as gridCellEditorBaseThemeVariants, k as gridCellEditorInputThemeVariants, l as gridListTableRowThemeVariants, m as GridLockedCellDirective, n as GridLogicalCellDirective, o as gridGroupRowThemeVariants, G as GridNavigationService, p as gridCellBaseThemeVariants, q as gridCellContainerThemeVariants, r as gridCellDirtyIndicatorThemeVariants, s as gridCellTextThemeVariants, t as gridRowReorderHandleThemeVariants, u as gridSelectionCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-bduDEm-x.mjs';
+import { NgTemplateOutlet, formatDate } from '@angular/common';
+import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
+import { twMerge } from 'tailwind-merge';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule, LiveAnnouncer } from '@angular/cdk/a11y';
-import { NgTemplateOutlet, formatDate } from '@angular/common';
-import { LucideCheck, LucideOctagonAlert, LucideX, LucidePencil, LucideTrash2, LucideGripVertical, LucideMinus, LucideChevronDown, LucidePlus, LucideChevronRight, LucideDynamicIcon } from '@lucide/angular';
+import { LucideCheck, LucideOctagonAlert, LucideX, LucidePencil, LucideTrash2, LucideMinus, LucideChevronDown, LucidePlus, LucideChevronRight, LucideDynamicIcon, LucideGripVertical } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { DialogService } from '@nanahoshi/mona-ui/dialog';
 import { TooltipComponent } from '@nanahoshi/mona-ui/tooltip';
@@ -20,52 +21,24 @@ import { CdkDragHandle } from '@angular/cdk/drag-drop';
 class GridCellDirective {
     constructor() {
         this.#gridService = inject(GridService, { optional: true });
-        this.baseClass = computed(() => {
-            const dataCell = this.dataCell();
-            const groupHeader = this.groupHeader();
-            const groupToggle = this.groupToggle();
-            const grouped = this.grouped();
-            const indentCell = this.indentCell();
-            const masterDetailContent = this.masterDetailContent();
-            const masterDetailToggle = this.masterDetailToggle();
-            const lastInRow = this.lastInRow() || groupHeader || masterDetailContent;
-            return gridListTableCellThemeVariants({
-                virtual: this.#gridService?.virtualScrollOptions().enabled ?? false,
-                dataCell,
-                groupHeader,
-                groupToggle,
-                grouped,
-                indentCell,
-                lastInRow,
-                masterDetailContent,
-                masterDetailToggle
-            });
-        }, /* @ts-ignore */
+        this.baseClass = computed(() => gridListTableCellThemeVariants({
+            virtual: this.#gridService?.virtualScrollOptions().enabled ?? false,
+            groupIndent: this.groupIndent(),
+            lastInRow: this.lastInRow() || this.groupHeader()
+        }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
-        this.dataCell = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dataCell" }] : /* istanbul ignore next */ []));
+        /** Marks a group header title cell. It spans to the end of the row, so it draws no end border. */
         this.groupHeader = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupHeader" }] : /* istanbul ignore next */ []));
-        this.groupToggle = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "groupToggle" }] : /* istanbul ignore next */ []));
-        this.grouped = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
-        this.indentCell = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "indentCell" }] : /* istanbul ignore next */ []));
+        /** Marks an indent cell under a group, which uses the muted group background. */
+        this.groupIndent = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupIndent" }] : /* istanbul ignore next */ []));
         this.lastInRow = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lastInRow" }] : /* istanbul ignore next */ []));
-        this.masterDetailContent = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "masterDetailContent" }] : /* istanbul ignore next */ []));
-        this.masterDetailToggle = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "masterDetailToggle" }] : /* istanbul ignore next */ []));
-        this.nextRowType = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "nextRowType" }] : /* istanbul ignore next */ []));
-        this.prevRowType = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "prevRowType" }] : /* istanbul ignore next */ []));
     }
     #gridService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridCellDirective, isStandalone: true, selector: "td[monaGridCell]", inputs: { dataCell: { classPropertyName: "dataCell", publicName: "dataCell", isSignal: true, isRequired: false, transformFunction: null }, groupHeader: { classPropertyName: "groupHeader", publicName: "groupHeader", isSignal: true, isRequired: false, transformFunction: null }, groupToggle: { classPropertyName: "groupToggle", publicName: "groupToggle", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, indentCell: { classPropertyName: "indentCell", publicName: "indentCell", isSignal: true, isRequired: false, transformFunction: null }, lastInRow: { classPropertyName: "lastInRow", publicName: "lastInRow", isSignal: true, isRequired: false, transformFunction: null }, masterDetailContent: { classPropertyName: "masterDetailContent", publicName: "masterDetailContent", isSignal: true, isRequired: false, transformFunction: null }, masterDetailToggle: { classPropertyName: "masterDetailToggle", publicName: "masterDetailToggle", isSignal: true, isRequired: false, transformFunction: null }, nextRowType: { classPropertyName: "nextRowType", publicName: "nextRowType", isSignal: true, isRequired: false, transformFunction: null }, prevRowType: { classPropertyName: "prevRowType", publicName: "prevRowType", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridCellDirective, isStandalone: true, selector: "td[monaGridCell]", inputs: { groupHeader: { classPropertyName: "groupHeader", publicName: "groupHeader", isSignal: true, isRequired: false, transformFunction: null }, groupIndent: { classPropertyName: "groupIndent", publicName: "groupIndent", isSignal: true, isRequired: false, transformFunction: null }, lastInRow: { classPropertyName: "lastInRow", publicName: "lastInRow", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "class": "baseClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridCellDirective, decorators: [{
             type: Directive,
@@ -76,119 +49,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         role: "gridcell"
                     }
                 }]
-        }], propDecorators: { dataCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCell", required: false }] }], groupHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupHeader", required: false }] }], groupToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupToggle", required: false }] }], grouped: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouped", required: false }] }], indentCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentCell", required: false }] }], lastInRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastInRow", required: false }] }], masterDetailContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetailContent", required: false }] }], masterDetailToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetailToggle", required: false }] }], nextRowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextRowType", required: false }] }], prevRowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevRowType", required: false }] }] } });
-
-class GridDetailContentCellDirective {
-    constructor() {
-        this.baseClass = computed(() => {
-            return gridDetailContentCellThemeVariants({
-                nextIsGroup: this.nextRowType() === "group"
-            });
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
-        this.nextRowType = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "nextRowType" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailContentCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridDetailContentCellDirective, isStandalone: true, selector: "td[monaGridDetailContentCell]", inputs: { nextRowType: { classPropertyName: "nextRowType", publicName: "nextRowType", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "class": "baseClass()" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailContentCellDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "td[monaGridDetailContentCell]",
-                    host: {
-                        "[class]": "baseClass()",
-                        role: "gridcell"
-                    }
-                }]
-        }], propDecorators: { nextRowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextRowType", required: false }] }] } });
-
-class GridDetailIndentCellDirective {
-    constructor() {
-        this.baseClass = computed(() => {
-            return gridDetailIndentCellThemeVariants({
-                nextIsGroup: this.nextRowType() === "group"
-            });
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
-        this.nextRowType = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "nextRowType" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailIndentCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridDetailIndentCellDirective, isStandalone: true, selector: "td[monaGridDetailIndentCell]", inputs: { nextRowType: { classPropertyName: "nextRowType", publicName: "nextRowType", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "class": "baseClass()" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailIndentCellDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "td[monaGridDetailIndentCell]",
-                    host: {
-                        "[class]": "baseClass()",
-                        role: "gridcell"
-                    }
-                }]
-        }], propDecorators: { nextRowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextRowType", required: false }] }] } });
-
-class GridDetailRowDirective {
-    constructor() {
-        this.baseClass = computed(() => {
-            return gridDetailRowThemeVariants();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: GridDetailRowDirective, isStandalone: true, selector: "tr[monaGridDetailRow]", host: { attributes: { "role": "row" }, properties: { "class": "baseClass()" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailRowDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "tr[monaGridDetailRow]",
-                    host: {
-                        "[class]": "baseClass()",
-                        role: "row"
-                    }
-                }]
-        }] });
-
-class GridRowDirective {
-    constructor() {
-        this.#gridService = inject(GridService);
-        this.ariaRowIndex = computed(() => this.index() + this.#gridService.paginationState().skip + 2, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "ariaRowIndex" }] : /* istanbul ignore next */ []));
-        this.baseClass = computed(() => {
-            const selected = this.selected();
-            return gridListTableRowThemeVariants({ selected, virtual: this.#gridService.virtualScrollOptions().enabled });
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
-        this.selectable = computed(() => this.#gridService.selectableOptions().enabled, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
-        this.expanded = computed(() => this.#gridService.isRowExpanded(this.row()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-        this.index = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
-        this.row = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
-        this.selected = computed(() => this.#gridService.isRowSelected(this.row()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-    }
-    #gridService;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridRowDirective, isStandalone: true, selector: "tr[monaGridRow]", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "row" }, properties: { "class": "baseClass()", "attr.data-ruid": "row().uid", "attr.data-row-view-index": "index()", "attr.aria-selected": "selectable() ? selected() : null", "attr.aria-rowindex": "ariaRowIndex()" } }, exportAs: ["monaGridRow"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "tr[monaGridRow]",
-                    host: {
-                        "[class]": "baseClass()",
-                        "[attr.data-ruid]": "row().uid",
-                        "[attr.data-row-view-index]": "index()",
-                        role: "row",
-                        "[attr.aria-selected]": "selectable() ? selected() : null",
-                        "[attr.aria-rowindex]": "ariaRowIndex()"
-                    },
-                    exportAs: "monaGridRow"
-                }]
-        }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
+        }], propDecorators: { groupHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupHeader", required: false }] }], groupIndent: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupIndent", required: false }] }], lastInRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastInRow", required: false }] }] } });
 
 class GridCommandCellComponent {
     constructor() {
@@ -544,9 +405,14 @@ class GridAddRowComponent {
             return gridListTableRowThemeVariants({ selected: false });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.firstEditableColumn = computed(() => this.gridService.visibleColumns().firstOrDefault(column => column.kind === "data" && column.editable), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstEditableColumn" }] : /* istanbul ignore next */ []));
         this.gridService = inject(GridService);
-        this.columns = input(ImmutableList.create(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.structuralColumnIds = {
+            detail: undefined,
+            reorder: "$rowReorder",
+            selection: "$selection"
+        };
     }
     onCancel() {
         this.gridService.cancelAddRow();
@@ -554,14 +420,11 @@ class GridAddRowComponent {
     onCommit() {
         // Add rows are committed by the command column or toolbar save command.
     }
-    isFirstEditableColumn(column) {
-        return this.columns().firstOrDefault(c => c.kind === "data" && c.editable) === column;
-    }
     onValueChange(column, value) {
         this.gridService.patchAddCell(column.field, value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridAddRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridAddRowComponent, isStandalone: true, selector: "tr[monaGridAddRow]", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "row", "data-grid-add-row": "true" }, properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (gridService.addRowData(); as rowData) {\n    @let session = gridService.editSession();\n    @for (_ of gridService.groupColumns(); track $index) {\n        <td\n            monaGridCell\n            monaGridLockedCell\n            [lockedCellHeader]=\"true\"\n            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n            [grouped]=\"true\"\n            [indentCell]=\"true\"\n            [attr.colspan]=\"1\"\n            [style.width.px]=\"gridService.groupColumnWidth\"></td>\n    }\n    @if (gridService.rowReorderColumnVisible()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [structuralColumn]=\"'reorder'\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"gridService.structuralColIndexMap().get('reorder') ?? 0\"\n            [cellKind]=\"'command'\"\n            [columnId]=\"'$rowReorder'\"\n            [firstInRow]=\"gridService.structuralColIndexMap().get('reorder') === 0\"\n            [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'reorder'\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n    }\n    @if (gridService.masterDetailTemplate()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [structuralColumn]=\"'detail'\"\n            [masterDetailToggle]=\"true\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n            [cellKind]=\"'detail'\"\n            [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n            [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'detail'\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.detailColumnWidth\"></td>\n    }\n    @if (gridService.selectionColumnVisible()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [structuralColumn]=\"'selection'\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"gridService.structuralColIndexMap().get('selection') ?? 0\"\n            [cellKind]=\"'command'\"\n            [columnId]=\"'$selection'\"\n            [firstInRow]=\"gridService.structuralColIndexMap().get('selection') === 0\"\n            [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'selection'\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n    }\n    @for (column of columns(); track $index) {\n        @let colIndex = $index + gridService.leadingLogicalColumnCount();\n        <td\n            monaGridCell\n            monaGridLockedCell\n            [column]=\"column\"\n            [dataCell]=\"true\"\n            monaGridLogicalCell\n            [cellKind]=\"column.kind\"\n            [colIndex]=\"colIndex\"\n            [columnId]=\"column.id\"\n            [rowIndex]=\"-1\"\n            [section]=\"'add'\"\n            [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n            [lastInRow]=\"colIndex === gridService.leadingLogicalColumnCount() + columns().length - 1\"\n            [attr.colspan]=\"1\"\n            [style.width.px]=\"column.calculatedWidth\"\n            [style.min-width.px]=\"column.minWidth\">\n            @if (column.kind === \"command\") {\n                <mona-grid-command-cell [column]=\"column\" [newRow]=\"true\"></mona-grid-command-cell>\n            } @else if (column.editable && session) {\n                <mona-grid-editor\n                    [column]=\"column\"\n                    [autoFocus]=\"isFirstEditableColumn(column)\"\n                    [isNew]=\"true\"\n                    [session]=\"session\"\n                    (commit)=\"onCommit()\"\n                    (cancelEdit)=\"onCancel()\"></mona-grid-editor>\n            } @else {\n                <span class=\"block truncate px-2\">{{ rowData[column.field] }}</span>\n            }\n        </td>\n    }\n}\n", dependencies: [{ kind: "directive", type: GridCellDirective, selector: "td[monaGridCell]", inputs: ["dataCell", "groupHeader", "groupToggle", "grouped", "indentCell", "lastInRow", "masterDetailContent", "masterDetailToggle", "nextRowType", "prevRowType"] }, { kind: "component", type: GridCommandCellComponent, selector: "mona-grid-command-cell", inputs: ["column", "newRow", "row"] }, { kind: "component", type: GridEditorComponent, selector: "mona-grid-editor", inputs: ["autoFocus", "column", "isNew", "session", "tabNavigationEnabled"], outputs: ["cancelEdit", "commit", "tabNavigate"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "groupPrefixWidth", "lockedCellHeader", "lockedStructuralOffset", "structuralColumn"] }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggleExpand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridAddRowComponent, isStandalone: true, selector: "tr[monaGridAddRow]", host: { attributes: { "role": "row", "data-grid-add-row": "true" }, properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (gridService.addRowData(); as rowData) {\n    @let session = gridService.editSession();\n    @for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n        @if (layoutColumn.kind === \"column\") {\n            @let column = layoutColumn.column;\n            <td\n                monaGridCell\n                [monaGridLockedCell]=\"layoutColumn.key\"\n                monaGridLogicalCell\n                [cellKind]=\"column.kind\"\n                [colIndex]=\"layoutColumn.logicalIndex\"\n                [columnId]=\"column.id\"\n                [rowIndex]=\"-1\"\n                [section]=\"'add'\"\n                [firstInRow]=\"layoutColumn.firstInRow\"\n                [lastInRow]=\"layoutColumn.lastInRow\">\n                @if (column.kind === \"command\") {\n                    <mona-grid-command-cell [column]=\"column\" [newRow]=\"true\"></mona-grid-command-cell>\n                } @else if (column.editable && session) {\n                    <mona-grid-editor\n                        [column]=\"column\"\n                        [autoFocus]=\"column === firstEditableColumn()\"\n                        [isNew]=\"true\"\n                        [session]=\"session\"\n                        (commit)=\"onCommit()\"\n                        (cancelEdit)=\"onCancel()\"></mona-grid-editor>\n                } @else {\n                    <span class=\"block truncate px-2\">{{ rowData[column.field] }}</span>\n                }\n            </td>\n        } @else if (layoutColumn.kind === \"group\") {\n            <td\n                monaGridCell\n                [monaGridLockedCell]=\"layoutColumn.key\"\n                [lockedCellHeader]=\"true\"\n                [groupIndent]=\"true\"></td>\n        } @else {\n            <td\n                monaGridCell\n                monaGridLogicalCell\n                [monaGridLockedCell]=\"layoutColumn.key\"\n                [rowIndex]=\"-1\"\n                [colIndex]=\"layoutColumn.logicalIndex\"\n                [cellKind]=\"layoutColumn.kind === 'detail' ? 'detail' : 'command'\"\n                [columnId]=\"structuralColumnIds[layoutColumn.kind]\"\n                [firstInRow]=\"layoutColumn.firstInRow\"\n                [lastInRow]=\"layoutColumn.lastInRow\"\n                [section]=\"'add'\"></td>\n        }\n    }\n}\n", dependencies: [{ kind: "directive", type: GridCellDirective, selector: "td[monaGridCell]", inputs: ["groupHeader", "groupIndent", "lastInRow"] }, { kind: "component", type: GridCommandCellComponent, selector: "mona-grid-command-cell", inputs: ["column", "newRow", "row"] }, { kind: "component", type: GridEditorComponent, selector: "mona-grid-editor", inputs: ["autoFocus", "column", "isNew", "session", "tabNavigationEnabled"], outputs: ["cancelEdit", "commit", "tabNavigate"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["monaGridLockedCell", "lockedCellHeader"] }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggleExpand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridAddRowComponent, decorators: [{
             type: Component,
@@ -575,8 +438,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[class]": "baseClass()",
                         role: "row",
                         "data-grid-add-row": "true"
-                    }, template: "@if (gridService.addRowData(); as rowData) {\n    @let session = gridService.editSession();\n    @for (_ of gridService.groupColumns(); track $index) {\n        <td\n            monaGridCell\n            monaGridLockedCell\n            [lockedCellHeader]=\"true\"\n            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n            [grouped]=\"true\"\n            [indentCell]=\"true\"\n            [attr.colspan]=\"1\"\n            [style.width.px]=\"gridService.groupColumnWidth\"></td>\n    }\n    @if (gridService.rowReorderColumnVisible()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [structuralColumn]=\"'reorder'\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"gridService.structuralColIndexMap().get('reorder') ?? 0\"\n            [cellKind]=\"'command'\"\n            [columnId]=\"'$rowReorder'\"\n            [firstInRow]=\"gridService.structuralColIndexMap().get('reorder') === 0\"\n            [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'reorder'\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n    }\n    @if (gridService.masterDetailTemplate()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [structuralColumn]=\"'detail'\"\n            [masterDetailToggle]=\"true\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n            [cellKind]=\"'detail'\"\n            [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n            [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'detail'\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.detailColumnWidth\"></td>\n    }\n    @if (gridService.selectionColumnVisible()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [structuralColumn]=\"'selection'\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"gridService.structuralColIndexMap().get('selection') ?? 0\"\n            [cellKind]=\"'command'\"\n            [columnId]=\"'$selection'\"\n            [firstInRow]=\"gridService.structuralColIndexMap().get('selection') === 0\"\n            [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'selection'\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n    }\n    @for (column of columns(); track $index) {\n        @let colIndex = $index + gridService.leadingLogicalColumnCount();\n        <td\n            monaGridCell\n            monaGridLockedCell\n            [column]=\"column\"\n            [dataCell]=\"true\"\n            monaGridLogicalCell\n            [cellKind]=\"column.kind\"\n            [colIndex]=\"colIndex\"\n            [columnId]=\"column.id\"\n            [rowIndex]=\"-1\"\n            [section]=\"'add'\"\n            [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n            [lastInRow]=\"colIndex === gridService.leadingLogicalColumnCount() + columns().length - 1\"\n            [attr.colspan]=\"1\"\n            [style.width.px]=\"column.calculatedWidth\"\n            [style.min-width.px]=\"column.minWidth\">\n            @if (column.kind === \"command\") {\n                <mona-grid-command-cell [column]=\"column\" [newRow]=\"true\"></mona-grid-command-cell>\n            } @else if (column.editable && session) {\n                <mona-grid-editor\n                    [column]=\"column\"\n                    [autoFocus]=\"isFirstEditableColumn(column)\"\n                    [isNew]=\"true\"\n                    [session]=\"session\"\n                    (commit)=\"onCommit()\"\n                    (cancelEdit)=\"onCancel()\"></mona-grid-editor>\n            } @else {\n                <span class=\"block truncate px-2\">{{ rowData[column.field] }}</span>\n            }\n        </td>\n    }\n}\n" }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
+                    }, template: "@if (gridService.addRowData(); as rowData) {\n    @let session = gridService.editSession();\n    @for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n        @if (layoutColumn.kind === \"column\") {\n            @let column = layoutColumn.column;\n            <td\n                monaGridCell\n                [monaGridLockedCell]=\"layoutColumn.key\"\n                monaGridLogicalCell\n                [cellKind]=\"column.kind\"\n                [colIndex]=\"layoutColumn.logicalIndex\"\n                [columnId]=\"column.id\"\n                [rowIndex]=\"-1\"\n                [section]=\"'add'\"\n                [firstInRow]=\"layoutColumn.firstInRow\"\n                [lastInRow]=\"layoutColumn.lastInRow\">\n                @if (column.kind === \"command\") {\n                    <mona-grid-command-cell [column]=\"column\" [newRow]=\"true\"></mona-grid-command-cell>\n                } @else if (column.editable && session) {\n                    <mona-grid-editor\n                        [column]=\"column\"\n                        [autoFocus]=\"column === firstEditableColumn()\"\n                        [isNew]=\"true\"\n                        [session]=\"session\"\n                        (commit)=\"onCommit()\"\n                        (cancelEdit)=\"onCancel()\"></mona-grid-editor>\n                } @else {\n                    <span class=\"block truncate px-2\">{{ rowData[column.field] }}</span>\n                }\n            </td>\n        } @else if (layoutColumn.kind === \"group\") {\n            <td\n                monaGridCell\n                [monaGridLockedCell]=\"layoutColumn.key\"\n                [lockedCellHeader]=\"true\"\n                [groupIndent]=\"true\"></td>\n        } @else {\n            <td\n                monaGridCell\n                monaGridLogicalCell\n                [monaGridLockedCell]=\"layoutColumn.key\"\n                [rowIndex]=\"-1\"\n                [colIndex]=\"layoutColumn.logicalIndex\"\n                [cellKind]=\"layoutColumn.kind === 'detail' ? 'detail' : 'command'\"\n                [columnId]=\"structuralColumnIds[layoutColumn.kind]\"\n                [firstInRow]=\"layoutColumn.firstInRow\"\n                [lastInRow]=\"layoutColumn.lastInRow\"\n                [section]=\"'add'\"></td>\n        }\n    }\n}\n" }]
+        }] });
+
+/**
+ * The expanded master-detail row below a data row. Leading layout columns get empty indent cells,
+ * and the detail template spans the user columns.
+ */
+class GridDetailRowComponent {
+    constructor() {
+        this.contentColspan = computed(() => Math.max(this.gridService.visibleColumns().length, 1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentColspan" }] : /* istanbul ignore next */ []));
+        this.gridService = inject(GridService);
+        this.grouped = computed(() => this.gridService.groupColumns().length !== 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
+        this.row = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridDetailRowComponent, isStandalone: true, selector: "tr[monaGridDetailRow]", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "row" }, properties: { "style.width.px": "gridService.masterDetailRowWidth()" } }, ngImport: i0, template: "@for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n    @if (layoutColumn.kind === \"group\") {\n        <td monaGridCell [monaGridLockedCell]=\"layoutColumn.key\" [lockedCellHeader]=\"true\" [groupIndent]=\"true\"></td>\n    } @else if (layoutColumn.kind === \"reorder\") {\n        <td monaGridCell [monaGridLockedCell]=\"layoutColumn.key\" [groupIndent]=\"grouped()\"></td>\n    } @else if (layoutColumn.kind !== \"column\") {\n        <td monaGridCell [monaGridLockedCell]=\"layoutColumn.key\"></td>\n    }\n}\n<td monaGridCell [lastInRow]=\"true\" [attr.colspan]=\"contentColspan()\">\n    <ng-container\n        [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n        [ngTemplateOutletContext]=\"{ $implicit: row().data }\" />\n</td>\n", dependencies: [{ kind: "directive", type: GridCellDirective, selector: "td[monaGridCell]", inputs: ["groupHeader", "groupIndent", "lastInRow"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["monaGridLockedCell", "lockedCellHeader"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tr[monaGridDetailRow]", changeDetection: ChangeDetectionStrategy.OnPush, imports: [GridCellDirective, GridLockedCellDirective, NgTemplateOutlet], host: {
+                        role: "row",
+                        "[style.width.px]": "gridService.masterDetailRowWidth()"
+                    }, template: "@for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n    @if (layoutColumn.kind === \"group\") {\n        <td monaGridCell [monaGridLockedCell]=\"layoutColumn.key\" [lockedCellHeader]=\"true\" [groupIndent]=\"true\"></td>\n    } @else if (layoutColumn.kind === \"reorder\") {\n        <td monaGridCell [monaGridLockedCell]=\"layoutColumn.key\" [groupIndent]=\"grouped()\"></td>\n    } @else if (layoutColumn.kind !== \"column\") {\n        <td monaGridCell [monaGridLockedCell]=\"layoutColumn.key\"></td>\n    }\n}\n<td monaGridCell [lastInRow]=\"true\" [attr.colspan]=\"contentColspan()\">\n    <ng-container\n        [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n        [ngTemplateOutletContext]=\"{ $implicit: row().data }\" />\n</td>\n" }]
+        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
+
+class GridToggleComponent {
+    constructor() {
+        this.collapseIcon = computed(() => {
+            const type = this.type();
+            return type === "detail" ? LucideMinus : LucideChevronDown;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapseIcon" }] : /* istanbul ignore next */ []));
+        this.expandIcon = computed(() => {
+            const type = this.type();
+            return type === "detail" ? LucidePlus : LucideChevronRight;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandIcon" }] : /* istanbul ignore next */ []));
+        this.expanded = model.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.type = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.width = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    }
+    onToggleDetailClick(event) {
+        event.stopPropagation();
+        this.expanded.update(v => !v);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridToggleComponent, isStandalone: true, selector: "mona-grid-toggle", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<span\n    [style.width.px]=\"width()\"\n    class=\"inline-flex items-center justify-center min-h-9 aspect-square\"\n    (click)=\"onToggleDetailClick($event)\">\n    @if (expanded()) {\n        <svg [lucideIcon]=\"collapseIcon()\" [size]=\"16\"></svg>\n    } @else {\n        <svg [lucideIcon]=\"expandIcon()\" [size]=\"16\"></svg>\n    }\n</span>\n", dependencies: [{ kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-grid-toggle", imports: [LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n    [style.width.px]=\"width()\"\n    class=\"inline-flex items-center justify-center min-h-9 aspect-square\"\n    (click)=\"onToggleDetailClick($event)\">\n    @if (expanded()) {\n        <svg [lucideIcon]=\"collapseIcon()\" [size]=\"16\"></svg>\n    } @else {\n        <svg [lucideIcon]=\"expandIcon()\" [size]=\"16\"></svg>\n    }\n</span>\n" }]
+        }], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: true }] }, { type: i0.Output, args: ["expandedChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }] } });
+
+/**
+ * A group header row. It indents by the group depth, and its title cell spans the remaining columns.
+ */
+class GridGroupRowComponent {
+    constructor() {
+        this.collapsed = computed(() => this.gridService.isGroupCollapsed(this.group().groupKey), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        this.gridService = inject(GridService);
+        this.indentColumns = computed(() => this.gridService.layout().filter(column => column.kind === "group" && column.depth < this.group().depth), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indentColumns" }] : /* istanbul ignore next */ []));
+        this.rowClass = computed(() => gridGroupRowThemeVariants({ virtual: this.gridService.virtualScrollOptions().enabled }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+        this.titleClass = computed(() => this.gridService.virtualScrollOptions().enabled
+            ? "absolute inset-0 flex items-center text-sm whitespace-nowrap overflow-hidden"
+            : "flex min-h-9 items-center text-sm whitespace-nowrap", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+        // Everything after the indents and the reorder placeholder.
+        this.titleColspan = computed(() => this.gridService.layout().length - this.group().depth - (this.gridService.rowReorderColumnVisible() ? 1 : 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleColspan" }] : /* istanbul ignore next */ []));
+        this.group = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+        /** The index of this row among the rendered body rows. */
+        this.rowIndex = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
+    }
+    toggle() {
+        this.gridService.toggleGroupCollapse(this.group().groupKey);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridGroupRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridGroupRowComponent, isStandalone: true, selector: "tr[monaGridGroupRow]", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "row" }, properties: { "class": "rowClass()", "attr.aria-level": "group().depth + 1", "attr.aria-expanded": "!collapsed()" } }, ngImport: i0, template: "@for (layoutColumn of indentColumns(); track layoutColumn.key) {\n    <td monaGridCell [monaGridLockedCell]=\"layoutColumn.key\" [lockedCellHeader]=\"true\" [groupIndent]=\"true\"></td>\n}\n@if (gridService.rowReorderColumnVisible()) {\n    <!-- Sits right after the indents, so it pins like the group column at this depth. -->\n    <td\n        monaGridCell\n        [monaGridLockedCell]=\"'group:' + group().depth\"\n        [lockedCellHeader]=\"true\"\n        [groupIndent]=\"true\"></td>\n}\n<td\n    monaGridCell\n    monaGridLogicalCell\n    [cellKind]=\"'group'\"\n    [rowIndex]=\"rowIndex()\"\n    [colIndex]=\"0\"\n    [section]=\"'body'\"\n    [groupHeader]=\"true\"\n    [firstInRow]=\"true\"\n    [lastInRow]=\"gridService.visibleColumns().length === 0\"\n    [groupKey]=\"group().groupKey\"\n    [attr.colspan]=\"titleColspan()\"\n    (toggleExpand)=\"toggle()\">\n    <p [class]=\"titleClass()\">\n        <mona-grid-toggle\n            [expanded]=\"!collapsed()\"\n            [width]=\"gridService.groupColumnWidth\"\n            [type]=\"'group'\"\n            (expandedChange)=\"toggle()\" />\n        <span class=\"font-bold\">{{ group().title }}: {{ group().groupValue }}</span>\n    </p>\n</td>\n", dependencies: [{ kind: "directive", type: GridCellDirective, selector: "td[monaGridCell]", inputs: ["groupHeader", "groupIndent", "lastInRow"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["monaGridLockedCell", "lockedCellHeader"] }, { 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: "component", type: GridToggleComponent, selector: "mona-grid-toggle", inputs: ["expanded", "type", "width"], outputs: ["expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridGroupRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tr[monaGridGroupRow]", changeDetection: ChangeDetectionStrategy.OnPush, imports: [GridCellDirective, GridLockedCellDirective, GridLogicalCellDirective, GridToggleComponent], host: {
+                        "[class]": "rowClass()",
+                        role: "row",
+                        "[attr.aria-level]": "group().depth + 1",
+                        "[attr.aria-expanded]": "!collapsed()"
+                    }, template: "@for (layoutColumn of indentColumns(); track layoutColumn.key) {\n    <td monaGridCell [monaGridLockedCell]=\"layoutColumn.key\" [lockedCellHeader]=\"true\" [groupIndent]=\"true\"></td>\n}\n@if (gridService.rowReorderColumnVisible()) {\n    <!-- Sits right after the indents, so it pins like the group column at this depth. -->\n    <td\n        monaGridCell\n        [monaGridLockedCell]=\"'group:' + group().depth\"\n        [lockedCellHeader]=\"true\"\n        [groupIndent]=\"true\"></td>\n}\n<td\n    monaGridCell\n    monaGridLogicalCell\n    [cellKind]=\"'group'\"\n    [rowIndex]=\"rowIndex()\"\n    [colIndex]=\"0\"\n    [section]=\"'body'\"\n    [groupHeader]=\"true\"\n    [firstInRow]=\"true\"\n    [lastInRow]=\"gridService.visibleColumns().length === 0\"\n    [groupKey]=\"group().groupKey\"\n    [attr.colspan]=\"titleColspan()\"\n    (toggleExpand)=\"toggle()\">\n    <p [class]=\"titleClass()\">\n        <mona-grid-toggle\n            [expanded]=\"!collapsed()\"\n            [width]=\"gridService.groupColumnWidth\"\n            [type]=\"'group'\"\n            (expandedChange)=\"toggle()\" />\n        <span class=\"font-bold\">{{ group().title }}: {{ group().groupValue }}</span>\n    </p>\n</td>\n" }]
+        }], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }] } });
 
 const FOCUSABLE_TARGET_SELECTOR = "button, input, select, textarea, a[href], [tabindex]";
 class GridCellComponent {
@@ -779,6 +739,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class GridRowReorderHandleComponent {
     constructor() {
         this.#gridService = inject(GridService);
+        this.#hostElement = inject(ElementRef).nativeElement;
+        this.#injector = inject(Injector);
         this.#liveAnnouncer = inject(LiveAnnouncer);
         this.ariaLabel = computed(() => {
             const absoluteIndex = this.pageIndex() + this.#gridService.paginationState().skip;
@@ -815,8 +777,7 @@ class GridRowReorderHandleComponent {
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledReasonText" }] : /* istanbul ignore next */ []));
-        this.handleClass = computed(() => gridRowReorderHandleThemeVariants(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "handleClass" }] : /* istanbul ignore next */ []));
+        this.handleClass = gridRowReorderHandleThemeVariants();
         /**
          * @description The row's position within the current page, used to move the row and derive its accessible label.
          */
@@ -829,6 +790,8 @@ class GridRowReorderHandleComponent {
         ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
     }
     #gridService;
+    #hostElement;
+    #injector;
     #liveAnnouncer;
     onKeydown(event) {
         if ((event.key !== "ArrowUp" && event.key !== "ArrowDown") || !event.altKey) {
@@ -843,6 +806,15 @@ class GridRowReorderHandleComponent {
         }
         const moved = this.#gridService.requestRowReorder(this.row(), this.pageIndex(), targetIndex);
         if (moved) {
+            // Re-rendering the new order moves this row in the DOM, which drops focus. Keep it so the row can move again.
+            afterNextRender({
+                write: () => {
+                    const button = this.#hostElement.querySelector("button");
+                    if (button != null && this.#hostElement.ownerDocument.activeElement !== button) {
+                        button.focus();
+                    }
+                }
+            }, { injector: this.#injector });
             const skip = this.#gridService.paginationState().skip;
             const fromRowNumber = skip + this.pageIndex() + 1;
             const toPosition = skip + targetIndex + 1;
@@ -850,7 +822,7 @@ class GridRowReorderHandleComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowReorderHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: GridRowReorderHandleComponent, isStandalone: true, selector: "mona-grid-row-reorder-handle", inputs: { pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "$event.stopPropagation()", "contextmenu": "$event.stopPropagation()", "dblclick": "$event.stopPropagation()" } }, ngImport: i0, template: "<button\n    type=\"button\"\n    cdkDragHandle\n    [class]=\"handleClass()\"\n    [disabled]=\"disabled()\"\n    [attr.title]=\"disabledReasonText()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown\"\n    (keydown)=\"onKeydown($event)\">\n    <svg lucideGripVertical [size]=\"16\" aria-hidden=\"true\"></svg>\n</button>\n", dependencies: [{ kind: "component", type: LucideGripVertical, selector: "svg[lucideGripVertical]" }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: GridRowReorderHandleComponent, isStandalone: true, selector: "mona-grid-row-reorder-handle", inputs: { pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "$event.stopPropagation()", "contextmenu": "$event.stopPropagation()", "dblclick": "$event.stopPropagation()" } }, ngImport: i0, template: "<button\n    type=\"button\"\n    cdkDragHandle\n    [class]=\"handleClass\"\n    [disabled]=\"disabled()\"\n    [attr.title]=\"disabledReasonText()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown\"\n    (keydown)=\"onKeydown($event)\">\n    <svg lucideGripVertical [size]=\"16\" aria-hidden=\"true\"></svg>\n</button>\n", dependencies: [{ kind: "component", type: LucideGripVertical, selector: "svg[lucideGripVertical]" }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowReorderHandleComponent, decorators: [{
             type: Component,
@@ -858,7 +830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "(click)": "$event.stopPropagation()",
                         "(contextmenu)": "$event.stopPropagation()",
                         "(dblclick)": "$event.stopPropagation()"
-                    }, template: "<button\n    type=\"button\"\n    cdkDragHandle\n    [class]=\"handleClass()\"\n    [disabled]=\"disabled()\"\n    [attr.title]=\"disabledReasonText()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown\"\n    (keydown)=\"onKeydown($event)\">\n    <svg lucideGripVertical [size]=\"16\" aria-hidden=\"true\"></svg>\n</button>\n" }]
+                    }, template: "<button\n    type=\"button\"\n    cdkDragHandle\n    [class]=\"handleClass\"\n    [disabled]=\"disabled()\"\n    [attr.title]=\"disabledReasonText()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown\"\n    (keydown)=\"onKeydown($event)\">\n    <svg lucideGripVertical [size]=\"16\" aria-hidden=\"true\"></svg>\n</button>\n" }]
         }], propDecorators: { pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
 
 class GridSelectionCheckboxComponent {
@@ -902,36 +874,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     }, template: "<mona-check-box\n    [checked]=\"checked()\"\n    (checkedChange)=\"onCheckedChange($event)\">\n    <span class=\"sr-only\">{{ ariaLabel() }}</span>\n</mona-check-box>\n" }]
         }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }] } });
 
-class GridToggleComponent {
+/** A data row of the grid body, with one cell per layout column. */
+class GridRowComponent {
     constructor() {
-        this.collapseIcon = computed(() => {
-            const type = this.type();
-            return type === "detail" ? LucideMinus : LucideChevronDown;
+        this.ariaRowIndex = computed(() => this.index() + this.gridService.paginationState().skip + 2, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaRowIndex" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const variantClass = gridListTableRowThemeVariants({
+                selected: this.selected(),
+                virtual: this.gridService.virtualScrollOptions().enabled
+            });
+            const userClass = this.gridService.rowClass()?.(this.row().data);
+            return twMerge(variantClass, typeof userClass === "string" ? userClass : userClass?.join(" "));
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "collapseIcon" }] : /* istanbul ignore next */ []));
-        this.expandIcon = computed(() => {
-            const type = this.type();
-            return type === "detail" ? LucidePlus : LucideChevronRight;
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.cellEditMode = computed(() => {
+            const options = this.gridService.editableOptions();
+            return options.enabled === true && options.mode === "cell";
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "expandIcon" }] : /* istanbul ignore next */ []));
-        this.expanded = model.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellEditMode" }] : /* istanbul ignore next */ []));
+        this.detailToggleClass = computed(() => this.gridService.virtualScrollOptions().enabled
+            ? "flex h-full w-full items-stretch justify-center"
+            : "flex min-h-9 w-full items-center justify-center", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "detailToggleClass" }] : /* istanbul ignore next */ []));
+        this.gridService = inject(GridService);
+        this.hostElement = inject(ElementRef).nativeElement;
+        this.selectable = computed(() => this.gridService.selectableOptions().enabled, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+        this.expanded = computed(() => this.gridService.isRowExpanded(this.row()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-        this.type = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-        this.width = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        /** The index of this row among the rendered body rows. */
+        this.index = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        this.row = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+        this.selected = computed(() => this.gridService.isRowSelected(this.row()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     }
-    onToggleDetailClick(event) {
-        event.stopPropagation();
-        this.expanded.update(v => !v);
+    onClick(event) {
+        this.gridService.handleRowClick(event, this.row());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridToggleComponent, isStandalone: true, selector: "mona-grid-toggle", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<span\n    [style.width.px]=\"width()\"\n    class=\"inline-flex items-center justify-center min-h-9 aspect-square\"\n    (click)=\"onToggleDetailClick($event)\">\n    @if (expanded()) {\n        <svg [lucideIcon]=\"collapseIcon()\" [size]=\"16\"></svg>\n    } @else {\n        <svg [lucideIcon]=\"expandIcon()\" [size]=\"16\"></svg>\n    }\n</span>\n", dependencies: [{ kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    toggleDetail() {
+        this.gridService.setRowExpanded(this.row(), !this.expanded());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridRowComponent, isStandalone: true, selector: "tr[monaGridRow]", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "row" }, listeners: { "click": "onClick($event)" }, properties: { "class": "baseClass()", "attr.data-ruid": "row().uid", "attr.data-row-view-index": "index()", "attr.aria-selected": "selectable() ? selected() : null", "attr.aria-rowindex": "ariaRowIndex()" } }, exportAs: ["monaGridRow"], ngImport: i0, template: "@for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n    @if (layoutColumn.kind === \"column\") {\n        <td\n            monaGridCell\n            [monaGridLockedCell]=\"layoutColumn.key\"\n            monaGridLogicalCell\n            [cellKind]=\"layoutColumn.column.kind\"\n            [colIndex]=\"layoutColumn.logicalIndex\"\n            [columnId]=\"layoutColumn.column.id\"\n            [editable]=\"cellEditMode() && layoutColumn.column.kind === 'data' && layoutColumn.column.editable === true\"\n            [rowIndex]=\"index()\"\n            [rowUid]=\"row().uid\"\n            [section]=\"'body'\"\n            [firstInRow]=\"layoutColumn.firstInRow\"\n            [lastInRow]=\"layoutColumn.lastInRow\"\n            (edit)=\"gridCell.handleLogicalCellEnter()\">\n            <mona-grid-cell #gridCell [column]=\"layoutColumn.column\" [row]=\"row()\" />\n        </td>\n    } @else if (layoutColumn.kind === \"group\") {\n        <td monaGridCell [monaGridLockedCell]=\"layoutColumn.key\" [lockedCellHeader]=\"true\" [groupIndent]=\"true\"></td>\n    } @else if (layoutColumn.kind === \"reorder\") {\n        <td\n            monaGridCell\n            [monaGridLockedCell]=\"layoutColumn.key\"\n            monaGridLogicalCell\n            [cellKind]=\"'command'\"\n            [columnId]=\"'$rowReorder'\"\n            [colIndex]=\"layoutColumn.logicalIndex\"\n            [rowIndex]=\"index()\"\n            [rowUid]=\"row().uid\"\n            [section]=\"'body'\"\n            [firstInRow]=\"layoutColumn.firstInRow\"\n            [lastInRow]=\"layoutColumn.lastInRow\">\n            <mona-grid-row-reorder-handle [row]=\"row()\" [pageIndex]=\"index()\" />\n        </td>\n    } @else if (layoutColumn.kind === \"detail\") {\n        <td\n            monaGridCell\n            [monaGridLockedCell]=\"layoutColumn.key\"\n            monaGridLogicalCell\n            [cellKind]=\"'detail'\"\n            [colIndex]=\"layoutColumn.logicalIndex\"\n            [rowIndex]=\"index()\"\n            [rowUid]=\"row().uid\"\n            [section]=\"'body'\"\n            [firstInRow]=\"layoutColumn.firstInRow\"\n            [lastInRow]=\"layoutColumn.lastInRow\"\n            (toggleExpand)=\"toggleDetail()\">\n            <span [class]=\"detailToggleClass()\">\n                <mona-grid-toggle\n                    [expanded]=\"expanded()\"\n                    [type]=\"'detail'\"\n                    [width]=\"gridService.detailColumnWidth\"\n                    (expandedChange)=\"toggleDetail()\" />\n            </span>\n        </td>\n    } @else if (layoutColumn.kind === \"selection\") {\n        <td\n            monaGridCell\n            [monaGridLockedCell]=\"layoutColumn.key\"\n            monaGridLogicalCell\n            [cellKind]=\"'command'\"\n            [columnId]=\"'$selection'\"\n            [colIndex]=\"layoutColumn.logicalIndex\"\n            [rowIndex]=\"index()\"\n            [rowUid]=\"row().uid\"\n            [section]=\"'body'\"\n            [firstInRow]=\"layoutColumn.firstInRow\"\n            [lastInRow]=\"layoutColumn.lastInRow\">\n            <mona-grid-selection-checkbox [row]=\"row()\" [rowIndex]=\"index()\" />\n        </td>\n    }\n}\n@if (gridService.contextMenuItems().length !== 0) {\n    <mona-contextmenu [target]=\"hostElement\" [items]=\"gridService.contextMenuItems()\" />\n}\n", dependencies: [{ kind: "component", type: ContextMenuComponent, selector: "mona-contextmenu", inputs: ["ariaLabel", "items", "minWidth", "rounded", "size", "target", "width"], outputs: ["menuClick"] }, { kind: "component", type: GridCellComponent, selector: "mona-grid-cell", inputs: ["column", "row"] }, { kind: "directive", type: GridCellDirective, selector: "td[monaGridCell]", inputs: ["groupHeader", "groupIndent", "lastInRow"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["monaGridLockedCell", "lockedCellHeader"] }, { 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: "component", type: GridRowReorderHandleComponent, selector: "mona-grid-row-reorder-handle", inputs: ["pageIndex", "row"] }, { kind: "component", type: GridSelectionCheckboxComponent, selector: "mona-grid-selection-checkbox", inputs: ["row", "rowIndex"] }, { kind: "component", type: GridToggleComponent, selector: "mona-grid-toggle", inputs: ["expanded", "type", "width"], outputs: ["expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-grid-toggle", imports: [LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n    [style.width.px]=\"width()\"\n    class=\"inline-flex items-center justify-center min-h-9 aspect-square\"\n    (click)=\"onToggleDetailClick($event)\">\n    @if (expanded()) {\n        <svg [lucideIcon]=\"collapseIcon()\" [size]=\"16\"></svg>\n    } @else {\n        <svg [lucideIcon]=\"expandIcon()\" [size]=\"16\"></svg>\n    }\n</span>\n" }]
-        }], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: true }] }, { type: i0.Output, args: ["expandedChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }] } });
+            args: [{ selector: "tr[monaGridRow]", exportAs: "monaGridRow", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ContextMenuComponent,
+                        GridCellComponent,
+                        GridCellDirective,
+                        GridLockedCellDirective,
+                        GridLogicalCellDirective,
+                        GridRowReorderHandleComponent,
+                        GridSelectionCheckboxComponent,
+                        GridToggleComponent
+                    ], host: {
+                        "[class]": "baseClass()",
+                        "[attr.data-ruid]": "row().uid",
+                        "[attr.data-row-view-index]": "index()",
+                        role: "row",
+                        "[attr.aria-selected]": "selectable() ? selected() : null",
+                        "[attr.aria-rowindex]": "ariaRowIndex()",
+                        "(click)": "onClick($event)"
+                    }, template: "@for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n    @if (layoutColumn.kind === \"column\") {\n        <td\n            monaGridCell\n            [monaGridLockedCell]=\"layoutColumn.key\"\n            monaGridLogicalCell\n            [cellKind]=\"layoutColumn.column.kind\"\n            [colIndex]=\"layoutColumn.logicalIndex\"\n            [columnId]=\"layoutColumn.column.id\"\n            [editable]=\"cellEditMode() && layoutColumn.column.kind === 'data' && layoutColumn.column.editable === true\"\n            [rowIndex]=\"index()\"\n            [rowUid]=\"row().uid\"\n            [section]=\"'body'\"\n            [firstInRow]=\"layoutColumn.firstInRow\"\n            [lastInRow]=\"layoutColumn.lastInRow\"\n            (edit)=\"gridCell.handleLogicalCellEnter()\">\n            <mona-grid-cell #gridCell [column]=\"layoutColumn.column\" [row]=\"row()\" />\n        </td>\n    } @else if (layoutColumn.kind === \"group\") {\n        <td monaGridCell [monaGridLockedCell]=\"layoutColumn.key\" [lockedCellHeader]=\"true\" [groupIndent]=\"true\"></td>\n    } @else if (layoutColumn.kind === \"reorder\") {\n        <td\n            monaGridCell\n            [monaGridLockedCell]=\"layoutColumn.key\"\n            monaGridLogicalCell\n            [cellKind]=\"'command'\"\n            [columnId]=\"'$rowReorder'\"\n            [colIndex]=\"layoutColumn.logicalIndex\"\n            [rowIndex]=\"index()\"\n            [rowUid]=\"row().uid\"\n            [section]=\"'body'\"\n            [firstInRow]=\"layoutColumn.firstInRow\"\n            [lastInRow]=\"layoutColumn.lastInRow\">\n            <mona-grid-row-reorder-handle [row]=\"row()\" [pageIndex]=\"index()\" />\n        </td>\n    } @else if (layoutColumn.kind === \"detail\") {\n        <td\n            monaGridCell\n            [monaGridLockedCell]=\"layoutColumn.key\"\n            monaGridLogicalCell\n            [cellKind]=\"'detail'\"\n            [colIndex]=\"layoutColumn.logicalIndex\"\n            [rowIndex]=\"index()\"\n            [rowUid]=\"row().uid\"\n            [section]=\"'body'\"\n            [firstInRow]=\"layoutColumn.firstInRow\"\n            [lastInRow]=\"layoutColumn.lastInRow\"\n            (toggleExpand)=\"toggleDetail()\">\n            <span [class]=\"detailToggleClass()\">\n                <mona-grid-toggle\n                    [expanded]=\"expanded()\"\n                    [type]=\"'detail'\"\n                    [width]=\"gridService.detailColumnWidth\"\n                    (expandedChange)=\"toggleDetail()\" />\n            </span>\n        </td>\n    } @else if (layoutColumn.kind === \"selection\") {\n        <td\n            monaGridCell\n            [monaGridLockedCell]=\"layoutColumn.key\"\n            monaGridLogicalCell\n            [cellKind]=\"'command'\"\n            [columnId]=\"'$selection'\"\n            [colIndex]=\"layoutColumn.logicalIndex\"\n            [rowIndex]=\"index()\"\n            [rowUid]=\"row().uid\"\n            [section]=\"'body'\"\n            [firstInRow]=\"layoutColumn.firstInRow\"\n            [lastInRow]=\"layoutColumn.lastInRow\">\n            <mona-grid-selection-checkbox [row]=\"row()\" [rowIndex]=\"index()\" />\n        </td>\n    }\n}\n@if (gridService.contextMenuItems().length !== 0) {\n    <mona-contextmenu [target]=\"hostElement\" [items]=\"gridService.contextMenuItems()\" />\n}\n" }]
+        }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
 
-export { GridAddRowComponent as G, GridCellComponent as a, GridRowDirective as b, GridCellDirective as c, GridDetailRowDirective as d, GridDetailIndentCellDirective as e, GridDetailContentCellDirective as f, GridToggleComponent as g, GridSelectionCheckboxComponent as h, GridRowReorderHandleComponent as i };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-toggle.component-BDMX9KGc.mjs.map
+export { GridAddRowComponent as G, GridDetailRowComponent as a, GridGroupRowComponent as b, GridRowComponent as c };
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-row.component-Dwy8hCm7.mjs.map