@ni/nimble-components 8.0.0 → 8.0.1
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 +38 -44
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +9 -11
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/nimble-components/src/tree-item/index.d.ts +0 -4
- package/dist/esm/nimble-components/src/tree-view/index.d.ts +3 -0
- package/dist/esm/tree-item/index.d.ts +0 -4
- package/dist/esm/tree-item/index.js +2 -45
- package/dist/esm/tree-item/index.js.map +1 -1
- package/dist/esm/tree-view/index.d.ts +3 -0
- package/dist/esm/tree-view/index.js +38 -1
- package/dist/esm/tree-view/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -18866,37 +18866,8 @@
|
|
|
18866
18866
|
*/
|
|
18867
18867
|
class TreeItem extends TreeItem$1 {
|
|
18868
18868
|
constructor() {
|
|
18869
|
-
super();
|
|
18869
|
+
super(...arguments);
|
|
18870
18870
|
this.treeView = null;
|
|
18871
|
-
this.handleClickOverride = (event) => {
|
|
18872
|
-
if (event.composedPath().includes(this.expandCollapseButton)) {
|
|
18873
|
-
// just have base class handle click event for glyph
|
|
18874
|
-
return;
|
|
18875
|
-
}
|
|
18876
|
-
const treeItem = this.getImmediateTreeItem(event.target);
|
|
18877
|
-
if (treeItem?.disabled || treeItem !== this) {
|
|
18878
|
-
// don't allow base TreeItem to emit a 'selected-change' event when a disabled item is clicked
|
|
18879
|
-
event.stopImmediatePropagation();
|
|
18880
|
-
return;
|
|
18881
|
-
}
|
|
18882
|
-
const leavesOnly = this.treeView?.selectionMode === TreeViewSelectionMode.LeavesOnly;
|
|
18883
|
-
const all = this.treeView?.selectionMode === TreeViewSelectionMode.All;
|
|
18884
|
-
const hasChildren = this.hasChildTreeItems();
|
|
18885
|
-
if ((leavesOnly && !hasChildren) || all) {
|
|
18886
|
-
const selectedTreeItem = this.getImmediateTreeItem(this.treeView?.currentSelected);
|
|
18887
|
-
// deselect currently selected item if different than this instance
|
|
18888
|
-
if (selectedTreeItem && this !== this.treeView?.currentSelected) {
|
|
18889
|
-
selectedTreeItem.selected = false;
|
|
18890
|
-
}
|
|
18891
|
-
this.selected = true;
|
|
18892
|
-
}
|
|
18893
|
-
else {
|
|
18894
|
-
// implicit (hasChildren && leavesOnly) || none, so only allow expand/collapse, not select
|
|
18895
|
-
this.expanded = !this.expanded;
|
|
18896
|
-
}
|
|
18897
|
-
// don't allow base class to process click event
|
|
18898
|
-
event.stopImmediatePropagation();
|
|
18899
|
-
};
|
|
18900
18871
|
// This prevents the toggling of selected state when a TreeItem is clicked multiple times,
|
|
18901
18872
|
// which is what the FAST TreeItem allows
|
|
18902
18873
|
this.handleSelectedChange = (event) => {
|
|
@@ -18905,7 +18876,6 @@
|
|
|
18905
18876
|
this.setGroupSelectionOnRootParentTreeItem(this);
|
|
18906
18877
|
}
|
|
18907
18878
|
};
|
|
18908
|
-
this.addEventListener('click', this.handleClickOverride);
|
|
18909
18879
|
}
|
|
18910
18880
|
connectedCallback() {
|
|
18911
18881
|
super.connectedCallback();
|
|
@@ -18917,14 +18887,9 @@
|
|
|
18917
18887
|
}
|
|
18918
18888
|
disconnectedCallback() {
|
|
18919
18889
|
super.disconnectedCallback();
|
|
18920
|
-
this.removeEventListener('click', this.handleClickOverride);
|
|
18921
18890
|
this.removeEventListener('selected-change', this.handleSelectedChange);
|
|
18922
18891
|
this.treeView = null;
|
|
18923
18892
|
}
|
|
18924
|
-
hasChildTreeItems() {
|
|
18925
|
-
const treeItemChild = this.querySelector('[role="treeitem"]');
|
|
18926
|
-
return treeItemChild !== null;
|
|
18927
|
-
}
|
|
18928
18893
|
clearTreeGroupSelection() {
|
|
18929
18894
|
const currentGroupSelection = this.treeView?.querySelectorAll(`[${groupSelectedAttribute}]`);
|
|
18930
18895
|
currentGroupSelection?.forEach(treeItem => treeItem.removeAttribute(groupSelectedAttribute));
|
|
@@ -18939,14 +18904,6 @@
|
|
|
18939
18904
|
currentItem.setAttribute(groupSelectedAttribute, 'true');
|
|
18940
18905
|
}
|
|
18941
18906
|
}
|
|
18942
|
-
getImmediateTreeItem(element) {
|
|
18943
|
-
let foundElement = element;
|
|
18944
|
-
while (foundElement
|
|
18945
|
-
&& !(foundElement?.getAttribute('role') === 'treeitem')) {
|
|
18946
|
-
foundElement = foundElement?.parentElement;
|
|
18947
|
-
}
|
|
18948
|
-
return foundElement;
|
|
18949
|
-
}
|
|
18950
18907
|
/**
|
|
18951
18908
|
* This was copied directly from the FAST TreeItem implementation
|
|
18952
18909
|
* @returns the root tree view
|
|
@@ -18994,6 +18951,43 @@
|
|
|
18994
18951
|
super(...arguments);
|
|
18995
18952
|
this.selectionMode = TreeViewSelectionMode.All;
|
|
18996
18953
|
}
|
|
18954
|
+
handleClick(e) {
|
|
18955
|
+
if (e.defaultPrevented) {
|
|
18956
|
+
// handled, do nothing
|
|
18957
|
+
return false;
|
|
18958
|
+
}
|
|
18959
|
+
if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
|
|
18960
|
+
// not a tree item, ignore
|
|
18961
|
+
return true;
|
|
18962
|
+
}
|
|
18963
|
+
const item = e.target;
|
|
18964
|
+
if (item.disabled) {
|
|
18965
|
+
return false;
|
|
18966
|
+
}
|
|
18967
|
+
if (this.canSelect(item)) {
|
|
18968
|
+
item.selected = true;
|
|
18969
|
+
}
|
|
18970
|
+
else if (this.itemHasChildren(item)) {
|
|
18971
|
+
item.expanded = !item.expanded;
|
|
18972
|
+
}
|
|
18973
|
+
return true;
|
|
18974
|
+
}
|
|
18975
|
+
canSelect(item) {
|
|
18976
|
+
switch (this.selectionMode) {
|
|
18977
|
+
case TreeViewSelectionMode.All:
|
|
18978
|
+
return true;
|
|
18979
|
+
case TreeViewSelectionMode.None:
|
|
18980
|
+
return false;
|
|
18981
|
+
case TreeViewSelectionMode.LeavesOnly:
|
|
18982
|
+
return !this.itemHasChildren(item);
|
|
18983
|
+
default:
|
|
18984
|
+
return true;
|
|
18985
|
+
}
|
|
18986
|
+
}
|
|
18987
|
+
itemHasChildren(item) {
|
|
18988
|
+
const treeItemChild = item.querySelector('[role="treeitem"]');
|
|
18989
|
+
return treeItemChild !== null;
|
|
18990
|
+
}
|
|
18997
18991
|
}
|
|
18998
18992
|
__decorate([
|
|
18999
18993
|
attr({ attribute: 'selection-mode' })
|