@nanahoshi/mona-ui 0.20.0 → 0.21.0

package/fesm2022/nanahoshi-mona-ui-grid-grid-virtual-list.component-xc8ybFkY.mjs

@@ -0,0 +1,239 @@
+import { G as GridNavigationService, c as GridService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, k as gridFooterThemeVariants, l as gridFooterTableThemeVariants, b as gridFooterTableRowThemeVariants, d as gridGroupRowThemeVariants, h as gridListTableThemeVariants, m as GRID_DEFAULT_VIRTUAL_ROW_HEIGHT, i as GridLogicalCellDirective, j as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BGfDw6_5.mjs';
+import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, ElementRef, Injector, viewChild, computed, input, effect, untracked, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ImmutableList } from '@mirei/ts-collections';
+import { SlicePipe } from '@nanahoshi/mona-ui/common';
+import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
+import { rxTimeout } from '@nanahoshi/mona-ui/internal';
+import { fromEvent } from 'rxjs';
+import { G as GridAddRowComponent, a as GridCellComponent, b as GridRowDirective, c as GridCellDirective, d as GridDetailRowDirective, e as GridDetailIndentCellDirective, f as GridDetailContentCellDirective, g as GridToggleComponent, h as GridSelectionCheckboxComponent, i as GridRowReorderHandleComponent } from './nanahoshi-mona-ui-grid-grid-toggle.component-DFMbXpKb.mjs';
+import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Bu093U9J.mjs';
+import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-ZdcR20RJ.mjs';
+
+class GridVirtualListComponent {
+    #destroyRef;
+    #gridNavigationService;
+    #groupColumns$;
+    #hostElementRef;
+    #injector;
+    #rowFlattener;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#gridNavigationService = inject(GridNavigationService);
+        this.#groupColumns$ = toObservable(inject(GridService).groupColumns);
+        this.#hostElementRef = inject((ElementRef));
+        this.#injector = inject(Injector);
+        this.#rowFlattener = inject(GridRowFlattenerService);
+        this.addRowScrollElementRef = viewChild("addRowScrollElement", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addRowScrollElementRef" }] : /* istanbul ignore next */ []));
+        this.bodyTableElementRef = viewChild.required("bodyTable", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bodyTableElementRef" }] : /* istanbul ignore next */ []));
+        this.footerScrollElementRef = viewChild("footerScrollElement", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerScrollElementRef" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            return (gridListBaseThemeVariants({ virtual: true }) +
+                " [&_mona-grid-toggle>span]:min-h-0 [&_mona-grid-toggle>span]:h-full" +
+                " [&_mona-grid-command-cell]:min-h-0 [&_mona-grid-command-cell>div]:min-h-0");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.flattenedGroupedRows = computed(() => {
+            const groupColumns = this.gridService.groupColumns();
+            if (groupColumns.length === 0) {
+                return [];
+            }
+            const collapsedKeys = new Set(this.gridService.collapsedGroupKeys());
+            const groupAggregateDict = this.gridService.groupAggregateMap().toDictionary(e => e.key, e => e.value);
+            const showFooter = this.gridService.groupableOptions().showFooter;
+            return this.#rowFlattener.flatten(this.data(), groupColumns, collapsedKeys, showFooter, groupAggregateDict, this.gridService.serverBindingEnabled());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "flattenedGroupedRows" }] : /* istanbul ignore next */ []));
+        this.footerClass = computed(() => {
+            return gridFooterThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
+        this.footerTableClass = computed(() => {
+            return gridFooterTableThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerTableClass" }] : /* istanbul ignore next */ []));
+        this.footerTableRowClass = computed(() => {
+            return gridFooterTableRowThemeVariants({ virtual: true });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerTableRowClass" }] : /* istanbul ignore next */ []));
+        this.gridService = inject(GridService);
+        this.groupRowClass = computed(() => {
+            return gridGroupRowThemeVariants({ virtual: true });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupRowClass" }] : /* istanbul ignore next */ []));
+        this.tableClass = computed(() => {
+            return gridListTableThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
+        this.viewport = viewChild.required(CdkVirtualScrollViewport, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+        this.columns = input(ImmutableList.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.data = input(ImmutableList.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const footerScrollElement = this.footerScrollElementRef()?.nativeElement ?? null;
+            untracked(() => this.gridService.footerScrollElement.set(footerScrollElement));
+        });
+        effect(() => {
+            const addRowScrollElement = this.addRowScrollElementRef()?.nativeElement ?? null;
+            const scrollLeft = this.gridService.horizontalScrollLeft();
+            untracked(() => this.setElementScrollLeft(addRowScrollElement, scrollLeft));
+        });
+        afterNextRender({
+            read: () => {
+                const bodyTableElement = this.bodyTableElementRef().nativeElement;
+                const bodyScrollElement = this.#hostElementRef.nativeElement.querySelector(".cdk-virtual-scroll-viewport");
+                this.gridService.bodyTableElement.set(bodyTableElement);
+                this.gridService.bodyScrollElement.set(bodyScrollElement);
+                this.setFocusSubscription();
+                this.setScrollEndSubscription();
+                this.#destroyRef.onDestroy(() => {
+                    if (this.gridService.bodyTableElement() === bodyTableElement) {
+                        this.gridService.bodyTableElement.set(null);
+                    }
+                    if (bodyScrollElement != null && this.gridService.bodyScrollElement() === bodyScrollElement) {
+                        this.gridService.bodyScrollElement.set(null);
+                    }
+                    if (this.gridService.footerScrollElement() === this.footerScrollElementRef()?.nativeElement) {
+                        this.gridService.footerScrollElement.set(null);
+                    }
+                });
+            }
+        });
+        this.setGroupSubscriptions();
+        this.setSelectedKeysLoadSubscription();
+    }
+    onGridRowClick(event, row) {
+        this.gridService.handleRowClick(event, row);
+    }
+    onGroupExpandChange(groupKey) {
+        this.gridService.toggleGroupCollapse(groupKey);
+    }
+    onToggleDetailClick(row) {
+        this.gridService.setRowExpanded(row, !this.gridService.isRowExpanded(row));
+    }
+    onViewportFocus() {
+        this.#gridNavigationService.focusActiveCellOrFirstHeader();
+    }
+    setElementScrollLeft(element, scrollLeft) {
+        if (element != null && element.scrollLeft !== scrollLeft) {
+            element.scrollLeft = scrollLeft;
+        }
+    }
+    setFocusSubscription() {
+        fromEvent(this.#hostElementRef.nativeElement, "focus")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => {
+            this.#gridNavigationService.focusActiveCellOrFirstHeader();
+        });
+    }
+    setGroupSubscriptions() {
+        // Workaround for @angular/components issue #21793 — virtual scroll does not update
+        // the rendered range when data changes until the user scrolls.
+        this.#groupColumns$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            afterNextRender(() => {
+                const renderedRange = this.viewport().getRenderedRange();
+                this.viewport().setRenderedRange({
+                    start: renderedRange.start,
+                    end: renderedRange.end + 1
+                });
+            }, { injector: this.#injector });
+        });
+    }
+    setScrollEndSubscription() {
+        const viewport = this.viewport();
+        viewport.scrolledIndexChange.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            const bottomOffset = viewport.measureScrollOffset("bottom");
+            const itemHeight = this.gridService.virtualScrollOptions().height ?? GRID_DEFAULT_VIRTUAL_ROW_HEIGHT;
+            const threshold = this.gridService.scrollEndThreshold();
+            if (bottomOffset <= threshold * itemHeight) {
+                this.gridService.scrollEnd$.next();
+            }
+        });
+    }
+    setSelectedKeysLoadSubscription() {
+        this.gridService.selectedKeysLoad$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(selectedKeys => {
+            const firstKey = selectedKeys.firstOrDefault();
+            if (firstKey == null) {
+                return;
+            }
+            const selectBy = this.gridService.selectBy();
+            if (this.gridService.groupColumns().any()) {
+                const viewData = this.flattenedGroupedRows();
+                const selectedRow = viewData.find(r => {
+                    if (r.type !== "data" || selectBy == null) {
+                        return false;
+                    }
+                    if (typeof selectBy === "string") {
+                        return r.row.data[selectBy] === firstKey;
+                    }
+                    return selectBy(r.row.data) === firstKey;
+                });
+                if (selectedRow != null) {
+                    const index = viewData.indexOf(selectedRow);
+                    rxTimeout(this.#destroyRef, () => {
+                        this.viewport().scrollToIndex(index);
+                    });
+                }
+            }
+            else {
+                const viewData = this.data().toImmutableList();
+                const selectedRow = viewData.firstOrDefault(r => {
+                    if (selectBy == null) {
+                        return false;
+                    }
+                    if (typeof selectBy === "string") {
+                        return r.data[selectBy] === firstKey;
+                    }
+                    return selectBy(r.data) === firstKey;
+                });
+                if (selectedRow != null) {
+                    const index = viewData.indexOf(selectedRow);
+                    rxTimeout(this.#destroyRef, () => {
+                        this.viewport().scrollToIndex(index);
+                    });
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridVirtualListComponent, isStandalone: true, selector: "mona-grid-virtual-list", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()", "style.--mona-grid-row-height": "gridService.virtualScrollOptions().height + 'px'" } }, viewQueries: [{ propertyName: "addRowScrollElementRef", first: true, predicate: ["addRowScrollElement"], descendants: true, isSignal: true }, { propertyName: "bodyTableElementRef", first: true, predicate: ["bodyTable"], descendants: true, isSignal: true }, { propertyName: "footerScrollElementRef", first: true, predicate: ["footerScrollElement"], descendants: true, isSignal: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: "@if (gridService.addRowVisible()) {\n    <div\n        class=\"shrink-0 overflow-hidden border-b border-b-border\"\n        [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\n        #addRowScrollElement>\n        <table role=\"presentation\" [class]=\"tableClass()\" [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 columns(); track $index) {\n                    <col [style.width.px]=\"col.calculatedWidth\" />\n                }\n            </colgroup>\n            <tbody role=\"rowgroup\">\n                <tr monaGridAddRow [columns]=\"columns()\"></tr>\n            </tbody>\n        </table>\n    </div>\n}\n\n<cdk-virtual-scroll-viewport\n    class=\"flex-1 min-h-0\"\n    [itemSize]=\"gridService.virtualScrollOptions().height\"\n    [minBufferPx]=\"gridService.virtualGridMinBuffer()\"\n    [maxBufferPx]=\"gridService.virtualGridMaxBuffer()\">\n    <table role=\"presentation\" #bodyTable [class]=\"tableClass()\" [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 columns(); track $index) {\n                <col [style.width.px]=\"col.calculatedWidth\" />\n            }\n        </colgroup>\n        <tbody role=\"rowgroup\" tabindex=\"0\" (focus)=\"onViewportFocus()\">\n            @if (gridService.groupColumns().length === 0) {\n                <ng-container *cdkVirtualFor=\"let row of data(); let rowIndex = index\">\n                    <tr\n                        monaGridRow\n                        [index]=\"rowIndex\"\n                        [row]=\"row\"\n                        (click)=\"onGridRowClick($event, row)\"\n                        #gridRow=\"monaGridRow\"\n                        #rowElement>\n                        @if (gridService.rowReorderColumnVisible()) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                monaGridLogicalCell\n                                [structuralColumn]=\"'reorder'\"\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$rowReorder'\"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"row.uid\"\n                                [section]=\"'body'\"\n                                [colIndex]=\"gridService.structuralColIndexMap().get('reorder') ?? 0\"\n                                [firstInRow]=\"gridService.structuralColIndexMap().get('reorder') === 0\"\n                                [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'reorder'\"\n                                [style.width.px]=\"gridService.rowReorderColumnWidth\"\n                                [attr.colspan]=\"1\">\n                                <mona-grid-row-reorder-handle [row]=\"row\" [pageIndex]=\"rowIndex\" />\n                            </td>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [structuralColumn]=\"'detail'\"\n                                [masterDetailToggle]=\"true\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'detail'\"\n                                (toggleExpand)=\"onToggleDetailClick(row)\"\n                                [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n                                [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n                                [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'detail'\"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"row.uid\"\n                                [section]=\"'body'\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"\n                                [attr.colspan]=\"1\">\n                                <span class=\"flex h-full w-full items-stretch justify-center\">\n                                    <mona-grid-toggle\n                                        [expanded]=\"gridRow.expanded()\"\n                                        [type]=\"'detail'\"\n                                        [width]=\"gridService.detailColumnWidth\"\n                                        (expandedChange)=\"onToggleDetailClick(row)\"></mona-grid-toggle>\n                                </span>\n                            </td>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [structuralColumn]=\"'selection'\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$selection'\"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"row.uid\"\n                                [section]=\"'body'\"\n                                [colIndex]=\"gridService.structuralColIndexMap().get('selection') ?? 0\"\n                                [firstInRow]=\"gridService.structuralColIndexMap().get('selection') === 0\"\n                                [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'selection'\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\"\n                                [attr.colspan]=\"1\">\n                                <mona-grid-selection-checkbox [row]=\"row\" [rowIndex]=\"rowIndex\" />\n                            </td>\n                        }\n                        @for (column of columns(); track $index) {\n                            @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [dataCell]=\"true\"\n                                monaGridLogicalCell\n                                [cellKind]=\"column.kind\"\n                                [colIndex]=\"colIndex\"\n                                [columnId]=\"column.id\"\n                                [editable]=\"\n                                    gridService.editableOptions().enabled === true &&\n                                    gridService.editableOptions().mode === 'cell' &&\n                                    column.kind === 'data' &&\n                                    column.editable === true\n                                \"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"row.uid\"\n                                [section]=\"'body'\"\n                                [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                                [lastInRow]=\"\n                                    colIndex === gridService.leadingLogicalColumnCount() + columns().length - 1\n                                \"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                (edit)=\"gridCell.handleLogicalCellEnter()\">\n                                <mona-grid-cell #gridCell [column]=\"column\" [row]=\"row\"></mona-grid-cell>\n                            </td>\n                        }\n                        @if (gridService.contextMenuItems().length !== 0) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"contextMenuTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: row.data,\n                                    element: rowElement,\n                                    index: rowIndex\n                                }\">\n                            </ng-container>\n                        }\n                    </tr>\n                    @if (gridRow.expanded() && !gridService.rowDragInProgress()) {\n                        <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n                            @if (gridService.rowReorderColumnVisible()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [structuralColumn]=\"'reorder'\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n                            }\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"gridService.rowReorderStructuralWidth()\"\n                                [indentCell]=\"true\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n                            @if (gridService.selectionColumnVisible()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [structuralColumn]=\"'selection'\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n                            }\n                            <td monaGridCell [masterDetailContent]=\"true\" [attr.colspan]=\"columns().length\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: row.data }\"></ng-container>\n                            </td>\n                        </tr>\n                    }\n                </ng-container>\n            } @else {\n                <ng-container *cdkVirtualFor=\"let rowItem of flattenedGroupedRows(); let rowIndex = index\">\n                    @if (rowItem.type === \"group\") {\n                        @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n                        @let isCollapsed = gridService.isGroupCollapsed(rowItem.groupKey);\n                        <tr\n                            [class]=\"groupRowClass()\"\n                            role=\"row\"\n                            [attr.aria-level]=\"rowItem.depth + 1\"\n                            [attr.aria-expanded]=\"!isCollapsed\">\n                            @for (_ of gridService.groupColumns() | monaSlice: 0 : rowItem.depth; track $index) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                    [grouped]=\"true\"\n                                    [indentCell]=\"true\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                            }\n                            @if (gridService.rowReorderColumnVisible()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'reorder'\"\n                                    [groupPrefixWidth]=\"rowItem.depth * gridService.groupColumnWidth\"\n                                    [grouped]=\"true\"\n                                    [indentCell]=\"true\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n                            }\n\n                            @let colspan =\n                                columns().length +\n                                gridService.groupColumns().length +\n                                (gridService.masterDetailTemplate() ? 1 : 0) +\n                                (gridService.selectionColumnVisible() ? 1 : 0) -\n                                rowItem.depth +\n                                1;\n\n                            <td\n                                monaGridCell\n                                monaGridLogicalCell\n                                [cellKind]=\"'group'\"\n                                [rowIndex]=\"rowIndex\"\n                                [colIndex]=\"0\"\n                                [section]=\"'body'\"\n                                [grouped]=\"true\"\n                                [groupHeader]=\"true\"\n                                [prevRowType]=\"prevRow?.type\"\n                                [firstInRow]=\"true\"\n                                [lastInRow]=\"columns().length === 0\"\n                                [groupKey]=\"rowItem.groupKey\"\n                                [attr.colspan]=\"colspan\"\n                                (toggleExpand)=\"onGroupExpandChange(rowItem.groupKey)\">\n                                <p class=\"absolute inset-0 flex items-center text-sm whitespace-nowrap overflow-hidden\">\n                                    <mona-grid-toggle\n                                        [expanded]=\"!isCollapsed\"\n                                        [width]=\"gridService.groupColumnWidth\"\n                                        [type]=\"'group'\"\n                                        (expandedChange)=\"onGroupExpandChange(rowItem.groupKey)\"></mona-grid-toggle>\n                                    <span class=\"font-bold\">{{ rowItem.title }}: {{ rowItem.groupValue }}</span>\n                                </p>\n                            </td>\n                        </tr>\n                    } @else if (rowItem.type === \"groupFooter\") {\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 columns(); 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\"\n                                        [groupKey]=\"rowItem.groupAggregate.groupKey\"></mona-grid-footer-cell>\n                                </td>\n                            }\n                        </tr>\n                    } @else if (rowItem.type === \"data\") {\n                        @let nextRow = flattenedGroupedRows()[rowIndex + 1];\n                        @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n                        <tr\n                            (click)=\"onGridRowClick($event, rowItem.row)\"\n                            monaGridRow\n                            [index]=\"rowIndex\"\n                            [row]=\"rowItem.row\"\n                            #gridRow=\"monaGridRow\"\n                            #rowElement>\n                            @for (_ of gridService.groupColumns(); track $index) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                    [grouped]=\"true\"\n                                    [indentCell]=\"true\"\n                                    [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                            }\n                            @if (gridService.rowReorderColumnVisible()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    monaGridLogicalCell\n                                    [structuralColumn]=\"'reorder'\"\n                                    [grouped]=\"true\"\n                                    [cellKind]=\"'command'\"\n                                    [columnId]=\"'$rowReorder'\"\n                                    [prevRowType]=\"prevRow?.type\"\n                                    [nextRowType]=\"nextRow?.type\"\n                                    [rowIndex]=\"rowIndex\"\n                                    [rowUid]=\"rowItem.row.uid\"\n                                    [section]=\"'body'\"\n                                    [colIndex]=\"gridService.structuralColIndexMap().get('reorder') ?? 0\"\n                                    [firstInRow]=\"gridService.structuralColIndexMap().get('reorder') === 0\"\n                                    [lastInRow]=\"\n                                        columns().length === 0 && gridService.structuralLastKind() === 'reorder'\n                                    \"\n                                    [style.width.px]=\"gridService.rowReorderColumnWidth\">\n                                    <mona-grid-row-reorder-handle [row]=\"rowItem.row\" [pageIndex]=\"rowIndex\" />\n                                </td>\n                            }\n                            @if (gridService.masterDetailTemplate()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLogicalCell\n                                    monaGridLockedCell\n                                    [structuralColumn]=\"'detail'\"\n                                    [grouped]=\"true\"\n                                    [masterDetailToggle]=\"true\"\n                                    [prevRowType]=\"prevRow?.type\"\n                                    [nextRowType]=\"nextRow?.type\"\n                                    [rowIndex]=\"rowIndex\"\n                                    [rowUid]=\"rowItem.row.uid\"\n                                    [section]=\"'body'\"\n                                    [cellKind]=\"'detail'\"\n                                    (toggleExpand)=\"onToggleDetailClick(rowItem.row)\"\n                                    [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n                                    [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n                                    [lastInRow]=\"\n                                        columns().length === 0 && gridService.structuralLastKind() === 'detail'\n                                    \"\n                                    [style.width.px]=\"gridService.detailColumnWidth\">\n                                    <span class=\"flex h-full w-full items-stretch justify-center\">\n                                        <mona-grid-toggle\n                                            [expanded]=\"gridRow.expanded()\"\n                                            [type]=\"'detail'\"\n                                            [width]=\"gridService.detailColumnWidth\"\n                                            (expandedChange)=\"onToggleDetailClick(rowItem.row)\"></mona-grid-toggle>\n                                    </span>\n                                </td>\n                            }\n                            @if (gridService.selectionColumnVisible()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [structuralColumn]=\"'selection'\"\n                                    [grouped]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'command'\"\n                                    [columnId]=\"'$selection'\"\n                                    [prevRowType]=\"prevRow?.type\"\n                                    [nextRowType]=\"nextRow?.type\"\n                                    [rowIndex]=\"rowIndex\"\n                                    [rowUid]=\"rowItem.row.uid\"\n                                    [section]=\"'body'\"\n                                    [colIndex]=\"gridService.structuralColIndexMap().get('selection') ?? 0\"\n                                    [firstInRow]=\"gridService.structuralColIndexMap().get('selection') === 0\"\n                                    [lastInRow]=\"\n                                        columns().length === 0 && gridService.structuralLastKind() === 'selection'\n                                    \"\n                                    [style.width.px]=\"gridService.selectionColumnWidth\">\n                                    <mona-grid-selection-checkbox [row]=\"rowItem.row\" [rowIndex]=\"rowIndex\" />\n                                </td>\n                            }\n                            @for (column of columns(); track $index) {\n                                @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [column]=\"column\"\n                                    [grouped]=\"true\"\n                                    [dataCell]=\"true\"\n                                    [prevRowType]=\"prevRow?.type\"\n                                    [nextRowType]=\"nextRow?.type\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"column.kind\"\n                                    [colIndex]=\"colIndex\"\n                                    [columnId]=\"column.id\"\n                                    [editable]=\"\n                                        gridService.editableOptions().enabled === true &&\n                                        gridService.editableOptions().mode === 'cell' &&\n                                        column.kind === 'data' &&\n                                        column.editable === true\n                                    \"\n                                    [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                                    [lastInRow]=\"\n                                        colIndex === gridService.leadingLogicalColumnCount() + columns().length - 1\n                                    \"\n                                    [rowIndex]=\"rowIndex\"\n                                    [rowUid]=\"rowItem.row.uid\"\n                                    [section]=\"'body'\"\n                                    [style.width.px]=\"column.calculatedWidth\"\n                                    [style.min-width.px]=\"column.minWidth\"\n                                    (edit)=\"gridCell.handleLogicalCellEnter()\">\n                                    <mona-grid-cell #gridCell [column]=\"column\" [row]=\"rowItem.row\"></mona-grid-cell>\n                                </td>\n                            }\n                            @if (gridService.contextMenuItems().length !== 0) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"contextMenuTemplate\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: rowItem.row.data,\n                                        element: rowElement,\n                                        index: rowIndex\n                                    }\">\n                                </ng-container>\n                            }\n                        </tr>\n                        @if (gridRow.expanded() && !gridService.rowDragInProgress()) {\n                            <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n                                @for (\n                                    _ of gridService.groupColumns() | monaSlice: 0 : rowItem.depth + 1;\n                                    track $index\n                                ) {\n                                    <td\n                                        monaGridCell\n                                        monaGridLockedCell\n                                        [lockedCellHeader]=\"true\"\n                                        [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                        [grouped]=\"true\"\n                                        [indentCell]=\"true\"\n                                        [attr.colspan]=\"1\"\n                                        [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                                }\n                                @if (gridService.rowReorderColumnVisible()) {\n                                    <td\n                                        monaGridCell\n                                        monaGridLockedCell\n                                        [structuralColumn]=\"'reorder'\"\n                                        [grouped]=\"true\"\n                                        [indentCell]=\"true\"\n                                        [attr.colspan]=\"1\"\n                                        [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n                                }\n                                @let colspan = columns().length + gridService.groupColumns().length;\n                                <td\n                                    monaGridDetailIndentCell\n                                    monaGridLockedCell\n                                    [lockedStructuralOffset]=\"\n                                        (rowItem.depth + 1) * gridService.groupColumnWidth +\n                                        gridService.rowReorderStructuralWidth()\n                                    \"\n                                    [nextRowType]=\"nextRow?.type\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n                                @if (gridService.selectionColumnVisible()) {\n                                    <td\n                                        monaGridCell\n                                        monaGridLockedCell\n                                        [structuralColumn]=\"'selection'\"\n                                        [attr.colspan]=\"1\"\n                                        [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n                                }\n                                <td monaGridDetailContentCell [nextRowType]=\"nextRow?.type\" [attr.colspan]=\"colspan\">\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: rowItem.row.data }\"></ng-container>\n                                </td>\n                            </tr>\n                        }\n                    }\n                </ng-container>\n            }\n        </tbody>\n    </table>\n</cdk-virtual-scroll-viewport>\n\n@if (gridService.hasFooter()) {\n    <div [class]=\"footerClass()\" [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\" #footerScrollElement>\n        <div>\n            <table role=\"presentation\" [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n                <colgroup>\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                    }\n                    @if (gridService.rowReorderColumnVisible()) {\n                        <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                    }\n                    @if (gridService.selectionColumnVisible()) {\n                        <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                    }\n                    @for (col of columns(); 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 columns(); track $index) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [footerColumn]=\"column\">\n                                <mona-grid-footer-cell [column]=\"column\" [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                            </td>\n                        }\n                    </tr>\n                </tfoot>\n            </table>\n        </div>\n    </div>\n}\n\n<ng-template let-rowData let-element=\"element\" let-rowIndex=\"index\" #contextMenuTemplate>\n    <mona-contextmenu [target]=\"element\" [items]=\"gridService.contextMenuItems()\"></mona-contextmenu>\n    <!--    [context]=\"{rowData, element, rowIndex}\"-->\n</ng-template>\n", dependencies: [{ kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: GridAddRowComponent, selector: "tr[monaGridAddRow]", inputs: ["columns"] }, { kind: "component", type: GridCellComponent, selector: "mona-grid-cell", inputs: ["column", "row"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ContextMenuComponent, selector: "mona-contextmenu", inputs: ["ariaLabel", "items", "minWidth", "rounded", "size", "target", "width"], outputs: ["menuClick"] }, { kind: "directive", type: GridRowDirective, selector: "tr[monaGridRow]", inputs: ["index", "row"], exportAs: ["monaGridRow"] }, { kind: "directive", type: GridCellDirective, selector: "td[monaGridCell]", inputs: ["dataCell", "groupHeader", "groupToggle", "grouped", "indentCell", "lastInRow", "masterDetailContent", "masterDetailToggle", "nextRowType", "prevRowType"] }, { kind: "directive", type: GridDetailRowDirective, selector: "tr[monaGridDetailRow]" }, { kind: "directive", type: GridDetailIndentCellDirective, selector: "td[monaGridDetailIndentCell]", inputs: ["nextRowType"] }, { kind: "directive", type: GridDetailContentCellDirective, selector: "td[monaGridDetailContentCell]", inputs: ["nextRowType"] }, { 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: GridFooterTableCellDirective, selector: "td[monaGridFooterTableCell]", inputs: ["footerCellMinWidth", "footerCellWidth", "footerColumn"] }, { kind: "component", type: GridToggleComponent, selector: "mona-grid-toggle", inputs: ["expanded", "type", "width"], outputs: ["expandedChange"] }, { kind: "component", type: GridFooterCellComponent, selector: "mona-grid-footer-cell", inputs: ["column", "columnIndex", "groupKey"] }, { kind: "component", type: GridSelectionCheckboxComponent, selector: "mona-grid-selection-checkbox", inputs: ["row", "rowIndex"] }, { kind: "component", type: GridRowReorderHandleComponent, selector: "mona-grid-row-reorder-handle", inputs: ["pageIndex", "row"] }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridVirtualListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-grid-virtual-list", imports: [
+                        CdkVirtualScrollViewport,
+                        CdkFixedSizeVirtualScroll,
+                        CdkVirtualForOf,
+                        GridAddRowComponent,
+                        GridCellComponent,
+                        SlicePipe,
+                        NgTemplateOutlet,
+                        ContextMenuComponent,
+                        GridRowDirective,
+                        GridCellDirective,
+                        GridDetailRowDirective,
+                        GridDetailIndentCellDirective,
+                        GridDetailContentCellDirective,
+                        GridLogicalCellDirective,
+                        GridLockedCellDirective,
+                        GridFooterTableCellDirective,
+                        GridToggleComponent,
+                        GridFooterCellComponent,
+                        GridSelectionCheckboxComponent,
+                        GridRowReorderHandleComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "[class]": "baseClass()",
+                        "[style.--mona-grid-row-height]": "gridService.virtualScrollOptions().height + 'px'"
+                    }, template: "@if (gridService.addRowVisible()) {\n    <div\n        class=\"shrink-0 overflow-hidden border-b border-b-border\"\n        [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\n        #addRowScrollElement>\n        <table role=\"presentation\" [class]=\"tableClass()\" [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 columns(); track $index) {\n                    <col [style.width.px]=\"col.calculatedWidth\" />\n                }\n            </colgroup>\n            <tbody role=\"rowgroup\">\n                <tr monaGridAddRow [columns]=\"columns()\"></tr>\n            </tbody>\n        </table>\n    </div>\n}\n\n<cdk-virtual-scroll-viewport\n    class=\"flex-1 min-h-0\"\n    [itemSize]=\"gridService.virtualScrollOptions().height\"\n    [minBufferPx]=\"gridService.virtualGridMinBuffer()\"\n    [maxBufferPx]=\"gridService.virtualGridMaxBuffer()\">\n    <table role=\"presentation\" #bodyTable [class]=\"tableClass()\" [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 columns(); track $index) {\n                <col [style.width.px]=\"col.calculatedWidth\" />\n            }\n        </colgroup>\n        <tbody role=\"rowgroup\" tabindex=\"0\" (focus)=\"onViewportFocus()\">\n            @if (gridService.groupColumns().length === 0) {\n                <ng-container *cdkVirtualFor=\"let row of data(); let rowIndex = index\">\n                    <tr\n                        monaGridRow\n                        [index]=\"rowIndex\"\n                        [row]=\"row\"\n                        (click)=\"onGridRowClick($event, row)\"\n                        #gridRow=\"monaGridRow\"\n                        #rowElement>\n                        @if (gridService.rowReorderColumnVisible()) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                monaGridLogicalCell\n                                [structuralColumn]=\"'reorder'\"\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$rowReorder'\"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"row.uid\"\n                                [section]=\"'body'\"\n                                [colIndex]=\"gridService.structuralColIndexMap().get('reorder') ?? 0\"\n                                [firstInRow]=\"gridService.structuralColIndexMap().get('reorder') === 0\"\n                                [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'reorder'\"\n                                [style.width.px]=\"gridService.rowReorderColumnWidth\"\n                                [attr.colspan]=\"1\">\n                                <mona-grid-row-reorder-handle [row]=\"row\" [pageIndex]=\"rowIndex\" />\n                            </td>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [structuralColumn]=\"'detail'\"\n                                [masterDetailToggle]=\"true\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'detail'\"\n                                (toggleExpand)=\"onToggleDetailClick(row)\"\n                                [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n                                [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n                                [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'detail'\"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"row.uid\"\n                                [section]=\"'body'\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"\n                                [attr.colspan]=\"1\">\n                                <span class=\"flex h-full w-full items-stretch justify-center\">\n                                    <mona-grid-toggle\n                                        [expanded]=\"gridRow.expanded()\"\n                                        [type]=\"'detail'\"\n                                        [width]=\"gridService.detailColumnWidth\"\n                                        (expandedChange)=\"onToggleDetailClick(row)\"></mona-grid-toggle>\n                                </span>\n                            </td>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [structuralColumn]=\"'selection'\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$selection'\"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"row.uid\"\n                                [section]=\"'body'\"\n                                [colIndex]=\"gridService.structuralColIndexMap().get('selection') ?? 0\"\n                                [firstInRow]=\"gridService.structuralColIndexMap().get('selection') === 0\"\n                                [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'selection'\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\"\n                                [attr.colspan]=\"1\">\n                                <mona-grid-selection-checkbox [row]=\"row\" [rowIndex]=\"rowIndex\" />\n                            </td>\n                        }\n                        @for (column of columns(); track $index) {\n                            @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [dataCell]=\"true\"\n                                monaGridLogicalCell\n                                [cellKind]=\"column.kind\"\n                                [colIndex]=\"colIndex\"\n                                [columnId]=\"column.id\"\n                                [editable]=\"\n                                    gridService.editableOptions().enabled === true &&\n                                    gridService.editableOptions().mode === 'cell' &&\n                                    column.kind === 'data' &&\n                                    column.editable === true\n                                \"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"row.uid\"\n                                [section]=\"'body'\"\n                                [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                                [lastInRow]=\"\n                                    colIndex === gridService.leadingLogicalColumnCount() + columns().length - 1\n                                \"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                (edit)=\"gridCell.handleLogicalCellEnter()\">\n                                <mona-grid-cell #gridCell [column]=\"column\" [row]=\"row\"></mona-grid-cell>\n                            </td>\n                        }\n                        @if (gridService.contextMenuItems().length !== 0) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"contextMenuTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: row.data,\n                                    element: rowElement,\n                                    index: rowIndex\n                                }\">\n                            </ng-container>\n                        }\n                    </tr>\n                    @if (gridRow.expanded() && !gridService.rowDragInProgress()) {\n                        <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n                            @if (gridService.rowReorderColumnVisible()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [structuralColumn]=\"'reorder'\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n                            }\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"gridService.rowReorderStructuralWidth()\"\n                                [indentCell]=\"true\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n                            @if (gridService.selectionColumnVisible()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [structuralColumn]=\"'selection'\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n                            }\n                            <td monaGridCell [masterDetailContent]=\"true\" [attr.colspan]=\"columns().length\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: row.data }\"></ng-container>\n                            </td>\n                        </tr>\n                    }\n                </ng-container>\n            } @else {\n                <ng-container *cdkVirtualFor=\"let rowItem of flattenedGroupedRows(); let rowIndex = index\">\n                    @if (rowItem.type === \"group\") {\n                        @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n                        @let isCollapsed = gridService.isGroupCollapsed(rowItem.groupKey);\n                        <tr\n                            [class]=\"groupRowClass()\"\n                            role=\"row\"\n                            [attr.aria-level]=\"rowItem.depth + 1\"\n                            [attr.aria-expanded]=\"!isCollapsed\">\n                            @for (_ of gridService.groupColumns() | monaSlice: 0 : rowItem.depth; track $index) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                    [grouped]=\"true\"\n                                    [indentCell]=\"true\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                            }\n                            @if (gridService.rowReorderColumnVisible()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'reorder'\"\n                                    [groupPrefixWidth]=\"rowItem.depth * gridService.groupColumnWidth\"\n                                    [grouped]=\"true\"\n                                    [indentCell]=\"true\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n                            }\n\n                            @let colspan =\n                                columns().length +\n                                gridService.groupColumns().length +\n                                (gridService.masterDetailTemplate() ? 1 : 0) +\n                                (gridService.selectionColumnVisible() ? 1 : 0) -\n                                rowItem.depth +\n                                1;\n\n                            <td\n                                monaGridCell\n                                monaGridLogicalCell\n                                [cellKind]=\"'group'\"\n                                [rowIndex]=\"rowIndex\"\n                                [colIndex]=\"0\"\n                                [section]=\"'body'\"\n                                [grouped]=\"true\"\n                                [groupHeader]=\"true\"\n                                [prevRowType]=\"prevRow?.type\"\n                                [firstInRow]=\"true\"\n                                [lastInRow]=\"columns().length === 0\"\n                                [groupKey]=\"rowItem.groupKey\"\n                                [attr.colspan]=\"colspan\"\n                                (toggleExpand)=\"onGroupExpandChange(rowItem.groupKey)\">\n                                <p class=\"absolute inset-0 flex items-center text-sm whitespace-nowrap overflow-hidden\">\n                                    <mona-grid-toggle\n                                        [expanded]=\"!isCollapsed\"\n                                        [width]=\"gridService.groupColumnWidth\"\n                                        [type]=\"'group'\"\n                                        (expandedChange)=\"onGroupExpandChange(rowItem.groupKey)\"></mona-grid-toggle>\n                                    <span class=\"font-bold\">{{ rowItem.title }}: {{ rowItem.groupValue }}</span>\n                                </p>\n                            </td>\n                        </tr>\n                    } @else if (rowItem.type === \"groupFooter\") {\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 columns(); 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\"\n                                        [groupKey]=\"rowItem.groupAggregate.groupKey\"></mona-grid-footer-cell>\n                                </td>\n                            }\n                        </tr>\n                    } @else if (rowItem.type === \"data\") {\n                        @let nextRow = flattenedGroupedRows()[rowIndex + 1];\n                        @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n                        <tr\n                            (click)=\"onGridRowClick($event, rowItem.row)\"\n                            monaGridRow\n                            [index]=\"rowIndex\"\n                            [row]=\"rowItem.row\"\n                            #gridRow=\"monaGridRow\"\n                            #rowElement>\n                            @for (_ of gridService.groupColumns(); track $index) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                    [grouped]=\"true\"\n                                    [indentCell]=\"true\"\n                                    [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                            }\n                            @if (gridService.rowReorderColumnVisible()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    monaGridLogicalCell\n                                    [structuralColumn]=\"'reorder'\"\n                                    [grouped]=\"true\"\n                                    [cellKind]=\"'command'\"\n                                    [columnId]=\"'$rowReorder'\"\n                                    [prevRowType]=\"prevRow?.type\"\n                                    [nextRowType]=\"nextRow?.type\"\n                                    [rowIndex]=\"rowIndex\"\n                                    [rowUid]=\"rowItem.row.uid\"\n                                    [section]=\"'body'\"\n                                    [colIndex]=\"gridService.structuralColIndexMap().get('reorder') ?? 0\"\n                                    [firstInRow]=\"gridService.structuralColIndexMap().get('reorder') === 0\"\n                                    [lastInRow]=\"\n                                        columns().length === 0 && gridService.structuralLastKind() === 'reorder'\n                                    \"\n                                    [style.width.px]=\"gridService.rowReorderColumnWidth\">\n                                    <mona-grid-row-reorder-handle [row]=\"rowItem.row\" [pageIndex]=\"rowIndex\" />\n                                </td>\n                            }\n                            @if (gridService.masterDetailTemplate()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLogicalCell\n                                    monaGridLockedCell\n                                    [structuralColumn]=\"'detail'\"\n                                    [grouped]=\"true\"\n                                    [masterDetailToggle]=\"true\"\n                                    [prevRowType]=\"prevRow?.type\"\n                                    [nextRowType]=\"nextRow?.type\"\n                                    [rowIndex]=\"rowIndex\"\n                                    [rowUid]=\"rowItem.row.uid\"\n                                    [section]=\"'body'\"\n                                    [cellKind]=\"'detail'\"\n                                    (toggleExpand)=\"onToggleDetailClick(rowItem.row)\"\n                                    [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n                                    [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n                                    [lastInRow]=\"\n                                        columns().length === 0 && gridService.structuralLastKind() === 'detail'\n                                    \"\n                                    [style.width.px]=\"gridService.detailColumnWidth\">\n                                    <span class=\"flex h-full w-full items-stretch justify-center\">\n                                        <mona-grid-toggle\n                                            [expanded]=\"gridRow.expanded()\"\n                                            [type]=\"'detail'\"\n                                            [width]=\"gridService.detailColumnWidth\"\n                                            (expandedChange)=\"onToggleDetailClick(rowItem.row)\"></mona-grid-toggle>\n                                    </span>\n                                </td>\n                            }\n                            @if (gridService.selectionColumnVisible()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [structuralColumn]=\"'selection'\"\n                                    [grouped]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'command'\"\n                                    [columnId]=\"'$selection'\"\n                                    [prevRowType]=\"prevRow?.type\"\n                                    [nextRowType]=\"nextRow?.type\"\n                                    [rowIndex]=\"rowIndex\"\n                                    [rowUid]=\"rowItem.row.uid\"\n                                    [section]=\"'body'\"\n                                    [colIndex]=\"gridService.structuralColIndexMap().get('selection') ?? 0\"\n                                    [firstInRow]=\"gridService.structuralColIndexMap().get('selection') === 0\"\n                                    [lastInRow]=\"\n                                        columns().length === 0 && gridService.structuralLastKind() === 'selection'\n                                    \"\n                                    [style.width.px]=\"gridService.selectionColumnWidth\">\n                                    <mona-grid-selection-checkbox [row]=\"rowItem.row\" [rowIndex]=\"rowIndex\" />\n                                </td>\n                            }\n                            @for (column of columns(); track $index) {\n                                @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [column]=\"column\"\n                                    [grouped]=\"true\"\n                                    [dataCell]=\"true\"\n                                    [prevRowType]=\"prevRow?.type\"\n                                    [nextRowType]=\"nextRow?.type\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"column.kind\"\n                                    [colIndex]=\"colIndex\"\n                                    [columnId]=\"column.id\"\n                                    [editable]=\"\n                                        gridService.editableOptions().enabled === true &&\n                                        gridService.editableOptions().mode === 'cell' &&\n                                        column.kind === 'data' &&\n                                        column.editable === true\n                                    \"\n                                    [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                                    [lastInRow]=\"\n                                        colIndex === gridService.leadingLogicalColumnCount() + columns().length - 1\n                                    \"\n                                    [rowIndex]=\"rowIndex\"\n                                    [rowUid]=\"rowItem.row.uid\"\n                                    [section]=\"'body'\"\n                                    [style.width.px]=\"column.calculatedWidth\"\n                                    [style.min-width.px]=\"column.minWidth\"\n                                    (edit)=\"gridCell.handleLogicalCellEnter()\">\n                                    <mona-grid-cell #gridCell [column]=\"column\" [row]=\"rowItem.row\"></mona-grid-cell>\n                                </td>\n                            }\n                            @if (gridService.contextMenuItems().length !== 0) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"contextMenuTemplate\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: rowItem.row.data,\n                                        element: rowElement,\n                                        index: rowIndex\n                                    }\">\n                                </ng-container>\n                            }\n                        </tr>\n                        @if (gridRow.expanded() && !gridService.rowDragInProgress()) {\n                            <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n                                @for (\n                                    _ of gridService.groupColumns() | monaSlice: 0 : rowItem.depth + 1;\n                                    track $index\n                                ) {\n                                    <td\n                                        monaGridCell\n                                        monaGridLockedCell\n                                        [lockedCellHeader]=\"true\"\n                                        [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                        [grouped]=\"true\"\n                                        [indentCell]=\"true\"\n                                        [attr.colspan]=\"1\"\n                                        [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                                }\n                                @if (gridService.rowReorderColumnVisible()) {\n                                    <td\n                                        monaGridCell\n                                        monaGridLockedCell\n                                        [structuralColumn]=\"'reorder'\"\n                                        [grouped]=\"true\"\n                                        [indentCell]=\"true\"\n                                        [attr.colspan]=\"1\"\n                                        [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n                                }\n                                @let colspan = columns().length + gridService.groupColumns().length;\n                                <td\n                                    monaGridDetailIndentCell\n                                    monaGridLockedCell\n                                    [lockedStructuralOffset]=\"\n                                        (rowItem.depth + 1) * gridService.groupColumnWidth +\n                                        gridService.rowReorderStructuralWidth()\n                                    \"\n                                    [nextRowType]=\"nextRow?.type\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n                                @if (gridService.selectionColumnVisible()) {\n                                    <td\n                                        monaGridCell\n                                        monaGridLockedCell\n                                        [structuralColumn]=\"'selection'\"\n                                        [attr.colspan]=\"1\"\n                                        [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n                                }\n                                <td monaGridDetailContentCell [nextRowType]=\"nextRow?.type\" [attr.colspan]=\"colspan\">\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: rowItem.row.data }\"></ng-container>\n                                </td>\n                            </tr>\n                        }\n                    }\n                </ng-container>\n            }\n        </tbody>\n    </table>\n</cdk-virtual-scroll-viewport>\n\n@if (gridService.hasFooter()) {\n    <div [class]=\"footerClass()\" [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\" #footerScrollElement>\n        <div>\n            <table role=\"presentation\" [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n                <colgroup>\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                    }\n                    @if (gridService.rowReorderColumnVisible()) {\n                        <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                    }\n                    @if (gridService.selectionColumnVisible()) {\n                        <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                    }\n                    @for (col of columns(); 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 columns(); track $index) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [footerColumn]=\"column\">\n                                <mona-grid-footer-cell [column]=\"column\" [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                            </td>\n                        }\n                    </tr>\n                </tfoot>\n            </table>\n        </div>\n    </div>\n}\n\n<ng-template let-rowData let-element=\"element\" let-rowIndex=\"index\" #contextMenuTemplate>\n    <mona-contextmenu [target]=\"element\" [items]=\"gridService.contextMenuItems()\"></mona-contextmenu>\n    <!--    [context]=\"{rowData, element, rowIndex}\"-->\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { addRowScrollElementRef: [{ type: i0.ViewChild, args: ["addRowScrollElement", { isSignal: true }] }], bodyTableElementRef: [{ type: i0.ViewChild, args: ["bodyTable", { isSignal: true }] }], footerScrollElementRef: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+
+export { GridVirtualListComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-virtual-list.component-xc8ybFkY.mjs.map