@nanahoshi/mona-ui 0.22.0 → 0.23.0

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

@@ -0,0 +1,173 @@
+import { G as GridNavigationService, a as GridService, g as gridListBaseThemeVariants, e as gridFooterThemeVariants, f as gridFooterTableThemeVariants, c as gridListTableThemeVariants, h as GRID_DEFAULT_VIRTUAL_ROW_HEIGHT, d as GridColgroupComponent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-bduDEm-x.mjs';
+import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
+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 { rxTimeout } from '@nanahoshi/mona-ui/internal';
+import { fromEvent } from 'rxjs';
+import { G as GridAddRowComponent, a as GridDetailRowComponent, b as GridGroupRowComponent, c as GridRowComponent } from './nanahoshi-mona-ui-grid-grid-row.component-Dwy8hCm7.mjs';
+import { GridFooterRowComponent } from './nanahoshi-mona-ui-grid-grid-footer-row.component--nF_Q7Bd.mjs';
+
+class GridVirtualListComponent {
+    #destroyRef;
+    #gridNavigationService;
+    #groupColumns$;
+    #hostElementRef;
+    #injector;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#gridNavigationService = inject(GridNavigationService);
+        this.#groupColumns$ = toObservable(inject(GridService).groupColumns);
+        this.#hostElementRef = inject((ElementRef));
+        this.#injector = inject(Injector);
+        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.bodyRows = computed(() => this.gridService.createBodyRows(this.data()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bodyRows" }] : /* 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.gridService = inject(GridService);
+        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.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();
+    }
+    onViewportFocus() {
+        this.#gridNavigationService.focusActiveCellOrFirstHeader();
+    }
+    trackBodyRow(_, bodyRow) {
+        return bodyRow.key;
+    }
+    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();
+            const selectBy = this.gridService.selectBy();
+            if (firstKey == null || selectBy == null) {
+                return;
+            }
+            const index = this.bodyRows().findIndex(bodyRow => {
+                if (bodyRow.type !== "data") {
+                    return false;
+                }
+                const key = typeof selectBy === "string" ? bodyRow.row.data[selectBy] : selectBy(bodyRow.row.data);
+                return key === firstKey;
+            });
+            if (index !== -1) {
+                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: { 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-inline-end.px]=\"gridService.scrollbarGutterWidth()\"\n        #addRowScrollElement>\n        <table role=\"presentation\" [class]=\"tableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n            <colgroup monaGridColgroup></colgroup>\n            <tbody role=\"rowgroup\">\n                <tr monaGridAddRow></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 monaGridColgroup></colgroup>\n        <tbody role=\"rowgroup\" tabindex=\"0\" (focus)=\"onViewportFocus()\">\n            <ng-container *cdkVirtualFor=\"let bodyRow of bodyRows(); let rowIndex = index; trackBy: trackBodyRow\">\n                @if (bodyRow.type === \"group\") {\n                    <tr monaGridGroupRow [group]=\"bodyRow\" [rowIndex]=\"rowIndex\"></tr>\n                } @else if (bodyRow.type === \"groupFooter\") {\n                    <tr monaGridFooterRow [groupKey]=\"bodyRow.groupAggregate.groupKey\"></tr>\n                } @else {\n                    <tr monaGridRow [row]=\"bodyRow.row\" [index]=\"rowIndex\"></tr>\n                    @if (gridService.isRowExpanded(bodyRow.row) && !gridService.rowDragInProgress()) {\n                        <tr monaGridDetailRow [row]=\"bodyRow.row\"></tr>\n                    }\n                }\n            </ng-container>\n        </tbody>\n    </table>\n</cdk-virtual-scroll-viewport>\n\n@if (gridService.hasFooter()) {\n    <div [class]=\"footerClass()\" [style.margin-inline-end.px]=\"gridService.scrollbarGutterWidth()\" #footerScrollElement>\n        <div>\n            <table role=\"presentation\" [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n                <colgroup monaGridColgroup></colgroup>\n                <tfoot role=\"rowgroup\">\n                    <tr monaGridFooterRow></tr>\n                </tfoot>\n            </table>\n        </div>\n    </div>\n}\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]" }, { kind: "component", type: GridColgroupComponent, selector: "colgroup[monaGridColgroup]" }, { kind: "component", type: GridDetailRowComponent, selector: "tr[monaGridDetailRow]", inputs: ["row"] }, { kind: "component", type: GridFooterRowComponent, selector: "tr[monaGridFooterRow]", inputs: ["groupKey"] }, { kind: "component", type: GridGroupRowComponent, selector: "tr[monaGridGroupRow]", inputs: ["group", "rowIndex"] }, { kind: "component", type: GridRowComponent, selector: "tr[monaGridRow]", inputs: ["index", "row"], exportAs: ["monaGridRow"] }], 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,
+                        GridColgroupComponent,
+                        GridDetailRowComponent,
+                        GridFooterRowComponent,
+                        GridGroupRowComponent,
+                        GridRowComponent
+                    ], 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-inline-end.px]=\"gridService.scrollbarGutterWidth()\"\n        #addRowScrollElement>\n        <table role=\"presentation\" [class]=\"tableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n            <colgroup monaGridColgroup></colgroup>\n            <tbody role=\"rowgroup\">\n                <tr monaGridAddRow></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 monaGridColgroup></colgroup>\n        <tbody role=\"rowgroup\" tabindex=\"0\" (focus)=\"onViewportFocus()\">\n            <ng-container *cdkVirtualFor=\"let bodyRow of bodyRows(); let rowIndex = index; trackBy: trackBodyRow\">\n                @if (bodyRow.type === \"group\") {\n                    <tr monaGridGroupRow [group]=\"bodyRow\" [rowIndex]=\"rowIndex\"></tr>\n                } @else if (bodyRow.type === \"groupFooter\") {\n                    <tr monaGridFooterRow [groupKey]=\"bodyRow.groupAggregate.groupKey\"></tr>\n                } @else {\n                    <tr monaGridRow [row]=\"bodyRow.row\" [index]=\"rowIndex\"></tr>\n                    @if (gridService.isRowExpanded(bodyRow.row) && !gridService.rowDragInProgress()) {\n                        <tr monaGridDetailRow [row]=\"bodyRow.row\"></tr>\n                    }\n                }\n            </ng-container>\n        </tbody>\n    </table>\n</cdk-virtual-scroll-viewport>\n\n@if (gridService.hasFooter()) {\n    <div [class]=\"footerClass()\" [style.margin-inline-end.px]=\"gridService.scrollbarGutterWidth()\" #footerScrollElement>\n        <div>\n            <table role=\"presentation\" [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n                <colgroup monaGridColgroup></colgroup>\n                <tfoot role=\"rowgroup\">\n                    <tr monaGridFooterRow></tr>\n                </tfoot>\n            </table>\n        </div>\n    </div>\n}\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 }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+
+export { GridVirtualListComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-virtual-list.component-DArxdAah.mjs.map