@vonage/vivid 3.25.0 → 3.26.0
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/accordion/index.js +0 -1
- package/accordion-item/index.js +0 -1
- package/alert/index.js +0 -1
- package/avatar/index.js +0 -1
- package/badge/index.js +0 -1
- package/banner/index.js +0 -1
- package/breadcrumb-item/index.js +0 -1
- package/button/index.js +0 -1
- package/card/index.js +0 -1
- package/checkbox/index.js +0 -1
- package/combobox/index.js +0 -1
- package/custom-elements.json +35 -1
- package/data-grid/index.js +7 -2
- package/dialog/index.js +0 -1
- package/empty-state/index.js +0 -1
- package/fab/index.js +0 -1
- package/icon/index.js +0 -1
- package/index.js +27 -29
- package/lib/components.d.ts +0 -2
- package/lib/data-grid/data-grid-cell.d.ts +14 -1
- package/lib/data-grid/data-grid.options.d.ts +7 -0
- package/listbox/index.js +56 -11
- package/menu/index.js +2 -3
- package/menu-item/index.js +1 -2
- package/nav/index.js +1 -1
- package/nav-disclosure/index.js +1 -2
- package/nav-item/index.js +1 -2
- package/note/index.js +1 -2
- package/number-field/index.js +1 -2
- package/option/index.js +0 -1
- package/package.json +1 -1
- package/pagination/index.js +1 -2
- package/popup/index.js +0 -1
- package/progress/index.js +1 -1
- package/radio/index.js +1 -1
- package/radio-group/index.js +1 -1
- package/select/index.js +1 -2
- package/shared/definition.js +1 -1
- package/shared/definition10.js +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition12.js +1 -1
- package/shared/definition14.js +1 -1
- package/shared/definition15.js +1 -1
- package/shared/definition16.js +2 -2
- package/shared/definition17.js +1 -1
- package/shared/definition18.js +1 -1
- package/shared/definition19.js +1 -1
- package/shared/definition2.js +1 -1
- package/shared/definition21.js +1 -1
- package/shared/definition22.js +68 -21
- package/shared/definition23.js +1 -1
- package/shared/definition24.js +1 -1
- package/shared/definition25.js +1 -1
- package/shared/definition26.js +1 -1
- package/shared/definition27.js +1 -1
- package/shared/definition29.js +368 -48
- package/shared/definition30.js +301 -296
- package/shared/definition31.js +14 -376
- package/shared/definition32.js +70 -13
- package/shared/definition33.js +25 -66
- package/shared/definition34.js +39 -27
- package/shared/definition35.js +431 -31
- package/shared/definition36.js +214 -430
- package/shared/definition37.js +70 -209
- package/shared/definition38.js +33 -81
- package/shared/definition39.js +423 -32
- package/shared/definition4.js +1 -1
- package/shared/definition40.js +586 -358
- package/shared/definition41.js +73 -648
- package/shared/definition42.js +584 -70
- package/shared/definition43.js +81 -538
- package/shared/definition44.js +52 -127
- package/shared/definition45.js +16 -56
- package/shared/definition46.js +485 -17
- package/shared/definition47.js +99 -477
- package/shared/definition48.js +19 -114
- package/shared/definition49.js +276 -19
- package/shared/definition5.js +1 -1
- package/shared/definition50.js +89 -245
- package/shared/definition51.js +627 -118
- package/shared/definition52.js +86 -601
- package/shared/definition53.js +68 -112
- package/shared/definition54.js +294 -69
- package/shared/definition6.js +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.js +1 -1
- package/shared/definition9.js +1 -1
- package/shared/es.object.assign.js +1 -1
- package/shared/es.regexp.to-string.js +1 -1
- package/shared/es.string.includes.js +1 -1
- package/shared/form-elements.js +1 -1
- package/shared/icon.js +17 -13
- package/shared/index.js +1 -1
- package/shared/patterns/form-elements/form-elements.d.ts +4 -4
- package/shared/string-trim.js +1 -1
- package/shared/text-field.js +1 -1
- package/shared/to-string.js +1 -1
- package/side-drawer/index.js +1 -1
- package/slider/index.js +1 -1
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/switch/index.js +1 -2
- package/tab/index.js +1 -2
- package/tab-panel/index.js +1 -1
- package/tabs/index.js +3 -4
- package/tag/index.js +1 -2
- package/tag-group/index.js +1 -1
- package/text-anchor/index.js +0 -1
- package/text-area/index.js +1 -2
- package/text-field/index.js +1 -2
- package/toggletip/index.js +1 -2
- package/tooltip/index.js +1 -2
- package/tree-item/index.js +1 -2
- package/tree-view/index.js +1 -1
- package/vivid.api.json +0 -191
- package/shared/definition55.js +0 -305
- package/shared/engine-is-node.js +0 -8
package/vivid.api.json
CHANGED
|
@@ -3160,141 +3160,6 @@
|
|
|
3160
3160
|
}
|
|
3161
3161
|
]
|
|
3162
3162
|
},
|
|
3163
|
-
{
|
|
3164
|
-
"kind": "TypeAlias",
|
|
3165
|
-
"canonicalReference": "@vonage/vivid!LisboxAppearance:type",
|
|
3166
|
-
"docComment": "",
|
|
3167
|
-
"excerptTokens": [
|
|
3168
|
-
{
|
|
3169
|
-
"kind": "Content",
|
|
3170
|
-
"text": "export declare type LisboxAppearance = "
|
|
3171
|
-
},
|
|
3172
|
-
{
|
|
3173
|
-
"kind": "Reference",
|
|
3174
|
-
"text": "Extract",
|
|
3175
|
-
"canonicalReference": "!Extract:type"
|
|
3176
|
-
},
|
|
3177
|
-
{
|
|
3178
|
-
"kind": "Content",
|
|
3179
|
-
"text": "<"
|
|
3180
|
-
},
|
|
3181
|
-
{
|
|
3182
|
-
"kind": "Reference",
|
|
3183
|
-
"text": "Appearance",
|
|
3184
|
-
"canonicalReference": "@vonage/vivid!Appearance:enum"
|
|
3185
|
-
},
|
|
3186
|
-
{
|
|
3187
|
-
"kind": "Content",
|
|
3188
|
-
"text": ", "
|
|
3189
|
-
},
|
|
3190
|
-
{
|
|
3191
|
-
"kind": "Reference",
|
|
3192
|
-
"text": "Appearance.Fieldset",
|
|
3193
|
-
"canonicalReference": "@vonage/vivid!Appearance.Fieldset:member"
|
|
3194
|
-
},
|
|
3195
|
-
{
|
|
3196
|
-
"kind": "Content",
|
|
3197
|
-
"text": " | "
|
|
3198
|
-
},
|
|
3199
|
-
{
|
|
3200
|
-
"kind": "Reference",
|
|
3201
|
-
"text": "Appearance.Ghost",
|
|
3202
|
-
"canonicalReference": "@vonage/vivid!Appearance.Ghost:member"
|
|
3203
|
-
},
|
|
3204
|
-
{
|
|
3205
|
-
"kind": "Content",
|
|
3206
|
-
"text": ">"
|
|
3207
|
-
},
|
|
3208
|
-
{
|
|
3209
|
-
"kind": "Content",
|
|
3210
|
-
"text": ";"
|
|
3211
|
-
}
|
|
3212
|
-
],
|
|
3213
|
-
"fileUrlPath": "../../dist/libs/components/lib/listbox/listbox.d.ts",
|
|
3214
|
-
"releaseTag": "Public",
|
|
3215
|
-
"name": "LisboxAppearance",
|
|
3216
|
-
"typeTokenRange": {
|
|
3217
|
-
"startIndex": 1,
|
|
3218
|
-
"endIndex": 9
|
|
3219
|
-
}
|
|
3220
|
-
},
|
|
3221
|
-
{
|
|
3222
|
-
"kind": "Variable",
|
|
3223
|
-
"canonicalReference": "@vonage/vivid!listboxDefinition:var",
|
|
3224
|
-
"docComment": "",
|
|
3225
|
-
"excerptTokens": [
|
|
3226
|
-
{
|
|
3227
|
-
"kind": "Content",
|
|
3228
|
-
"text": "listboxDefinition: "
|
|
3229
|
-
},
|
|
3230
|
-
{
|
|
3231
|
-
"kind": "Content",
|
|
3232
|
-
"text": "(overrideDefinition?: import(\"@microsoft/fast-foundation\")."
|
|
3233
|
-
},
|
|
3234
|
-
{
|
|
3235
|
-
"kind": "Reference",
|
|
3236
|
-
"text": "OverrideFoundationElementDefinition",
|
|
3237
|
-
"canonicalReference": "@microsoft/fast-foundation!OverrideFoundationElementDefinition:type"
|
|
3238
|
-
},
|
|
3239
|
-
{
|
|
3240
|
-
"kind": "Content",
|
|
3241
|
-
"text": "<"
|
|
3242
|
-
},
|
|
3243
|
-
{
|
|
3244
|
-
"kind": "Reference",
|
|
3245
|
-
"text": "FoundationElementDefinition",
|
|
3246
|
-
"canonicalReference": "@microsoft/fast-foundation!FoundationElementDefinition:interface"
|
|
3247
|
-
},
|
|
3248
|
-
{
|
|
3249
|
-
"kind": "Content",
|
|
3250
|
-
"text": "> | undefined) => import(\"@microsoft/fast-foundation\")."
|
|
3251
|
-
},
|
|
3252
|
-
{
|
|
3253
|
-
"kind": "Reference",
|
|
3254
|
-
"text": "FoundationElementRegistry",
|
|
3255
|
-
"canonicalReference": "@microsoft/fast-foundation!FoundationElementRegistry:class"
|
|
3256
|
-
},
|
|
3257
|
-
{
|
|
3258
|
-
"kind": "Content",
|
|
3259
|
-
"text": "<"
|
|
3260
|
-
},
|
|
3261
|
-
{
|
|
3262
|
-
"kind": "Reference",
|
|
3263
|
-
"text": "FoundationElementDefinition",
|
|
3264
|
-
"canonicalReference": "@microsoft/fast-foundation!FoundationElementDefinition:interface"
|
|
3265
|
-
},
|
|
3266
|
-
{
|
|
3267
|
-
"kind": "Content",
|
|
3268
|
-
"text": ", import(\"@microsoft/fast-element\")."
|
|
3269
|
-
},
|
|
3270
|
-
{
|
|
3271
|
-
"kind": "Reference",
|
|
3272
|
-
"text": "Constructable",
|
|
3273
|
-
"canonicalReference": "@microsoft/fast-element!Constructable:type"
|
|
3274
|
-
},
|
|
3275
|
-
{
|
|
3276
|
-
"kind": "Content",
|
|
3277
|
-
"text": "<import(\"@microsoft/fast-foundation\")."
|
|
3278
|
-
},
|
|
3279
|
-
{
|
|
3280
|
-
"kind": "Reference",
|
|
3281
|
-
"text": "FoundationElement",
|
|
3282
|
-
"canonicalReference": "@microsoft/fast-foundation!FoundationElement:class"
|
|
3283
|
-
},
|
|
3284
|
-
{
|
|
3285
|
-
"kind": "Content",
|
|
3286
|
-
"text": ">>"
|
|
3287
|
-
}
|
|
3288
|
-
],
|
|
3289
|
-
"fileUrlPath": "../../dist/libs/components/lib/listbox/definition.d.ts",
|
|
3290
|
-
"isReadonly": true,
|
|
3291
|
-
"releaseTag": "Public",
|
|
3292
|
-
"name": "listboxDefinition",
|
|
3293
|
-
"variableTypeTokenRange": {
|
|
3294
|
-
"startIndex": 1,
|
|
3295
|
-
"endIndex": 14
|
|
3296
|
-
}
|
|
3297
|
-
},
|
|
3298
3163
|
{
|
|
3299
3164
|
"kind": "Variable",
|
|
3300
3165
|
"canonicalReference": "@vonage/vivid!listboxOptionDefinition:var",
|
|
@@ -6000,34 +5865,6 @@
|
|
|
6000
5865
|
"endIndex": 3
|
|
6001
5866
|
}
|
|
6002
5867
|
},
|
|
6003
|
-
{
|
|
6004
|
-
"kind": "Variable",
|
|
6005
|
-
"canonicalReference": "@vonage/vivid!registerElevation:var",
|
|
6006
|
-
"docComment": "",
|
|
6007
|
-
"excerptTokens": [
|
|
6008
|
-
{
|
|
6009
|
-
"kind": "Content",
|
|
6010
|
-
"text": "registerElevation: "
|
|
6011
|
-
},
|
|
6012
|
-
{
|
|
6013
|
-
"kind": "Content",
|
|
6014
|
-
"text": "(prefix?: string) => import(\"@microsoft/fast-foundation\")."
|
|
6015
|
-
},
|
|
6016
|
-
{
|
|
6017
|
-
"kind": "Reference",
|
|
6018
|
-
"text": "DesignSystem",
|
|
6019
|
-
"canonicalReference": "@microsoft/fast-foundation!DesignSystem:interface"
|
|
6020
|
-
}
|
|
6021
|
-
],
|
|
6022
|
-
"fileUrlPath": "../../dist/libs/components/lib/elevation/definition.d.ts",
|
|
6023
|
-
"isReadonly": true,
|
|
6024
|
-
"releaseTag": "Public",
|
|
6025
|
-
"name": "registerElevation",
|
|
6026
|
-
"variableTypeTokenRange": {
|
|
6027
|
-
"startIndex": 1,
|
|
6028
|
-
"endIndex": 3
|
|
6029
|
-
}
|
|
6030
|
-
},
|
|
6031
5868
|
{
|
|
6032
5869
|
"kind": "Variable",
|
|
6033
5870
|
"canonicalReference": "@vonage/vivid!registerEmptyState:var",
|
|
@@ -6196,34 +6033,6 @@
|
|
|
6196
6033
|
"endIndex": 3
|
|
6197
6034
|
}
|
|
6198
6035
|
},
|
|
6199
|
-
{
|
|
6200
|
-
"kind": "Variable",
|
|
6201
|
-
"canonicalReference": "@vonage/vivid!registerListbox:var",
|
|
6202
|
-
"docComment": "",
|
|
6203
|
-
"excerptTokens": [
|
|
6204
|
-
{
|
|
6205
|
-
"kind": "Content",
|
|
6206
|
-
"text": "registerListbox: "
|
|
6207
|
-
},
|
|
6208
|
-
{
|
|
6209
|
-
"kind": "Content",
|
|
6210
|
-
"text": "(prefix?: string) => import(\"@microsoft/fast-foundation\")."
|
|
6211
|
-
},
|
|
6212
|
-
{
|
|
6213
|
-
"kind": "Reference",
|
|
6214
|
-
"text": "DesignSystem",
|
|
6215
|
-
"canonicalReference": "@microsoft/fast-foundation!DesignSystem:interface"
|
|
6216
|
-
}
|
|
6217
|
-
],
|
|
6218
|
-
"fileUrlPath": "../../dist/libs/components/lib/listbox/definition.d.ts",
|
|
6219
|
-
"isReadonly": true,
|
|
6220
|
-
"releaseTag": "Public",
|
|
6221
|
-
"name": "registerListbox",
|
|
6222
|
-
"variableTypeTokenRange": {
|
|
6223
|
-
"startIndex": 1,
|
|
6224
|
-
"endIndex": 3
|
|
6225
|
-
}
|
|
6226
|
-
},
|
|
6227
6036
|
{
|
|
6228
6037
|
"kind": "Variable",
|
|
6229
6038
|
"canonicalReference": "@vonage/vivid!registerMenu:var",
|
package/shared/definition55.js
DELETED
|
@@ -1,305 +0,0 @@
|
|
|
1
|
-
import { F as FoundationElement, Y as DOM, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
|
|
2
|
-
import { T as TreeItem, i as isTreeItemElement } from './tree-item.js';
|
|
3
|
-
import { i as isHTMLElement, g as getDisplayedNodes } from './dom.js';
|
|
4
|
-
import { d as keyEnter, c as keyArrowUp, b as keyArrowDown, h as keyArrowRight, i as keyArrowLeft, k as keyEnd, a as keyHome } from './key-codes.js';
|
|
5
|
-
import { s as slotted } from './slotted.js';
|
|
6
|
-
import { r as ref } from './ref.js';
|
|
7
|
-
import { c as classNames } from './class-names.js';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* A Tree view Custom HTML Element.
|
|
11
|
-
* Implements the {@link https://w3c.github.io/aria-practices/#TreeView | ARIA TreeView }.
|
|
12
|
-
*
|
|
13
|
-
* @slot - The default slot for tree items
|
|
14
|
-
*
|
|
15
|
-
* @public
|
|
16
|
-
*/
|
|
17
|
-
class TreeView$1 extends FoundationElement {
|
|
18
|
-
constructor() {
|
|
19
|
-
super(...arguments);
|
|
20
|
-
/**
|
|
21
|
-
* The tree item that is designated to be in the tab queue.
|
|
22
|
-
*
|
|
23
|
-
* @internal
|
|
24
|
-
*/
|
|
25
|
-
this.currentFocused = null;
|
|
26
|
-
/**
|
|
27
|
-
* Handle focus events
|
|
28
|
-
*
|
|
29
|
-
* @internal
|
|
30
|
-
*/
|
|
31
|
-
this.handleFocus = (e) => {
|
|
32
|
-
if (this.slottedTreeItems.length < 1) {
|
|
33
|
-
// no child items, nothing to do
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
if (e.target === this) {
|
|
37
|
-
if (this.currentFocused === null) {
|
|
38
|
-
this.currentFocused = this.getValidFocusableItem();
|
|
39
|
-
}
|
|
40
|
-
if (this.currentFocused !== null) {
|
|
41
|
-
TreeItem.focusItem(this.currentFocused);
|
|
42
|
-
}
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
if (this.contains(e.target)) {
|
|
46
|
-
this.setAttribute("tabindex", "-1");
|
|
47
|
-
this.currentFocused = e.target;
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
/**
|
|
51
|
-
* Handle blur events
|
|
52
|
-
*
|
|
53
|
-
* @internal
|
|
54
|
-
*/
|
|
55
|
-
this.handleBlur = (e) => {
|
|
56
|
-
if (e.target instanceof HTMLElement &&
|
|
57
|
-
(e.relatedTarget === null || !this.contains(e.relatedTarget))) {
|
|
58
|
-
this.setAttribute("tabindex", "0");
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
/**
|
|
62
|
-
* KeyDown handler
|
|
63
|
-
*
|
|
64
|
-
* @internal
|
|
65
|
-
*/
|
|
66
|
-
this.handleKeyDown = (e) => {
|
|
67
|
-
if (e.defaultPrevented) {
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
if (this.slottedTreeItems.length < 1) {
|
|
71
|
-
return true;
|
|
72
|
-
}
|
|
73
|
-
const treeItems = this.getVisibleNodes();
|
|
74
|
-
switch (e.key) {
|
|
75
|
-
case keyHome:
|
|
76
|
-
if (treeItems.length) {
|
|
77
|
-
TreeItem.focusItem(treeItems[0]);
|
|
78
|
-
}
|
|
79
|
-
return;
|
|
80
|
-
case keyEnd:
|
|
81
|
-
if (treeItems.length) {
|
|
82
|
-
TreeItem.focusItem(treeItems[treeItems.length - 1]);
|
|
83
|
-
}
|
|
84
|
-
return;
|
|
85
|
-
case keyArrowLeft:
|
|
86
|
-
if (e.target && this.isFocusableElement(e.target)) {
|
|
87
|
-
const item = e.target;
|
|
88
|
-
if (item instanceof TreeItem &&
|
|
89
|
-
item.childItemLength() > 0 &&
|
|
90
|
-
item.expanded) {
|
|
91
|
-
item.expanded = false;
|
|
92
|
-
}
|
|
93
|
-
else if (item instanceof TreeItem &&
|
|
94
|
-
item.parentElement instanceof TreeItem) {
|
|
95
|
-
TreeItem.focusItem(item.parentElement);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
return false;
|
|
99
|
-
case keyArrowRight:
|
|
100
|
-
if (e.target && this.isFocusableElement(e.target)) {
|
|
101
|
-
const item = e.target;
|
|
102
|
-
if (item instanceof TreeItem &&
|
|
103
|
-
item.childItemLength() > 0 &&
|
|
104
|
-
!item.expanded) {
|
|
105
|
-
item.expanded = true;
|
|
106
|
-
}
|
|
107
|
-
else if (item instanceof TreeItem && item.childItemLength() > 0) {
|
|
108
|
-
this.focusNextNode(1, e.target);
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
return;
|
|
112
|
-
case keyArrowDown:
|
|
113
|
-
if (e.target && this.isFocusableElement(e.target)) {
|
|
114
|
-
this.focusNextNode(1, e.target);
|
|
115
|
-
}
|
|
116
|
-
return;
|
|
117
|
-
case keyArrowUp:
|
|
118
|
-
if (e.target && this.isFocusableElement(e.target)) {
|
|
119
|
-
this.focusNextNode(-1, e.target);
|
|
120
|
-
}
|
|
121
|
-
return;
|
|
122
|
-
case keyEnter:
|
|
123
|
-
// In single-select trees where selection does not follow focus (see note below),
|
|
124
|
-
// the default action is typically to select the focused node.
|
|
125
|
-
this.handleClick(e);
|
|
126
|
-
return;
|
|
127
|
-
}
|
|
128
|
-
// don't prevent default if we took no action
|
|
129
|
-
return true;
|
|
130
|
-
};
|
|
131
|
-
/**
|
|
132
|
-
* Handles the selected-changed events bubbling up
|
|
133
|
-
* from child tree items
|
|
134
|
-
*
|
|
135
|
-
* @internal
|
|
136
|
-
*/
|
|
137
|
-
this.handleSelectedChange = (e) => {
|
|
138
|
-
if (e.defaultPrevented) {
|
|
139
|
-
return;
|
|
140
|
-
}
|
|
141
|
-
if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
|
|
142
|
-
return true;
|
|
143
|
-
}
|
|
144
|
-
const item = e.target;
|
|
145
|
-
if (item.selected) {
|
|
146
|
-
if (this.currentSelected && this.currentSelected !== item) {
|
|
147
|
-
this.currentSelected.selected = false;
|
|
148
|
-
}
|
|
149
|
-
// new selected item
|
|
150
|
-
this.currentSelected = item;
|
|
151
|
-
}
|
|
152
|
-
else if (!item.selected && this.currentSelected === item) {
|
|
153
|
-
// selected item deselected
|
|
154
|
-
this.currentSelected = null;
|
|
155
|
-
}
|
|
156
|
-
return;
|
|
157
|
-
};
|
|
158
|
-
/**
|
|
159
|
-
* Updates the tree view when slottedTreeItems changes
|
|
160
|
-
*/
|
|
161
|
-
this.setItems = () => {
|
|
162
|
-
// force single selection
|
|
163
|
-
// defaults to first one found
|
|
164
|
-
const selectedItem = this.treeView.querySelector("[aria-selected='true']");
|
|
165
|
-
this.currentSelected = selectedItem;
|
|
166
|
-
// invalidate the current focused item if it is no longer valid
|
|
167
|
-
if (this.currentFocused === null || !this.contains(this.currentFocused)) {
|
|
168
|
-
this.currentFocused = this.getValidFocusableItem();
|
|
169
|
-
}
|
|
170
|
-
// toggle properties on child elements
|
|
171
|
-
this.nested = this.checkForNestedItems();
|
|
172
|
-
const treeItems = this.getVisibleNodes();
|
|
173
|
-
treeItems.forEach(node => {
|
|
174
|
-
if (isTreeItemElement(node)) {
|
|
175
|
-
node.nested = this.nested;
|
|
176
|
-
}
|
|
177
|
-
});
|
|
178
|
-
};
|
|
179
|
-
/**
|
|
180
|
-
* check if the item is focusable
|
|
181
|
-
*/
|
|
182
|
-
this.isFocusableElement = (el) => {
|
|
183
|
-
return isTreeItemElement(el);
|
|
184
|
-
};
|
|
185
|
-
this.isSelectedElement = (el) => {
|
|
186
|
-
return el.selected;
|
|
187
|
-
};
|
|
188
|
-
}
|
|
189
|
-
slottedTreeItemsChanged() {
|
|
190
|
-
if (this.$fastController.isConnected) {
|
|
191
|
-
// update for slotted children change
|
|
192
|
-
this.setItems();
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
connectedCallback() {
|
|
196
|
-
super.connectedCallback();
|
|
197
|
-
this.setAttribute("tabindex", "0");
|
|
198
|
-
DOM.queueUpdate(() => {
|
|
199
|
-
this.setItems();
|
|
200
|
-
});
|
|
201
|
-
}
|
|
202
|
-
/**
|
|
203
|
-
* Handles click events bubbling up
|
|
204
|
-
*
|
|
205
|
-
* @internal
|
|
206
|
-
*/
|
|
207
|
-
handleClick(e) {
|
|
208
|
-
if (e.defaultPrevented) {
|
|
209
|
-
// handled, do nothing
|
|
210
|
-
return;
|
|
211
|
-
}
|
|
212
|
-
if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
|
|
213
|
-
// not a tree item, ignore
|
|
214
|
-
return true;
|
|
215
|
-
}
|
|
216
|
-
const item = e.target;
|
|
217
|
-
if (!item.disabled) {
|
|
218
|
-
item.selected = !item.selected;
|
|
219
|
-
}
|
|
220
|
-
return;
|
|
221
|
-
}
|
|
222
|
-
/**
|
|
223
|
-
* Move focus to a tree item based on its offset from the provided item
|
|
224
|
-
*/
|
|
225
|
-
focusNextNode(delta, item) {
|
|
226
|
-
const visibleNodes = this.getVisibleNodes();
|
|
227
|
-
if (!visibleNodes) {
|
|
228
|
-
return;
|
|
229
|
-
}
|
|
230
|
-
const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
|
|
231
|
-
if (isHTMLElement(focusItem)) {
|
|
232
|
-
TreeItem.focusItem(focusItem);
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
/**
|
|
236
|
-
* checks if there are any nested tree items
|
|
237
|
-
*/
|
|
238
|
-
getValidFocusableItem() {
|
|
239
|
-
const treeItems = this.getVisibleNodes();
|
|
240
|
-
// default to selected element if there is one
|
|
241
|
-
let focusIndex = treeItems.findIndex(this.isSelectedElement);
|
|
242
|
-
if (focusIndex === -1) {
|
|
243
|
-
// otherwise first focusable tree item
|
|
244
|
-
focusIndex = treeItems.findIndex(this.isFocusableElement);
|
|
245
|
-
}
|
|
246
|
-
if (focusIndex !== -1) {
|
|
247
|
-
return treeItems[focusIndex];
|
|
248
|
-
}
|
|
249
|
-
return null;
|
|
250
|
-
}
|
|
251
|
-
/**
|
|
252
|
-
* checks if there are any nested tree items
|
|
253
|
-
*/
|
|
254
|
-
checkForNestedItems() {
|
|
255
|
-
return this.slottedTreeItems.some((node) => {
|
|
256
|
-
return isTreeItemElement(node) && node.querySelector("[role='treeitem']");
|
|
257
|
-
});
|
|
258
|
-
}
|
|
259
|
-
getVisibleNodes() {
|
|
260
|
-
return getDisplayedNodes(this, "[role='treeitem']") || [];
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
__decorate([
|
|
264
|
-
attr({ attribute: "render-collapsed-nodes" })
|
|
265
|
-
], TreeView$1.prototype, "renderCollapsedNodes", void 0);
|
|
266
|
-
__decorate([
|
|
267
|
-
observable
|
|
268
|
-
], TreeView$1.prototype, "currentSelected", void 0);
|
|
269
|
-
__decorate([
|
|
270
|
-
observable
|
|
271
|
-
], TreeView$1.prototype, "slottedTreeItems", void 0);
|
|
272
|
-
|
|
273
|
-
var css_248z = ".control {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}";
|
|
274
|
-
|
|
275
|
-
class TreeView extends TreeView$1 {}
|
|
276
|
-
|
|
277
|
-
let _2 = t => t,
|
|
278
|
-
_t;
|
|
279
|
-
const getClasses = _ => classNames('control');
|
|
280
|
-
const TreeViewTemplate = () => {
|
|
281
|
-
return html(_t || (_t = _2`
|
|
282
|
-
<template
|
|
283
|
-
role="tree"
|
|
284
|
-
${0}
|
|
285
|
-
@keydown="${0}"
|
|
286
|
-
@focusin="${0}"
|
|
287
|
-
@focusout="${0}"
|
|
288
|
-
@click="${0}"
|
|
289
|
-
@selected-change="${0}"
|
|
290
|
-
>
|
|
291
|
-
<div class="${0}">
|
|
292
|
-
<slot ${0}></slot>
|
|
293
|
-
</div>
|
|
294
|
-
</template>`), ref('treeView'), (x, c) => x.handleKeyDown(c.event), (x, c) => x.handleFocus(c.event), (x, c) => x.handleBlur(c.event), (x, c) => x.handleClick(c.event), (x, c) => x.handleSelectedChange(c.event), getClasses, slotted('slottedTreeItems'));
|
|
295
|
-
};
|
|
296
|
-
|
|
297
|
-
const treeViewDefinition = TreeView.compose({
|
|
298
|
-
baseName: 'tree-view',
|
|
299
|
-
template: TreeViewTemplate,
|
|
300
|
-
styles: css_248z
|
|
301
|
-
});
|
|
302
|
-
const treeViewRegistries = [treeViewDefinition()];
|
|
303
|
-
const registerTreeView = registerFactory(treeViewRegistries);
|
|
304
|
-
|
|
305
|
-
export { treeViewRegistries as a, registerTreeView as r, treeViewDefinition as t };
|