@ni/nimble-components 8.0.0 → 8.1.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 +73 -53
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +2585 -107
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/nimble-components/src/text-field/types.d.ts +2 -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/text-field/styles.js +34 -9
- package/dist/esm/text-field/styles.js.map +1 -1
- package/dist/esm/text-field/types.d.ts +2 -1
- package/dist/esm/text-field/types.js +1 -0
- package/dist/esm/text-field/types.js.map +1 -1
- 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 +3 -3
|
@@ -16,15 +16,11 @@ declare global {
|
|
|
16
16
|
*/
|
|
17
17
|
export declare class TreeItem extends FoundationTreeItem {
|
|
18
18
|
private treeView;
|
|
19
|
-
constructor();
|
|
20
19
|
connectedCallback(): void;
|
|
21
20
|
disconnectedCallback(): void;
|
|
22
|
-
private hasChildTreeItems;
|
|
23
|
-
private readonly handleClickOverride;
|
|
24
21
|
private readonly handleSelectedChange;
|
|
25
22
|
private clearTreeGroupSelection;
|
|
26
23
|
private setGroupSelectionOnRootParentTreeItem;
|
|
27
|
-
private getImmediateTreeItem;
|
|
28
24
|
/**
|
|
29
25
|
* This was copied directly from the FAST TreeItem implementation
|
|
30
26
|
* @returns the root tree view
|
|
@@ -59,11 +59,8 @@ export const styles = css `
|
|
|
59
59
|
border-bottom-color: ${failColor};
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
:host([readonly]
|
|
63
|
-
border:
|
|
64
|
-
padding: 0px;
|
|
65
|
-
padding-bottom: 1px;
|
|
66
|
-
background-color: transparent;
|
|
62
|
+
:host([readonly]) .root {
|
|
63
|
+
border-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
67
64
|
}
|
|
68
65
|
|
|
69
66
|
:host([disabled]) .root {
|
|
@@ -77,6 +74,10 @@ export const styles = css `
|
|
|
77
74
|
border-bottom-color: ${borderHoverColor};
|
|
78
75
|
}
|
|
79
76
|
|
|
77
|
+
:host([readonly]) .root:hover {
|
|
78
|
+
--ni-private-bottom-border-width: 1px;
|
|
79
|
+
}
|
|
80
|
+
|
|
80
81
|
:host([disabled]) .root:hover {
|
|
81
82
|
--ni-private-bottom-border-width: 1px;
|
|
82
83
|
}
|
|
@@ -176,10 +177,6 @@ export const styles = css `
|
|
|
176
177
|
white-space: nowrap;
|
|
177
178
|
}
|
|
178
179
|
|
|
179
|
-
:host(.invalid[readonly]:not([disabled])) .errortext {
|
|
180
|
-
top: calc(${controlHeight} - ${borderWidth});
|
|
181
|
-
}
|
|
182
|
-
|
|
183
180
|
:host(.invalid) .error-text:empty {
|
|
184
181
|
display: none;
|
|
185
182
|
}
|
|
@@ -203,6 +200,14 @@ export const styles = css `
|
|
|
203
200
|
padding-left: ${borderWidth};
|
|
204
201
|
padding-right: ${borderWidth};
|
|
205
202
|
}
|
|
203
|
+
|
|
204
|
+
:host([disabled]) .root {
|
|
205
|
+
border-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
:host([disabled]) .root:hover {
|
|
209
|
+
--ni-private-bottom-border-width: 1px;
|
|
210
|
+
}
|
|
206
211
|
`), appearanceBehavior(TextFieldAppearance.Block, css `
|
|
207
212
|
.root {
|
|
208
213
|
background-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
@@ -232,6 +237,11 @@ export const styles = css `
|
|
|
232
237
|
);
|
|
233
238
|
}
|
|
234
239
|
|
|
240
|
+
:host([readonly]) .root {
|
|
241
|
+
background-color: rgba(${borderRgbPartialColor}, 0.07);
|
|
242
|
+
border-color: transparent;
|
|
243
|
+
}
|
|
244
|
+
|
|
235
245
|
:host([disabled]) .root {
|
|
236
246
|
background-color: rgba(${borderRgbPartialColor}, 0.07);
|
|
237
247
|
}
|
|
@@ -253,6 +263,21 @@ export const styles = css `
|
|
|
253
263
|
:host(.invalid) .errortext {
|
|
254
264
|
top: calc(${controlHeight} - ${borderWidth});
|
|
255
265
|
}
|
|
266
|
+
`), appearanceBehavior(TextFieldAppearance.Frameless, css `
|
|
267
|
+
.root {
|
|
268
|
+
--ni-private-bottom-border-width: 0px;
|
|
269
|
+
padding-top: ${borderWidth};
|
|
270
|
+
padding-left: ${borderWidth};
|
|
271
|
+
padding-right: ${borderWidth};
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
:host([readonly]) .root {
|
|
275
|
+
border-color: transparent;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.root:hover {
|
|
279
|
+
--ni-private-bottom-border-width: 0px;
|
|
280
|
+
}
|
|
256
281
|
`), themeBehavior(css `
|
|
257
282
|
${'' /* Light theme */}
|
|
258
283
|
.control::-ms-reveal {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,QAAQ,EACR,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;;;;iBAIpC,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;oCAUV,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;;;;;;;;;;;;;;+BAevB,SAAS;;;;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,QAAQ,EACR,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;;;;iBAIpC,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;oCAUV,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;;;;;;;;;;;;;;+BAevB,SAAS;;;;6BAIX,qBAAqB;;;;6BAIrB,qBAAqB;;;;;;;+BAOnB,gBAAgB;;;;;;;;;;;;+BAYhB,gBAAgB;;;;;;;;;;;;;;;cAejC,aAAa,MAAM,WAAW;;;;;;6BAMf,eAAe;8BACd,eAAe;;;;;;;;;;;;;iBAa5B,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;;;;;;;kBAgBpB,QAAQ;iBACT,QAAQ;;;;;;gBAMT,SAAS;;;;gBAIT,qBAAqB;;;;;;;;;gBASrB,aAAa;iBACZ,SAAS;;;eAGX,aAAa;;;;;;;;;;;iBAWX,qBAAqB;;;;;;;;;UAS5B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACP,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;;;qCAIP,qBAAqB;;;;;;SAMjD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE0B,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;;;;;;;;;;;;yCAwBH,qBAAqB;;;;;yCAKrB,qBAAqB;;;;;;;;;;SAUrD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGiB,WAAW;;;;;4BAKf,aAAa,MAAM,WAAW;;SAEjD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;SAUnC,CACA,EACD,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}
|
|
@@ -11,5 +11,6 @@ export var TextFieldAppearance;
|
|
|
11
11
|
TextFieldAppearance["Underline"] = "underline";
|
|
12
12
|
TextFieldAppearance["Outline"] = "outline";
|
|
13
13
|
TextFieldAppearance["Block"] = "block";
|
|
14
|
+
TextFieldAppearance["Frameless"] = "frameless";
|
|
14
15
|
})(TextFieldAppearance || (TextFieldAppearance = {}));
|
|
15
16
|
//# sourceMappingURL=types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/text-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAO3D;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,CAAC;AAOzB;;GAEG;AACH,MAAM,CAAN,IAAY,
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/text-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAO3D;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,CAAC;AAOzB;;GAEG;AACH,MAAM,CAAN,IAAY,mBAKX;AALD,WAAY,mBAAmB;IAC3B,8CAAuB,CAAA;IACvB,0CAAmB,CAAA;IACnB,sCAAe,CAAA;IACf,8CAAuB,CAAA;AAC3B,CAAC,EALW,mBAAmB,KAAnB,mBAAmB,QAK9B"}
|
|
@@ -16,15 +16,11 @@ declare global {
|
|
|
16
16
|
*/
|
|
17
17
|
export declare class TreeItem extends FoundationTreeItem {
|
|
18
18
|
private treeView;
|
|
19
|
-
constructor();
|
|
20
19
|
connectedCallback(): void;
|
|
21
20
|
disconnectedCallback(): void;
|
|
22
|
-
private hasChildTreeItems;
|
|
23
|
-
private readonly handleClickOverride;
|
|
24
21
|
private readonly handleSelectedChange;
|
|
25
22
|
private clearTreeGroupSelection;
|
|
26
23
|
private setGroupSelectionOnRootParentTreeItem;
|
|
27
|
-
private getImmediateTreeItem;
|
|
28
24
|
/**
|
|
29
25
|
* This was copied directly from the FAST TreeItem implementation
|
|
30
26
|
* @returns the root tree view
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { treeItemTemplate as template, TreeItem as FoundationTreeItem, DesignSystem } from '@microsoft/fast-foundation';
|
|
2
2
|
import { arrowExpanderUp16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
|
|
3
|
-
import { groupSelectedAttribute
|
|
3
|
+
import { groupSelectedAttribute } from '../tree-view/types';
|
|
4
4
|
import { styles } from './styles';
|
|
5
5
|
/**
|
|
6
6
|
* A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
|
|
@@ -14,37 +14,8 @@ import { styles } from './styles';
|
|
|
14
14
|
*/
|
|
15
15
|
export class TreeItem extends FoundationTreeItem {
|
|
16
16
|
constructor() {
|
|
17
|
-
super();
|
|
17
|
+
super(...arguments);
|
|
18
18
|
this.treeView = null;
|
|
19
|
-
this.handleClickOverride = (event) => {
|
|
20
|
-
if (event.composedPath().includes(this.expandCollapseButton)) {
|
|
21
|
-
// just have base class handle click event for glyph
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
|
-
const treeItem = this.getImmediateTreeItem(event.target);
|
|
25
|
-
if (treeItem?.disabled || treeItem !== this) {
|
|
26
|
-
// don't allow base TreeItem to emit a 'selected-change' event when a disabled item is clicked
|
|
27
|
-
event.stopImmediatePropagation();
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
const leavesOnly = this.treeView?.selectionMode === TreeViewSelectionMode.LeavesOnly;
|
|
31
|
-
const all = this.treeView?.selectionMode === TreeViewSelectionMode.All;
|
|
32
|
-
const hasChildren = this.hasChildTreeItems();
|
|
33
|
-
if ((leavesOnly && !hasChildren) || all) {
|
|
34
|
-
const selectedTreeItem = this.getImmediateTreeItem(this.treeView?.currentSelected);
|
|
35
|
-
// deselect currently selected item if different than this instance
|
|
36
|
-
if (selectedTreeItem && this !== this.treeView?.currentSelected) {
|
|
37
|
-
selectedTreeItem.selected = false;
|
|
38
|
-
}
|
|
39
|
-
this.selected = true;
|
|
40
|
-
}
|
|
41
|
-
else {
|
|
42
|
-
// implicit (hasChildren && leavesOnly) || none, so only allow expand/collapse, not select
|
|
43
|
-
this.expanded = !this.expanded;
|
|
44
|
-
}
|
|
45
|
-
// don't allow base class to process click event
|
|
46
|
-
event.stopImmediatePropagation();
|
|
47
|
-
};
|
|
48
19
|
// This prevents the toggling of selected state when a TreeItem is clicked multiple times,
|
|
49
20
|
// which is what the FAST TreeItem allows
|
|
50
21
|
this.handleSelectedChange = (event) => {
|
|
@@ -53,7 +24,6 @@ export class TreeItem extends FoundationTreeItem {
|
|
|
53
24
|
this.setGroupSelectionOnRootParentTreeItem(this);
|
|
54
25
|
}
|
|
55
26
|
};
|
|
56
|
-
this.addEventListener('click', this.handleClickOverride);
|
|
57
27
|
}
|
|
58
28
|
connectedCallback() {
|
|
59
29
|
super.connectedCallback();
|
|
@@ -65,14 +35,9 @@ export class TreeItem extends FoundationTreeItem {
|
|
|
65
35
|
}
|
|
66
36
|
disconnectedCallback() {
|
|
67
37
|
super.disconnectedCallback();
|
|
68
|
-
this.removeEventListener('click', this.handleClickOverride);
|
|
69
38
|
this.removeEventListener('selected-change', this.handleSelectedChange);
|
|
70
39
|
this.treeView = null;
|
|
71
40
|
}
|
|
72
|
-
hasChildTreeItems() {
|
|
73
|
-
const treeItemChild = this.querySelector('[role="treeitem"]');
|
|
74
|
-
return treeItemChild !== null;
|
|
75
|
-
}
|
|
76
41
|
clearTreeGroupSelection() {
|
|
77
42
|
const currentGroupSelection = this.treeView?.querySelectorAll(`[${groupSelectedAttribute}]`);
|
|
78
43
|
currentGroupSelection?.forEach(treeItem => treeItem.removeAttribute(groupSelectedAttribute));
|
|
@@ -87,14 +52,6 @@ export class TreeItem extends FoundationTreeItem {
|
|
|
87
52
|
currentItem.setAttribute(groupSelectedAttribute, 'true');
|
|
88
53
|
}
|
|
89
54
|
}
|
|
90
|
-
getImmediateTreeItem(element) {
|
|
91
|
-
let foundElement = element;
|
|
92
|
-
while (foundElement
|
|
93
|
-
&& !(foundElement?.getAttribute('role') === 'treeitem')) {
|
|
94
|
-
foundElement = foundElement?.parentElement;
|
|
95
|
-
}
|
|
96
|
-
return foundElement;
|
|
97
|
-
}
|
|
98
55
|
/**
|
|
99
56
|
* This was copied directly from the FAST TreeItem implementation
|
|
100
57
|
* @returns the root tree view
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,gBAAgB,IAAI,QAAQ,EAC5B,QAAQ,IAAI,kBAAkB,EAE9B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,gBAAgB,IAAI,QAAQ,EAC5B,QAAQ,IAAI,kBAAkB,EAE9B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;;;;;;;;GASG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAAhD;;QACY,aAAQ,GAAoB,IAAI,CAAC;QAiBzC,0FAA0F;QAC1F,yCAAyC;QACxB,yBAAoB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAC3D,yBAAyB;YACzB,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACxC,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,CAAC;aACpD;QACL,CAAC,CAAC;IA8BN,CAAC;IApDmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACpE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAChC,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,CAAC;SACpD;IACL,CAAC;IAEe,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACvE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACzB,CAAC;IAWO,uBAAuB;QAC3B,MAAM,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CACzD,IAAI,sBAAsB,GAAG,CAChC,CAAC;QACF,qBAAqB,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC,CAAC;IACjG,CAAC;IAEO,qCAAqC,CAAC,QAAqB;QAC/D,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,IAAI,WAAW,GAAmC,QAAQ,CAAC;QAC3D,OAAO,WAAW,EAAE,aAAa,KAAK,IAAI,CAAC,QAAQ,EAAE;YACjD,WAAW,GAAG,WAAW,EAAE,aAAa,CAAC;SAC5C;QAED,IAAI,WAAW,EAAE;YACb,WAAW,CAAC,YAAY,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;SAC5D;IACL,CAAC;IAED;;;OAGG;IACK,iBAAiB;QACrB,MAAM,UAAU,GAAmB,IAAI,CAAC,aAAc,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAChF,OAAO,UAAsB,CAAC;IAClC,CAAC;CACJ;AAED,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,mBAAmB,EAAE,oBAAoB,CAAC,IAAI;CACjD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { attr } from '@microsoft/fast-element';
|
|
3
|
-
import { treeViewTemplate as template, TreeView as FoundationTreeView, DesignSystem } from '@microsoft/fast-foundation';
|
|
3
|
+
import { treeViewTemplate as template, TreeView as FoundationTreeView, DesignSystem, isTreeItemElement } from '@microsoft/fast-foundation';
|
|
4
4
|
import { styles } from './styles';
|
|
5
5
|
import { TreeViewSelectionMode } from './types';
|
|
6
6
|
/**
|
|
@@ -18,6 +18,43 @@ export class TreeView extends FoundationTreeView {
|
|
|
18
18
|
super(...arguments);
|
|
19
19
|
this.selectionMode = TreeViewSelectionMode.All;
|
|
20
20
|
}
|
|
21
|
+
handleClick(e) {
|
|
22
|
+
if (e.defaultPrevented) {
|
|
23
|
+
// handled, do nothing
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
|
|
27
|
+
// not a tree item, ignore
|
|
28
|
+
return true;
|
|
29
|
+
}
|
|
30
|
+
const item = e.target;
|
|
31
|
+
if (item.disabled) {
|
|
32
|
+
return false;
|
|
33
|
+
}
|
|
34
|
+
if (this.canSelect(item)) {
|
|
35
|
+
item.selected = true;
|
|
36
|
+
}
|
|
37
|
+
else if (this.itemHasChildren(item)) {
|
|
38
|
+
item.expanded = !item.expanded;
|
|
39
|
+
}
|
|
40
|
+
return true;
|
|
41
|
+
}
|
|
42
|
+
canSelect(item) {
|
|
43
|
+
switch (this.selectionMode) {
|
|
44
|
+
case TreeViewSelectionMode.All:
|
|
45
|
+
return true;
|
|
46
|
+
case TreeViewSelectionMode.None:
|
|
47
|
+
return false;
|
|
48
|
+
case TreeViewSelectionMode.LeavesOnly:
|
|
49
|
+
return !this.itemHasChildren(item);
|
|
50
|
+
default:
|
|
51
|
+
return true;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
itemHasChildren(item) {
|
|
55
|
+
const treeItemChild = item.querySelector('[role="treeitem"]');
|
|
56
|
+
return treeItemChild !== null;
|
|
57
|
+
}
|
|
21
58
|
}
|
|
22
59
|
__decorate([
|
|
23
60
|
attr({ attribute: 'selection-mode' })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,gBAAgB,IAAI,QAAQ,EAC5B,QAAQ,IAAI,kBAAkB,EAC9B,YAAY,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,gBAAgB,IAAI,QAAQ,EAC5B,QAAQ,IAAI,kBAAkB,EAC9B,YAAY,EACZ,iBAAiB,EAEpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAQhD;;;;;;;;;GASG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAAhD;;QAEW,kBAAa,GAA0B,qBAAqB,CAAC,GAAG,CAAC;IA2C5E,CAAC;IAzCmB,WAAW,CAAC,CAAQ;QAChC,IAAI,CAAC,CAAC,gBAAgB,EAAE;YACpB,sBAAsB;YACtB,OAAO,KAAK,CAAC;SAChB;QAED,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;YAChE,0BAA0B;YAC1B,OAAO,IAAI,CAAC;SACf;QAED,MAAM,IAAI,GAAa,CAAC,CAAC,MAAkB,CAAC;QAC5C,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO,KAAK,CAAC;SAChB;QAED,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;YACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACxB;aAAM,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE;YACnC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;SAClC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAEO,SAAS,CAAC,IAAc;QAC5B,QAAQ,IAAI,CAAC,aAAa,EAAE;YACxB,KAAK,qBAAqB,CAAC,GAAG;gBAC1B,OAAO,IAAI,CAAC;YAChB,KAAK,qBAAqB,CAAC,IAAI;gBAC3B,OAAO,KAAK,CAAC;YACjB,KAAK,qBAAqB,CAAC,UAAU;gBACjC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YACvC;gBACI,OAAO,IAAI,CAAC;SACnB;IACL,CAAC;IAEO,eAAe,CAAC,IAAc;QAClC,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAC9D,OAAO,aAAa,KAAK,IAAI,CAAC;IAClC,CAAC;CACJ;AA3CG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACkC;AA6C5E,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.1.3",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@microsoft/fast-element": "^1.8.0",
|
|
51
51
|
"@microsoft/fast-foundation": "^2.37.1",
|
|
52
52
|
"@microsoft/fast-web-utilities": "^5.1.0",
|
|
53
|
-
"@ni/nimble-tokens": "^3.0.
|
|
53
|
+
"@ni/nimble-tokens": "^3.0.6",
|
|
54
54
|
"hex-rgb": "^5.0.0"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
@@ -97,8 +97,8 @@
|
|
|
97
97
|
"prettier-eslint-cli": "^5.0.1",
|
|
98
98
|
"puppeteer": "^10.1.0",
|
|
99
99
|
"rollup": "^2.61.1",
|
|
100
|
+
"rollup-plugin-sourcemaps": "^0.6.3",
|
|
100
101
|
"rollup-plugin-terser": "^7.0.2",
|
|
101
|
-
"rollup-plugin-transform-tagged-template": "^0.0.3",
|
|
102
102
|
"storybook-addon-xd-designs": "^6.0.0",
|
|
103
103
|
"ts-loader": "^9.2.5",
|
|
104
104
|
"typescript": "^4.3.2",
|