@nanahoshi/mona-ui 0.8.0 → 0.10.0

package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DWzYyGnb.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DaOemy_G.mjs}

@@ -1,6 +1,6 @@
 import { PreventableEvent, deepEquals } from '@nanahoshi/mona-ui/common';
 import * as i0 from '@angular/core';
-import { Directive, inject, DOCUMENT, signal, computed, Injector, PLATFORM_ID, effect, Injectable, input, contentChildren, untracked, DestroyRef, output, afterNextRender, model, afterRenderEffect, InjectionToken, contentChild, TemplateRef, forwardRef, Component, ChangeDetectionStrategy, ElementRef, Pipe, linkedSignal, viewChild } from '@angular/core';
+import { Directive, signal, inject, DOCUMENT, computed, Injector, PLATFORM_ID, effect, Injectable, input, contentChildren, untracked, DestroyRef, output, afterNextRender, model, afterRenderEffect, isDevMode, InjectionToken, contentChild, TemplateRef, forwardRef, Component, ChangeDetectionStrategy, ElementRef, Pipe, linkedSignal, viewChild } from '@angular/core';
 import { isPlatformBrowser, DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { form } from '@angular/forms/signals';
@@ -29,6 +29,7 @@ import { DatePickerComponent } from '@nanahoshi/mona-ui/date-picker';
 import { DropdownListComponent } from '@nanahoshi/mona-ui/dropdown-list';
 import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
 import { TextBoxComponent } from '@nanahoshi/mona-ui/text-box';
+import { CheckBoxComponent } from '@nanahoshi/mona-ui/check-box';
 
 class CellEditEvent extends PreventableEvent {
     #options;
@@ -164,8 +165,35 @@ class Row {
     }
 }
 
+class RowReorderEvent extends PreventableEvent {
+    #options;
+    constructor(options) {
+        super("rowReorder");
+        this.#options = options;
+    }
+    get currentIndex() {
+        return this.#options.currentIndex;
+    }
+    get currentPageIndex() {
+        return this.#options.currentPageIndex;
+    }
+    get previousIndex() {
+        return this.#options.previousIndex;
+    }
+    get previousPageIndex() {
+        return this.#options.previousPageIndex;
+    }
+    get reorderedData() {
+        return this.#options.reorderedData;
+    }
+    get rowData() {
+        return this.#options.rowData;
+    }
+}
+
 const GRID_STATE_VERSION = 1;
 class GridService {
+    #anchorRowKey;
     #document;
     #editContext;
     #editSession;
@@ -177,12 +205,19 @@ class GridService {
     #platformId;
     #reorderableOptions;
     #resizableOptions;
+    #rowReorderableOptions;
     #scrollbarGutterMeasurementSource;
     #scrollbarGutterWidth;
     #rowUidByData;
     #rowUidByKeyObject;
     #textMeasureCache;
+    // Counts how many *selected* keys fall inside the current selection scope, iterating the
+    // (usually much smaller) selection rather than rescanning the whole scope on every toggle.
+    #bulkSelectionRowKeys;
+    #bulkSelectionSelectedCount;
     constructor() {
+        this.#anchorRowKey = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#anchorRowKey" }] : /* istanbul ignore next */ []));
         this.#document = inject(DOCUMENT);
         this.#editContext = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#editContext" }] : /* istanbul ignore next */ []));
@@ -190,7 +225,7 @@ class GridService {
         ...(ngDevMode ? [{ debugName: "#editSession" }] : /* istanbul ignore next */ []));
         this.#editSource = computed(() => this.rows()
             .select(r => ({ $rowId: r.uid, ...r.data }))
-            .toImmutableSet(), /* @ts-ignore */
+            .toImmutableList(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#editSource" }] : /* istanbul ignore next */ []));
         this.#filterableOptions = signal({ enabled: false, type: "menu" }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#filterableOptions" }] : /* istanbul ignore next */ []));
@@ -204,6 +239,8 @@ class GridService {
         ...(ngDevMode ? [{ debugName: "#reorderableOptions" }] : /* istanbul ignore next */ []));
         this.#resizableOptions = signal({ enabled: false }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#resizableOptions" }] : /* istanbul ignore next */ []));
+        this.#rowReorderableOptions = signal({ enabled: false }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#rowReorderableOptions" }] : /* istanbul ignore next */ []));
         this.#scrollbarGutterMeasurementSource = signal("fallback", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#scrollbarGutterMeasurementSource" }] : /* istanbul ignore next */ []));
         this.#scrollbarGutterWidth = signal(0, /* @ts-ignore */
@@ -219,6 +256,35 @@ class GridService {
         this.addRowVisible = computed(() => this.addRowData() != null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "addRowVisible" }] : /* istanbul ignore next */ []));
         this.add$ = new Subject();
+        // Counts how many *selected* keys fall inside the current selection scope, iterating the
+        // (usually much smaller) selection rather than rescanning the whole scope on every toggle.
+        this.#bulkSelectionRowKeys = computed(() => {
+            const keys = new Set();
+            for (const row of this.bulkSelectionRows()) {
+                keys.add(this.getRowSelectionKey(row));
+            }
+            return keys;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#bulkSelectionRowKeys" }] : /* istanbul ignore next */ []));
+        this.#bulkSelectionSelectedCount = computed(() => {
+            const scopeKeys = this.#bulkSelectionRowKeys();
+            if (scopeKeys.size === 0) {
+                return 0;
+            }
+            let count = 0;
+            for (const key of this.selectedKeys()) {
+                if (scopeKeys.has(key)) {
+                    count++;
+                }
+            }
+            return count;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#bulkSelectionSelectedCount" }] : /* istanbul ignore next */ []));
+        this.allBulkSelectionRowsSelected = computed(() => {
+            const scopeSize = this.#bulkSelectionRowKeys().size;
+            return scopeSize > 0 && this.#bulkSelectionSelectedCount() === scopeSize;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allBulkSelectionRowsSelected" }] : /* istanbul ignore next */ []));
         this.aggregateColumns = computed(() => {
             return this.visibleColumns()
                 .where(column => column.kind === "data" && column.aggregate != null)
@@ -247,6 +313,14 @@ class GridService {
         ...(ngDevMode ? [{ debugName: "bodyScrollElement" }] : /* istanbul ignore next */ []));
         this.bodyTableElement = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bodyTableElement" }] : /* istanbul ignore next */ []));
+        this.bulkSelectionRows = computed(() => {
+            const options = this.selectableOptions();
+            if (options.selectAllScope === "page" && !this.virtualScrollOptions().enabled) {
+                return this.viewPageRows();
+            }
+            return this.viewRows();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bulkSelectionRows" }] : /* istanbul ignore next */ []));
         this.cellEdit$ = new Subject();
         this.cancel$ = new Subject();
         /** Set of currently collapsed group keys (global, shared by both paginated and virtual list). */
@@ -260,6 +334,10 @@ class GridService {
         this.contextMenuItems = signal(ImmutableSet.create(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contextMenuItems" }] : /* istanbul ignore next */ []));
         this.detailColumnWidth = 36;
+        this.detailColumnOffset = computed(() => this.structuralColumnOffset("detail", this.groupStructuralWidth()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "detailColumnOffset" }] : /* istanbul ignore next */ []));
+        this.detailStructuralWidth = computed(() => this.masterDetailTemplate() != null ? this.detailColumnWidth : 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "detailStructuralWidth" }] : /* istanbul ignore next */ []));
         this.editBaseDict = computed(() => {
             const pairs = this.#editSource().select(item => new KeyValuePair(item.$rowId, item));
             return ImmutableDictionary.create(pairs);
@@ -280,8 +358,6 @@ class GridService {
         this.editSession = this.#editSession.asReadonly();
         this.editableOptions = signal({ enabled: false, mode: "cell" }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "editableOptions" }] : /* istanbul ignore next */ []));
-        this.editableRowKey = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "editableRowKey" }] : /* istanbul ignore next */ []));
         this.editingRowUid = computed(() => this.#editContext()?.rowUid ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "editingRowUid" }] : /* istanbul ignore next */ []));
         this.expandedKeys = signal(ImmutableSet.create(), /* @ts-ignore */
@@ -312,9 +388,13 @@ class GridService {
                 .toImmutableList();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupColumns" }] : /* istanbul ignore next */ []));
+        this.groupStructuralWidth = computed(() => this.groupColumns().length * this.groupColumnWidth, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupStructuralWidth" }] : /* istanbul ignore next */ []));
         this.groupableOptions = signal({ enabled: false, showFooter: false }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupableOptions" }] : /* istanbul ignore next */ []));
-        this.hasLeftLockedColumns = computed(() => this.visibleColumns().any(column => column.locked && column.lockedPosition === "left"), /* @ts-ignore */
+        this.hasLeftLockedColumns = computed(() => this.rowReorderColumnVisible() ||
+            this.selectionColumnVisible() ||
+            this.visibleColumns().any(column => column.locked && column.lockedPosition === "left"), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasLeftLockedColumns" }] : /* istanbul ignore next */ []));
         this.hasFooter = computed(() => this.aggregateColumns().any(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
@@ -325,13 +405,24 @@ class GridService {
         this.horizontalScrollLeft = this.#horizontalScrollLeft.asReadonly();
         this.isInEditMode = computed(() => this.#editSession() != null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isInEditMode" }] : /* istanbul ignore next */ []));
+        this.lastLeftStructuralOffset = computed(() => {
+            if (this.visibleColumns().any(column => column.locked && column.lockedPosition === "left")) {
+                return null;
+            }
+            const visible = this.visibleStructuralColumns();
+            const lastVisible = visible[visible.length - 1];
+            if (lastVisible != null) {
+                return this.structuralColumnOffset(lastVisible.kind, this.groupStructuralWidth());
+            }
+            const groupCount = this.groupColumns().length;
+            return groupCount > 0 ? (groupCount - 1) * this.groupColumnWidth : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastLeftStructuralOffset" }] : /* istanbul ignore next */ []));
         this.leftLockedStructuralWidth = computed(() => {
             if (!this.hasLeftLockedColumns()) {
                 return 0;
             }
-            const groupWidth = this.groupColumnWidth * this.groupColumns().length;
-            const detailWidth = this.masterDetailTemplate() != null ? this.detailColumnWidth : 0;
-            return groupWidth + detailWidth;
+            return this.leadingStructuralWidth();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leftLockedStructuralWidth" }] : /* istanbul ignore next */ []));
         this.lockedColumnStates = computed(() => {
@@ -339,7 +430,7 @@ class GridService {
             const columns = this.visibleColumns().toArray();
             const leftColumns = columns.filter(column => column.locked && column.lockedPosition === "left");
             const rightColumns = columns.filter(column => column.locked && column.lockedPosition === "right");
-            let leftOffset = this.leftLockedStructuralWidth();
+            let leftOffset = this.leadingStructuralWidth();
             for (const [index, column] of leftColumns.entries()) {
                 states.set(column.id, {
                     edge: index === leftColumns.length - 1,
@@ -360,17 +451,21 @@ class GridService {
             return states;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lockedColumnStates" }] : /* istanbul ignore next */ []));
+        this.leadingStructuralWidth = computed(() => this.groupStructuralWidth() +
+            this.visibleStructuralColumns().reduce((total, column) => total + column.width, 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leadingStructuralWidth" }] : /* istanbul ignore next */ []));
+        this.leadingStructuralColumnCount = computed(() => this.groupColumns().length + this.visibleStructuralColumns().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leadingStructuralColumnCount" }] : /* istanbul ignore next */ []));
+        this.leadingLogicalColumnCount = computed(() => this.visibleStructuralColumns().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leadingLogicalColumnCount" }] : /* istanbul ignore next */ []));
         this.masterDetailEmptyCellWidth = computed(() => {
             return this.detailColumnWidth * (this.groupColumns().length + 1);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "masterDetailEmptyCellWidth" }] : /* istanbul ignore next */ []));
         this.masterDetailRowWidth = computed(() => {
-            const groupColumns = this.groupColumns();
             const columns = this.visibleColumns();
-            const groupColumnWidth = this.groupColumnWidth;
-            const groupColumnCount = groupColumns.length;
             const columnListWidth = columns.aggregate((acc, c) => acc + this.getColumnWidth(c), 0);
-            return this.normalizeRenderedWidth(groupColumnWidth * (groupColumnCount + 1) + columnListWidth);
+            return this.normalizeRenderedWidth(this.leadingStructuralWidth() + columnListWidth);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "masterDetailRowWidth" }] : /* istanbul ignore next */ []));
         this.masterDetailTemplate = signal(null, /* @ts-ignore */
@@ -382,17 +477,66 @@ class GridService {
         this.remove$ = new Subject();
         this.reorderableOptions = this.#reorderableOptions.asReadonly();
         this.resizableOptions = this.#resizableOptions.asReadonly();
+        this.rowDragInProgress = computed(() => this.draggingRowUid() != null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowDragInProgress" }] : /* istanbul ignore next */ []));
         this.rowEdit$ = new Subject();
-        this.rows = signal(ImmutableSet.create(), /* @ts-ignore */
+        this.rowKey = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
+        this.rowReorder$ = new Subject();
+        this.rowReorderColumnOffset = computed(() => this.structuralColumnOffset("reorder", this.groupStructuralWidth()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowReorderColumnOffset" }] : /* istanbul ignore next */ []));
+        this.rowReorderColumnVisible = computed(() => this.rowReorderableOptions().enabled === true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowReorderColumnVisible" }] : /* istanbul ignore next */ []));
+        this.rowReorderColumnWidth = 36;
+        this.rowReorderDisabledReason = computed(() => {
+            if (!this.rowReorderableOptions().enabled) {
+                return "disabled";
+            }
+            if (this.virtualScrollOptions().enabled) {
+                return "virtual-scroll";
+            }
+            if (this.groupColumns().any()) {
+                return "grouped";
+            }
+            if (!this.appliedSorts().isEmpty()) {
+                return "sorted";
+            }
+            if (!this.appliedFilters().isEmpty()) {
+                return "filtered";
+            }
+            if (this.isInEditMode()) {
+                return "editing";
+            }
+            if (this.viewPageRows().length < 2) {
+                return "single-row";
+            }
+            return null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowReorderDisabledReason" }] : /* istanbul ignore next */ []));
+        this.rowReorderInteractionEnabled = computed(() => this.rowReorderDisabledReason() == null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowReorderInteractionEnabled" }] : /* istanbul ignore next */ []));
+        this.rowReorderStructuralWidth = computed(() => this.rowReorderColumnVisible() ? this.rowReorderColumnWidth : 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowReorderStructuralWidth" }] : /* istanbul ignore next */ []));
+        this.rowReorderableOptions = this.#rowReorderableOptions.asReadonly();
+        this.rows = signal(ImmutableList.create(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
         this.save$ = new Subject();
+        this.draggingRowUid = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draggingRowUid" }] : /* istanbul ignore next */ []));
         this.scrollEnd$ = new Subject();
         this.scrollEndThreshold = signal(5, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "scrollEndThreshold" }] : /* istanbul ignore next */ []));
         this.scrollbarGutterWidth = this.#scrollbarGutterWidth.asReadonly();
         this.selectBy = signal("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectBy" }] : /* istanbul ignore next */ []));
-        this.selectableOptions = signal({ enabled: false, mode: "single" }, /* @ts-ignore */
+        this.selectableOptions = signal({
+            enabled: false,
+            mode: "single",
+            selectAllScope: "page",
+            selectOnRowClick: false,
+            showCheckboxes: false,
+            showSelectAll: true
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectableOptions" }] : /* istanbul ignore next */ []));
         this.selectedKeys = signal(ImmutableSet.create(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
@@ -400,12 +544,27 @@ class GridService {
         this.selectedKeysLoad$ = new BehaviorSubject(ImmutableSet.create());
         this.selectedRows = computed(() => {
             const selectedKeys = this.selectedKeys();
-            return selectedKeys
-                .select(key => this.rows().firstOrDefault(r => this.getRowSelectionKey(r) === key))
-                .where(i => i != null)
+            return this.rows()
+                .where(row => selectedKeys.contains(this.getRowSelectionKey(row)))
                 .toImmutableSet();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
+        this.selectionColumnWidth = 40;
+        this.selectionColumnVisible = computed(() => {
+            const options = this.selectableOptions();
+            return options.enabled === true && options.showCheckboxes === true;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionColumnVisible" }] : /* istanbul ignore next */ []));
+        this.selectionColumnOffset = computed(() => this.structuralColumnOffset("selection", this.groupStructuralWidth()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionColumnOffset" }] : /* istanbul ignore next */ []));
+        this.selectionStructuralWidth = computed(() => this.selectionColumnVisible() ? this.selectionColumnWidth : 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionStructuralWidth" }] : /* istanbul ignore next */ []));
+        this.someBulkSelectionRowsSelected = computed(() => {
+            const scopeSize = this.#bulkSelectionRowKeys().size;
+            const count = this.#bulkSelectionSelectedCount();
+            return count > 0 && count < scopeSize;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "someBulkSelectionRowsSelected" }] : /* istanbul ignore next */ []));
         this.sortableOptions = signal({
             enabled: false,
             mode: "single",
@@ -413,6 +572,25 @@ class GridService {
             showIndices: true
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sortableOptions" }] : /* istanbul ignore next */ []));
+        this.structuralColIndexMap = computed(() => {
+            const map = new Map();
+            this.visibleStructuralColumns().forEach((column, index) => map.set(column.kind, index));
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "structuralColIndexMap" }] : /* istanbul ignore next */ []));
+        // Single source of truth for structural-column left-to-right order; every offset/colIndex
+        // consumer derives its answer from this array instead of independently re-deriving the order.
+        this.structuralColumns = computed(() => [
+            { kind: "reorder", visible: this.rowReorderColumnVisible(), width: this.rowReorderColumnWidth },
+            { kind: "detail", visible: this.masterDetailTemplate() != null, width: this.detailColumnWidth },
+            { kind: "selection", visible: this.selectionColumnVisible(), width: this.selectionColumnWidth }
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "structuralColumns" }] : /* istanbul ignore next */ []));
+        this.structuralLastKind = computed(() => {
+            const visible = this.visibleStructuralColumns();
+            return visible.length > 0 ? visible[visible.length - 1].kind : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "structuralLastKind" }] : /* istanbul ignore next */ []));
         this.tableWidth = computed(() => {
             const columns = this.visibleColumns();
             if (!columns.any()) {
@@ -422,9 +600,7 @@ class GridService {
                 return null;
             }
             const dataWidth = columns.aggregate((acc, c) => acc + this.getColumnWidth(c), 0);
-            const groupWidth = this.groupColumnWidth * this.groupColumns().length;
-            const detailWidth = this.masterDetailTemplate() != null ? this.detailColumnWidth : 0;
-            return this.normalizeRenderedWidth(dataWidth + groupWidth + detailWidth);
+            return this.normalizeRenderedWidth(dataWidth + this.leadingStructuralWidth());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tableWidth" }] : /* istanbul ignore next */ []));
         this.viewPageRows = computed(() => {
@@ -432,9 +608,9 @@ class GridService {
             const take = this.paginationState().take;
             const viewRows = this.viewRows();
             if (!viewRows.any()) {
-                return ImmutableSet.create();
+                return ImmutableList.create();
             }
-            return viewRows.skip(skip).take(take).toImmutableSet();
+            return viewRows.skip(skip).take(take).toImmutableList();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewPageRows" }] : /* istanbul ignore next */ []));
         this.viewRowCount = computed(() => this.viewRows().size(), /* @ts-ignore */
@@ -463,7 +639,7 @@ class GridService {
                 queryEnumerable = queryEnumerable.sort(sortState, r => r.data);
             }
             const result = queryEnumerable.run();
-            return ImmutableSet.create(result);
+            return ImmutableList.create(result);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewRows" }] : /* istanbul ignore next */ []));
         this.virtualGridMaxBuffer = computed(() => this.virtualGridMinBuffer() * 1.42857, /* @ts-ignore */
@@ -476,6 +652,8 @@ class GridService {
             .where(column => !column.hidden)
             .toImmutableList(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+        this.visibleStructuralColumns = computed(() => this.structuralColumns().filter(c => c.visible), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleStructuralColumns" }] : /* istanbul ignore next */ []));
         this.#scrollbarGutterWidth.set(this.measureFallbackScrollbarGutter());
         this.setHorizontalScrollSyncEffects();
         this.setScrollbarGutterEffects();
@@ -550,6 +728,13 @@ class GridService {
         }
         return { ignoredColumns, missingColumns, status: "applied" };
     }
+    canReorderRow(row) {
+        if (!this.rowReorderInteractionEnabled()) {
+            return false;
+        }
+        const predicate = this.rowReorderableOptions().canReorder;
+        return predicate?.(row.data) !== false;
+    }
     cancelAddRow(originalEvent) {
         const session = this.#editSession();
         if (session == null || session.operation !== "create") {
@@ -661,6 +846,9 @@ class GridService {
     deselectAllRows() {
         this.selectedKeys.update(set => set.clear());
     }
+    deselectRow(row) {
+        this.setRowSelected(row, false);
+    }
     findTextWidthOfColumn(column, element) {
         if (!isPlatformBrowser(this.#platformId)) {
             return 0;
@@ -708,19 +896,36 @@ class GridService {
             dir: c.groupSortDirection ?? undefined
         })).toArray();
     }
+    getRowReorderAriaLabel(row, absoluteIndex) {
+        const options = this.rowReorderableOptions();
+        const label = options.rowAriaLabel?.(row.data, absoluteIndex);
+        return label ?? `Reorder row ${absoluteIndex + 1}`;
+    }
     handleMultipleSelection(event, row) {
-        if (!this.selectedRows().contains(row)) {
-            this.selectRow(row);
+        if (event.shiftKey) {
+            this.selectRowRange(row);
+            return;
         }
-        else if (event.ctrlKey || event.metaKey) {
-            this.selectedKeys.update(set => set.remove(this.getRowSelectionKey(row)));
+        if (event.ctrlKey || event.metaKey) {
+            if (this.isRowSelected(row)) {
+                this.deselectRow(row);
+            }
+            else {
+                this.selectRow(row);
+            }
+            this.#anchorRowKey.set(this.getRowSelectionKey(row));
+            return;
         }
+        this.deselectAllRows();
+        this.selectRow(row);
+        this.#anchorRowKey.set(this.getRowSelectionKey(row));
     }
     handleRowClick(event, row) {
-        if (!this.isSelectableGrid()) {
+        const options = this.selectableOptions();
+        if (!options.enabled || options.selectOnRowClick === false) {
             return;
         }
-        if (this.selectableOptions().mode === "single") {
+        if (options.mode === "single") {
             this.handleSingleSelection(event, row);
         }
         else {
@@ -730,23 +935,19 @@ class GridService {
     handleSingleSelection(event, row) {
         if (this.isRowSelected(row) && (event.ctrlKey || event.metaKey)) {
             this.deselectAllRows();
+            return;
         }
-        else {
-            this.deselectAllRows();
-            this.selectRow(row);
-        }
+        this.deselectAllRows();
+        this.selectRow(row);
     }
     isGroupCollapsed(groupKey) {
         return this.collapsedGroupKeys().contains(groupKey);
     }
     isRowExpanded(row) {
-        return this.expandedKeys().contains(this.getRowSelectionKey(row));
+        return this.expandedKeys().contains(row.uid);
     }
     isRowSelected(row) {
-        return this.selectedRows().contains(row);
-    }
-    isSelectableGrid() {
-        return !!this.selectableOptions().enabled;
+        return this.selectedKeys().contains(this.getRowSelectionKey(row));
     }
     loadFilters(filters) {
         const newAppliedFilters = new Dictionary();
@@ -873,6 +1074,49 @@ class GridService {
         this.remove$.next(event);
         return !event.isDefaultPrevented();
     }
+    requestRowReorder(row, previousPageIndex, currentPageIndex) {
+        if (!this.rowReorderInteractionEnabled()) {
+            return false;
+        }
+        if (previousPageIndex === currentPageIndex) {
+            return false;
+        }
+        if (!this.canReorderRow(row)) {
+            return false;
+        }
+        const pageRows = this.viewPageRows();
+        if (previousPageIndex < 0 ||
+            previousPageIndex >= pageRows.length ||
+            currentPageIndex < 0 ||
+            currentPageIndex >= pageRows.length) {
+            return false;
+        }
+        const pageRow = pageRows.get(previousPageIndex);
+        if (pageRow == null || pageRow.uid !== row.uid) {
+            return false;
+        }
+        const skip = this.paginationState().skip;
+        const previousIndex = skip + previousPageIndex;
+        const currentIndex = skip + currentPageIndex;
+        const reorderedData = this.rows()
+            .select(sourceRow => sourceRow.data)
+            .toArray();
+        const [moved] = reorderedData.splice(previousIndex, 1);
+        if (moved == null) {
+            return false;
+        }
+        reorderedData.splice(currentIndex, 0, moved);
+        const event = new RowReorderEvent({
+            currentIndex,
+            currentPageIndex,
+            previousIndex,
+            previousPageIndex,
+            reorderedData,
+            rowData: row.data
+        });
+        this.rowReorder$.next(event);
+        return !event.isDefaultPrevented();
+    }
     resolveAggregateValue(bucket, aggregateFunction) {
         if (bucket == null || aggregateFunction == null || aggregateFunction === "custom") {
             return null;
@@ -908,8 +1152,23 @@ class GridService {
         return true;
     }
     selectRow(row) {
-        const key = this.getRowSelectionKey(row);
-        this.selectedKeys.update(set => set.add(key));
+        this.setRowSelected(row, true);
+    }
+    setBulkSelection(selected) {
+        if (this.selectableOptions().mode !== "multiple") {
+            return;
+        }
+        const keys = this.bulkSelectionRows()
+            .select(row => this.getRowSelectionKey(row))
+            .toArray();
+        if (selected) {
+            this.selectedKeys.update(currentKeys => currentKeys.addAll(keys));
+            return;
+        }
+        // ImmutableSet#exceptWith scans the removal list per retained element (O(n*m)); for large
+        // virtualized grids that pairing is expensive, so filter through a native Set (O(n)) instead.
+        const keysToRemove = new Set(keys);
+        this.selectedKeys.update(currentKeys => ImmutableSet.create([...currentKeys].filter(key => !keysToRemove.has(key))));
     }
     setCalculatedWidth(columnId, value) {
         this.updateColumn(columnId, { calculatedWidth: value });
@@ -986,15 +1245,31 @@ class GridService {
         this.#resizableOptions.update(v => ({ ...v, ...options }));
     }
     setRowExpanded(row, expanded) {
-        const key = this.getRowSelectionKey(row);
-        this.expandedKeys.update(set => (expanded ? set.add(key) : set.remove(key)));
+        this.expandedKeys.update(keys => (expanded ? keys.add(row.uid) : keys.remove(row.uid)));
+    }
+    setRowReorderableOptions(options) {
+        this.#rowReorderableOptions.set(options);
     }
     setRows(value, rowKey = null) {
-        this.rows.set(ImmutableSet.create(select(value, r => new Row(r, this.getRowUid(r, rowKey)))));
+        this.rows.set(ImmutableList.create(select(value, r => new Row(r, this.getRowUid(r, rowKey)))));
     }
     setSelectableOptions(options) {
         this.selectableOptions.update(v => ({ ...v, ...options }));
     }
+    setRowSelected(row, selected) {
+        const key = this.getRowSelectionKey(row);
+        const mode = this.selectableOptions().mode;
+        if (selected) {
+            if (mode === "single") {
+                this.selectedKeys.set(ImmutableSet.create([key]));
+            }
+            else {
+                this.selectedKeys.update(keys => keys.add(key));
+            }
+            return;
+        }
+        this.selectedKeys.update(keys => keys.remove(key));
+    }
     setSortableOptions(options) {
         this.sortableOptions.update(v => ({ ...v, ...options }));
     }
@@ -1135,6 +1410,16 @@ class GridService {
         this.clearEditSession();
         return true;
     }
+    structuralColumnOffset(kind, groupPrefixWidth) {
+        let offset = groupPrefixWidth;
+        for (const column of this.visibleStructuralColumns()) {
+            if (column.kind === kind) {
+                return offset;
+            }
+            offset += column.width;
+        }
+        return offset;
+    }
     toggleGroupCollapse(groupKey) {
         this.collapsedGroupKeys.update(keys => (keys.contains(groupKey) ? keys.remove(groupKey) : keys.add(groupKey)));
     }
@@ -1383,6 +1668,30 @@ class GridService {
             sortIndex: previous?.sortIndex ?? null
         };
     }
+    // Range selection is scoped to bulkSelectionRows() (current page, or full view when virtualized/
+    // view-scoped) since that's the same click-reachable ordering used for the select-all checkbox.
+    selectRowRange(row) {
+        const anchorKey = this.#anchorRowKey();
+        const targetKey = this.getRowSelectionKey(row);
+        if (anchorKey == null) {
+            this.deselectAllRows();
+            this.selectRow(row);
+            this.#anchorRowKey.set(targetKey);
+            return;
+        }
+        const rows = this.bulkSelectionRows().toArray();
+        const anchorIndex = rows.findIndex(r => this.getRowSelectionKey(r) === anchorKey);
+        const targetIndex = rows.findIndex(r => this.getRowSelectionKey(r) === targetKey);
+        if (anchorIndex === -1 || targetIndex === -1) {
+            this.deselectAllRows();
+            this.selectRow(row);
+            this.#anchorRowKey.set(targetKey);
+            return;
+        }
+        const [start, end] = anchorIndex <= targetIndex ? [anchorIndex, targetIndex] : [targetIndex, anchorIndex];
+        const rangeKeys = rows.slice(start, end + 1).map(r => this.getRowSelectionKey(r));
+        this.selectedKeys.set(ImmutableSet.create(rangeKeys));
+    }
     clearEditSession() {
         this.#editContext.set(null);
         this.#editSession.set(null);
@@ -1770,11 +2079,6 @@ class GridEditableDirective {
          * @description Emitted when a row edit is committed (row mode only).
          */
         this.rowEdit = output();
-        /**
-         * @description Field name or selector used to keep edited row identity stable when data is rebound.
-         */
-        this.rowKey = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
         /**
          * @description Emitted before an edited or new row is saved.
          */
@@ -1790,10 +2094,6 @@ class GridEditableDirective {
                 }
             });
         });
-        effect(() => {
-            const rowKey = this.rowKey();
-            untracked(() => this.#gridService.editableRowKey.set(rowKey));
-        });
         effect(() => {
             const factory = this.newRowFactory();
             untracked(() => this.#gridService.setNewRowFactory(factory));
@@ -1820,14 +2120,14 @@ class GridEditableDirective {
         this.#gridService.save$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => this.save.emit(event));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridEditableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridEditableDirective, isStandalone: true, selector: "mona-grid[monaGridEditable]", inputs: { newRowFactory: { classPropertyName: "newRowFactory", publicName: "newRowFactory", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "monaGridEditable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { add: "add", cancel: "cancel", cellEdit: "cellEdit", edit: "edit", remove: "remove", rowEdit: "rowEdit", save: "save" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridEditableDirective, isStandalone: true, selector: "mona-grid[monaGridEditable]", inputs: { newRowFactory: { classPropertyName: "newRowFactory", publicName: "newRowFactory", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "monaGridEditable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { add: "add", cancel: "cancel", cellEdit: "cellEdit", edit: "edit", remove: "remove", rowEdit: "rowEdit", save: "save" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridEditableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "mona-grid[monaGridEditable]"
                 }]
-        }], ctorParameters: () => [], propDecorators: { add: [{ type: i0.Output, args: ["add"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], edit: [{ type: i0.Output, args: ["edit"] }], newRowFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "newRowFactory", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaGridEditable", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], rowEdit: [{ type: i0.Output, args: ["rowEdit"] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], save: [{ type: i0.Output, args: ["save"] }] } });
+        }], ctorParameters: () => [], propDecorators: { add: [{ type: i0.Output, args: ["add"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], edit: [{ type: i0.Output, args: ["edit"] }], newRowFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "newRowFactory", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaGridEditable", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], rowEdit: [{ type: i0.Output, args: ["rowEdit"] }], save: [{ type: i0.Output, args: ["save"] }] } });
 
 class GridFilterableDirective {
     #destroyRef;
@@ -2091,6 +2391,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { columnResize: [{ type: i0.Output, args: ["columnResize"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaGridResizable", required: false }] }] } });
 
+class GridRowReorderableDirective {
+    #destroyRef;
+    #gridService;
+    #hasWarnedMissingRowKey;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#gridService = inject(GridService);
+        this.#hasWarnedMissingRowKey = false;
+        /**
+         * @description Enables row reordering via the reorder-handle column. Pass a `RowReorderableOptions`
+         * object to configure it explicitly.
+         * @default ""
+         */
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaGridRowReorderable" });
+        /**
+         * @description Emitted when a row is moved to a new position. The event carries the moved row,
+         * source- and page-relative indices, and the complete reordered application data.
+         */
+        this.rowReorder = output();
+        effect(() => {
+            const options = this.options();
+            const enabled = options === "" || options.enabled !== false;
+            const missingRowKey = enabled && this.#gridService.rowKey() == null;
+            untracked(() => {
+                if (options === "") {
+                    this.#gridService.setRowReorderableOptions({ enabled: true });
+                }
+                else {
+                    this.#gridService.setRowReorderableOptions(options);
+                }
+                if (missingRowKey && isDevMode() && !this.#hasWarnedMissingRowKey) {
+                    this.#hasWarnedMissingRowKey = true;
+                    console.warn("[mona-ui] Row reordering is enabled on <mona-grid> but no [rowKey] is set. " +
+                        "Row identity may not stay stable when data is rebound after a reorder; set [rowKey] " +
+                        "or ensure the consumer reuses the same object references when applying reorderedData.");
+                }
+            });
+        });
+        afterNextRender({
+            read: () => this.#setSubscriptions()
+        });
+    }
+    #setSubscriptions() {
+        this.#gridService.rowReorder$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            this.rowReorder.emit(event);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowReorderableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridRowReorderableDirective, isStandalone: true, selector: "mona-grid[monaGridRowReorderable]", inputs: { options: { classPropertyName: "options", publicName: "monaGridRowReorderable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowReorder: "rowReorder" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowReorderableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mona-grid[monaGridRowReorderable]"
+                }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaGridRowReorderable", required: false }] }], rowReorder: [{ type: i0.Output, args: ["rowReorder"] }] } });
+
 class GridSelectableDirective {
     #destroyRef;
     #gridService;
@@ -2139,7 +2496,7 @@ class GridSelectableDirective {
             const selectedKeys = this.selectedKeys();
             untracked(() => {
                 const alreadySelectedKeys = this.#gridService.selectedKeys();
-                if (sequenceEqual(orderBy(alreadySelectedKeys, k => k), orderBy(selectedKeys, k => k))) {
+                if (setsEqual(alreadySelectedKeys, ImmutableSet.create(selectedKeys))) {
                     return;
                 }
                 this.#gridService.loadSelectedKeys(selectedKeys);
@@ -2153,7 +2510,7 @@ class GridSelectableDirective {
         this.#gridService.selectedKeysChange$
             .pipe(startWith(this.#gridService.selectedKeys()), pairwise(), takeUntilDestroyed(this.#destroyRef))
             .subscribe(([oldKeys, newKeys]) => {
-            if (oldKeys.order().sequenceEqual(newKeys.order())) {
+            if (setsEqual(oldKeys, newKeys)) {
                 return;
             }
             this.selectedKeysChange.emit(newKeys.toArray());
@@ -2168,6 +2525,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     selector: "mona-grid[monaGridSelectable]"
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaGridSelectable", required: false }] }], selectBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectBy", required: false }] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }], selectedKeysChange: [{ type: i0.Output, args: ["selectedKeysChange"] }] } });
+function setsEqual(left, right) {
+    return left.size() === right.size() && left.all(value => right.contains(value));
+}
 
 class GridSortableDirective {
     #destroyRef;
@@ -2879,12 +3239,25 @@ class GridLockedCellDirective {
             if (column != null) {
                 return this.#gridService.lockedColumnStates().get(column.id) ?? null;
             }
+            const structuralColumn = this.structuralColumn();
+            if (structuralColumn != null) {
+                if (!this.#gridService.hasLeftLockedColumns()) {
+                    return null;
+                }
+                const groupPrefixWidth = this.groupPrefixWidth() ?? this.#gridService.groupStructuralWidth();
+                const offset = this.#gridService.structuralColumnOffset(structuralColumn, groupPrefixWidth);
+                return {
+                    edge: offset === this.#gridService.lastLeftStructuralOffset(),
+                    offset,
+                    side: "left"
+                };
+            }
             const structuralOffset = this.lockedStructuralOffset();
             if (structuralOffset == null || !this.#gridService.hasLeftLockedColumns()) {
                 return null;
             }
             return {
-                edge: false,
+                edge: structuralOffset === this.#gridService.lastLeftStructuralOffset(),
                 offset: structuralOffset,
                 side: "left"
             };
@@ -2899,15 +3272,19 @@ class GridLockedCellDirective {
         ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
         this.column = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "column" }] : /* istanbul ignore next */ []));
+        this.groupPrefixWidth = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupPrefixWidth" }] : /* istanbul ignore next */ []));
         this.lockedCellHeader = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lockedCellHeader" }] : /* istanbul ignore next */ []));
         this.lockedStructuralOffset = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lockedStructuralOffset" }] : /* istanbul ignore next */ []));
+        this.structuralColumn = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "structuralColumn" }] : /* istanbul ignore next */ []));
     }
     #hostElementRef;
     #gridService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLockedCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridLockedCellDirective, isStandalone: true, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, lockedCellHeader: { classPropertyName: "lockedCellHeader", publicName: "lockedCellHeader", isSignal: true, isRequired: false, transformFunction: null }, lockedStructuralOffset: { classPropertyName: "lockedStructuralOffset", publicName: "lockedStructuralOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.position": "position()", "style.left.px": "leftOffset()", "style.right.px": "rightOffset()", "style.z-index": "zIndex()", "class.bg-header-background": "headerLocked() || footerCell", "class.bg-inherit": "bodyLocked()", "style.border-left": "borderLeft()", "style.border-right": "borderRight()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridLockedCellDirective, isStandalone: true, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, groupPrefixWidth: { classPropertyName: "groupPrefixWidth", publicName: "groupPrefixWidth", isSignal: true, isRequired: false, transformFunction: null }, lockedCellHeader: { classPropertyName: "lockedCellHeader", publicName: "lockedCellHeader", isSignal: true, isRequired: false, transformFunction: null }, lockedStructuralOffset: { classPropertyName: "lockedStructuralOffset", publicName: "lockedStructuralOffset", isSignal: true, isRequired: false, transformFunction: null }, structuralColumn: { classPropertyName: "structuralColumn", publicName: "structuralColumn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.position": "position()", "style.left.px": "leftOffset()", "style.right.px": "rightOffset()", "style.z-index": "zIndex()", "class.bg-header-background": "headerLocked() || footerCell", "class.bg-inherit": "bodyLocked()", "style.border-left": "borderLeft()", "style.border-right": "borderRight()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLockedCellDirective, decorators: [{
             type: Directive,
@@ -2924,7 +3301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[style.border-right]": "borderRight()"
                     }
                 }]
-        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], lockedCellHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedCellHeader", required: false }] }], lockedStructuralOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedStructuralOffset", required: false }] }] } });
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], groupPrefixWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupPrefixWidth", required: false }] }], lockedCellHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedCellHeader", required: false }] }], lockedStructuralOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedStructuralOffset", required: false }] }], structuralColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "structuralColumn", required: false }] }] } });
 
 class GridNavigationService {
     #cellElementDict = signal(ImmutableDictionary.create(), /* @ts-ignore */
@@ -3283,7 +3660,6 @@ const gridBaseThemeVariants = cva(`
 const gridCellBaseThemeVariants = cva(`
         absolute inset-0
         flex w-full
-        shadow-[inset_0_-1px_0_0_var(--color-border-subtle)]
     `);
 const gridCellContainerThemeVariants = cva(`
         flex h-full w-full items-center
@@ -3318,6 +3694,12 @@ const gridCellEditorInputThemeVariants = cva(`
 const gridCellTextThemeVariants = cva(`
     truncate cursor-default select-none
 `);
+const gridSelectAllCellThemeVariants = cva(`
+    absolute inset-0 flex h-full w-full items-center justify-center
+`);
+const gridSelectionCellThemeVariants = cva(`
+    absolute inset-0 flex h-full w-full items-center justify-center
+`);
 const gridColumnActionsThemeVariants = cva(`
     flex items-center justify-center
     text-xs [&_i]:text-xs
@@ -3352,8 +3734,25 @@ const gridDetailIndentCellThemeVariants = cva(`
         }
     }
 });
-const gridDetailRowThemeVariants = cva(`
-    border-b border-b-border-subtle
+const gridDetailRowThemeVariants = cva(``);
+const gridRowReorderHandleThemeVariants = cva(`
+    flex h-full w-full items-center justify-center
+    cursor-grab select-none touch-none
+    text-muted-foreground
+    hover:text-foreground
+    active:cursor-grabbing
+    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/50
+    disabled:cursor-not-allowed disabled:text-muted-foreground/35 disabled:hover:text-muted-foreground/35
+`);
+const gridRowDragPreviewThemeVariants = cva(`
+    flex items-center gap-2
+    px-2! py-1!
+    bg-surface-raised! text-foreground!
+    border! border-border! rounded-md shadow-(--shadow-overlay)!
+`);
+const gridRowDragPlaceholderThemeVariants = cva(`
+    opacity-40
+    [&>td]:bg-hover! [&>td]:border-dashed! [&>td]:border-border!
 `);
 const gridFilterRowCellThemeVariants = cva(`flex items-center px-1 py-0.5 w-full`);
 const gridFooterThemeVariants = cva(`
@@ -3425,6 +3824,8 @@ const gridListBaseThemeVariants = cva(`
 });
 const gridListTableThemeVariants = cva(`
         border-separate border-spacing-0 w-full table-fixed
+        [&_.cdk-drag-dragging]:z-10! [&_.cdk-drag-dragging]:shadow-(--shadow-overlay)
+        [&_.cdk-drag-animating]:transition-transform
     `);
 const gridListTableRowThemeVariants = cva(``, {
     variants: {
@@ -3442,6 +3843,7 @@ const gridListTableCellThemeVariants = cva(`
         ${gridRowHeightClass}
         outline-none z-1
         align-top
+        border-b border-b-border-subtle
         after:content-[''] after:block
         after:absolute after:inset-0 after:pointer-events-none
         focus:after:ring-1 focus:after:ring-inset focus:after:ring-focus-indicator/35
@@ -3518,12 +3920,12 @@ const gridListTableCellThemeVariants = cva(`
         {
             grouped: true,
             indentCell: true,
-            class: "bg-surface-muted shadow-[inset_0_-1px_0_0_var(--color-border-subtle)]"
+            class: "bg-surface-muted"
         },
         {
             grouped: true,
             indentCell: false,
-            class: "shadow-[inset_0_-1px_0_0_var(--color-border-subtle)]"
+            class: ""
         },
         {
             grouped: true,
@@ -3788,6 +4190,9 @@ class GridLogicalCellDirective {
         this.edit.emit();
     }
     #onHostKeydown(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
         const target = event.target;
         const host = this.#hostElementRef.nativeElement;
         if (target && target !== host) {
@@ -4452,6 +4857,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     }, template: "@let dataType = column().dataType;\n\n@switch (dataType) {\n    @case (\"string\") {\n        <div class=\"flex gap-0.5 w-full\">\n            <mona-text-box\n                size=\"small\"\n                [ngModel]=\"stringValue()\"\n                (ngModelChange)=\"onStringChange($event)\"\n                placeholder=\"Filter...\" />\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\n            </button>\n            <ng-container\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\n        </div>\n        <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\n            @for (item of stringFilterMenuItems; track item) {\n                <mona-popup-menu-checkbox-item\n                    size=\"small\"\n                    [label]=\"item.text\"\n                    (menuClick)=\"onOperatorChange(item.value)\"\n                    [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\n            }\n        </mona-popup-menu>\n    }\n    @case (\"number\") {\n        <div class=\"flex gap-0.5 w-full\">\n            <mona-numeric-text-box\n                size=\"small\"\n                [ngModel]=\"numberValue()\"\n                (ngModelChange)=\"onNumberChange($event)\"\n                [style.width.%]=\"100\" />\n\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\n            </button>\n            <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\n                @for (item of numericFilterMenuItems; track item) {\n                    <mona-popup-menu-checkbox-item\n                        size=\"small\"\n                        [label]=\"item.text\"\n                        (menuClick)=\"onOperatorChange(item.value)\"\n                        [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\n                }\n            </mona-popup-menu>\n            <ng-container\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\n        </div>\n    }\n    @case (\"date\") {\n        <div class=\"flex gap-0.5 w-full\">\n            @if (dataType === \"date\") {\n                <mona-date-picker\n                    size=\"small\"\n                    [ngModel]=\"dateValue()\"\n                    (ngModelChange)=\"onDateChange($event)\"\n                    [style.width.%]=\"100\" />\n            }\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\n            </button>\n            <ng-container\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\n        </div>\n        <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\n            @for (item of dateFilterMenuItems; track item) {\n                <mona-popup-menu-checkbox-item\n                    size=\"small\"\n                    [label]=\"item.text\"\n                    (menuClick)=\"onOperatorChange(item.value)\"\n                    [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\n            }\n        </mona-popup-menu>\n    }\n    @case (\"boolean\") {\n        <div class=\"flex gap-0.5 w-full\">\n            <mona-dropdown-list\n                size=\"small\"\n                [data]=\"booleanFilterMenuItems\"\n                textField=\"text\"\n                valueField=\"value\"\n                placeholder=\"(All)\"\n                [ngModel]=\"booleanValue()\"\n                (ngModelChange)=\"onBooleanChange($event)\"\n                [style.width.%]=\"100\" />\n            <ng-container\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\n        </div>\n    }\n}\n\n<ng-template #clearFilterButtonTemplate let-hasValue>\n    @if (selectedOperator() != null && hasValue) {\n        <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" (click)=\"onClear()\">\n            <svg lucideFunnelX [size]=\"14\" class=\"text-error\"></svg>\n        </button>\n    }\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { apply: [{ type: i0.Output, args: ["apply"] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }] } });
 
+class GridSelectAllCheckboxComponent {
+    constructor() {
+        this.#gridService = inject(GridService);
+        this.checked = computed(() => this.#gridService.allBulkSelectionRowsSelected(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        this.hostClass = computed(() => gridSelectAllCellThemeVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+        this.indeterminate = computed(() => this.#gridService.someBulkSelectionRowsSelected(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    }
+    #gridService;
+    onCheckedChange(checked) {
+        this.#gridService.setBulkSelection(checked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridSelectAllCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: GridSelectAllCheckboxComponent, isStandalone: true, selector: "mona-grid-select-all-checkbox", host: { listeners: { "click": "$event.stopPropagation()" }, properties: { "class": "hostClass()" } }, ngImport: i0, template: "<mona-check-box\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    (checkedChange)=\"onCheckedChange($event)\">\n    <span class=\"sr-only\">Select all rows</span>\n</mona-check-box>\n", dependencies: [{ kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridSelectAllCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-grid-select-all-checkbox", imports: [CheckBoxComponent], host: {
+                        "[class]": "hostClass()",
+                        "(click)": "$event.stopPropagation()"
+                    }, template: "<mona-check-box\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    (checkedChange)=\"onCheckedChange($event)\">\n    <span class=\"sr-only\">Select all rows</span>\n</mona-check-box>\n" }]
+        }] });
+
 const FOCUSABLE_TARGET_SELECTOR = "button, input, select, textarea, a[href], [tabindex]";
 class GridComponent {
     #destroyRef;
@@ -4638,6 +5068,13 @@ class GridComponent {
          */
         this.resizeMethod = input("fitView", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resizeMethod" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Field name or selector used to derive a stable identity for each row.
+         * The resolved value must be unique within the grid data.
+         * @default null
+         */
+        this.rowKey = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
         /**
          * @description Whether the pager is responsive.
          * If set to `true`, the pager will be displayed as a dropdown when the grid width gets smaller.
@@ -4905,9 +5342,15 @@ class GridComponent {
         }
         const thList = headerElement.nativeElement.querySelectorAll("thead > tr:first-child > th");
         const headerCells = Array.from(thList);
+        if (this.gridService.rowReorderColumnVisible()) {
+            headerCells.shift();
+        }
         if (this.gridService.masterDetailTemplate()) {
             headerCells.shift();
         }
+        if (this.gridService.selectionColumnVisible()) {
+            headerCells.shift();
+        }
         for (const _ of this.gridService.groupColumns()) {
             headerCells.shift();
         }
@@ -4940,9 +5383,12 @@ class GridComponent {
     setDataEffect() {
         effect(() => {
             const data = this.data();
-            const rowKey = this.gridService.editableRowKey();
+            const rowKey = this.rowKey();
             const shouldRestoreGridFocus = this.#hostElementRef.nativeElement.contains(this.#hostElementRef.nativeElement.ownerDocument.activeElement);
-            untracked(() => this.gridService.setRows(data, rowKey));
+            untracked(() => {
+                this.gridService.setRows(data, rowKey);
+                this.gridService.rowKey.set(rowKey);
+            });
             if (shouldRestoreGridFocus) {
                 afterNextRender({
                     read: () => {
@@ -5014,9 +5460,15 @@ class GridComponent {
             if (columnsWithWidth.any()) {
                 headerWidth -= columnsWithWidth.sum(c => c.width ?? 0);
             }
+            if (this.gridService.rowReorderColumnVisible()) {
+                headerWidth -= this.gridService.rowReorderColumnWidth;
+            }
             if (this.gridService.masterDetailTemplate()) {
                 headerWidth -= this.gridService.detailColumnWidth;
             }
+            if (this.gridService.selectionColumnVisible()) {
+                headerWidth -= this.gridService.selectionColumnWidth;
+            }
             headerWidth -= this.gridService.groupColumnWidth * this.gridService.groupColumns().length;
             const fitViewWidthByColumn = this.resizeMethod() === "fitView" ? this.createFitViewWidthMap(headerWidth) : new Map();
             const visibleColumns = this.gridService.visibleColumns().toArray();
@@ -5078,17 +5530,17 @@ class GridComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridComponent, isStandalone: true, selector: "mona-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, resizeMethod: { classPropertyName: "resizeMethod", publicName: "resizeMethod", isSignal: true, isRequired: false, transformFunction: null }, responsivePager: { classPropertyName: "responsivePager", publicName: "responsivePager", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "grid" }, properties: { "class": "baseClass()", "attr.data-uid": "uid" } }, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], queries: [{ propertyName: "columnDefinitions", predicate: GRID_COLUMN_DEFINITION, isSignal: true }, { propertyName: "gridDetailTemplate", first: true, predicate: GridDetailTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: GridNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: GridToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "footerScrollElement", first: true, predicate: ["footerScrollElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderElement", first: true, predicate: ["gridHeaderElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderTableElement", first: true, predicate: ["headerTable"], descendants: true, isSignal: true }, { propertyName: "groupColumnList", first: true, predicate: ["groupColumnList"], descendants: true, isSignal: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>Columns</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <i class=\"ri-arrow-down-line\"></i>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <i class=\"ri-arrow-up-line\"></i>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ml-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <i class=\"ri-more-2-fill\"></i>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-left-fill\"></i> Move as previous\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-right-fill\"></i> Move as next\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">Drag a column header here to group</span>\n        }\n    </div>\n}\n<div [class]=\"headerClass()\" [style.margin-right.px]=\"headerMarginRight()\" #gridHeaderElement>\n    <div>\n        <table #headerTable [class]=\"headerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n            <colgroup>\n                @for (_ of gridService.groupColumns(); track $index) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @if (gridService.masterDetailTemplate()) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @for (col of gridService.visibleColumns(); track $index) {\n                    <col [style.width.px]=\"col.calculatedWidth\" />\n                }\n            </colgroup>\n            <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                <tr\n                    cdkDropList\n                    [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                    (cdkDropListDropped)=\"onColumnDrop()\"\n                    [class]=\"headerTableRowClass()\">\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                    }\n                    @for (column of gridService.visibleColumns(); track $index) {\n                        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n                        <th\n                            scope=\"col\"\n                            role=\"columnheader\"\n                            cdkDrag\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [lockedCellHeader]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'header'\"\n                            [columnId]=\"column.id\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"colIndex\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"colIndex === 0\"\n                            [lastInRow]=\"\n                                colIndex ===\n                                gridService.visibleColumns().length - (gridService.masterDetailTemplate() ? 0 : 1)\n                            \"\n                            (toggle)=\"onColumnSort(column)\"\n                            [cdkDragData]=\"column\"\n                            [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                            [class]=\"headerTableCellClass()\"\n                            (mouseenter)=\"onColumnMouseEnter(column)\"\n                            (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                            (cdkDragStarted)=\"onColumnDragStart($event)\"\n                            [style.min-width.px]=\"column.minWidth\"\n                            [style.width.px]=\"column.calculatedWidth\"\n                            [attr.colspan]=\"1\"\n                            [attr.aria-sort]=\"\n                                gridService.sortableOptions().enabled\n                                    ? (column.columnSortDirection | columnAriaSort)\n                                    : null\n                            \">\n                            <div [class]=\"headerTableColumnWrapClass()\">\n                                @if (column.headerTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"column.headerTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                } @else if (column.titleTemplate) {\n                                    <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                } @else {\n                                    <span\n                                        [class]=\"headerTableColumnTitleClass()\"\n                                        (click)=\"onColumnSort(column)\"\n                                        [title]=\"column.title\"\n                                        >{{ column.title }}</span\n                                    >\n                                }\n\n                                <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                    @if (gridService.sortableOptions().showIndices && column.sortIndex !== null) {\n                                        <span>{{ column.sortIndex }}</span>\n                                    }\n                                    @if (column.columnSortDirection === \"asc\") {\n                                        <i class=\"ri-arrow-down-line\"></i>\n                                    } @else if (column.columnSortDirection === \"desc\") {\n                                        <i class=\"ri-arrow-up-line\"></i>\n                                    }\n                                    @if (filterMenuEnabled()) {\n                                        @if (column.kind === \"data\") {\n                                            <mona-grid-filter-menu\n                                                [column]=\"column\"\n                                                [type]=\"column.dataType\"\n                                                (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                        }\n                                    }\n                                </div>\n                            </div>\n                            @if (\n                                dropColumn() === column &&\n                                dragColumn() &&\n                                gridService.reorderableOptions().enabled &&\n                                !groupingInProgress()\n                            ) {\n                                <span [class]=\"columnDropHintClass()\"> </span>\n                            }\n                            @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                <div\n                                    monaGridColumnResizeHandler\n                                    [column]=\"column\"\n                                    [class]=\"columnResizerClass()\"\n                                    (resizeStart)=\"onColumnResizeStart()\"\n                                    (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                            }\n                            <ng-template cdkDragPreview>\n                                <div [class]=\"columnDragPreviewClass()\">\n                                    <span>{{ column.title }}</span>\n                                </div>\n                            </ng-template>\n                            <ng-template cdkDragPlaceholder>\n                                @if (groupingInProgress()) {\n                                    <mona-chip\n                                        style=\"z-index: 10; pointer-events: none\"\n                                        [removable]=\"true\"\n                                        [rounded]=\"rounded()\"\n                                        >{{ column.title }}</mona-chip\n                                    >\n                                }\n                            </ng-template>\n                        </th>\n                        @if (columnDragging() && dragColumn() === column) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [class]=\"headerTableCellClass()\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"column.calculatedWidth\">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                    } @else if (column.titleTemplate) {\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                    } @else {\n                                        <span\n                                            [class]=\"headerTableColumnTitleClass()\"\n                                            (click)=\"onColumnSort(column)\"\n                                            [title]=\"column.title\"\n                                            >{{ column.title }}</span\n                                        >\n                                    }\n                                </div>\n                            </th>\n                        }\n                    }\n                </tr>\n                @if (filterRowEnabled()) {\n                    <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                scope=\"col\"\n                                class=\"border-r border-border overflow-hidden\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.aria-label]=\"'Filter by ' + column.title\">\n                                @if (column.kind === \"data\" && column.field) {\n                                    <mona-grid-filter-row-cell\n                                        [column]=\"column\"\n                                        (apply)=\"onColumnFilter(column, $event)\" />\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n            </thead>\n        </table>\n    </div>\n</div>\n\n@defer (when gridWidthSet()) {\n    @if (gridService.virtualScrollOptions().enabled) {\n        @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-virtual-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewRows()\"></mona-grid-virtual-list>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    } @else {\n        @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewPageRows()\"></mona-grid-list>\n            @if (footerVisible()) {\n                <div\n                    [class]=\"footerClass()\"\n                    [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\n                    #footerScrollElement\n                    data-grid-footer-scroll>\n                    <div>\n                        <table [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n                            <colgroup>\n                                @for (_ of gridService.groupColumns(); track $index) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @if (gridService.masterDetailTemplate()) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @for (col of gridService.visibleColumns(); track $index) {\n                                    <col [style.width.px]=\"col.calculatedWidth\" />\n                                }\n                            </colgroup>\n                            <tfoot role=\"rowgroup\">\n                                <tr [class]=\"footerTableRowClass()\">\n                                    @for (_ of gridService.groupColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                            [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                                    }\n                                    @if (gridService.masterDetailTemplate()) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"\n                                                gridService.groupColumns().length * gridService.groupColumnWidth\n                                            \"\n                                            [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                                    }\n                                    @for (column of gridService.visibleColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [column]=\"column\"\n                                            [lockedCellHeader]=\"true\"\n                                            [footerColumn]=\"column\">\n                                            <mona-grid-footer-cell\n                                                [column]=\"column\"\n                                                [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                                        </td>\n                                    }\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            }\n            <mona-pager\n                class=\"border-0 border-t border-t-border rounded-tl-none rounded-tr-none\"\n                [skip]=\"gridService.paginationState().skip\"\n                [pageSize]=\"gridService.paginationState().take\"\n                [total]=\"gridService.viewRowCount()\"\n                [size]=\"'small'\"\n                [rounded]=\"rounded()\"\n                [pageInput]=\"true\"\n                [pageSizeValues]=\"pageSizeValues()\"\n                [responsive]=\"responsivePager()\"\n                (pageSizeChange)=\"onPageSizeChange($event)\"\n                (pageChange)=\"onPageChange($event)\"></mona-pager>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    }\n} @placeholder {\n    <mona-placeholder text=\"Loading...\"></mona-placeholder>\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder text=\"No data\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridFilterMenuComponent, selector: "mona-grid-filter-menu", inputs: ["column", "type"], outputs: ["apply"] }, { kind: "component", type: GridFilterRowCellComponent, selector: "mona-grid-filter-row-cell", inputs: ["column"], outputs: ["apply"] }, { kind: "directive", type: GridColumnResizeHandlerDirective, selector: "[monaGridColumnResizeHandler]", inputs: ["column"], outputs: ["resizeEnd", "resizeStart"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "component", type: PopupMenuItemComponent, selector: "mona-popup-menu-item", inputs: ["disabled", "label"], outputs: ["menuClick"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "lockedCellHeader", "lockedStructuralOffset"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupComponent, selector: "mona-popup", inputs: ["anchor", "anchorConnectionPoint", "animation", "backdropClass", "closeOnBackdropClick", "closeOnEscape", "closeOnMouseLeave", "closeOnOutsideClick", "data", "hasBackdrop", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "offset", "popupClass", "popupConnectionPoint", "popupWrapperClass", "positionStrategy", "positions", "preventClose", "providers", "trigger", "width", "withPush", "closeOnScroll", "restoreFocus", "withScrollTracking"], outputs: ["close", "open"] }, { kind: "component", type: GridColumnChooserComponent, selector: "mona-grid-column-chooser", outputs: ["apply", "cancel"] }, { kind: "pipe", type: ColumnAriaSortPipe, name: "columnAriaSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-BbBPZj7t.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-list.component-DReEfWfG.mjs').then(m => m.GridListComponent), PagerComponent, /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-BCIs_lmz.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-BkISJoqL.mjs').then(m => m.GridFooterTableCellDirective), GridLockedCellDirective]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridComponent, isStandalone: true, selector: "mona-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, resizeMethod: { classPropertyName: "resizeMethod", publicName: "resizeMethod", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, responsivePager: { classPropertyName: "responsivePager", publicName: "responsivePager", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "grid" }, properties: { "class": "baseClass()", "attr.data-uid": "uid" } }, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], queries: [{ propertyName: "columnDefinitions", predicate: GRID_COLUMN_DEFINITION, isSignal: true }, { propertyName: "gridDetailTemplate", first: true, predicate: GridDetailTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: GridNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: GridToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "footerScrollElement", first: true, predicate: ["footerScrollElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderElement", first: true, predicate: ["gridHeaderElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderTableElement", first: true, predicate: ["headerTable"], descendants: true, isSignal: true }, { propertyName: "groupColumnList", first: true, predicate: ["groupColumnList"], descendants: true, isSignal: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>Columns</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <i class=\"ri-arrow-down-line\"></i>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <i class=\"ri-arrow-up-line\"></i>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ml-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <i class=\"ri-more-2-fill\"></i>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-left-fill\"></i> Move as previous\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-right-fill\"></i> Move as next\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">Drag a column header here to group</span>\n        }\n    </div>\n}\n<div [class]=\"headerClass()\" [style.margin-right.px]=\"headerMarginRight()\" #gridHeaderElement>\n    <div>\n        <table #headerTable [class]=\"headerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n            <colgroup>\n                @for (_ of gridService.groupColumns(); track $index) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @if (gridService.rowReorderColumnVisible()) {\n                    <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                }\n                @if (gridService.masterDetailTemplate()) {\n                    <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                }\n                @if (gridService.selectionColumnVisible()) {\n                    <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                }\n                @for (col of gridService.visibleColumns(); track $index) {\n                    <col [style.width.px]=\"col.calculatedWidth\" />\n                }\n            </colgroup>\n            <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                <tr\n                    cdkDropList\n                    [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                    (cdkDropListDropped)=\"onColumnDrop()\"\n                    [class]=\"headerTableRowClass()\">\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                    }\n                    @if (gridService.rowReorderColumnVisible()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [structuralColumn]=\"'reorder'\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'command'\"\n                            [columnId]=\"'$rowReorder'\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"0\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"gridService.groupColumns().length === 0\"\n                            [lastInRow]=\"\n                                !gridService.masterDetailTemplate() &&\n                                !gridService.selectionColumnVisible() &&\n                                gridService.visibleColumns().length === 0\n                            \"\n                            scope=\"col\"\n                            aria-label=\"Row reorder\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [structuralColumn]=\"'detail'\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                    }\n                    @if (gridService.selectionColumnVisible()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [structuralColumn]=\"'selection'\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'command'\"\n                            [columnId]=\"'$selection'\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"\n                                (gridService.rowReorderColumnVisible() ? 1 : 0) +\n                                (gridService.masterDetailTemplate() ? 1 : 0)\n                            \"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"\n                                !gridService.rowReorderColumnVisible() &&\n                                !gridService.masterDetailTemplate() &&\n                                gridService.groupColumns().length === 0\n                            \"\n                            [lastInRow]=\"gridService.visibleColumns().length === 0\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.selectionColumnWidth\">\n                            @if (\n                                gridService.selectableOptions().mode === \"multiple\" &&\n                                gridService.selectableOptions().showSelectAll !== false\n                            ) {\n                                <mona-grid-select-all-checkbox />\n                            }\n                        </th>\n                    }\n                    @for (column of gridService.visibleColumns(); track $index) {\n                        @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                        <th\n                            scope=\"col\"\n                            role=\"columnheader\"\n                            cdkDrag\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [lockedCellHeader]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'header'\"\n                            [columnId]=\"column.id\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"colIndex\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                            [lastInRow]=\"\n                                colIndex ===\n                                gridService.leadingLogicalColumnCount() +\n                                    gridService.visibleColumns().length -\n                                    1\n                            \"\n                            (toggle)=\"onColumnSort(column)\"\n                            [cdkDragData]=\"column\"\n                            [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                            [class]=\"headerTableCellClass()\"\n                            (mouseenter)=\"onColumnMouseEnter(column)\"\n                            (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                            (cdkDragStarted)=\"onColumnDragStart($event)\"\n                            [style.min-width.px]=\"column.minWidth\"\n                            [style.width.px]=\"column.calculatedWidth\"\n                            [attr.colspan]=\"1\"\n                            [attr.aria-sort]=\"\n                                gridService.sortableOptions().enabled\n                                    ? (column.columnSortDirection | columnAriaSort)\n                                    : null\n                            \">\n                            <div [class]=\"headerTableColumnWrapClass()\">\n                                @if (column.headerTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"column.headerTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                } @else if (column.titleTemplate) {\n                                    <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                } @else {\n                                    <span\n                                        [class]=\"headerTableColumnTitleClass()\"\n                                        (click)=\"onColumnSort(column)\"\n                                        [title]=\"column.title\"\n                                        >{{ column.title }}</span\n                                    >\n                                }\n\n                                <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                    @if (gridService.sortableOptions().showIndices && column.sortIndex !== null) {\n                                        <span>{{ column.sortIndex }}</span>\n                                    }\n                                    @if (column.columnSortDirection === \"asc\") {\n                                        <i class=\"ri-arrow-down-line\"></i>\n                                    } @else if (column.columnSortDirection === \"desc\") {\n                                        <i class=\"ri-arrow-up-line\"></i>\n                                    }\n                                    @if (filterMenuEnabled()) {\n                                        @if (column.kind === \"data\") {\n                                            <mona-grid-filter-menu\n                                                [column]=\"column\"\n                                                [type]=\"column.dataType\"\n                                                (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                        }\n                                    }\n                                </div>\n                            </div>\n                            @if (\n                                dropColumn() === column &&\n                                dragColumn() &&\n                                gridService.reorderableOptions().enabled &&\n                                !groupingInProgress()\n                            ) {\n                                <span [class]=\"columnDropHintClass()\"> </span>\n                            }\n                            @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                <div\n                                    monaGridColumnResizeHandler\n                                    [column]=\"column\"\n                                    [class]=\"columnResizerClass()\"\n                                    (resizeStart)=\"onColumnResizeStart()\"\n                                    (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                            }\n                            <ng-template cdkDragPreview>\n                                <div [class]=\"columnDragPreviewClass()\">\n                                    <span>{{ column.title }}</span>\n                                </div>\n                            </ng-template>\n                            <ng-template cdkDragPlaceholder>\n                                @if (groupingInProgress()) {\n                                    <mona-chip\n                                        style=\"z-index: 10; pointer-events: none\"\n                                        [removable]=\"true\"\n                                        [rounded]=\"rounded()\"\n                                        >{{ column.title }}</mona-chip\n                                    >\n                                }\n                            </ng-template>\n                        </th>\n                        @if (columnDragging() && dragColumn() === column) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [class]=\"headerTableCellClass()\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"column.calculatedWidth\">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                    } @else if (column.titleTemplate) {\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                    } @else {\n                                        <span\n                                            [class]=\"headerTableColumnTitleClass()\"\n                                            (click)=\"onColumnSort(column)\"\n                                            [title]=\"column.title\"\n                                            >{{ column.title }}</span\n                                        >\n                                    }\n                                </div>\n                            </th>\n                        }\n                    }\n                </tr>\n                @if (filterRowEnabled()) {\n                    <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.rowReorderColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'reorder'\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'detail'\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'selection'\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\"></th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                scope=\"col\"\n                                class=\"border-r border-border overflow-hidden\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.aria-label]=\"'Filter by ' + column.title\">\n                                @if (column.kind === \"data\" && column.field) {\n                                    <mona-grid-filter-row-cell\n                                        [column]=\"column\"\n                                        (apply)=\"onColumnFilter(column, $event)\" />\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n            </thead>\n        </table>\n    </div>\n</div>\n\n@defer (when gridWidthSet()) {\n    @if (gridService.virtualScrollOptions().enabled) {\n        @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-virtual-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewRows()\"></mona-grid-virtual-list>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    } @else {\n        @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewPageRows()\"></mona-grid-list>\n            @if (footerVisible()) {\n                <div\n                    [class]=\"footerClass()\"\n                    [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\n                    #footerScrollElement\n                    data-grid-footer-scroll>\n                    <div>\n                        <table [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n                            <colgroup>\n                                @for (_ of gridService.groupColumns(); track $index) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @if (gridService.rowReorderColumnVisible()) {\n                                    <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                                }\n                                @if (gridService.masterDetailTemplate()) {\n                                    <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                                }\n                                @if (gridService.selectionColumnVisible()) {\n                                    <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                                }\n                                @for (col of gridService.visibleColumns(); track $index) {\n                                    <col [style.width.px]=\"col.calculatedWidth\" />\n                                }\n                            </colgroup>\n                            <tfoot role=\"rowgroup\">\n                                <tr [class]=\"footerTableRowClass()\">\n                                    @for (_ of gridService.groupColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                            [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                                    }\n                                    @if (gridService.rowReorderColumnVisible()) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [structuralColumn]=\"'reorder'\"\n                                            [footerCellWidth]=\"gridService.rowReorderColumnWidth\"></td>\n                                    }\n                                    @if (gridService.masterDetailTemplate()) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [structuralColumn]=\"'detail'\"\n                                            [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                                    }\n                                    @if (gridService.selectionColumnVisible()) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [structuralColumn]=\"'selection'\"\n                                            [footerCellWidth]=\"gridService.selectionColumnWidth\"></td>\n                                    }\n                                    @for (column of gridService.visibleColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [column]=\"column\"\n                                            [lockedCellHeader]=\"true\"\n                                            [footerColumn]=\"column\">\n                                            <mona-grid-footer-cell\n                                                [column]=\"column\"\n                                                [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                                        </td>\n                                    }\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            }\n            <mona-pager\n                class=\"border-0 border-t border-t-border rounded-tl-none rounded-tr-none\"\n                [skip]=\"gridService.paginationState().skip\"\n                [pageSize]=\"gridService.paginationState().take\"\n                [total]=\"gridService.viewRowCount()\"\n                [size]=\"'small'\"\n                [rounded]=\"rounded()\"\n                [pageInput]=\"true\"\n                [pageSizeValues]=\"pageSizeValues()\"\n                [responsive]=\"responsivePager()\"\n                (pageSizeChange)=\"onPageSizeChange($event)\"\n                (pageChange)=\"onPageChange($event)\"></mona-pager>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    }\n} @placeholder {\n    <mona-placeholder text=\"Loading...\"></mona-placeholder>\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder text=\"No data\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridFilterMenuComponent, selector: "mona-grid-filter-menu", inputs: ["column", "type"], outputs: ["apply"] }, { kind: "component", type: GridFilterRowCellComponent, selector: "mona-grid-filter-row-cell", inputs: ["column"], outputs: ["apply"] }, { kind: "directive", type: GridColumnResizeHandlerDirective, selector: "[monaGridColumnResizeHandler]", inputs: ["column"], outputs: ["resizeEnd", "resizeStart"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "component", type: PopupMenuItemComponent, selector: "mona-popup-menu-item", inputs: ["disabled", "label"], outputs: ["menuClick"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "groupPrefixWidth", "lockedCellHeader", "lockedStructuralOffset", "structuralColumn"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupComponent, selector: "mona-popup", inputs: ["anchor", "anchorConnectionPoint", "animation", "backdropClass", "closeOnBackdropClick", "closeOnEscape", "closeOnMouseLeave", "closeOnOutsideClick", "data", "hasBackdrop", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "offset", "popupClass", "popupConnectionPoint", "popupWrapperClass", "positionStrategy", "positions", "preventClose", "providers", "trigger", "width", "withPush", "closeOnScroll", "restoreFocus", "withScrollTracking"], outputs: ["close", "open"] }, { kind: "component", type: GridColumnChooserComponent, selector: "mona-grid-column-chooser", outputs: ["apply", "cancel"] }, { kind: "component", type: GridSelectAllCheckboxComponent, selector: "mona-grid-select-all-checkbox" }, { kind: "pipe", type: ColumnAriaSortPipe, name: "columnAriaSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-CJmjLl7R.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-list.component-BhnFFIOl.mjs').then(m => m.GridListComponent), PagerComponent, /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-7acNUovW.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-pGhsAcVA.mjs').then(m => m.GridFooterTableCellDirective), GridLockedCellDirective]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ngImport: i0, type: GridComponent, resolveDeferredDeps: () => [/* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-BbBPZj7t.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-list.component-DReEfWfG.mjs').then(m => m.GridListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-BCIs_lmz.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-BkISJoqL.mjs').then(m => m.GridFooterTableCellDirective)], resolveMetadata: (GridFooterCellComponent, GridListComponent, GridVirtualListComponent, GridFooterTableCellDirective) => ({ decorators: [{
+        import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-CJmjLl7R.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-list.component-BhnFFIOl.mjs').then(m => m.GridListComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-7acNUovW.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-pGhsAcVA.mjs').then(m => m.GridFooterTableCellDirective)], resolveMetadata: (GridFooterCellComponent, GridListComponent, GridVirtualListComponent, GridFooterTableCellDirective) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: "mona-grid", changeDetection: ChangeDetectionStrategy.OnPush, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], imports: [
                             CdkDropList,
@@ -5114,13 +5566,14 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
                             GridLockedCellDirective,
                             ButtonDirective,
                             PopupComponent,
-                            GridColumnChooserComponent
+                            GridColumnChooserComponent,
+                            GridSelectAllCheckboxComponent
                         ], host: {
                             "[class]": "baseClass()",
                             "[attr.data-uid]": "uid",
                             role: "grid"
-                        }, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>Columns</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <i class=\"ri-arrow-down-line\"></i>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <i class=\"ri-arrow-up-line\"></i>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ml-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <i class=\"ri-more-2-fill\"></i>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-left-fill\"></i> Move as previous\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-right-fill\"></i> Move as next\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">Drag a column header here to group</span>\n        }\n    </div>\n}\n<div [class]=\"headerClass()\" [style.margin-right.px]=\"headerMarginRight()\" #gridHeaderElement>\n    <div>\n        <table #headerTable [class]=\"headerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n            <colgroup>\n                @for (_ of gridService.groupColumns(); track $index) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @if (gridService.masterDetailTemplate()) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @for (col of gridService.visibleColumns(); track $index) {\n                    <col [style.width.px]=\"col.calculatedWidth\" />\n                }\n            </colgroup>\n            <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                <tr\n                    cdkDropList\n                    [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                    (cdkDropListDropped)=\"onColumnDrop()\"\n                    [class]=\"headerTableRowClass()\">\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                    }\n                    @for (column of gridService.visibleColumns(); track $index) {\n                        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n                        <th\n                            scope=\"col\"\n                            role=\"columnheader\"\n                            cdkDrag\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [lockedCellHeader]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'header'\"\n                            [columnId]=\"column.id\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"colIndex\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"colIndex === 0\"\n                            [lastInRow]=\"\n                                colIndex ===\n                                gridService.visibleColumns().length - (gridService.masterDetailTemplate() ? 0 : 1)\n                            \"\n                            (toggle)=\"onColumnSort(column)\"\n                            [cdkDragData]=\"column\"\n                            [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                            [class]=\"headerTableCellClass()\"\n                            (mouseenter)=\"onColumnMouseEnter(column)\"\n                            (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                            (cdkDragStarted)=\"onColumnDragStart($event)\"\n                            [style.min-width.px]=\"column.minWidth\"\n                            [style.width.px]=\"column.calculatedWidth\"\n                            [attr.colspan]=\"1\"\n                            [attr.aria-sort]=\"\n                                gridService.sortableOptions().enabled\n                                    ? (column.columnSortDirection | columnAriaSort)\n                                    : null\n                            \">\n                            <div [class]=\"headerTableColumnWrapClass()\">\n                                @if (column.headerTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"column.headerTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                } @else if (column.titleTemplate) {\n                                    <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                } @else {\n                                    <span\n                                        [class]=\"headerTableColumnTitleClass()\"\n                                        (click)=\"onColumnSort(column)\"\n                                        [title]=\"column.title\"\n                                        >{{ column.title }}</span\n                                    >\n                                }\n\n                                <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                    @if (gridService.sortableOptions().showIndices && column.sortIndex !== null) {\n                                        <span>{{ column.sortIndex }}</span>\n                                    }\n                                    @if (column.columnSortDirection === \"asc\") {\n                                        <i class=\"ri-arrow-down-line\"></i>\n                                    } @else if (column.columnSortDirection === \"desc\") {\n                                        <i class=\"ri-arrow-up-line\"></i>\n                                    }\n                                    @if (filterMenuEnabled()) {\n                                        @if (column.kind === \"data\") {\n                                            <mona-grid-filter-menu\n                                                [column]=\"column\"\n                                                [type]=\"column.dataType\"\n                                                (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                        }\n                                    }\n                                </div>\n                            </div>\n                            @if (\n                                dropColumn() === column &&\n                                dragColumn() &&\n                                gridService.reorderableOptions().enabled &&\n                                !groupingInProgress()\n                            ) {\n                                <span [class]=\"columnDropHintClass()\"> </span>\n                            }\n                            @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                <div\n                                    monaGridColumnResizeHandler\n                                    [column]=\"column\"\n                                    [class]=\"columnResizerClass()\"\n                                    (resizeStart)=\"onColumnResizeStart()\"\n                                    (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                            }\n                            <ng-template cdkDragPreview>\n                                <div [class]=\"columnDragPreviewClass()\">\n                                    <span>{{ column.title }}</span>\n                                </div>\n                            </ng-template>\n                            <ng-template cdkDragPlaceholder>\n                                @if (groupingInProgress()) {\n                                    <mona-chip\n                                        style=\"z-index: 10; pointer-events: none\"\n                                        [removable]=\"true\"\n                                        [rounded]=\"rounded()\"\n                                        >{{ column.title }}</mona-chip\n                                    >\n                                }\n                            </ng-template>\n                        </th>\n                        @if (columnDragging() && dragColumn() === column) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [class]=\"headerTableCellClass()\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"column.calculatedWidth\">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                    } @else if (column.titleTemplate) {\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                    } @else {\n                                        <span\n                                            [class]=\"headerTableColumnTitleClass()\"\n                                            (click)=\"onColumnSort(column)\"\n                                            [title]=\"column.title\"\n                                            >{{ column.title }}</span\n                                        >\n                                    }\n                                </div>\n                            </th>\n                        }\n                    }\n                </tr>\n                @if (filterRowEnabled()) {\n                    <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                scope=\"col\"\n                                class=\"border-r border-border overflow-hidden\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.aria-label]=\"'Filter by ' + column.title\">\n                                @if (column.kind === \"data\" && column.field) {\n                                    <mona-grid-filter-row-cell\n                                        [column]=\"column\"\n                                        (apply)=\"onColumnFilter(column, $event)\" />\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n            </thead>\n        </table>\n    </div>\n</div>\n\n@defer (when gridWidthSet()) {\n    @if (gridService.virtualScrollOptions().enabled) {\n        @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-virtual-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewRows()\"></mona-grid-virtual-list>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    } @else {\n        @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewPageRows()\"></mona-grid-list>\n            @if (footerVisible()) {\n                <div\n                    [class]=\"footerClass()\"\n                    [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\n                    #footerScrollElement\n                    data-grid-footer-scroll>\n                    <div>\n                        <table [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n                            <colgroup>\n                                @for (_ of gridService.groupColumns(); track $index) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @if (gridService.masterDetailTemplate()) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @for (col of gridService.visibleColumns(); track $index) {\n                                    <col [style.width.px]=\"col.calculatedWidth\" />\n                                }\n                            </colgroup>\n                            <tfoot role=\"rowgroup\">\n                                <tr [class]=\"footerTableRowClass()\">\n                                    @for (_ of gridService.groupColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                            [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                                    }\n                                    @if (gridService.masterDetailTemplate()) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"\n                                                gridService.groupColumns().length * gridService.groupColumnWidth\n                                            \"\n                                            [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                                    }\n                                    @for (column of gridService.visibleColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [column]=\"column\"\n                                            [lockedCellHeader]=\"true\"\n                                            [footerColumn]=\"column\">\n                                            <mona-grid-footer-cell\n                                                [column]=\"column\"\n                                                [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                                        </td>\n                                    }\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            }\n            <mona-pager\n                class=\"border-0 border-t border-t-border rounded-tl-none rounded-tr-none\"\n                [skip]=\"gridService.paginationState().skip\"\n                [pageSize]=\"gridService.paginationState().take\"\n                [total]=\"gridService.viewRowCount()\"\n                [size]=\"'small'\"\n                [rounded]=\"rounded()\"\n                [pageInput]=\"true\"\n                [pageSizeValues]=\"pageSizeValues()\"\n                [responsive]=\"responsivePager()\"\n                (pageSizeChange)=\"onPageSizeChange($event)\"\n                (pageChange)=\"onPageChange($event)\"></mona-pager>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    }\n} @placeholder {\n    <mona-placeholder text=\"Loading...\"></mona-placeholder>\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder text=\"No data\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n" }]
-            }], ctorParameters: () => [], propDecorators: { columnDefinitions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GRID_COLUMN_DEFINITION), { isSignal: true }] }], footerScrollElement: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], gridDetailTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridDetailTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], gridHeaderElement: [{ type: i0.ViewChild, args: ["gridHeaderElement", { isSignal: true }] }], gridHeaderTableElement: [{ type: i0.ViewChild, args: ["headerTable", { isSignal: true }] }], groupColumnList: [{ type: i0.ViewChild, args: ["groupColumnList", { isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], toolbarElement: [{ type: i0.ViewChild, args: ["toolbarElement", { isSignal: true }] }], toolbarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridToolbarTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeValues", required: false }] }], resizeMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMethod", required: false }] }], responsivePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsivePager", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } }) });
+                        }, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>Columns</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <i class=\"ri-arrow-down-line\"></i>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <i class=\"ri-arrow-up-line\"></i>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ml-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <i class=\"ri-more-2-fill\"></i>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-left-fill\"></i> Move as previous\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-right-fill\"></i> Move as next\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">Drag a column header here to group</span>\n        }\n    </div>\n}\n<div [class]=\"headerClass()\" [style.margin-right.px]=\"headerMarginRight()\" #gridHeaderElement>\n    <div>\n        <table #headerTable [class]=\"headerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n            <colgroup>\n                @for (_ of gridService.groupColumns(); track $index) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @if (gridService.rowReorderColumnVisible()) {\n                    <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                }\n                @if (gridService.masterDetailTemplate()) {\n                    <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                }\n                @if (gridService.selectionColumnVisible()) {\n                    <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                }\n                @for (col of gridService.visibleColumns(); track $index) {\n                    <col [style.width.px]=\"col.calculatedWidth\" />\n                }\n            </colgroup>\n            <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                <tr\n                    cdkDropList\n                    [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                    (cdkDropListDropped)=\"onColumnDrop()\"\n                    [class]=\"headerTableRowClass()\">\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                    }\n                    @if (gridService.rowReorderColumnVisible()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [structuralColumn]=\"'reorder'\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'command'\"\n                            [columnId]=\"'$rowReorder'\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"0\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"gridService.groupColumns().length === 0\"\n                            [lastInRow]=\"\n                                !gridService.masterDetailTemplate() &&\n                                !gridService.selectionColumnVisible() &&\n                                gridService.visibleColumns().length === 0\n                            \"\n                            scope=\"col\"\n                            aria-label=\"Row reorder\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [structuralColumn]=\"'detail'\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                    }\n                    @if (gridService.selectionColumnVisible()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [structuralColumn]=\"'selection'\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'command'\"\n                            [columnId]=\"'$selection'\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"\n                                (gridService.rowReorderColumnVisible() ? 1 : 0) +\n                                (gridService.masterDetailTemplate() ? 1 : 0)\n                            \"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"\n                                !gridService.rowReorderColumnVisible() &&\n                                !gridService.masterDetailTemplate() &&\n                                gridService.groupColumns().length === 0\n                            \"\n                            [lastInRow]=\"gridService.visibleColumns().length === 0\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.selectionColumnWidth\">\n                            @if (\n                                gridService.selectableOptions().mode === \"multiple\" &&\n                                gridService.selectableOptions().showSelectAll !== false\n                            ) {\n                                <mona-grid-select-all-checkbox />\n                            }\n                        </th>\n                    }\n                    @for (column of gridService.visibleColumns(); track $index) {\n                        @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                        <th\n                            scope=\"col\"\n                            role=\"columnheader\"\n                            cdkDrag\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [lockedCellHeader]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'header'\"\n                            [columnId]=\"column.id\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"colIndex\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                            [lastInRow]=\"\n                                colIndex ===\n                                gridService.leadingLogicalColumnCount() +\n                                    gridService.visibleColumns().length -\n                                    1\n                            \"\n                            (toggle)=\"onColumnSort(column)\"\n                            [cdkDragData]=\"column\"\n                            [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                            [class]=\"headerTableCellClass()\"\n                            (mouseenter)=\"onColumnMouseEnter(column)\"\n                            (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                            (cdkDragStarted)=\"onColumnDragStart($event)\"\n                            [style.min-width.px]=\"column.minWidth\"\n                            [style.width.px]=\"column.calculatedWidth\"\n                            [attr.colspan]=\"1\"\n                            [attr.aria-sort]=\"\n                                gridService.sortableOptions().enabled\n                                    ? (column.columnSortDirection | columnAriaSort)\n                                    : null\n                            \">\n                            <div [class]=\"headerTableColumnWrapClass()\">\n                                @if (column.headerTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"column.headerTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                } @else if (column.titleTemplate) {\n                                    <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                } @else {\n                                    <span\n                                        [class]=\"headerTableColumnTitleClass()\"\n                                        (click)=\"onColumnSort(column)\"\n                                        [title]=\"column.title\"\n                                        >{{ column.title }}</span\n                                    >\n                                }\n\n                                <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                    @if (gridService.sortableOptions().showIndices && column.sortIndex !== null) {\n                                        <span>{{ column.sortIndex }}</span>\n                                    }\n                                    @if (column.columnSortDirection === \"asc\") {\n                                        <i class=\"ri-arrow-down-line\"></i>\n                                    } @else if (column.columnSortDirection === \"desc\") {\n                                        <i class=\"ri-arrow-up-line\"></i>\n                                    }\n                                    @if (filterMenuEnabled()) {\n                                        @if (column.kind === \"data\") {\n                                            <mona-grid-filter-menu\n                                                [column]=\"column\"\n                                                [type]=\"column.dataType\"\n                                                (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                        }\n                                    }\n                                </div>\n                            </div>\n                            @if (\n                                dropColumn() === column &&\n                                dragColumn() &&\n                                gridService.reorderableOptions().enabled &&\n                                !groupingInProgress()\n                            ) {\n                                <span [class]=\"columnDropHintClass()\"> </span>\n                            }\n                            @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                <div\n                                    monaGridColumnResizeHandler\n                                    [column]=\"column\"\n                                    [class]=\"columnResizerClass()\"\n                                    (resizeStart)=\"onColumnResizeStart()\"\n                                    (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                            }\n                            <ng-template cdkDragPreview>\n                                <div [class]=\"columnDragPreviewClass()\">\n                                    <span>{{ column.title }}</span>\n                                </div>\n                            </ng-template>\n                            <ng-template cdkDragPlaceholder>\n                                @if (groupingInProgress()) {\n                                    <mona-chip\n                                        style=\"z-index: 10; pointer-events: none\"\n                                        [removable]=\"true\"\n                                        [rounded]=\"rounded()\"\n                                        >{{ column.title }}</mona-chip\n                                    >\n                                }\n                            </ng-template>\n                        </th>\n                        @if (columnDragging() && dragColumn() === column) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [class]=\"headerTableCellClass()\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"column.calculatedWidth\">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                    } @else if (column.titleTemplate) {\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                    } @else {\n                                        <span\n                                            [class]=\"headerTableColumnTitleClass()\"\n                                            (click)=\"onColumnSort(column)\"\n                                            [title]=\"column.title\"\n                                            >{{ column.title }}</span\n                                        >\n                                    }\n                                </div>\n                            </th>\n                        }\n                    }\n                </tr>\n                @if (filterRowEnabled()) {\n                    <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.rowReorderColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'reorder'\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'detail'\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'selection'\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\"></th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                scope=\"col\"\n                                class=\"border-r border-border overflow-hidden\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.aria-label]=\"'Filter by ' + column.title\">\n                                @if (column.kind === \"data\" && column.field) {\n                                    <mona-grid-filter-row-cell\n                                        [column]=\"column\"\n                                        (apply)=\"onColumnFilter(column, $event)\" />\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n            </thead>\n        </table>\n    </div>\n</div>\n\n@defer (when gridWidthSet()) {\n    @if (gridService.virtualScrollOptions().enabled) {\n        @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-virtual-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewRows()\"></mona-grid-virtual-list>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    } @else {\n        @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewPageRows()\"></mona-grid-list>\n            @if (footerVisible()) {\n                <div\n                    [class]=\"footerClass()\"\n                    [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\n                    #footerScrollElement\n                    data-grid-footer-scroll>\n                    <div>\n                        <table [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n                            <colgroup>\n                                @for (_ of gridService.groupColumns(); track $index) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @if (gridService.rowReorderColumnVisible()) {\n                                    <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                                }\n                                @if (gridService.masterDetailTemplate()) {\n                                    <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                                }\n                                @if (gridService.selectionColumnVisible()) {\n                                    <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                                }\n                                @for (col of gridService.visibleColumns(); track $index) {\n                                    <col [style.width.px]=\"col.calculatedWidth\" />\n                                }\n                            </colgroup>\n                            <tfoot role=\"rowgroup\">\n                                <tr [class]=\"footerTableRowClass()\">\n                                    @for (_ of gridService.groupColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                            [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                                    }\n                                    @if (gridService.rowReorderColumnVisible()) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [structuralColumn]=\"'reorder'\"\n                                            [footerCellWidth]=\"gridService.rowReorderColumnWidth\"></td>\n                                    }\n                                    @if (gridService.masterDetailTemplate()) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [structuralColumn]=\"'detail'\"\n                                            [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                                    }\n                                    @if (gridService.selectionColumnVisible()) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [structuralColumn]=\"'selection'\"\n                                            [footerCellWidth]=\"gridService.selectionColumnWidth\"></td>\n                                    }\n                                    @for (column of gridService.visibleColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [column]=\"column\"\n                                            [lockedCellHeader]=\"true\"\n                                            [footerColumn]=\"column\">\n                                            <mona-grid-footer-cell\n                                                [column]=\"column\"\n                                                [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                                        </td>\n                                    }\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            }\n            <mona-pager\n                class=\"border-0 border-t border-t-border rounded-tl-none rounded-tr-none\"\n                [skip]=\"gridService.paginationState().skip\"\n                [pageSize]=\"gridService.paginationState().take\"\n                [total]=\"gridService.viewRowCount()\"\n                [size]=\"'small'\"\n                [rounded]=\"rounded()\"\n                [pageInput]=\"true\"\n                [pageSizeValues]=\"pageSizeValues()\"\n                [responsive]=\"responsivePager()\"\n                (pageSizeChange)=\"onPageSizeChange($event)\"\n                (pageChange)=\"onPageChange($event)\"></mona-pager>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    }\n} @placeholder {\n    <mona-placeholder text=\"Loading...\"></mona-placeholder>\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder text=\"No data\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n" }]
+            }], ctorParameters: () => [], propDecorators: { columnDefinitions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GRID_COLUMN_DEFINITION), { isSignal: true }] }], footerScrollElement: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], gridDetailTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridDetailTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], gridHeaderElement: [{ type: i0.ViewChild, args: ["gridHeaderElement", { isSignal: true }] }], gridHeaderTableElement: [{ type: i0.ViewChild, args: ["headerTable", { isSignal: true }] }], groupColumnList: [{ type: i0.ViewChild, args: ["groupColumnList", { isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], toolbarElement: [{ type: i0.ViewChild, args: ["toolbarElement", { isSignal: true }] }], toolbarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridToolbarTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeValues", required: false }] }], resizeMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMethod", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], responsivePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsivePager", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } }) });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/grid
@@ -5130,5 +5583,5 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
  * Generated bundle index. Do not edit.
  */
 
-export { GridSortableDirective as $, GridCellTemplateDirective as A, GridColumnComponent as B, CellEditEvent as C, GridColumnTitleTemplateDirective as D, GridCommandColumnComponent as E, GridComponent as F, GridNavigationService as G, GridContextMenuDirective as H, GridDetailTemplateDirective as I, GridEditCommandDirective as J, GridEditEvent as K, GridEditTemplateDirective as L, GridEditableDirective as M, GridExportDirective as N, GridFilterableDirective as O, GridFooterTemplateDirective as P, GridGroupFooterTemplateDirective as Q, GridGroupableDirective as R, GridHeaderTemplateDirective as S, GridNoDataTemplateDirective as T, GridRemoveCommandDirective as U, GridRemoveEvent as V, GridReorderableDirective as W, GridResizableDirective as X, GridSaveCommandDirective as Y, GridSaveEvent as Z, GridSelectableDirective as _, GridRowFlattenerService as a, GridStatePersistenceDirective as a0, GridToolbarTemplateDirective as a1, GridVirtualScrollDirective as a2, RowEditEvent as a3, gridFooterTableRowThemeVariants as b, GridService as c, gridGroupRowThemeVariants as d, gridListTableThemeVariants as e, GridLogicalCellDirective as f, gridListBaseThemeVariants as g, GridLockedCellDirective as h, gridFooterThemeVariants as i, gridFooterTableThemeVariants as j, gridListTableCellThemeVariants as k, gridDetailContentCellThemeVariants as l, gridDetailIndentCellThemeVariants as m, gridDetailRowThemeVariants as n, gridListTableRowThemeVariants as o, gridCellEditorBaseThemeVariants as p, gridCellEditorInputThemeVariants as q, gridCellBaseThemeVariants as r, gridCellContainerThemeVariants as s, gridCellDirtyIndicatorThemeVariants as t, gridCellTextThemeVariants as u, gridFooterTableCellThemeVariants as v, GridAddCommandDirective as w, GridAddEvent as x, GridCancelCommandDirective as y, GridCancelEvent as z };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DWzYyGnb.mjs.map
+export { GridResizableDirective as $, GridAddCommandDirective as A, GridAddEvent as B, CellEditEvent as C, GridCancelCommandDirective as D, GridCancelEvent as E, GridCellTemplateDirective as F, GridNavigationService as G, GridColumnComponent as H, GridColumnTitleTemplateDirective as I, GridCommandColumnComponent as J, GridComponent as K, GridContextMenuDirective as L, GridDetailTemplateDirective as M, GridEditCommandDirective as N, GridEditEvent as O, GridEditTemplateDirective as P, GridEditableDirective as Q, GridExportDirective as R, GridFilterableDirective as S, GridFooterTemplateDirective as T, GridGroupFooterTemplateDirective as U, GridGroupableDirective as V, GridHeaderTemplateDirective as W, GridNoDataTemplateDirective as X, GridRemoveCommandDirective as Y, GridRemoveEvent as Z, GridReorderableDirective as _, GridRowFlattenerService as a, GridRowReorderableDirective as a0, GridSaveCommandDirective as a1, GridSaveEvent as a2, GridSelectableDirective as a3, GridSortableDirective as a4, GridStatePersistenceDirective as a5, GridToolbarTemplateDirective as a6, GridVirtualScrollDirective as a7, RowEditEvent as a8, RowReorderEvent as a9, gridFooterTableRowThemeVariants as b, GridService as c, gridGroupRowThemeVariants as d, gridRowDragPlaceholderThemeVariants as e, gridRowDragPreviewThemeVariants as f, gridListBaseThemeVariants as g, gridListTableThemeVariants as h, GridLogicalCellDirective as i, GridLockedCellDirective as j, gridFooterThemeVariants as k, gridFooterTableThemeVariants as l, gridListTableCellThemeVariants as m, gridDetailContentCellThemeVariants as n, gridDetailIndentCellThemeVariants as o, gridDetailRowThemeVariants as p, gridListTableRowThemeVariants as q, gridCellEditorBaseThemeVariants as r, gridCellEditorInputThemeVariants as s, gridCellBaseThemeVariants as t, gridCellContainerThemeVariants as u, gridCellDirtyIndicatorThemeVariants as v, gridCellTextThemeVariants as w, gridRowReorderHandleThemeVariants as x, gridSelectionCellThemeVariants as y, gridFooterTableCellThemeVariants as z };
+//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DaOemy_G.mjs.map