@vonage/vivid 3.51.0 → 3.53.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.
Files changed (340) hide show
  1. package/README.md +1 -1
  2. package/accordion/index.cjs +1 -1
  3. package/accordion/index.js +1 -1
  4. package/accordion-item/index.cjs +1 -1
  5. package/accordion-item/index.js +1 -1
  6. package/alert/index.cjs +3 -3
  7. package/alert/index.js +3 -3
  8. package/appearance-ui/index.cjs +19 -11
  9. package/appearance-ui/index.js +19 -11
  10. package/audio-player/index.cjs +4 -3
  11. package/audio-player/index.js +4 -3
  12. package/avatar/index.cjs +1 -1
  13. package/avatar/index.js +1 -1
  14. package/badge/index.cjs +1 -1
  15. package/badge/index.js +1 -1
  16. package/banner/index.cjs +2 -2
  17. package/banner/index.js +2 -2
  18. package/breadcrumb-item/index.cjs +1 -1
  19. package/breadcrumb-item/index.js +1 -1
  20. package/button/index.cjs +2 -2
  21. package/button/index.js +2 -2
  22. package/card/index.cjs +2 -2
  23. package/card/index.js +2 -2
  24. package/checkbox/index.cjs +3 -2
  25. package/checkbox/index.js +3 -2
  26. package/combobox/index.cjs +5 -8
  27. package/combobox/index.js +5 -8
  28. package/custom-elements.json +2310 -769
  29. package/data-grid/index.cjs +1 -1
  30. package/data-grid/index.js +1 -1
  31. package/date-picker/index.cjs +7 -9
  32. package/date-picker/index.js +7 -9
  33. package/date-range-picker/index.cjs +7 -9
  34. package/date-range-picker/index.js +7 -9
  35. package/dial-pad/index.cjs +33 -0
  36. package/dial-pad/index.js +31 -0
  37. package/dialog/index.cjs +4 -4
  38. package/dialog/index.js +4 -4
  39. package/divider/index.cjs +1 -1
  40. package/divider/index.js +1 -1
  41. package/elevation/index.cjs +1 -1
  42. package/elevation/index.js +1 -1
  43. package/empty-state/index.cjs +2 -2
  44. package/empty-state/index.js +2 -2
  45. package/fab/index.cjs +2 -2
  46. package/fab/index.js +2 -2
  47. package/file-picker/index.cjs +4 -5
  48. package/file-picker/index.js +4 -5
  49. package/header/index.cjs +2 -2
  50. package/header/index.js +2 -2
  51. package/icon/index.cjs +1 -1
  52. package/icon/index.js +1 -1
  53. package/index.cjs +135 -123
  54. package/index.js +48 -46
  55. package/layout/index.cjs +1 -1
  56. package/layout/index.js +1 -1
  57. package/lib/avatar/definition.d.ts +1 -1
  58. package/lib/button/button.d.ts +1 -0
  59. package/lib/button/definition.d.ts +1 -1
  60. package/lib/calendar-event/definition.d.ts +1 -1
  61. package/lib/components.d.ts +3 -0
  62. package/lib/dial-pad/definition.d.ts +3 -0
  63. package/lib/dial-pad/dial-pad.d.ts +14 -0
  64. package/lib/dial-pad/dial-pad.template.d.ts +4 -0
  65. package/lib/dial-pad/locale.d.ts +18 -0
  66. package/lib/enums.d.ts +6 -0
  67. package/lib/layout/definition.d.ts +1 -1
  68. package/lib/menu-item/menu-item.d.ts +3 -0
  69. package/lib/range-slider/definition.d.ts +3 -0
  70. package/lib/range-slider/locale.d.ts +4 -0
  71. package/lib/range-slider/range-slider.d.ts +32 -0
  72. package/lib/range-slider/range-slider.form-associated.d.ts +10 -0
  73. package/lib/range-slider/range-slider.template.d.ts +4 -0
  74. package/lib/range-slider/utils/lerp.d.ts +2 -0
  75. package/lib/range-slider/utils/roundToStepValue.d.ts +1 -0
  76. package/lib/slider/slider.template.d.ts +1 -0
  77. package/lib/split-button/definition.d.ts +1 -1
  78. package/lib/text-anchor/definition.d.ts +1 -0
  79. package/lib/text-anchor/text-anchor.d.ts +5 -0
  80. package/lib/video-player/definition.d.ts +3 -0
  81. package/lib/video-player/locale.d.ts +1 -0
  82. package/lib/video-player/video-player.d.ts +17 -0
  83. package/lib/video-player/video-player.template.d.ts +4 -0
  84. package/listbox/index.cjs +25 -24
  85. package/listbox/index.js +25 -24
  86. package/locales/en-GB.cjs +34 -0
  87. package/locales/en-GB.js +34 -0
  88. package/locales/en-US.cjs +202 -0
  89. package/locales/en-US.js +202 -0
  90. package/locales/ja-JP.cjs +202 -1
  91. package/locales/ja-JP.js +202 -1
  92. package/locales/zh-CN.cjs +203 -0
  93. package/locales/zh-CN.js +203 -0
  94. package/menu/index.cjs +7 -7
  95. package/menu/index.js +7 -7
  96. package/menu-item/index.cjs +4 -4
  97. package/menu-item/index.js +4 -4
  98. package/nav/index.cjs +1 -1
  99. package/nav/index.js +1 -1
  100. package/nav-disclosure/index.cjs +2 -2
  101. package/nav-disclosure/index.js +2 -2
  102. package/nav-item/index.cjs +2 -2
  103. package/nav-item/index.js +2 -2
  104. package/note/index.cjs +2 -2
  105. package/note/index.js +2 -2
  106. package/number-field/index.cjs +5 -6
  107. package/number-field/index.js +5 -6
  108. package/option/index.cjs +2 -2
  109. package/option/index.js +2 -2
  110. package/package.json +34 -34
  111. package/pagination/index.cjs +3 -3
  112. package/pagination/index.js +3 -3
  113. package/popup/index.cjs +4 -4
  114. package/popup/index.js +4 -4
  115. package/progress/index.cjs +1 -1
  116. package/progress/index.js +1 -1
  117. package/progress-ring/index.cjs +1 -1
  118. package/progress-ring/index.js +1 -1
  119. package/radio/index.cjs +1 -1
  120. package/radio/index.js +1 -1
  121. package/radio-group/index.cjs +1 -1
  122. package/radio-group/index.js +1 -1
  123. package/range-slider/index.cjs +22 -0
  124. package/range-slider/index.js +20 -0
  125. package/select/index.cjs +7 -6
  126. package/select/index.js +7 -6
  127. package/selectable-box/index.cjs +5 -4
  128. package/selectable-box/index.js +5 -4
  129. package/shared/Reflector.cjs +5 -1
  130. package/shared/Reflector.js +5 -1
  131. package/shared/affix.cjs +11 -4
  132. package/shared/affix.js +12 -4
  133. package/shared/anchored.cjs +8 -2
  134. package/shared/anchored.js +8 -2
  135. package/shared/applyMixinsWithObservables.cjs +15 -0
  136. package/shared/applyMixinsWithObservables.js +13 -0
  137. package/shared/definition.cjs +9 -4
  138. package/shared/definition.js +9 -4
  139. package/shared/definition10.cjs +5 -5
  140. package/shared/definition10.js +5 -5
  141. package/shared/definition11.cjs +77 -49
  142. package/shared/definition11.js +78 -50
  143. package/shared/definition12.cjs +12 -14
  144. package/shared/definition12.js +12 -14
  145. package/shared/definition13.cjs +118 -75
  146. package/shared/definition13.js +118 -75
  147. package/shared/definition14.cjs +34 -33
  148. package/shared/definition14.js +34 -33
  149. package/shared/definition15.cjs +24 -12
  150. package/shared/definition15.js +24 -12
  151. package/shared/definition16.cjs +38 -43
  152. package/shared/definition16.js +38 -43
  153. package/shared/definition17.cjs +126 -66
  154. package/shared/definition17.js +127 -67
  155. package/shared/definition18.cjs +31 -15
  156. package/shared/definition18.js +31 -15
  157. package/shared/definition19.cjs +117 -81
  158. package/shared/definition19.js +117 -81
  159. package/shared/definition2.cjs +10 -5
  160. package/shared/definition2.js +10 -5
  161. package/shared/definition20.cjs +187 -227
  162. package/shared/definition20.js +183 -223
  163. package/shared/definition21.cjs +262 -69
  164. package/shared/definition21.js +261 -67
  165. package/shared/definition22.cjs +66 -61
  166. package/shared/definition22.js +64 -60
  167. package/shared/definition23.cjs +42 -77
  168. package/shared/definition23.js +41 -76
  169. package/shared/definition24.cjs +65 -2350
  170. package/shared/definition24.js +64 -2349
  171. package/shared/definition25.cjs +2402 -48
  172. package/shared/definition25.js +2401 -47
  173. package/shared/definition26.cjs +62 -28
  174. package/shared/definition26.js +61 -27
  175. package/shared/definition27.cjs +28 -54
  176. package/shared/definition27.js +27 -53
  177. package/shared/definition28.cjs +39 -819
  178. package/shared/definition28.js +38 -817
  179. package/shared/definition29.cjs +893 -54
  180. package/shared/definition29.js +893 -55
  181. package/shared/definition3.cjs +7 -10
  182. package/shared/definition3.js +7 -10
  183. package/shared/definition30.cjs +69 -85
  184. package/shared/definition30.js +68 -84
  185. package/shared/definition31.cjs +86 -23
  186. package/shared/definition31.js +86 -23
  187. package/shared/definition32.cjs +24 -14
  188. package/shared/definition32.js +23 -13
  189. package/shared/definition33.cjs +11 -53
  190. package/shared/definition33.js +10 -52
  191. package/shared/definition34.cjs +28 -500
  192. package/shared/definition34.js +28 -500
  193. package/shared/definition35.cjs +447 -194
  194. package/shared/definition35.js +447 -192
  195. package/shared/definition36.cjs +258 -188
  196. package/shared/definition36.js +255 -187
  197. package/shared/definition37.cjs +204 -78
  198. package/shared/definition37.js +203 -76
  199. package/shared/definition38.cjs +55 -51
  200. package/shared/definition38.js +52 -49
  201. package/shared/definition39.cjs +65 -423
  202. package/shared/definition39.js +64 -422
  203. package/shared/definition4.cjs +24 -12
  204. package/shared/definition4.js +24 -12
  205. package/shared/definition40.cjs +447 -35
  206. package/shared/definition40.js +444 -32
  207. package/shared/definition41.cjs +35 -678
  208. package/shared/definition41.js +34 -677
  209. package/shared/definition42.cjs +544 -99
  210. package/shared/definition42.js +543 -98
  211. package/shared/definition43.cjs +696 -77
  212. package/shared/definition43.js +695 -76
  213. package/shared/definition44.cjs +113 -563
  214. package/shared/definition44.js +112 -561
  215. package/shared/definition45.cjs +77 -117
  216. package/shared/definition45.js +75 -115
  217. package/shared/definition46.cjs +474 -86
  218. package/shared/definition46.js +474 -87
  219. package/shared/definition47.cjs +140 -23
  220. package/shared/definition47.js +139 -22
  221. package/shared/definition48.cjs +132 -57
  222. package/shared/definition48.js +131 -56
  223. package/shared/definition49.cjs +18 -524
  224. package/shared/definition49.js +17 -523
  225. package/shared/definition5.cjs +20 -17
  226. package/shared/definition5.js +20 -17
  227. package/shared/definition50.cjs +73 -25
  228. package/shared/definition50.js +72 -24
  229. package/shared/definition51.cjs +506 -99
  230. package/shared/definition51.js +505 -99
  231. package/shared/definition52.cjs +29 -277
  232. package/shared/definition52.js +28 -276
  233. package/shared/definition53.cjs +97 -256
  234. package/shared/definition53.js +97 -255
  235. package/shared/definition54.cjs +287 -769
  236. package/shared/definition54.js +287 -769
  237. package/shared/definition55.cjs +305 -105
  238. package/shared/definition55.js +304 -104
  239. package/shared/definition56.cjs +841 -81
  240. package/shared/definition56.js +840 -80
  241. package/shared/definition57.cjs +153 -69
  242. package/shared/definition57.js +152 -68
  243. package/shared/definition58.cjs +138 -299
  244. package/shared/definition58.js +137 -298
  245. package/shared/definition59.cjs +72 -27
  246. package/shared/definition59.js +71 -26
  247. package/shared/definition6.cjs +4 -5
  248. package/shared/definition6.js +4 -5
  249. package/shared/definition60.cjs +279 -1780
  250. package/shared/definition60.js +278 -1779
  251. package/shared/definition61.cjs +65870 -11
  252. package/shared/definition61.js +65869 -11
  253. package/shared/definition62.cjs +50 -0
  254. package/shared/definition62.js +46 -0
  255. package/shared/definition63.cjs +1828 -0
  256. package/shared/definition63.js +1824 -0
  257. package/shared/definition7.cjs +8 -6
  258. package/shared/definition7.js +8 -6
  259. package/shared/definition8.cjs +27 -20
  260. package/shared/definition8.js +27 -20
  261. package/shared/definition9.cjs +7 -10
  262. package/shared/definition9.js +7 -10
  263. package/shared/enums.cjs +8 -0
  264. package/shared/enums.js +8 -1
  265. package/shared/icon.cjs +7 -2
  266. package/shared/icon.js +7 -2
  267. package/shared/index2.cjs +67 -38
  268. package/shared/index2.js +67 -38
  269. package/shared/key-codes2.cjs +8 -0
  270. package/shared/key-codes2.js +5 -1
  271. package/shared/listbox.cjs +1 -1
  272. package/shared/listbox.js +1 -1
  273. package/shared/localization/Locale.d.ts +6 -0
  274. package/shared/patterns/form-elements/form-elements.d.ts +2 -3
  275. package/shared/patterns/index.d.ts +0 -1
  276. package/shared/presentationDate.cjs +140 -81
  277. package/shared/presentationDate.js +140 -81
  278. package/shared/slider.template.cjs +71 -0
  279. package/shared/slider.template.js +67 -0
  280. package/shared/text-anchor.cjs +6 -0
  281. package/shared/text-anchor.js +6 -0
  282. package/shared/text-anchor.template.cjs +33 -33
  283. package/shared/text-anchor.template.js +33 -33
  284. package/shared/text-field.cjs +1 -1
  285. package/shared/text-field.js +1 -1
  286. package/shared/utils/applyMixinsWithObservables.d.ts +1 -0
  287. package/side-drawer/index.cjs +1 -1
  288. package/side-drawer/index.js +1 -1
  289. package/slider/index.cjs +2 -1
  290. package/slider/index.js +2 -1
  291. package/split-button/index.cjs +2 -2
  292. package/split-button/index.js +2 -2
  293. package/style.css +1 -0
  294. package/styles/core/all.css +1 -1
  295. package/styles/core/theme.css +1 -1
  296. package/styles/core/typography.css +1 -1
  297. package/styles/fonts/spezia-variable.css +39 -13
  298. package/styles/tokens/theme-dark.css +4 -4
  299. package/styles/tokens/theme-light.css +4 -4
  300. package/styles/tokens/vivid-2-compat.css +4 -2
  301. package/switch/index.cjs +2 -2
  302. package/switch/index.js +2 -2
  303. package/tab/index.cjs +2 -2
  304. package/tab/index.js +2 -2
  305. package/tab-panel/index.cjs +1 -1
  306. package/tab-panel/index.js +1 -1
  307. package/tabs/index.cjs +4 -4
  308. package/tabs/index.js +4 -4
  309. package/tag/index.cjs +2 -2
  310. package/tag/index.js +2 -2
  311. package/tag-group/index.cjs +1 -1
  312. package/tag-group/index.js +1 -1
  313. package/text-area/index.cjs +4 -3
  314. package/text-area/index.js +4 -3
  315. package/text-field/index.cjs +4 -6
  316. package/text-field/index.js +4 -6
  317. package/time-picker/index.cjs +8 -10
  318. package/time-picker/index.js +8 -10
  319. package/toggletip/index.cjs +5 -5
  320. package/toggletip/index.js +5 -5
  321. package/tooltip/index.cjs +5 -5
  322. package/tooltip/index.js +5 -5
  323. package/tree-item/index.cjs +2 -2
  324. package/tree-item/index.js +2 -2
  325. package/tree-view/index.cjs +1 -1
  326. package/tree-view/index.js +1 -1
  327. package/video-player/index.cjs +17 -0
  328. package/video-player/index.js +15 -0
  329. package/vivid.api.json +428 -1
  330. package/focus/index.cjs +0 -7
  331. package/focus/index.js +0 -5
  332. package/lib/focus/definition.d.ts +0 -3
  333. package/lib/focus/focus.d.ts +0 -3
  334. package/lib/focus/focus.template.d.ts +0 -4
  335. package/lib/popup/popup.d.ts +0 -21
  336. package/shared/focus.cjs +0 -8
  337. package/shared/focus.js +0 -6
  338. package/shared/focus2.cjs +0 -11
  339. package/shared/focus2.js +0 -9
  340. package/shared/patterns/focus.d.ts +0 -3
@@ -1,306 +1,145 @@
1
- import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
2
- import { T as TreeItem$1, i as isTreeItemElement } from './tree-item.js';
3
- import { i as isHTMLElement, g as getDisplayedNodes } from './dom.js';
4
- import { k as keyEnter, e as keyArrowUp, f as keyArrowDown, h as keyArrowRight, i as keyArrowLeft, d as keyEnd, g as keyHome } from './key-codes.js';
5
- import { r as ref } from './ref.js';
6
- import { s as slotted } from './slotted.js';
1
+ import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
2
+ import { P as Popup, p as popupRegistries } from './definition63.js';
3
+ import { b as anchored, a as anchorSlotTemplateFactory } from './anchored.js';
7
4
  import { c as classNames } from './class-names.js';
8
5
 
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
- let TreeView$1 = class TreeView 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$1.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$1.focusItem(treeItems[0]);
78
- }
79
- return;
80
- case keyEnd:
81
- if (treeItems.length) {
82
- TreeItem$1.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$1 &&
89
- item.childItemLength() > 0 &&
90
- item.expanded) {
91
- item.expanded = false;
92
- }
93
- else if (item instanceof TreeItem$1 &&
94
- item.parentElement instanceof TreeItem$1) {
95
- TreeItem$1.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$1 &&
103
- item.childItemLength() > 0 &&
104
- !item.expanded) {
105
- item.expanded = true;
106
- }
107
- else if (item instanceof TreeItem$1 && 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$1.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
- const styles = ".control{position:relative;display:flex;flex-direction:column;gap:4px}\n";
6
+ const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}\n";
274
7
 
275
- class TreeView extends TreeView$1 {
276
- }
8
+ var __defProp = Object.defineProperty;
9
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
10
+ var __decorateClass = (decorators, target, key, kind) => {
11
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
12
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
13
+ if (decorator = decorators[i])
14
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
15
+ if (kind && result)
16
+ __defProp(target, key, result);
17
+ return result;
18
+ };
19
+ var __accessCheck = (obj, member, msg) => {
20
+ if (!member.has(obj))
21
+ throw TypeError("Cannot " + msg);
22
+ };
23
+ var __privateGet = (obj, member, getter) => {
24
+ __accessCheck(obj, member, "read from private field");
25
+ return getter ? getter.call(obj) : member.get(obj);
26
+ };
27
+ var __privateAdd = (obj, member, value) => {
28
+ if (member.has(obj))
29
+ throw TypeError("Cannot add the same private member more than once");
30
+ member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
31
+ };
32
+ var __privateMethod = (obj, member, method) => {
33
+ __accessCheck(obj, member, "access private method");
34
+ return method;
35
+ };
36
+ var _setupAnchor, setupAnchor_fn, _cleanupAnchor, cleanupAnchor_fn, _show, _hide, _updateListeners, updateListeners_fn, _closeOnEscape;
37
+ let Tooltip = class extends FoundationElement {
38
+ constructor() {
39
+ super(...arguments);
40
+ __privateAdd(this, _setupAnchor);
41
+ __privateAdd(this, _cleanupAnchor);
42
+ __privateAdd(this, _updateListeners);
43
+ this.open = false;
44
+ __privateAdd(this, _show, () => {
45
+ this.open = true;
46
+ });
47
+ __privateAdd(this, _hide, () => {
48
+ this.open = false;
49
+ });
50
+ __privateAdd(this, _closeOnEscape, (e) => {
51
+ if (e.key === "Escape")
52
+ __privateGet(this, _hide).call(this);
53
+ });
54
+ }
55
+ connectedCallback() {
56
+ super.connectedCallback();
57
+ __privateMethod(this, _updateListeners, updateListeners_fn).call(this);
58
+ }
59
+ disconnectedCallback() {
60
+ super.disconnectedCallback();
61
+ __privateMethod(this, _updateListeners, updateListeners_fn).call(this);
62
+ }
63
+ /**
64
+ * @internal
65
+ */
66
+ _anchorElChanged(oldValue, newValue) {
67
+ if (oldValue)
68
+ __privateMethod(this, _cleanupAnchor, cleanupAnchor_fn).call(this, oldValue);
69
+ if (newValue)
70
+ __privateMethod(this, _setupAnchor, setupAnchor_fn).call(this, newValue);
71
+ }
72
+ /**
73
+ * @internal
74
+ */
75
+ openChanged(oldValue) {
76
+ if (oldValue === void 0)
77
+ return;
78
+ __privateMethod(this, _updateListeners, updateListeners_fn).call(this);
79
+ }
80
+ };
81
+ _setupAnchor = new WeakSet();
82
+ setupAnchor_fn = function(a) {
83
+ a.addEventListener("mouseover", __privateGet(this, _show));
84
+ a.addEventListener("mouseout", __privateGet(this, _hide));
85
+ a.addEventListener("focusin", __privateGet(this, _show));
86
+ a.addEventListener("focusout", __privateGet(this, _hide));
87
+ };
88
+ _cleanupAnchor = new WeakSet();
89
+ cleanupAnchor_fn = function(a) {
90
+ a.removeEventListener("mouseover", __privateGet(this, _show));
91
+ a.removeEventListener("mouseout", __privateGet(this, _hide));
92
+ a.removeEventListener("focusin", __privateGet(this, _show));
93
+ a.removeEventListener("focusout", __privateGet(this, _hide));
94
+ };
95
+ _show = new WeakMap();
96
+ _hide = new WeakMap();
97
+ _updateListeners = new WeakSet();
98
+ updateListeners_fn = function() {
99
+ document.removeEventListener("keydown", __privateGet(this, _closeOnEscape));
100
+ if (this.open && this.isConnected) {
101
+ document.addEventListener("keydown", __privateGet(this, _closeOnEscape));
102
+ }
103
+ };
104
+ _closeOnEscape = new WeakMap();
105
+ __decorateClass([
106
+ attr
107
+ ], Tooltip.prototype, "text", 2);
108
+ __decorateClass([
109
+ attr({ mode: "fromView" })
110
+ ], Tooltip.prototype, "placement", 2);
111
+ __decorateClass([
112
+ attr({ mode: "boolean" })
113
+ ], Tooltip.prototype, "open", 2);
114
+ Tooltip = __decorateClass([
115
+ anchored
116
+ ], Tooltip);
277
117
 
278
- const getClasses = (_) => classNames("control");
279
- const TreeViewTemplate = () => {
118
+ const getClasses = ({ open }) => classNames("control", ["open", Boolean(open)]);
119
+ const TooltipTemplate = (context) => {
120
+ const popupTag = context.tagFor(Popup);
121
+ const anchorSlotTemplate = anchorSlotTemplateFactory();
280
122
  return html`
281
- <template
282
- role="tree"
283
- ${ref("treeView")}
284
- @keydown="${(x, c) => x.handleKeyDown(c.event)}"
285
- @focusin="${(x, c) => x.handleFocus(c.event)}"
286
- @focusout="${(x, c) => x.handleBlur(c.event)}"
287
- @click="${(x, c) => x.handleClick(c.event)}"
288
- @selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
289
- >
290
- <div class="${getClasses}">
291
- <slot ${slotted("slottedTreeItems")}></slot>
292
- </div>
293
- </template>`;
123
+ ${anchorSlotTemplate}
124
+ <${popupTag} class="${getClasses}" arrow alternate
125
+ :placement=${(x) => x.placement}
126
+ :anchor="${(x) => x._anchorEl}"
127
+ :open=${(x) => x.open}
128
+ exportparts="vvd-theme-alternate">
129
+ <div class="tooltip" role="tooltip">
130
+ <header part="vvd-theme-alternate" class="tooltip-header">
131
+ <div class="tooltip-text">${(x) => x.text}</div>
132
+ </header>
133
+ </div>
134
+ </${popupTag}>`;
294
135
  };
295
136
 
296
- const treeViewDefinition = TreeView.compose(
297
- {
298
- baseName: "tree-view",
299
- template: TreeViewTemplate,
300
- styles
301
- }
302
- );
303
- const treeViewRegistries = [treeViewDefinition()];
304
- const registerTreeView = registerFactory(treeViewRegistries);
137
+ const tooltipDefinition = Tooltip.compose({
138
+ baseName: "tooltip",
139
+ template: TooltipTemplate,
140
+ styles
141
+ });
142
+ const tooltipRegistries = [tooltipDefinition(), ...popupRegistries];
143
+ const registerTooltip = registerFactory(tooltipRegistries);
305
144
 
306
- export { treeViewRegistries as a, registerTreeView as r, treeViewDefinition as t };
145
+ export { tooltipRegistries as a, registerTooltip as r, tooltipDefinition as t };
@@ -1,7 +1,18 @@
1
1
  'use strict';
2
2
 
3
3
  const index = require('./index.cjs');
4
+ const definition = require('./definition27.cjs');
5
+ const affix = require('./affix.cjs');
6
+ const treeItem = require('./tree-item.cjs');
7
+ const applyMixins = require('./apply-mixins.cjs');
8
+ const icon = require('./icon.cjs');
9
+ const slotted = require('./slotted.cjs');
10
+ const children = require('./children.cjs');
11
+ const when = require('./when.cjs');
4
12
  const classNames = require('./class-names.cjs');
13
+ const ref = require('./ref.cjs');
14
+
15
+ const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}.items{display:flex;flex-direction:column;gap:4px;margin-block:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
5
16
 
6
17
  var __defProp = Object.defineProperty;
7
18
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -14,38 +25,72 @@ var __decorateClass = (decorators, target, key, kind) => {
14
25
  __defProp(target, key, result);
15
26
  return result;
16
27
  };
17
- class Elevation extends index.FoundationElement {
28
+ class TreeItem extends treeItem.TreeItem {
18
29
  }
19
30
  __decorateClass([
20
31
  index.attr
21
- ], Elevation.prototype, "dp", 2);
22
- __decorateClass([
23
- index.attr({ attribute: "no-shadow", mode: "boolean" })
24
- ], Elevation.prototype, "noShadow", 2);
25
-
26
- const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp)}.control.dp-4{--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp)}.control.dp-8{--_elevation-fill: var(--vvd-color-surface-8dp);--_elevation-shadow: var(--vvd-shadow-surface-8dp)}.control.dp-12{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control.dp-16{--_elevation-fill: var(--vvd-color-surface-16dp);--_elevation-shadow: var(--vvd-shadow-surface-16dp)}.control.dp-24{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--vvd-color-surface-2dp);--_elevation-shadow: var(--vvd-shadow-surface-2dp)}.control ::slotted(*){position:relative;isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;background:var(--_elevation-fill);block-size:100%;border-radius:inherit;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control.no-shadow ::slotted(*):before{filter:none}\n";
32
+ ], TreeItem.prototype, "text", 2);
33
+ applyMixins.applyMixins(TreeItem, affix.AffixIcon);
27
34
 
28
- const getClasses = ({
29
- dp,
30
- noShadow
31
- }) => classNames.classNames(
35
+ const getClasses = ({ disabled, selected }) => classNames.classNames(
32
36
  "control",
33
- [`dp-${dp}`, Boolean(dp)],
34
- ["no-shadow", Boolean(noShadow)]
37
+ ["disabled", disabled],
38
+ ["selected", Boolean(selected)]
35
39
  );
36
- const elevationTemplate = () => index.html`
37
- <div class="${getClasses}" part="base">
38
- <slot></slot>
39
- </div>`;
40
+ const expandCollapseButton = (context) => {
41
+ const iconTag = context.tagFor(icon.Icon);
42
+ return index.html`
43
+ <div aria-hidden="true"
44
+ class="expandCollapseButton"
45
+ @click="${(x, c) => x.handleExpandCollapseButtonClick(c.event)}"
46
+ ${ref.ref("expandCollapseButton")}
47
+ >
48
+ <${iconTag} class="expandCollapseIcon" name="${(x) => x.expanded ? "chevron-down-line" : "chevron-right-line"}"></${iconTag}>
49
+ </div>`;
50
+ };
51
+ const TreeItemTemplate = (context) => {
52
+ const affixIconTemplate = affix.affixIconTemplateFactory(context);
53
+ return index.html` <template
54
+ role="treeitem"
55
+ slot="${(x) => x.isNestedItem() ? "item" : void 0}"
56
+ tabindex="-1"
57
+ aria-expanded="${(x) => x.childItems && x.childItems.length > 0 ? x.expanded : void 0}"
58
+ aria-selected="${(x) => x.selected}"
59
+ aria-disabled="${(x) => x.disabled}"
60
+ @focusin="${(x, c) => x.handleFocus(c.event)}"
61
+ @focusout="${(x, c) => x.handleBlur(c.event)}"
62
+ ${children.children({
63
+ property: "childItems",
64
+ filter: slotted.elements(context.tagFor(TreeItem))
65
+ })}
66
+ >
67
+ <div class="${getClasses}">
68
+ ${when.when(
69
+ (x) => x.childItems && x.childItems.length > 0,
70
+ expandCollapseButton(context)
71
+ )}
72
+ ${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
73
+ ${(x) => x.text}
74
+ </div>
75
+ ${when.when(
76
+ (x) => x.childItems && x.childItems.length > 0 && x.expanded,
77
+ index.html` <div role="group" class="items">
78
+ <slot name="item" ${slotted.slotted("items")}></slot>
79
+ </div>`
80
+ )}
81
+ </template>`;
82
+ };
40
83
 
41
- const elevationDefinition = Elevation.compose({
42
- baseName: "elevation",
43
- template: elevationTemplate,
44
- styles
45
- });
46
- const elevationRegistries = [elevationDefinition()];
47
- const registerElevation = index.registerFactory(elevationRegistries);
84
+ const treeItemDefinition = TreeItem.compose(
85
+ {
86
+ baseName: "tree-item",
87
+ template: TreeItemTemplate,
88
+ styles
89
+ }
90
+ );
91
+ const treeItemRegistries = [treeItemDefinition(), ...definition.iconRegistries];
92
+ const registerTreeItem = index.registerFactory(treeItemRegistries);
48
93
 
49
- exports.Elevation = Elevation;
50
- exports.elevationRegistries = elevationRegistries;
51
- exports.registerElevation = registerElevation;
94
+ exports.registerTreeItem = registerTreeItem;
95
+ exports.treeItemDefinition = treeItemDefinition;
96
+ exports.treeItemRegistries = treeItemRegistries;