@nanahoshi/mona-ui 0.6.1 → 0.7.0

package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-qsRN5qZF.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CvCis4-I.mjs}

@@ -1432,8 +1432,16 @@ class GridService {
     }
     validateSessionForSave(session) {
         const rootField = session.form();
-        rootField.markAsTouched();
-        return !rootField.invalid() && !rootField.pending();
+        const editedField = session.mode === "cell" && session.field != null ? session.form[session.field] : null;
+        if (editedField == null) {
+            rootField.markAsTouched();
+            return !rootField.invalid() && !rootField.pending();
+        }
+        // A cell edit can only fix its own field. Row-level errors still block the save, but an invalid
+        // sibling field must not trap the user in a cell whose own value is valid.
+        const field = editedField();
+        field.markAsTouched();
+        return !field.invalid() && !field.pending() && rootField.errors().length === 0;
     }
     serializeFilter(filter) {
         if (filter == null) {
@@ -2940,6 +2948,28 @@ class GridNavigationService {
         this.#focusCell(fallback.key, fallback.value);
         return true;
     }
+    focusAdjacentEditableCell(rowUid, columnId, direction) {
+        const editableCells = this.#cellElementDict()
+            .where(e => e.value.section === "body" &&
+            e.value.cellKind === "data" &&
+            e.value.editable &&
+            e.value.rowUid != null &&
+            e.value.columnId != null)
+            .orderBy(e => e.value.rowIndex)
+            .thenBy(e => e.value.colIndex)
+            .toArray();
+        const currentIndex = editableCells.findIndex(e => e.value.rowUid === rowUid && e.value.columnId === columnId);
+        if (currentIndex === -1) {
+            return false;
+        }
+        const target = editableCells[currentIndex + (direction === "next" ? 1 : -1)];
+        if (!target) {
+            return false;
+        }
+        this.#focusCell(target.key, target.value);
+        target.value.startEdit?.();
+        return true;
+    }
     focusFirstCell() {
         const firstCell = this.#findFirstHeaderCell() ?? this.#findFirstCell();
         if (firstCell) {
@@ -3183,6 +3213,7 @@ class GridNavigationService {
         return (left.cellKind === right.cellKind &&
             left.colIndex === right.colIndex &&
             left.columnId === right.columnId &&
+            left.editable === right.editable &&
             left.element === right.element &&
             left.firstInRow === right.firstInRow &&
             left.groupHeader === right.groupHeader &&
@@ -3190,7 +3221,8 @@ class GridNavigationService {
             left.lastInRow === right.lastInRow &&
             left.rowIndex === right.rowIndex &&
             left.rowUid === right.rowUid &&
-            left.section === right.section);
+            left.section === right.section &&
+            left.startEdit === right.startEdit);
     }
     #navigateToRowEdge(edge, cellKey) {
         const data = this.#cellElementDict().get(cellKey);
@@ -3520,12 +3552,14 @@ class GridLogicalCellDirective {
     #gridNavigationService;
     #gridService;
     #hostElementRef;
+    #startEdit;
     constructor() {
         this.#cellData = computed(() => {
             const data = {
                 cellKind: this.resolvedCellKind(),
                 colIndex: this.colIndex(),
                 columnId: this.columnId(),
+                editable: this.editable(),
                 element: this.#hostElementRef.nativeElement,
                 firstInRow: this.firstInRow(),
                 groupHeader: this.groupHeader(),
@@ -3533,7 +3567,8 @@ class GridLogicalCellDirective {
                 lastInRow: this.lastInRow(),
                 rowIndex: this.rowIndex(),
                 rowUid: this.rowUid(),
-                section: this.resolvedSection()
+                section: this.resolvedSection(),
+                startEdit: this.editable() ? this.#startEdit : undefined
             };
             return data;
         }, /* @ts-ignore */
@@ -3545,6 +3580,9 @@ class GridLogicalCellDirective {
         this.#gridNavigationService = inject(GridNavigationService);
         this.#gridService = inject(GridService);
         this.#hostElementRef = inject((ElementRef));
+        this.#startEdit = () => {
+            this.edit.emit();
+        };
         this.ariaColIndex = computed(() => this.colIndex() + this.#gridService.groupColumns().length + 1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaColIndex" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
@@ -3594,6 +3632,11 @@ class GridLogicalCellDirective {
         this.columnId = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "columnId" }] : /* istanbul ignore next */ []));
         this.edit = output();
+        /**
+         * @description Marks the cell as a participant in Tab-driven cell edit traversal.
+         */
+        this.editable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
         this.firstInRow = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "firstInRow" }] : /* istanbul ignore next */ []));
         this.groupHeader = input(false, /* @ts-ignore */
@@ -3634,6 +3677,18 @@ class GridLogicalCellDirective {
             this.#gridNavigationService.unregisterCell(cellKey);
         });
     }
+    focusNextPageTabTarget(backwards) {
+        const host = this.#hostElementRef.nativeElement;
+        const targets = this.#getPageTabTargets();
+        const orderedTargets = backwards ? targets.reverse() : targets;
+        const documentPosition = backwards ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;
+        const target = orderedTargets.find(candidate => (host.compareDocumentPosition(candidate) & documentPosition) !== 0);
+        if (!target) {
+            return false;
+        }
+        target.focus();
+        return true;
+    }
     #focusInnerTarget(target) {
         target.focus();
     }
@@ -3654,18 +3709,6 @@ class GridLogicalCellDirective {
         this.#focusInnerTarget(target);
         return true;
     }
-    #focusNextPageTabTarget(backwards) {
-        const host = this.#hostElementRef.nativeElement;
-        const targets = this.#getPageTabTargets();
-        const orderedTargets = backwards ? targets.reverse() : targets;
-        const documentPosition = backwards ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;
-        const target = orderedTargets.find(candidate => (host.compareDocumentPosition(candidate) & documentPosition) !== 0);
-        if (!target) {
-            return false;
-        }
-        target.focus();
-        return true;
-    }
     #getInnerFocusableTargets() {
         const host = this.#hostElementRef.nativeElement;
         const targets = Array.from(host.querySelectorAll(FOCUSABLE_TARGET_SELECTOR$1));
@@ -3754,7 +3797,7 @@ class GridLogicalCellDirective {
             return;
         }
         if (event.key === "Tab") {
-            if (this.#focusNextPageTabTarget(event.shiftKey)) {
+            if (this.focusNextPageTabTarget(event.shiftKey)) {
                 event.preventDefault();
             }
             return;
@@ -3835,7 +3878,7 @@ class GridLogicalCellDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLogicalCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridLogicalCellDirective, isStandalone: true, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: { cellKind: { classPropertyName: "cellKind", publicName: "cellKind", isSignal: true, isRequired: false, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, columnId: { classPropertyName: "columnId", publicName: "columnId", isSignal: true, isRequired: false, transformFunction: null }, firstInRow: { classPropertyName: "firstInRow", publicName: "firstInRow", isSignal: true, isRequired: true, transformFunction: null }, groupHeader: { classPropertyName: "groupHeader", publicName: "groupHeader", isSignal: true, isRequired: false, transformFunction: null }, groupKey: { classPropertyName: "groupKey", publicName: "groupKey", isSignal: true, isRequired: false, transformFunction: null }, lastInRow: { classPropertyName: "lastInRow", publicName: "lastInRow", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, rowUid: { classPropertyName: "rowUid", publicName: "rowUid", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", toggle: "toggle" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "focused() ? 0 : -1", "attr.aria-colindex": "ariaColIndex()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridLogicalCellDirective, isStandalone: true, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: { cellKind: { classPropertyName: "cellKind", publicName: "cellKind", isSignal: true, isRequired: false, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, columnId: { classPropertyName: "columnId", publicName: "columnId", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, firstInRow: { classPropertyName: "firstInRow", publicName: "firstInRow", isSignal: true, isRequired: true, transformFunction: null }, groupHeader: { classPropertyName: "groupHeader", publicName: "groupHeader", isSignal: true, isRequired: false, transformFunction: null }, groupKey: { classPropertyName: "groupKey", publicName: "groupKey", isSignal: true, isRequired: false, transformFunction: null }, lastInRow: { classPropertyName: "lastInRow", publicName: "lastInRow", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, rowUid: { classPropertyName: "rowUid", publicName: "rowUid", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", toggle: "toggle" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "focused() ? 0 : -1", "attr.aria-colindex": "ariaColIndex()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLogicalCellDirective, decorators: [{
             type: Directive,
@@ -3847,7 +3890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-colindex]": "ariaColIndex()"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { cellKind: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellKind", required: false }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], columnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnId", required: false }] }], edit: [{ type: i0.Output, args: ["edit"] }], firstInRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstInRow", required: true }] }], groupHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupHeader", required: false }] }], groupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKey", required: false }] }], lastInRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastInRow", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], rowUid: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowUid", required: false }] }], section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }] } });
+        }], ctorParameters: () => [], propDecorators: { cellKind: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellKind", required: false }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], columnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnId", required: false }] }], edit: [{ type: i0.Output, args: ["edit"] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], firstInRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstInRow", required: true }] }], groupHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupHeader", required: false }] }], groupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKey", required: false }] }], lastInRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastInRow", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], rowUid: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowUid", required: false }] }], section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }] } });
 
 class ColumnReorderEvent extends PreventableEvent {
     #column;
@@ -4902,7 +4945,13 @@ class GridComponent {
             untracked(() => this.gridService.setRows(data, rowKey));
             if (shouldRestoreGridFocus) {
                 afterNextRender({
-                    read: () => this.#gridNavigationService.focusActiveCellOrFirstHeader()
+                    read: () => {
+                        // An open editor owns its own focus; restoring the logical cell would steal it.
+                        if (this.gridService.editContext() != null) {
+                            return;
+                        }
+                        this.#gridNavigationService.focusActiveCellOrFirstHeader();
+                    }
                 }, { injector: this.#injector });
             }
         });
@@ -5029,17 +5078,17 @@ class GridComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridComponent, isStandalone: true, selector: "mona-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, resizeMethod: { classPropertyName: "resizeMethod", publicName: "resizeMethod", isSignal: true, isRequired: false, transformFunction: null }, responsivePager: { classPropertyName: "responsivePager", publicName: "responsivePager", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "grid" }, properties: { "class": "baseClass()", "attr.data-uid": "uid" } }, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], queries: [{ propertyName: "columnDefinitions", predicate: GRID_COLUMN_DEFINITION, isSignal: true }, { propertyName: "gridDetailTemplate", first: true, predicate: GridDetailTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: GridNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: GridToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "footerScrollElement", first: true, predicate: ["footerScrollElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderElement", first: true, predicate: ["gridHeaderElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderTableElement", first: true, predicate: ["headerTable"], descendants: true, isSignal: true }, { propertyName: "groupColumnList", first: true, predicate: ["groupColumnList"], descendants: true, isSignal: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>Columns</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <i class=\"ri-arrow-down-line\"></i>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <i class=\"ri-arrow-up-line\"></i>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ml-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <i class=\"ri-more-2-fill\"></i>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-left-fill\"></i> Move as previous\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-right-fill\"></i> Move as next\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">Drag a column header here to group</span>\n        }\n    </div>\n}\n<div [class]=\"headerClass()\" [style.margin-right.px]=\"headerMarginRight()\" #gridHeaderElement>\n    <div>\n        <table #headerTable [class]=\"headerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n            <colgroup>\n                @for (_ of gridService.groupColumns(); track $index) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @if (gridService.masterDetailTemplate()) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @for (col of gridService.visibleColumns(); track $index) {\n                    <col [style.width.px]=\"col.calculatedWidth\" />\n                }\n            </colgroup>\n            <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                <tr\n                    cdkDropList\n                    [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                    (cdkDropListDropped)=\"onColumnDrop()\"\n                    [class]=\"headerTableRowClass()\">\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                    }\n                    @for (column of gridService.visibleColumns(); track $index) {\n                        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n                        <th\n                            scope=\"col\"\n                            role=\"columnheader\"\n                            cdkDrag\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [lockedCellHeader]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'header'\"\n                            [columnId]=\"column.id\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"colIndex\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"colIndex === 0\"\n                            [lastInRow]=\"\n                                colIndex ===\n                                gridService.visibleColumns().length - (gridService.masterDetailTemplate() ? 0 : 1)\n                            \"\n                            (toggle)=\"onColumnSort(column)\"\n                            [cdkDragData]=\"column\"\n                            [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                            [class]=\"headerTableCellClass()\"\n                            (mouseenter)=\"onColumnMouseEnter(column)\"\n                            (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                            (cdkDragStarted)=\"onColumnDragStart($event)\"\n                            [style.min-width.px]=\"column.minWidth\"\n                            [style.width.px]=\"column.calculatedWidth\"\n                            [attr.colspan]=\"1\"\n                            [attr.aria-sort]=\"\n                                gridService.sortableOptions().enabled\n                                    ? (column.columnSortDirection | columnAriaSort)\n                                    : null\n                            \">\n                            <div [class]=\"headerTableColumnWrapClass()\">\n                                @if (column.headerTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"column.headerTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                } @else if (column.titleTemplate) {\n                                    <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                } @else {\n                                    <span\n                                        [class]=\"headerTableColumnTitleClass()\"\n                                        (click)=\"onColumnSort(column)\"\n                                        [title]=\"column.title\"\n                                        >{{ column.title }}</span\n                                    >\n                                }\n\n                                <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                    @if (gridService.sortableOptions().showIndices && column.sortIndex !== null) {\n                                        <span>{{ column.sortIndex }}</span>\n                                    }\n                                    @if (column.columnSortDirection === \"asc\") {\n                                        <i class=\"ri-arrow-down-line\"></i>\n                                    } @else if (column.columnSortDirection === \"desc\") {\n                                        <i class=\"ri-arrow-up-line\"></i>\n                                    }\n                                    @if (filterMenuEnabled()) {\n                                        @if (column.kind === \"data\") {\n                                            <mona-grid-filter-menu\n                                                [column]=\"column\"\n                                                [type]=\"column.dataType\"\n                                                (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                        }\n                                    }\n                                </div>\n                            </div>\n                            @if (\n                                dropColumn() === column &&\n                                dragColumn() &&\n                                gridService.reorderableOptions().enabled &&\n                                !groupingInProgress()\n                            ) {\n                                <span [class]=\"columnDropHintClass()\"> </span>\n                            }\n                            @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                <div\n                                    monaGridColumnResizeHandler\n                                    [column]=\"column\"\n                                    [class]=\"columnResizerClass()\"\n                                    (resizeStart)=\"onColumnResizeStart()\"\n                                    (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                            }\n                            <ng-template cdkDragPreview>\n                                <div [class]=\"columnDragPreviewClass()\">\n                                    <span>{{ column.title }}</span>\n                                </div>\n                            </ng-template>\n                            <ng-template cdkDragPlaceholder>\n                                @if (groupingInProgress()) {\n                                    <mona-chip\n                                        style=\"z-index: 10; pointer-events: none\"\n                                        [removable]=\"true\"\n                                        [rounded]=\"rounded()\"\n                                        >{{ column.title }}</mona-chip\n                                    >\n                                }\n                            </ng-template>\n                        </th>\n                        @if (columnDragging() && dragColumn() === column) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [class]=\"headerTableCellClass()\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"column.calculatedWidth\">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                    } @else if (column.titleTemplate) {\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                    } @else {\n                                        <span\n                                            [class]=\"headerTableColumnTitleClass()\"\n                                            (click)=\"onColumnSort(column)\"\n                                            [title]=\"column.title\"\n                                            >{{ column.title }}</span\n                                        >\n                                    }\n                                </div>\n                            </th>\n                        }\n                    }\n                </tr>\n                @if (filterRowEnabled()) {\n                    <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                scope=\"col\"\n                                class=\"border-r border-border overflow-hidden\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.aria-label]=\"'Filter by ' + column.title\">\n                                @if (column.kind === \"data\" && column.field) {\n                                    <mona-grid-filter-row-cell\n                                        [column]=\"column\"\n                                        (apply)=\"onColumnFilter(column, $event)\" />\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n            </thead>\n        </table>\n    </div>\n</div>\n\n@defer (when gridWidthSet()) {\n    @if (gridService.virtualScrollOptions().enabled) {\n        @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-virtual-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewRows()\"></mona-grid-virtual-list>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    } @else {\n        @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewPageRows()\"></mona-grid-list>\n            @if (footerVisible()) {\n                <div\n                    [class]=\"footerClass()\"\n                    [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\n                    #footerScrollElement\n                    data-grid-footer-scroll>\n                    <div>\n                        <table [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n                            <colgroup>\n                                @for (_ of gridService.groupColumns(); track $index) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @if (gridService.masterDetailTemplate()) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @for (col of gridService.visibleColumns(); track $index) {\n                                    <col [style.width.px]=\"col.calculatedWidth\" />\n                                }\n                            </colgroup>\n                            <tfoot role=\"rowgroup\">\n                                <tr [class]=\"footerTableRowClass()\">\n                                    @for (_ of gridService.groupColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                            [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                                    }\n                                    @if (gridService.masterDetailTemplate()) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"\n                                                gridService.groupColumns().length * gridService.groupColumnWidth\n                                            \"\n                                            [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                                    }\n                                    @for (column of gridService.visibleColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [column]=\"column\"\n                                            [lockedCellHeader]=\"true\"\n                                            [footerColumn]=\"column\">\n                                            <mona-grid-footer-cell\n                                                [column]=\"column\"\n                                                [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                                        </td>\n                                    }\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            }\n            <mona-pager\n                class=\"border-0 border-t border-t-border rounded-tl-none rounded-tr-none\"\n                [skip]=\"gridService.paginationState().skip\"\n                [pageSize]=\"gridService.paginationState().take\"\n                [total]=\"gridService.viewRowCount()\"\n                [size]=\"'small'\"\n                [rounded]=\"rounded()\"\n                [pageInput]=\"true\"\n                [pageSizeValues]=\"pageSizeValues()\"\n                [responsive]=\"responsivePager()\"\n                (pageSizeChange)=\"onPageSizeChange($event)\"\n                (pageChange)=\"onPageChange($event)\"></mona-pager>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    }\n} @placeholder {\n    <mona-placeholder text=\"Loading...\"></mona-placeholder>\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder text=\"No data\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridFilterMenuComponent, selector: "mona-grid-filter-menu", inputs: ["column", "type"], outputs: ["apply"] }, { kind: "component", type: GridFilterRowCellComponent, selector: "mona-grid-filter-row-cell", inputs: ["column"], outputs: ["apply"] }, { kind: "directive", type: GridColumnResizeHandlerDirective, selector: "[monaGridColumnResizeHandler]", inputs: ["column"], outputs: ["resizeEnd", "resizeStart"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "component", type: PopupMenuItemComponent, selector: "mona-popup-menu-item", inputs: ["disabled", "label"], outputs: ["menuClick"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "lockedCellHeader", "lockedStructuralOffset"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupComponent, selector: "mona-popup", inputs: ["anchor", "anchorConnectionPoint", "animation", "backdropClass", "closeOnBackdropClick", "closeOnEscape", "closeOnMouseLeave", "closeOnOutsideClick", "data", "hasBackdrop", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "offset", "popupClass", "popupConnectionPoint", "popupWrapperClass", "positionStrategy", "positions", "preventClose", "providers", "trigger", "width", "withPush", "closeOnScroll", "restoreFocus", "withScrollTracking"], outputs: ["close", "open"] }, { kind: "component", type: GridColumnChooserComponent, selector: "mona-grid-column-chooser", outputs: ["apply", "cancel"] }, { kind: "pipe", type: ColumnAriaSortPipe, name: "columnAriaSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-5-9r0o20.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-list.component-D6GBsZr8.mjs').then(m => m.GridListComponent), PagerComponent, /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-0vCJC8II.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Ib52xf0V.mjs').then(m => m.GridFooterTableCellDirective), GridLockedCellDirective]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridComponent, isStandalone: true, selector: "mona-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, resizeMethod: { classPropertyName: "resizeMethod", publicName: "resizeMethod", isSignal: true, isRequired: false, transformFunction: null }, responsivePager: { classPropertyName: "responsivePager", publicName: "responsivePager", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "grid" }, properties: { "class": "baseClass()", "attr.data-uid": "uid" } }, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], queries: [{ propertyName: "columnDefinitions", predicate: GRID_COLUMN_DEFINITION, isSignal: true }, { propertyName: "gridDetailTemplate", first: true, predicate: GridDetailTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: GridNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: GridToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "footerScrollElement", first: true, predicate: ["footerScrollElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderElement", first: true, predicate: ["gridHeaderElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderTableElement", first: true, predicate: ["headerTable"], descendants: true, isSignal: true }, { propertyName: "groupColumnList", first: true, predicate: ["groupColumnList"], descendants: true, isSignal: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>Columns</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <i class=\"ri-arrow-down-line\"></i>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <i class=\"ri-arrow-up-line\"></i>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ml-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <i class=\"ri-more-2-fill\"></i>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-left-fill\"></i> Move as previous\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-right-fill\"></i> Move as next\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">Drag a column header here to group</span>\n        }\n    </div>\n}\n<div [class]=\"headerClass()\" [style.margin-right.px]=\"headerMarginRight()\" #gridHeaderElement>\n    <div>\n        <table #headerTable [class]=\"headerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n            <colgroup>\n                @for (_ of gridService.groupColumns(); track $index) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @if (gridService.masterDetailTemplate()) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @for (col of gridService.visibleColumns(); track $index) {\n                    <col [style.width.px]=\"col.calculatedWidth\" />\n                }\n            </colgroup>\n            <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                <tr\n                    cdkDropList\n                    [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                    (cdkDropListDropped)=\"onColumnDrop()\"\n                    [class]=\"headerTableRowClass()\">\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                    }\n                    @for (column of gridService.visibleColumns(); track $index) {\n                        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n                        <th\n                            scope=\"col\"\n                            role=\"columnheader\"\n                            cdkDrag\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [lockedCellHeader]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'header'\"\n                            [columnId]=\"column.id\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"colIndex\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"colIndex === 0\"\n                            [lastInRow]=\"\n                                colIndex ===\n                                gridService.visibleColumns().length - (gridService.masterDetailTemplate() ? 0 : 1)\n                            \"\n                            (toggle)=\"onColumnSort(column)\"\n                            [cdkDragData]=\"column\"\n                            [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                            [class]=\"headerTableCellClass()\"\n                            (mouseenter)=\"onColumnMouseEnter(column)\"\n                            (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                            (cdkDragStarted)=\"onColumnDragStart($event)\"\n                            [style.min-width.px]=\"column.minWidth\"\n                            [style.width.px]=\"column.calculatedWidth\"\n                            [attr.colspan]=\"1\"\n                            [attr.aria-sort]=\"\n                                gridService.sortableOptions().enabled\n                                    ? (column.columnSortDirection | columnAriaSort)\n                                    : null\n                            \">\n                            <div [class]=\"headerTableColumnWrapClass()\">\n                                @if (column.headerTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"column.headerTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                } @else if (column.titleTemplate) {\n                                    <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                } @else {\n                                    <span\n                                        [class]=\"headerTableColumnTitleClass()\"\n                                        (click)=\"onColumnSort(column)\"\n                                        [title]=\"column.title\"\n                                        >{{ column.title }}</span\n                                    >\n                                }\n\n                                <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                    @if (gridService.sortableOptions().showIndices && column.sortIndex !== null) {\n                                        <span>{{ column.sortIndex }}</span>\n                                    }\n                                    @if (column.columnSortDirection === \"asc\") {\n                                        <i class=\"ri-arrow-down-line\"></i>\n                                    } @else if (column.columnSortDirection === \"desc\") {\n                                        <i class=\"ri-arrow-up-line\"></i>\n                                    }\n                                    @if (filterMenuEnabled()) {\n                                        @if (column.kind === \"data\") {\n                                            <mona-grid-filter-menu\n                                                [column]=\"column\"\n                                                [type]=\"column.dataType\"\n                                                (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                        }\n                                    }\n                                </div>\n                            </div>\n                            @if (\n                                dropColumn() === column &&\n                                dragColumn() &&\n                                gridService.reorderableOptions().enabled &&\n                                !groupingInProgress()\n                            ) {\n                                <span [class]=\"columnDropHintClass()\"> </span>\n                            }\n                            @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                <div\n                                    monaGridColumnResizeHandler\n                                    [column]=\"column\"\n                                    [class]=\"columnResizerClass()\"\n                                    (resizeStart)=\"onColumnResizeStart()\"\n                                    (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                            }\n                            <ng-template cdkDragPreview>\n                                <div [class]=\"columnDragPreviewClass()\">\n                                    <span>{{ column.title }}</span>\n                                </div>\n                            </ng-template>\n                            <ng-template cdkDragPlaceholder>\n                                @if (groupingInProgress()) {\n                                    <mona-chip\n                                        style=\"z-index: 10; pointer-events: none\"\n                                        [removable]=\"true\"\n                                        [rounded]=\"rounded()\"\n                                        >{{ column.title }}</mona-chip\n                                    >\n                                }\n                            </ng-template>\n                        </th>\n                        @if (columnDragging() && dragColumn() === column) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [class]=\"headerTableCellClass()\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"column.calculatedWidth\">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                    } @else if (column.titleTemplate) {\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                    } @else {\n                                        <span\n                                            [class]=\"headerTableColumnTitleClass()\"\n                                            (click)=\"onColumnSort(column)\"\n                                            [title]=\"column.title\"\n                                            >{{ column.title }}</span\n                                        >\n                                    }\n                                </div>\n                            </th>\n                        }\n                    }\n                </tr>\n                @if (filterRowEnabled()) {\n                    <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                scope=\"col\"\n                                class=\"border-r border-border overflow-hidden\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.aria-label]=\"'Filter by ' + column.title\">\n                                @if (column.kind === \"data\" && column.field) {\n                                    <mona-grid-filter-row-cell\n                                        [column]=\"column\"\n                                        (apply)=\"onColumnFilter(column, $event)\" />\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n            </thead>\n        </table>\n    </div>\n</div>\n\n@defer (when gridWidthSet()) {\n    @if (gridService.virtualScrollOptions().enabled) {\n        @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-virtual-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewRows()\"></mona-grid-virtual-list>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    } @else {\n        @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewPageRows()\"></mona-grid-list>\n            @if (footerVisible()) {\n                <div\n                    [class]=\"footerClass()\"\n                    [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\n                    #footerScrollElement\n                    data-grid-footer-scroll>\n                    <div>\n                        <table [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n                            <colgroup>\n                                @for (_ of gridService.groupColumns(); track $index) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @if (gridService.masterDetailTemplate()) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @for (col of gridService.visibleColumns(); track $index) {\n                                    <col [style.width.px]=\"col.calculatedWidth\" />\n                                }\n                            </colgroup>\n                            <tfoot role=\"rowgroup\">\n                                <tr [class]=\"footerTableRowClass()\">\n                                    @for (_ of gridService.groupColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                            [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                                    }\n                                    @if (gridService.masterDetailTemplate()) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"\n                                                gridService.groupColumns().length * gridService.groupColumnWidth\n                                            \"\n                                            [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                                    }\n                                    @for (column of gridService.visibleColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [column]=\"column\"\n                                            [lockedCellHeader]=\"true\"\n                                            [footerColumn]=\"column\">\n                                            <mona-grid-footer-cell\n                                                [column]=\"column\"\n                                                [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                                        </td>\n                                    }\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            }\n            <mona-pager\n                class=\"border-0 border-t border-t-border rounded-tl-none rounded-tr-none\"\n                [skip]=\"gridService.paginationState().skip\"\n                [pageSize]=\"gridService.paginationState().take\"\n                [total]=\"gridService.viewRowCount()\"\n                [size]=\"'small'\"\n                [rounded]=\"rounded()\"\n                [pageInput]=\"true\"\n                [pageSizeValues]=\"pageSizeValues()\"\n                [responsive]=\"responsivePager()\"\n                (pageSizeChange)=\"onPageSizeChange($event)\"\n                (pageChange)=\"onPageChange($event)\"></mona-pager>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    }\n} @placeholder {\n    <mona-placeholder text=\"Loading...\"></mona-placeholder>\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder text=\"No data\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridFilterMenuComponent, selector: "mona-grid-filter-menu", inputs: ["column", "type"], outputs: ["apply"] }, { kind: "component", type: GridFilterRowCellComponent, selector: "mona-grid-filter-row-cell", inputs: ["column"], outputs: ["apply"] }, { kind: "directive", type: GridColumnResizeHandlerDirective, selector: "[monaGridColumnResizeHandler]", inputs: ["column"], outputs: ["resizeEnd", "resizeStart"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "component", type: PopupMenuItemComponent, selector: "mona-popup-menu-item", inputs: ["disabled", "label"], outputs: ["menuClick"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "lockedCellHeader", "lockedStructuralOffset"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupComponent, selector: "mona-popup", inputs: ["anchor", "anchorConnectionPoint", "animation", "backdropClass", "closeOnBackdropClick", "closeOnEscape", "closeOnMouseLeave", "closeOnOutsideClick", "data", "hasBackdrop", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "offset", "popupClass", "popupConnectionPoint", "popupWrapperClass", "positionStrategy", "positions", "preventClose", "providers", "trigger", "width", "withPush", "closeOnScroll", "restoreFocus", "withScrollTracking"], outputs: ["close", "open"] }, { kind: "component", type: GridColumnChooserComponent, selector: "mona-grid-column-chooser", outputs: ["apply", "cancel"] }, { kind: "pipe", type: ColumnAriaSortPipe, name: "columnAriaSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-C6M8hmzY.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-list.component-DTqG52dg.mjs').then(m => m.GridListComponent), PagerComponent, /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-BcTk4OPK.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-BwwDwf6_.mjs').then(m => m.GridFooterTableCellDirective), GridLockedCellDirective]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ngImport: i0, type: GridComponent, resolveDeferredDeps: () => [/* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-5-9r0o20.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-list.component-D6GBsZr8.mjs').then(m => m.GridListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-0vCJC8II.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Ib52xf0V.mjs').then(m => m.GridFooterTableCellDirective)], resolveMetadata: (GridFooterCellComponent, GridListComponent, GridVirtualListComponent, GridFooterTableCellDirective) => ({ decorators: [{
+        import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-C6M8hmzY.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-list.component-DTqG52dg.mjs').then(m => m.GridListComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-BcTk4OPK.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-BwwDwf6_.mjs').then(m => m.GridFooterTableCellDirective)], resolveMetadata: (GridFooterCellComponent, GridListComponent, GridVirtualListComponent, GridFooterTableCellDirective) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: "mona-grid", changeDetection: ChangeDetectionStrategy.OnPush, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], imports: [
                             CdkDropList,
@@ -5082,4 +5131,4 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
  */
 
 export { GridSortableDirective as $, GridCellTemplateDirective as A, GridColumnComponent as B, CellEditEvent as C, GridColumnTitleTemplateDirective as D, GridCommandColumnComponent as E, GridComponent as F, GridNavigationService as G, GridContextMenuDirective as H, GridDetailTemplateDirective as I, GridEditCommandDirective as J, GridEditEvent as K, GridEditTemplateDirective as L, GridEditableDirective as M, GridExportDirective as N, GridFilterableDirective as O, GridFooterTemplateDirective as P, GridGroupFooterTemplateDirective as Q, GridGroupableDirective as R, GridHeaderTemplateDirective as S, GridNoDataTemplateDirective as T, GridRemoveCommandDirective as U, GridRemoveEvent as V, GridReorderableDirective as W, GridResizableDirective as X, GridSaveCommandDirective as Y, GridSaveEvent as Z, GridSelectableDirective as _, GridRowFlattenerService as a, GridStatePersistenceDirective as a0, GridToolbarTemplateDirective as a1, GridVirtualScrollDirective as a2, RowEditEvent as a3, gridFooterTableRowThemeVariants as b, GridService as c, gridGroupRowThemeVariants as d, gridListTableThemeVariants as e, GridLogicalCellDirective as f, gridListBaseThemeVariants as g, GridLockedCellDirective as h, gridFooterThemeVariants as i, gridFooterTableThemeVariants as j, gridListTableCellThemeVariants as k, gridDetailContentCellThemeVariants as l, gridDetailIndentCellThemeVariants as m, gridDetailRowThemeVariants as n, gridListTableRowThemeVariants as o, gridCellEditorBaseThemeVariants as p, gridCellEditorInputThemeVariants as q, gridCellBaseThemeVariants as r, gridCellContainerThemeVariants as s, gridCellDirtyIndicatorThemeVariants as t, gridCellTextThemeVariants as u, gridFooterTableCellThemeVariants as v, GridAddCommandDirective as w, GridAddEvent as x, GridCancelCommandDirective as y, GridCancelEvent as z };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-qsRN5qZF.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CvCis4-I.mjs.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {