@nanahoshi/mona-ui 0.8.0 → 0.10.0

package/fesm2022/{nanahoshi-mona-ui-grid-grid-toggle.component-QDo6TweF.mjs → nanahoshi-mona-ui-grid-grid-toggle.component-DE3ffsva.mjs}

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { computed, input, Directive, inject, Component, signal, ElementRef, viewChild, output, effect, untracked, afterNextRender, ChangeDetectionStrategy, Injector, LOCALE_ID, model } from '@angular/core';
-import { k as gridListTableCellThemeVariants, l as gridDetailContentCellThemeVariants, m as gridDetailIndentCellThemeVariants, n as gridDetailRowThemeVariants, c as GridService, o as gridListTableRowThemeVariants, p as gridCellEditorBaseThemeVariants, q as gridCellEditorInputThemeVariants, h as GridLockedCellDirective, f as GridLogicalCellDirective, G as GridNavigationService, r as gridCellBaseThemeVariants, s as gridCellContainerThemeVariants, t as gridCellDirtyIndicatorThemeVariants, u as gridCellTextThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DWzYyGnb.mjs';
+import { m as gridListTableCellThemeVariants, n as gridDetailContentCellThemeVariants, o as gridDetailIndentCellThemeVariants, p as gridDetailRowThemeVariants, c as GridService, q as gridListTableRowThemeVariants, r as gridCellEditorBaseThemeVariants, s as gridCellEditorInputThemeVariants, j as GridLockedCellDirective, i as GridLogicalCellDirective, G as GridNavigationService, t as gridCellBaseThemeVariants, u as gridCellContainerThemeVariants, v as gridCellDirtyIndicatorThemeVariants, w as gridCellTextThemeVariants, x as gridRowReorderHandleThemeVariants, y as gridSelectionCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DaOemy_G.mjs';
 import { ImmutableList } from '@mirei/ts-collections';
 import * as i1 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
+import { A11yModule, LiveAnnouncer } from '@angular/cdk/a11y';
 import { NgTemplateOutlet, formatDate } from '@angular/common';
 import { LucideCheck, LucideOctagonAlert, LucideX, LucidePencil, LucideTrash2, LucideMinus, LucideChevronDown, LucidePlus, LucideChevronRight, LucideDynamicIcon } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
@@ -15,6 +15,7 @@ import { CheckBoxComponent } from '@nanahoshi/mona-ui/check-box';
 import { DatePickerComponent } from '@nanahoshi/mona-ui/date-picker';
 import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
 import { TextBoxComponent } from '@nanahoshi/mona-ui/text-box';
+import { CdkDragHandle } from '@angular/cdk/drag-drop';
 
 class GridCellDirective {
     constructor() {
@@ -547,7 +548,7 @@ class GridAddRowComponent {
         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.masterDetailTemplate()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n            [masterDetailToggle]=\"true\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"0\"\n            [cellKind]=\"'detail'\"\n            [firstInRow]=\"true\"\n            [lastInRow]=\"columns().length === 0\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.detailColumnWidth\"></td>\n    }\n    @for (column of columns(); track $index) {\n        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\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 === 0\"\n            [lastInRow]=\"colIndex === columns().length - (gridService.masterDetailTemplate() ? 0 : 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                    (cancel)=\"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: ["cancel", "commit", "tabNavigate"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "lockedCellHeader", "lockedStructuralOffset"] }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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                    (cancel)=\"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: ["cancel", "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", "toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridAddRowComponent, decorators: [{
             type: Component,
@@ -561,7 +562,7 @@ 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.masterDetailTemplate()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n            [masterDetailToggle]=\"true\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"0\"\n            [cellKind]=\"'detail'\"\n            [firstInRow]=\"true\"\n            [lastInRow]=\"columns().length === 0\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.detailColumnWidth\"></td>\n    }\n    @for (column of columns(); track $index) {\n        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\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 === 0\"\n            [lastInRow]=\"colIndex === columns().length - (gridService.masterDetailTemplate() ? 0 : 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                    (cancel)=\"onCancel()\"></mona-grid-editor>\n            } @else {\n                <span class=\"block truncate px-2\">{{ rowData[column.field] }}</span>\n            }\n        </td>\n    }\n}\n" }]
+                    }, 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                    (cancel)=\"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 }] }] } });
 
 const FOCUSABLE_TARGET_SELECTOR = "button, input, select, textarea, a[href], [tabindex]";
@@ -762,6 +763,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     }, template: "@let dataItem = row().data;\n@let dataKey = column().field;\n\n@if (column().kind === \"command\") {\n    <mona-grid-command-cell [column]=\"column()\" [row]=\"row()\"></mona-grid-command-cell>\n} @else {\n    <div\n        role=\"gridcell\"\n        [class]=\"cellContainerClass()\"\n        cdkMonitorSubtreeFocus\n        [attr.data-uid]=\"cellUid()\"\n        [attr.data-ruid]=\"row().uid\"\n        [attr.data-field]=\"dataKey\"\n        [attr.data-col-index]=\"column().index\"\n        [attr.aria-readonly]=\"!(gridService.editableOptions().enabled && column().editable)\"\n        (dblclick)=\"onCellDoubleClick($event)\">\n        @if (isEditing() && gridService.editSession(); as session) {\n            <mona-grid-editor\n                [column]=\"column()\"\n                [autoFocus]=\"shouldAutoFocusEditor()\"\n                [session]=\"session\"\n                [tabNavigationEnabled]=\"editContextIsCellMode()\"\n                (commit)=\"onEditCommit()\"\n                (cancel)=\"onEditCancel()\"\n                (tabNavigate)=\"onEditTabNavigate($event)\"></mona-grid-editor>\n        } @else if (column().cellTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"column().cellTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem, column: column().field }\"></ng-container>\n        } @else {\n            <span [class]=\"cellTextClass()\">{{ formattedDisplayValue() }}</span>\n        }\n        @if (!isCellPristine()) {\n            <span aria-hidden=\"true\" [class]=\"cellDirtyIndicatorClass()\" title=\"Modified\"></span>\n        }\n    </div>\n}\n" }]
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
 
+const ROW_REORDER_DISABLED_REASON_TEXT = {
+    disabled: "Row reordering is disabled.",
+    editing: "Finish editing to reorder rows.",
+    filtered: "Clear filters to reorder rows.",
+    grouped: "Clear grouping to reorder rows.",
+    "single-row": "At least two rows are needed to reorder.",
+    sorted: "Clear sorting to reorder rows.",
+    "virtual-scroll": "Row reordering isn't available while virtual scrolling is enabled."
+};
+class GridRowReorderHandleComponent {
+    constructor() {
+        this.#gridService = inject(GridService);
+        this.#liveAnnouncer = inject(LiveAnnouncer);
+        this.ariaLabel = computed(() => {
+            const absoluteIndex = this.pageIndex() + this.#gridService.paginationState().skip;
+            const label = this.#gridService.getRowReorderAriaLabel(this.row(), absoluteIndex);
+            const reasonText = this.disabledReasonText();
+            const suffix = reasonText == null ? "" : ` ${reasonText}`;
+            return `${label}. Use Alt plus Up Arrow or Alt plus Down Arrow to move.${suffix}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => !this.#gridService.canReorderRow(this.row()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.disabledReasonText = computed(() => {
+            const reason = this.#gridService.rowReorderDisabledReason();
+            return reason == null ? null : ROW_REORDER_DISABLED_REASON_TEXT[reason];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledReasonText" }] : /* istanbul ignore next */ []));
+        this.handleClass = computed(() => gridRowReorderHandleThemeVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handleClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The row's position within the current page, used to move the row and derive its accessible label.
+         */
+        this.pageIndex = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The grid row whose reorder handle this button controls.
+         */
+        this.row = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    }
+    #gridService;
+    #liveAnnouncer;
+    onKeydown(event) {
+        if ((event.key !== "ArrowUp" && event.key !== "ArrowDown") || !event.altKey) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const direction = event.key === "ArrowUp" ? -1 : 1;
+        const targetIndex = this.pageIndex() + direction;
+        if (targetIndex < 0 || targetIndex >= this.#gridService.viewPageRows().length) {
+            return;
+        }
+        const moved = this.#gridService.requestRowReorder(this.row(), this.pageIndex(), targetIndex);
+        if (moved) {
+            const skip = this.#gridService.paginationState().skip;
+            this.#liveAnnouncer.announce(`Moved row ${skip + this.pageIndex() + 1} to position ${skip + targetIndex + 1}.`);
+        }
+    }
+    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    <i aria-hidden=\"true\" class=\"ri-draggable\"></i>\n</button>\n", dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowReorderHandleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-grid-row-reorder-handle", imports: [CdkDragHandle], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "(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    <i aria-hidden=\"true\" class=\"ri-draggable\"></i>\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 {
+    constructor() {
+        this.#gridService = inject(GridService);
+        this.ariaLabel = computed(() => {
+            const labelFn = this.#gridService.selectableOptions().rowAriaLabel;
+            if (labelFn) {
+                return labelFn(this.row().data);
+            }
+            return `Select row ${this.rowIndex() + 1}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.checked = computed(() => this.#gridService.isRowSelected(this.row()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        this.hostClass = computed(() => gridSelectionCellThemeVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The grid row whose selected state this checkbox controls.
+         */
+        this.row = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The row's position within its rendered list, used to derive a default accessible label.
+         */
+        this.rowIndex = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
+    }
+    #gridService;
+    onCheckedChange(checked) {
+        this.#gridService.setRowSelected(this.row(), checked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridSelectionCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: GridSelectionCheckboxComponent, isStandalone: true, selector: "mona-grid-selection-checkbox", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "$event.stopPropagation()" }, properties: { "class": "hostClass()" } }, ngImport: i0, template: "<mona-check-box\n    [checked]=\"checked()\"\n    (checkedChange)=\"onCheckedChange($event)\">\n    <span class=\"sr-only\">{{ ariaLabel() }}</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: GridSelectionCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-grid-selection-checkbox", imports: [CheckBoxComponent], host: {
+                        "[class]": "hostClass()",
+                        "(click)": "$event.stopPropagation()"
+                    }, 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 {
     constructor() {
         this.collapseIcon = computed(() => {
@@ -793,5 +907,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             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 h-full 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 }] }] } });
 
-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 };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-toggle.component-QDo6TweF.mjs.map
+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-DE3ffsva.mjs.map