@nanahoshi/mona-ui 0.9.0 → 0.11.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.
Files changed (24) hide show
  1. package/fesm2022/nanahoshi-mona-ui-combo-box.mjs +53 -25
  2. package/fesm2022/nanahoshi-mona-ui-dropdown-list.mjs +53 -24
  3. package/fesm2022/nanahoshi-mona-ui-editor.mjs +3 -3
  4. package/fesm2022/nanahoshi-mona-ui-filter.mjs +1 -1
  5. package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-cell.component-D05Rq7-1.mjs → nanahoshi-mona-ui-grid-grid-footer-cell.component-C86jzKCU.mjs} +2 -2
  6. package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Bad0K1Cw.mjs → nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-D_GxIU2u.mjs} +2 -2
  7. package/fesm2022/nanahoshi-mona-ui-grid-grid-list.component-C9VBe6IU.mjs +145 -0
  8. package/fesm2022/{nanahoshi-mona-ui-grid-grid-toggle.component-DvuQvc7E.mjs → nanahoshi-mona-ui-grid-grid-toggle.component-BpgLVr6a.mjs} +79 -6
  9. package/fesm2022/nanahoshi-mona-ui-grid-grid-virtual-list.component-9f5wNcOJ.mjs +233 -0
  10. package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-RQvhjBse.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CChyqXg7.mjs} +329 -55
  11. package/fesm2022/nanahoshi-mona-ui-grid.mjs +1 -1
  12. package/fesm2022/nanahoshi-mona-ui-internal-list.mjs +24 -21
  13. package/fesm2022/nanahoshi-mona-ui-multi-select.mjs +46 -12
  14. package/fesm2022/nanahoshi-mona-ui-pager.mjs +1 -1
  15. package/package.json +1 -1
  16. package/types/nanahoshi-mona-ui-auto-complete.d.ts +2 -2
  17. package/types/nanahoshi-mona-ui-combo-box.d.ts +26 -10
  18. package/types/nanahoshi-mona-ui-dropdown-list.d.ts +25 -9
  19. package/types/nanahoshi-mona-ui-dropdowns.d.ts +3 -3
  20. package/types/nanahoshi-mona-ui-grid.d.ts +107 -17
  21. package/types/nanahoshi-mona-ui-internal-list.d.ts +13 -4
  22. package/types/nanahoshi-mona-ui-multi-select.d.ts +26 -10
  23. package/fesm2022/nanahoshi-mona-ui-grid-grid-list.component-QqUUL60F.mjs +0 -122
  24. package/fesm2022/nanahoshi-mona-ui-grid-grid-virtual-list.component-BmahjOXq.mjs +0 -232
@@ -1,122 +0,0 @@
1
- import { NgTemplateOutlet } from '@angular/common';
2
- import * as i0 from '@angular/core';
3
- import { inject, DestroyRef, ElementRef, viewChild, computed, input, afterNextRender, Component } from '@angular/core';
4
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
5
- import { ImmutableList, ImmutableSet, span } from '@mirei/ts-collections';
6
- import { SlicePipe } from '@nanahoshi/mona-ui/common';
7
- import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
8
- import { fromEvent } from 'rxjs';
9
- 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 } from './nanahoshi-mona-ui-grid-grid-toggle.component-DvuQvc7E.mjs';
10
- import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Bad0K1Cw.mjs';
11
- import { G as GridNavigationService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, b as gridFooterTableRowThemeVariants, c as GridService, d as gridGroupRowThemeVariants, e as gridListTableThemeVariants, f as GridLogicalCellDirective, h as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-RQvhjBse.mjs';
12
- import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-D05Rq7-1.mjs';
13
-
14
- class GridListComponent {
15
- #destroyRef;
16
- #gridNavigationService;
17
- #hostElementRef;
18
- #rowFlattener;
19
- constructor() {
20
- this.#destroyRef = inject(DestroyRef);
21
- this.#gridNavigationService = inject(GridNavigationService);
22
- this.#hostElementRef = inject((ElementRef));
23
- this.#rowFlattener = inject(GridRowFlattenerService);
24
- this.bodyTableElementRef = viewChild.required("bodyTable", /* @ts-ignore */
25
- ...(ngDevMode ? [{ debugName: "bodyTableElementRef" }] : /* istanbul ignore next */ []));
26
- this.baseClass = computed(() => {
27
- return gridListBaseThemeVariants({ virtual: false });
28
- }, /* @ts-ignore */
29
- ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
30
- this.flattenedGroupedRows = computed(() => {
31
- const groupColumns = this.gridService.groupColumns();
32
- if (groupColumns.length === 0) {
33
- return [];
34
- }
35
- const collapsedKeys = new Set(this.gridService.collapsedGroupKeys());
36
- const groupAggregateDict = this.gridService.groupAggregateMap().toDictionary(e => e.key, e => e.value);
37
- const showFooter = this.gridService.groupableOptions().showFooter;
38
- return this.#rowFlattener.flatten(this.data(), groupColumns, collapsedKeys, showFooter, groupAggregateDict);
39
- }, /* @ts-ignore */
40
- ...(ngDevMode ? [{ debugName: "flattenedGroupedRows" }] : /* istanbul ignore next */ []));
41
- this.footerTableRowClass = computed(() => {
42
- return gridFooterTableRowThemeVariants();
43
- }, /* @ts-ignore */
44
- ...(ngDevMode ? [{ debugName: "footerTableRowClass" }] : /* istanbul ignore next */ []));
45
- this.gridService = inject(GridService);
46
- this.groupRowClass = computed(() => {
47
- return gridGroupRowThemeVariants();
48
- }, /* @ts-ignore */
49
- ...(ngDevMode ? [{ debugName: "groupRowClass" }] : /* istanbul ignore next */ []));
50
- this.tableClass = computed(() => {
51
- return gridListTableThemeVariants();
52
- }, /* @ts-ignore */
53
- ...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
54
- this.columns = input(ImmutableList.create(), /* @ts-ignore */
55
- ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
56
- this.data = input(ImmutableSet.create(), /* @ts-ignore */
57
- ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
58
- this.span = span;
59
- afterNextRender({
60
- read: () => {
61
- const bodyTableElement = this.bodyTableElementRef().nativeElement;
62
- const bodyScrollElement = this.#hostElementRef.nativeElement;
63
- this.gridService.bodyTableElement.set(bodyTableElement);
64
- this.gridService.bodyScrollElement.set(bodyScrollElement);
65
- this.setSubscriptions();
66
- this.#destroyRef.onDestroy(() => {
67
- if (this.gridService.bodyTableElement() === bodyTableElement) {
68
- this.gridService.bodyTableElement.set(null);
69
- }
70
- if (this.gridService.bodyScrollElement() === bodyScrollElement) {
71
- this.gridService.bodyScrollElement.set(null);
72
- }
73
- });
74
- }
75
- });
76
- }
77
- onGridRowClick(event, row) {
78
- this.gridService.handleRowClick(event, row);
79
- }
80
- onGroupExpandChange(groupKey) {
81
- this.gridService.toggleGroupCollapse(groupKey);
82
- }
83
- onToggleDetailClick(row) {
84
- const expanded = this.gridService.isRowExpanded(row);
85
- this.gridService.setRowExpanded(row, !expanded);
86
- }
87
- setSubscriptions() {
88
- fromEvent(this.#hostElementRef.nativeElement, "focus")
89
- .pipe(takeUntilDestroyed(this.#destroyRef))
90
- .subscribe(() => {
91
- this.#gridNavigationService.focusActiveCellOrFirstHeader();
92
- });
93
- }
94
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
95
- 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.masterDetailTemplate()) {\n <col [style.width.px]=\"gridService.groupColumnWidth\" />\n }\n @if (gridService.selectionColumnVisible()) {\n <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n }\n @for (col of columns(); track $index) {\n <col [style.width.px]=\"col.calculatedWidth\" />\n }\n </colgroup>\n <tbody role=\"rowgroup\">\n @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 [index]=\"rowIndex\"\n [row]=\"row\"\n #gridRow=\"monaGridRow\"\n #rowElement>\n @if (gridService.masterDetailTemplate()) {\n <td\n monaGridCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"0\"\n [masterDetailToggle]=\"true\"\n monaGridLogicalCell\n [cellKind]=\"'detail'\"\n [colIndex]=\"0\"\n [firstInRow]=\"true\"\n [lastInRow]=\"columns().length === 0 && !gridService.selectionColumnVisible()\"\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 [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n monaGridLogicalCell\n [cellKind]=\"'command'\"\n [columnId]=\"'$selection'\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"row.uid\"\n [section]=\"'body'\"\n [colIndex]=\"gridService.masterDetailTemplate() ? 1 : 0\"\n [firstInRow]=\"!gridService.masterDetailTemplate()\"\n [lastInRow]=\"columns().length === 0\"\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 </tr>\n @if (gridRow.expanded()) {\n <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n <td\n monaGridCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"0\"\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 [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\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 @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.masterDetailTemplate()) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"\n gridService.groupColumns().length * gridService.groupColumnWidth\n \"\n [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n }\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\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.masterDetailTemplate()) {\n <td\n monaGridCell\n monaGridLogicalCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"\n gridService.groupColumns().length * gridService.groupColumnWidth\n \"\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]=\"0\"\n [firstInRow]=\"true\"\n [lastInRow]=\"columns().length === 0 && !gridService.selectionColumnVisible()\"\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 [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\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.masterDetailTemplate() ? 1 : 0\"\n [firstInRow]=\"!gridService.masterDetailTemplate()\"\n [lastInRow]=\"columns().length === 0\"\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()) {\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 @let colspan = columns().length + gridService.groupColumns().length - 1;\n <td\n monaGridDetailIndentCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"(viewRow.depth + 1) * gridService.groupColumnWidth\"\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 [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\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", "lockedCellHeader", "lockedStructuralOffset"] }, { 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: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
96
- }
97
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridListComponent, decorators: [{
98
- type: Component,
99
- args: [{ selector: "mona-grid-list", imports: [
100
- GridAddRowComponent,
101
- GridCellComponent,
102
- NgTemplateOutlet,
103
- ContextMenuComponent,
104
- GridRowDirective,
105
- GridCellDirective,
106
- GridDetailRowDirective,
107
- GridDetailIndentCellDirective,
108
- GridDetailContentCellDirective,
109
- SlicePipe,
110
- GridToggleComponent,
111
- GridFooterTableCellDirective,
112
- GridLogicalCellDirective,
113
- GridLockedCellDirective,
114
- GridFooterCellComponent,
115
- GridSelectionCheckboxComponent
116
- ], host: {
117
- "[class]": "baseClass()"
118
- }, 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.masterDetailTemplate()) {\n <col [style.width.px]=\"gridService.groupColumnWidth\" />\n }\n @if (gridService.selectionColumnVisible()) {\n <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n }\n @for (col of columns(); track $index) {\n <col [style.width.px]=\"col.calculatedWidth\" />\n }\n </colgroup>\n <tbody role=\"rowgroup\">\n @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 [index]=\"rowIndex\"\n [row]=\"row\"\n #gridRow=\"monaGridRow\"\n #rowElement>\n @if (gridService.masterDetailTemplate()) {\n <td\n monaGridCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"0\"\n [masterDetailToggle]=\"true\"\n monaGridLogicalCell\n [cellKind]=\"'detail'\"\n [colIndex]=\"0\"\n [firstInRow]=\"true\"\n [lastInRow]=\"columns().length === 0 && !gridService.selectionColumnVisible()\"\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 [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n monaGridLogicalCell\n [cellKind]=\"'command'\"\n [columnId]=\"'$selection'\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"row.uid\"\n [section]=\"'body'\"\n [colIndex]=\"gridService.masterDetailTemplate() ? 1 : 0\"\n [firstInRow]=\"!gridService.masterDetailTemplate()\"\n [lastInRow]=\"columns().length === 0\"\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 </tr>\n @if (gridRow.expanded()) {\n <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n <td\n monaGridCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"0\"\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 [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\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 @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.masterDetailTemplate()) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"\n gridService.groupColumns().length * gridService.groupColumnWidth\n \"\n [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n }\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\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.masterDetailTemplate()) {\n <td\n monaGridCell\n monaGridLogicalCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"\n gridService.groupColumns().length * gridService.groupColumnWidth\n \"\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]=\"0\"\n [firstInRow]=\"true\"\n [lastInRow]=\"columns().length === 0 && !gridService.selectionColumnVisible()\"\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 [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\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.masterDetailTemplate() ? 1 : 0\"\n [firstInRow]=\"!gridService.masterDetailTemplate()\"\n [lastInRow]=\"columns().length === 0\"\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()) {\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 @let colspan = columns().length + gridService.groupColumns().length - 1;\n <td\n monaGridDetailIndentCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"(viewRow.depth + 1) * gridService.groupColumnWidth\"\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 [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\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" }]
119
- }], 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 }] }] } });
120
-
121
- export { GridListComponent };
122
- //# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-QqUUL60F.mjs.map