@nanahoshi/mona-ui 0.9.0 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-cell.component-D05Rq7-1.mjs → nanahoshi-mona-ui-grid-grid-footer-cell.component-CJmjLl7R.mjs} +2 -2
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Bad0K1Cw.mjs → nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-pGhsAcVA.mjs} +2 -2
- package/fesm2022/nanahoshi-mona-ui-grid-grid-list.component-BhnFFIOl.mjs +145 -0
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-toggle.component-DvuQvc7E.mjs → nanahoshi-mona-ui-grid-grid-toggle.component-DE3ffsva.mjs} +79 -6
- package/fesm2022/nanahoshi-mona-ui-grid-grid-virtual-list.component-7acNUovW.mjs +233 -0
- package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-RQvhjBse.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DaOemy_G.mjs} +328 -54
- package/fesm2022/nanahoshi-mona-ui-grid.mjs +1 -1
- package/package.json +1 -1
- package/types/nanahoshi-mona-ui-grid.d.ts +107 -17
- package/fesm2022/nanahoshi-mona-ui-grid-grid-list.component-QqUUL60F.mjs +0 -122
- package/fesm2022/nanahoshi-mona-ui-grid-grid-virtual-list.component-BmahjOXq.mjs +0 -232
|
@@ -2,7 +2,7 @@ import { NgTemplateOutlet } from '@angular/common';
|
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { inject, computed, input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
import { ImmutableDictionary } from '@mirei/ts-collections';
|
|
5
|
-
import { c as GridService } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-
|
|
5
|
+
import { c as GridService } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DaOemy_G.mjs';
|
|
6
6
|
|
|
7
7
|
class GridFooterCellComponent {
|
|
8
8
|
constructor() {
|
|
@@ -102,4 +102,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
102
102
|
}], 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 }] }] } });
|
|
103
103
|
|
|
104
104
|
export { GridFooterCellComponent };
|
|
105
|
-
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-cell.component-
|
|
105
|
+
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-cell.component-CJmjLl7R.mjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { computed, input, Directive } from '@angular/core';
|
|
3
|
-
import {
|
|
3
|
+
import { z as gridFooterTableCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DaOemy_G.mjs';
|
|
4
4
|
|
|
5
5
|
class GridFooterTableCellDirective {
|
|
6
6
|
constructor() {
|
|
@@ -35,4 +35,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
35
35
|
}], 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 }] }] } });
|
|
36
36
|
|
|
37
37
|
export { GridFooterTableCellDirective };
|
|
38
|
-
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-
|
|
38
|
+
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-pGhsAcVA.mjs.map
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import { CdkDropList, CdkDrag, CdkDragPreview } from '@angular/cdk/drag-drop';
|
|
2
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { inject, DestroyRef, ElementRef, viewChild, computed, input, afterNextRender, Component } from '@angular/core';
|
|
5
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
6
|
+
import { ImmutableList, span } from '@mirei/ts-collections';
|
|
7
|
+
import { SlicePipe } from '@nanahoshi/mona-ui/common';
|
|
8
|
+
import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
|
|
9
|
+
import { fromEvent } from 'rxjs';
|
|
10
|
+
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-DE3ffsva.mjs';
|
|
11
|
+
import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-pGhsAcVA.mjs';
|
|
12
|
+
import { G as GridNavigationService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, b as gridFooterTableRowThemeVariants, c as GridService, d as gridGroupRowThemeVariants, e as gridRowDragPlaceholderThemeVariants, f as gridRowDragPreviewThemeVariants, h as gridListTableThemeVariants, i as GridLogicalCellDirective, j as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DaOemy_G.mjs';
|
|
13
|
+
import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-CJmjLl7R.mjs';
|
|
14
|
+
|
|
15
|
+
class GridListComponent {
|
|
16
|
+
#destroyRef;
|
|
17
|
+
#gridNavigationService;
|
|
18
|
+
#hostElementRef;
|
|
19
|
+
#rowFlattener;
|
|
20
|
+
constructor() {
|
|
21
|
+
this.#destroyRef = inject(DestroyRef);
|
|
22
|
+
this.#gridNavigationService = inject(GridNavigationService);
|
|
23
|
+
this.#hostElementRef = inject((ElementRef));
|
|
24
|
+
this.#rowFlattener = inject(GridRowFlattenerService);
|
|
25
|
+
this.bodyTableElementRef = viewChild.required("bodyTable", /* @ts-ignore */
|
|
26
|
+
...(ngDevMode ? [{ debugName: "bodyTableElementRef" }] : /* istanbul ignore next */ []));
|
|
27
|
+
this.baseClass = computed(() => {
|
|
28
|
+
return gridListBaseThemeVariants({ virtual: false });
|
|
29
|
+
}, /* @ts-ignore */
|
|
30
|
+
...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
|
|
31
|
+
this.flattenedGroupedRows = computed(() => {
|
|
32
|
+
const groupColumns = this.gridService.groupColumns();
|
|
33
|
+
if (groupColumns.length === 0) {
|
|
34
|
+
return [];
|
|
35
|
+
}
|
|
36
|
+
const collapsedKeys = new Set(this.gridService.collapsedGroupKeys());
|
|
37
|
+
const groupAggregateDict = this.gridService.groupAggregateMap().toDictionary(e => e.key, e => e.value);
|
|
38
|
+
const showFooter = this.gridService.groupableOptions().showFooter;
|
|
39
|
+
return this.#rowFlattener.flatten(this.data(), groupColumns, collapsedKeys, showFooter, groupAggregateDict);
|
|
40
|
+
}, /* @ts-ignore */
|
|
41
|
+
...(ngDevMode ? [{ debugName: "flattenedGroupedRows" }] : /* istanbul ignore next */ []));
|
|
42
|
+
this.footerTableRowClass = computed(() => {
|
|
43
|
+
return gridFooterTableRowThemeVariants();
|
|
44
|
+
}, /* @ts-ignore */
|
|
45
|
+
...(ngDevMode ? [{ debugName: "footerTableRowClass" }] : /* istanbul ignore next */ []));
|
|
46
|
+
this.gridService = inject(GridService);
|
|
47
|
+
this.groupRowClass = computed(() => {
|
|
48
|
+
return gridGroupRowThemeVariants();
|
|
49
|
+
}, /* @ts-ignore */
|
|
50
|
+
...(ngDevMode ? [{ debugName: "groupRowClass" }] : /* istanbul ignore next */ []));
|
|
51
|
+
this.rowDragPlaceholderClass = computed(() => {
|
|
52
|
+
return gridRowDragPlaceholderThemeVariants();
|
|
53
|
+
}, /* @ts-ignore */
|
|
54
|
+
...(ngDevMode ? [{ debugName: "rowDragPlaceholderClass" }] : /* istanbul ignore next */ []));
|
|
55
|
+
this.rowDragPreviewClass = computed(() => {
|
|
56
|
+
return gridRowDragPreviewThemeVariants();
|
|
57
|
+
}, /* @ts-ignore */
|
|
58
|
+
...(ngDevMode ? [{ debugName: "rowDragPreviewClass" }] : /* istanbul ignore next */ []));
|
|
59
|
+
this.tableClass = computed(() => {
|
|
60
|
+
return gridListTableThemeVariants();
|
|
61
|
+
}, /* @ts-ignore */
|
|
62
|
+
...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
|
|
63
|
+
this.columns = input(ImmutableList.create(), /* @ts-ignore */
|
|
64
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
65
|
+
this.data = input(ImmutableList.create(), /* @ts-ignore */
|
|
66
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
67
|
+
this.span = span;
|
|
68
|
+
afterNextRender({
|
|
69
|
+
read: () => {
|
|
70
|
+
const bodyTableElement = this.bodyTableElementRef().nativeElement;
|
|
71
|
+
const bodyScrollElement = this.#hostElementRef.nativeElement;
|
|
72
|
+
this.gridService.bodyTableElement.set(bodyTableElement);
|
|
73
|
+
this.gridService.bodyScrollElement.set(bodyScrollElement);
|
|
74
|
+
this.setSubscriptions();
|
|
75
|
+
this.#destroyRef.onDestroy(() => {
|
|
76
|
+
if (this.gridService.bodyTableElement() === bodyTableElement) {
|
|
77
|
+
this.gridService.bodyTableElement.set(null);
|
|
78
|
+
}
|
|
79
|
+
if (this.gridService.bodyScrollElement() === bodyScrollElement) {
|
|
80
|
+
this.gridService.bodyScrollElement.set(null);
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
onGridRowClick(event, row) {
|
|
87
|
+
this.gridService.handleRowClick(event, row);
|
|
88
|
+
}
|
|
89
|
+
onGroupExpandChange(groupKey) {
|
|
90
|
+
this.gridService.toggleGroupCollapse(groupKey);
|
|
91
|
+
}
|
|
92
|
+
onRowDragEnded(_event) {
|
|
93
|
+
this.gridService.draggingRowUid.set(null);
|
|
94
|
+
}
|
|
95
|
+
onRowDragStarted(event) {
|
|
96
|
+
this.gridService.draggingRowUid.set(event.source.data.uid);
|
|
97
|
+
}
|
|
98
|
+
onRowDrop(event) {
|
|
99
|
+
this.gridService.draggingRowUid.set(null);
|
|
100
|
+
this.gridService.requestRowReorder(event.item.data, event.previousIndex, event.currentIndex);
|
|
101
|
+
}
|
|
102
|
+
onToggleDetailClick(row) {
|
|
103
|
+
const expanded = this.gridService.isRowExpanded(row);
|
|
104
|
+
this.gridService.setRowExpanded(row, !expanded);
|
|
105
|
+
}
|
|
106
|
+
setSubscriptions() {
|
|
107
|
+
fromEvent(this.#hostElementRef.nativeElement, "focus")
|
|
108
|
+
.pipe(takeUntilDestroyed(this.#destroyRef))
|
|
109
|
+
.subscribe(() => {
|
|
110
|
+
this.#gridNavigationService.focusActiveCellOrFirstHeader();
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridListComponent, isStandalone: true, selector: "mona-grid-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()" } }, viewQueries: [{ propertyName: "bodyTableElementRef", first: true, predicate: ["bodyTable"], descendants: true, isSignal: true }], ngImport: i0, template: "<table #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\n role=\"rowgroup\"\n cdkDropList\n [cdkDropListData]=\"data().toArray()\"\n [cdkDropListDisabled]=\"!gridService.rowReorderInteractionEnabled()\"\n (cdkDropListDropped)=\"onRowDrop($event)\">\n @if (gridService.addRowVisible()) {\n <tr monaGridAddRow [columns]=\"columns()\"></tr>\n }\n @if (gridService.groupColumns().length === 0) {\n @for (row of data(); track row.uid) {\n @let rowIndex = $index;\n <tr\n (click)=\"onGridRowClick($event, row)\"\n monaGridRow\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"row\"\n [cdkDragDisabled]=\"!gridService.canReorderRow(row)\"\n (cdkDragStarted)=\"onRowDragStarted($event)\"\n (cdkDragEnded)=\"onRowDragEnded($event)\"\n [index]=\"rowIndex\"\n [row]=\"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 [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 ===\n 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]=\"{ $implicit: row.data, element: rowElement, index: $index }\">\n </ng-container>\n }\n <ng-template cdkDragPreview>\n <div [class]=\"rowDragPreviewClass()\">\n <i aria-hidden=\"true\" class=\"ri-draggable\"></i>\n <span>{{ gridService.getRowReorderAriaLabel(row, rowIndex + gridService.paginationState().skip) }}</span>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <tr [class]=\"rowDragPlaceholderClass()\">\n <td\n [attr.colspan]=\"gridService.leadingStructuralColumnCount() + columns().length\"\n class=\"h-9 px-2\">\n <span class=\"flex items-center text-xs text-muted-foreground\">Move row</span>\n </td>\n </tr>\n </ng-template>\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 }\n } @else {\n @for (viewRow of flattenedGroupedRows(); track $index) {\n @let rowIndex = $index;\n @if (viewRow.type === \"group\") {\n @let isCollapsed = gridService.isGroupCollapsed(viewRow.groupKey);\n @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n\n <tr\n [class]=\"groupRowClass()\"\n role=\"row\"\n [attr.aria-level]=\"viewRow.depth + 1\"\n [attr.aria-expanded]=\"!isCollapsed\">\n @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.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]=\"viewRow.depth * gridService.groupColumnWidth\"\n [grouped]=\"true\"\n [indentCell]=\"true\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n }\n @let colspan =\n columns().length +\n gridService.groupColumns().length +\n (gridService.masterDetailTemplate() ? 1 : 0) +\n (gridService.selectionColumnVisible() ? 1 : 0) -\n viewRow.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]=\"viewRow.groupKey\"\n (toggle)=\"onGroupExpandChange(viewRow.groupKey)\"\n [attr.colspan]=\"colspan\">\n <p class=\"flex h-full items-center text-sm whitespace-nowrap\">\n <mona-grid-toggle\n [expanded]=\"!isCollapsed\"\n [width]=\"gridService.groupColumnWidth\"\n [type]=\"'group'\"\n (expandedChange)=\"onGroupExpandChange(viewRow.groupKey)\"></mona-grid-toggle>\n <span class=\"font-bold\">{{ viewRow.title }}: {{ viewRow.groupValue }}</span>\n </p>\n </td>\n </tr>\n } @else if (viewRow.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]=\"viewRow.groupAggregate.groupKey\"></mona-grid-footer-cell>\n </td>\n }\n </tr>\n } @else {\n @let nextRow = flattenedGroupedRows()[rowIndex + 1];\n @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n <tr\n (click)=\"onGridRowClick($event, viewRow.row)\"\n monaGridRow\n [index]=\"rowIndex\"\n [row]=\"viewRow.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\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]=\"viewRow.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 <mona-grid-row-reorder-handle [row]=\"viewRow.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]=\"viewRow.row.uid\"\n [section]=\"'body'\"\n [cellKind]=\"'detail'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'detail'\"\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(viewRow.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]=\"viewRow.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 <mona-grid-selection-checkbox [row]=\"viewRow.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 ===\n gridService.leadingLogicalColumnCount() + columns().length - 1\n \"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"viewRow.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]=\"viewRow.row\"></mona-grid-cell>\n </td>\n }\n @if (gridService.contextMenuItems().length !== 0) {\n <ng-container\n [ngTemplateOutlet]=\"contextMenuTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: viewRow.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 (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth + 1; 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 [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 - 1;\n <td\n monaGridDetailIndentCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"\n (viewRow.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: viewRow.row.data }\"></ng-container>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n</table>\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: 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: "component", type: GridToggleComponent, selector: "mona-grid-toggle", inputs: ["expanded", "type", "width"], outputs: ["expandedChange"] }, { kind: "directive", type: GridFooterTableCellDirective, selector: "td[monaGridFooterTableCell]", inputs: ["footerCellMinWidth", "footerCellWidth", "footerColumn"] }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "groupPrefixWidth", "lockedCellHeader", "lockedStructuralOffset", "structuralColumn"] }, { 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: "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"] }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
|
|
115
|
+
}
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridListComponent, decorators: [{
|
|
117
|
+
type: Component,
|
|
118
|
+
args: [{ selector: "mona-grid-list", imports: [
|
|
119
|
+
GridAddRowComponent,
|
|
120
|
+
GridCellComponent,
|
|
121
|
+
NgTemplateOutlet,
|
|
122
|
+
ContextMenuComponent,
|
|
123
|
+
GridRowDirective,
|
|
124
|
+
GridCellDirective,
|
|
125
|
+
GridDetailRowDirective,
|
|
126
|
+
GridDetailIndentCellDirective,
|
|
127
|
+
GridDetailContentCellDirective,
|
|
128
|
+
SlicePipe,
|
|
129
|
+
GridToggleComponent,
|
|
130
|
+
GridFooterTableCellDirective,
|
|
131
|
+
GridLogicalCellDirective,
|
|
132
|
+
GridLockedCellDirective,
|
|
133
|
+
GridFooterCellComponent,
|
|
134
|
+
GridSelectionCheckboxComponent,
|
|
135
|
+
GridRowReorderHandleComponent,
|
|
136
|
+
CdkDropList,
|
|
137
|
+
CdkDrag,
|
|
138
|
+
CdkDragPreview
|
|
139
|
+
], host: {
|
|
140
|
+
"[class]": "baseClass()"
|
|
141
|
+
}, template: "<table #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\n role=\"rowgroup\"\n cdkDropList\n [cdkDropListData]=\"data().toArray()\"\n [cdkDropListDisabled]=\"!gridService.rowReorderInteractionEnabled()\"\n (cdkDropListDropped)=\"onRowDrop($event)\">\n @if (gridService.addRowVisible()) {\n <tr monaGridAddRow [columns]=\"columns()\"></tr>\n }\n @if (gridService.groupColumns().length === 0) {\n @for (row of data(); track row.uid) {\n @let rowIndex = $index;\n <tr\n (click)=\"onGridRowClick($event, row)\"\n monaGridRow\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"row\"\n [cdkDragDisabled]=\"!gridService.canReorderRow(row)\"\n (cdkDragStarted)=\"onRowDragStarted($event)\"\n (cdkDragEnded)=\"onRowDragEnded($event)\"\n [index]=\"rowIndex\"\n [row]=\"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 [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 ===\n 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]=\"{ $implicit: row.data, element: rowElement, index: $index }\">\n </ng-container>\n }\n <ng-template cdkDragPreview>\n <div [class]=\"rowDragPreviewClass()\">\n <i aria-hidden=\"true\" class=\"ri-draggable\"></i>\n <span>{{ gridService.getRowReorderAriaLabel(row, rowIndex + gridService.paginationState().skip) }}</span>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <tr [class]=\"rowDragPlaceholderClass()\">\n <td\n [attr.colspan]=\"gridService.leadingStructuralColumnCount() + columns().length\"\n class=\"h-9 px-2\">\n <span class=\"flex items-center text-xs text-muted-foreground\">Move row</span>\n </td>\n </tr>\n </ng-template>\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 }\n } @else {\n @for (viewRow of flattenedGroupedRows(); track $index) {\n @let rowIndex = $index;\n @if (viewRow.type === \"group\") {\n @let isCollapsed = gridService.isGroupCollapsed(viewRow.groupKey);\n @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n\n <tr\n [class]=\"groupRowClass()\"\n role=\"row\"\n [attr.aria-level]=\"viewRow.depth + 1\"\n [attr.aria-expanded]=\"!isCollapsed\">\n @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.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]=\"viewRow.depth * gridService.groupColumnWidth\"\n [grouped]=\"true\"\n [indentCell]=\"true\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n }\n @let colspan =\n columns().length +\n gridService.groupColumns().length +\n (gridService.masterDetailTemplate() ? 1 : 0) +\n (gridService.selectionColumnVisible() ? 1 : 0) -\n viewRow.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]=\"viewRow.groupKey\"\n (toggle)=\"onGroupExpandChange(viewRow.groupKey)\"\n [attr.colspan]=\"colspan\">\n <p class=\"flex h-full items-center text-sm whitespace-nowrap\">\n <mona-grid-toggle\n [expanded]=\"!isCollapsed\"\n [width]=\"gridService.groupColumnWidth\"\n [type]=\"'group'\"\n (expandedChange)=\"onGroupExpandChange(viewRow.groupKey)\"></mona-grid-toggle>\n <span class=\"font-bold\">{{ viewRow.title }}: {{ viewRow.groupValue }}</span>\n </p>\n </td>\n </tr>\n } @else if (viewRow.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]=\"viewRow.groupAggregate.groupKey\"></mona-grid-footer-cell>\n </td>\n }\n </tr>\n } @else {\n @let nextRow = flattenedGroupedRows()[rowIndex + 1];\n @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n <tr\n (click)=\"onGridRowClick($event, viewRow.row)\"\n monaGridRow\n [index]=\"rowIndex\"\n [row]=\"viewRow.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\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]=\"viewRow.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 <mona-grid-row-reorder-handle [row]=\"viewRow.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]=\"viewRow.row.uid\"\n [section]=\"'body'\"\n [cellKind]=\"'detail'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'detail'\"\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(viewRow.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]=\"viewRow.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 <mona-grid-selection-checkbox [row]=\"viewRow.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 ===\n gridService.leadingLogicalColumnCount() + columns().length - 1\n \"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"viewRow.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]=\"viewRow.row\"></mona-grid-cell>\n </td>\n }\n @if (gridService.contextMenuItems().length !== 0) {\n <ng-container\n [ngTemplateOutlet]=\"contextMenuTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: viewRow.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 (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth + 1; 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 [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 - 1;\n <td\n monaGridDetailIndentCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"\n (viewRow.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: viewRow.row.data }\"></ng-container>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n</table>\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" }]
|
|
142
|
+
}], ctorParameters: () => [], propDecorators: { bodyTableElementRef: [{ type: i0.ViewChild, args: ["bodyTable", { isSignal: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
|
|
143
|
+
|
|
144
|
+
export { GridListComponent };
|
|
145
|
+
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-BhnFFIOl.mjs.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { computed, input, Directive, inject, Component, signal, ElementRef, viewChild, output, effect, untracked, afterNextRender, ChangeDetectionStrategy, Injector, LOCALE_ID, model } from '@angular/core';
|
|
3
|
-
import {
|
|
3
|
+
import { m as gridListTableCellThemeVariants, n as gridDetailContentCellThemeVariants, o as gridDetailIndentCellThemeVariants, p as gridDetailRowThemeVariants, c as GridService, q as gridListTableRowThemeVariants, r as gridCellEditorBaseThemeVariants, s as gridCellEditorInputThemeVariants, j as GridLockedCellDirective, i as GridLogicalCellDirective, G as GridNavigationService, t as gridCellBaseThemeVariants, u as gridCellContainerThemeVariants, v as gridCellDirtyIndicatorThemeVariants, w as gridCellTextThemeVariants, x as gridRowReorderHandleThemeVariants, y as gridSelectionCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DaOemy_G.mjs';
|
|
4
4
|
import { ImmutableList } from '@mirei/ts-collections';
|
|
5
5
|
import * as i1 from '@angular/cdk/a11y';
|
|
6
|
-
import { A11yModule } from '@angular/cdk/a11y';
|
|
6
|
+
import { A11yModule, LiveAnnouncer } from '@angular/cdk/a11y';
|
|
7
7
|
import { NgTemplateOutlet, formatDate } from '@angular/common';
|
|
8
8
|
import { LucideCheck, LucideOctagonAlert, LucideX, LucidePencil, LucideTrash2, LucideMinus, LucideChevronDown, LucidePlus, LucideChevronRight, LucideDynamicIcon } from '@lucide/angular';
|
|
9
9
|
import { ButtonDirective } from '@nanahoshi/mona-ui/button';
|
|
@@ -15,6 +15,7 @@ import { CheckBoxComponent } from '@nanahoshi/mona-ui/check-box';
|
|
|
15
15
|
import { DatePickerComponent } from '@nanahoshi/mona-ui/date-picker';
|
|
16
16
|
import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
|
|
17
17
|
import { TextBoxComponent } from '@nanahoshi/mona-ui/text-box';
|
|
18
|
+
import { CdkDragHandle } from '@angular/cdk/drag-drop';
|
|
18
19
|
|
|
19
20
|
class GridCellDirective {
|
|
20
21
|
constructor() {
|
|
@@ -547,7 +548,7 @@ class GridAddRowComponent {
|
|
|
547
548
|
this.gridService.patchAddCell(column.field, value);
|
|
548
549
|
}
|
|
549
550
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridAddRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
550
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridAddRowComponent, isStandalone: true, selector: "tr[monaGridAddRow]", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "row", "data-grid-add-row": "true" }, properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (gridService.addRowData(); as rowData) {\n @let session = gridService.editSession();\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 [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.groupColumnWidth\"></td>\n }\n @if (gridService.
|
|
551
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridAddRowComponent, isStandalone: true, selector: "tr[monaGridAddRow]", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "row", "data-grid-add-row": "true" }, properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (gridService.addRowData(); as rowData) {\n @let session = gridService.editSession();\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 [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.groupColumnWidth\"></td>\n }\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridCell\n monaGridLogicalCell\n monaGridLockedCell\n [structuralColumn]=\"'reorder'\"\n [rowIndex]=\"-1\"\n [colIndex]=\"gridService.structuralColIndexMap().get('reorder') ?? 0\"\n [cellKind]=\"'command'\"\n [columnId]=\"'$rowReorder'\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('reorder') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'reorder'\"\n [section]=\"'add'\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n }\n @if (gridService.masterDetailTemplate()) {\n <td\n monaGridCell\n monaGridLogicalCell\n monaGridLockedCell\n [structuralColumn]=\"'detail'\"\n [masterDetailToggle]=\"true\"\n [rowIndex]=\"-1\"\n [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n [cellKind]=\"'detail'\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'detail'\"\n [section]=\"'add'\"\n [style.width.px]=\"gridService.detailColumnWidth\"></td>\n }\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridCell\n monaGridLogicalCell\n monaGridLockedCell\n [structuralColumn]=\"'selection'\"\n [rowIndex]=\"-1\"\n [colIndex]=\"gridService.structuralColIndexMap().get('selection') ?? 0\"\n [cellKind]=\"'command'\"\n [columnId]=\"'$selection'\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('selection') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'selection'\"\n [section]=\"'add'\"\n [style.width.px]=\"gridService.selectionColumnWidth\"></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 [rowIndex]=\"-1\"\n [section]=\"'add'\"\n [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n [lastInRow]=\"colIndex === gridService.leadingLogicalColumnCount() + columns().length - 1\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"column.calculatedWidth\"\n [style.min-width.px]=\"column.minWidth\">\n @if (column.kind === \"command\") {\n <mona-grid-command-cell [column]=\"column\" [newRow]=\"true\"></mona-grid-command-cell>\n } @else if (column.editable && session) {\n <mona-grid-editor\n [column]=\"column\"\n [autoFocus]=\"isFirstEditableColumn(column)\"\n [isNew]=\"true\"\n [session]=\"session\"\n (commit)=\"onCommit()\"\n (cancel)=\"onCancel()\"></mona-grid-editor>\n } @else {\n <span class=\"block truncate px-2\">{{ rowData[column.field] }}</span>\n }\n </td>\n }\n}\n", dependencies: [{ kind: "directive", type: GridCellDirective, selector: "td[monaGridCell]", inputs: ["dataCell", "groupHeader", "groupToggle", "grouped", "indentCell", "lastInRow", "masterDetailContent", "masterDetailToggle", "nextRowType", "prevRowType"] }, { kind: "component", type: GridCommandCellComponent, selector: "mona-grid-command-cell", inputs: ["column", "newRow", "row"] }, { kind: "component", type: GridEditorComponent, selector: "mona-grid-editor", inputs: ["autoFocus", "column", "isNew", "session", "tabNavigationEnabled"], outputs: ["cancel", "commit", "tabNavigate"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "groupPrefixWidth", "lockedCellHeader", "lockedStructuralOffset", "structuralColumn"] }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
551
552
|
}
|
|
552
553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridAddRowComponent, decorators: [{
|
|
553
554
|
type: Component,
|
|
@@ -561,7 +562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
561
562
|
"[class]": "baseClass()",
|
|
562
563
|
role: "row",
|
|
563
564
|
"data-grid-add-row": "true"
|
|
564
|
-
}, template: "@if (gridService.addRowData(); as rowData) {\n @let session = gridService.editSession();\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 [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.groupColumnWidth\"></td>\n }\n @if (gridService.
|
|
565
|
+
}, template: "@if (gridService.addRowData(); as rowData) {\n @let session = gridService.editSession();\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 [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.groupColumnWidth\"></td>\n }\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridCell\n monaGridLogicalCell\n monaGridLockedCell\n [structuralColumn]=\"'reorder'\"\n [rowIndex]=\"-1\"\n [colIndex]=\"gridService.structuralColIndexMap().get('reorder') ?? 0\"\n [cellKind]=\"'command'\"\n [columnId]=\"'$rowReorder'\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('reorder') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'reorder'\"\n [section]=\"'add'\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n }\n @if (gridService.masterDetailTemplate()) {\n <td\n monaGridCell\n monaGridLogicalCell\n monaGridLockedCell\n [structuralColumn]=\"'detail'\"\n [masterDetailToggle]=\"true\"\n [rowIndex]=\"-1\"\n [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n [cellKind]=\"'detail'\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'detail'\"\n [section]=\"'add'\"\n [style.width.px]=\"gridService.detailColumnWidth\"></td>\n }\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridCell\n monaGridLogicalCell\n monaGridLockedCell\n [structuralColumn]=\"'selection'\"\n [rowIndex]=\"-1\"\n [colIndex]=\"gridService.structuralColIndexMap().get('selection') ?? 0\"\n [cellKind]=\"'command'\"\n [columnId]=\"'$selection'\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('selection') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'selection'\"\n [section]=\"'add'\"\n [style.width.px]=\"gridService.selectionColumnWidth\"></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 [rowIndex]=\"-1\"\n [section]=\"'add'\"\n [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n [lastInRow]=\"colIndex === gridService.leadingLogicalColumnCount() + columns().length - 1\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"column.calculatedWidth\"\n [style.min-width.px]=\"column.minWidth\">\n @if (column.kind === \"command\") {\n <mona-grid-command-cell [column]=\"column\" [newRow]=\"true\"></mona-grid-command-cell>\n } @else if (column.editable && session) {\n <mona-grid-editor\n [column]=\"column\"\n [autoFocus]=\"isFirstEditableColumn(column)\"\n [isNew]=\"true\"\n [session]=\"session\"\n (commit)=\"onCommit()\"\n (cancel)=\"onCancel()\"></mona-grid-editor>\n } @else {\n <span class=\"block truncate px-2\">{{ rowData[column.field] }}</span>\n }\n </td>\n }\n}\n" }]
|
|
565
566
|
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
|
|
566
567
|
|
|
567
568
|
const FOCUSABLE_TARGET_SELECTOR = "button, input, select, textarea, a[href], [tabindex]";
|
|
@@ -762,6 +763,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
762
763
|
}, template: "@let dataItem = row().data;\n@let dataKey = column().field;\n\n@if (column().kind === \"command\") {\n <mona-grid-command-cell [column]=\"column()\" [row]=\"row()\"></mona-grid-command-cell>\n} @else {\n <div\n role=\"gridcell\"\n [class]=\"cellContainerClass()\"\n cdkMonitorSubtreeFocus\n [attr.data-uid]=\"cellUid()\"\n [attr.data-ruid]=\"row().uid\"\n [attr.data-field]=\"dataKey\"\n [attr.data-col-index]=\"column().index\"\n [attr.aria-readonly]=\"!(gridService.editableOptions().enabled && column().editable)\"\n (dblclick)=\"onCellDoubleClick($event)\">\n @if (isEditing() && gridService.editSession(); as session) {\n <mona-grid-editor\n [column]=\"column()\"\n [autoFocus]=\"shouldAutoFocusEditor()\"\n [session]=\"session\"\n [tabNavigationEnabled]=\"editContextIsCellMode()\"\n (commit)=\"onEditCommit()\"\n (cancel)=\"onEditCancel()\"\n (tabNavigate)=\"onEditTabNavigate($event)\"></mona-grid-editor>\n } @else if (column().cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"column().cellTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: dataItem, column: column().field }\"></ng-container>\n } @else {\n <span [class]=\"cellTextClass()\">{{ formattedDisplayValue() }}</span>\n }\n @if (!isCellPristine()) {\n <span aria-hidden=\"true\" [class]=\"cellDirtyIndicatorClass()\" title=\"Modified\"></span>\n }\n </div>\n}\n" }]
|
|
763
764
|
}], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
|
|
764
765
|
|
|
766
|
+
const ROW_REORDER_DISABLED_REASON_TEXT = {
|
|
767
|
+
disabled: "Row reordering is disabled.",
|
|
768
|
+
editing: "Finish editing to reorder rows.",
|
|
769
|
+
filtered: "Clear filters to reorder rows.",
|
|
770
|
+
grouped: "Clear grouping to reorder rows.",
|
|
771
|
+
"single-row": "At least two rows are needed to reorder.",
|
|
772
|
+
sorted: "Clear sorting to reorder rows.",
|
|
773
|
+
"virtual-scroll": "Row reordering isn't available while virtual scrolling is enabled."
|
|
774
|
+
};
|
|
775
|
+
class GridRowReorderHandleComponent {
|
|
776
|
+
constructor() {
|
|
777
|
+
this.#gridService = inject(GridService);
|
|
778
|
+
this.#liveAnnouncer = inject(LiveAnnouncer);
|
|
779
|
+
this.ariaLabel = computed(() => {
|
|
780
|
+
const absoluteIndex = this.pageIndex() + this.#gridService.paginationState().skip;
|
|
781
|
+
const label = this.#gridService.getRowReorderAriaLabel(this.row(), absoluteIndex);
|
|
782
|
+
const reasonText = this.disabledReasonText();
|
|
783
|
+
const suffix = reasonText == null ? "" : ` ${reasonText}`;
|
|
784
|
+
return `${label}. Use Alt plus Up Arrow or Alt plus Down Arrow to move.${suffix}`;
|
|
785
|
+
}, /* @ts-ignore */
|
|
786
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
787
|
+
this.disabled = computed(() => !this.#gridService.canReorderRow(this.row()), /* @ts-ignore */
|
|
788
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
789
|
+
this.disabledReasonText = computed(() => {
|
|
790
|
+
const reason = this.#gridService.rowReorderDisabledReason();
|
|
791
|
+
return reason == null ? null : ROW_REORDER_DISABLED_REASON_TEXT[reason];
|
|
792
|
+
}, /* @ts-ignore */
|
|
793
|
+
...(ngDevMode ? [{ debugName: "disabledReasonText" }] : /* istanbul ignore next */ []));
|
|
794
|
+
this.handleClass = computed(() => gridRowReorderHandleThemeVariants(), /* @ts-ignore */
|
|
795
|
+
...(ngDevMode ? [{ debugName: "handleClass" }] : /* istanbul ignore next */ []));
|
|
796
|
+
/**
|
|
797
|
+
* @description The row's position within the current page, used to move the row and derive its accessible label.
|
|
798
|
+
*/
|
|
799
|
+
this.pageIndex = input.required(/* @ts-ignore */
|
|
800
|
+
...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
|
|
801
|
+
/**
|
|
802
|
+
* @description The grid row whose reorder handle this button controls.
|
|
803
|
+
*/
|
|
804
|
+
this.row = input.required(/* @ts-ignore */
|
|
805
|
+
...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
|
|
806
|
+
}
|
|
807
|
+
#gridService;
|
|
808
|
+
#liveAnnouncer;
|
|
809
|
+
onKeydown(event) {
|
|
810
|
+
if ((event.key !== "ArrowUp" && event.key !== "ArrowDown") || !event.altKey) {
|
|
811
|
+
return;
|
|
812
|
+
}
|
|
813
|
+
event.preventDefault();
|
|
814
|
+
event.stopPropagation();
|
|
815
|
+
const direction = event.key === "ArrowUp" ? -1 : 1;
|
|
816
|
+
const targetIndex = this.pageIndex() + direction;
|
|
817
|
+
if (targetIndex < 0 || targetIndex >= this.#gridService.viewPageRows().length) {
|
|
818
|
+
return;
|
|
819
|
+
}
|
|
820
|
+
const moved = this.#gridService.requestRowReorder(this.row(), this.pageIndex(), targetIndex);
|
|
821
|
+
if (moved) {
|
|
822
|
+
const skip = this.#gridService.paginationState().skip;
|
|
823
|
+
this.#liveAnnouncer.announce(`Moved row ${skip + this.pageIndex() + 1} to position ${skip + targetIndex + 1}.`);
|
|
824
|
+
}
|
|
825
|
+
}
|
|
826
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowReorderHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: GridRowReorderHandleComponent, isStandalone: true, selector: "mona-grid-row-reorder-handle", inputs: { pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "$event.stopPropagation()", "contextmenu": "$event.stopPropagation()", "dblclick": "$event.stopPropagation()" } }, ngImport: i0, template: "<button\n type=\"button\"\n cdkDragHandle\n [class]=\"handleClass()\"\n [disabled]=\"disabled()\"\n [attr.title]=\"disabledReasonText()\"\n [attr.aria-label]=\"ariaLabel()\"\n aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown\"\n (keydown)=\"onKeydown($event)\">\n <i aria-hidden=\"true\" class=\"ri-draggable\"></i>\n</button>\n", dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
828
|
+
}
|
|
829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowReorderHandleComponent, decorators: [{
|
|
830
|
+
type: Component,
|
|
831
|
+
args: [{ selector: "mona-grid-row-reorder-handle", imports: [CdkDragHandle], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
832
|
+
"(click)": "$event.stopPropagation()",
|
|
833
|
+
"(contextmenu)": "$event.stopPropagation()",
|
|
834
|
+
"(dblclick)": "$event.stopPropagation()"
|
|
835
|
+
}, template: "<button\n type=\"button\"\n cdkDragHandle\n [class]=\"handleClass()\"\n [disabled]=\"disabled()\"\n [attr.title]=\"disabledReasonText()\"\n [attr.aria-label]=\"ariaLabel()\"\n aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown\"\n (keydown)=\"onKeydown($event)\">\n <i aria-hidden=\"true\" class=\"ri-draggable\"></i>\n</button>\n" }]
|
|
836
|
+
}], propDecorators: { pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
|
|
837
|
+
|
|
765
838
|
class GridSelectionCheckboxComponent {
|
|
766
839
|
constructor() {
|
|
767
840
|
this.#gridService = inject(GridService);
|
|
@@ -834,5 +907,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
834
907
|
args: [{ selector: "mona-grid-toggle", imports: [LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n [style.width.px]=\"width()\"\n class=\"inline-flex items-center justify-center h-full aspect-square\"\n (click)=\"onToggleDetailClick($event)\">\n @if (expanded()) {\n <svg [lucideIcon]=\"collapseIcon()\" [size]=\"16\"></svg>\n } @else {\n <svg [lucideIcon]=\"expandIcon()\" [size]=\"16\"></svg>\n }\n</span>\n" }]
|
|
835
908
|
}], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: true }] }, { type: i0.Output, args: ["expandedChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }] } });
|
|
836
909
|
|
|
837
|
-
export { GridAddRowComponent as G, GridCellComponent as a, GridRowDirective as b, GridCellDirective as c, GridDetailRowDirective as d, GridDetailIndentCellDirective as e, GridDetailContentCellDirective as f, GridToggleComponent as g, GridSelectionCheckboxComponent as h };
|
|
838
|
-
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-toggle.component-
|
|
910
|
+
export { GridAddRowComponent as G, GridCellComponent as a, GridRowDirective as b, GridCellDirective as c, GridDetailRowDirective as d, GridDetailIndentCellDirective as e, GridDetailContentCellDirective as f, GridToggleComponent as g, GridSelectionCheckboxComponent as h, GridRowReorderHandleComponent as i };
|
|
911
|
+
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-toggle.component-DE3ffsva.mjs.map
|