@ni/nimble-components 32.3.1 → 32.4.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/dist/all-components-bundle.js +165 -166
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +4524 -4534
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/table/index.d.ts +2 -2
- package/dist/esm/table/index.js +6 -6
- package/dist/esm/table/index.js.map +1 -1
- package/dist/esm/table/models/table-layout-manager.d.ts +7 -4
- package/dist/esm/table/models/table-layout-manager.js +17 -10
- package/dist/esm/table/models/table-layout-manager.js.map +1 -1
- package/dist/esm/table/styles.js +1 -7
- package/dist/esm/table/styles.js.map +1 -1
- package/dist/esm/table/template.js +139 -142
- package/dist/esm/table/template.js.map +1 -1
- package/dist/esm/table/testing/table.pageobject.d.ts +17 -3
- package/dist/esm/table/testing/table.pageobject.js +65 -55
- package/dist/esm/table/testing/table.pageobject.js.map +1 -1
- package/dist/esm/theme-provider/design-tokens.js +2 -2
- package/dist/esm/theme-provider/design-tokens.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-layout-manager.js","sourceRoot":"","sources":["../../../../src/table/models/table-layout-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { observable } from '@microsoft/fast-element';\nimport type { Table } from '..';\nimport type { TableColumn } from '../../table-column/base';\nimport type { TableRecord } from '../types';\n\n/**\n * This class manages the layout of columns within a Table.\n * @interal\n */\nexport class TableLayoutManager<TData extends TableRecord> {\n @observable\n public isColumnBeingSized = false;\n\n @observable\n public activeColumnIndex?: number;\n\n @observable\n public activeColumnDivider?: number;\n\n private gridSizedColumns?: TableColumn[];\n private visibleColumns: TableColumn[] = [];\n private initialTableScrollableWidth?: number;\n private initialTableScrollableMinWidth?: number;\n private initialColumnTotalWidth?: number;\n private currentTotalDelta = 0;\n private dragStart = 0;\n private leftColumnIndex?: number;\n private rightColumnIndex?: number;\n private initialColumnWidths: {\n initalColumnFractionalWidth: number,\n initialPixelWidth: number\n }[] = [];\n\n public constructor(private readonly table: Table<TData>) {}\n\n public getGridTemplateColumns(): string {\n return this.getVisibleColumns()\n .map(column => {\n const {\n minPixelWidth,\n currentPixelWidth,\n currentFractionalWidth\n } = column.columnInternals;\n if (currentPixelWidth) {\n const coercedPixelWidth = Math.max(\n minPixelWidth,\n currentPixelWidth\n );\n return `${coercedPixelWidth}px`;\n }\n\n return `minmax(${minPixelWidth}px, ${currentFractionalWidth}fr)`;\n })\n .join(' ');\n }\n\n /**\n * Sets up state related to interactively sizing a column.\n * @param dragStart The x-position from which a column size was started\n * @param activeColumnDivider The divider that was clicked on\n */\n public beginColumnInteractiveSize(\n dragStart: number,\n activeColumnDivider: number\n ): void {\n this.activeColumnDivider = activeColumnDivider;\n this.leftColumnIndex = this.getLeftColumnIndexFromDivider(\n this.activeColumnDivider\n );\n this.rightColumnIndex = this.leftColumnIndex + 1;\n this.activeColumnIndex = this.leftColumnIndex + (this.activeColumnDivider % 2);\n this.dragStart = dragStart;\n this.currentTotalDelta = 0;\n this.visibleColumns = this.getVisibleColumns();\n this.setColumnsToFixedSize();\n this.initialTableScrollableWidth = this.table.viewport.scrollWidth;\n this.initialTableScrollableMinWidth = this.table.tableScrollableMinWidth;\n this.initialColumnTotalWidth = this.getTotalColumnFixedWidth();\n this.isColumnBeingSized = true;\n document.addEventListener('mousemove', this.onDividerMouseMove);\n document.addEventListener('mouseup', this.onDividerMouseUp);\n }\n\n /**\n * Determines if the specified column or any columns to the left are resizable.\n */\n public hasResizableColumnToLeft(columnIndex: number): boolean {\n return this.getFirstLeftResizableColumnIndex(columnIndex) !== -1;\n }\n\n /**\n * Determines if the specified column or any columns to the right are resizable.\n */\n private hasResizableColumnToRight(columnIndex: number): boolean {\n return this.getFirstRightResizableColumnIndex(columnIndex) !== -1;\n }\n\n private readonly onDividerMouseMove = (event: Event): void => {\n const mouseEvent = event as MouseEvent;\n for (let i = 0; i < this.visibleColumns.length; i++) {\n this.visibleColumns[i]!.columnInternals.currentPixelWidth = this.initialColumnWidths[i]?.initialPixelWidth;\n }\n this.currentTotalDelta = this.getAllowedSizeDelta(\n mouseEvent.clientX - this.dragStart\n );\n this.performCascadeSizeLeft(\n this.leftColumnIndex!,\n this.currentTotalDelta\n );\n this.performCascadeSizeRight(\n this.rightColumnIndex!,\n this.currentTotalDelta\n );\n\n const totalColumnWidthDelta = this.getTotalColumnFixedWidth() - this.initialColumnTotalWidth!;\n if (totalColumnWidthDelta > 0) {\n this.table.tableScrollableMinWidth = this.initialTableScrollableWidth! + totalColumnWidthDelta;\n } else {\n this.table.tableScrollableMinWidth = this.initialTableScrollableMinWidth!;\n }\n };\n\n private readonly onDividerMouseUp = (): void => {\n document.removeEventListener('mousemove', this.onDividerMouseMove);\n document.removeEventListener('mouseup', this.onDividerMouseUp);\n this.resetGridSizedColumns();\n this.isColumnBeingSized = false;\n this.activeColumnIndex = undefined;\n this.activeColumnDivider = undefined;\n this.visibleColumns = [];\n };\n\n private getTotalColumnFixedWidth(): number {\n let totalColumnFixedWidth = 0;\n for (const column of this.visibleColumns) {\n totalColumnFixedWidth\n += column.columnInternals.currentPixelWidth ?? 0;\n }\n return totalColumnFixedWidth;\n }\n\n private setColumnsToFixedSize(): void {\n this.cacheGridSizedColumns();\n const headers = this.table.getHeaderContainerElements();\n for (let i = 0; i < headers.length; i++) {\n this.visibleColumns[i]!.columnInternals.currentPixelWidth = headers[i]!.getBoundingClientRect().width;\n }\n this.cacheColumnInitialPixelWidths();\n }\n\n private getAllowedSizeDelta(requestedResizeAmount: number): number {\n let availableSpace = 0;\n if (requestedResizeAmount > 0) {\n // size right\n return this.hasResizableColumnToLeft(this.leftColumnIndex!)\n ? requestedResizeAmount\n : 0;\n }\n\n // size left\n if (!this.hasResizableColumnToRight(this.rightColumnIndex!)) {\n return 0;\n }\n\n for (let i = this.leftColumnIndex!; i >= 0; i--) {\n const columnInitialWidths = this.initialColumnWidths[i]!;\n const column = this.visibleColumns[i]!;\n if (!column.columnInternals.resizingDisabled) {\n availableSpace\n += columnInitialWidths.initialPixelWidth\n - column.columnInternals.minPixelWidth;\n }\n }\n return Math.max(requestedResizeAmount, -availableSpace);\n }\n\n /**\n * Gets the index of the first resizable column starting with\n * `columnIndex` and moving to the left. If no resizable column\n * is found, returns -1.\n */\n private getFirstLeftResizableColumnIndex(columnIndex: number): number {\n const visibleColumns = this.visibleColumns.length === 0\n ? this.getVisibleColumns()\n : this.visibleColumns;\n for (let i = columnIndex; i >= 0; i--) {\n const column = visibleColumns[i];\n if (!column) {\n return -1;\n }\n if (!column.columnInternals.resizingDisabled) {\n return i;\n }\n }\n return -1;\n }\n\n /**\n * Gets the index of the first resizable column starting with\n * `columnIndex` and moving to the right. If no resizable column\n * is found, returns -1.\n */\n private getFirstRightResizableColumnIndex(columnIndex: number): number {\n const visibleColumns = this.visibleColumns.length === 0\n ? this.getVisibleColumns()\n : this.visibleColumns;\n for (let i = columnIndex; i < visibleColumns.length; i++) {\n const column = visibleColumns[i];\n if (!column) {\n return -1;\n }\n if (!column.columnInternals.resizingDisabled) {\n return i;\n }\n }\n return -1;\n }\n\n private performCascadeSizeLeft(\n leftColumnIndex: number,\n delta: number\n ): void {\n const firstLeftResizableColumn = this.getFirstLeftResizableColumnIndex(leftColumnIndex);\n if (firstLeftResizableColumn === -1) {\n return;\n }\n\n let currentDelta = delta;\n const leftColumn = this.visibleColumns[firstLeftResizableColumn]!;\n const leftColumnInitialWidths = this.initialColumnWidths[firstLeftResizableColumn]!;\n const allowedDelta = delta < 0\n ? Math.max(\n leftColumn.columnInternals.minPixelWidth\n - leftColumnInitialWidths.initialPixelWidth,\n currentDelta\n )\n : delta;\n const actualDelta = allowedDelta;\n leftColumn.columnInternals.currentPixelWidth! += actualDelta;\n\n if (\n actualDelta > currentDelta\n && firstLeftResizableColumn > 0\n && delta < 0\n ) {\n currentDelta -= allowedDelta;\n this.performCascadeSizeLeft(\n firstLeftResizableColumn - 1,\n currentDelta\n );\n }\n }\n\n private performCascadeSizeRight(\n rightColumnIndex: number,\n delta: number\n ): void {\n const firstRightResizableColumn = this.getFirstRightResizableColumnIndex(rightColumnIndex);\n if (firstRightResizableColumn === -1) {\n return;\n }\n\n let currentDelta = delta;\n const rightColumn = this.visibleColumns[firstRightResizableColumn]!;\n const rightColumnInitialWidths = this.initialColumnWidths[firstRightResizableColumn]!;\n let allowedDelta: number;\n if (rightColumn.columnInternals.resizingDisabled) {\n allowedDelta = 0;\n } else if (delta > 0) {\n allowedDelta = Math.min(\n rightColumnInitialWidths.initialPixelWidth\n - rightColumn.columnInternals.minPixelWidth,\n currentDelta\n );\n } else {\n allowedDelta = delta;\n }\n const actualDelta = allowedDelta;\n rightColumn.columnInternals.currentPixelWidth! -= actualDelta;\n\n if (\n actualDelta < currentDelta\n && firstRightResizableColumn < this.visibleColumns.length - 1\n && delta > 0\n ) {\n currentDelta -= allowedDelta;\n this.performCascadeSizeRight(\n firstRightResizableColumn + 1,\n currentDelta\n );\n }\n }\n\n private cacheGridSizedColumns(): void {\n this.gridSizedColumns = [];\n for (const column of this.visibleColumns) {\n if (column.columnInternals.currentPixelWidth === undefined) {\n this.gridSizedColumns.push(column);\n }\n }\n }\n\n private cacheColumnInitialPixelWidths(): void {\n this.initialColumnWidths = [];\n for (const column of this.visibleColumns) {\n this.initialColumnWidths.push({\n initalColumnFractionalWidth:\n column.columnInternals.currentFractionalWidth,\n initialPixelWidth: column.columnInternals.currentPixelWidth!\n });\n }\n }\n\n private resetGridSizedColumns(): void {\n if (!this.gridSizedColumns || this.gridSizedColumns.length === 0) {\n return;\n }\n\n const gridSizeColumnTotal = this.gridSizedColumns.reduce(\n (sum, col) => sum + col.columnInternals.currentPixelWidth!,\n 0\n );\n const gridSizeColumnAverage = gridSizeColumnTotal / this.gridSizedColumns.length;\n\n let gridColumnIndex = 0;\n for (\n let i = 0;\n i < this.visibleColumns.length\n && gridColumnIndex < this.gridSizedColumns.length;\n i++\n ) {\n const column = this.visibleColumns[i]!;\n if (column === this.gridSizedColumns[gridColumnIndex]) {\n gridColumnIndex += 1;\n column.columnInternals.currentFractionalWidth = column.columnInternals.currentPixelWidth!\n / gridSizeColumnAverage;\n column.columnInternals.currentPixelWidth = undefined;\n }\n }\n }\n\n private getVisibleColumns(): TableColumn[] {\n return this.table.columns.filter(column => !column.columnHidden);\n }\n\n private getLeftColumnIndexFromDivider(dividerIndex: number): number {\n return Math.floor(dividerIndex / 2);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"table-layout-manager.js","sourceRoot":"","sources":["../../../../src/table/models/table-layout-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { observable } from '@microsoft/fast-element';\nimport type { Table } from '..';\nimport type { TableColumn } from '../../table-column/base';\nimport type { TableRecord } from '../types';\n\n/**\n * This class manages the layout of columns within a Table.\n * @interal\n */\nexport class TableLayoutManager<TData extends TableRecord> {\n @observable\n public isColumnBeingSized = false;\n\n @observable\n public activeColumnIndex?: number;\n\n @observable\n public activeColumnDivider?: number;\n\n private gridSizedColumns?: TableColumn[];\n private visibleColumns: TableColumn[] = [];\n private initialTableScrollableWidth?: number;\n private initialTableScrollableMinWidth?: number;\n private initialColumnTotalWidth?: number;\n private activeColumnDividerElement?: HTMLElement;\n private currentTotalDelta = 0;\n private dragStart = 0;\n private leftColumnIndex?: number;\n private rightColumnIndex?: number;\n private initialColumnWidths: {\n initalColumnFractionalWidth: number,\n initialPixelWidth: number\n }[] = [];\n\n public constructor(private readonly table: Table<TData>) {}\n\n public getGridTemplateColumns(): string {\n return this.getVisibleColumns()\n .map(column => {\n const {\n minPixelWidth,\n currentPixelWidth,\n currentFractionalWidth\n } = column.columnInternals;\n if (currentPixelWidth) {\n const coercedPixelWidth = Math.max(\n minPixelWidth,\n currentPixelWidth\n );\n return `${coercedPixelWidth}px`;\n }\n\n return `minmax(${minPixelWidth}px, ${currentFractionalWidth}fr)`;\n })\n .join(' ');\n }\n\n /**\n * Sets up state related to interactively sizing a column.\n * @param activeColumnDividerElement The divider element that was clicked on\n * @param pointerId The pointerId of the pointer that started the drag\n * @param dragStart The x-position from which a column size was started\n * @param activeColumnDivider The 1-based index of the divider that was clicked on\n */\n public beginColumnInteractiveSize(\n activeColumnDividerElement: HTMLElement,\n pointerId: number,\n dragStart: number,\n activeColumnDivider: number\n ): void {\n this.activeColumnDivider = activeColumnDivider;\n this.activeColumnDividerElement = activeColumnDividerElement;\n this.leftColumnIndex = this.getLeftColumnIndexFromDivider(\n this.activeColumnDivider\n );\n this.rightColumnIndex = this.leftColumnIndex + 1;\n this.activeColumnIndex = this.leftColumnIndex + (this.activeColumnDivider % 2);\n this.dragStart = dragStart;\n this.currentTotalDelta = 0;\n this.visibleColumns = this.getVisibleColumns();\n this.setColumnsToFixedSize();\n this.initialTableScrollableWidth = this.table.viewport.scrollWidth;\n this.initialTableScrollableMinWidth = this.table.tableScrollableMinWidth;\n this.initialColumnTotalWidth = this.getTotalColumnFixedWidth();\n this.isColumnBeingSized = true;\n // pointerId of -1 indicates source was synthetic PointerEvent: https://w3c.github.io/pointerevents/#dom-pointerevent-pointerid\n if (pointerId !== -1) {\n activeColumnDividerElement.setPointerCapture(pointerId);\n }\n activeColumnDividerElement.addEventListener(\n 'pointermove',\n this.onDividerPointerMove\n );\n activeColumnDividerElement.addEventListener(\n 'pointerup',\n this.onDividerPointerUp\n );\n }\n\n /**\n * Determines if the specified column or any columns to the left are resizable.\n */\n public hasResizableColumnToLeft(columnIndex: number): boolean {\n return this.getFirstLeftResizableColumnIndex(columnIndex) !== -1;\n }\n\n /**\n * Determines if the specified column or any columns to the right are resizable.\n */\n private hasResizableColumnToRight(columnIndex: number): boolean {\n return this.getFirstRightResizableColumnIndex(columnIndex) !== -1;\n }\n\n private readonly onDividerPointerMove = (event: PointerEvent): void => {\n for (let i = 0; i < this.visibleColumns.length; i++) {\n this.visibleColumns[i]!.columnInternals.currentPixelWidth = this.initialColumnWidths[i]?.initialPixelWidth;\n }\n this.currentTotalDelta = this.getAllowedSizeDelta(\n event.clientX - this.dragStart\n );\n this.performCascadeSizeLeft(\n this.leftColumnIndex!,\n this.currentTotalDelta\n );\n this.performCascadeSizeRight(\n this.rightColumnIndex!,\n this.currentTotalDelta\n );\n\n const totalColumnWidthDelta = this.getTotalColumnFixedWidth() - this.initialColumnTotalWidth!;\n if (totalColumnWidthDelta > 0) {\n this.table.tableScrollableMinWidth = this.initialTableScrollableWidth! + totalColumnWidthDelta;\n } else {\n this.table.tableScrollableMinWidth = this.initialTableScrollableMinWidth!;\n }\n };\n\n private readonly onDividerPointerUp = (): void => {\n this.activeColumnDividerElement!.removeEventListener(\n 'pointermove',\n this.onDividerPointerMove\n );\n this.activeColumnDividerElement!.removeEventListener(\n 'pointerup',\n this.onDividerPointerUp\n );\n this.resetGridSizedColumns();\n this.isColumnBeingSized = false;\n this.activeColumnIndex = undefined;\n this.activeColumnDivider = undefined;\n this.activeColumnDividerElement = undefined;\n this.visibleColumns = [];\n };\n\n private getTotalColumnFixedWidth(): number {\n let totalColumnFixedWidth = 0;\n for (const column of this.visibleColumns) {\n totalColumnFixedWidth\n += column.columnInternals.currentPixelWidth ?? 0;\n }\n return totalColumnFixedWidth;\n }\n\n private setColumnsToFixedSize(): void {\n this.cacheGridSizedColumns();\n const headers = this.table.getHeaderContainerElements();\n for (let i = 0; i < headers.length; i++) {\n this.visibleColumns[i]!.columnInternals.currentPixelWidth = headers[i]!.getBoundingClientRect().width;\n }\n this.cacheColumnInitialPixelWidths();\n }\n\n private getAllowedSizeDelta(requestedResizeAmount: number): number {\n let availableSpace = 0;\n if (requestedResizeAmount > 0) {\n // size right\n return this.hasResizableColumnToLeft(this.leftColumnIndex!)\n ? requestedResizeAmount\n : 0;\n }\n\n // size left\n if (!this.hasResizableColumnToRight(this.rightColumnIndex!)) {\n return 0;\n }\n\n for (let i = this.leftColumnIndex!; i >= 0; i--) {\n const columnInitialWidths = this.initialColumnWidths[i]!;\n const column = this.visibleColumns[i]!;\n if (!column.columnInternals.resizingDisabled) {\n availableSpace\n += columnInitialWidths.initialPixelWidth\n - column.columnInternals.minPixelWidth;\n }\n }\n return Math.max(requestedResizeAmount, -availableSpace);\n }\n\n /**\n * Gets the index of the first resizable column starting with\n * `columnIndex` and moving to the left. If no resizable column\n * is found, returns -1.\n */\n private getFirstLeftResizableColumnIndex(columnIndex: number): number {\n const visibleColumns = this.visibleColumns.length === 0\n ? this.getVisibleColumns()\n : this.visibleColumns;\n for (let i = columnIndex; i >= 0; i--) {\n const column = visibleColumns[i];\n if (!column) {\n return -1;\n }\n if (!column.columnInternals.resizingDisabled) {\n return i;\n }\n }\n return -1;\n }\n\n /**\n * Gets the index of the first resizable column starting with\n * `columnIndex` and moving to the right. If no resizable column\n * is found, returns -1.\n */\n private getFirstRightResizableColumnIndex(columnIndex: number): number {\n const visibleColumns = this.visibleColumns.length === 0\n ? this.getVisibleColumns()\n : this.visibleColumns;\n for (let i = columnIndex; i < visibleColumns.length; i++) {\n const column = visibleColumns[i];\n if (!column) {\n return -1;\n }\n if (!column.columnInternals.resizingDisabled) {\n return i;\n }\n }\n return -1;\n }\n\n private performCascadeSizeLeft(\n leftColumnIndex: number,\n delta: number\n ): void {\n const firstLeftResizableColumn = this.getFirstLeftResizableColumnIndex(leftColumnIndex);\n if (firstLeftResizableColumn === -1) {\n return;\n }\n\n let currentDelta = delta;\n const leftColumn = this.visibleColumns[firstLeftResizableColumn]!;\n const leftColumnInitialWidths = this.initialColumnWidths[firstLeftResizableColumn]!;\n const allowedDelta = delta < 0\n ? Math.max(\n leftColumn.columnInternals.minPixelWidth\n - leftColumnInitialWidths.initialPixelWidth,\n currentDelta\n )\n : delta;\n const actualDelta = allowedDelta;\n leftColumn.columnInternals.currentPixelWidth! += actualDelta;\n\n if (\n actualDelta > currentDelta\n && firstLeftResizableColumn > 0\n && delta < 0\n ) {\n currentDelta -= allowedDelta;\n this.performCascadeSizeLeft(\n firstLeftResizableColumn - 1,\n currentDelta\n );\n }\n }\n\n private performCascadeSizeRight(\n rightColumnIndex: number,\n delta: number\n ): void {\n const firstRightResizableColumn = this.getFirstRightResizableColumnIndex(rightColumnIndex);\n if (firstRightResizableColumn === -1) {\n return;\n }\n\n let currentDelta = delta;\n const rightColumn = this.visibleColumns[firstRightResizableColumn]!;\n const rightColumnInitialWidths = this.initialColumnWidths[firstRightResizableColumn]!;\n let allowedDelta: number;\n if (rightColumn.columnInternals.resizingDisabled) {\n allowedDelta = 0;\n } else if (delta > 0) {\n allowedDelta = Math.min(\n rightColumnInitialWidths.initialPixelWidth\n - rightColumn.columnInternals.minPixelWidth,\n currentDelta\n );\n } else {\n allowedDelta = delta;\n }\n const actualDelta = allowedDelta;\n rightColumn.columnInternals.currentPixelWidth! -= actualDelta;\n\n if (\n actualDelta < currentDelta\n && firstRightResizableColumn < this.visibleColumns.length - 1\n && delta > 0\n ) {\n currentDelta -= allowedDelta;\n this.performCascadeSizeRight(\n firstRightResizableColumn + 1,\n currentDelta\n );\n }\n }\n\n private cacheGridSizedColumns(): void {\n this.gridSizedColumns = [];\n for (const column of this.visibleColumns) {\n if (column.columnInternals.currentPixelWidth === undefined) {\n this.gridSizedColumns.push(column);\n }\n }\n }\n\n private cacheColumnInitialPixelWidths(): void {\n this.initialColumnWidths = [];\n for (const column of this.visibleColumns) {\n this.initialColumnWidths.push({\n initalColumnFractionalWidth:\n column.columnInternals.currentFractionalWidth,\n initialPixelWidth: column.columnInternals.currentPixelWidth!\n });\n }\n }\n\n private resetGridSizedColumns(): void {\n if (!this.gridSizedColumns || this.gridSizedColumns.length === 0) {\n return;\n }\n\n const gridSizeColumnTotal = this.gridSizedColumns.reduce(\n (sum, col) => sum + col.columnInternals.currentPixelWidth!,\n 0\n );\n const gridSizeColumnAverage = gridSizeColumnTotal / this.gridSizedColumns.length;\n\n let gridColumnIndex = 0;\n for (\n let i = 0;\n i < this.visibleColumns.length\n && gridColumnIndex < this.gridSizedColumns.length;\n i++\n ) {\n const column = this.visibleColumns[i]!;\n if (column === this.gridSizedColumns[gridColumnIndex]) {\n gridColumnIndex += 1;\n column.columnInternals.currentFractionalWidth = column.columnInternals.currentPixelWidth!\n / gridSizeColumnAverage;\n column.columnInternals.currentPixelWidth = undefined;\n }\n }\n }\n\n private getVisibleColumns(): TableColumn[] {\n return this.table.columns.filter(column => !column.columnHidden);\n }\n\n private getLeftColumnIndexFromDivider(dividerIndex: number): number {\n return Math.floor(dividerIndex / 2);\n }\n}\n"]}
|
package/dist/esm/table/styles.js
CHANGED
|
@@ -50,13 +50,6 @@ focus outline in that case.
|
|
|
50
50
|
cursor: var(--ni-private-table-cursor-override);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
.glass-overlay {
|
|
54
|
-
width: 100%;
|
|
55
|
-
height: 100%;
|
|
56
|
-
display: contents;
|
|
57
|
-
pointer-events: var(--ni-private-glass-overlay-pointer-events);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
53
|
.header-row-container {
|
|
61
54
|
position: sticky;
|
|
62
55
|
top: 0;
|
|
@@ -134,6 +127,7 @@ focus outline in that case.
|
|
|
134
127
|
cursor: col-resize;
|
|
135
128
|
position: absolute;
|
|
136
129
|
z-index: ${ZIndexLevels.zIndex1};
|
|
130
|
+
touch-action: pan-y;
|
|
137
131
|
}
|
|
138
132
|
|
|
139
133
|
.column-divider:hover,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,WAAW,EACd,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;UAIX,kBAAkB,CAAC,iBAAiB,kDAAkD,aAAa;UACnG;AACE;;;;;GAKG,CAAC,EACR;2BACmB,aAAa,mBAAmB,WAAW,MAAM,aAAa;;;;;YAK7E,YAAY;UACd;AACE;;;IAGA,CAAC,EACL;;;;;UAKE,cAAc;;;;;;;;gBAQR,QAAQ;iBACP,aAAa
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,WAAW,EACd,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;UAIX,kBAAkB,CAAC,iBAAiB,kDAAkD,aAAa;UACnG;AACE;;;;;GAKG,CAAC,EACR;2BACmB,aAAa,mBAAmB,WAAW,MAAM,aAAa;;;;;YAK7E,YAAY;UACd;AACE;;;IAGA,CAAC,EACL;;;;;UAKE,cAAc;;;;;;;;gBAQR,QAAQ;iBACP,aAAa;;;;;;;;;;;sBAWR,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA8B3B,aAAa;;;;kBAIhB,iBAAiB;uBACZ,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6BtB,gBAAgB;;kBAEZ,iBAAiB;;;mBAGhB,YAAY,CAAC,OAAO;;;;;;wBAMf,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCnB,YAAY;;;;;;;;;;;;;;;;;4BAiBL,mBAAmB;;;;uBAIxB,eAAe;;;;;;;;;;;;;;;;;;;;;;;UAuB5B,gBAAgB;;CAEzB,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;oCAKyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;SAGxD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n applicationBackgroundColor,\n bodyFont,\n bodyFontColor,\n popupBorderColor,\n controlSlimHeight,\n mediumPadding,\n standardPadding,\n tableRowBorderColor,\n borderHoverColor,\n controlHeight,\n tableFitRowsHeight,\n borderWidth\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { userSelectNone } from '../utilities/style/user-select';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\nimport { ZIndexLevels } from '../utilities/style/types';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n height: 480px;\n ${tableFitRowsHeight.cssCustomProperty}: calc(var(--ni-private-table-scroll-height) + ${controlHeight});\n ${\n /**\n * Set a default maximum height for the table of 40.5 rows plus the header row so\n * that clients don't accidentally create a table that tries to render too many rows at once.\n * If needed, the max-height can be overridden by the client, but setting a default ensures\n * that the max-height is considered if a larger one is needed rather than being overlooked.\n */ ''\n }\n max-height: calc(${controlHeight} + (40.5 * (2 * ${borderWidth} + ${controlHeight})));\n --ni-private-column-divider-width: 2px;\n --ni-private-column-divider-padding: 3px;\n }\n\n :host(${focusVisible}) {\n ${\n /* The table can briefly be focused in some keyboard nav cases (e.g. regaining focus and we\n need to scroll to the previously focused row first). Ensure that we don't get the browser-default\n focus outline in that case.\n ) */ ''\n }\n outline: none;\n }\n\n .disable-select {\n ${userSelectNone}\n }\n\n .table-container {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n width: 100%;\n font: ${bodyFont};\n color: ${bodyFontColor};\n cursor: var(--ni-private-table-cursor-override);\n }\n\n .header-row-container {\n position: sticky;\n top: 0;\n }\n\n .header-row {\n display: flex;\n background: ${applicationBackgroundColor};\n position: relative;\n width: fit-content;\n min-width: max(\n 100%,\n calc(\n var(--ni-private-table-scrollable-min-width) +\n var(--ni-private-table-header-container-margin-right)\n )\n );\n left: var(--ni-private-table-scroll-x);\n align-items: center;\n }\n\n .header-row-action-container {\n display: flex;\n }\n\n .checkbox-container {\n display: flex;\n }\n\n .column-headers-container {\n display: grid;\n width: 100%;\n grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n }\n\n .collapse-all-button-container {\n display: flex;\n min-width: ${mediumPadding};\n }\n\n .collapse-all-button {\n height: ${controlSlimHeight};\n margin-left: ${mediumPadding};\n visibility: hidden;\n }\n\n .collapse-all-button.hidden-size-reduced {\n display: none;\n }\n\n .collapse-all-button.visible {\n visibility: visible;\n }\n\n .header-container {\n display: flex;\n align-items: center;\n position: relative;\n }\n\n .header-scrollbar-spacer {\n width: var(--ni-private-table-header-container-margin-right);\n }\n\n .header {\n flex: 1;\n overflow: hidden;\n }\n\n .column-divider {\n border-left: var(--ni-private-column-divider-width) solid\n ${popupBorderColor};\n display: none;\n height: ${controlSlimHeight};\n cursor: col-resize;\n position: absolute;\n z-index: ${ZIndexLevels.zIndex1};\n touch-action: pan-y;\n }\n\n .column-divider:hover,\n .column-divider.divider-active {\n border-color: ${borderHoverColor};\n }\n\n .column-divider.column-active.draggable,\n .header-container:hover .column-divider.draggable {\n display: block;\n }\n\n .column-divider::before {\n content: '';\n position: absolute;\n width: calc(\n var(--ni-private-column-divider-width) +\n (2 * var(--ni-private-column-divider-padding))\n );\n height: 100%;\n left: calc(\n -1 * (var(--ni-private-column-divider-width) +\n var(--ni-private-column-divider-padding))\n );\n }\n\n .column-divider.left {\n left: -1px;\n }\n\n .column-divider.right {\n left: calc(100% - 1px);\n }\n\n .table-viewport {\n overflow: auto;\n display: block;\n height: 100%;\n position: relative;\n }\n\n .table-viewport${focusVisible} {\n outline: none;\n }\n\n .table-scroll {\n pointer-events: none;\n position: absolute;\n top: 0px;\n width: 100%;\n height: var(--ni-private-table-scroll-height);\n }\n\n .table-row-container {\n width: fit-content;\n min-width: max(100%, var(--ni-private-table-scrollable-min-width));\n position: relative;\n top: var(--ni-private-table-row-container-top);\n background-color: ${tableRowBorderColor};\n }\n\n .selection-checkbox {\n margin-left: ${standardPadding};\n }\n\n .selection-checkbox::part(label) {\n padding-left: 0px;\n }\n\n .group-row {\n position: relative;\n --ni-private-table-cell-focus-offset-multiplier: 0;\n }\n\n .row {\n position: relative;\n --ni-private-table-cell-focus-offset-multiplier: 0;\n }\n\n .collapse-all-visible .row,\n .collapse-all-visible .group-row {\n --ni-private-table-cell-focus-offset-multiplier: 1;\n }\n\n .accessibly-hidden {\n ${accessiblyHidden}\n }\n`.withBehaviors(\n themeBehavior(\n Theme.color,\n css`\n .table-row-container::before {\n content: '';\n width: 100%;\n height: 100%;\n background-color: ${hexToRgbaCssColor(White, 0.1)};\n position: absolute;\n }\n `\n )\n);\n"]}
|
|
@@ -26,159 +26,156 @@ export const template = html `
|
|
|
26
26
|
--ni-private-table-row-grid-columns: ${x => (x.rowGridColumns ? x.rowGridColumns : '')};
|
|
27
27
|
--ni-private-table-cursor-override: ${x => (x.layoutManager.isColumnBeingSized ? 'col-resize' : 'default')};
|
|
28
28
|
--ni-private-table-scrollable-min-width: ${x => x.tableScrollableMinWidth}px;
|
|
29
|
-
--ni-private-glass-overlay-pointer-events: ${x => (x.layoutManager.isColumnBeingSized ? 'none' : 'default')};
|
|
30
29
|
">
|
|
31
|
-
<div class="
|
|
32
|
-
<div
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
${ref('selectionCheckbox')}
|
|
44
|
-
${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
|
|
45
|
-
tabindex="-1"
|
|
46
|
-
class="selection-checkbox"
|
|
47
|
-
@change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
|
|
48
|
-
title="${x => tableSelectAllLabel.getValueFor(x)}"
|
|
49
|
-
aria-label="${x => tableSelectAllLabel.getValueFor(x)}"
|
|
50
|
-
>
|
|
51
|
-
</${checkboxTag}>
|
|
52
|
-
</span>
|
|
53
|
-
`)}
|
|
54
|
-
<span class="collapse-all-button-container">
|
|
55
|
-
<${buttonTag}
|
|
56
|
-
${ref('collapseAllButton')}
|
|
30
|
+
<div role="rowgroup" class="header-row-container">
|
|
31
|
+
<div class="header-row" role="row">
|
|
32
|
+
<span role="${x => (x.showRowOperationColumn ? 'columnheader' : '')}" class="header-row-action-container" ${ref('headerRowActionContainer')}>
|
|
33
|
+
${when(x => x.showRowOperationColumn, html `
|
|
34
|
+
<span class="accessibly-hidden">
|
|
35
|
+
${x => tableRowOperationColumnLabel.getValueFor(x)}
|
|
36
|
+
</span>
|
|
37
|
+
`)}
|
|
38
|
+
${when(x => x.selectionMode === TableRowSelectionMode.multiple, html `
|
|
39
|
+
<span class="checkbox-container">
|
|
40
|
+
<${checkboxTag}
|
|
41
|
+
${ref('selectionCheckbox')}
|
|
57
42
|
${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
|
|
58
43
|
tabindex="-1"
|
|
59
|
-
class="
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
@click="${x => x.handleCollapseAllRows()}"
|
|
44
|
+
class="selection-checkbox"
|
|
45
|
+
@change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
|
|
46
|
+
title="${x => tableSelectAllLabel.getValueFor(x)}"
|
|
47
|
+
aria-label="${x => tableSelectAllLabel.getValueFor(x)}"
|
|
64
48
|
>
|
|
65
|
-
|
|
66
|
-
${x => tableCollapseAllLabel.getValueFor(x)}
|
|
67
|
-
</${buttonTag}>
|
|
49
|
+
</${checkboxTag}>
|
|
68
50
|
</span>
|
|
51
|
+
`)}
|
|
52
|
+
<span class="collapse-all-button-container">
|
|
53
|
+
<${buttonTag}
|
|
54
|
+
${ref('collapseAllButton')}
|
|
55
|
+
${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
|
|
56
|
+
tabindex="-1"
|
|
57
|
+
class="collapse-all-button ${x => x.collapseButtonVisibility}"
|
|
58
|
+
content-hidden
|
|
59
|
+
appearance="${ButtonAppearance.ghost}"
|
|
60
|
+
title="${x => tableCollapseAllLabel.getValueFor(x)}"
|
|
61
|
+
@click="${x => x.handleCollapseAllRows()}"
|
|
62
|
+
>
|
|
63
|
+
<${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
|
|
64
|
+
${x => tableCollapseAllLabel.getValueFor(x)}
|
|
65
|
+
</${buttonTag}>
|
|
69
66
|
</span>
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
<${tableHeaderTag}
|
|
86
|
-
class="header"
|
|
87
|
-
${'' /* tabindex managed dynamically by KeyboardNavigationManager (if column sorting not disabled) */}
|
|
88
|
-
sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
|
|
89
|
-
?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
|
|
90
|
-
?indicators-hidden="${x => x.columnInternals.hideHeaderIndicators}"
|
|
91
|
-
@keydown="${(x, c) => c.parent.onHeaderKeyDown(x, c.event)}"
|
|
92
|
-
@click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
|
|
93
|
-
:alignment="${x => x.columnInternals.headerAlignment}"
|
|
94
|
-
:isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
|
|
95
|
-
>
|
|
96
|
-
<slot name="${x => x.slot}"></slot>
|
|
97
|
-
</${tableHeaderTag}>
|
|
98
|
-
${when((_, c) => c.index < c.length - 1, html `
|
|
99
|
-
<div
|
|
100
|
-
class="
|
|
101
|
-
column-divider
|
|
102
|
-
right
|
|
103
|
-
${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
|
|
104
|
-
${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getRightDividerIndex(c.index) ? 'divider-active' : ''}`}
|
|
105
|
-
${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index) ? 'draggable' : ''}`}
|
|
106
|
-
"
|
|
107
|
-
@mousedown="${(_, c) => c.parent.onRightDividerMouseDown(c.event, c.index)}">
|
|
108
|
-
</div>
|
|
109
|
-
`)}
|
|
110
|
-
</div>
|
|
111
|
-
`, { positioning: true })}
|
|
112
|
-
<div class="header-scrollbar-spacer"></div>
|
|
113
|
-
</span>
|
|
114
|
-
</div>
|
|
115
|
-
</div>
|
|
116
|
-
<div class="table-viewport" tabindex="-1" ${ref('viewport')}>
|
|
117
|
-
<div class="table-scroll"></div>
|
|
118
|
-
<div class="table-row-container ${x => `${x.showCollapseAll ? 'collapse-all-visible' : ''}`}" ${children({ property: 'rowElements', filter: elements(`${tableRowTag}, ${tableGroupRowTag}`) })}
|
|
119
|
-
role="rowgroup">
|
|
120
|
-
${when(x => x.columns.length > 0 && x.canRenderRows, html `
|
|
121
|
-
${repeat(x => x.virtualizer.visibleItems, html `
|
|
122
|
-
${when((x, c) => c.parent.tableData[x.index]?.isGroupRow, html `
|
|
123
|
-
<${tableGroupRowTag}
|
|
124
|
-
class="group-row"
|
|
125
|
-
${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
|
|
126
|
-
tabindex="-1"
|
|
127
|
-
:groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
|
|
128
|
-
?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
|
|
129
|
-
:nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
|
|
130
|
-
:immediateChildCount="${(x, c) => c.parent.tableData[x.index]?.immediateChildCount}"
|
|
131
|
-
:groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
|
|
132
|
-
?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
|
|
133
|
-
selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
|
|
134
|
-
:resolvedRowIndex="${x => x.index}"
|
|
135
|
-
?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
|
|
136
|
-
@focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
|
|
137
|
-
@blur="${(_, c) => c.parent.onRowBlur(c.event)}"
|
|
138
|
-
@group-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
|
|
139
|
-
@group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
|
|
140
|
-
>
|
|
141
|
-
</${tableGroupRowTag}>
|
|
67
|
+
</span>
|
|
68
|
+
<span class="column-headers-container" ${ref('columnHeadersContainer')}>
|
|
69
|
+
${repeat(x => x.visibleColumns, html `
|
|
70
|
+
<div class="header-container">
|
|
71
|
+
${when((_, c) => c.index > 0, html `
|
|
72
|
+
<div
|
|
73
|
+
class="
|
|
74
|
+
column-divider
|
|
75
|
+
left
|
|
76
|
+
${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
|
|
77
|
+
${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getLeftDividerIndex(c.index) ? 'divider-active' : ''}`}
|
|
78
|
+
${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index - 1) ? 'draggable' : ''}`}
|
|
79
|
+
"
|
|
80
|
+
@pointerdown="${(_, c) => c.parent.onLeftDividerPointerDown(c.event, c.index)}">
|
|
81
|
+
</div>
|
|
142
82
|
`)}
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
${
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
?reserve-collapse-space="${(_, c) => c.parent.canHaveCollapsibleRows}"
|
|
154
|
-
:dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
|
|
155
|
-
:columns="${(_, c) => c.parent.columns}"
|
|
156
|
-
:isParentRow="${(x, c) => c.parent.tableData[x.index]?.isParentRow}"
|
|
157
|
-
:nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
|
|
158
|
-
?row-operation-grid-cell-hidden="${(_, c) => !c.parent.showRowOperationColumn}"
|
|
159
|
-
?loading="${(x, c) => c.parent.tableData[x.index]?.isLoadingChildren}"
|
|
160
|
-
:resolvedRowIndex="${x => x.index}"
|
|
161
|
-
?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
|
|
162
|
-
@click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
|
|
163
|
-
@focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
|
|
164
|
-
@blur="${(_, c) => c.parent.onRowBlur(c.event)}"
|
|
165
|
-
@row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
|
|
166
|
-
@row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
|
|
167
|
-
@row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
|
|
168
|
-
@row-slots-request="${(_, c) => c.parent.onRowSlotsRequest(c.event)}"
|
|
169
|
-
@row-expand-toggle="${(x, c) => c.parent.handleRowExpanded(x.index)}"
|
|
83
|
+
<${tableHeaderTag}
|
|
84
|
+
class="header"
|
|
85
|
+
${'' /* tabindex managed dynamically by KeyboardNavigationManager (if column sorting not disabled) */}
|
|
86
|
+
sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
|
|
87
|
+
?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
|
|
88
|
+
?indicators-hidden="${x => x.columnInternals.hideHeaderIndicators}"
|
|
89
|
+
@keydown="${(x, c) => c.parent.onHeaderKeyDown(x, c.event)}"
|
|
90
|
+
@click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
|
|
91
|
+
:alignment="${x => x.columnInternals.headerAlignment}"
|
|
92
|
+
:isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
|
|
170
93
|
>
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
94
|
+
<slot name="${x => x.slot}"></slot>
|
|
95
|
+
</${tableHeaderTag}>
|
|
96
|
+
${when((_, c) => c.index < c.length - 1, html `
|
|
97
|
+
<div
|
|
98
|
+
class="
|
|
99
|
+
column-divider
|
|
100
|
+
right
|
|
101
|
+
${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
|
|
102
|
+
${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getRightDividerIndex(c.index) ? 'divider-active' : ''}`}
|
|
103
|
+
${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index) ? 'draggable' : ''}`}
|
|
104
|
+
"
|
|
105
|
+
@pointerdown="${(_, c) => c.parent.onRightDividerPointerDown(c.event, c.index)}">
|
|
106
|
+
</div>
|
|
107
|
+
`)}
|
|
108
|
+
</div>
|
|
109
|
+
`, { positioning: true })}
|
|
110
|
+
<div class="header-scrollbar-spacer"></div>
|
|
111
|
+
</span>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="table-viewport" tabindex="-1" ${ref('viewport')}>
|
|
115
|
+
<div class="table-scroll"></div>
|
|
116
|
+
<div class="table-row-container ${x => `${x.showCollapseAll ? 'collapse-all-visible' : ''}`}" ${children({ property: 'rowElements', filter: elements(`${tableRowTag}, ${tableGroupRowTag}`) })}
|
|
117
|
+
role="rowgroup">
|
|
118
|
+
${when(x => x.columns.length > 0 && x.canRenderRows, html `
|
|
119
|
+
${repeat(x => x.virtualizer.visibleItems, html `
|
|
120
|
+
${when((x, c) => c.parent.tableData[x.index]?.isGroupRow, html `
|
|
121
|
+
<${tableGroupRowTag}
|
|
122
|
+
class="group-row"
|
|
123
|
+
${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
|
|
124
|
+
tabindex="-1"
|
|
125
|
+
:groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
|
|
126
|
+
?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
|
|
127
|
+
:nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
|
|
128
|
+
:immediateChildCount="${(x, c) => c.parent.tableData[x.index]?.immediateChildCount}"
|
|
129
|
+
:groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
|
|
130
|
+
?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
|
|
131
|
+
selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
|
|
132
|
+
:resolvedRowIndex="${x => x.index}"
|
|
133
|
+
?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
|
|
134
|
+
@focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
|
|
135
|
+
@blur="${(_, c) => c.parent.onRowBlur(c.event)}"
|
|
136
|
+
@group-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
|
|
137
|
+
@group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
|
|
138
|
+
>
|
|
139
|
+
</${tableGroupRowTag}>
|
|
140
|
+
`)}
|
|
141
|
+
${when((x, c) => !c.parent.tableData[x.index]?.isGroupRow, html `
|
|
142
|
+
<${tableRowTag}
|
|
143
|
+
class="row"
|
|
144
|
+
${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
|
|
145
|
+
tabindex="-1"
|
|
146
|
+
record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
|
|
147
|
+
?selectable="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.none}"
|
|
148
|
+
?selected="${(x, c) => c.parent.tableData[x.index]?.selectionState === TableRowSelectionState.selected}"
|
|
149
|
+
?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
|
|
150
|
+
?hide-selection="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.multiple}"
|
|
151
|
+
?reserve-collapse-space="${(_, c) => c.parent.canHaveCollapsibleRows}"
|
|
152
|
+
:dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
|
|
153
|
+
:columns="${(_, c) => c.parent.columns}"
|
|
154
|
+
:isParentRow="${(x, c) => c.parent.tableData[x.index]?.isParentRow}"
|
|
155
|
+
:nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
|
|
156
|
+
?row-operation-grid-cell-hidden="${(_, c) => !c.parent.showRowOperationColumn}"
|
|
157
|
+
?loading="${(x, c) => c.parent.tableData[x.index]?.isLoadingChildren}"
|
|
158
|
+
:resolvedRowIndex="${x => x.index}"
|
|
159
|
+
?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
|
|
160
|
+
@click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
|
|
161
|
+
@focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
|
|
162
|
+
@blur="${(_, c) => c.parent.onRowBlur(c.event)}"
|
|
163
|
+
@row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
|
|
164
|
+
@row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
|
|
165
|
+
@row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
|
|
166
|
+
@row-slots-request="${(_, c) => c.parent.onRowSlotsRequest(c.event)}"
|
|
167
|
+
@row-expand-toggle="${(x, c) => c.parent.handleRowExpanded(x.index)}"
|
|
168
|
+
>
|
|
169
|
+
${repeat((x, c) => (c.parent.tableData[x.index]?.requestedSlots || []), html `
|
|
170
|
+
<slot
|
|
171
|
+
name="${x => x.name}"
|
|
172
|
+
slot="${x => x.slot}"
|
|
173
|
+
></slot>
|
|
178
174
|
`)}
|
|
175
|
+
</${tableRowTag}>
|
|
179
176
|
`)}
|
|
180
177
|
`)}
|
|
181
|
-
|
|
178
|
+
`)}
|
|
182
179
|
</div>
|
|
183
180
|
</div>
|
|
184
181
|
</div>
|