@ni/nimble-components 21.8.1 → 21.8.2

package/dist/all-components-bundle.min.js

@@ -9999,6 +9999,17 @@ return!this.missingColumnId&&!this.duplicateColumnId}validateColumnSortIndices(t
         height: ${il};
         cursor: col-resize;
         position: absolute;
+        z-index: ${$h};
+    }
+
+    .column-divider:hover,
+    .column-divider.divider-active {
+        border-color: ${qa};
+    }
+
+    .column-divider.column-active,
+    .header-container:hover .column-divider {
+        display: block;
     }
 
     .column-divider::before {
@@ -10015,17 +10026,6 @@ return!this.missingColumnId&&!this.duplicateColumnId}validateColumnSortIndices(t
         );
     }
 
-    .column-divider.active {
-        display: block;
-        z-index: ${$h};
-    }
-
-    .header-container:hover .column-divider.left,
-    .header-container:hover .column-divider.right {
-        display: block;
-        z-index: ${$h};
-    }
-
     .column-divider.left {
         left: -1px;
     }
@@ -10614,8 +10614,14 @@ const lD="nimble-table-group-row",cD=Z`
                             ${Ut((t=>t.visibleColumns),Z`
                                 <div class="header-container">
                                     ${Ft(((t,e)=>e.index>0),Z`
-                                        <div class="column-divider left ${(t,e)=>""+(e.parent.layoutManager.activeColumnIndex===e.index?"active":"")}" 
-                                             @mousedown="${(t,e)=>e.parent.onLeftDividerMouseDown(e.event,e.index)}">
+                                        <div
+                                            class="
+                                                column-divider
+                                                left
+                                                ${(t,e)=>""+(e.parent.layoutManager.activeColumnIndex===e.index?"column-active":"")}
+                                                ${(t,e)=>""+(e.parent.layoutManager.activeColumnDivider===e.parent.getLeftDividerIndex(e.index)?"divider-active":"")}
+                                            "
+                                            @mousedown="${(t,e)=>e.parent.onLeftDividerMouseDown(e.event,e.index)}">
                                         </div>
                                     `)}
                                         <${WR}
@@ -10628,7 +10634,13 @@ const lD="nimble-table-group-row",cD=Z`
                                             <slot name="${t=>t.slot}"></slot>
                                         </${WR}>
                                     ${Ft(((t,e)=>e.index<e.length-1),Z`
-                                        <div class="column-divider right ${(t,e)=>""+(e.parent.layoutManager.activeColumnIndex===e.index?"active":"")}"
+                                        <div
+                                            class="
+                                                column-divider
+                                                right
+                                                ${(t,e)=>""+(e.parent.layoutManager.activeColumnIndex===e.index?"column-active":"")}
+                                                ${(t,e)=>""+(e.parent.layoutManager.activeColumnDivider===e.parent.getRightDividerIndex(e.index)?"divider-active":"")}
+                                            "
                                              @mousedown="${(t,e)=>e.parent.onRightDividerMouseDown(e.event,e.index)}">
                                         </div>
                                     `)}                        
@@ -10794,7 +10806,7 @@ class SD{constructor(t){this.table=t,this.isColumnBeingSized=!1,this.visibleColu
 for(let t=0;t<this.visibleColumns.length;t++)this.visibleColumns[t].columnInternals.currentPixelWidth=this.initialColumnWidths[t]?.initialPixelWidth
 this.currentTotalDelta=this.getAllowedSizeDelta(e.clientX-this.dragStart),this.performCascadeSizeLeft(this.leftColumnIndex,this.currentTotalDelta),this.performCascadeSizeRight(this.rightColumnIndex,this.currentTotalDelta)
 const n=this.getTotalColumnFixedWidth()-this.initialColumnTotalWidth
-this.table.tableScrollableMinWidth=n>0?this.initialTableScrollableWidth+n:this.initialTableScrollableMinWidth},this.onDividerMouseUp=()=>{document.removeEventListener("mousemove",this.onDividerMouseMove),document.removeEventListener("mouseup",this.onDividerMouseUp),this.resetGridSizedColumns(),this.isColumnBeingSized=!1,this.activeColumnIndex=void 0}}getGridTemplateColumns(){return this.getVisibleColumns().map((t=>{const{minPixelWidth:e,currentPixelWidth:n,currentFractionalWidth:i}=t.columnInternals
+this.table.tableScrollableMinWidth=n>0?this.initialTableScrollableWidth+n:this.initialTableScrollableMinWidth},this.onDividerMouseUp=()=>{document.removeEventListener("mousemove",this.onDividerMouseMove),document.removeEventListener("mouseup",this.onDividerMouseUp),this.resetGridSizedColumns(),this.isColumnBeingSized=!1,this.activeColumnIndex=void 0,this.activeColumnDivider=void 0}}getGridTemplateColumns(){return this.getVisibleColumns().map((t=>{const{minPixelWidth:e,currentPixelWidth:n,currentFractionalWidth:i}=t.columnInternals
 if(n){return`${Math.max(e,n)}px`}return`minmax(${e}px, ${i}fr)`})).join(" ")}beginColumnInteractiveSize(t,e){this.activeColumnDivider=e,this.leftColumnIndex=this.getLeftColumnIndexFromDivider(this.activeColumnDivider),this.rightColumnIndex=this.leftColumnIndex+1,this.activeColumnIndex=this.leftColumnIndex+this.activeColumnDivider%2,this.dragStart=t,this.currentTotalDelta=0,this.visibleColumns=this.getVisibleColumns(),this.setColumnsToFixedSize(),this.initialTableScrollableWidth=this.table.viewport.scrollWidth,this.initialTableScrollableMinWidth=this.table.tableScrollableMinWidth,this.initialColumnTotalWidth=this.getTotalColumnFixedWidth(),this.isColumnBeingSized=!0,document.addEventListener("mousemove",this.onDividerMouseMove),document.addEventListener("mouseup",this.onDividerMouseUp)}getTotalColumnFixedWidth(){let t=0
 for(const e of this.visibleColumns)t+=e.columnInternals.currentPixelWidth??0
 return t}setColumnsToFixedSize(){this.cacheGridSizedColumns()
@@ -10814,7 +10826,7 @@ for(const t of this.visibleColumns)this.initialColumnWidths.push({initalColumnFr
 const t=this.gridSizedColumns.reduce(((t,e)=>t+e.columnInternals.currentPixelWidth),0),e=t/this.gridSizedColumns.length
 let n=0
 for(let t=0;t<this.visibleColumns.length&&n<this.gridSizedColumns.length;t++){const i=this.visibleColumns[t]
-i===this.gridSizedColumns[n]&&(n+=1,i.columnInternals.currentFractionalWidth=i.columnInternals.currentPixelWidth/e,i.columnInternals.currentPixelWidth=void 0)}}getVisibleColumns(){return this.table.columns.filter((t=>!t.columnHidden))}getLeftColumnIndexFromDivider(t){return Math.floor(t/2)}}t([g],SD.prototype,"isColumnBeingSized",void 0),t([g],SD.prototype,"activeColumnIndex",void 0)
+i===this.gridSizedColumns[n]&&(n+=1,i.columnInternals.currentFractionalWidth=i.columnInternals.currentPixelWidth/e,i.columnInternals.currentPixelWidth=void 0)}}getVisibleColumns(){return this.table.columns.filter((t=>!t.columnHidden))}getLeftColumnIndexFromDivider(t){return Math.floor(t/2)}}t([g],SD.prototype,"isColumnBeingSized",void 0),t([g],SD.prototype,"activeColumnIndex",void 0),t([g],SD.prototype,"activeColumnDivider",void 0)
 const $D=(t,...e)=>{for(const n of e)if(t===n)return!0
 return!1},MD=["rowIds","rowParentIds","groupRows","columnIds","columnSort","columnWidths","columnDefinition","actionMenuSlots","selectionMode"]
 class _D extends nI{constructor(t){super(MD),this.table=t,this.updateQueued=!1}get updateRowIds(){return this.isTracked("rowIds")}get updateRowParentIds(){return this.isTracked("rowParentIds")}get updateGroupRows(){return this.isTracked("groupRows")}get updateColumnIds(){return this.isTracked("columnIds")}get updateColumnSort(){return this.isTracked("columnSort")}get updateColumnWidths(){return this.isTracked("columnWidths")}get updateColumnDefinition(){return this.isTracked("columnDefinition")}get updateActionMenuSlots(){return this.isTracked("actionMenuSlots")}get updateSelectionMode(){return this.isTracked("selectionMode")}get requiresTanStackUpdate(){return this.isTracked("rowIds")||this.isTracked("rowParentIds")||this.isTracked("columnSort")||this.isTracked("columnDefinition")||this.isTracked("groupRows")||this.isTracked("selectionMode")}get requiresTanStackDataReset(){return this.isTracked("rowIds")||this.isTracked("columnDefinition")||this.isTracked("rowParentIds")}trackAllStateChanged(){this.trackAll(),this.queueUpdate()}get hasPendingUpdates(){return this.updateQueued}trackColumnPropertyChanged(t){$D(t,"columnId")?this.track("columnIds"):LR(t,"operandDataRecordFieldName","sortOperation")?this.track("columnDefinition"):$D(t,"sortingDisabled")||LR(t,"currentSortDirection","currentSortIndex")?this.track("columnSort"):$D(t,"columnHidden")||LR(t,"currentFractionalWidth","currentPixelWidth","minPixelWidth")?this.track("columnWidths"):$D(t,"actionMenuSlot")?this.track("actionMenuSlots"):LR(t,"groupIndex","groupingDisabled")&&this.track("groupRows"),this.queueUpdate()}trackColumnInstancesChanged(){this.track("columnIds"),this.track("columnDefinition"),this.track("columnSort"),this.track("columnWidths"),this.track("actionMenuSlots"),this.track("groupRows"),this.queueUpdate()}trackIdFieldNameChanged(){this.track("rowIds"),this.queueUpdate()}trackParentIdFieldNameChanged(){this.track("rowParentIds"),this.queueUpdate()}trackSelectionModeChanged(){this.track("selectionMode"),this.queueUpdate()}queueUpdate(){this.table.$fastController.isConnected&&(this.updateQueued||(this.updateQueued=!0,u.queueUpdate((()=>{this.table.update(),this.untrackAll(),this.updateQueued=!1}))))}}class ED{constructor(t){this.tanStackTable=t}reset(){}toggleIsRowSelected(t,e){t.isGroupRow&&t.selectionState===IR?this.deselectAllLeafRows(t.id):this.tanStackTable.getRow(t.id).toggleSelected(e,{selectChildren:t.isGroupRow})}selectSingleRow(t){if(t.isGroupRow)throw new Error("function not intended to select grouped rows")
@@ -10890,7 +10902,7 @@ const e=this.calculateTanStackData(t)
 this.updateTableOptions(e)}async getSelectedRecordIds(){return await this.processPendingUpdates(),this.selectionManager.getCurrentSelectedRecordIds()}async setSelectedRecordIds(t){await this.processPendingUpdates(),this.selectionMode!==_R.none&&this.updateTableOptions({state:{rowSelection:this.calculateTanStackSelectionState(t)}})}async setRecordHierarchyOptions(t){await this.processPendingUpdates()
 const e=structuredClone(t),n=this.tableValidator.getOptionsWithPresentIds(e)
 this.expansionManager.setHierarchyOptions(n),this.refreshRows()}connectedCallback(){super.connectedCallback(),this.initialize(),this.virtualizer.connect(),this.viewport.addEventListener("scroll",this.onViewPortScroll,{passive:!0}),document.addEventListener("keydown",this.onKeyDown),document.addEventListener("keyup",this.onKeyUp)}disconnectedCallback(){super.disconnectedCallback(),this.virtualizer.disconnect(),this.viewport.removeEventListener("scroll",this.onViewPortScroll),document.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("keyup",this.onKeyUp)}checkValidity(){return this.tableValidator.isValid()}handleChange(t,e){(t instanceof FR||t instanceof zR)&&"string"==typeof e?"validConfiguration"===e?this.tableValidator.validateColumnConfigurations(this.columns):this.tableUpdateTracker.trackColumnPropertyChanged(e):t instanceof SD&&"isColumnBeingSized"===e&&!this.layoutManager.isColumnBeingSized&&this.emitColumnConfigurationChangeEvent()}onRowSelectionToggle(t,e){e.stopImmediatePropagation()
-this.selectionManager.handleRowSelectionToggle(this.tableData[t],e.detail.newState,this.documentShiftKeyDown)&&this.emitSelectionChangeEvent()}onRowClick(t,e){return this.selectionManager.handleRowClick(this.tableData[t],e.shiftKey,e.ctrlKey||e.metaKey)&&this.emitSelectionChangeEvent(),!0}onAllRowsSelectionChange(t){t.stopPropagation(),this.ignoreSelectionChangeEvents||(this.table.toggleAllRowsSelected(this.selectionCheckbox.checked),this.emitSelectionChangeEvent())}onRowActionMenuBeforeToggle(t,e){e.stopImmediatePropagation(),this.handleActionMenuBeforeToggleEvent(t,e)}onRowActionMenuToggle(t){t.stopImmediatePropagation(),this.handleRowActionMenuToggleEvent(t)}handleCollapseAllRows(){this.expansionManager.collapseAll()}onRightDividerMouseDown(t,e){0===t.button&&this.layoutManager.beginColumnInteractiveSize(t.clientX,2*e)}onLeftDividerMouseDown(t,e){0===t.button&&this.layoutManager.beginColumnInteractiveSize(t.clientX,2*e-1)}handleGroupRowExpanded(t,e){this.toggleRowExpanded(t),e.stopPropagation()}handleRowExpanded(t){this.toggleRowExpanded(t)}toggleColumnSort(t,e){if(t.sortingDisabled)return
+this.selectionManager.handleRowSelectionToggle(this.tableData[t],e.detail.newState,this.documentShiftKeyDown)&&this.emitSelectionChangeEvent()}onRowClick(t,e){return this.selectionManager.handleRowClick(this.tableData[t],e.shiftKey,e.ctrlKey||e.metaKey)&&this.emitSelectionChangeEvent(),!0}onAllRowsSelectionChange(t){t.stopPropagation(),this.ignoreSelectionChangeEvents||(this.table.toggleAllRowsSelected(this.selectionCheckbox.checked),this.emitSelectionChangeEvent())}onRowActionMenuBeforeToggle(t,e){e.stopImmediatePropagation(),this.handleActionMenuBeforeToggleEvent(t,e)}onRowActionMenuToggle(t){t.stopImmediatePropagation(),this.handleRowActionMenuToggleEvent(t)}handleCollapseAllRows(){this.expansionManager.collapseAll()}onRightDividerMouseDown(t,e){0===t.button&&this.layoutManager.beginColumnInteractiveSize(t.clientX,this.getRightDividerIndex(e))}onLeftDividerMouseDown(t,e){0===t.button&&this.layoutManager.beginColumnInteractiveSize(t.clientX,this.getLeftDividerIndex(e))}getLeftDividerIndex(t){return 2*t-1}getRightDividerIndex(t){return 2*t}handleGroupRowExpanded(t,e){this.toggleRowExpanded(t),e.stopPropagation()}handleRowExpanded(t){this.toggleRowExpanded(t)}toggleColumnSort(t,e){if(t.sortingDisabled)return
 const n=this.getColumnsParticipatingInSorting().sort(((t,e)=>t.columnInternals.currentSortIndex-e.columnInternals.currentSortIndex)),i=n.indexOf(t),o=i>-1,s=t.columnInternals.currentSortDirection
 let r=MR.ascending
 o?s===MR.descending?(n.splice(i,1),r=MR.none,t.columnInternals.currentSortIndex=void 0):r=MR.descending:n.push(t),t.columnInternals.currentSortDirection=r