@nanahoshi/mona-ui 0.20.1 → 0.22.0

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

@@ -1,6 +1,6 @@
 import { PreventableEvent, deepEquals } from '@nanahoshi/mona-ui/common';
 import * as i0 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 { Directive, signal, computed, inject, DOCUMENT, Injector, PLATFORM_ID, effect, Injectable, input, contentChildren, untracked, DestroyRef, output, afterNextRender, model, afterRenderEffect, isDevMode, InjectionToken, contentChild, TemplateRef, forwardRef, Component, ChangeDetectionStrategy, ElementRef, afterEveryRender, Pipe, linkedSignal, viewChild } from '@angular/core';
 import { isPlatformBrowser, DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { form } from '@angular/forms/signals';
@@ -11,9 +11,10 @@ import { Subject, BehaviorSubject, filter, startWith, pairwise, map, skip, fromE
 import { v4 } from 'uuid';
 import { ContextMenuItemComponent } from '@nanahoshi/mona-ui/contextmenu';
 import { CdkDropList, CdkDrag, CdkDragPreview, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
+import { LucideFunnel, LucideFunnelX, LucideArrowDown, LucideArrowLeft, LucideArrowRight, LucideArrowUp, LucideEllipsisVertical } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { ChipComponent } from '@nanahoshi/mona-ui/chip';
-import { FilterService, FilterMenuComponent } from '@nanahoshi/mona-ui/filter';
+import { FilterService, FilterMenuComponent, FILTER_DEFAULT_MESSAGES } from '@nanahoshi/mona-ui/filter';
 import { PagerComponent } from '@nanahoshi/mona-ui/pager';
 import { PlaceholderComponent } from '@nanahoshi/mona-ui/placeholder';
 import { PopupService, PopupComponent } from '@nanahoshi/mona-ui/popup';
@@ -23,7 +24,6 @@ import { Clipboard } from '@angular/cdk/clipboard';
 import { cva } from 'class-variance-authority';
 import { FilterInputComponent } from '@nanahoshi/mona-ui/internal/filter-input';
 import { ListViewComponent, ListViewHeaderTemplateDirective, ListViewSelectableDirective, ListViewFooterTemplateDirective } from '@nanahoshi/mona-ui/list-view';
-import { LucideFunnel, LucideFunnelX } from '@lucide/angular';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { DatePickerComponent } from '@nanahoshi/mona-ui/date-picker';
@@ -159,6 +159,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+/** Fixed item height used when virtual scrolling has no explicit height. */
+const GRID_DEFAULT_VIRTUAL_ROW_HEIGHT = 36;
+
+function toGridComparableValue(value) {
+    if (value instanceof Date) {
+        return value.getTime();
+    }
+    switch (typeof value) {
+        case "bigint":
+        case "boolean":
+        case "number":
+        case "string":
+            return value;
+        default:
+            return null;
+    }
+}
+/** Nullish and unsupported values sort first ascending, with stable ties. */
+function compareGridComparableValues(left, right) {
+    if (left == null) {
+        return right == null ? 0 : -1;
+    }
+    if (right == null) {
+        return 1;
+    }
+    return left < right ? -1 : left > right ? 1 : 0;
+}
+
 class Row {
     constructor(data, uid = v4()) {
         this.data = data;
@@ -222,6 +250,7 @@ const GRID_DEFAULT_MESSAGES = {
     rowReorderDisabledEditing: "Finish editing to reorder rows.",
     rowReorderDisabledFiltered: "Clear filters to reorder rows.",
     rowReorderDisabledGrouped: "Clear grouping to reorder rows.",
+    rowReorderDisabledServerBinding: "Row reordering isn't available with server binding.",
     rowReorderDisabledSingleRow: "At least two rows are needed to reorder.",
     rowReorderDisabledSorted: "Clear sorting to reorder rows.",
     rowReorderDisabledVirtualScroll: "Row reordering isn't available while virtual scrolling is enabled.",
@@ -238,6 +267,10 @@ const GRID_DEFAULT_MESSAGES = {
 const GRID_STATE_VERSION = 1;
 class GridService {
     #anchorRowKey;
+    // 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;
     #document;
     #editContext;
     #editSession;
@@ -251,18 +284,42 @@ class GridService {
     #reorderableOptions;
     #resizableOptions;
     #rowReorderableOptions;
-    #scrollbarGutterMeasurementSource;
-    #scrollbarGutterWidth;
     #rowUidByData;
     #rowUidByKeyObject;
+    #scrollbarGutterMeasurementSource;
+    #scrollbarGutterWidth;
+    #serverBindingEnabled;
+    #serverLoading;
+    #serverTotal;
     #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;
+    #dataStateEmissionPending;
     constructor() {
         this.#anchorRowKey = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#anchorRowKey" }] : /* istanbul ignore next */ []));
+        // 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.#document = inject(DOCUMENT);
         this.#editContext = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#editContext" }] : /* istanbul ignore next */ []));
@@ -287,13 +344,21 @@ class GridService {
         ...(ngDevMode ? [{ debugName: "#resizableOptions" }] : /* istanbul ignore next */ []));
         this.#rowReorderableOptions = signal({ enabled: false }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#rowReorderableOptions" }] : /* istanbul ignore next */ []));
+        this.#rowUidByData = new WeakMap();
+        this.#rowUidByKeyObject = new WeakMap();
         this.#scrollbarGutterMeasurementSource = signal("fallback", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#scrollbarGutterMeasurementSource" }] : /* istanbul ignore next */ []));
         this.#scrollbarGutterWidth = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#scrollbarGutterWidth" }] : /* istanbul ignore next */ []));
-        this.#rowUidByData = new WeakMap();
-        this.#rowUidByKeyObject = new WeakMap();
+        this.#serverBindingEnabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#serverBindingEnabled" }] : /* istanbul ignore next */ []));
+        this.#serverLoading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#serverLoading" }] : /* istanbul ignore next */ []));
+        this.#serverTotal = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#serverTotal" }] : /* istanbul ignore next */ []));
         this.#textMeasureCache = new Map();
+        this.#dataStateEmissionPending = false;
+        this.add$ = new Subject();
         this.addRowData = computed(() => {
             const session = this.#editSession();
             return session?.operation === "create" ? session.model() : null;
@@ -301,36 +366,6 @@ class GridService {
         ...(ngDevMode ? [{ debugName: "addRowData" }] : /* istanbul ignore next */ []));
         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)
@@ -349,6 +384,11 @@ class GridService {
             .select(row => row.data)
             .toArray(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "aggregateRows" }] : /* 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.appliedFilters = signal(ImmutableDictionary.create(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "appliedFilters" }] : /* istanbul ignore next */ []));
         this.appliedGroupSorts = signal(ImmutableDictionary.create(), /* @ts-ignore */
@@ -367,8 +407,8 @@ class GridService {
             return this.viewRows();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bulkSelectionRows" }] : /* istanbul ignore next */ []));
-        this.cellEdit$ = new Subject();
         this.cancel$ = new Subject();
+        this.cellEdit$ = new Subject();
         /** Set of currently collapsed group keys (global, shared by both paginated and virtual list). */
         this.collapsedGroupKeys = signal(ImmutableSet.create(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "collapsedGroupKeys" }] : /* istanbul ignore next */ []));
@@ -379,18 +419,22 @@ class GridService {
         ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
         this.contextMenuItems = signal(ImmutableSet.create(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contextMenuItems" }] : /* istanbul ignore next */ []));
-        this.detailColumnWidth = 36;
+        this.dataStateChange$ = new Subject();
         this.detailColumnOffset = computed(() => this.structuralColumnOffset("detail", this.groupStructuralWidth()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "detailColumnOffset" }] : /* istanbul ignore next */ []));
+        this.detailColumnWidth = 36;
         this.detailStructuralWidth = computed(() => this.masterDetailTemplate() != null ? this.detailColumnWidth : 0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "detailStructuralWidth" }] : /* istanbul ignore next */ []));
+        this.draggingRowUid = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draggingRowUid" }] : /* istanbul ignore next */ []));
+        this.edit$ = new Subject();
         this.editBaseDict = computed(() => {
             const pairs = this.#editSource().select(item => new KeyValuePair(item.$rowId, item));
             return ImmutableDictionary.create(pairs);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "editBaseDict" }] : /* istanbul ignore next */ []));
         this.editContext = this.#editContext.asReadonly();
-        this.edit$ = new Subject();
+        this.editSession = this.#editSession.asReadonly();
         this.editViewDict = computed(() => {
             const session = this.#editSession();
             if (session == null || session.operation !== "update" || session.rowUid == null) {
@@ -401,7 +445,6 @@ class GridService {
             return ImmutableDictionary.create(pairs);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "editViewDict" }] : /* istanbul ignore next */ []));
-        this.editSession = this.#editSession.asReadonly();
         this.editableOptions = signal({ enabled: false, mode: "cell" }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "editableOptions" }] : /* istanbul ignore next */ []));
         this.editingRowUid = computed(() => this.#editContext()?.rowUid ?? null, /* @ts-ignore */
@@ -438,12 +481,12 @@ class GridService {
         ...(ngDevMode ? [{ debugName: "groupStructuralWidth" }] : /* istanbul ignore next */ []));
         this.groupableOptions = signal({ enabled: false, showFooter: false }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupableOptions" }] : /* istanbul ignore next */ []));
+        this.hasFooter = computed(() => this.aggregateColumns().any(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
         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 */ []));
         this.hasLiveScrollbarGutterWidth = computed(() => this.#scrollbarGutterMeasurementSource() === "body", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasLiveScrollbarGutterWidth" }] : /* istanbul ignore next */ []));
         this.headerTableElement = signal(null, /* @ts-ignore */
@@ -464,6 +507,13 @@ class GridService {
             return groupCount > 0 ? (groupCount - 1) * this.groupColumnWidth : null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lastLeftStructuralOffset" }] : /* istanbul ignore next */ []));
+        this.leadingLogicalColumnCount = computed(() => this.visibleStructuralColumns().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leadingLogicalColumnCount" }] : /* istanbul ignore next */ []));
+        this.leadingStructuralColumnCount = computed(() => this.groupColumns().length + this.visibleStructuralColumns().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leadingStructuralColumnCount" }] : /* istanbul ignore next */ []));
+        this.leadingStructuralWidth = computed(() => this.groupStructuralWidth() +
+            this.visibleStructuralColumns().reduce((total, column) => total + column.width, 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leadingStructuralWidth" }] : /* istanbul ignore next */ []));
         this.leftLockedStructuralWidth = computed(() => {
             if (!this.hasLeftLockedColumns()) {
                 return 0;
@@ -497,13 +547,6 @@ 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 */
@@ -519,6 +562,8 @@ class GridService {
         this.messages = this.#i18n.componentMessages("grid", GRID_DEFAULT_MESSAGES);
         this.newRowFactory = signal(() => ({}), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "newRowFactory" }] : /* istanbul ignore next */ []));
+        this.pagerTotal = computed(() => this.serverBindingEnabled() ? this.serverTotal() : this.viewRowCount(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerTotal" }] : /* istanbul ignore next */ []));
         this.paginationState = signal({ page: 1, skip: 0, take: 10 }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "paginationState" }] : /* istanbul ignore next */ []));
         this.remove$ = new Subject();
@@ -539,6 +584,9 @@ class GridService {
             if (!this.rowReorderableOptions().enabled) {
                 return "disabled";
             }
+            if (this.serverBindingEnabled()) {
+                return "server-binding";
+            }
             if (this.virtualScrollOptions().enabled) {
                 return "virtual-scroll";
             }
@@ -568,8 +616,6 @@ class GridService {
         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 */ []));
@@ -596,16 +642,19 @@ class GridService {
                 .toImmutableSet();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
-        this.selectionColumnWidth = 40;
+        this.selectionColumnOffset = computed(() => this.structuralColumnOffset("selection", this.groupStructuralWidth()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionColumnOffset" }] : /* istanbul ignore next */ []));
         this.selectionColumnVisible = computed(() => {
             const options = this.selectableOptions();
             return options.enabled === true && options.showCheckboxes === true;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectionColumnVisible" }] : /* istanbul ignore next */ []));
-        this.selectionColumnOffset = computed(() => this.structuralColumnOffset("selection", this.groupStructuralWidth()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selectionColumnOffset" }] : /* istanbul ignore next */ []));
+        this.selectionColumnWidth = 40;
         this.selectionStructuralWidth = computed(() => this.selectionColumnVisible() ? this.selectionColumnWidth : 0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectionStructuralWidth" }] : /* istanbul ignore next */ []));
+        this.serverBindingEnabled = this.#serverBindingEnabled.asReadonly();
+        this.serverLoading = this.#serverLoading.asReadonly();
+        this.serverTotal = this.#serverTotal.asReadonly();
         this.someBulkSelectionRowsSelected = computed(() => {
             const scopeSize = this.#bulkSelectionRowKeys().size;
             const count = this.#bulkSelectionSelectedCount();
@@ -651,6 +700,9 @@ class GridService {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tableWidth" }] : /* istanbul ignore next */ []));
         this.viewPageRows = computed(() => {
+            if (this.serverBindingEnabled()) {
+                return this.viewRows();
+            }
             const skip = this.paginationState().skip;
             const take = this.paginationState().take;
             const viewRows = this.viewRows();
@@ -664,6 +716,9 @@ class GridService {
         ...(ngDevMode ? [{ debugName: "viewRowCount" }] : /* istanbul ignore next */ []));
         this.viewRows = computed(() => {
             const rows = this.rows();
+            if (this.serverBindingEnabled()) {
+                return rows;
+            }
             const appliedFilters = this.appliedFilters();
             const appliedSorts = this.appliedSorts();
             const groupColumns = this.groupColumns();
@@ -693,7 +748,10 @@ class GridService {
         ...(ngDevMode ? [{ debugName: "virtualGridMaxBuffer" }] : /* istanbul ignore next */ []));
         this.virtualGridMinBuffer = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "virtualGridMinBuffer" }] : /* istanbul ignore next */ []));
-        this.virtualScrollOptions = signal({ enabled: false, height: 32 }, /* @ts-ignore */
+        this.virtualScrollOptions = signal({
+            enabled: false,
+            height: GRID_DEFAULT_VIRTUAL_ROW_HEIGHT
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "virtualScrollOptions" }] : /* istanbul ignore next */ []));
         this.visibleColumns = computed(() => this.columns()
             .where(column => !column.hidden)
@@ -723,6 +781,7 @@ class GridService {
         if (options.schemaVersion != null && state.schemaVersion !== options.schemaVersion) {
             return { ignoredColumns: [], missingColumns: [], status: "rejected-schema" };
         }
+        const previousDataState = this.getDataState();
         let columns = this.columns().toArray();
         const columnById = new Map();
         for (const column of columns) {
@@ -773,6 +832,12 @@ class GridService {
         if (options.persistPageSize !== false && state.pageSize != null) {
             this.setPageState({ page: 1, skip: 0, take: state.pageSize });
         }
+        if (this.serverBindingEnabled()) {
+            this.setPageState({ skip: 0 });
+        }
+        if (!deepEquals(previousDataState, this.getDataState())) {
+            this.requestDataStateChange({ resetPage: true });
+        }
         return { ignoredColumns, missingColumns, status: "applied" };
     }
     canReorderRow(row) {
@@ -837,10 +902,10 @@ class GridService {
                 .where(filter => filter != null)
                 .toArray(),
             group: this.getGroupDescriptors(this.groupColumns()),
-            sort: this.appliedSorts()
-                .values()
-                .select(state => ({ dir: state.sort.dir, field: state.sort.field }))
-                .toArray(),
+            sort: this.getSortDescriptors().map(sort => ({
+                dir: sort.dir,
+                field: sort.field
+            })),
             version: GRID_STATE_VERSION
         };
         if (options.schemaVersion != null) {
@@ -937,6 +1002,20 @@ class GridService {
     getColumnWidth(column) {
         return this.normalizeRenderedWidth(column.calculatedWidth ?? column.width ?? column.minWidth ?? 0);
     }
+    getDataState() {
+        const { skip, take } = this.paginationState();
+        return {
+            skip,
+            take,
+            sort: this.getSortDescriptors(),
+            filter: this.appliedFilters()
+                .values()
+                .select(state => state.filter)
+                .where(filter => filter != null)
+                .select(filter => this.cloneFilter(filter))
+                .toArray()
+        };
+    }
     getGroupDescriptors(columns) {
         return select(columns, c => ({
             field: c.field,
@@ -948,6 +1027,16 @@ class GridService {
         const label = options.rowAriaLabel?.(row.data, absoluteIndex);
         return label ?? this.messages().reorderRow(absoluteIndex + 1);
     }
+    /** Sort order shared by models, persistence, and server requests. */
+    getSortDescriptors() {
+        const columns = this.columns().toArray();
+        return this.appliedSorts()
+            .values()
+            .toArray()
+            .sort((left, right) => (columns.find(c => c.field === left.sort.field)?.sortIndex ?? Number.MAX_SAFE_INTEGER) -
+            (columns.find(c => c.field === right.sort.field)?.sortIndex ?? Number.MAX_SAFE_INTEGER))
+            .map(state => ({ ...state.sort }));
+    }
     handleMultipleSelection(event, row) {
         if (event.shiftKey) {
             this.selectRowRange(row);
@@ -1121,6 +1210,24 @@ class GridService {
         this.remove$.next(event);
         return !event.isDefaultPrevented();
     }
+    requestDataStateChange(options = {}) {
+        if (!this.serverBindingEnabled()) {
+            return;
+        }
+        if (options.resetPage) {
+            this.setPageState({ skip: 0 });
+        }
+        if (this.#dataStateEmissionPending) {
+            return;
+        }
+        this.#dataStateEmissionPending = true;
+        queueMicrotask(() => {
+            this.#dataStateEmissionPending = false;
+            if (this.serverBindingEnabled()) {
+                this.dataStateChange$.next(this.getDataState());
+            }
+        });
+    }
     requestRowReorder(row, previousPageIndex, currentPageIndex) {
         if (!this.rowReorderInteractionEnabled()) {
             return false;
@@ -1283,7 +1390,19 @@ class GridService {
         this.newRowFactory.set(factory);
     }
     setPageState(state) {
-        this.paginationState.update(v => ({ ...v, ...state }));
+        const current = this.paginationState();
+        const take = state.take ?? current.take;
+        const skip = state.skip ?? (state.page != null ? (state.page - 1) * take : current.skip);
+        if (this.serverBindingEnabled()) {
+            this.validateServerInteger(skip, "skip");
+            if (!Number.isSafeInteger(take) || take <= 0) {
+                throw new Error("monaGridServerBinding: pageSize must be a finite positive integer.");
+            }
+        }
+        const page = Math.floor(skip / take) + 1;
+        if (current.skip !== skip || current.take !== take || current.page !== page) {
+            this.paginationState.set({ skip, take, page });
+        }
     }
     setReorderableOptions(options) {
         this.#reorderableOptions.update(v => ({ ...v, ...options }));
@@ -1297,12 +1416,6 @@ class GridService {
     setRowReorderableOptions(options) {
         this.#rowReorderableOptions.set(options);
     }
-    setRows(value, rowKey = null) {
-        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;
@@ -1317,14 +1430,44 @@ class GridService {
         }
         this.selectedKeys.update(keys => keys.remove(key));
     }
-    setSortableOptions(options) {
-        this.sortableOptions.update(v => ({ ...v, ...options }));
+    setRows(value, rowKey = null) {
+        this.rows.set(ImmutableList.create(select(value, r => new Row(r, this.getRowUid(r, rowKey)))));
     }
     setScrollEndThreshold(threshold) {
         this.scrollEndThreshold.set(threshold);
     }
+    setSelectableOptions(options) {
+        this.selectableOptions.update(v => ({ ...v, ...options }));
+    }
+    setServerBindingEnabled(enabled) {
+        if (enabled && this.virtualScrollOptions().enabled) {
+            throw new Error("monaGridServerBinding and monaGridVirtualScroll cannot be enabled together.");
+        }
+        this.#serverBindingEnabled.set(enabled);
+    }
+    setServerLoading(loading) {
+        this.#serverLoading.set(loading);
+    }
+    setServerSkip(skip) {
+        this.validateServerInteger(skip, "skip");
+        this.setPageState({ skip, page: Math.floor(skip / this.paginationState().take) + 1 });
+    }
+    setServerTotal(total) {
+        this.validateServerInteger(total, "total");
+        this.#serverTotal.set(total);
+    }
+    setSortableOptions(options) {
+        this.sortableOptions.update(v => ({ ...v, ...options }));
+    }
     setVirtualScrollOptions(options) {
-        this.virtualScrollOptions.update(v => ({ ...v, ...options }));
+        const height = options.height ?? this.virtualScrollOptions().height ?? GRID_DEFAULT_VIRTUAL_ROW_HEIGHT;
+        if (!Number.isFinite(height) || height <= 0) {
+            throw new Error("monaGridVirtualScroll: height must be finite and greater than zero.");
+        }
+        if (options.enabled && this.serverBindingEnabled()) {
+            throw new Error("monaGridServerBinding and monaGridVirtualScroll cannot be enabled together.");
+        }
+        this.virtualScrollOptions.update(v => ({ ...v, ...options, height }));
     }
     startAddRow(originalEvent) {
         const activeSession = this.#editSession();
@@ -1501,17 +1644,31 @@ class GridService {
         const segment = `${field}:${String(value ?? "")}`;
         return parentKey != null ? `${parentKey}/${segment}` : segment;
     }
-    compareComparableValues(left, right) {
-        if (right == null) {
-            return 1;
+    clearEditSession() {
+        this.#editContext.set(null);
+        this.#editSession.set(null);
+    }
+    cloneFilter(filter) {
+        return {
+            ...filter,
+            filters: filter.filters.map(descriptor => "filters" in descriptor
+                ? this.cloneFilter(descriptor)
+                : "value" in descriptor
+                    ? { ...descriptor, value: this.cloneFilterValue(descriptor.value) }
+                    : { ...descriptor })
+        };
+    }
+    cloneFilterValue(value) {
+        if (value instanceof Date) {
+            return new Date(value.getTime());
         }
-        if (left < right) {
-            return -1;
+        if (Array.isArray(value)) {
+            return value.map(item => this.cloneFilterValue(item));
         }
-        if (left > right) {
-            return 1;
+        if (value != null && typeof value === "object") {
+            return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, this.cloneFilterValue(item)]));
         }
-        return 0;
+        return value;
     }
     createAggregateBucket(rows, column) {
         const field = column.field;
@@ -1533,14 +1690,14 @@ class GridService {
             if (value == null) {
                 continue;
             }
-            const comparableValue = this.toComparableValue(value);
+            const comparableValue = toGridComparableValue(value);
             if (comparableValue == null) {
                 continue;
             }
-            if (min == null || this.compareComparableValues(comparableValue, this.toComparableValue(min)) < 0) {
+            if (min == null || compareGridComparableValues(comparableValue, toGridComparableValue(min)) < 0) {
                 min = value;
             }
-            if (max == null || this.compareComparableValues(comparableValue, this.toComparableValue(max)) > 0) {
+            if (max == null || compareGridComparableValues(comparableValue, toGridComparableValue(max)) > 0) {
                 max = value;
             }
         }
@@ -1555,6 +1712,35 @@ class GridService {
         }
         return aggregates.toImmutableDictionary(e => e.key, e => e.value);
     }
+    createEditSession(options) {
+        const model = signal({ ...options.rowData }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        const context = {
+            column: options.column,
+            field: options.field,
+            isNew: options.isNew,
+            mode: options.mode,
+            operation: options.operation,
+            originalRowData: options.originalRowData,
+            rowData: options.rowData
+        };
+        const schema = this.editableOptions().schema?.(context) ?? null;
+        const editForm = schema == null
+            ? form(model, { injector: this.#injector })
+            : form(model, schema, { injector: this.#injector });
+        return {
+            column: options.column,
+            field: options.field,
+            form: editForm,
+            isNew: options.isNew,
+            mode: options.mode,
+            model,
+            operation: options.operation,
+            originalRowData: options.originalRowData,
+            row: options.row,
+            rowUid: options.rowUid
+        };
+    }
     deserializeCompositeFilter(filter) {
         const filters = filter.filters
             .map(child => "filters" in child ? this.deserializeCompositeFilter(child) : this.deserializeFilterDescriptor(child))
@@ -1700,6 +1886,9 @@ class GridService {
         const rightLockedColumns = columns.filter(column => this.getColumnLockBucket(column) === "right");
         return [...leftLockedColumns, ...unlockedColumns, ...rightLockedColumns];
     }
+    patchSessionField(session, field, value) {
+        session.model.update(rowData => ({ ...rowData, [field]: value }));
+    }
     reconcileColumn(config, previous) {
         const hidden = previous != null && previous.configuredHidden === config.hidden ? previous.hidden : config.hidden;
         return {
@@ -1715,6 +1904,17 @@ class GridService {
             sortIndex: previous?.sortIndex ?? null
         };
     }
+    resolveEditedRowData(rowUid, fallbackRowData) {
+        const editedRowData = this.editViewDict().get(rowUid);
+        if (editedRowData == null) {
+            return fallbackRowData;
+        }
+        const { $rowId: _rowId, ...rowData } = editedRowData;
+        return rowData;
+    }
+    resolveSessionRowData(session) {
+        return { ...session.form().value() };
+    }
     // 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) {
@@ -1739,66 +1939,6 @@ class GridService {
         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);
-    }
-    createEditSession(options) {
-        const model = signal({ ...options.rowData }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
-        const context = {
-            column: options.column,
-            field: options.field,
-            isNew: options.isNew,
-            mode: options.mode,
-            operation: options.operation,
-            originalRowData: options.originalRowData,
-            rowData: options.rowData
-        };
-        const schema = this.editableOptions().schema?.(context) ?? null;
-        const editForm = schema == null
-            ? form(model, { injector: this.#injector })
-            : form(model, schema, { injector: this.#injector });
-        return {
-            column: options.column,
-            field: options.field,
-            form: editForm,
-            isNew: options.isNew,
-            mode: options.mode,
-            model,
-            operation: options.operation,
-            originalRowData: options.originalRowData,
-            row: options.row,
-            rowUid: options.rowUid
-        };
-    }
-    patchSessionField(session, field, value) {
-        session.model.update(rowData => ({ ...rowData, [field]: value }));
-    }
-    resolveEditedRowData(rowUid, fallbackRowData) {
-        const editedRowData = this.editViewDict().get(rowUid);
-        if (editedRowData == null) {
-            return fallbackRowData;
-        }
-        const { $rowId, ...rowData } = editedRowData;
-        return rowData;
-    }
-    resolveSessionRowData(session) {
-        return { ...session.form().value() };
-    }
-    validateSessionForSave(session) {
-        const rootField = session.form();
-        const editedField = session.mode === "cell" && session.field != null ? session.form[session.field] : null;
-        if (editedField == null) {
-            rootField.markAsTouched();
-            return !rootField.invalid() && !rootField.pending();
-        }
-        // A cell edit can only fix its own field. Row-level errors still block the save, but an invalid
-        // sibling field must not trap the user in a cell whose own value is valid.
-        const field = editedField();
-        field.markAsTouched();
-        return !field.invalid() && !field.pending() && rootField.errors().length === 0;
-    }
     serializeFilter(filter) {
         if (filter == null) {
             return null;
@@ -1901,23 +2041,27 @@ class GridService {
             onCleanup(() => resizeObserver.disconnect());
         });
     }
-    toComparableValue(value) {
-        if (value instanceof Date) {
-            return value.getTime();
-        }
-        switch (typeof value) {
-            case "bigint":
-            case "boolean":
-            case "number":
-            case "string":
-                return value;
-            default:
-                return null;
-        }
-    }
     updateColumns(updater) {
         this.columns.update(columns => ImmutableList.create(this.applyColumnIndexes(columns.select(updater).toArray())));
     }
+    validateServerInteger(value, name) {
+        if (!Number.isSafeInteger(value) || value < 0) {
+            throw new Error(`monaGridServerBinding: ${name} must be a finite non-negative integer.`);
+        }
+    }
+    validateSessionForSave(session) {
+        const rootField = session.form();
+        const editedField = session.mode === "cell" && session.field != null ? session.form[session.field] : null;
+        if (editedField == null) {
+            rootField.markAsTouched();
+            return !rootField.invalid() && !rootField.pending();
+        }
+        // A cell edit can only fix its own field. Row-level errors still block the save, but an invalid
+        // sibling field must not trap the user in a cell whose own value is valid.
+        const field = editedField();
+        field.markAsTouched();
+        return !field.invalid() && !field.pending() && rootField.errors().length === 0;
+    }
     withColumnIndices(columns) {
         return columns.map((column, index) => ({ ...column, index }));
     }
@@ -2617,33 +2761,30 @@ class GridSortableDirective {
         });
     }
     applyColumnSort(column, sortDirection) {
-        let appliedSorts = this.#gridService.appliedSorts();
-        if (this.#gridService.sortableOptions().mode === "single") {
-            this.#gridService
-                .columns()
-                .where(c => c.field !== column.field)
-                .forEach(c => {
-                appliedSorts = appliedSorts.remove(c.field);
-            });
-        }
+        const sorts = this.#gridService.sortableOptions().mode === "single" ? [] : this.#gridService.getSortDescriptors();
+        const index = sorts.findIndex(sort => sort.field === column.field);
         if (sortDirection != null) {
             const sortDescriptor = {
                 field: column.field,
                 dir: sortDirection
             };
-            appliedSorts = appliedSorts.put(column.field, { sort: sortDescriptor });
+            if (index < 0) {
+                sorts.push(sortDescriptor);
+            }
+            else {
+                sorts[index] = sortDescriptor;
+            }
         }
-        else {
-            appliedSorts = appliedSorts.remove(column.field);
+        else if (index >= 0) {
+            sorts.splice(index, 1);
         }
-        this.#gridService.appliedSorts.set(appliedSorts);
-        this.#gridService.loadSorts(appliedSorts
-            .values()
-            .select(s => s.sort)
-            .toArray());
+        this.#gridService.loadSorts(sorts);
     }
     #setSubscriptions() {
         this.#gridService.columnSort$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            if (!this.#gridService.sortableOptions().enabled || !event.column.sortable) {
+                return;
+            }
             this.columnSort.emit(event);
             if (event.isDefaultPrevented()) {
                 return;
@@ -2663,12 +2804,9 @@ class GridSortableDirective {
                 nextSortDirection = "asc";
             }
             this.applyColumnSort(column, nextSortDirection);
-            const sortDescriptors = this.#gridService
-                .appliedSorts()
-                .values()
-                .select(s => s.sort)
-                .toArray();
+            const sortDescriptors = this.#gridService.getSortDescriptors();
             this.sort.set(sortDescriptors);
+            this.#gridService.requestDataStateChange({ resetPage: true });
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridSortableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -2681,6 +2819,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { columnSort: [{ type: i0.Output, args: ["columnSort"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaGridSortable", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }] } });
 
+class GridServerBindingDirective {
+    #destroyRef;
+    #gridService;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#gridService = inject(GridService);
+        /** @description Emitted once per user paging, sorting, or filtering action with the requested server state. */
+        this.dataStateChange = output();
+        /** @description Shows a loading overlay while the application requests server data. */
+        this.loading = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /** @description Zero-based offset of the supplied server page. External changes do not request data. */
+        this.skip = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "skip" }] : /* istanbul ignore next */ []));
+        /** @description Total matching server records before paging. Must be a non-negative integer. */
+        this.total = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        this.#gridService.setServerBindingEnabled(true);
+        effect(() => {
+            const total = this.total();
+            untracked(() => this.#gridService.setServerTotal(total));
+        });
+        effect(() => {
+            const skip = this.skip();
+            untracked(() => this.#gridService.setServerSkip(skip));
+        });
+        effect(() => {
+            const loading = this.loading();
+            untracked(() => this.#gridService.setServerLoading(loading));
+        });
+        this.#gridService.dataStateChange$
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(state => this.dataStateChange.emit(state));
+        this.#destroyRef.onDestroy(() => this.#gridService.setServerBindingEnabled(false));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridServerBindingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridServerBindingDirective, isStandalone: true, selector: "mona-grid[monaGridServerBinding]", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dataStateChange: "dataStateChange" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridServerBindingDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "mona-grid[monaGridServerBinding]" }]
+        }], ctorParameters: () => [], propDecorators: { dataStateChange: [{ type: i0.Output, args: ["dataStateChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skip: [{ type: i0.Input, args: [{ isSignal: true, alias: "skip", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }] } });
+
 class GridStatePersistenceDirective {
     #gridService;
     #initialized;
@@ -2704,7 +2885,10 @@ class GridStatePersistenceDirective {
         afterNextRender({
             read: () => {
                 if (this.#isEnabled()) {
-                    this.loadState(this.state());
+                    const result = this.loadState(this.state());
+                    if (result.status === "applied") {
+                        this.#gridService.requestDataStateChange({ resetPage: true });
+                    }
                 }
                 this.#initialized.set(true);
             }
@@ -2715,7 +2899,11 @@ class GridStatePersistenceDirective {
             if (!this.#initialized() || this.#emittingState || !this.#isEnabled()) {
                 return;
             }
-            untracked(() => this.loadState(state, options));
+            untracked(() => {
+                if (!deepEquals(state, this.#gridService.captureState(options))) {
+                    this.loadState(state, options);
+                }
+            });
         });
         effect(() => {
             if (!this.#initialized() || this.#loadingState || !this.#isEnabled()) {
@@ -2861,7 +3049,7 @@ class GridVirtualScrollDirective {
     constructor() {
         this.#defaultOptions = {
             enabled: true,
-            height: 32
+            height: GRID_DEFAULT_VIRTUAL_ROW_HEIGHT
         };
         this.#destroyRef = inject(DestroyRef);
         this.#gridService = inject(GridService);
@@ -2942,6 +3130,7 @@ class GridCommandColumnComponent {
                 maxWidth: this.maxWidth(),
                 minWidth: this.minWidth(),
                 removeConfirmation: this.removeConfirmation(),
+                sortable: false,
                 sortIndex: null,
                 stateKey,
                 title: this.title(),
@@ -3017,7 +3206,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class GridColumnComponent {
     constructor() {
-        this.#columnId = v4();
         this.#column = computed(() => ({
             aggregate: this.aggregate(),
             calculatedWidth: null,
@@ -3045,6 +3233,7 @@ class GridColumnComponent {
             maxWidth: this.maxWidth(),
             minWidth: this.minWidth(),
             removeConfirmation: false,
+            sortable: this.sortable(),
             sortIndex: null,
             stateKey: this.stateKey(),
             title: this.title(),
@@ -3052,6 +3241,7 @@ class GridColumnComponent {
             width: this.width() ?? null
         }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#column" }] : /* istanbul ignore next */ []));
+        this.#columnId = v4();
         this.cellTemplate = contentChild(GridCellTemplateDirective, { ...(ngDevMode ? { debugName: "cellTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.editTemplate = contentChild(GridEditTemplateDirective, { ...(ngDevMode ? { debugName: "editTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.footerTemplate = contentChild(GridFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -3108,6 +3298,11 @@ class GridColumnComponent {
          */
         this.minWidth = input(40, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether this column can be sorted through its header when grid sorting is enabled. Has no effect if sorting is disabled on the grid.
+         */
+        this.sortable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortable" }] : /* istanbul ignore next */ []));
         /**
          * @description A stable key used to persist state for columns whose field is empty or unstable.
          */
@@ -3129,13 +3324,13 @@ class GridColumnComponent {
         this.width = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
     }
-    #columnId;
     #column;
+    #columnId;
     getColumn() {
         return this.#column();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: GridColumnComponent, isStandalone: true, selector: "mona-grid-column", inputs: { aggregate: { classPropertyName: "aggregate", publicName: "aggregate", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, lockedPosition: { classPropertyName: "lockedPosition", publicName: "lockedPosition", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: GRID_COLUMN_DEFINITION, useExisting: forwardRef(() => GridColumnComponent) }], queries: [{ propertyName: "cellTemplate", first: true, predicate: GridCellTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "editTemplate", first: true, predicate: GridEditTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: GridFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupFooterTemplate", first: true, predicate: GridGroupFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: GridHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: GridColumnTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: GridColumnComponent, isStandalone: true, selector: "mona-grid-column", inputs: { aggregate: { classPropertyName: "aggregate", publicName: "aggregate", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, lockedPosition: { classPropertyName: "lockedPosition", publicName: "lockedPosition", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: GRID_COLUMN_DEFINITION, useExisting: forwardRef(() => GridColumnComponent) }], queries: [{ propertyName: "cellTemplate", first: true, predicate: GridCellTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "editTemplate", first: true, predicate: GridEditTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: GridFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupFooterTemplate", first: true, predicate: GridGroupFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: GridHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: GridColumnTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridColumnComponent, decorators: [{
             type: Component,
@@ -3145,7 +3340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: GRID_COLUMN_DEFINITION, useExisting: forwardRef(() => GridColumnComponent) }]
                 }]
-        }], propDecorators: { cellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridCellTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], editTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridEditTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupFooterTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridGroupFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridColumnTitleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], aggregate: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregate", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], lockedPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedPosition", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+        }], propDecorators: { cellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridCellTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], editTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridEditTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupFooterTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridGroupFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridColumnTitleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], aggregate: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregate", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], lockedPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedPosition", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 
 class GridColumnResizeHandlerDirective {
     #destroyRef;
@@ -3451,8 +3646,12 @@ class GridNavigationService {
             this.#setFocusedCell(key, data);
         }
     }
-    unregisterCell(cellKey) {
+    unregisterCell(cellKey, element) {
         const data = this.#cellElementDict().get(cellKey);
+        // A cached view may be destroyed after another view has taken over this logical identity.
+        if (!data || (element != null && data.element !== element)) {
+            return;
+        }
         this.#cellElementDict.update(dict => dict.remove(cellKey));
         if (this.#lastFocusedCellKey() !== cellKey) {
             return;
@@ -3699,7 +3898,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }] });
 
-const gridRowHeightClass = "h-9";
+const gridRowMinHeightClass = "min-h-9";
+const gridVirtualRowHeightClass = "h-(--mona-grid-row-height) min-h-(--mona-grid-row-height) max-h-(--mona-grid-row-height)";
 const gridBaseThemeVariants = cva(`
         relative flex flex-col
         h-full overflow-hidden
@@ -3715,24 +3915,34 @@ const gridBaseThemeVariants = cva(`
         }
     }
 });
-const gridCellBaseThemeVariants = cva(`
-        absolute inset-0
-        flex w-full
-    `);
+const gridCellBaseThemeVariants = cva("flex w-full min-w-0", {
+    variants: {
+        virtual: {
+            true: "absolute inset-0 overflow-hidden",
+            false: `relative ${gridRowMinHeightClass}`
+        }
+    },
+    defaultVariants: { virtual: false }
+});
 const gridCellContainerThemeVariants = cva(`
-        flex h-full w-full items-center
+        flex w-full min-w-0 items-center
         flex-1 outline-none
-        overflow-hidden
     `, {
     variants: {
+        virtual: {
+            true: "h-full overflow-hidden",
+            false: gridRowMinHeightClass
+        },
         editing: {
             true: "px-0",
             false: "px-2"
         }
     },
     defaultVariants: {
-        editing: false
-    }
+        editing: false,
+        virtual: false
+    },
+    compoundVariants: [{ virtual: false, editing: false, class: "py-1" }]
 });
 const gridCellDirtyIndicatorThemeVariants = cva(`
     absolute top-0 end-0 w-0 h-0
@@ -3741,23 +3951,30 @@ const gridCellDirtyIndicatorThemeVariants = cva(`
     pointer-events-none
 `);
 const gridCellEditorBaseThemeVariants = cva(`
-    flex h-full w-full items-center
+    flex w-full min-w-0 items-center
     bg-input-background border border-focus-indicator/40
-`);
+`, {
+    variants: { virtual: { true: "h-full overflow-hidden", false: gridRowMinHeightClass } },
+    defaultVariants: { virtual: false }
+});
 const gridCellEditorInputThemeVariants = cva(`
-    h-full w-full border-transparent
+    w-full border-transparent
     data-[expanded='true']:border-focus-indicator
     data-[expanded='true']:focus-within:border-focus-indicator/40
-`);
+`, {
+    variants: { virtual: { true: "h-full", false: "min-h-8" } },
+    defaultVariants: { virtual: false }
+});
 const gridCellTextThemeVariants = cva(`
     truncate cursor-default select-none
 `);
 const gridSelectAllCellThemeVariants = cva(`
     absolute inset-0 flex h-full w-full items-center justify-center
 `);
-const gridSelectionCellThemeVariants = cva(`
-    absolute inset-0 flex h-full w-full items-center justify-center
-`);
+const gridSelectionCellThemeVariants = cva("flex w-full items-center justify-center", {
+    variants: { virtual: { true: "absolute inset-0 h-full", false: gridRowMinHeightClass } },
+    defaultVariants: { virtual: false }
+});
 const gridColumnActionsThemeVariants = cva(`
     flex items-center justify-center
     text-xs [&_i]:text-xs
@@ -3794,7 +4011,7 @@ const gridDetailIndentCellThemeVariants = cva(`
 });
 const gridDetailRowThemeVariants = cva(``);
 const gridRowReorderHandleThemeVariants = cva(`
-    flex h-full w-full items-center justify-center
+    flex min-h-9 w-full items-center justify-center
     cursor-grab select-none touch-none
     text-muted-foreground
     hover:text-foreground
@@ -3827,7 +4044,10 @@ const gridFooterThemeVariants = cva(`
 const gridFooterTableThemeVariants = cva(`
         border-separate border-spacing-0 table-fixed
     `);
-const gridFooterTableRowThemeVariants = cva(`relative inline-flex [&>td:last-child]:border-e-0`);
+const gridFooterTableRowThemeVariants = cva(`relative inline-flex [&>td:last-child]:border-e-0`, {
+    variants: { virtual: { true: `${gridVirtualRowHeightClass} overflow-hidden`, false: "" } },
+    defaultVariants: { virtual: false }
+});
 const gridFooterTableCellThemeVariants = cva(`
         relative overflow-hidden
         text-start align-middle px-2 py-2
@@ -3847,7 +4067,7 @@ const gridGroupRowThemeVariants = cva(`
         relative z-10
         w-full
         bg-surface-muted border-e border-e-border-subtle
-    `);
+    `, { variants: { virtual: { true: gridVirtualRowHeightClass, false: "" } }, defaultVariants: { virtual: false } });
 const gridHeaderThemeVariants = cva(`
         flex flex-row grow-0 shrink-0 basis-auto
         overflow-hidden
@@ -3882,7 +4102,7 @@ const gridListBaseThemeVariants = cva(`
     variants: {
         virtual: {
             true: "overflow-x-hidden overflow-y-hidden flex flex-col min-h-0",
-            false: "overflow-x-auto overflow-y-scroll"
+            false: "block overflow-x-auto overflow-y-scroll"
         }
     }
 });
@@ -3895,24 +4115,25 @@ const gridListTableRowThemeVariants = cva(``, {
     variants: {
         selected: {
             true: `
-                    ${gridRowHeightClass}
                     bg-(--color-selected) text-(--color-selected-foreground) hover:bg-(--color-selected-active)
                 `,
-            false: `${gridRowHeightClass} bg-surface hover:bg-hover`
-        }
-    }
+            false: "bg-surface hover:bg-hover"
+        },
+        virtual: { true: gridVirtualRowHeightClass, false: "" }
+    },
+    defaultVariants: { virtual: false }
 });
 const gridListTableCellThemeVariants = cva(`
         relative
-        ${gridRowHeightClass}
         outline-none z-1
-        align-top
+        align-middle
         border-b border-b-border-subtle
         after:content-[''] after:block
         after:absolute after:inset-0 after:pointer-events-none
         focus:after:ring-1 focus:after:ring-inset focus:after:ring-focus-indicator/35
     `, {
     variants: {
+        virtual: { true: gridVirtualRowHeightClass, false: "" },
         groupHeader: {
             true: "",
             false: ""
@@ -3946,6 +4167,7 @@ const gridListTableCellThemeVariants = cva(`
             false: ""
         }
     },
+    defaultVariants: { virtual: false },
     compoundVariants: [
         {
             grouped: false,
@@ -4056,6 +4278,7 @@ class GridLogicalCellDirective {
                 return "";
             }
             return gridListTableCellThemeVariants({
+                virtual: this.#gridService.virtualScrollOptions().enabled,
                 groupHeader: this.groupHeader(),
                 lastInRow: this.lastInRow() || this.groupHeader()
             });
@@ -4117,18 +4340,24 @@ class GridLogicalCellDirective {
         ...(ngDevMode ? [undefined, { debugName: "rowUid" }] : /* istanbul ignore next */ []));
         this.section = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
-        this.toggle = output();
+        this.toggleExpand = output();
         afterRenderEffect({
             read: () => {
-                const previousCellKey = this.#cellKey();
-                const nextCellKey = this.#gridNavigationService.registerCell(this.#cellData());
-                if (previousCellKey && previousCellKey !== nextCellKey) {
-                    this.#gridNavigationService.unregisterCell(previousCellKey);
-                }
-                this.#cellKey.set(nextCellKey);
-                this.#syncInnerFocusableTabIndexes();
+                const data = this.#cellData();
+                // Cached virtual views must not re-register in response to another view's registry writes.
+                untracked(() => {
+                    const previousCellKey = this.#cellKey();
+                    const nextCellKey = this.#gridNavigationService.registerCell(data);
+                    if (previousCellKey && previousCellKey !== nextCellKey) {
+                        this.#gridNavigationService.unregisterCell(previousCellKey, data.element);
+                    }
+                    this.#cellKey.set(nextCellKey);
+                });
             }
         });
+        afterEveryRender({
+            mixedReadWrite: () => this.#syncInnerFocusableTabIndexes()
+        });
         afterNextRender({
             read: () => {
                 this.#setCellCopySubscription();
@@ -4140,7 +4369,7 @@ class GridLogicalCellDirective {
             if (!cellKey) {
                 return;
             }
-            this.#gridNavigationService.unregisterCell(cellKey);
+            this.#gridNavigationService.unregisterCell(cellKey, this.#hostElementRef.nativeElement);
         });
     }
     focusNextPageTabTarget(backwards) {
@@ -4184,6 +4413,7 @@ class GridLogicalCellDirective {
         const host = this.#hostElementRef.nativeElement;
         const targets = Array.from(host.ownerDocument.querySelectorAll(FOCUSABLE_TARGET_SELECTOR$1));
         return targets.filter(target => target !== host &&
+            !target.matches("mona-grid tbody[role='rowgroup']") &&
             target.getAttribute("tabindex") !== "-1" &&
             !this.#isElementDisabled(target) &&
             !this.#isElementHidden(target));
@@ -4230,8 +4460,8 @@ class GridLogicalCellDirective {
         return this.#gridNavigationService.navigate(cellKey, navigationKey);
     }
     #onEnterKey() {
-        if (this.groupHeader() || this.resolvedSection() === "header") {
-            this.toggle.emit();
+        if (this.groupHeader() || this.resolvedSection() === "header" || this.resolvedCellKind() === "detail") {
+            this.toggleExpand.emit();
             return;
         }
         if (this.resolvedCellKind() === "command") {
@@ -4280,7 +4510,7 @@ class GridLogicalCellDirective {
         }
         if (event.key === "ArrowDown") {
             if (event.altKey) {
-                this.toggle.emit();
+                this.toggleExpand.emit();
                 event.preventDefault();
                 return;
             }
@@ -4343,11 +4573,13 @@ class GridLogicalCellDirective {
     }
     #syncInnerFocusableTabIndexes() {
         for (const target of this.#getInnerFocusableTargets()) {
-            target.setAttribute("tabindex", "-1");
+            if (target.getAttribute("tabindex") !== "-1") {
+                target.setAttribute("tabindex", "-1");
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLogicalCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridLogicalCellDirective, isStandalone: true, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: { cellKind: { classPropertyName: "cellKind", publicName: "cellKind", isSignal: true, isRequired: false, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, columnId: { classPropertyName: "columnId", publicName: "columnId", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, firstInRow: { classPropertyName: "firstInRow", publicName: "firstInRow", isSignal: true, isRequired: true, transformFunction: null }, groupHeader: { classPropertyName: "groupHeader", publicName: "groupHeader", isSignal: true, isRequired: false, transformFunction: null }, groupKey: { classPropertyName: "groupKey", publicName: "groupKey", isSignal: true, isRequired: false, transformFunction: null }, lastInRow: { classPropertyName: "lastInRow", publicName: "lastInRow", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, rowUid: { classPropertyName: "rowUid", publicName: "rowUid", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", toggle: "toggle" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "focused() ? 0 : -1", "attr.aria-colindex": "ariaColIndex()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridLogicalCellDirective, isStandalone: true, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: { cellKind: { classPropertyName: "cellKind", publicName: "cellKind", isSignal: true, isRequired: false, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, columnId: { classPropertyName: "columnId", publicName: "columnId", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, firstInRow: { classPropertyName: "firstInRow", publicName: "firstInRow", isSignal: true, isRequired: true, transformFunction: null }, groupHeader: { classPropertyName: "groupHeader", publicName: "groupHeader", isSignal: true, isRequired: false, transformFunction: null }, groupKey: { classPropertyName: "groupKey", publicName: "groupKey", isSignal: true, isRequired: false, transformFunction: null }, lastInRow: { classPropertyName: "lastInRow", publicName: "lastInRow", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, rowUid: { classPropertyName: "rowUid", publicName: "rowUid", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", toggleExpand: "toggleExpand" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "focused() ? 0 : -1", "attr.aria-colindex": "ariaColIndex()", "attr.aria-readonly": "resolvedCellKind() === 'data' ? !editable() : null" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLogicalCellDirective, decorators: [{
             type: Directive,
@@ -4356,10 +4588,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     host: {
                         "[class]": "baseClass()",
                         "[attr.tabindex]": "focused() ? 0 : -1",
-                        "[attr.aria-colindex]": "ariaColIndex()"
+                        "[attr.aria-colindex]": "ariaColIndex()",
+                        "[attr.aria-readonly]": "resolvedCellKind() === 'data' ? !editable() : null"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { cellKind: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellKind", required: false }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], columnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnId", required: false }] }], edit: [{ type: i0.Output, args: ["edit"] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], firstInRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstInRow", required: true }] }], groupHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupHeader", required: false }] }], groupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKey", required: false }] }], lastInRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastInRow", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], rowUid: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowUid", required: false }] }], section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }] } });
+        }], ctorParameters: () => [], propDecorators: { cellKind: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellKind", required: false }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], columnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnId", required: false }] }], edit: [{ type: i0.Output, args: ["edit"] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], firstInRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstInRow", required: true }] }], groupHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupHeader", required: false }] }], groupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKey", required: false }] }], lastInRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastInRow", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], rowUid: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowUid", required: false }] }], section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: false }] }], toggleExpand: [{ type: i0.Output, args: ["toggleExpand"] }] } });
 
 class ColumnReorderEvent extends PreventableEvent {
     #column;
@@ -4418,6 +4651,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * suitable for rendering by both paginated and virtual-scrolled grid list components.
  */
 class GridRowFlattenerService {
+    /**
+     * Builds a deterministic, hierarchical group key.
+     *
+     * @example
+     * buildGroupKey(null, "Country", "USA") // => "Country:USA"
+     * buildGroupKey("Country:USA", "City", "NYC") // => "Country:USA/City:NYC"
+     */
+    buildGroupKey(parentKey, field, value) {
+        const segment = `${field}:${String(value ?? "")}`;
+        return parentKey != null ? `${parentKey}/${segment}` : segment;
+    }
     /**
      * Groups rows by the given columns and flattens them into a linear `GridViewRow[]`.
      *
@@ -4425,29 +4669,19 @@ class GridRowFlattenerService {
      * @param groupColumns - The ordered list of columns to group by.
      * @param collapsedKeys - The set of group keys that are currently collapsed.
      * @param groupAggregates - The dictionary of group aggregates.
+     * @param orderGroups - Orders buckets by direction. Disable for client rows already ordered by Query.
      * @returns A flat array of `GridViewRow` items.
      */
-    flatten(rows, groupColumns, collapsedKeys, showFooter, groupAggregates = new Dictionary()) {
+    flatten(rows, groupColumns, collapsedKeys, showFooter, groupAggregates = new Dictionary(), orderGroups = true) {
         const columnArray = [...groupColumns];
         if (columnArray.length === 0) {
             return [];
         }
         const result = [];
-        this.#flattenRecursive([...rows], columnArray, groupAggregates, 0, null, collapsedKeys, showFooter, result);
+        this.#flattenRecursive([...rows], columnArray, groupAggregates, 0, null, collapsedKeys, showFooter, orderGroups, result);
         return result;
     }
-    /**
-     * Builds a deterministic, hierarchical group key.
-     *
-     * @example
-     * buildGroupKey(null, "Country", "USA") // => "Country:USA"
-     * buildGroupKey("Country:USA", "City", "NYC") // => "Country:USA/City:NYC"
-     */
-    buildGroupKey(parentKey, field, value) {
-        const segment = `${field}:${String(value ?? "")}`;
-        return parentKey != null ? `${parentKey}/${segment}` : segment;
-    }
-    #flattenRecursive(rows, groupColumns, groupAggregates, depth, parentKey, collapsedKeys, showFooter, result) {
+    #flattenRecursive(rows, groupColumns, groupAggregates, depth, parentKey, collapsedKeys, showFooter, orderGroups, result) {
         const column = groupColumns[depth];
         if (column == null) {
             return;
@@ -4465,7 +4699,15 @@ class GridRowFlattenerService {
             }
             groupMap.get(mapKey).push(row);
         }
-        for (const mapKey of keyOrder) {
+        const entries = keyOrder.map((mapKey, index) => ({ mapKey, index, rows: groupMap.get(mapKey) }));
+        const direction = column.groupSortDirection;
+        if (orderGroups && direction != null) {
+            entries.sort((left, right) => {
+                const comparison = compareGridComparableValues(toGridComparableValue(left.rows[0].data[field]), toGridComparableValue(right.rows[0].data[field]));
+                return (direction === "asc" ? comparison : -comparison) || left.index - right.index;
+            });
+        }
+        for (const { mapKey } of entries) {
             const groupRows = groupMap.get(mapKey);
             const groupValue = groupRows[0].data[field];
             const groupKey = this.buildGroupKey(parentKey, field, groupValue);
@@ -4482,7 +4724,7 @@ class GridRowFlattenerService {
             const isCollapsed = collapsedKeys.has(groupKey);
             if (!isCollapsed) {
                 if (depth < groupColumns.length - 1) {
-                    this.#flattenRecursive(groupRows, groupColumns, groupAggregates, depth + 1, groupKey, collapsedKeys, showFooter, result);
+                    this.#flattenRecursive(groupRows, groupColumns, groupAggregates, depth + 1, groupKey, collapsedKeys, showFooter, orderGroups, result);
                 }
                 else {
                     for (const row of groupRows) {
@@ -4688,7 +4930,13 @@ class GridFilterRowCellComponent {
             return gridFilterRowCellThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
-        this.messages = this.#gridService.messages;
+        this.booleanFilterMenuItems = this.#filterService.booleanFilterMenuItems;
+        this.booleanValue = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "booleanValue" }] : /* istanbul ignore next */ []));
+        this.dateFilterMenuItems = this.#filterService.dateFilterMenuItems;
+        this.dateValue = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dateValue" }] : /* istanbul ignore next */ []));
+        this.filterMessages = inject(MonaI18nService).componentMessages("filter", FILTER_DEFAULT_MESSAGES);
         this.isFilterActive = computed(() => {
             const op = this.selectedOperator();
             if (op === "isnull" || op === "isnotnull") {
@@ -4712,12 +4960,7 @@ class GridFilterRowCellComponent {
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isFilterActive" }] : /* istanbul ignore next */ []));
-        this.booleanFilterMenuItems = this.#filterService.booleanFilterMenuItems;
-        this.booleanValue = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "booleanValue" }] : /* istanbul ignore next */ []));
-        this.dateFilterMenuItems = this.#filterService.dateFilterMenuItems;
-        this.dateValue = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dateValue" }] : /* istanbul ignore next */ []));
+        this.messages = this.#gridService.messages;
         this.numberValue = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "numberValue" }] : /* istanbul ignore next */ []));
         this.numericFilterMenuItems = this.#filterService.numericFilterMenuItems;
@@ -4802,7 +5045,7 @@ class GridFilterRowCellComponent {
         const operator = this.selectedOperator();
         const field = this.column().field;
         let filter;
-        let filterOperator = operator;
+        const filterOperator = operator;
         switch (this.column().dataType) {
             case "string":
                 filter = this.#filterService.buildStringFilterDescriptor({
@@ -4878,11 +5121,12 @@ class GridFilterRowCellComponent {
                 this.selectedOperator.set(v.operator1);
                 this.dateValue.set(v.value1 ?? null);
                 break;
-            case "boolean":
+            case "boolean": {
                 this.selectedOperator.set(v.operator1);
                 const item = this.booleanFilterMenuItems.find(i => i.value === v.operator1) ?? null;
                 this.booleanValue.set(item);
                 break;
+            }
         }
     }
     #setValueChangeSubscriptions() {
@@ -4904,7 +5148,7 @@ class GridFilterRowCellComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFilterRowCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridFilterRowCellComponent, isStandalone: true, selector: "mona-grid-filter-row-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { apply: "apply" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, 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]=\"messages().filterPlaceholder\" />\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]=\"messages().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", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "invalid", "maxValue", "minValue", "nullable", "readonly", "required", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "mona-date-picker", inputs: ["disabled", "disabledDates", "firstDay", "format", "invalid", "max", "min", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "readonlyInput", "required", "rounded", "showClearButton", "size", "touched", "class", "value", "weekNumber"], outputs: ["close", "closed", "open", "opened", "touch", "valueChange"] }, { kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "invalid", "itemDisabled", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "value", "valueField", "valuePrimitive"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { 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: 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: PopupMenuCheckboxItemComponent, selector: "mona-popup-menu-checkbox-item", inputs: ["checked", "disabled", "label"], outputs: ["checkedChange", "menuClick"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideFunnelX, selector: "svg[lucideFunnelX], svg[lucideFilterX]" }, { kind: "component", type: LucideFunnel, selector: "svg[lucideFunnel], svg[lucideFilter]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridFilterRowCellComponent, isStandalone: true, selector: "mona-grid-filter-row-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { apply: "apply" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, 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                [inputAttributes]=\"{ 'aria-label': messages().filterByColumn(column().title) }\"\n                [ngModel]=\"stringValue()\"\n                (ngModelChange)=\"onStringChange($event)\"\n                [placeholder]=\"messages().filterPlaceholder\" />\n            <button\n                monaButton\n                look=\"ghost\"\n                [iconOnly]=\"true\"\n                [size]=\"'small'\"\n                #filterButton\n                [attr.aria-label]=\"messages().filterByColumn(column().title)\">\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                [aria-label]=\"messages().filterByColumn(column().title)\"\n                [ngModel]=\"numberValue()\"\n                (ngModelChange)=\"onNumberChange($event)\"\n                [style.width.%]=\"100\" />\n\n            <button\n                monaButton\n                look=\"ghost\"\n                [iconOnly]=\"true\"\n                [size]=\"'small'\"\n                #filterButton\n                [attr.aria-label]=\"messages().filterByColumn(column().title)\">\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\n                monaButton\n                look=\"ghost\"\n                [iconOnly]=\"true\"\n                [size]=\"'small'\"\n                #filterButton\n                [attr.aria-label]=\"messages().filterByColumn(column().title)\">\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]=\"messages().all\"\n                [aria-label]=\"messages().filterByColumn(column().title)\"\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\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"'small'\"\n            (click)=\"onClear()\"\n            [attr.aria-label]=\"filterMessages().clear\">\n            <svg lucideFunnelX [size]=\"14\" class=\"text-error\"></svg>\n        </button>\n    }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "invalid", "maxValue", "minValue", "nullable", "readonly", "required", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "mona-date-picker", inputs: ["disabled", "disabledDates", "firstDay", "format", "invalid", "max", "min", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "readonlyInput", "required", "rounded", "showClearButton", "size", "touched", "class", "value", "weekNumber"], outputs: ["close", "closed", "open", "opened", "touch", "valueChange"] }, { kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "invalid", "itemDisabled", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "value", "valueField", "valuePrimitive"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { 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: 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: PopupMenuCheckboxItemComponent, selector: "mona-popup-menu-checkbox-item", inputs: ["checked", "disabled", "label"], outputs: ["checkedChange", "menuClick"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideFunnelX, selector: "svg[lucideFunnelX], svg[lucideFilterX]" }, { kind: "component", type: LucideFunnel, selector: "svg[lucideFunnel], svg[lucideFilter]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFilterRowCellComponent, decorators: [{
             type: Component,
@@ -4922,7 +5166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         LucideFunnel
                     ], host: {
                         "[class]": "baseClass()"
-                    }, 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]=\"messages().filterPlaceholder\" />\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]=\"messages().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" }]
+                    }, 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                [inputAttributes]=\"{ 'aria-label': messages().filterByColumn(column().title) }\"\n                [ngModel]=\"stringValue()\"\n                (ngModelChange)=\"onStringChange($event)\"\n                [placeholder]=\"messages().filterPlaceholder\" />\n            <button\n                monaButton\n                look=\"ghost\"\n                [iconOnly]=\"true\"\n                [size]=\"'small'\"\n                #filterButton\n                [attr.aria-label]=\"messages().filterByColumn(column().title)\">\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                [aria-label]=\"messages().filterByColumn(column().title)\"\n                [ngModel]=\"numberValue()\"\n                (ngModelChange)=\"onNumberChange($event)\"\n                [style.width.%]=\"100\" />\n\n            <button\n                monaButton\n                look=\"ghost\"\n                [iconOnly]=\"true\"\n                [size]=\"'small'\"\n                #filterButton\n                [attr.aria-label]=\"messages().filterByColumn(column().title)\">\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\n                monaButton\n                look=\"ghost\"\n                [iconOnly]=\"true\"\n                [size]=\"'small'\"\n                #filterButton\n                [attr.aria-label]=\"messages().filterByColumn(column().title)\">\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]=\"messages().all\"\n                [aria-label]=\"messages().filterByColumn(column().title)\"\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\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"'small'\"\n            (click)=\"onClear()\"\n            [attr.aria-label]=\"filterMessages().clear\">\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 {
@@ -5044,19 +5288,18 @@ class GridComponent {
         this.gridHeaderTableElement = viewChild.required("headerTable", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "gridHeaderTableElement" }] : /* istanbul ignore next */ []));
         this.gridService = inject(GridService);
-        this.messages = this.gridService.messages;
         this.gridWidthSet = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "gridWidthSet" }] : /* istanbul ignore next */ []));
         this.groupColumnList = viewChild("groupColumnList", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupColumnList" }] : /* istanbul ignore next */ []));
-        this.groupPanelPlaceholderClass = computed(() => {
-            return gridGroupPanelPlaceholderThemeVariants();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "groupPanelPlaceholderClass" }] : /* istanbul ignore next */ []));
         this.groupPanelClass = computed(() => {
             return gridGroupPanelThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupPanelClass" }] : /* istanbul ignore next */ []));
+        this.groupPanelPlaceholderClass = computed(() => {
+            return gridGroupPanelPlaceholderThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupPanelPlaceholderClass" }] : /* istanbul ignore next */ []));
         this.groupPanelPlaceholderVisible = signal(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupPanelPlaceholderVisible" }] : /* istanbul ignore next */ []));
         this.groupable = computed(() => this.gridService.groupableOptions().enabled, /* @ts-ignore */
@@ -5067,16 +5310,16 @@ class GridComponent {
             return gridHeaderThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
-        this.headerMarginRight = computed(() => this.gridService.scrollbarGutterWidth(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "headerMarginRight" }] : /* istanbul ignore next */ []));
-        this.headerTableClass = computed(() => {
-            return gridHeaderTableThemeVariants();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "headerTableClass" }] : /* istanbul ignore next */ []));
+        this.headerMarginInlineEnd = computed(() => this.gridService.scrollbarGutterWidth(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerMarginInlineEnd" }] : /* istanbul ignore next */ []));
         this.headerTableCellClass = computed(() => {
             return gridHeaderTableCellThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerTableCellClass" }] : /* istanbul ignore next */ []));
+        this.headerTableClass = computed(() => {
+            return gridHeaderTableThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerTableClass" }] : /* istanbul ignore next */ []));
         this.headerTableColumnTitleClass = computed(() => {
             return gridHeaderTableColumnTitleThemeVariants();
         }, /* @ts-ignore */
@@ -5089,6 +5332,7 @@ class GridComponent {
             return gridHeaderTableRowThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerTableRowClass" }] : /* istanbul ignore next */ []));
+        this.messages = this.gridService.messages;
         this.noDataClass = computed(() => {
             return gridNoDataThemeVariants();
         }, /* @ts-ignore */
@@ -5138,13 +5382,6 @@ 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.
@@ -5158,6 +5395,13 @@ class GridComponent {
          */
         this.rounded = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rounded" }] : /* 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 Additional CSS classes merged onto the host element via `tailwind-merge`.
          * @default ""
@@ -5273,7 +5517,9 @@ class GridComponent {
             this.gridService.appliedFilters.update(dict => dict.remove(column.field));
             this.gridService.setColumnFiltered(column.id, false);
         }
-        this.adjustPageAfterFilter();
+        if (!this.gridService.serverBindingEnabled()) {
+            this.adjustPageAfterFilter();
+        }
         const allFilters = this.gridService
             .appliedFilters()
             .values()
@@ -5281,6 +5527,7 @@ class GridComponent {
             .where(f => f != null)
             .toArray();
         this.gridService.filterChange$.next(allFilters);
+        this.gridService.requestDataStateChange({ resetPage: true });
     }
     onColumnMouseEnter(column) {
         if (!this.columnDragging() || this.resizing()) {
@@ -5297,7 +5544,7 @@ class GridComponent {
         this.resizing.set(true);
     }
     onColumnSort(column) {
-        if (column.kind === "command") {
+        if (column.kind === "command" || !column.sortable) {
             return;
         }
         if (!this.gridService.sortableOptions().enabled) {
@@ -5308,14 +5555,14 @@ class GridComponent {
         }
         this.gridService.columnSort$.next(new ColumnSortEvent(column));
     }
+    onGroupColumnReorder(column, moveAs) {
+        this.gridService.moveGroupColumn(column, moveAs);
+    }
     onGroupingColumnRemove(event, column) {
         event.stopPropagation();
         this.gridService.clearColumnGrouping(column);
         this.groupPanelPlaceholderVisible.set(this.gridService.groupColumns().length === 0);
     }
-    onGroupColumnReorder(column, moveAs) {
-        this.gridService.moveGroupColumn(column, moveAs);
-    }
     onGroupingColumnSort(column) {
         let nextGroupSortDirection = "asc";
         if (column.groupSortDirection === "asc") {
@@ -5328,7 +5575,11 @@ class GridComponent {
         this.gridService.appliedGroupSorts.update(dict => dict.remove(column.field).put(column.field, { sort: { field: column.field, dir: nextGroupSortDirection } }));
     }
     onPageChange(event) {
+        const previous = this.gridService.paginationState();
         this.gridService.setPageState({ page: event.page, skip: event.skip, take: event.take });
+        if (previous.skip !== event.skip || previous.take !== event.take) {
+            this.gridService.requestDataStateChange();
+        }
         if (isPlatformBrowser(this.#platformId)) {
             const scrollableElement = this.#hostElementRef.nativeElement.querySelector("div.mona-grid-list");
             if (scrollableElement) {
@@ -5337,7 +5588,11 @@ class GridComponent {
         }
     }
     onPageSizeChange(data) {
-        this.gridService.setPageState({ take: data.newPageSize });
+        const previous = this.gridService.paginationState();
+        this.gridService.setPageState({ skip: 0, take: data.newPageSize });
+        if (previous.skip !== 0 || previous.take !== data.newPageSize) {
+            this.gridService.requestDataStateChange();
+        }
     }
     onToolbarKeydown(event) {
         const targets = this.getToolbarFocusTargets();
@@ -5405,6 +5660,9 @@ class GridComponent {
         }
         return widthByColumnId;
     }
+    getColumnLockBucket(column) {
+        return column.locked ? column.lockedPosition : "unlocked";
+    }
     getTableColumnHeaderCellList() {
         const headerElement = this.gridHeaderElement();
         if (!headerElement) {
@@ -5426,9 +5684,6 @@ class GridComponent {
         }
         return headerCells;
     }
-    getColumnLockBucket(column) {
-        return column.locked ? column.lockedPosition : "unlocked";
-    }
     getToolbarFocusTargets() {
         const toolbarElement = this.toolbarElement()?.nativeElement;
         if (toolbarElement == null) {
@@ -5600,19 +5855,26 @@ 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 }, 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>{{ messages().columns }}</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <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=\"ms-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 rtl:rotate-180\"></i> {{ messages().moveAsPrevious }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-right-fill rtl:rotate-180\"></i> {{ messages().moveAsNext }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">{{ messages().dragColumnHeaderToGroup }}</span>\n        }\n    </div>\n}\n<div [class]=\"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-e border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                    }\n                    @if (gridService.rowReorderColumnVisible()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [structuralColumn]=\"'reorder'\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'command'\"\n                            [columnId]=\"'$rowReorder'\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"0\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"gridService.groupColumns().length === 0\"\n                            [lastInRow]=\"\n                                !gridService.masterDetailTemplate() &&\n                                !gridService.selectionColumnVisible() &&\n                                gridService.visibleColumns().length === 0\n                            \"\n                            scope=\"col\"\n                            [attr.aria-label]=\"gridService.messages().rowReorder\"\n                            class=\"border-e border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [structuralColumn]=\"'detail'\"\n                            scope=\"col\"\n                            class=\"border-e border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                    }\n                    @if (gridService.selectionColumnVisible()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [structuralColumn]=\"'selection'\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'command'\"\n                            [columnId]=\"'$selection'\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"\n                                (gridService.rowReorderColumnVisible() ? 1 : 0) +\n                                (gridService.masterDetailTemplate() ? 1 : 0)\n                            \"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"\n                                !gridService.rowReorderColumnVisible() &&\n                                !gridService.masterDetailTemplate() &&\n                                gridService.groupColumns().length === 0\n                            \"\n                            [lastInRow]=\"gridService.visibleColumns().length === 0\"\n                            scope=\"col\"\n                            class=\"border-e border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.selectionColumnWidth\">\n                            @if (\n                                gridService.selectableOptions().mode === \"multiple\" &&\n                                gridService.selectableOptions().showSelectAll !== false\n                            ) {\n                                <mona-grid-select-all-checkbox />\n                            }\n                        </th>\n                    }\n                    @for (column of gridService.visibleColumns(); track $index) {\n                        @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                        <th\n                            scope=\"col\"\n                            role=\"columnheader\"\n                            cdkDrag\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [lockedCellHeader]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'header'\"\n                            [columnId]=\"column.id\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"colIndex\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                            [lastInRow]=\"\n                                colIndex ===\n                                gridService.leadingLogicalColumnCount() +\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\" && column.filterable) {\n                                            <mona-grid-filter-menu\n                                                [column]=\"column\"\n                                                [type]=\"column.dataType\"\n                                                (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                        }\n                                    }\n                                </div>\n                            </div>\n                            @if (\n                                dropColumn() === column &&\n                                dragColumn() &&\n                                gridService.reorderableOptions().enabled &&\n                                !groupingInProgress()\n                            ) {\n                                <span [class]=\"columnDropHintClass()\"> </span>\n                            }\n                            @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                <div\n                                    monaGridColumnResizeHandler\n                                    [column]=\"column\"\n                                    [class]=\"columnResizerClass()\"\n                                    (resizeStart)=\"onColumnResizeStart()\"\n                                    (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                            }\n                            <ng-template cdkDragPreview>\n                                <div [class]=\"columnDragPreviewClass()\">\n                                    <span>{{ column.title }}</span>\n                                </div>\n                            </ng-template>\n                            <ng-template cdkDragPlaceholder>\n                                @if (groupingInProgress()) {\n                                    <mona-chip\n                                        style=\"z-index: 10; pointer-events: none\"\n                                        [removable]=\"true\"\n                                        [rounded]=\"rounded()\"\n                                        >{{ column.title }}</mona-chip\n                                    >\n                                }\n                            </ng-template>\n                        </th>\n                        @if (columnDragging() && dragColumn() === column) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [class]=\"headerTableCellClass()\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"column.calculatedWidth\">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $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-e border-border\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.rowReorderColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'reorder'\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'detail'\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'selection'\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\"></th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                scope=\"col\"\n                                class=\"border-e border-border overflow-hidden\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.aria-label]=\"messages().filterByColumn(column.title)\">\n                                @if (column.kind === \"data\" && column.field && column.filterable) {\n                                    <mona-grid-filter-row-cell\n                                        [column]=\"column\"\n                                        (apply)=\"onColumnFilter(column, $event)\" />\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n            </thead>\n        </table>\n    </div>\n</div>\n\n@defer (when gridWidthSet()) {\n    @if (gridService.virtualScrollOptions().enabled) {\n        @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-virtual-list\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-ss-none rounded-se-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]=\"gridService.messages().noData\"></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-DLqCAee3.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-list.component-hakVMhqu.mjs').then(m => m.GridListComponent), PagerComponent, /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-DoAGYLzr.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Bd2twji1.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 }, responsivePager: { classPropertyName: "responsivePager", publicName: "responsivePager", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "baseClass()", "attr.data-uid": "uid", "attr.aria-busy": "gridService.serverLoading() || null" } }, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], queries: [{ propertyName: "columnDefinitions", predicate: GRID_COLUMN_DEFINITION, isSignal: true }, { propertyName: "gridDetailTemplate", first: true, predicate: GridDetailTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: GridNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: GridToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "footerScrollElement", first: true, predicate: ["footerScrollElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderElement", first: true, predicate: ["gridHeaderElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderTableElement", first: true, predicate: ["headerTable"], descendants: true, isSignal: true }, { propertyName: "groupColumnList", first: true, predicate: ["groupColumnList"], descendants: true, isSignal: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>{{ messages().columns }}</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ms-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <svg lucideEllipsisVertical [size]=\"16\" aria-hidden=\"true\"></svg>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <svg lucideArrowLeft [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsPrevious }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <svg lucideArrowRight [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsNext }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">{{ messages().dragColumnHeaderToGroup }}</span>\n        }\n    </div>\n}\n<div class=\"flex flex-col flex-1 min-h-0\" [attr.role]=\"groupable() ? 'treegrid' : 'grid'\">\n    <div [class]=\"headerClass()\" [style.margin-inline-end.px]=\"headerMarginInlineEnd()\" #gridHeaderElement>\n        <div>\n            <table\n                role=\"presentation\"\n                #headerTable\n                [class]=\"headerTableClass()\"\n                [style.width.px]=\"gridService.tableWidth()\">\n                <colgroup>\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                    }\n                    @if (gridService.rowReorderColumnVisible()) {\n                        <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                    }\n                    @if (gridService.selectionColumnVisible()) {\n                        <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                    }\n                    @for (col of gridService.visibleColumns(); track $index) {\n                        <col [style.width.px]=\"col.calculatedWidth\" />\n                    }\n                </colgroup>\n                <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                    <tr\n                        role=\"row\"\n                        cdkDropList\n                        [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                        (cdkDropListDropped)=\"onColumnDrop()\"\n                        [class]=\"headerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.rowReorderColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'reorder'\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$rowReorder'\"\n                                [rowIndex]=\"-1\"\n                                [colIndex]=\"0\"\n                                [section]=\"'header'\"\n                                [firstInRow]=\"gridService.groupColumns().length === 0\"\n                                [lastInRow]=\"\n                                    !gridService.masterDetailTemplate() &&\n                                    !gridService.selectionColumnVisible() &&\n                                    gridService.visibleColumns().length === 0\n                                \"\n                                scope=\"col\"\n                                [attr.aria-label]=\"gridService.messages().rowReorder\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'detail'\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'selection'\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$selection'\"\n                                [rowIndex]=\"-1\"\n                                [colIndex]=\"\n                                    (gridService.rowReorderColumnVisible() ? 1 : 0) +\n                                    (gridService.masterDetailTemplate() ? 1 : 0)\n                                \"\n                                [section]=\"'header'\"\n                                [firstInRow]=\"\n                                    !gridService.rowReorderColumnVisible() &&\n                                    !gridService.masterDetailTemplate() &&\n                                    gridService.groupColumns().length === 0\n                                \"\n                                [lastInRow]=\"gridService.visibleColumns().length === 0\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\">\n                                @if (\n                                    gridService.selectableOptions().mode === \"multiple\" &&\n                                    gridService.selectableOptions().showSelectAll !== false\n                                ) {\n                                    <mona-grid-select-all-checkbox />\n                                }\n                            </th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                            <th\n                                scope=\"col\"\n                                role=\"columnheader\"\n                                cdkDrag\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'header'\"\n                                [columnId]=\"column.id\"\n                                [rowIndex]=\"-1\"\n                                [colIndex]=\"colIndex\"\n                                [section]=\"'header'\"\n                                [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                                [lastInRow]=\"\n                                    colIndex ===\n                                    gridService.leadingLogicalColumnCount() + gridService.visibleColumns().length - 1\n                                \"\n                                (toggleExpand)=\"onColumnSort(column)\"\n                                [cdkDragData]=\"column\"\n                                [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                                [class]=\"headerTableCellClass()\"\n                                (mouseenter)=\"onColumnMouseEnter(column)\"\n                                (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                                (cdkDragStarted)=\"onColumnDragStart($event)\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.colspan]=\"1\"\n                                [attr.aria-sort]=\"\n                                    gridService.sortableOptions().enabled\n                                        ? (column.columnSortDirection | columnAriaSort)\n                                        : null\n                                \">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                    } @else if (column.titleTemplate) {\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                    } @else {\n                                        <span\n                                            [class]=\"headerTableColumnTitleClass()\"\n                                            (click)=\"onColumnSort(column)\"\n                                            [title]=\"column.title\"\n                                            >{{ column.title }}</span\n                                        >\n                                    }\n\n                                    <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                        @if (\n                                            gridService.sortableOptions().enabled && column.columnSortDirection !== null\n                                        ) {\n                                            <div class=\"inline-flex shrink-0 items-center gap-0.5\">\n                                                @if (column.columnSortDirection === \"asc\") {\n                                                    <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                } @else {\n                                                    <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                }\n                                                @if (\n                                                    gridService.sortableOptions().mode === \"multiple\" &&\n                                                    gridService.sortableOptions().showIndices &&\n                                                    column.sortIndex !== null\n                                                ) {\n                                                    <span class=\"tabular-nums\">{{ column.sortIndex }}</span>\n                                                }\n                                            </div>\n                                        }\n                                        @if (filterMenuEnabled()) {\n                                            @if (column.kind === \"data\" && column.filterable) {\n                                                <mona-grid-filter-menu\n                                                    [column]=\"column\"\n                                                    [type]=\"column.dataType\"\n                                                    (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                            }\n                                        }\n                                    </div>\n                                </div>\n                                @if (\n                                    dropColumn() === column &&\n                                    dragColumn() &&\n                                    gridService.reorderableOptions().enabled &&\n                                    !groupingInProgress()\n                                ) {\n                                    <span [class]=\"columnDropHintClass()\"> </span>\n                                }\n                                @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                    <div\n                                        monaGridColumnResizeHandler\n                                        [column]=\"column\"\n                                        [class]=\"columnResizerClass()\"\n                                        (resizeStart)=\"onColumnResizeStart()\"\n                                        (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                                }\n                                <ng-template cdkDragPreview>\n                                    <div [class]=\"columnDragPreviewClass()\">\n                                        <span>{{ column.title }}</span>\n                                    </div>\n                                </ng-template>\n                                <ng-template cdkDragPlaceholder>\n                                    @if (groupingInProgress()) {\n                                        <mona-chip\n                                            style=\"z-index: 10; pointer-events: none\"\n                                            [removable]=\"true\"\n                                            [rounded]=\"rounded()\"\n                                            >{{ column.title }}</mona-chip\n                                        >\n                                    }\n                                </ng-template>\n                            </th>\n                            @if (columnDragging() && dragColumn() === column) {\n                                <th\n                                    monaGridLockedCell\n                                    [column]=\"column\"\n                                    [lockedCellHeader]=\"true\"\n                                    [class]=\"headerTableCellClass()\"\n                                    [style.min-width.px]=\"column.minWidth\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"column.calculatedWidth\">\n                                    <div [class]=\"headerTableColumnWrapClass()\">\n                                        @if (column.headerTemplate) {\n                                            <ng-container\n                                                [ngTemplateOutlet]=\"column.headerTemplate\"\n                                                [ngTemplateOutletContext]=\"{\n                                                    $implicit: column,\n                                                    column\n                                                }\"></ng-container>\n                                        } @else if (column.titleTemplate) {\n                                            <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                        } @else {\n                                            <span\n                                                [class]=\"headerTableColumnTitleClass()\"\n                                                (click)=\"onColumnSort(column)\"\n                                                [title]=\"column.title\"\n                                                >{{ column.title }}</span\n                                            >\n                                        }\n                                    </div>\n                                </th>\n                            }\n                        }\n                    </tr>\n                    @if (filterRowEnabled()) {\n                        <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                            @for (_ of gridService.groupColumns(); track $index) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                            }\n                            @if (gridService.rowReorderColumnVisible()) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'reorder'\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                            }\n                            @if (gridService.masterDetailTemplate()) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'detail'\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                            }\n                            @if (gridService.selectionColumnVisible()) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'selection'\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.selectionColumnWidth\"></th>\n                            }\n                            @for (column of gridService.visibleColumns(); track $index) {\n                                <th\n                                    monaGridLockedCell\n                                    [column]=\"column\"\n                                    [lockedCellHeader]=\"true\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border overflow-hidden\"\n                                    [style.width.px]=\"column.calculatedWidth\"\n                                    [attr.aria-label]=\"messages().filterByColumn(column.title)\">\n                                    @if (column.kind === \"data\" && column.field && column.filterable) {\n                                        <mona-grid-filter-row-cell\n                                            [column]=\"column\"\n                                            (apply)=\"onColumnFilter(column, $event)\" />\n                                    }\n                                </th>\n                            }\n                        </tr>\n                    }\n                </thead>\n            </table>\n        </div>\n    </div>\n\n    @defer (when gridWidthSet()) {\n        @if (gridService.virtualScrollOptions().enabled) {\n            @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n                <mona-grid-virtual-list [columns]=\"gridService.visibleColumns()\" [data]=\"gridService.viewRows()\" />\n            } @else {\n                <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n            }\n        } @else {\n            <div class=\"relative flex-1 min-h-0\" data-grid-body-region>\n                @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                    <mona-grid-list [columns]=\"gridService.visibleColumns()\" [data]=\"gridService.viewPageRows()\" />\n                } @else if (!gridService.serverLoading()) {\n                    <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n                }\n                @if (gridService.serverLoading()) {\n                    <div class=\"absolute inset-0 z-20 flex items-center justify-center bg-surface/60\" data-grid-loading>\n                        <mona-spinner size=\"large\" />\n                    </div>\n                }\n            </div>\n            @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                @if (footerVisible()) {\n                    <div\n                        [class]=\"footerClass()\"\n                        [style.margin-inline-end.px]=\"gridService.scrollbarGutterWidth()\"\n                        #footerScrollElement\n                        data-grid-footer-scroll>\n                        <div>\n                            <table\n                                role=\"presentation\"\n                                [class]=\"footerTableClass()\"\n                                [style.width.px]=\"gridService.tableWidth()\">\n                                <colgroup>\n                                    @for (_ of gridService.groupColumns(); track $index) {\n                                        <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                    }\n                                    @if (gridService.rowReorderColumnVisible()) {\n                                        <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                                    }\n                                    @if (gridService.masterDetailTemplate()) {\n                                        <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                                    }\n                                    @if (gridService.selectionColumnVisible()) {\n                                        <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                                    }\n                                    @for (col of gridService.visibleColumns(); track $index) {\n                                        <col [style.width.px]=\"col.calculatedWidth\" />\n                                    }\n                                </colgroup>\n                                <tfoot role=\"rowgroup\">\n                                    <tr role=\"row\" [class]=\"footerTableRowClass()\">\n                                        @for (_ of gridService.groupColumns(); track $index) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                                [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                                        }\n                                        @if (gridService.rowReorderColumnVisible()) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [structuralColumn]=\"'reorder'\"\n                                                [footerCellWidth]=\"gridService.rowReorderColumnWidth\"></td>\n                                        }\n                                        @if (gridService.masterDetailTemplate()) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [structuralColumn]=\"'detail'\"\n                                                [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                                        }\n                                        @if (gridService.selectionColumnVisible()) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [structuralColumn]=\"'selection'\"\n                                                [footerCellWidth]=\"gridService.selectionColumnWidth\"></td>\n                                        }\n                                        @for (column of gridService.visibleColumns(); track $index) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [column]=\"column\"\n                                                [lockedCellHeader]=\"true\"\n                                                [footerColumn]=\"column\">\n                                                <mona-grid-footer-cell\n                                                    [column]=\"column\"\n                                                    [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                                            </td>\n                                        }\n                                    </tr>\n                                </tfoot>\n                            </table>\n                        </div>\n                    </div>\n                }\n            }\n        }\n    } @placeholder {\n        <mona-placeholder text=\"Loading...\" />\n    }\n</div>\n@if (!gridService.virtualScrollOptions().enabled) {\n    @if (gridService.serverBindingEnabled() || gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n        <mona-pager\n            class=\"border-0 border-t border-t-border rounded-ss-none rounded-se-none\"\n            [skip]=\"gridService.paginationState().skip\"\n            [pageSize]=\"gridService.paginationState().take\"\n            [total]=\"gridService.pagerTotal()\"\n            [size]=\"'small'\"\n            [rounded]=\"rounded()\"\n            [pageInput]=\"true\"\n            [pageSizeValues]=\"pageSizeValues()\"\n            [responsive]=\"responsivePager()\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            (pageChange)=\"onPageChange($event)\"></mona-pager>\n    }\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder [text]=\"gridService.messages().noData\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "component", type: LucideArrowLeft, selector: "svg[lucideArrowLeft]" }, { kind: "component", type: LucideArrowRight, selector: "svg[lucideArrowRight]" }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideEllipsisVertical, selector: "svg[lucideEllipsisVertical], svg[lucideMoreVertical]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridFilterMenuComponent, selector: "mona-grid-filter-menu", inputs: ["column", "type"], outputs: ["apply"] }, { kind: "component", type: GridFilterRowCellComponent, selector: "mona-grid-filter-row-cell", inputs: ["column"], outputs: ["apply"] }, { kind: "directive", type: GridColumnResizeHandlerDirective, selector: "[monaGridColumnResizeHandler]", inputs: ["column"], outputs: ["resizeEnd", "resizeStart"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: PagerComponent, selector: "mona-pager", inputs: ["firstLast", "navigable", "pageInput", "pageSize", "pageSizeValues", "previousNext", "responsive", "rounded", "showInfo", "size", "skip", "total", "type", "class", "visiblePages"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "component", type: PopupMenuItemComponent, selector: "mona-popup-menu-item", inputs: ["disabled", "label"], outputs: ["menuClick"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggleExpand"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "groupPrefixWidth", "lockedCellHeader", "lockedStructuralOffset", "structuralColumn"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupComponent, selector: "mona-popup", inputs: ["anchor", "anchorConnectionPoint", "animation", "backdropClass", "closeOnBackdropClick", "closeOnEscape", "closeOnMouseLeave", "closeOnOutsideClick", "data", "hasBackdrop", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "offset", "popupClass", "popupConnectionPoint", "popupWrapperClass", "positionStrategy", "positions", "preventClose", "providers", "trigger", "width", "withPush", "closeOnScroll", "restoreFocus", "withScrollTracking"], outputs: ["close", "open"] }, { kind: "component", type: GridColumnChooserComponent, selector: "mona-grid-column-chooser", outputs: ["apply", "cancel"] }, { kind: "component", type: GridSelectAllCheckboxComponent, selector: "mona-grid-select-all-checkbox" }, { kind: "pipe", type: ColumnAriaSortPipe, name: "columnAriaSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-cJjJ1b6M.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-list.component-Do-ktlth.mjs').then(m => m.GridListComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-Cs1gPJps.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-CkkLBnoI.mjs').then(m => m.GridFooterTableCellDirective), GridLockedCellDirective, /* @ts-ignore */
+                import('@nanahoshi/mona-ui/spinner').then(m => m.SpinnerComponent)]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ngImport: i0, type: GridComponent, resolveDeferredDeps: () => [/* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-DLqCAee3.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-list.component-hakVMhqu.mjs').then(m => m.GridListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-DoAGYLzr.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Bd2twji1.mjs').then(m => m.GridFooterTableCellDirective)], resolveMetadata: (GridFooterCellComponent, GridListComponent, GridVirtualListComponent, GridFooterTableCellDirective) => ({ decorators: [{
+        import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-cJjJ1b6M.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-list.component-Do-ktlth.mjs').then(m => m.GridListComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-Cs1gPJps.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-CkkLBnoI.mjs').then(m => m.GridFooterTableCellDirective), /* @ts-ignore */
+        import('@nanahoshi/mona-ui/spinner').then(m => m.SpinnerComponent)], resolveMetadata: (GridFooterCellComponent, GridListComponent, GridVirtualListComponent, GridFooterTableCellDirective, SpinnerComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: "mona-grid", changeDetection: ChangeDetectionStrategy.OnPush, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], imports: [
+                            LucideArrowDown,
+                            LucideArrowLeft,
+                            LucideArrowRight,
+                            LucideArrowUp,
+                            LucideEllipsisVertical,
                             CdkDropList,
                             ChipComponent,
                             CdkDrag,
@@ -5637,13 +5899,15 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
                             ButtonDirective,
                             PopupComponent,
                             GridColumnChooserComponent,
-                            GridSelectAllCheckboxComponent
+                            GridSelectAllCheckboxComponent,
+                            SpinnerComponent
                         ], 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>{{ messages().columns }}</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <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=\"ms-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 rtl:rotate-180\"></i> {{ messages().moveAsPrevious }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-right-fill rtl:rotate-180\"></i> {{ messages().moveAsNext }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">{{ messages().dragColumnHeaderToGroup }}</span>\n        }\n    </div>\n}\n<div [class]=\"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-e border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                    }\n                    @if (gridService.rowReorderColumnVisible()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [structuralColumn]=\"'reorder'\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'command'\"\n                            [columnId]=\"'$rowReorder'\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"0\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"gridService.groupColumns().length === 0\"\n                            [lastInRow]=\"\n                                !gridService.masterDetailTemplate() &&\n                                !gridService.selectionColumnVisible() &&\n                                gridService.visibleColumns().length === 0\n                            \"\n                            scope=\"col\"\n                            [attr.aria-label]=\"gridService.messages().rowReorder\"\n                            class=\"border-e border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [structuralColumn]=\"'detail'\"\n                            scope=\"col\"\n                            class=\"border-e border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                    }\n                    @if (gridService.selectionColumnVisible()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [structuralColumn]=\"'selection'\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'command'\"\n                            [columnId]=\"'$selection'\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"\n                                (gridService.rowReorderColumnVisible() ? 1 : 0) +\n                                (gridService.masterDetailTemplate() ? 1 : 0)\n                            \"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"\n                                !gridService.rowReorderColumnVisible() &&\n                                !gridService.masterDetailTemplate() &&\n                                gridService.groupColumns().length === 0\n                            \"\n                            [lastInRow]=\"gridService.visibleColumns().length === 0\"\n                            scope=\"col\"\n                            class=\"border-e border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.selectionColumnWidth\">\n                            @if (\n                                gridService.selectableOptions().mode === \"multiple\" &&\n                                gridService.selectableOptions().showSelectAll !== false\n                            ) {\n                                <mona-grid-select-all-checkbox />\n                            }\n                        </th>\n                    }\n                    @for (column of gridService.visibleColumns(); track $index) {\n                        @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                        <th\n                            scope=\"col\"\n                            role=\"columnheader\"\n                            cdkDrag\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [lockedCellHeader]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'header'\"\n                            [columnId]=\"column.id\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"colIndex\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                            [lastInRow]=\"\n                                colIndex ===\n                                gridService.leadingLogicalColumnCount() +\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\" && column.filterable) {\n                                            <mona-grid-filter-menu\n                                                [column]=\"column\"\n                                                [type]=\"column.dataType\"\n                                                (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                        }\n                                    }\n                                </div>\n                            </div>\n                            @if (\n                                dropColumn() === column &&\n                                dragColumn() &&\n                                gridService.reorderableOptions().enabled &&\n                                !groupingInProgress()\n                            ) {\n                                <span [class]=\"columnDropHintClass()\"> </span>\n                            }\n                            @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                <div\n                                    monaGridColumnResizeHandler\n                                    [column]=\"column\"\n                                    [class]=\"columnResizerClass()\"\n                                    (resizeStart)=\"onColumnResizeStart()\"\n                                    (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                            }\n                            <ng-template cdkDragPreview>\n                                <div [class]=\"columnDragPreviewClass()\">\n                                    <span>{{ column.title }}</span>\n                                </div>\n                            </ng-template>\n                            <ng-template cdkDragPlaceholder>\n                                @if (groupingInProgress()) {\n                                    <mona-chip\n                                        style=\"z-index: 10; pointer-events: none\"\n                                        [removable]=\"true\"\n                                        [rounded]=\"rounded()\"\n                                        >{{ column.title }}</mona-chip\n                                    >\n                                }\n                            </ng-template>\n                        </th>\n                        @if (columnDragging() && dragColumn() === column) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [class]=\"headerTableCellClass()\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"column.calculatedWidth\">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $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-e border-border\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.rowReorderColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'reorder'\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'detail'\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'selection'\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\"></th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                scope=\"col\"\n                                class=\"border-e border-border overflow-hidden\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.aria-label]=\"messages().filterByColumn(column.title)\">\n                                @if (column.kind === \"data\" && column.field && column.filterable) {\n                                    <mona-grid-filter-row-cell\n                                        [column]=\"column\"\n                                        (apply)=\"onColumnFilter(column, $event)\" />\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n            </thead>\n        </table>\n    </div>\n</div>\n\n@defer (when gridWidthSet()) {\n    @if (gridService.virtualScrollOptions().enabled) {\n        @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-virtual-list\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-ss-none rounded-se-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]=\"gridService.messages().noData\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n" }]
-            }], ctorParameters: () => [], propDecorators: { columnDefinitions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GRID_COLUMN_DEFINITION), { isSignal: true }] }], footerScrollElement: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], gridDetailTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridDetailTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], gridHeaderElement: [{ type: i0.ViewChild, args: ["gridHeaderElement", { isSignal: true }] }], gridHeaderTableElement: [{ type: i0.ViewChild, args: ["headerTable", { isSignal: true }] }], groupColumnList: [{ type: i0.ViewChild, args: ["groupColumnList", { isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], toolbarElement: [{ type: i0.ViewChild, args: ["toolbarElement", { isSignal: true }] }], toolbarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridToolbarTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeValues", required: false }] }], resizeMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMethod", required: false }] }], 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 }] }] } }) });
+                            "[attr.aria-busy]": "gridService.serverLoading() || null",
+                            role: "group"
+                        }, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>{{ messages().columns }}</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ms-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <svg lucideEllipsisVertical [size]=\"16\" aria-hidden=\"true\"></svg>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <svg lucideArrowLeft [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsPrevious }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <svg lucideArrowRight [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsNext }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">{{ messages().dragColumnHeaderToGroup }}</span>\n        }\n    </div>\n}\n<div class=\"flex flex-col flex-1 min-h-0\" [attr.role]=\"groupable() ? 'treegrid' : 'grid'\">\n    <div [class]=\"headerClass()\" [style.margin-inline-end.px]=\"headerMarginInlineEnd()\" #gridHeaderElement>\n        <div>\n            <table\n                role=\"presentation\"\n                #headerTable\n                [class]=\"headerTableClass()\"\n                [style.width.px]=\"gridService.tableWidth()\">\n                <colgroup>\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                    }\n                    @if (gridService.rowReorderColumnVisible()) {\n                        <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                    }\n                    @if (gridService.selectionColumnVisible()) {\n                        <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                    }\n                    @for (col of gridService.visibleColumns(); track $index) {\n                        <col [style.width.px]=\"col.calculatedWidth\" />\n                    }\n                </colgroup>\n                <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                    <tr\n                        role=\"row\"\n                        cdkDropList\n                        [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                        (cdkDropListDropped)=\"onColumnDrop()\"\n                        [class]=\"headerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.rowReorderColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'reorder'\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$rowReorder'\"\n                                [rowIndex]=\"-1\"\n                                [colIndex]=\"0\"\n                                [section]=\"'header'\"\n                                [firstInRow]=\"gridService.groupColumns().length === 0\"\n                                [lastInRow]=\"\n                                    !gridService.masterDetailTemplate() &&\n                                    !gridService.selectionColumnVisible() &&\n                                    gridService.visibleColumns().length === 0\n                                \"\n                                scope=\"col\"\n                                [attr.aria-label]=\"gridService.messages().rowReorder\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'detail'\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'selection'\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$selection'\"\n                                [rowIndex]=\"-1\"\n                                [colIndex]=\"\n                                    (gridService.rowReorderColumnVisible() ? 1 : 0) +\n                                    (gridService.masterDetailTemplate() ? 1 : 0)\n                                \"\n                                [section]=\"'header'\"\n                                [firstInRow]=\"\n                                    !gridService.rowReorderColumnVisible() &&\n                                    !gridService.masterDetailTemplate() &&\n                                    gridService.groupColumns().length === 0\n                                \"\n                                [lastInRow]=\"gridService.visibleColumns().length === 0\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\">\n                                @if (\n                                    gridService.selectableOptions().mode === \"multiple\" &&\n                                    gridService.selectableOptions().showSelectAll !== false\n                                ) {\n                                    <mona-grid-select-all-checkbox />\n                                }\n                            </th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                            <th\n                                scope=\"col\"\n                                role=\"columnheader\"\n                                cdkDrag\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'header'\"\n                                [columnId]=\"column.id\"\n                                [rowIndex]=\"-1\"\n                                [colIndex]=\"colIndex\"\n                                [section]=\"'header'\"\n                                [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                                [lastInRow]=\"\n                                    colIndex ===\n                                    gridService.leadingLogicalColumnCount() + gridService.visibleColumns().length - 1\n                                \"\n                                (toggleExpand)=\"onColumnSort(column)\"\n                                [cdkDragData]=\"column\"\n                                [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                                [class]=\"headerTableCellClass()\"\n                                (mouseenter)=\"onColumnMouseEnter(column)\"\n                                (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                                (cdkDragStarted)=\"onColumnDragStart($event)\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.colspan]=\"1\"\n                                [attr.aria-sort]=\"\n                                    gridService.sortableOptions().enabled\n                                        ? (column.columnSortDirection | columnAriaSort)\n                                        : null\n                                \">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                    } @else if (column.titleTemplate) {\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                    } @else {\n                                        <span\n                                            [class]=\"headerTableColumnTitleClass()\"\n                                            (click)=\"onColumnSort(column)\"\n                                            [title]=\"column.title\"\n                                            >{{ column.title }}</span\n                                        >\n                                    }\n\n                                    <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                        @if (\n                                            gridService.sortableOptions().enabled && column.columnSortDirection !== null\n                                        ) {\n                                            <div class=\"inline-flex shrink-0 items-center gap-0.5\">\n                                                @if (column.columnSortDirection === \"asc\") {\n                                                    <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                } @else {\n                                                    <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                }\n                                                @if (\n                                                    gridService.sortableOptions().mode === \"multiple\" &&\n                                                    gridService.sortableOptions().showIndices &&\n                                                    column.sortIndex !== null\n                                                ) {\n                                                    <span class=\"tabular-nums\">{{ column.sortIndex }}</span>\n                                                }\n                                            </div>\n                                        }\n                                        @if (filterMenuEnabled()) {\n                                            @if (column.kind === \"data\" && column.filterable) {\n                                                <mona-grid-filter-menu\n                                                    [column]=\"column\"\n                                                    [type]=\"column.dataType\"\n                                                    (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                            }\n                                        }\n                                    </div>\n                                </div>\n                                @if (\n                                    dropColumn() === column &&\n                                    dragColumn() &&\n                                    gridService.reorderableOptions().enabled &&\n                                    !groupingInProgress()\n                                ) {\n                                    <span [class]=\"columnDropHintClass()\"> </span>\n                                }\n                                @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                    <div\n                                        monaGridColumnResizeHandler\n                                        [column]=\"column\"\n                                        [class]=\"columnResizerClass()\"\n                                        (resizeStart)=\"onColumnResizeStart()\"\n                                        (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                                }\n                                <ng-template cdkDragPreview>\n                                    <div [class]=\"columnDragPreviewClass()\">\n                                        <span>{{ column.title }}</span>\n                                    </div>\n                                </ng-template>\n                                <ng-template cdkDragPlaceholder>\n                                    @if (groupingInProgress()) {\n                                        <mona-chip\n                                            style=\"z-index: 10; pointer-events: none\"\n                                            [removable]=\"true\"\n                                            [rounded]=\"rounded()\"\n                                            >{{ column.title }}</mona-chip\n                                        >\n                                    }\n                                </ng-template>\n                            </th>\n                            @if (columnDragging() && dragColumn() === column) {\n                                <th\n                                    monaGridLockedCell\n                                    [column]=\"column\"\n                                    [lockedCellHeader]=\"true\"\n                                    [class]=\"headerTableCellClass()\"\n                                    [style.min-width.px]=\"column.minWidth\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"column.calculatedWidth\">\n                                    <div [class]=\"headerTableColumnWrapClass()\">\n                                        @if (column.headerTemplate) {\n                                            <ng-container\n                                                [ngTemplateOutlet]=\"column.headerTemplate\"\n                                                [ngTemplateOutletContext]=\"{\n                                                    $implicit: column,\n                                                    column\n                                                }\"></ng-container>\n                                        } @else if (column.titleTemplate) {\n                                            <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                        } @else {\n                                            <span\n                                                [class]=\"headerTableColumnTitleClass()\"\n                                                (click)=\"onColumnSort(column)\"\n                                                [title]=\"column.title\"\n                                                >{{ column.title }}</span\n                                            >\n                                        }\n                                    </div>\n                                </th>\n                            }\n                        }\n                    </tr>\n                    @if (filterRowEnabled()) {\n                        <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                            @for (_ of gridService.groupColumns(); track $index) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                            }\n                            @if (gridService.rowReorderColumnVisible()) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'reorder'\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                            }\n                            @if (gridService.masterDetailTemplate()) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'detail'\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                            }\n                            @if (gridService.selectionColumnVisible()) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'selection'\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.selectionColumnWidth\"></th>\n                            }\n                            @for (column of gridService.visibleColumns(); track $index) {\n                                <th\n                                    monaGridLockedCell\n                                    [column]=\"column\"\n                                    [lockedCellHeader]=\"true\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border overflow-hidden\"\n                                    [style.width.px]=\"column.calculatedWidth\"\n                                    [attr.aria-label]=\"messages().filterByColumn(column.title)\">\n                                    @if (column.kind === \"data\" && column.field && column.filterable) {\n                                        <mona-grid-filter-row-cell\n                                            [column]=\"column\"\n                                            (apply)=\"onColumnFilter(column, $event)\" />\n                                    }\n                                </th>\n                            }\n                        </tr>\n                    }\n                </thead>\n            </table>\n        </div>\n    </div>\n\n    @defer (when gridWidthSet()) {\n        @if (gridService.virtualScrollOptions().enabled) {\n            @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n                <mona-grid-virtual-list [columns]=\"gridService.visibleColumns()\" [data]=\"gridService.viewRows()\" />\n            } @else {\n                <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n            }\n        } @else {\n            <div class=\"relative flex-1 min-h-0\" data-grid-body-region>\n                @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                    <mona-grid-list [columns]=\"gridService.visibleColumns()\" [data]=\"gridService.viewPageRows()\" />\n                } @else if (!gridService.serverLoading()) {\n                    <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n                }\n                @if (gridService.serverLoading()) {\n                    <div class=\"absolute inset-0 z-20 flex items-center justify-center bg-surface/60\" data-grid-loading>\n                        <mona-spinner size=\"large\" />\n                    </div>\n                }\n            </div>\n            @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                @if (footerVisible()) {\n                    <div\n                        [class]=\"footerClass()\"\n                        [style.margin-inline-end.px]=\"gridService.scrollbarGutterWidth()\"\n                        #footerScrollElement\n                        data-grid-footer-scroll>\n                        <div>\n                            <table\n                                role=\"presentation\"\n                                [class]=\"footerTableClass()\"\n                                [style.width.px]=\"gridService.tableWidth()\">\n                                <colgroup>\n                                    @for (_ of gridService.groupColumns(); track $index) {\n                                        <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                    }\n                                    @if (gridService.rowReorderColumnVisible()) {\n                                        <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                                    }\n                                    @if (gridService.masterDetailTemplate()) {\n                                        <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                                    }\n                                    @if (gridService.selectionColumnVisible()) {\n                                        <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                                    }\n                                    @for (col of gridService.visibleColumns(); track $index) {\n                                        <col [style.width.px]=\"col.calculatedWidth\" />\n                                    }\n                                </colgroup>\n                                <tfoot role=\"rowgroup\">\n                                    <tr role=\"row\" [class]=\"footerTableRowClass()\">\n                                        @for (_ of gridService.groupColumns(); track $index) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                                [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                                        }\n                                        @if (gridService.rowReorderColumnVisible()) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [structuralColumn]=\"'reorder'\"\n                                                [footerCellWidth]=\"gridService.rowReorderColumnWidth\"></td>\n                                        }\n                                        @if (gridService.masterDetailTemplate()) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [structuralColumn]=\"'detail'\"\n                                                [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                                        }\n                                        @if (gridService.selectionColumnVisible()) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [structuralColumn]=\"'selection'\"\n                                                [footerCellWidth]=\"gridService.selectionColumnWidth\"></td>\n                                        }\n                                        @for (column of gridService.visibleColumns(); track $index) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [column]=\"column\"\n                                                [lockedCellHeader]=\"true\"\n                                                [footerColumn]=\"column\">\n                                                <mona-grid-footer-cell\n                                                    [column]=\"column\"\n                                                    [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                                            </td>\n                                        }\n                                    </tr>\n                                </tfoot>\n                            </table>\n                        </div>\n                    </div>\n                }\n            }\n        }\n    } @placeholder {\n        <mona-placeholder text=\"Loading...\" />\n    }\n</div>\n@if (!gridService.virtualScrollOptions().enabled) {\n    @if (gridService.serverBindingEnabled() || gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n        <mona-pager\n            class=\"border-0 border-t border-t-border rounded-ss-none rounded-se-none\"\n            [skip]=\"gridService.paginationState().skip\"\n            [pageSize]=\"gridService.paginationState().take\"\n            [total]=\"gridService.pagerTotal()\"\n            [size]=\"'small'\"\n            [rounded]=\"rounded()\"\n            [pageInput]=\"true\"\n            [pageSizeValues]=\"pageSizeValues()\"\n            [responsive]=\"responsivePager()\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            (pageChange)=\"onPageChange($event)\"></mona-pager>\n    }\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder [text]=\"gridService.messages().noData\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n" }]
+            }], ctorParameters: () => [], propDecorators: { columnDefinitions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GRID_COLUMN_DEFINITION), { isSignal: true }] }], footerScrollElement: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], gridDetailTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridDetailTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], gridHeaderElement: [{ type: i0.ViewChild, args: ["gridHeaderElement", { isSignal: true }] }], gridHeaderTableElement: [{ type: i0.ViewChild, args: ["headerTable", { isSignal: true }] }], groupColumnList: [{ type: i0.ViewChild, args: ["groupColumnList", { isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], toolbarElement: [{ type: i0.ViewChild, args: ["toolbarElement", { isSignal: true }] }], toolbarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridToolbarTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeValues", required: false }] }], resizeMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMethod", required: false }] }], responsivePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsivePager", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } }) });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/grid
@@ -5653,5 +5917,5 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
  * Generated bundle index. Do not edit.
  */
 
-export { GridReorderableDirective as $, GRID_DEFAULT_MESSAGES as A, GridAddCommandDirective as B, CellEditEvent as C, GridAddEvent as D, GridCancelCommandDirective as E, GridCancelEvent as F, GridNavigationService as G, GridCellTemplateDirective as H, GridColumnComponent as I, GridColumnTitleTemplateDirective as J, GridCommandColumnComponent as K, GridComponent as L, GridContextMenuDirective as M, GridDetailTemplateDirective as N, GridEditCommandDirective as O, GridEditEvent as P, GridEditTemplateDirective as Q, GridEditableDirective as R, GridExportDirective as S, GridFilterableDirective as T, GridFooterTemplateDirective as U, GridGroupFooterTemplateDirective as V, GridGroupableDirective as W, GridHeaderTemplateDirective as X, GridNoDataTemplateDirective as Y, GridRemoveCommandDirective as Z, GridRemoveEvent as _, GridRowFlattenerService as a, GridResizableDirective as a0, GridRowReorderableDirective as a1, GridSaveCommandDirective as a2, GridSaveEvent as a3, GridSelectableDirective as a4, GridSortableDirective as a5, GridStatePersistenceDirective as a6, GridToolbarTemplateDirective as a7, GridVirtualScrollDirective as a8, RowEditEvent as a9, RowReorderEvent as aa, 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-BIK61ieq.mjs.map
+export { GridRemoveEvent as $, gridFooterTableCellThemeVariants as A, GRID_DEFAULT_MESSAGES as B, CellEditEvent as C, GridAddCommandDirective as D, GridAddEvent as E, GridCancelCommandDirective as F, GridNavigationService as G, GridCancelEvent as H, GridCellTemplateDirective as I, GridColumnComponent as J, GridColumnTitleTemplateDirective as K, GridCommandColumnComponent as L, GridComponent as M, GridContextMenuDirective as N, GridDetailTemplateDirective as O, GridEditCommandDirective as P, GridEditEvent as Q, GridEditTemplateDirective as R, GridEditableDirective as S, GridExportDirective as T, GridFilterableDirective as U, GridFooterTemplateDirective as V, GridGroupFooterTemplateDirective as W, GridGroupableDirective as X, GridHeaderTemplateDirective as Y, GridNoDataTemplateDirective as Z, GridRemoveCommandDirective as _, GridRowFlattenerService as a, GridReorderableDirective as a0, GridResizableDirective as a1, GridRowReorderableDirective as a2, GridSaveCommandDirective as a3, GridSaveEvent as a4, GridSelectableDirective as a5, GridServerBindingDirective as a6, GridSortableDirective as a7, GridStatePersistenceDirective as a8, GridToolbarTemplateDirective as a9, GridVirtualScrollDirective as aa, RowEditEvent as ab, RowReorderEvent as ac, gridFooterTableRowThemeVariants as b, GridService as c, gridGroupRowThemeVariants as d, gridRowDragPlaceholderThemeVariants as e, gridRowDragPreviewThemeVariants as f, gridListBaseThemeVariants as g, gridListTableThemeVariants as h, GridLogicalCellDirective as i, GridLockedCellDirective as j, gridFooterThemeVariants as k, gridFooterTableThemeVariants as l, GRID_DEFAULT_VIRTUAL_ROW_HEIGHT as m, gridListTableCellThemeVariants as n, gridDetailContentCellThemeVariants as o, gridDetailIndentCellThemeVariants as p, gridDetailRowThemeVariants as q, gridListTableRowThemeVariants as r, gridCellEditorBaseThemeVariants as s, gridCellEditorInputThemeVariants as t, gridCellBaseThemeVariants as u, gridCellContainerThemeVariants as v, gridCellDirtyIndicatorThemeVariants as w, gridCellTextThemeVariants as x, gridRowReorderHandleThemeVariants as y, gridSelectionCellThemeVariants as z };
+//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CIfTr1Qm.mjs.map