@redvars/peacock 3.2.10 → 3.3.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.
Files changed (242) hide show
  1. package/dist/{PeacockComponent-CxJc63xj.js → IndividualComponent-tDnXrOLV.js} +3 -3
  2. package/dist/IndividualComponent-tDnXrOLV.js.map +1 -0
  3. package/dist/assets/components.css +1 -1
  4. package/dist/assets/components.css.map +1 -1
  5. package/dist/assets/styles.css +1 -1
  6. package/dist/assets/styles.css.map +1 -1
  7. package/dist/button-group-DA7xoziD.js +292 -0
  8. package/dist/button-group-DA7xoziD.js.map +1 -0
  9. package/dist/button-group.js +6 -107
  10. package/dist/button-group.js.map +1 -1
  11. package/dist/{button-DaL4va7Q.js → button-trIfcqC7.js} +21 -35
  12. package/dist/button-trIfcqC7.js.map +1 -0
  13. package/dist/button.js +5 -5
  14. package/dist/chart-donut.js +307 -0
  15. package/dist/chart-donut.js.map +1 -0
  16. package/dist/chart-doughnut.js +307 -0
  17. package/dist/chart-doughnut.js.map +1 -0
  18. package/dist/chart-pie.js +259 -0
  19. package/dist/chart-pie.js.map +1 -0
  20. package/dist/{class-map-BvQRv7eW.js → class-map-hJdvjl-W.js} +9 -3
  21. package/dist/class-map-hJdvjl-W.js.map +1 -0
  22. package/dist/clock.js +5 -6
  23. package/dist/clock.js.map +1 -1
  24. package/dist/code-editor.js +38 -25
  25. package/dist/code-editor.js.map +1 -1
  26. package/dist/code-highlighter.js +10 -14
  27. package/dist/code-highlighter.js.map +1 -1
  28. package/dist/custom-elements-jsdocs.json +8144 -3654
  29. package/dist/custom-elements.json +7925 -3901
  30. package/dist/{dispatch-event-utils-vbdiOSeC.js → dispatch-event-utils-B4odODQf.js} +2 -15
  31. package/dist/dispatch-event-utils-B4odODQf.js.map +1 -0
  32. package/dist/index.js +13 -10
  33. package/dist/index.js.map +1 -1
  34. package/dist/number-counter.js +12 -10
  35. package/dist/number-counter.js.map +1 -1
  36. package/dist/{observe-theme-change-NneLARW8.js → observe-theme-change-BISF-Gl5.js} +2 -2
  37. package/dist/{observe-theme-change-NneLARW8.js.map → observe-theme-change-BISF-Gl5.js.map} +1 -1
  38. package/dist/peacock-loader.js +94 -502
  39. package/dist/peacock-loader.js.map +1 -1
  40. package/dist/query-QBcUV-L_.js +15 -0
  41. package/dist/query-QBcUV-L_.js.map +1 -0
  42. package/dist/src/IndividualComponent.d.ts +1 -0
  43. package/dist/src/accordion/{accordion-item/accordion-item.d.ts → accordion-item.d.ts} +5 -4
  44. package/dist/src/accordion/{accordion/accordion.d.ts → accordion.d.ts} +6 -6
  45. package/dist/src/accordion/{accordion-item/index.d.ts → index.d.ts} +1 -0
  46. package/dist/src/avatar/avatar.d.ts +2 -2
  47. package/dist/src/badge/badge.d.ts +2 -2
  48. package/dist/src/breadcrumb/breadcrumb/breadcrumb.d.ts +9 -8
  49. package/dist/src/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts +4 -3
  50. package/dist/src/button/button/button.d.ts +2 -2
  51. package/dist/src/button/button-group/button-group.d.ts +9 -5
  52. package/dist/src/button/icon-button/icon-button.d.ts +2 -2
  53. package/dist/src/chart-donut/chart-donut.d.ts +53 -0
  54. package/dist/src/chart-donut/index.d.ts +1 -0
  55. package/dist/src/chart-doughnut/chart-doughnut.d.ts +53 -0
  56. package/dist/src/chart-doughnut/index.d.ts +1 -0
  57. package/dist/src/chart-pie/chart-pie.d.ts +50 -0
  58. package/dist/src/chart-pie/index.d.ts +1 -0
  59. package/dist/src/checkbox/checkbox.d.ts +3 -6
  60. package/dist/src/chip/chip/chip.d.ts +4 -4
  61. package/dist/src/chip/tag/tag.d.ts +3 -3
  62. package/dist/src/clock/clock.d.ts +3 -4
  63. package/dist/src/code-editor/code-editor.d.ts +13 -10
  64. package/dist/src/code-highlighter/code-highlighter.d.ts +4 -7
  65. package/dist/src/container/container.d.ts +6 -11
  66. package/dist/src/date-picker/date-picker.d.ts +3 -3
  67. package/dist/src/divider/divider.d.ts +2 -2
  68. package/dist/src/elevation/elevation.d.ts +2 -2
  69. package/dist/src/empty-state/empty-state.d.ts +9 -2
  70. package/dist/src/field/field.d.ts +17 -0
  71. package/dist/src/focus-ring/focus-ring.d.ts +1 -1
  72. package/dist/src/icon/icon.d.ts +2 -2
  73. package/dist/src/image/image.d.ts +4 -12
  74. package/dist/src/index.d.ts +9 -1
  75. package/dist/src/input/input.d.ts +2 -2
  76. package/dist/src/link/link.d.ts +4 -5
  77. package/dist/src/menu/index.d.ts +3 -0
  78. package/dist/src/menu/menu/MenuSurfaceController.d.ts +18 -0
  79. package/dist/src/menu/menu/menu.d.ts +66 -8
  80. package/dist/src/menu/menu-item/menu-item.d.ts +24 -5
  81. package/dist/src/menu/sub-menu/sub-menu.d.ts +36 -0
  82. package/dist/src/number-counter/number-counter.d.ts +9 -7
  83. package/dist/src/number-field/number-field.d.ts +1 -1
  84. package/dist/src/pagination/index.d.ts +1 -0
  85. package/dist/src/pagination/pagination.d.ts +38 -0
  86. package/dist/src/popover/PopoverController.d.ts +4 -1
  87. package/dist/src/popover/index.d.ts +1 -1
  88. package/dist/src/progress/circular-progress/circular-progress.d.ts +3 -3
  89. package/dist/src/progress/linear-progress/linear-progress.d.ts +3 -3
  90. package/dist/src/ripple/ripple.d.ts +60 -4
  91. package/dist/src/skeleton/skeleton.d.ts +6 -5
  92. package/dist/src/slider/index.d.ts +1 -0
  93. package/dist/src/slider/slider.d.ts +52 -0
  94. package/dist/src/spinner/spinner.d.ts +2 -2
  95. package/dist/src/switch/switch.d.ts +2 -2
  96. package/dist/src/table/index.d.ts +1 -0
  97. package/dist/src/table/table.d.ts +110 -0
  98. package/dist/src/tabs/index.d.ts +4 -0
  99. package/dist/src/tabs/tab-group.d.ts +45 -0
  100. package/dist/src/tabs/tab-panel.d.ts +22 -0
  101. package/dist/src/tabs/tab.d.ts +59 -0
  102. package/dist/src/tabs/tabs.d.ts +29 -0
  103. package/dist/src/textarea/textarea.d.ts +3 -3
  104. package/dist/src/time-picker/time-picker.d.ts +3 -3
  105. package/dist/src/{popover/tooltip → tooltip}/tooltip.d.ts +4 -3
  106. package/dist/src/tree-view/index.d.ts +2 -0
  107. package/dist/src/tree-view/tree-node.d.ts +69 -0
  108. package/dist/src/tree-view/tree-view.d.ts +40 -0
  109. package/dist/src/tree-view/wc-tree-view.d.ts +6 -0
  110. package/dist/{style-map-B8xgVEc9.js → style-map-CfNHEkQp.js} +2 -2
  111. package/dist/{style-map-B8xgVEc9.js.map → style-map-CfNHEkQp.js.map} +1 -1
  112. package/dist/test/icon.test.d.ts +1 -1
  113. package/dist/test/menu.test.d.ts +1 -0
  114. package/dist/test/sub-menu.test.d.ts +1 -0
  115. package/dist/test/tree-view.test.d.ts +1 -0
  116. package/dist/transform-DRuHEvar.js +3312 -0
  117. package/dist/transform-DRuHEvar.js.map +1 -0
  118. package/dist/{image-v3BujlY5.js → tree-view-CLolVlU0.js} +4088 -672
  119. package/dist/tree-view-CLolVlU0.js.map +1 -0
  120. package/dist/tsconfig.tsbuildinfo +1 -1
  121. package/dist/{unsafe-html-B-dV3Jps.js → unsafe-html-CV6Je6HL.js} +2 -2
  122. package/dist/{unsafe-html-B-dV3Jps.js.map → unsafe-html-CV6Je6HL.js.map} +1 -1
  123. package/package.json +3 -1
  124. package/readme.md +40 -40
  125. package/src/{PeacockComponent.ts → IndividualComponent.ts} +1 -1
  126. package/src/accordion/{accordion-item/accordion-item.scss → accordion-item.scss} +1 -1
  127. package/src/accordion/{accordion-item/accordion-item.ts → accordion-item.ts} +7 -6
  128. package/src/accordion/{accordion/accordion.scss → accordion.scss} +2 -1
  129. package/src/accordion/{accordion/accordion.ts → accordion.ts} +6 -6
  130. package/src/accordion/{accordion-item/index.ts → index.ts} +2 -0
  131. package/src/avatar/avatar.ts +2 -2
  132. package/src/badge/badge.ts +2 -2
  133. package/src/breadcrumb/breadcrumb/breadcrumb.ts +10 -8
  134. package/src/breadcrumb/breadcrumb-item/breadcrumb-item.ts +4 -3
  135. package/src/button/BaseButton.ts +1 -1
  136. package/src/button/button/button.scss +9 -23
  137. package/src/button/button/button.ts +8 -8
  138. package/src/button/button-group/button-group.ts +13 -7
  139. package/src/button/icon-button/icon-button.ts +8 -8
  140. package/src/chart-donut/chart-donut.scss +37 -0
  141. package/src/chart-donut/chart-donut.ts +287 -0
  142. package/src/chart-donut/demo/index.html +51 -0
  143. package/src/chart-donut/index.ts +1 -0
  144. package/src/chart-doughnut/chart-donut.scss +37 -0
  145. package/src/chart-doughnut/chart-doughnut.ts +287 -0
  146. package/src/chart-doughnut/demo/index.html +51 -0
  147. package/src/chart-doughnut/index.ts +1 -0
  148. package/src/chart-pie/chart-pie.scss +27 -0
  149. package/src/chart-pie/chart-pie.ts +256 -0
  150. package/src/chart-pie/demo/index.html +51 -0
  151. package/src/chart-pie/index.ts +1 -0
  152. package/src/checkbox/checkbox.ts +3 -6
  153. package/src/chip/chip/chip.ts +6 -6
  154. package/src/chip/tag/tag.ts +6 -6
  155. package/src/clock/clock.ts +5 -6
  156. package/src/code-editor/code-editor.scss +3 -5
  157. package/src/code-editor/code-editor.ts +32 -16
  158. package/src/code-highlighter/code-highlighter.ts +8 -11
  159. package/src/container/container.ts +6 -11
  160. package/src/date-picker/date-picker.ts +7 -7
  161. package/src/divider/divider.scss +2 -2
  162. package/src/divider/divider.ts +2 -2
  163. package/src/elevation/elevation.ts +2 -2
  164. package/src/empty-state/empty-state.scss +1 -1
  165. package/src/empty-state/empty-state.ts +10 -3
  166. package/src/field/field.scss +4 -4
  167. package/src/field/field.ts +19 -2
  168. package/src/focus-ring/focus-ring.scss +2 -1
  169. package/src/focus-ring/focus-ring.ts +1 -1
  170. package/src/icon/icon.ts +2 -2
  171. package/src/icon/p-icon.ts +1 -1
  172. package/src/image/image.ts +4 -12
  173. package/src/index.ts +11 -3
  174. package/src/input/input.ts +6 -6
  175. package/src/link/link.ts +4 -5
  176. package/src/menu/index.ts +3 -0
  177. package/src/menu/menu/MenuSurfaceController.ts +61 -0
  178. package/src/menu/{menu-list/menu-list.scss → menu/menu.scss} +19 -4
  179. package/src/menu/menu/menu.ts +401 -77
  180. package/src/menu/menu-item/menu-item-colors.scss +2 -2
  181. package/src/menu/menu-item/menu-item.ts +128 -37
  182. package/src/menu/sub-menu/sub-menu.scss +7 -0
  183. package/src/menu/sub-menu/sub-menu.ts +243 -0
  184. package/src/number-counter/demo/index.html +1 -1
  185. package/src/number-counter/number-counter.ts +11 -9
  186. package/src/number-field/number-field.ts +7 -7
  187. package/src/pagination/index.ts +1 -0
  188. package/src/pagination/pagination.scss +59 -0
  189. package/src/pagination/pagination.ts +135 -0
  190. package/src/peacock-loader.ts +92 -51
  191. package/src/popover/PopoverController.ts +13 -7
  192. package/src/popover/index.ts +1 -1
  193. package/src/progress/circular-progress/circular-progress.scss +1 -1
  194. package/src/progress/circular-progress/circular-progress.ts +3 -3
  195. package/src/progress/linear-progress/linear-progress.ts +3 -3
  196. package/src/ripple/ripple.ts +478 -94
  197. package/src/skeleton/skeleton.ts +6 -5
  198. package/src/slider/index.ts +1 -0
  199. package/src/slider/slider.scss +130 -0
  200. package/src/slider/slider.ts +178 -0
  201. package/src/spinner/spinner.ts +2 -2
  202. package/src/switch/switch.ts +4 -4
  203. package/src/table/index.ts +1 -0
  204. package/src/table/table.scss +174 -0
  205. package/src/table/table.ts +475 -0
  206. package/src/tabs/index.ts +4 -0
  207. package/src/tabs/tab-group.scss +10 -0
  208. package/src/tabs/tab-group.ts +143 -0
  209. package/src/tabs/tab-panel.scss +12 -0
  210. package/src/tabs/tab-panel.ts +29 -0
  211. package/src/tabs/tab.scss +157 -0
  212. package/src/tabs/tab.ts +243 -0
  213. package/src/tabs/tabs.scss +19 -0
  214. package/src/tabs/tabs.ts +66 -0
  215. package/src/text/text.css-component.scss +6 -3
  216. package/src/textarea/textarea.ts +5 -5
  217. package/src/time-picker/time-picker.ts +7 -7
  218. package/src/{popover/tooltip → tooltip}/tooltip.scss +17 -14
  219. package/src/{popover/tooltip → tooltip}/tooltip.ts +12 -10
  220. package/src/tree-view/demo/index.html +57 -0
  221. package/src/tree-view/index.ts +2 -0
  222. package/src/tree-view/tree-node.scss +101 -0
  223. package/src/tree-view/tree-node.ts +268 -0
  224. package/src/tree-view/tree-view.scss +12 -0
  225. package/src/tree-view/tree-view.ts +182 -0
  226. package/src/tree-view/wc-tree-view.ts +9 -0
  227. package/dist/PeacockComponent-CxJc63xj.js.map +0 -1
  228. package/dist/button-DaL4va7Q.js.map +0 -1
  229. package/dist/class-map-BvQRv7eW.js.map +0 -1
  230. package/dist/dispatch-event-utils-vbdiOSeC.js.map +0 -1
  231. package/dist/image-v3BujlY5.js.map +0 -1
  232. package/dist/src/PeacockComponent.d.ts +0 -1
  233. package/dist/src/accordion/accordion/index.d.ts +0 -1
  234. package/dist/src/avatar/p-avatar.d.ts +0 -3
  235. package/dist/src/badge/p-badge.d.ts +0 -3
  236. package/dist/src/menu/menu-list/menu-list.d.ts +0 -7
  237. package/dist/state-B09bP3XH.js +0 -10
  238. package/dist/state-B09bP3XH.js.map +0 -1
  239. package/src/accordion/accordion/index.ts +0 -1
  240. package/src/avatar/p-avatar.ts +0 -5
  241. package/src/badge/p-badge.ts +0 -5
  242. package/src/menu/menu-list/menu-list.ts +0 -33
package/src/tree-view/demo/index.html ADDED
@@ -0,0 +1,57 @@
1
+ <!doctype html>
2
+ <html lang='en-GB'>
3
+ <head>
4
+ <meta charset='utf-8'>
5
+ <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
6
+ <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
7
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
8
+
9
+ <style>
10
+ body {
11
+ background: #fafafa;
12
+ padding: 2rem;
13
+ font-family: 'Noto Sans', sans-serif;
14
+ }
15
+ h2 {
16
+ margin-top: 2rem;
17
+ margin-bottom: 0.5rem;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body>
22
+
23
+ <h2>Basic Tree View</h2>
24
+ <wc-tree-view>
25
+ <wc-tree-node label="Documents" icon="folder" expanded>
26
+ <wc-tree-node label="Work" icon="folder" expanded>
27
+ <wc-tree-node label="Project A" icon="description"></wc-tree-node>
28
+ <wc-tree-node label="Project B" icon="description"></wc-tree-node>
29
+ </wc-tree-node>
30
+ <wc-tree-node label="Personal" icon="folder">
31
+ <wc-tree-node label="Resume.pdf" icon="picture_as_pdf"></wc-tree-node>
32
+ </wc-tree-node>
33
+ </wc-tree-node>
34
+ <wc-tree-node label="Pictures" icon="photo_library">
35
+ <wc-tree-node label="Vacation.jpg" icon="image"></wc-tree-node>
36
+ <wc-tree-node label="Family.jpg" icon="image"></wc-tree-node>
37
+ </wc-tree-node>
38
+ <wc-tree-node label="Disabled Node" icon="block" disabled></wc-tree-node>
39
+ </wc-tree-view>
40
+
41
+ <h2>Tree View without Icons</h2>
42
+ <wc-tree-view>
43
+ <wc-tree-node label="Category 1" expanded>
44
+ <wc-tree-node label="Item 1.1"></wc-tree-node>
45
+ <wc-tree-node label="Item 1.2">
46
+ <wc-tree-node label="Item 1.2.1"></wc-tree-node>
47
+ <wc-tree-node label="Item 1.2.2"></wc-tree-node>
48
+ </wc-tree-node>
49
+ </wc-tree-node>
50
+ <wc-tree-node label="Category 2">
51
+ <wc-tree-node label="Item 2.1"></wc-tree-node>
52
+ </wc-tree-node>
53
+ </wc-tree-view>
54
+
55
+ <script type='module' src='/dist/peacock-loader.js'></script>
56
+ </body>
57
+ </html>
package/src/tree-view/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { TreeNode } from './tree-node.js';
2
+ export { TreeView } from './tree-view.js';
package/src/tree-view/tree-node.scss ADDED
@@ -0,0 +1,101 @@
1
+ @use '../../scss/mixin';
2
+
3
+ @include mixin.base-styles;
4
+
5
+ :host {
6
+ display: block;
7
+
8
+ // M3 tree node sizing
9
+ --tree-node-height: 2.5rem;
10
+ --tree-node-icon-size: 1.25rem;
11
+ --tree-node-border-radius: var(--global-shape-corner-full, 9999px);
12
+
13
+ // M3 color tokens
14
+ --tree-node-label-color: var(--color-on-surface);
15
+ --tree-node-icon-color: var(--color-on-surface-variant);
16
+ --tree-node-selected-background: var(--color-secondary-container);
17
+ --tree-node-selected-color: var(--color-on-secondary-container);
18
+ --tree-node-hover-background: var(--color-inverse-primary);
19
+ --tree-node-focus-ring-color: var(--color-primary);
20
+ }
21
+
22
+ .tree-node {
23
+ display: block;
24
+ }
25
+
26
+ .tree-node-content {
27
+ display: flex;
28
+ align-items: center;
29
+ gap: 0.25rem;
30
+ height: var(--tree-node-height);
31
+ border-radius: var(--tree-node-border-radius);
32
+ color: var(--tree-node-label-color);
33
+ cursor: pointer;
34
+ user-select: none;
35
+ text-decoration: none;
36
+ outline: none;
37
+
38
+ @include mixin.get-typography(body-medium);
39
+
40
+ &:not(.disabled):hover {
41
+ background-color: var(--tree-node-hover-background);
42
+ }
43
+
44
+ &:focus-visible {
45
+ @include mixin.focus-ring(var(--tree-node-focus-ring-color));
46
+ }
47
+
48
+ &.selected {
49
+ background-color: var(--tree-node-selected-background);
50
+ color: var(--tree-node-selected-color);
51
+
52
+ .node-icon {
53
+ --icon-color: var(--tree-node-selected-color);
54
+ }
55
+ }
56
+
57
+ &.disabled {
58
+ cursor: not-allowed;
59
+ opacity: 0.38;
60
+ pointer-events: none;
61
+ }
62
+ }
63
+
64
+ .expand-icon {
65
+ --icon-size: var(--tree-node-icon-size);
66
+ --icon-color: var(--tree-node-icon-color);
67
+ flex-shrink: 0;
68
+ transition: transform var(--duration-short2, 200ms) var(--easing-standard, ease);
69
+
70
+ &.expanded {
71
+ transform: rotate(90deg);
72
+ }
73
+ }
74
+
75
+ .icon-space {
76
+ display: inline-block;
77
+ width: var(--tree-node-icon-size);
78
+ height: var(--tree-node-icon-size);
79
+ flex-shrink: 0;
80
+ }
81
+
82
+ .node-icon {
83
+ --icon-size: var(--tree-node-icon-size);
84
+ --icon-color: var(--tree-node-icon-color);
85
+ flex-shrink: 0;
86
+ }
87
+
88
+ .tree-node-label {
89
+ flex: 1;
90
+ overflow: hidden;
91
+ text-overflow: ellipsis;
92
+ white-space: nowrap;
93
+ }
94
+
95
+ .node-children {
96
+ display: none;
97
+
98
+ &.expanded {
99
+ display: block;
100
+ }
101
+ }
package/src/tree-view/tree-node.ts ADDED
@@ -0,0 +1,268 @@
1
+ import { html, LitElement } from 'lit';
2
+ import { property, query } from 'lit/decorators.js';
3
+ import { classMap } from 'lit/directives/class-map.js';
4
+ import { styleMap } from 'lit/directives/style-map.js';
5
+ import styles from './tree-node.scss';
6
+
7
+ /**
8
+ * @label Tree Node
9
+ * @tag wc-tree-node
10
+ * @rawTag tree-node
11
+ * @parentRawTag tree-view
12
+ * @summary A tree node represents a single item in a hierarchical tree structure. It supports nesting, icons, links, and keyboard navigation.
13
+ *
14
+ * @example
15
+ * ```html
16
+ * <wc-tree-view>
17
+ * <wc-tree-node label="Parent">
18
+ * <wc-tree-node label="Child"></wc-tree-node>
19
+ * </wc-tree-node>
20
+ * </wc-tree-view>
21
+ * ```
22
+ * @tags navigation
23
+ */
24
+ export class TreeNode extends LitElement {
25
+ static styles = [styles];
26
+
27
+ /**
28
+ * The value used to identify this node when selected.
29
+ */
30
+ @property({ type: String, reflect: true })
31
+ value: string = '';
32
+
33
+ /**
34
+ * The display label for this node.
35
+ */
36
+ @property({ type: String, reflect: true })
37
+ label: string = '';
38
+
39
+ /**
40
+ * Optional icon name to display before the label.
41
+ */
42
+ @property({ type: String, reflect: true })
43
+ icon: string = '';
44
+
45
+ /**
46
+ * Optional hyperlink to navigate to on click.
47
+ */
48
+ @property({ type: String, reflect: true })
49
+ href: string = '';
50
+
51
+ /**
52
+ * Sets or retrieves the window or frame at which to target content.
53
+ */
54
+ @property({ type: String, reflect: true })
55
+ target: string = '_self';
56
+
57
+ /**
58
+ * If true, the user cannot interact with the node.
59
+ */
60
+ @property({ type: Boolean, reflect: true })
61
+ disabled: boolean = false;
62
+
63
+ /**
64
+ * Whether the node is currently selected.
65
+ */
66
+ @property({ type: Boolean, reflect: true })
67
+ selected: boolean = false;
68
+
69
+ /**
70
+ * Whether child nodes are visible.
71
+ */
72
+ @property({ type: Boolean, reflect: true })
73
+ expanded: boolean = false;
74
+
75
+ /**
76
+ * The nesting depth level (set automatically by the parent tree-view).
77
+ */
78
+ @property({ type: Number, reflect: true })
79
+ level: number = 0;
80
+
81
+ @query('.tree-node-content')
82
+ private readonly _nativeElement!: HTMLElement | null;
83
+
84
+ override focus() {
85
+ this._nativeElement?.focus();
86
+ }
87
+
88
+ override blur() {
89
+ this._nativeElement?.blur();
90
+ }
91
+
92
+ private _getChildNodes(): TreeNode[] {
93
+ return Array.from(this.children).filter(
94
+ el => el.tagName.toLowerCase() === 'wc-tree-node',
95
+ ) as TreeNode[];
96
+ }
97
+
98
+ connectedCallback() {
99
+ super.connectedCallback();
100
+ this._updateChildLevels();
101
+ this.setAttribute('role', 'treeitem');
102
+ this._syncHostAria();
103
+ }
104
+
105
+ private _syncHostAria() {
106
+ const hasChildren = this._getChildNodes().length > 0;
107
+ if (hasChildren) {
108
+ this.setAttribute('aria-expanded', String(this.expanded));
109
+ } else {
110
+ this.removeAttribute('aria-expanded');
111
+ }
112
+ this.setAttribute('aria-selected', String(this.selected));
113
+ this.setAttribute('aria-disabled', String(this.disabled));
114
+ this.setAttribute('aria-level', String(this.level + 1));
115
+ }
116
+
117
+ private _updateChildLevels() {
118
+ const children = this._getChildNodes();
119
+ children.forEach(child => {
120
+ // eslint-disable-next-line no-param-reassign
121
+ child.level = this.level + 1;
122
+ });
123
+ }
124
+
125
+ private _handleClick(event: Event) {
126
+ if (this.disabled) {
127
+ event.preventDefault();
128
+ event.stopPropagation();
129
+ return;
130
+ }
131
+
132
+ const hasChildren = this._getChildNodes().length > 0;
133
+ if (hasChildren) {
134
+ this.expanded = !this.expanded;
135
+ }
136
+
137
+ this.dispatchEvent(
138
+ new CustomEvent('tree-node:click', {
139
+ bubbles: true,
140
+ composed: true,
141
+ detail: {
142
+ value: this.value || this.label,
143
+ label: this.label,
144
+ expanded: this.expanded,
145
+ },
146
+ }),
147
+ );
148
+ }
149
+
150
+ private _handleKeyDown(event: KeyboardEvent) {
151
+ if (this.disabled) return;
152
+
153
+ const hasChildren = this._getChildNodes().length > 0;
154
+
155
+ switch (event.key) {
156
+ case ' ':
157
+ case 'Enter':
158
+ event.preventDefault();
159
+ if (hasChildren) {
160
+ this.expanded = !this.expanded;
161
+ }
162
+ this.dispatchEvent(
163
+ new CustomEvent('tree-node:click', {
164
+ bubbles: true,
165
+ composed: true,
166
+ detail: {
167
+ value: this.value || this.label,
168
+ label: this.label,
169
+ expanded: this.expanded,
170
+ },
171
+ }),
172
+ );
173
+ if (this.href) {
174
+ window.open(this.href, this.target);
175
+ }
176
+ break;
177
+ case 'ArrowLeft':
178
+ event.preventDefault();
179
+ if (this.expanded && hasChildren) {
180
+ this.expanded = false;
181
+ }
182
+ break;
183
+ case 'ArrowRight':
184
+ event.preventDefault();
185
+ if (hasChildren) {
186
+ if (!this.expanded) {
187
+ this.expanded = true;
188
+ } else {
189
+ const firstChild = this._getChildNodes()[0];
190
+ firstChild?.focus();
191
+ }
192
+ }
193
+ break;
194
+ default:
195
+ break;
196
+ }
197
+ }
198
+
199
+ updated(changedProps: Map<string, unknown>) {
200
+ super.updated(changedProps);
201
+ if (changedProps.has('level')) {
202
+ this._updateChildLevels();
203
+ }
204
+ this._syncHostAria();
205
+ }
206
+
207
+ private _renderContent(hasChildren: boolean) {
208
+ // 0.125rem offset aligns text visually with the expand/icon space
209
+ const indentStyle = styleMap({
210
+ paddingInlineStart: `calc(${this.level + 1}rem - 0.125rem)`,
211
+ });
212
+
213
+ const contentClasses = classMap({
214
+ 'tree-node-content': true,
215
+ selected: this.selected,
216
+ disabled: this.disabled,
217
+ });
218
+
219
+ const innerContent = html`
220
+ ${hasChildren
221
+ ? html`<wc-icon
222
+ class=${classMap({ 'expand-icon': true, expanded: this.expanded })}
223
+ name="arrow_right"
224
+ ></wc-icon>`
225
+ : html`<span class="icon-space"></span>`}
226
+ ${this.icon
227
+ ? html`<wc-icon class="node-icon" name=${this.icon}></wc-icon>`
228
+ : ''}
229
+ <span class="tree-node-label">${this.label}<slot name="label"></slot></span>
230
+ `;
231
+
232
+ if (this.href) {
233
+ return html`<a
234
+ class=${contentClasses}
235
+ style=${indentStyle}
236
+ href=${this.href}
237
+ target=${this.target}
238
+ tabindex=${this.disabled ? '-1' : '0'}
239
+ @click=${this._handleClick}
240
+ @keydown=${this._handleKeyDown}
241
+ >${innerContent}</a>`;
242
+ }
243
+
244
+ return html`<div
245
+ class=${contentClasses}
246
+ style=${indentStyle}
247
+ tabindex=${this.disabled ? '-1' : '0'}
248
+ @click=${this._handleClick}
249
+ @keydown=${this._handleKeyDown}
250
+ >${innerContent}</div>`;
251
+ }
252
+
253
+ render() {
254
+ const hasChildren = this._getChildNodes().length > 0;
255
+
256
+ const nodeSlotClasses = classMap({
257
+ 'node-children': true,
258
+ expanded: this.expanded,
259
+ });
260
+
261
+ return html`<div class="tree-node">
262
+ ${this._renderContent(hasChildren)}
263
+ <div class=${nodeSlotClasses}>
264
+ <slot></slot>
265
+ </div>
266
+ </div>`;
267
+ }
268
+ }
package/src/tree-view/tree-view.scss ADDED
@@ -0,0 +1,12 @@
1
+ @use '../../scss/mixin';
2
+
3
+ @include mixin.base-styles;
4
+
5
+ :host {
6
+ display: block;
7
+ }
8
+
9
+ .tree-view {
10
+ display: block;
11
+ padding: var(--spacing-100, 0.5rem) 0;
12
+ }
package/src/tree-view/tree-view.ts ADDED
@@ -0,0 +1,182 @@
1
+ import { html, LitElement } from 'lit';
2
+ import { property } from 'lit/decorators.js';
3
+ import styles from './tree-view.scss';
4
+ import { TreeNode } from './tree-node.js';
5
+
6
+ /**
7
+ * @label Tree View
8
+ * @tag wc-tree-view
9
+ * @rawTag tree-view
10
+ * @summary A tree view is a hierarchical structure that provides nested levels of navigation. It supports keyboard navigation, single/multi select, and expandable nodes.
11
+ *
12
+ * @example
13
+ * ```html
14
+ * <wc-tree-view>
15
+ * <wc-tree-node label="Parent" expanded>
16
+ * <wc-tree-node label="Child 1"></wc-tree-node>
17
+ * <wc-tree-node label="Child 2"></wc-tree-node>
18
+ * </wc-tree-node>
19
+ * </wc-tree-view>
20
+ * ```
21
+ * @tags navigation
22
+ */
23
+ export class TreeView extends LitElement {
24
+ static styles = [styles];
25
+
26
+ /**
27
+ * The value of the currently selected node.
28
+ */
29
+ @property({ type: String, attribute: 'selected-node', reflect: true })
30
+ selectedNode: string = '';
31
+
32
+ connectedCallback() {
33
+ super.connectedCallback();
34
+ this.addEventListener('tree-node:click', this._onNodeClick as EventListener);
35
+ this.addEventListener('keydown', this._onKeyDown);
36
+ this.setAttribute('role', 'tree');
37
+ }
38
+
39
+ updated(changedProps: Map<string, unknown>) {
40
+ super.updated(changedProps);
41
+
42
+ if (changedProps.has('selectedNode')) {
43
+ this._syncSelectedStateFromProperty();
44
+ }
45
+ }
46
+
47
+ disconnectedCallback() {
48
+ super.disconnectedCallback();
49
+ this.removeEventListener('tree-node:click', this._onNodeClick as EventListener);
50
+ this.removeEventListener('keydown', this._onKeyDown);
51
+ }
52
+
53
+ private _getTopLevelNodes(): TreeNode[] {
54
+ return Array.from(this.children).filter(
55
+ el => el.tagName.toLowerCase() === 'wc-tree-node',
56
+ ) as TreeNode[];
57
+ }
58
+
59
+ private _getAllVisibleNodes(): TreeNode[] {
60
+ const result: TreeNode[] = [];
61
+ const collect = (nodes: TreeNode[]) => {
62
+ nodes.forEach(node => {
63
+ result.push(node);
64
+ if (node.expanded) {
65
+ const children = Array.from(node.children).filter(
66
+ el => el.tagName.toLowerCase() === 'wc-tree-node',
67
+ ) as TreeNode[];
68
+ collect(children);
69
+ }
70
+ });
71
+ };
72
+ collect(this._getTopLevelNodes());
73
+ return result;
74
+ }
75
+
76
+ private _onNodeClick = (event: CustomEvent) => {
77
+ const target = event.target as TreeNode;
78
+ if (target.disabled) return;
79
+
80
+ const value = event.detail?.value ?? target.value ?? target.label;
81
+ this.selectedNode = value;
82
+
83
+ // Update selected state on all nodes
84
+ this._updateSelectedState(value);
85
+
86
+ this.dispatchEvent(
87
+ new CustomEvent('tree-view:change', {
88
+ bubbles: true,
89
+ composed: true,
90
+ detail: { value, node: target },
91
+ }),
92
+ );
93
+ };
94
+
95
+ private _updateSelectedState(selectedValue: string) {
96
+ const allNodes = this._collectAllNodes(this._getTopLevelNodes());
97
+ allNodes.forEach(node => {
98
+ const nodeValue = node.value || node.label;
99
+ // eslint-disable-next-line no-param-reassign
100
+ node.selected = nodeValue === selectedValue;
101
+ });
102
+ }
103
+
104
+ private _clearSelectedState() {
105
+ const allNodes = this._collectAllNodes(this._getTopLevelNodes());
106
+ allNodes.forEach(node => {
107
+ // eslint-disable-next-line no-param-reassign
108
+ node.selected = false;
109
+ });
110
+ }
111
+
112
+ private _syncSelectedStateFromProperty() {
113
+ if (this.selectedNode) {
114
+ this._updateSelectedState(this.selectedNode);
115
+ return;
116
+ }
117
+
118
+ this._clearSelectedState();
119
+ }
120
+
121
+ private _onSlotChange = () => {
122
+ this._syncSelectedStateFromProperty();
123
+ };
124
+
125
+ private _collectAllNodes(nodes: TreeNode[]): TreeNode[] {
126
+ const result: TreeNode[] = [];
127
+ nodes.forEach(node => {
128
+ result.push(node);
129
+ const children = Array.from(node.children).filter(
130
+ el => el.tagName.toLowerCase() === 'wc-tree-node',
131
+ ) as TreeNode[];
132
+ result.push(...this._collectAllNodes(children));
133
+ });
134
+ return result;
135
+ }
136
+
137
+ private _onKeyDown = (event: KeyboardEvent) => {
138
+ const visibleNodes = this._getAllVisibleNodes().filter(n => !n.disabled);
139
+ if (visibleNodes.length === 0) return;
140
+
141
+ const focusedIndex = visibleNodes.findIndex(node => {
142
+ const root = node.shadowRoot;
143
+ return root?.activeElement !== null && root?.activeElement !== undefined;
144
+ });
145
+
146
+ if (focusedIndex === -1 && event.key !== 'Tab') return;
147
+
148
+ switch (event.key) {
149
+ case 'ArrowDown': {
150
+ event.preventDefault();
151
+ const nextIndex = (focusedIndex + 1) % visibleNodes.length;
152
+ visibleNodes[nextIndex]?.focus();
153
+ break;
154
+ }
155
+ case 'ArrowUp': {
156
+ event.preventDefault();
157
+ const prevIndex =
158
+ (focusedIndex - 1 + visibleNodes.length) % visibleNodes.length;
159
+ visibleNodes[prevIndex]?.focus();
160
+ break;
161
+ }
162
+ case 'Home':
163
+ event.preventDefault();
164
+ visibleNodes[0]?.focus();
165
+ break;
166
+ case 'End':
167
+ event.preventDefault();
168
+ visibleNodes[visibleNodes.length - 1]?.focus();
169
+ break;
170
+ default:
171
+ break;
172
+ }
173
+ };
174
+
175
+ render() {
176
+ return html`<div class="tree-view">
177
+ <slot @slotchange=${this._onSlotChange}></slot>
178
+ </div>`;
179
+ }
180
+
181
+ static Node = TreeNode;
182
+ }
package/src/tree-view/wc-tree-view.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { customElement } from 'lit/decorators.js';
2
+ import { TreeView } from './tree-view.js';
3
+ import { TreeNode } from './tree-node.js';
4
+
5
+ @customElement('wc-tree-node')
6
+ export class WcTreeNode extends TreeNode {}
7
+
8
+ @customElement('wc-tree-view')
9
+ export class WcTreeView extends TreeView {}