@nanahoshi/mona-ui 0.21.0 → 0.22.0

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

@@ -11,6 +11,7 @@ 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, FILTER_DEFAULT_MESSAGES } from '@nanahoshi/mona-ui/filter';
@@ -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';
@@ -2782,6 +2782,9 @@ class GridSortableDirective {
     }
     #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;
@@ -3127,6 +3130,7 @@ class GridCommandColumnComponent {
                 maxWidth: this.maxWidth(),
                 minWidth: this.minWidth(),
                 removeConfirmation: this.removeConfirmation(),
+                sortable: false,
                 sortIndex: null,
                 stateKey,
                 title: this.title(),
@@ -3202,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,
@@ -3230,6 +3233,7 @@ class GridColumnComponent {
             maxWidth: this.maxWidth(),
             minWidth: this.minWidth(),
             removeConfirmation: false,
+            sortable: this.sortable(),
             sortIndex: null,
             stateKey: this.stateKey(),
             title: this.title(),
@@ -3237,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 });
@@ -3293,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.
          */
@@ -3314,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,
@@ -3330,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;
@@ -5534,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) {
@@ -5845,21 +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 }, 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                        <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=\"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                                (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]=\"{\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: "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-ZdcR20RJ.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-list.component-Dtze5qye.mjs').then(m => m.GridListComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-xc8ybFkY.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Bu093U9J.mjs').then(m => m.GridFooterTableCellDirective), GridLockedCellDirective, /* @ts-ignore */
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridComponent, isStandalone: true, selector: "mona-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, resizeMethod: { classPropertyName: "resizeMethod", publicName: "resizeMethod", isSignal: true, isRequired: false, transformFunction: null }, responsivePager: { classPropertyName: "responsivePager", publicName: "responsivePager", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, 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-ZdcR20RJ.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-list.component-Dtze5qye.mjs').then(m => m.GridListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-xc8ybFkY.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Bu093U9J.mjs').then(m => m.GridFooterTableCellDirective), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-cJjJ1b6M.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-list.component-Do-ktlth.mjs').then(m => m.GridListComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-Cs1gPJps.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-CkkLBnoI.mjs').then(m => m.GridFooterTableCellDirective), /* @ts-ignore */
         import('@nanahoshi/mona-ui/spinner').then(m => m.SpinnerComponent)], resolveMetadata: (GridFooterCellComponent, GridListComponent, GridVirtualListComponent, GridFooterTableCellDirective, SpinnerComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: "mona-grid", changeDetection: ChangeDetectionStrategy.OnPush, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], imports: [
+                            LucideArrowDown,
+                            LucideArrowLeft,
+                            LucideArrowRight,
+                            LucideArrowUp,
+                            LucideEllipsisVertical,
                             CdkDropList,
                             ChipComponent,
                             CdkDrag,
@@ -5891,7 +5906,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
                             "[attr.data-uid]": "uid",
                             "[attr.aria-busy]": "gridService.serverLoading() || null",
                             role: "group"
-                        }, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>{{ messages().columns }}</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <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=\"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                                (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]=\"{\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" }]
+                        }, 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 }] }] } }) });
 
 /*
@@ -5903,4 +5918,4 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
  */
 
 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-BGfDw6_5.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CIfTr1Qm.mjs.map

package/fesm2022/nanahoshi-mona-ui-grid.mjs

@@ -1,2 +1,2 @@
-export { C as CellEditEvent, B as GRID_DEFAULT_MESSAGES, D as GridAddCommandDirective, E as GridAddEvent, F as GridCancelCommandDirective, H as GridCancelEvent, I as GridCellTemplateDirective, J as GridColumnComponent, K as GridColumnTitleTemplateDirective, L as GridCommandColumnComponent, M as GridComponent, N as GridContextMenuDirective, O as GridDetailTemplateDirective, P as GridEditCommandDirective, Q as GridEditEvent, R as GridEditTemplateDirective, S as GridEditableDirective, T as GridExportDirective, U as GridFilterableDirective, V as GridFooterTemplateDirective, W as GridGroupFooterTemplateDirective, X as GridGroupableDirective, Y as GridHeaderTemplateDirective, Z as GridNoDataTemplateDirective, _ as GridRemoveCommandDirective, $ as GridRemoveEvent, a0 as GridReorderableDirective, a1 as GridResizableDirective, a2 as GridRowReorderableDirective, a3 as GridSaveCommandDirective, a4 as GridSaveEvent, a5 as GridSelectableDirective, a6 as GridServerBindingDirective, a7 as GridSortableDirective, a8 as GridStatePersistenceDirective, a9 as GridToolbarTemplateDirective, aa as GridVirtualScrollDirective, ab as RowEditEvent, ac as RowReorderEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BGfDw6_5.mjs';
+export { C as CellEditEvent, B as GRID_DEFAULT_MESSAGES, D as GridAddCommandDirective, E as GridAddEvent, F as GridCancelCommandDirective, H as GridCancelEvent, I as GridCellTemplateDirective, J as GridColumnComponent, K as GridColumnTitleTemplateDirective, L as GridCommandColumnComponent, M as GridComponent, N as GridContextMenuDirective, O as GridDetailTemplateDirective, P as GridEditCommandDirective, Q as GridEditEvent, R as GridEditTemplateDirective, S as GridEditableDirective, T as GridExportDirective, U as GridFilterableDirective, V as GridFooterTemplateDirective, W as GridGroupFooterTemplateDirective, X as GridGroupableDirective, Y as GridHeaderTemplateDirective, Z as GridNoDataTemplateDirective, _ as GridRemoveCommandDirective, $ as GridRemoveEvent, a0 as GridReorderableDirective, a1 as GridResizableDirective, a2 as GridRowReorderableDirective, a3 as GridSaveCommandDirective, a4 as GridSaveEvent, a5 as GridSelectableDirective, a6 as GridServerBindingDirective, a7 as GridSortableDirective, a8 as GridStatePersistenceDirective, a9 as GridToolbarTemplateDirective, aa as GridVirtualScrollDirective, ab as RowEditEvent, ac as RowReorderEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CIfTr1Qm.mjs';
 //# sourceMappingURL=nanahoshi-mona-ui-grid.mjs.map

package/fesm2022/nanahoshi-mona-ui-internal-filter-input.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, DestroyRef, ElementRef, signal, input, output, effect, untracked, afterNextRender, Component } from '@angular/core';
+import { LucideSearch } from '@lucide/angular';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -68,11 +69,11 @@ class FilterInputComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: FilterInputComponent, isStandalone: true, selector: "mona-filter-input", inputs: { debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", inputBlur: "inputBlur", inputFocus: "inputFocus" }, ngImport: i0, template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [tabindex]=\"0\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <i class=\"ri-search-line\"></i>\n        </div>\n    </ng-template>\n</mona-text-box>\n", dependencies: [{ 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: "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: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: FilterInputComponent, isStandalone: true, selector: "mona-filter-input", inputs: { debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", inputBlur: "inputBlur", inputFocus: "inputFocus" }, ngImport: i0, template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [tabindex]=\"0\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <svg lucideSearch [size]=\"16\" aria-hidden=\"true\"></svg>\n        </div>\n    </ng-template>\n</mona-text-box>\n", dependencies: [{ kind: "component", type: LucideSearch, selector: "svg[lucideSearch]" }, { 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: "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: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-filter-input", imports: [TextBoxComponent, FormsModule, TextBoxPrefixTemplateDirective], template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [tabindex]=\"0\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <i class=\"ri-search-line\"></i>\n        </div>\n    </ng-template>\n</mona-text-box>\n" }]
+            args: [{ selector: "mona-filter-input", imports: [LucideSearch, TextBoxComponent, FormsModule, TextBoxPrefixTemplateDirective], template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [tabindex]=\"0\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <svg lucideSearch [size]=\"16\" aria-hidden=\"true\"></svg>\n        </div>\n    </ng-template>\n</mona-text-box>\n" }]
         }], ctorParameters: () => [], propDecorators: { debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /*