@ni/nimble-components 32.2.1 → 32.2.3
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 +37 -6
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +8 -7
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/patterns/button/styles.js +1 -0
- package/dist/esm/patterns/button/styles.js.map +1 -1
- package/dist/esm/table/index.d.ts +8 -0
- package/dist/esm/table/index.js +28 -0
- package/dist/esm/table/index.js.map +1 -1
- package/dist/esm/table/models/virtualizer.d.ts +1 -1
- package/dist/esm/table/models/virtualizer.js +9 -7
- package/dist/esm/table/models/virtualizer.js.map +1 -1
- package/package.json +1 -1
|
@@ -1326,6 +1326,7 @@ class _h{constructor(t,e,n){this.propertyName=t,this.value=e,this.styles=n}bind(
|
|
|
1326
1326
|
color: ${Td};
|
|
1327
1327
|
font: ${Ad};
|
|
1328
1328
|
cursor: pointer;
|
|
1329
|
+
white-space: nowrap;
|
|
1329
1330
|
outline: none;
|
|
1330
1331
|
border: none;
|
|
1331
1332
|
${""}
|
|
@@ -11381,17 +11382,17 @@ const qF=(t,e,n,i)=>{for(;t<=e;){const s=(t+e)/2|0,o=n(s)
|
|
|
11381
11382
|
if(o<i)t=s+1
|
|
11382
11383
|
else{if(!(o>i))return s
|
|
11383
11384
|
e=s-1}}return t>0?t-1:0}
|
|
11384
|
-
class jF{get pageSize(){return this._pageSize}
|
|
11385
|
+
class jF{get pageSize(){return this._pageSize}constructor(t,e){this.visibleItems=[],this.scrollHeight=0,this.isScrolling=!1,this.headerContainerMarginRight=0,this.rowContainerYOffset=0,this._pageSize=0,this.isScrollingTimer=0,this.table=t,this.tanStackTable=e,this.viewportResizeObserver=new ResizeObserver((t=>{const e=t[0]?.borderBoxSize[0]
|
|
11385
11386
|
if(e){this.updatePageSize()
|
|
11386
11387
|
const t=e.inlineSize
|
|
11387
11388
|
this.headerContainerMarginRight=t-this.table.viewport.clientWidth}}))}connect(){this.viewportResizeObserver.observe(this.table.viewport),this.updateVirtualizer()
|
|
11388
11389
|
const t=this.virtualizer.scrollOffset
|
|
11389
|
-
null!==t&&this.table.viewport.scrollTo({top:t})}disconnect(){this.viewportResizeObserver.disconnect()}dataChanged(){this.table.$fastController.isConnected&&this.updateVirtualizer()}scrollToIndex(t,e){this.virtualizer?.scrollToIndex(t,e)}updateVirtualizer(){const t=this.createVirtualizerOptions()
|
|
11390
|
-
this.virtualizer?this.virtualizer.setOptions(t):this.virtualizer=new UF(t),this.virtualizer._willUpdate(),this.handleVirtualizerChange()}createVirtualizerOptions(){const t=this.rowHeight
|
|
11390
|
+
null!==t&&this.table.viewport.scrollTo({top:t})}disconnect(){this.viewportResizeObserver.disconnect()}dataChanged(){this.table.$fastController.isConnected&&this.updateVirtualizer()}scrollToIndex(t,e){this.virtualizer?.scrollToIndex(t,e)}updateRowHeight(){this.updatePageSize(),this.virtualizer&&(this.updateVirtualizer(),this.virtualizer.measure())}updateVirtualizer(){const t=this.createVirtualizerOptions()
|
|
11391
|
+
this.virtualizer?this.virtualizer.setOptions(t):this.virtualizer=new UF(t),this.virtualizer._willUpdate(),this.handleVirtualizerChange()}createVirtualizerOptions(){const t=this.table.rowHeight
|
|
11391
11392
|
return{count:this.tanStackTable.getRowModel().rows.length,getScrollElement:()=>this.table.viewport,estimateSize:e=>t,enableSmoothScroll:!0,overscan:3,isScrollingResetDelay:250,scrollToFn:HF,observeElementOffset:zF,observeElementRect:LF,onChange:()=>this.handleVirtualizerChange()}}handleVirtualizerChange(){const t=this.virtualizer
|
|
11392
11393
|
this.visibleItems=t.getVirtualItems(),this.scrollHeight=t.getTotalSize(),this.isScrolling=t.isScrolling,window.clearTimeout(this.isScrollingTimer),this.isScrolling&&(this.isScrollingTimer=window.setTimeout((()=>{this.isScrolling=!1}),300))
|
|
11393
11394
|
let e=0
|
|
11394
|
-
if(this.visibleItems.length>0){e=this.visibleItems[0].start}this.rowContainerYOffset=e}updatePageSize(){this._pageSize=Math.round(this.table.viewport.clientHeight/this.rowHeight)}}function WF(t){switch(t){case KR:return ZF
|
|
11395
|
+
if(this.visibleItems.length>0){e=this.visibleItems[0].start}this.rowContainerYOffset=e}updatePageSize(){this._pageSize=Math.round(this.table.viewport.clientHeight/this.table.rowHeight)}}function WF(t){switch(t){case KR:return ZF
|
|
11395
11396
|
case YR:return GF
|
|
11396
11397
|
default:return ZF}}function GF(t,e,n){const i=t.getValue(n),s=e.getValue(n)
|
|
11397
11398
|
return"string"==typeof i&&"string"==typeof s?i.localeCompare(s):i===s?0:void 0===i||null===i&&void 0!==s?-1:1}function ZF(t,e,n){const i=t.getValue(n),s=e.getValue(n)
|
|
@@ -11619,7 +11620,7 @@ const i=e??this.columnIndex,s=n??this.rowIndex
|
|
|
11619
11620
|
return i>=0&&i<t.cells.length&&(this.focusType=WR,this.setRowCellFocusState(i,s,!0),!0)}trySetCellContentFocus(t,e,n,i){if(!t)return!1
|
|
11620
11621
|
const s=n??this.columnIndex,o=i??this.rowIndex
|
|
11621
11622
|
return s>=0&&s<t.cells.length&&e>=0&&e<t.cells[s].cell.cellView.tabbableChildren.length&&(this.setCellContentFocusState(e,o,s,!0),!0)}trySetCellActionMenuFocus(t,e,n){const i=e??this.columnIndex,s=n??this.rowIndex
|
|
11622
|
-
return!!(i>=0&&i<t.cells.length&&t.cells[i].actionMenuButton)&&(this.setCellActionMenuFocusState(s,i,!0),!0)}setCellActionMenuFocusState(t,e,n){this.focusType=GR,this.setRowCellFocusState(e,t,n)}setCellContentFocusState(t,e,n,i){this.focusType=ZR,this.cellContentIndex=t,this.setRowCellFocusState(n,e,i)}setRowFocusState(t){this.focusType=qR,void 0!==t&&(this.rowIndex=t)}setCellFocusState(t,e,n){this.focusType=WR,this.setRowCellFocusState(t,e,n)}setRowCellFocusState(t,e,n){this.rowIndex=e,this.columnIndex=t,n&&this.focusCurrentRow(!0)}isResolvedRowType(t){return t instanceof kF||t instanceof $F}}let hN=class extends We{get validity(){return this.tableValidator.getValidity()}get showRowOperationColumn(){return this.selectionMode===FR.multiple||this.showCollapseAll}get collapseButtonVisibility(){return this.canHaveCollapsibleRows?this.showCollapseAll?"visible":"":"hidden-size-reduced"}constructor(){super(),this.selectionMode=FR.none,this.tableData=[],this.columns=[],this.childItems=[],this.rowElements=[],this.canRenderRows=!0,this.scrollX=0,this.selectionState=NR,this.showCollapseAll=!1,this.canHaveCollapsibleRows=!1,this.visibleColumns=[],this.tableScrollableMinWidth=0,this.windowShiftKeyDown=!1,this.tableValidator=new lF,this.tableUpdateTracker=new JF(this),this.columnNotifiers=[],this.isInitialized=!1,this.ignoreSelectionChangeEvents=!1,this.requestedSlots=new Map,this.actionMenuSlots=[],this.onViewPortScroll=t=>{this.scrollX=t.target.scrollLeft},this.onKeyDown=t=>{this.windowShiftKeyDown=t.shiftKey},this.onKeyUp=t=>{this.windowShiftKeyDown=t.shiftKey},this.onBlur=()=>{this.windowShiftKeyDown=!1},this.getRowCanExpand=t=>this.expansionManager.isRowExpandable(t),this.getIsRowExpanded=t=>this.expansionManager.isRowExpanded(t),this.handleRowSelectionChange=t=>{const e=t instanceof Function?t(this.table.getState().rowSelection):t
|
|
11623
|
+
return!!(i>=0&&i<t.cells.length&&t.cells[i].actionMenuButton)&&(this.setCellActionMenuFocusState(s,i,!0),!0)}setCellActionMenuFocusState(t,e,n){this.focusType=GR,this.setRowCellFocusState(e,t,n)}setCellContentFocusState(t,e,n,i){this.focusType=ZR,this.cellContentIndex=t,this.setRowCellFocusState(n,e,i)}setRowFocusState(t){this.focusType=qR,void 0!==t&&(this.rowIndex=t)}setCellFocusState(t,e,n){this.focusType=WR,this.setRowCellFocusState(t,e,n)}setRowCellFocusState(t,e,n){this.rowIndex=e,this.columnIndex=t,n&&this.focusCurrentRow(!0)}isResolvedRowType(t){return t instanceof kF||t instanceof $F}}let hN=class extends We{get validity(){return this.tableValidator.getValidity()}get showRowOperationColumn(){return this.selectionMode===FR.multiple||this.showCollapseAll}get collapseButtonVisibility(){return this.canHaveCollapsibleRows?this.showCollapseAll?"visible":"":"hidden-size-reduced"}get rowHeight(){return this._rowHeight}constructor(){super(),this.selectionMode=FR.none,this.tableData=[],this.columns=[],this.childItems=[],this.rowElements=[],this.canRenderRows=!0,this.scrollX=0,this.selectionState=NR,this.showCollapseAll=!1,this.canHaveCollapsibleRows=!1,this.visibleColumns=[],this.tableScrollableMinWidth=0,this.windowShiftKeyDown=!1,this.tableValidator=new lF,this.tableUpdateTracker=new JF(this),this.columnNotifiers=[],this._rowHeight=0,this.isInitialized=!1,this.ignoreSelectionChangeEvents=!1,this.requestedSlots=new Map,this.borderWidthSubscriber={handleChange:()=>{this.updateRowHeight()}},this.controlHeightSubscriber={handleChange:()=>{this.updateRowHeight()}},this.actionMenuSlots=[],this.onViewPortScroll=t=>{this.scrollX=t.target.scrollLeft},this.onKeyDown=t=>{this.windowShiftKeyDown=t.shiftKey},this.onKeyUp=t=>{this.windowShiftKeyDown=t.shiftKey},this.onBlur=()=>{this.windowShiftKeyDown=!1},this.getRowCanExpand=t=>this.expansionManager.isRowExpandable(t),this.getIsRowExpanded=t=>this.expansionManager.isRowExpanded(t),this.handleRowSelectionChange=t=>{const e=t instanceof Function?t(this.table.getState().rowSelection):t
|
|
11623
11624
|
this.updateTableOptions({state:{rowSelection:e}})},this.handleExpandedChange=t=>{const e=t instanceof Function?t(this.table.getState().expanded):t
|
|
11624
11625
|
this.updateTableOptions({state:{expanded:e}})},this.options={data:[],onStateChange:t=>{},onRowSelectionChange:this.handleRowSelectionChange,onExpandedChange:this.handleExpandedChange,getCoreRowModel:t=>FO((()=>[t.options.data]),(e=>{const n={rows:[],flatRows:[],rowsById:{}},i=function(e,s,o){void 0===s&&(s=0)
|
|
11625
11626
|
const r=[]
|
|
@@ -11646,7 +11647,7 @@ return t.rows.forEach(n),{rows:e,flatRows:t.flatRows,rowsById:t.rowsById}}(e):e)
|
|
|
11646
11647
|
const e=t.map((t=>({...t}))),n=this.calculateTanStackData(e)
|
|
11647
11648
|
this.updateTableOptions(n)}async getSelectedRecordIds(){return await this.processPendingUpdates(),this.selectionManager.getCurrentSelectedRecordIds()}async setSelectedRecordIds(t){await this.processPendingUpdates(),this.selectionMode!==FR.none&&this.updateTableOptions({state:{rowSelection:this.calculateTanStackSelectionState(t)}})}async setRecordHierarchyOptions(t){await this.processPendingUpdates()
|
|
11648
11649
|
const e=structuredClone(t),n=this.tableValidator.getOptionsWithPresentIds(e)
|
|
11649
|
-
this.expansionManager.setHierarchyOptions(n),this.refreshRows()}connectedCallback(){super.connectedCallback(),this.initialize(),this.virtualizer.connect(),this.viewport.addEventListener("scroll",this.onViewPortScroll,{passive:!0}),this.keyboardNavigationManager.connect(),window.addEventListener("keydown",this.onKeyDown),window.addEventListener("keyup",this.onKeyUp),window.addEventListener("blur",this.onBlur)}disconnectedCallback(){super.disconnectedCallback(),this.virtualizer.disconnect(),this.keyboardNavigationManager.disconnect(),this.viewport.removeEventListener("scroll",this.onViewPortScroll),window.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("keyup",this.onKeyUp),window.removeEventListener("blur",this.onBlur)}checkValidity(){return this.tableValidator.isValid()}handleChange(t,e){(t instanceof aF||t instanceof oF)&&"string"==typeof e?this.tableUpdateTracker.trackColumnPropertyChanged(e):t instanceof cN&&"isColumnValid"===e?this.tableValidator.validateColumnConfigurations(this.columns):t instanceof KF&&"isColumnBeingSized"===e&&!this.layoutManager.isColumnBeingSized&&this.emitColumnConfigurationChangeEvent()}onRowSelectionToggle(t,e){e.stopImmediatePropagation()
|
|
11650
|
+
this.expansionManager.setHierarchyOptions(n),this.refreshRows()}connectedCallback(){super.connectedCallback(),this.initialize(),this.updateRowHeight(),this.virtualizer.connect(),this.viewport.addEventListener("scroll",this.onViewPortScroll,{passive:!0}),this.keyboardNavigationManager.connect(),window.addEventListener("keydown",this.onKeyDown),window.addEventListener("keyup",this.onKeyUp),window.addEventListener("blur",this.onBlur),ql.subscribe(this.borderWidthSubscriber,this),Bl.subscribe(this.controlHeightSubscriber,this)}disconnectedCallback(){super.disconnectedCallback(),this.virtualizer.disconnect(),this.keyboardNavigationManager.disconnect(),this.viewport.removeEventListener("scroll",this.onViewPortScroll),window.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("keyup",this.onKeyUp),window.removeEventListener("blur",this.onBlur),ql.unsubscribe(this.borderWidthSubscriber),Bl.unsubscribe(this.controlHeightSubscriber)}checkValidity(){return this.tableValidator.isValid()}handleChange(t,e){(t instanceof aF||t instanceof oF)&&"string"==typeof e?this.tableUpdateTracker.trackColumnPropertyChanged(e):t instanceof cN&&"isColumnValid"===e?this.tableValidator.validateColumnConfigurations(this.columns):t instanceof KF&&"isColumnBeingSized"===e&&!this.layoutManager.isColumnBeingSized&&this.emitColumnConfigurationChangeEvent()}onRowSelectionToggle(t,e){e.stopImmediatePropagation()
|
|
11650
11651
|
this.selectionManager.handleRowSelectionToggle(this.tableData[t],e.detail.newState,this.windowShiftKeyDown)&&this.emitSelectionChangeEvent()}onRowClick(t,e){return this.selectionManager.handleRowClick(this.tableData[t],e.shiftKey,e.ctrlKey||e.metaKey)&&this.emitSelectionChangeEvent(),!0}onRowFocusIn(t){this.keyboardNavigationManager.onRowFocusIn(t)}onRowBlur(t){this.keyboardNavigationManager.onRowBlur(t)}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)}onRowSlotsRequest(t){t.stopImmediatePropagation()
|
|
11651
11652
|
for(const e of t.detail.slots){const n=nF(t.detail.columnInternalId,e.slot)
|
|
11652
11653
|
this.requestedSlots.set(e.name,{recordId:t.detail.recordId,uniqueSlot:n})}this.refreshRows()}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.columnInternals.sortingDisabled)return
|
|
@@ -11700,7 +11701,7 @@ return this.firstSortedColumn=t.length?t[0]:void 0,t.map((t=>({id:t.columnIntern
|
|
|
11700
11701
|
if("string"==typeof n)return e.clientRecord[n]},sortingFn:WF(t.columnInternals.sortOperation),sortUndefined:!1})))}calculateTanStackSelectionState(t){if(this.selectionMode===FR.none)return{}
|
|
11701
11702
|
const e={},n=this.tableValidator.getPresentRecordIds(t)
|
|
11702
11703
|
for(const t of n)if(e[t]=!0,this.selectionMode===FR.single)break
|
|
11703
|
-
return e}}
|
|
11704
|
+
return e}updateRowHeight(){this._rowHeight=parseFloat(Bl.getValueFor(this))+2*parseFloat(ql.getValueFor(this)),this.virtualizer?.updateRowHeight()}}
|
|
11704
11705
|
t([ft({attribute:"id-field-name"})],hN.prototype,"idFieldName",void 0),t([ft({attribute:"parent-id-field-name"})],hN.prototype,"parentIdFieldName",void 0),t([ft({attribute:"selection-mode"})],hN.prototype,"selectionMode",void 0),t([C],hN.prototype,"tableData",void 0),t([C],hN.prototype,"columns",void 0),t([C],hN.prototype,"childItems",void 0),t([C],hN.prototype,"rowElements",void 0),t([C],hN.prototype,"openActionMenuRecordId",void 0),t([C],hN.prototype,"canRenderRows",void 0),t([C],hN.prototype,"scrollX",void 0),t([C],hN.prototype,"rowGridColumns",void 0),t([C],hN.prototype,"selectionState",void 0),t([C],hN.prototype,"selectionCheckbox",void 0),t([C],hN.prototype,"collapseAllButton",void 0),t([C],hN.prototype,"showCollapseAll",void 0),t([C],hN.prototype,"canHaveCollapsibleRows",void 0),t([k],hN.prototype,"collapseButtonVisibility",null),t([C],hN.prototype,"firstSortedColumn",void 0),t([C],hN.prototype,"visibleColumns",void 0),t([C],hN.prototype,"tableScrollableMinWidth",void 0),t([C],hN.prototype,"windowShiftKeyDown",void 0)
|
|
11705
11706
|
const uN=hN.compose({baseName:"table",template:AF,styles:cF})
|
|
11706
11707
|
_i.getOrCreate().withPrefix("nimble").register(uN())
|