@nanahoshi/mona-ui 0.22.0 → 0.23.0

package/fesm2022/nanahoshi-mona-ui-grid-grid-footer-row.component--nF_Q7Bd.mjs

@@ -0,0 +1,169 @@
+import * as i0 from '@angular/core';
+import { inject, computed, input, Directive, ChangeDetectionStrategy, Component } from '@angular/core';
+import { a as GridService, v as gridFooterTableCellThemeVariants, w as gridFooterTableRowThemeVariants, m as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-bduDEm-x.mjs';
+import { NgTemplateOutlet } from '@angular/common';
+import { ImmutableDictionary } from '@mirei/ts-collections';
+
+class GridFooterTableCellDirective {
+    constructor() {
+        this.#gridService = inject(GridService, { optional: true });
+        this.className = computed(() => {
+            return (gridFooterTableCellThemeVariants() +
+                (this.#gridService?.virtualScrollOptions().enabled
+                    ? " h-(--mona-grid-row-height) max-h-(--mona-grid-row-height) overflow-hidden py-0! align-middle"
+                    : ""));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+        this.minWidth = computed(() => this.footerColumn()?.minWidth ?? this.footerCellMinWidth(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+        this.width = computed(() => this.footerColumn()?.calculatedWidth ?? this.footerCellWidth(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.footerCellMinWidth = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerCellMinWidth" }] : /* istanbul ignore next */ []));
+        this.footerCellWidth = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerCellWidth" }] : /* istanbul ignore next */ []));
+        this.footerColumn = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerColumn" }] : /* istanbul ignore next */ []));
+    }
+    #gridService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFooterTableCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridFooterTableCellDirective, isStandalone: true, selector: "td[monaGridFooterTableCell]", inputs: { footerCellMinWidth: { classPropertyName: "footerCellMinWidth", publicName: "footerCellMinWidth", isSignal: true, isRequired: false, transformFunction: null }, footerCellWidth: { classPropertyName: "footerCellWidth", publicName: "footerCellWidth", isSignal: true, isRequired: false, transformFunction: null }, footerColumn: { classPropertyName: "footerColumn", publicName: "footerColumn", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "class": "className()", "style.width.px": "width()", "style.min-width.px": "minWidth()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFooterTableCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "td[monaGridFooterTableCell]",
+                    host: {
+                        "[class]": "className()",
+                        "[style.width.px]": "width()",
+                        "[style.min-width.px]": "minWidth()",
+                        role: "gridcell"
+                    }
+                }]
+        }], propDecorators: { footerCellMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerCellMinWidth", required: false }] }], footerCellWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerCellWidth", required: false }] }], footerColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerColumn", required: false }] }] } });
+
+class GridFooterCellComponent {
+    constructor() {
+        this.#gridService = inject(GridService);
+        this.aggregate = computed(() => {
+            const field = this.column().field;
+            const groupKey = this.groupKey();
+            if (groupKey == null) {
+                return this.aggregateMap().get(field) ?? null;
+            }
+            return this.#gridService.groupAggregateMap().get(groupKey)?.aggregates.get(field) ?? null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aggregate" }] : /* istanbul ignore next */ []));
+        this.aggregateMap = computed(() => {
+            const groupKey = this.groupKey();
+            if (groupKey == null) {
+                return this.#gridService.aggregateMap();
+            }
+            return (this.#gridService.groupAggregateMap().get(groupKey)?.aggregates ??
+                ImmutableDictionary.create());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aggregateMap" }] : /* istanbul ignore next */ []));
+        this.displayValue = computed(() => {
+            return this.#gridService.resolveAggregateValue(this.aggregate(), this.column().aggregate);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+        this.templateContext = computed(() => {
+            const column = this.column();
+            const columnIndex = this.columnIndex();
+            const aggregate = this.aggregate();
+            const aggregates = this.aggregateMap().toObject(e => e.key, e => e.value);
+            const value = this.displayValue();
+            const groupKey = this.groupKey();
+            if (groupKey == null) {
+                return {
+                    $implicit: value,
+                    aggregate,
+                    aggregates,
+                    column,
+                    columnIndex,
+                    rows: this.#gridService.aggregateRows()
+                };
+            }
+            const groupFooterAggregate = this.#gridService.groupAggregateMap().get(groupKey);
+            return {
+                $implicit: value,
+                aggregate,
+                aggregates,
+                column,
+                columnIndex,
+                count: groupFooterAggregate?.count ?? 0,
+                depth: groupFooterAggregate?.depth ?? 0,
+                groupKey,
+                groupValue: groupFooterAggregate?.groupValue,
+                rows: groupFooterAggregate?.rows ?? []
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateContext" }] : /* istanbul ignore next */ []));
+        this.templateRef = computed(() => {
+            if (this.groupKey() != null) {
+                return this.column().groupFooterTemplate;
+            }
+            return this.column().footerTemplate;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
+        this.column = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+        this.columnIndex = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnIndex" }] : /* istanbul ignore next */ []));
+        this.groupKey = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupKey" }] : /* istanbul ignore next */ []));
+    }
+    #gridService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFooterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridFooterCellComponent, isStandalone: true, selector: "mona-grid-footer-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, columnIndex: { classPropertyName: "columnIndex", publicName: "columnIndex", isSignal: true, isRequired: true, transformFunction: null }, groupKey: { classPropertyName: "groupKey", publicName: "groupKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex items-center h-full" }, ngImport: i0, template: `
+        @if (templateRef(); as templateRef) {
+            <ng-container [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="templateContext()"></ng-container>
+        } @else if (displayValue() != null) {
+            <span class="block truncate font-medium">{{ displayValue() }}</span>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFooterCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-grid-footer-cell",
+                    template: `
+        @if (templateRef(); as templateRef) {
+            <ng-container [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="templateContext()"></ng-container>
+        } @else if (displayValue() != null) {
+            <span class="block truncate font-medium">{{ displayValue() }}</span>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet],
+                    host: {
+                        class: "flex items-center h-full"
+                    }
+                }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], columnIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnIndex", required: true }] }], groupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKey", required: false }] }] } });
+
+/**
+ * An aggregate footer row. Without a group key it shows the grid-wide aggregates,
+ * otherwise the aggregates of that group.
+ */
+class GridFooterRowComponent {
+    constructor() {
+        this.gridService = inject(GridService);
+        this.rowClass = computed(() => gridFooterTableRowThemeVariants({ virtual: this.gridService.virtualScrollOptions().enabled }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+        this.groupKey = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupKey" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFooterRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridFooterRowComponent, isStandalone: true, selector: "tr[monaGridFooterRow]", inputs: { groupKey: { classPropertyName: "groupKey", publicName: "groupKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "row" }, properties: { "class": "rowClass()" } }, ngImport: i0, template: "@for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n    @if (layoutColumn.kind === \"column\") {\n        <td\n            monaGridFooterTableCell\n            [monaGridLockedCell]=\"layoutColumn.key\"\n            [lockedCellHeader]=\"true\"\n            [footerColumn]=\"layoutColumn.column\">\n            <mona-grid-footer-cell\n                [column]=\"layoutColumn.column\"\n                [columnIndex]=\"layoutColumn.columnIndex\"\n                [groupKey]=\"groupKey()\" />\n        </td>\n    } @else {\n        <td\n            monaGridFooterTableCell\n            [monaGridLockedCell]=\"layoutColumn.key\"\n            [lockedCellHeader]=\"true\"\n            [footerCellWidth]=\"layoutColumn.width\"></td>\n    }\n}\n", dependencies: [{ kind: "component", type: GridFooterCellComponent, selector: "mona-grid-footer-cell", inputs: ["column", "columnIndex", "groupKey"] }, { kind: "directive", type: GridFooterTableCellDirective, selector: "td[monaGridFooterTableCell]", inputs: ["footerCellMinWidth", "footerCellWidth", "footerColumn"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["monaGridLockedCell", "lockedCellHeader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFooterRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tr[monaGridFooterRow]", changeDetection: ChangeDetectionStrategy.OnPush, imports: [GridFooterCellComponent, GridFooterTableCellDirective, GridLockedCellDirective], host: {
+                        "[class]": "rowClass()",
+                        role: "row"
+                    }, template: "@for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n    @if (layoutColumn.kind === \"column\") {\n        <td\n            monaGridFooterTableCell\n            [monaGridLockedCell]=\"layoutColumn.key\"\n            [lockedCellHeader]=\"true\"\n            [footerColumn]=\"layoutColumn.column\">\n            <mona-grid-footer-cell\n                [column]=\"layoutColumn.column\"\n                [columnIndex]=\"layoutColumn.columnIndex\"\n                [groupKey]=\"groupKey()\" />\n        </td>\n    } @else {\n        <td\n            monaGridFooterTableCell\n            [monaGridLockedCell]=\"layoutColumn.key\"\n            [lockedCellHeader]=\"true\"\n            [footerCellWidth]=\"layoutColumn.width\"></td>\n    }\n}\n" }]
+        }], propDecorators: { groupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKey", required: false }] }] } });
+
+export { GridFooterRowComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-row.component--nF_Q7Bd.mjs.map

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

@@ -0,0 +1,176 @@
+import { CdkDropList, CdkDrag, CdkDragPreview } from '@angular/cdk/drag-drop';
+import { LucideGripVertical } from '@lucide/angular';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, ElementRef, viewChild, computed, input, afterNextRender, afterRenderEffect, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ImmutableList } from '@mirei/ts-collections';
+import { fromEvent } from 'rxjs';
+import { G as GridNavigationService, g as gridListBaseThemeVariants, a as GridService, b as gridRowDragPreviewThemeVariants, c as gridListTableThemeVariants, d as GridColgroupComponent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-bduDEm-x.mjs';
+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';
+
+const ROW_MOVE_DURATION = 200;
+const ROW_MOVE_EASING = "cubic-bezier(0.2, 0, 0, 1)";
+/** Data that arrives later than this after a move request is not animated, since rows may have moved for other reasons. */
+const ROW_MOVE_SNAPSHOT_LIFETIME = 1000;
+class GridListComponent {
+    #destroyRef;
+    #gridNavigationService;
+    #hostElementRef;
+    #rowMoveAnimations;
+    #dropping;
+    #rowPositionsBeforeMove;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#gridNavigationService = inject(GridNavigationService);
+        this.#hostElementRef = inject((ElementRef));
+        this.#rowMoveAnimations = new Map();
+        this.#dropping = false;
+        this.#rowPositionsBeforeMove = null;
+        this.bodyTableElementRef = viewChild.required("bodyTable", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bodyTableElementRef" }] : /* istanbul ignore next */ []));
+        this.baseClass = gridListBaseThemeVariants({ virtual: false });
+        this.bodyRows = computed(() => this.gridService.createBodyRows(this.data()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bodyRows" }] : /* istanbul ignore next */ []));
+        this.gridService = inject(GridService);
+        this.rowDragPreviewClass = gridRowDragPreviewThemeVariants();
+        this.tableClass = gridListTableThemeVariants();
+        this.data = input(ImmutableList.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => {
+                const bodyTableElement = this.bodyTableElementRef().nativeElement;
+                const bodyScrollElement = this.#hostElementRef.nativeElement;
+                this.gridService.bodyTableElement.set(bodyTableElement);
+                this.gridService.bodyScrollElement.set(bodyScrollElement);
+                this.setSubscriptions();
+                this.#destroyRef.onDestroy(() => {
+                    if (this.gridService.bodyTableElement() === bodyTableElement) {
+                        this.gridService.bodyTableElement.set(null);
+                    }
+                    if (this.gridService.bodyScrollElement() === bodyScrollElement) {
+                        this.gridService.bodyScrollElement.set(null);
+                    }
+                });
+            }
+        });
+        // Rows moved from the keyboard slide from where they were drawn to their new place.
+        afterRenderEffect({
+            earlyRead: () => {
+                this.bodyRows();
+                return this.#measureRowMoves();
+            },
+            write: moves => this.#playRowMoves(moves())
+        });
+    }
+    onRowDragEnded(_event) {
+        this.gridService.draggingRowUid.set(null);
+    }
+    onRowDragStarted(event) {
+        this.gridService.draggingRowUid.set(event.source.data.uid);
+    }
+    onRowDrop(event) {
+        this.gridService.draggingRowUid.set(null);
+        // The drag already showed the rows in their new order, so the move must not be animated again.
+        this.#dropping = true;
+        try {
+            this.gridService.requestRowReorder(event.item.data, event.previousIndex, event.currentIndex);
+        }
+        finally {
+            this.#dropping = false;
+        }
+    }
+    onBodyFocus() {
+        this.#gridNavigationService.focusActiveCellOrFirstHeader();
+    }
+    #canAnimateRowMoves() {
+        const view = this.#hostElementRef.nativeElement.ownerDocument.defaultView;
+        if (view == null || typeof this.#hostElementRef.nativeElement.animate !== "function") {
+            return false;
+        }
+        return !view.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    }
+    #measureRowMoves() {
+        const snapshot = this.#rowPositionsBeforeMove;
+        this.#rowPositionsBeforeMove = null;
+        if (snapshot == null || performance.now() - snapshot.time > ROW_MOVE_SNAPSHOT_LIFETIME) {
+            return [];
+        }
+        // Rows still sliding from an earlier move are measured where they finally belong.
+        for (const animation of this.#rowMoveAnimations.values()) {
+            animation.cancel();
+        }
+        this.#rowMoveAnimations.clear();
+        const moves = [];
+        for (const [uid, position] of this.#readRowPositions()) {
+            const previousTop = snapshot.positions.get(uid);
+            if (previousTop != null && Math.abs(previousTop - position.top) >= 0.5) {
+                moves.push({ element: position.element, offset: previousTop - position.top });
+            }
+        }
+        return moves;
+    }
+    #playRowMoves(moves) {
+        for (const { element, offset } of moves) {
+            const animation = element.animate([{ transform: `translateY(${offset}px)` }, { transform: "translateY(0)" }], { duration: ROW_MOVE_DURATION, easing: ROW_MOVE_EASING });
+            this.#rowMoveAnimations.set(element, animation);
+            animation.addEventListener("finish", () => {
+                if (this.#rowMoveAnimations.get(element) === animation) {
+                    this.#rowMoveAnimations.delete(element);
+                }
+            });
+        }
+    }
+    /** Reads where each data row is drawn, relative to the top of the body table. */
+    #readRowPositions() {
+        const table = this.bodyTableElementRef().nativeElement;
+        const tableTop = table.getBoundingClientRect().top;
+        const positions = new Map();
+        for (const element of table.querySelectorAll(":scope > tbody > tr[data-ruid]")) {
+            const uid = element.dataset["ruid"];
+            if (uid != null) {
+                positions.set(uid, { element, top: element.getBoundingClientRect().top - tableTop });
+            }
+        }
+        return positions;
+    }
+    setSubscriptions() {
+        fromEvent(this.#hostElementRef.nativeElement, "focus")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => {
+            this.#gridNavigationService.focusActiveCellOrFirstHeader();
+        });
+        this.gridService.rowReorder$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            if (this.#dropping || !this.#canAnimateRowMoves()) {
+                return;
+            }
+            const positions = new Map();
+            for (const [uid, position] of this.#readRowPositions()) {
+                positions.set(uid, position.top);
+            }
+            this.#rowPositionsBeforeMove = { positions, time: performance.now() };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridListComponent, isStandalone: true, selector: "mona-grid-list", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass" } }, viewQueries: [{ propertyName: "bodyTableElementRef", first: true, predicate: ["bodyTable"], descendants: true, isSignal: true }], ngImport: i0, template: "<table role=\"presentation\" #bodyTable [class]=\"tableClass\" [style.width.px]=\"gridService.tableWidth()\">\n    <colgroup monaGridColgroup></colgroup>\n    <tbody\n        role=\"rowgroup\"\n        tabindex=\"0\"\n        (focus)=\"onBodyFocus()\"\n        cdkDropList\n        [cdkDropListData]=\"data().toArray()\"\n        [cdkDropListDisabled]=\"!gridService.rowReorderInteractionEnabled()\"\n        (cdkDropListDropped)=\"onRowDrop($event)\">\n        @if (gridService.addRowVisible()) {\n            <tr monaGridAddRow></tr>\n        }\n        @for (bodyRow of bodyRows(); track bodyRow.key; let rowIndex = $index) {\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\n                    monaGridRow\n                    [row]=\"bodyRow.row\"\n                    [index]=\"rowIndex\"\n                    cdkDrag\n                    cdkDragLockAxis=\"y\"\n                    [cdkDragData]=\"bodyRow.row\"\n                    [cdkDragDisabled]=\"!gridService.canReorderRow(bodyRow.row)\"\n                    (cdkDragStarted)=\"onRowDragStarted($event)\"\n                    (cdkDragEnded)=\"onRowDragEnded($event)\">\n                    <ng-template cdkDragPreview>\n                        <div [class]=\"rowDragPreviewClass\">\n                            <svg lucideGripVertical [size]=\"16\" aria-hidden=\"true\"></svg>\n                            <span>{{\n                                gridService.getRowReorderAriaLabel(\n                                    bodyRow.row,\n                                    rowIndex + gridService.paginationState().skip\n                                )\n                            }}</span>\n                        </div>\n                    </ng-template>\n                </tr>\n                @if (gridService.isRowExpanded(bodyRow.row) && !gridService.rowDragInProgress()) {\n                    <tr monaGridDetailRow [row]=\"bodyRow.row\"></tr>\n                }\n            }\n        }\n    </tbody>\n</table>\n", dependencies: [{ kind: "component", type: LucideGripVertical, selector: "svg[lucideGripVertical]" }, { 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"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-grid-list", imports: [
+                        LucideGripVertical,
+                        GridAddRowComponent,
+                        GridColgroupComponent,
+                        GridDetailRowComponent,
+                        GridFooterRowComponent,
+                        GridGroupRowComponent,
+                        GridRowComponent,
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragPreview
+                    ], host: {
+                        "[class]": "baseClass"
+                    }, template: "<table role=\"presentation\" #bodyTable [class]=\"tableClass\" [style.width.px]=\"gridService.tableWidth()\">\n    <colgroup monaGridColgroup></colgroup>\n    <tbody\n        role=\"rowgroup\"\n        tabindex=\"0\"\n        (focus)=\"onBodyFocus()\"\n        cdkDropList\n        [cdkDropListData]=\"data().toArray()\"\n        [cdkDropListDisabled]=\"!gridService.rowReorderInteractionEnabled()\"\n        (cdkDropListDropped)=\"onRowDrop($event)\">\n        @if (gridService.addRowVisible()) {\n            <tr monaGridAddRow></tr>\n        }\n        @for (bodyRow of bodyRows(); track bodyRow.key; let rowIndex = $index) {\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\n                    monaGridRow\n                    [row]=\"bodyRow.row\"\n                    [index]=\"rowIndex\"\n                    cdkDrag\n                    cdkDragLockAxis=\"y\"\n                    [cdkDragData]=\"bodyRow.row\"\n                    [cdkDragDisabled]=\"!gridService.canReorderRow(bodyRow.row)\"\n                    (cdkDragStarted)=\"onRowDragStarted($event)\"\n                    (cdkDragEnded)=\"onRowDragEnded($event)\">\n                    <ng-template cdkDragPreview>\n                        <div [class]=\"rowDragPreviewClass\">\n                            <svg lucideGripVertical [size]=\"16\" aria-hidden=\"true\"></svg>\n                            <span>{{\n                                gridService.getRowReorderAriaLabel(\n                                    bodyRow.row,\n                                    rowIndex + gridService.paginationState().skip\n                                )\n                            }}</span>\n                        </div>\n                    </ng-template>\n                </tr>\n                @if (gridService.isRowExpanded(bodyRow.row) && !gridService.rowDragInProgress()) {\n                    <tr monaGridDetailRow [row]=\"bodyRow.row\"></tr>\n                }\n            }\n        }\n    </tbody>\n</table>\n" }]
+        }], ctorParameters: () => [], propDecorators: { bodyTableElementRef: [{ type: i0.ViewChild, args: ["bodyTable", { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+
+export { GridListComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-S2qxwP2M.mjs.map