@ni/spright-components 4.1.11 → 4.1.13
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.
|
@@ -65776,13 +65776,6 @@ focus outline in that case.
|
|
|
65776
65776
|
cursor: var(--ni-private-table-cursor-override);
|
|
65777
65777
|
}
|
|
65778
65778
|
|
|
65779
|
-
.glass-overlay {
|
|
65780
|
-
width: 100%;
|
|
65781
|
-
height: 100%;
|
|
65782
|
-
display: contents;
|
|
65783
|
-
pointer-events: var(--ni-private-glass-overlay-pointer-events);
|
|
65784
|
-
}
|
|
65785
|
-
|
|
65786
65779
|
.header-row-container {
|
|
65787
65780
|
position: sticky;
|
|
65788
65781
|
top: 0;
|
|
@@ -65860,6 +65853,7 @@ focus outline in that case.
|
|
|
65860
65853
|
cursor: col-resize;
|
|
65861
65854
|
position: absolute;
|
|
65862
65855
|
z-index: ${ZIndexLevels.zIndex1};
|
|
65856
|
+
touch-action: pan-y;
|
|
65863
65857
|
}
|
|
65864
65858
|
|
|
65865
65859
|
.column-divider:hover,
|
|
@@ -67102,159 +67096,156 @@ focus outline in that case.
|
|
|
67102
67096
|
--ni-private-table-row-grid-columns: ${x => (x.rowGridColumns ? x.rowGridColumns : '')};
|
|
67103
67097
|
--ni-private-table-cursor-override: ${x => (x.layoutManager.isColumnBeingSized ? 'col-resize' : 'default')};
|
|
67104
67098
|
--ni-private-table-scrollable-min-width: ${x => x.tableScrollableMinWidth}px;
|
|
67105
|
-
--ni-private-glass-overlay-pointer-events: ${x => (x.layoutManager.isColumnBeingSized ? 'none' : 'default')};
|
|
67106
67099
|
">
|
|
67107
|
-
<div class="
|
|
67108
|
-
<div
|
|
67109
|
-
<
|
|
67110
|
-
|
|
67111
|
-
|
|
67112
|
-
|
|
67113
|
-
|
|
67114
|
-
|
|
67115
|
-
|
|
67116
|
-
|
|
67117
|
-
|
|
67118
|
-
|
|
67119
|
-
${ref('selectionCheckbox')}
|
|
67120
|
-
${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
|
|
67121
|
-
tabindex="-1"
|
|
67122
|
-
class="selection-checkbox"
|
|
67123
|
-
@change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
|
|
67124
|
-
title="${x => tableSelectAllLabel.getValueFor(x)}"
|
|
67125
|
-
aria-label="${x => tableSelectAllLabel.getValueFor(x)}"
|
|
67126
|
-
>
|
|
67127
|
-
</${checkboxTag}>
|
|
67128
|
-
</span>
|
|
67129
|
-
`)}
|
|
67130
|
-
<span class="collapse-all-button-container">
|
|
67131
|
-
<${buttonTag}
|
|
67132
|
-
${ref('collapseAllButton')}
|
|
67100
|
+
<div role="rowgroup" class="header-row-container">
|
|
67101
|
+
<div class="header-row" role="row">
|
|
67102
|
+
<span role="${x => (x.showRowOperationColumn ? 'columnheader' : '')}" class="header-row-action-container" ${ref('headerRowActionContainer')}>
|
|
67103
|
+
${when(x => x.showRowOperationColumn, html `
|
|
67104
|
+
<span class="accessibly-hidden">
|
|
67105
|
+
${x => tableRowOperationColumnLabel.getValueFor(x)}
|
|
67106
|
+
</span>
|
|
67107
|
+
`)}
|
|
67108
|
+
${when(x => x.selectionMode === TableRowSelectionMode.multiple, html `
|
|
67109
|
+
<span class="checkbox-container">
|
|
67110
|
+
<${checkboxTag}
|
|
67111
|
+
${ref('selectionCheckbox')}
|
|
67133
67112
|
${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
|
|
67134
67113
|
tabindex="-1"
|
|
67135
|
-
class="
|
|
67136
|
-
|
|
67137
|
-
|
|
67138
|
-
|
|
67139
|
-
@click="${x => x.handleCollapseAllRows()}"
|
|
67114
|
+
class="selection-checkbox"
|
|
67115
|
+
@change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
|
|
67116
|
+
title="${x => tableSelectAllLabel.getValueFor(x)}"
|
|
67117
|
+
aria-label="${x => tableSelectAllLabel.getValueFor(x)}"
|
|
67140
67118
|
>
|
|
67141
|
-
|
|
67142
|
-
${x => tableCollapseAllLabel.getValueFor(x)}
|
|
67143
|
-
</${buttonTag}>
|
|
67119
|
+
</${checkboxTag}>
|
|
67144
67120
|
</span>
|
|
67121
|
+
`)}
|
|
67122
|
+
<span class="collapse-all-button-container">
|
|
67123
|
+
<${buttonTag}
|
|
67124
|
+
${ref('collapseAllButton')}
|
|
67125
|
+
${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
|
|
67126
|
+
tabindex="-1"
|
|
67127
|
+
class="collapse-all-button ${x => x.collapseButtonVisibility}"
|
|
67128
|
+
content-hidden
|
|
67129
|
+
appearance="${ButtonAppearance.ghost}"
|
|
67130
|
+
title="${x => tableCollapseAllLabel.getValueFor(x)}"
|
|
67131
|
+
@click="${x => x.handleCollapseAllRows()}"
|
|
67132
|
+
>
|
|
67133
|
+
<${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
|
|
67134
|
+
${x => tableCollapseAllLabel.getValueFor(x)}
|
|
67135
|
+
</${buttonTag}>
|
|
67145
67136
|
</span>
|
|
67146
|
-
|
|
67147
|
-
|
|
67148
|
-
|
|
67149
|
-
|
|
67150
|
-
|
|
67151
|
-
|
|
67152
|
-
|
|
67153
|
-
|
|
67154
|
-
|
|
67155
|
-
|
|
67156
|
-
|
|
67157
|
-
|
|
67158
|
-
|
|
67159
|
-
|
|
67160
|
-
|
|
67161
|
-
<${tableHeaderTag}
|
|
67162
|
-
class="header"
|
|
67163
|
-
${'' /* tabindex managed dynamically by KeyboardNavigationManager (if column sorting not disabled) */}
|
|
67164
|
-
sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
|
|
67165
|
-
?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
|
|
67166
|
-
?indicators-hidden="${x => x.columnInternals.hideHeaderIndicators}"
|
|
67167
|
-
@keydown="${(x, c) => c.parent.onHeaderKeyDown(x, c.event)}"
|
|
67168
|
-
@click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
|
|
67169
|
-
:alignment="${x => x.columnInternals.headerAlignment}"
|
|
67170
|
-
:isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
|
|
67171
|
-
>
|
|
67172
|
-
<slot name="${x => x.slot}"></slot>
|
|
67173
|
-
</${tableHeaderTag}>
|
|
67174
|
-
${when((_, c) => c.index < c.length - 1, html `
|
|
67175
|
-
<div
|
|
67176
|
-
class="
|
|
67177
|
-
column-divider
|
|
67178
|
-
right
|
|
67179
|
-
${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
|
|
67180
|
-
${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getRightDividerIndex(c.index) ? 'divider-active' : ''}`}
|
|
67181
|
-
${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index) ? 'draggable' : ''}`}
|
|
67182
|
-
"
|
|
67183
|
-
@mousedown="${(_, c) => c.parent.onRightDividerMouseDown(c.event, c.index)}">
|
|
67184
|
-
</div>
|
|
67185
|
-
`)}
|
|
67186
|
-
</div>
|
|
67187
|
-
`, { positioning: true })}
|
|
67188
|
-
<div class="header-scrollbar-spacer"></div>
|
|
67189
|
-
</span>
|
|
67190
|
-
</div>
|
|
67191
|
-
</div>
|
|
67192
|
-
<div class="table-viewport" tabindex="-1" ${ref('viewport')}>
|
|
67193
|
-
<div class="table-scroll"></div>
|
|
67194
|
-
<div class="table-row-container ${x => `${x.showCollapseAll ? 'collapse-all-visible' : ''}`}" ${children$1({ property: 'rowElements', filter: elements(`${tableRowTag}, ${tableGroupRowTag}`) })}
|
|
67195
|
-
role="rowgroup">
|
|
67196
|
-
${when(x => x.columns.length > 0 && x.canRenderRows, html `
|
|
67197
|
-
${repeat(x => x.virtualizer.visibleItems, html `
|
|
67198
|
-
${when((x, c) => c.parent.tableData[x.index]?.isGroupRow, html `
|
|
67199
|
-
<${tableGroupRowTag}
|
|
67200
|
-
class="group-row"
|
|
67201
|
-
${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
|
|
67202
|
-
tabindex="-1"
|
|
67203
|
-
:groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
|
|
67204
|
-
?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
|
|
67205
|
-
:nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
|
|
67206
|
-
:immediateChildCount="${(x, c) => c.parent.tableData[x.index]?.immediateChildCount}"
|
|
67207
|
-
:groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
|
|
67208
|
-
?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
|
|
67209
|
-
selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
|
|
67210
|
-
:resolvedRowIndex="${x => x.index}"
|
|
67211
|
-
?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
|
|
67212
|
-
@focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
|
|
67213
|
-
@blur="${(_, c) => c.parent.onRowBlur(c.event)}"
|
|
67214
|
-
@group-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
|
|
67215
|
-
@group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
|
|
67216
|
-
>
|
|
67217
|
-
</${tableGroupRowTag}>
|
|
67137
|
+
</span>
|
|
67138
|
+
<span class="column-headers-container" ${ref('columnHeadersContainer')}>
|
|
67139
|
+
${repeat(x => x.visibleColumns, html `
|
|
67140
|
+
<div class="header-container">
|
|
67141
|
+
${when((_, c) => c.index > 0, html `
|
|
67142
|
+
<div
|
|
67143
|
+
class="
|
|
67144
|
+
column-divider
|
|
67145
|
+
left
|
|
67146
|
+
${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
|
|
67147
|
+
${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getLeftDividerIndex(c.index) ? 'divider-active' : ''}`}
|
|
67148
|
+
${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index - 1) ? 'draggable' : ''}`}
|
|
67149
|
+
"
|
|
67150
|
+
@pointerdown="${(_, c) => c.parent.onLeftDividerPointerDown(c.event, c.index)}">
|
|
67151
|
+
</div>
|
|
67218
67152
|
`)}
|
|
67219
|
-
|
|
67220
|
-
|
|
67221
|
-
|
|
67222
|
-
${
|
|
67223
|
-
|
|
67224
|
-
|
|
67225
|
-
|
|
67226
|
-
|
|
67227
|
-
|
|
67228
|
-
|
|
67229
|
-
?reserve-collapse-space="${(_, c) => c.parent.canHaveCollapsibleRows}"
|
|
67230
|
-
:dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
|
|
67231
|
-
:columns="${(_, c) => c.parent.columns}"
|
|
67232
|
-
:isParentRow="${(x, c) => c.parent.tableData[x.index]?.isParentRow}"
|
|
67233
|
-
:nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
|
|
67234
|
-
?row-operation-grid-cell-hidden="${(_, c) => !c.parent.showRowOperationColumn}"
|
|
67235
|
-
?loading="${(x, c) => c.parent.tableData[x.index]?.isLoadingChildren}"
|
|
67236
|
-
:resolvedRowIndex="${x => x.index}"
|
|
67237
|
-
?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
|
|
67238
|
-
@click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
|
|
67239
|
-
@focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
|
|
67240
|
-
@blur="${(_, c) => c.parent.onRowBlur(c.event)}"
|
|
67241
|
-
@row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
|
|
67242
|
-
@row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
|
|
67243
|
-
@row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
|
|
67244
|
-
@row-slots-request="${(_, c) => c.parent.onRowSlotsRequest(c.event)}"
|
|
67245
|
-
@row-expand-toggle="${(x, c) => c.parent.handleRowExpanded(x.index)}"
|
|
67153
|
+
<${tableHeaderTag}
|
|
67154
|
+
class="header"
|
|
67155
|
+
${'' /* tabindex managed dynamically by KeyboardNavigationManager (if column sorting not disabled) */}
|
|
67156
|
+
sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
|
|
67157
|
+
?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
|
|
67158
|
+
?indicators-hidden="${x => x.columnInternals.hideHeaderIndicators}"
|
|
67159
|
+
@keydown="${(x, c) => c.parent.onHeaderKeyDown(x, c.event)}"
|
|
67160
|
+
@click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
|
|
67161
|
+
:alignment="${x => x.columnInternals.headerAlignment}"
|
|
67162
|
+
:isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
|
|
67246
67163
|
>
|
|
67247
|
-
|
|
67248
|
-
|
|
67249
|
-
|
|
67250
|
-
|
|
67251
|
-
|
|
67252
|
-
|
|
67253
|
-
|
|
67164
|
+
<slot name="${x => x.slot}"></slot>
|
|
67165
|
+
</${tableHeaderTag}>
|
|
67166
|
+
${when((_, c) => c.index < c.length - 1, html `
|
|
67167
|
+
<div
|
|
67168
|
+
class="
|
|
67169
|
+
column-divider
|
|
67170
|
+
right
|
|
67171
|
+
${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
|
|
67172
|
+
${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getRightDividerIndex(c.index) ? 'divider-active' : ''}`}
|
|
67173
|
+
${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index) ? 'draggable' : ''}`}
|
|
67174
|
+
"
|
|
67175
|
+
@pointerdown="${(_, c) => c.parent.onRightDividerPointerDown(c.event, c.index)}">
|
|
67176
|
+
</div>
|
|
67177
|
+
`)}
|
|
67178
|
+
</div>
|
|
67179
|
+
`, { positioning: true })}
|
|
67180
|
+
<div class="header-scrollbar-spacer"></div>
|
|
67181
|
+
</span>
|
|
67182
|
+
</div>
|
|
67183
|
+
</div>
|
|
67184
|
+
<div class="table-viewport" tabindex="-1" ${ref('viewport')}>
|
|
67185
|
+
<div class="table-scroll"></div>
|
|
67186
|
+
<div class="table-row-container ${x => `${x.showCollapseAll ? 'collapse-all-visible' : ''}`}" ${children$1({ property: 'rowElements', filter: elements(`${tableRowTag}, ${tableGroupRowTag}`) })}
|
|
67187
|
+
role="rowgroup">
|
|
67188
|
+
${when(x => x.columns.length > 0 && x.canRenderRows, html `
|
|
67189
|
+
${repeat(x => x.virtualizer.visibleItems, html `
|
|
67190
|
+
${when((x, c) => c.parent.tableData[x.index]?.isGroupRow, html `
|
|
67191
|
+
<${tableGroupRowTag}
|
|
67192
|
+
class="group-row"
|
|
67193
|
+
${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
|
|
67194
|
+
tabindex="-1"
|
|
67195
|
+
:groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
|
|
67196
|
+
?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
|
|
67197
|
+
:nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
|
|
67198
|
+
:immediateChildCount="${(x, c) => c.parent.tableData[x.index]?.immediateChildCount}"
|
|
67199
|
+
:groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
|
|
67200
|
+
?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
|
|
67201
|
+
selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
|
|
67202
|
+
:resolvedRowIndex="${x => x.index}"
|
|
67203
|
+
?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
|
|
67204
|
+
@focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
|
|
67205
|
+
@blur="${(_, c) => c.parent.onRowBlur(c.event)}"
|
|
67206
|
+
@group-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
|
|
67207
|
+
@group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
|
|
67208
|
+
>
|
|
67209
|
+
</${tableGroupRowTag}>
|
|
67210
|
+
`)}
|
|
67211
|
+
${when((x, c) => !c.parent.tableData[x.index]?.isGroupRow, html `
|
|
67212
|
+
<${tableRowTag}
|
|
67213
|
+
class="row"
|
|
67214
|
+
${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
|
|
67215
|
+
tabindex="-1"
|
|
67216
|
+
record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
|
|
67217
|
+
?selectable="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.none}"
|
|
67218
|
+
?selected="${(x, c) => c.parent.tableData[x.index]?.selectionState === TableRowSelectionState.selected}"
|
|
67219
|
+
?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
|
|
67220
|
+
?hide-selection="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.multiple}"
|
|
67221
|
+
?reserve-collapse-space="${(_, c) => c.parent.canHaveCollapsibleRows}"
|
|
67222
|
+
:dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
|
|
67223
|
+
:columns="${(_, c) => c.parent.columns}"
|
|
67224
|
+
:isParentRow="${(x, c) => c.parent.tableData[x.index]?.isParentRow}"
|
|
67225
|
+
:nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
|
|
67226
|
+
?row-operation-grid-cell-hidden="${(_, c) => !c.parent.showRowOperationColumn}"
|
|
67227
|
+
?loading="${(x, c) => c.parent.tableData[x.index]?.isLoadingChildren}"
|
|
67228
|
+
:resolvedRowIndex="${x => x.index}"
|
|
67229
|
+
?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
|
|
67230
|
+
@click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
|
|
67231
|
+
@focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
|
|
67232
|
+
@blur="${(_, c) => c.parent.onRowBlur(c.event)}"
|
|
67233
|
+
@row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
|
|
67234
|
+
@row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
|
|
67235
|
+
@row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
|
|
67236
|
+
@row-slots-request="${(_, c) => c.parent.onRowSlotsRequest(c.event)}"
|
|
67237
|
+
@row-expand-toggle="${(x, c) => c.parent.handleRowExpanded(x.index)}"
|
|
67238
|
+
>
|
|
67239
|
+
${repeat((x, c) => (c.parent.tableData[x.index]?.requestedSlots || []), html `
|
|
67240
|
+
<slot
|
|
67241
|
+
name="${x => x.name}"
|
|
67242
|
+
slot="${x => x.slot}"
|
|
67243
|
+
></slot>
|
|
67254
67244
|
`)}
|
|
67245
|
+
</${tableRowTag}>
|
|
67255
67246
|
`)}
|
|
67256
67247
|
`)}
|
|
67257
|
-
|
|
67248
|
+
`)}
|
|
67258
67249
|
</div>
|
|
67259
67250
|
</div>
|
|
67260
67251
|
</div>
|
|
@@ -68192,12 +68183,11 @@ focus outline in that case.
|
|
|
68192
68183
|
this.currentTotalDelta = 0;
|
|
68193
68184
|
this.dragStart = 0;
|
|
68194
68185
|
this.initialColumnWidths = [];
|
|
68195
|
-
this.
|
|
68196
|
-
const mouseEvent = event;
|
|
68186
|
+
this.onDividerPointerMove = (event) => {
|
|
68197
68187
|
for (let i = 0; i < this.visibleColumns.length; i++) {
|
|
68198
68188
|
this.visibleColumns[i].columnInternals.currentPixelWidth = this.initialColumnWidths[i]?.initialPixelWidth;
|
|
68199
68189
|
}
|
|
68200
|
-
this.currentTotalDelta = this.getAllowedSizeDelta(
|
|
68190
|
+
this.currentTotalDelta = this.getAllowedSizeDelta(event.clientX - this.dragStart);
|
|
68201
68191
|
this.performCascadeSizeLeft(this.leftColumnIndex, this.currentTotalDelta);
|
|
68202
68192
|
this.performCascadeSizeRight(this.rightColumnIndex, this.currentTotalDelta);
|
|
68203
68193
|
const totalColumnWidthDelta = this.getTotalColumnFixedWidth() - this.initialColumnTotalWidth;
|
|
@@ -68208,13 +68198,14 @@ focus outline in that case.
|
|
|
68208
68198
|
this.table.tableScrollableMinWidth = this.initialTableScrollableMinWidth;
|
|
68209
68199
|
}
|
|
68210
68200
|
};
|
|
68211
|
-
this.
|
|
68212
|
-
|
|
68213
|
-
|
|
68201
|
+
this.onDividerPointerUp = () => {
|
|
68202
|
+
this.activeColumnDividerElement.removeEventListener('pointermove', this.onDividerPointerMove);
|
|
68203
|
+
this.activeColumnDividerElement.removeEventListener('pointerup', this.onDividerPointerUp);
|
|
68214
68204
|
this.resetGridSizedColumns();
|
|
68215
68205
|
this.isColumnBeingSized = false;
|
|
68216
68206
|
this.activeColumnIndex = undefined;
|
|
68217
68207
|
this.activeColumnDivider = undefined;
|
|
68208
|
+
this.activeColumnDividerElement = undefined;
|
|
68218
68209
|
this.visibleColumns = [];
|
|
68219
68210
|
};
|
|
68220
68211
|
}
|
|
@@ -68232,11 +68223,14 @@ focus outline in that case.
|
|
|
68232
68223
|
}
|
|
68233
68224
|
/**
|
|
68234
68225
|
* Sets up state related to interactively sizing a column.
|
|
68226
|
+
* @param activeColumnDividerElement The divider element that was clicked on
|
|
68227
|
+
* @param pointerId The pointerId of the pointer that started the drag
|
|
68235
68228
|
* @param dragStart The x-position from which a column size was started
|
|
68236
|
-
* @param activeColumnDivider The divider that was clicked on
|
|
68229
|
+
* @param activeColumnDivider The 1-based index of the divider that was clicked on
|
|
68237
68230
|
*/
|
|
68238
|
-
beginColumnInteractiveSize(dragStart, activeColumnDivider) {
|
|
68231
|
+
beginColumnInteractiveSize(activeColumnDividerElement, pointerId, dragStart, activeColumnDivider) {
|
|
68239
68232
|
this.activeColumnDivider = activeColumnDivider;
|
|
68233
|
+
this.activeColumnDividerElement = activeColumnDividerElement;
|
|
68240
68234
|
this.leftColumnIndex = this.getLeftColumnIndexFromDivider(this.activeColumnDivider);
|
|
68241
68235
|
this.rightColumnIndex = this.leftColumnIndex + 1;
|
|
68242
68236
|
this.activeColumnIndex = this.leftColumnIndex + (this.activeColumnDivider % 2);
|
|
@@ -68248,8 +68242,12 @@ focus outline in that case.
|
|
|
68248
68242
|
this.initialTableScrollableMinWidth = this.table.tableScrollableMinWidth;
|
|
68249
68243
|
this.initialColumnTotalWidth = this.getTotalColumnFixedWidth();
|
|
68250
68244
|
this.isColumnBeingSized = true;
|
|
68251
|
-
|
|
68252
|
-
|
|
68245
|
+
// pointerId of -1 indicates source was synthetic PointerEvent: https://w3c.github.io/pointerevents/#dom-pointerevent-pointerid
|
|
68246
|
+
if (pointerId !== -1) {
|
|
68247
|
+
activeColumnDividerElement.setPointerCapture(pointerId);
|
|
68248
|
+
}
|
|
68249
|
+
activeColumnDividerElement.addEventListener('pointermove', this.onDividerPointerMove);
|
|
68250
|
+
activeColumnDividerElement.addEventListener('pointerup', this.onDividerPointerUp);
|
|
68253
68251
|
}
|
|
68254
68252
|
/**
|
|
68255
68253
|
* Determines if the specified column or any columns to the left are resizable.
|
|
@@ -70505,15 +70503,15 @@ focus outline in that case.
|
|
|
70505
70503
|
this.expansionManager.collapseAll();
|
|
70506
70504
|
}
|
|
70507
70505
|
/** @internal */
|
|
70508
|
-
|
|
70509
|
-
if (event.button === 0) {
|
|
70510
|
-
this.layoutManager.beginColumnInteractiveSize(event.clientX, this.getRightDividerIndex(columnIndex));
|
|
70506
|
+
onRightDividerPointerDown(event, columnIndex) {
|
|
70507
|
+
if (event.pointerType !== 'mouse' || event.button === 0) {
|
|
70508
|
+
this.layoutManager.beginColumnInteractiveSize(event.target, event.pointerId, event.clientX, this.getRightDividerIndex(columnIndex));
|
|
70511
70509
|
}
|
|
70512
70510
|
}
|
|
70513
70511
|
/** @internal */
|
|
70514
|
-
|
|
70515
|
-
if (event.button === 0) {
|
|
70516
|
-
this.layoutManager.beginColumnInteractiveSize(event.clientX, this.getLeftDividerIndex(columnIndex));
|
|
70512
|
+
onLeftDividerPointerDown(event, columnIndex) {
|
|
70513
|
+
if (event.pointerType !== 'mouse' || event.button === 0) {
|
|
70514
|
+
this.layoutManager.beginColumnInteractiveSize(event.target, event.pointerId, event.clientX, this.getLeftDividerIndex(columnIndex));
|
|
70517
70515
|
}
|
|
70518
70516
|
}
|
|
70519
70517
|
/** @internal */
|