@vonage/vivid 3.31.0 → 3.34.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 (237) hide show
  1. package/accordion/index.js +5 -5
  2. package/accordion-item/index.js +4 -4
  3. package/action-group/index.js +1 -1
  4. package/alert/index.js +8 -7
  5. package/avatar/index.js +2 -2
  6. package/badge/index.js +2 -2
  7. package/banner/index.js +5 -5
  8. package/breadcrumb/index.js +1 -1
  9. package/breadcrumb-item/index.js +3 -3
  10. package/button/index.js +4 -4
  11. package/calendar/index.js +1 -1
  12. package/calendar-event/index.js +1 -1
  13. package/card/index.js +3 -3
  14. package/checkbox/index.js +7 -4
  15. package/combobox/index.js +10 -9
  16. package/custom-elements.json +996 -29
  17. package/data-grid/index.js +2 -2
  18. package/date-picker/index.js +35 -0
  19. package/dialog/index.js +6 -6
  20. package/divider/index.js +1 -1
  21. package/elevation/index.js +1 -1
  22. package/empty-state/index.js +2 -2
  23. package/fab/index.js +4 -4
  24. package/file-picker/index.js +7 -6
  25. package/focus/index.js +1 -1
  26. package/header/index.js +2 -2
  27. package/icon/index.js +1 -1
  28. package/index.d.ts +1 -0
  29. package/index.js +68 -66
  30. package/layout/index.js +1 -1
  31. package/lib/button/button.d.ts +2 -0
  32. package/lib/calendar/calendar.d.ts +1 -1
  33. package/lib/components.d.ts +20 -19
  34. package/lib/date-picker/calendar/calendarGrid.d.ts +17 -0
  35. package/lib/date-picker/calendar/dateStr.d.ts +7 -0
  36. package/lib/date-picker/calendar/month.d.ts +12 -0
  37. package/lib/date-picker/calendar/monthPickerGrid.d.ts +10 -0
  38. package/lib/date-picker/calendar/presentationDate.d.ts +4 -0
  39. package/lib/date-picker/calendar/year.d.ts +2 -0
  40. package/lib/date-picker/date-picker.d.ts +18 -0
  41. package/lib/date-picker/date-picker.template.d.ts +4 -0
  42. package/lib/date-picker/definition.d.ts +3 -0
  43. package/lib/date-picker/locale.d.ts +21 -0
  44. package/lib/icon/icon.d.ts +0 -1
  45. package/lib/listbox/listbox.d.ts +9 -1
  46. package/lib/select/select.d.ts +4 -2
  47. package/lib/text-field/text-field.d.ts +1 -0
  48. package/listbox/index.js +22 -17
  49. package/locales/en-GB.d.ts +3 -0
  50. package/locales/en-GB.js +59 -0
  51. package/locales/en-US.d.ts +3 -0
  52. package/locales/en-US.js +59 -0
  53. package/locales/ja-JP.d.ts +3 -0
  54. package/locales/ja-JP.js +59 -0
  55. package/locales/zh-CN.d.ts +3 -0
  56. package/locales/zh-CN.js +59 -0
  57. package/menu/index.js +8 -8
  58. package/menu-item/index.js +4 -4
  59. package/nav/index.js +1 -1
  60. package/nav-disclosure/index.js +3 -3
  61. package/nav-item/index.js +3 -3
  62. package/note/index.js +4 -4
  63. package/number-field/index.js +8 -7
  64. package/option/index.js +5 -4
  65. package/package.json +2 -15
  66. package/pagination/index.js +5 -5
  67. package/popup/index.js +6 -6
  68. package/progress/index.js +1 -1
  69. package/progress-ring/index.js +1 -1
  70. package/radio/index.js +2 -2
  71. package/radio-group/index.js +1 -1
  72. package/select/index.js +10 -9
  73. package/shared/affix.js +25 -9
  74. package/shared/apply-mixins.js +1 -1
  75. package/shared/breadcrumb-item.js +5 -5
  76. package/shared/button.js +13 -13
  77. package/shared/calendar-event.js +36 -16
  78. package/shared/definition.js +133 -194
  79. package/shared/definition10.js +225 -40
  80. package/shared/definition11.js +36 -32
  81. package/shared/definition12.js +763 -98
  82. package/shared/definition13.js +125 -89
  83. package/shared/definition14.js +207 -27
  84. package/shared/definition15.js +710 -731
  85. package/shared/definition16.js +1289 -47
  86. package/shared/definition17.js +6113 -93
  87. package/shared/definition18.js +242 -164
  88. package/shared/definition19.js +47 -692
  89. package/shared/definition2.js +199 -117
  90. package/shared/definition20.js +59 -1671
  91. package/shared/definition21.js +95 -255
  92. package/shared/definition22.js +2218 -1167
  93. package/shared/definition23.js +57 -219
  94. package/shared/definition24.js +27 -68
  95. package/shared/definition25.js +54 -38
  96. package/shared/definition26.js +395 -70
  97. package/shared/definition27.js +381 -2223
  98. package/shared/definition28.js +85 -44
  99. package/shared/definition29.js +27 -40
  100. package/shared/definition3.js +61 -24
  101. package/shared/definition30.js +13 -427
  102. package/shared/definition31.js +49 -360
  103. package/shared/definition32.js +466 -13
  104. package/shared/definition33.js +273 -63
  105. package/shared/definition34.js +195 -25
  106. package/shared/definition35.js +86 -35
  107. package/shared/definition36.js +66 -427
  108. package/shared/definition37.js +430 -190
  109. package/shared/definition38.js +34 -52
  110. package/shared/definition39.js +683 -31
  111. package/shared/definition4.js +157 -12
  112. package/shared/definition40.js +97 -422
  113. package/shared/definition41.js +473 -543
  114. package/shared/definition42.js +122 -73
  115. package/shared/definition43.js +103 -502
  116. package/shared/definition44.js +23 -101
  117. package/shared/definition45.js +76 -126
  118. package/shared/definition46.js +494 -48
  119. package/shared/definition47.js +23 -23
  120. package/shared/definition48.js +126 -476
  121. package/shared/definition49.js +275 -98
  122. package/shared/definition5.js +71 -36
  123. package/shared/definition50.js +157 -16
  124. package/shared/definition51.js +133 -263
  125. package/shared/definition52.js +131 -115
  126. package/shared/definition53.js +85 -120
  127. package/shared/definition54.js +295 -111
  128. package/shared/definition55.js +12 -71
  129. package/shared/definition56.js +39 -295
  130. package/shared/definition57.js +181 -0
  131. package/shared/definition6.js +56 -111
  132. package/shared/definition7.js +119 -187
  133. package/shared/definition8.js +58 -23
  134. package/shared/definition9.js +92 -66
  135. package/shared/focus.js +2 -1
  136. package/shared/focus2.js +1 -1
  137. package/shared/form-associated.js +2 -2
  138. package/shared/icon.js +48 -27
  139. package/shared/index.js +7 -27
  140. package/shared/index2.js +202 -0
  141. package/shared/key-codes.js +1 -1
  142. package/shared/listbox.js +88 -11
  143. package/shared/localization/Locale.d.ts +4 -0
  144. package/shared/localization/index.d.ts +7 -0
  145. package/shared/patterns/form-elements/form-elements.d.ts +4 -4
  146. package/shared/patterns/index.d.ts +1 -0
  147. package/shared/patterns/localized.d.ts +4 -0
  148. package/shared/radio.js +23 -7
  149. package/shared/repeat.js +1 -1
  150. package/shared/text-anchor.js +21 -4
  151. package/shared/text-anchor.template.js +37 -40
  152. package/shared/text-field.js +2 -2
  153. package/shared/text-field2.js +15 -15
  154. package/shared/tree-item.js +12 -12
  155. package/side-drawer/index.js +1 -1
  156. package/slider/index.js +2 -2
  157. package/split-button/index.js +3 -3
  158. package/style.css +6097 -0
  159. package/styles/core/all.css +25 -3
  160. package/styles/core/theme.css +1 -1
  161. package/styles/core/typography.css +25 -3
  162. package/styles/tokens/theme-dark.css +4 -4
  163. package/styles/tokens/theme-light.css +4 -4
  164. package/styles/tokens/vivid-2-compat.css +2 -2
  165. package/switch/index.js +5 -4
  166. package/tab/index.js +3 -3
  167. package/tab-panel/index.js +1 -1
  168. package/tabs/index.js +5 -5
  169. package/tag/index.js +3 -3
  170. package/tag-group/index.js +1 -1
  171. package/text-anchor/index.js +1 -1
  172. package/text-area/index.js +5 -4
  173. package/text-field/index.js +5 -4
  174. package/toggletip/index.js +7 -7
  175. package/tooltip/index.js +7 -7
  176. package/tree-item/index.js +3 -3
  177. package/tree-view/index.js +1 -1
  178. package/vivid.api.json +137 -0
  179. package/lib/accordion/index.d.ts +0 -1
  180. package/lib/accordion-item/index.d.ts +0 -1
  181. package/lib/action-group/index.d.ts +0 -1
  182. package/lib/alert/index.d.ts +0 -1
  183. package/lib/avatar/index.d.ts +0 -1
  184. package/lib/badge/index.d.ts +0 -1
  185. package/lib/banner/index.d.ts +0 -1
  186. package/lib/breadcrumb/index.d.ts +0 -1
  187. package/lib/breadcrumb-item/index.d.ts +0 -1
  188. package/lib/button/index.d.ts +0 -1
  189. package/lib/calendar/index.d.ts +0 -1
  190. package/lib/calendar-event/index.d.ts +0 -1
  191. package/lib/card/index.d.ts +0 -1
  192. package/lib/checkbox/index.d.ts +0 -1
  193. package/lib/combobox/index.d.ts +0 -1
  194. package/lib/data-grid/index.d.ts +0 -1
  195. package/lib/dialog/index.d.ts +0 -1
  196. package/lib/divider/index.d.ts +0 -1
  197. package/lib/elevation/index.d.ts +0 -1
  198. package/lib/empty-state/index.d.ts +0 -1
  199. package/lib/fab/index.d.ts +0 -1
  200. package/lib/file-picker/index.d.ts +0 -1
  201. package/lib/focus/index.d.ts +0 -1
  202. package/lib/header/index.d.ts +0 -1
  203. package/lib/icon/index.d.ts +0 -1
  204. package/lib/layout/index.d.ts +0 -1
  205. package/lib/listbox/index.d.ts +0 -1
  206. package/lib/menu/index.d.ts +0 -1
  207. package/lib/menu-item/index.d.ts +0 -1
  208. package/lib/nav/index.d.ts +0 -1
  209. package/lib/nav-disclosure/index.d.ts +0 -1
  210. package/lib/nav-item/index.d.ts +0 -1
  211. package/lib/note/index.d.ts +0 -1
  212. package/lib/number-field/index.d.ts +0 -1
  213. package/lib/option/index.d.ts +0 -1
  214. package/lib/pagination/index.d.ts +0 -1
  215. package/lib/popup/index.d.ts +0 -1
  216. package/lib/progress/index.d.ts +0 -1
  217. package/lib/progress-ring/index.d.ts +0 -1
  218. package/lib/radio/index.d.ts +0 -1
  219. package/lib/radio-group/index.d.ts +0 -1
  220. package/lib/select/index.d.ts +0 -1
  221. package/lib/side-drawer/index.d.ts +0 -1
  222. package/lib/slider/index.d.ts +0 -1
  223. package/lib/split-button/index.d.ts +0 -1
  224. package/lib/switch/index.d.ts +0 -1
  225. package/lib/tab/index.d.ts +0 -1
  226. package/lib/tab-panel/index.d.ts +0 -1
  227. package/lib/tabs/index.d.ts +0 -1
  228. package/lib/tag/index.d.ts +0 -1
  229. package/lib/tag-group/index.d.ts +0 -1
  230. package/lib/text-anchor/index.d.ts +0 -1
  231. package/lib/text-area/index.d.ts +0 -1
  232. package/lib/text-field/index.d.ts +0 -1
  233. package/lib/toggletip/index.d.ts +0 -1
  234. package/lib/tooltip/index.d.ts +0 -1
  235. package/lib/tree-item/index.d.ts +0 -1
  236. package/lib/tree-view/index.d.ts +0 -1
  237. package/shared/form-elements.js +0 -162
@@ -1,205 +1,445 @@
1
- import { a as Size, S as Shape, B as Button, b as buttonRegistries } from './definition7.js';
2
- import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, o as observable, v as volatile, h as html, r as registerFactory } from './index.js';
1
+ import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
2
+ import { D as Direction, g as getDirection } from './direction.js';
3
+ import { h as keyArrowRight, i as keyArrowLeft, A as ArrowKeys, e as keyArrowUp, d as keyArrowDown, k as keyEnter } from './key-codes.js';
4
+ import { O as Orientation } from './aria.js';
5
+ import { R as Radio } from './radio.js';
6
+ import { O as Orientation$1 } from './aria2.js';
3
7
  import { e as elements } from './node-observation.js';
4
- import { r as ref } from './ref.js';
5
- import { c as children } from './children.js';
6
- import { r as repeat } from './repeat.js';
7
- import { c as classNames } from './class-names.js';
8
8
  import { w as when } from './when.js';
9
+ import { s as slotted } from './slotted.js';
9
10
 
10
- var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 17 Aug 2023 11:13:18 GMT\n */\n.control {\n display: inline-flex;\n justify-content: space-between;\n}\n.control:not(.shape-pill) {\n border-radius: 4px;\n}\n.control.shape-pill {\n border-radius: 14px;\n}\n\n.buttons-wrapper {\n display: flex;\n column-gap: 4px;\n}\n\n.dots {\n align-self: center;\n text-align: center;\n}\n.dots:not(.size-super-condensed) {\n font: var(--vvd-typography-base-bold);\n}\n.dots.size-super-condensed {\n font: var(--vvd-typography-base-condensed-bold);\n inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.dots.size-condensed {\n inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.dots.size-normal {\n inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}";
11
-
12
- const MAX_DIGITS_AND_PLACEHOLDERS = 7;
13
- const totalConverter = {
14
- fromView: value => parseInt(value, 10),
15
- toView: value => value.toString()
16
- };
17
- class Pagination extends FoundationElement {
18
- get pagesList() {
19
- return new Array(this.total < MAX_DIGITS_AND_PLACEHOLDERS ? this.total : MAX_DIGITS_AND_PLACEHOLDERS).fill(0).map((_, i, arr) => {
20
- if (i === 0) return 1;
21
- if (i === arr.length - 1) return this.total;
22
- if (this.selectedIndex !== undefined && this.total > MAX_DIGITS_AND_PLACEHOLDERS) {
23
- if (this.selectedIndex < 4) {
24
- if (i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return '...';
11
+ /**
12
+ * An Radio Group Custom HTML Element.
13
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radiogroup | ARIA radiogroup }.
14
+ *
15
+ * @slot label - The slot for the label
16
+ * @slot - The default slot for radio buttons
17
+ * @csspart positioning-region - The positioning region for laying out the radios
18
+ * @fires change - Fires a custom 'change' event when the value changes
19
+ *
20
+ * @public
21
+ */
22
+ let RadioGroup$1 = class RadioGroup extends FoundationElement {
23
+ constructor() {
24
+ super(...arguments);
25
+ /**
26
+ * The orientation of the group
27
+ *
28
+ * @public
29
+ * @remarks
30
+ * HTML Attribute: orientation
31
+ */
32
+ this.orientation = Orientation.horizontal;
33
+ this.radioChangeHandler = (e) => {
34
+ const changedRadio = e.target;
35
+ if (changedRadio.checked) {
36
+ this.slottedRadioButtons.forEach((radio) => {
37
+ if (radio !== changedRadio) {
38
+ radio.checked = false;
39
+ if (!this.isInsideFoundationToolbar) {
40
+ radio.setAttribute("tabindex", "-1");
41
+ }
42
+ }
43
+ });
44
+ this.selectedRadio = changedRadio;
45
+ this.value = changedRadio.value;
46
+ changedRadio.setAttribute("tabindex", "0");
47
+ this.focusedRadio = changedRadio;
48
+ }
49
+ e.stopPropagation();
50
+ };
51
+ this.moveToRadioByIndex = (group, index) => {
52
+ const radio = group[index];
53
+ if (!this.isInsideToolbar) {
54
+ radio.setAttribute("tabindex", "0");
55
+ if (radio.readOnly) {
56
+ this.slottedRadioButtons.forEach((nextRadio) => {
57
+ if (nextRadio !== radio) {
58
+ nextRadio.setAttribute("tabindex", "-1");
59
+ }
60
+ });
61
+ }
62
+ else {
63
+ radio.checked = true;
64
+ this.selectedRadio = radio;
65
+ }
66
+ }
67
+ this.focusedRadio = radio;
68
+ radio.focus();
69
+ };
70
+ this.moveRightOffGroup = () => {
71
+ var _a;
72
+ (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
73
+ };
74
+ this.moveLeftOffGroup = () => {
75
+ var _a;
76
+ (_a = this.previousElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
77
+ };
78
+ /**
79
+ * @internal
80
+ */
81
+ this.focusOutHandler = (e) => {
82
+ const group = this.slottedRadioButtons;
83
+ const radio = e.target;
84
+ const index = radio !== null ? group.indexOf(radio) : 0;
85
+ const focusedIndex = this.focusedRadio
86
+ ? group.indexOf(this.focusedRadio)
87
+ : -1;
88
+ if ((focusedIndex === 0 && index === focusedIndex) ||
89
+ (focusedIndex === group.length - 1 && focusedIndex === index)) {
90
+ if (!this.selectedRadio) {
91
+ this.focusedRadio = group[0];
92
+ this.focusedRadio.setAttribute("tabindex", "0");
93
+ group.forEach((nextRadio) => {
94
+ if (nextRadio !== this.focusedRadio) {
95
+ nextRadio.setAttribute("tabindex", "-1");
96
+ }
97
+ });
98
+ }
99
+ else {
100
+ this.focusedRadio = this.selectedRadio;
101
+ if (!this.isInsideFoundationToolbar) {
102
+ this.selectedRadio.setAttribute("tabindex", "0");
103
+ group.forEach((nextRadio) => {
104
+ if (nextRadio !== this.selectedRadio) {
105
+ nextRadio.setAttribute("tabindex", "-1");
106
+ }
107
+ });
108
+ }
109
+ }
110
+ }
111
+ return true;
112
+ };
113
+ /**
114
+ * @internal
115
+ */
116
+ this.clickHandler = (e) => {
117
+ const radio = e.target;
118
+ if (radio) {
119
+ const group = this.slottedRadioButtons;
120
+ if (radio.checked || group.indexOf(radio) === 0) {
121
+ radio.setAttribute("tabindex", "0");
122
+ this.selectedRadio = radio;
123
+ }
124
+ else {
125
+ radio.setAttribute("tabindex", "-1");
126
+ this.selectedRadio = null;
127
+ }
128
+ this.focusedRadio = radio;
129
+ }
130
+ e.preventDefault();
131
+ };
132
+ this.shouldMoveOffGroupToTheRight = (index, group, key) => {
133
+ return index === group.length && this.isInsideToolbar && key === keyArrowRight;
134
+ };
135
+ this.shouldMoveOffGroupToTheLeft = (group, key) => {
136
+ const index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
137
+ return index < 0 && this.isInsideToolbar && key === keyArrowLeft;
138
+ };
139
+ this.checkFocusedRadio = () => {
140
+ if (this.focusedRadio !== null &&
141
+ !this.focusedRadio.readOnly &&
142
+ !this.focusedRadio.checked) {
143
+ this.focusedRadio.checked = true;
144
+ this.focusedRadio.setAttribute("tabindex", "0");
145
+ this.focusedRadio.focus();
146
+ this.selectedRadio = this.focusedRadio;
147
+ }
148
+ };
149
+ this.moveRight = (e) => {
150
+ const group = this.slottedRadioButtons;
151
+ let index = 0;
152
+ index = this.focusedRadio ? group.indexOf(this.focusedRadio) + 1 : 1;
153
+ if (this.shouldMoveOffGroupToTheRight(index, group, e.key)) {
154
+ this.moveRightOffGroup();
155
+ return;
156
+ }
157
+ else if (index === group.length) {
158
+ index = 0;
159
+ }
160
+ /* looping to get to next radio that is not disabled */
161
+ /* matching native radio/radiogroup which does not select an item if there is only 1 in the group */
162
+ while (index < group.length && group.length > 1) {
163
+ if (!group[index].disabled) {
164
+ this.moveToRadioByIndex(group, index);
165
+ break;
166
+ }
167
+ else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
168
+ break;
169
+ }
170
+ else if (index + 1 >= group.length) {
171
+ if (this.isInsideToolbar) {
172
+ break;
173
+ }
174
+ else {
175
+ index = 0;
176
+ }
177
+ }
178
+ else {
179
+ index += 1;
180
+ }
181
+ }
182
+ };
183
+ this.moveLeft = (e) => {
184
+ const group = this.slottedRadioButtons;
185
+ let index = 0;
186
+ index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
187
+ index = index < 0 ? group.length - 1 : index;
188
+ if (this.shouldMoveOffGroupToTheLeft(group, e.key)) {
189
+ this.moveLeftOffGroup();
190
+ return;
191
+ }
192
+ /* looping to get to next radio that is not disabled */
193
+ while (index >= 0 && group.length > 1) {
194
+ if (!group[index].disabled) {
195
+ this.moveToRadioByIndex(group, index);
196
+ break;
197
+ }
198
+ else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
199
+ break;
200
+ }
201
+ else if (index - 1 < 0) {
202
+ index = group.length - 1;
203
+ }
204
+ else {
205
+ index -= 1;
206
+ }
207
+ }
208
+ };
209
+ /**
210
+ * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
211
+ * navigation is different when there is an ancestor with role='toolbar'
212
+ *
213
+ * @internal
214
+ */
215
+ this.keydownHandler = (e) => {
216
+ const key = e.key;
217
+ if (key in ArrowKeys && this.isInsideFoundationToolbar) {
218
+ return true;
219
+ }
220
+ switch (key) {
221
+ case keyEnter: {
222
+ this.checkFocusedRadio();
223
+ break;
224
+ }
225
+ case keyArrowRight:
226
+ case keyArrowDown: {
227
+ if (this.direction === Direction.ltr) {
228
+ this.moveRight(e);
229
+ }
230
+ else {
231
+ this.moveLeft(e);
232
+ }
233
+ break;
234
+ }
235
+ case keyArrowLeft:
236
+ case keyArrowUp: {
237
+ if (this.direction === Direction.ltr) {
238
+ this.moveLeft(e);
239
+ }
240
+ else {
241
+ this.moveRight(e);
242
+ }
243
+ break;
244
+ }
245
+ default: {
246
+ return true;
247
+ }
248
+ }
249
+ };
250
+ }
251
+ readOnlyChanged() {
252
+ if (this.slottedRadioButtons !== undefined) {
253
+ this.slottedRadioButtons.forEach((radio) => {
254
+ if (this.readOnly) {
255
+ radio.readOnly = true;
256
+ }
257
+ else {
258
+ radio.readOnly = false;
259
+ }
260
+ });
25
261
  }
26
- if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
27
- if (i > 1 && i < MAX_DIGITS_AND_PLACEHOLDERS - 2) return this.selectedIndex + (i - 2);
28
- if (i === 1 || i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return '...';
262
+ }
263
+ disabledChanged() {
264
+ if (this.slottedRadioButtons !== undefined) {
265
+ this.slottedRadioButtons.forEach((radio) => {
266
+ if (this.disabled) {
267
+ radio.disabled = true;
268
+ }
269
+ else {
270
+ radio.disabled = false;
271
+ }
272
+ });
29
273
  }
30
- if (this.selectedIndex > this.total - 5) {
31
- if (i > 1) return this.total - (6 - i);
32
- if (i === 1) return '...';
274
+ }
275
+ nameChanged() {
276
+ if (this.slottedRadioButtons) {
277
+ this.slottedRadioButtons.forEach((radio) => {
278
+ radio.setAttribute("name", this.name);
279
+ });
280
+ }
281
+ }
282
+ valueChanged() {
283
+ if (this.slottedRadioButtons) {
284
+ this.slottedRadioButtons.forEach((radio) => {
285
+ if (radio.value === this.value) {
286
+ radio.checked = true;
287
+ this.selectedRadio = radio;
288
+ }
289
+ });
290
+ }
291
+ this.$emit("change");
292
+ }
293
+ slottedRadioButtonsChanged(oldValue, newValue) {
294
+ if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
295
+ this.setupRadioButtons();
296
+ }
297
+ }
298
+ get parentToolbar() {
299
+ return this.closest('[role="toolbar"]');
300
+ }
301
+ get isInsideToolbar() {
302
+ var _a;
303
+ return ((_a = this.parentToolbar) !== null && _a !== void 0 ? _a : false);
304
+ }
305
+ get isInsideFoundationToolbar() {
306
+ var _a;
307
+ return !!((_a = this.parentToolbar) === null || _a === void 0 ? void 0 : _a["$fastController"]);
308
+ }
309
+ /**
310
+ * @internal
311
+ */
312
+ connectedCallback() {
313
+ super.connectedCallback();
314
+ this.direction = getDirection(this);
315
+ this.setupRadioButtons();
316
+ }
317
+ disconnectedCallback() {
318
+ this.slottedRadioButtons.forEach((radio) => {
319
+ radio.removeEventListener("change", this.radioChangeHandler);
320
+ });
321
+ }
322
+ setupRadioButtons() {
323
+ const checkedRadios = this.slottedRadioButtons.filter((radio) => {
324
+ return radio.hasAttribute("checked");
325
+ });
326
+ const numberOfCheckedRadios = checkedRadios ? checkedRadios.length : 0;
327
+ if (numberOfCheckedRadios > 1) {
328
+ const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
329
+ lastCheckedRadio.checked = true;
330
+ }
331
+ let foundMatchingVal = false;
332
+ this.slottedRadioButtons.forEach((radio) => {
333
+ if (this.name !== undefined) {
334
+ radio.setAttribute("name", this.name);
335
+ }
336
+ if (this.disabled) {
337
+ radio.disabled = true;
338
+ }
339
+ if (this.readOnly) {
340
+ radio.readOnly = true;
341
+ }
342
+ if (this.value && this.value === radio.value) {
343
+ this.selectedRadio = radio;
344
+ this.focusedRadio = radio;
345
+ radio.checked = true;
346
+ radio.setAttribute("tabindex", "0");
347
+ foundMatchingVal = true;
348
+ }
349
+ else {
350
+ if (!this.isInsideFoundationToolbar) {
351
+ radio.setAttribute("tabindex", "-1");
352
+ }
353
+ radio.checked = false;
354
+ }
355
+ radio.addEventListener("change", this.radioChangeHandler);
356
+ });
357
+ if (this.value === undefined && this.slottedRadioButtons.length > 0) {
358
+ const checkedRadios = this.slottedRadioButtons.filter((radio) => {
359
+ return radio.hasAttribute("checked");
360
+ });
361
+ const numberOfCheckedRadios = checkedRadios !== null ? checkedRadios.length : 0;
362
+ if (numberOfCheckedRadios > 0 && !foundMatchingVal) {
363
+ const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
364
+ lastCheckedRadio.checked = true;
365
+ this.focusedRadio = lastCheckedRadio;
366
+ lastCheckedRadio.setAttribute("tabindex", "0");
367
+ }
368
+ else {
369
+ this.slottedRadioButtons[0].setAttribute("tabindex", "0");
370
+ this.focusedRadio = this.slottedRadioButtons[0];
371
+ }
33
372
  }
34
- }
35
- return i + 1;
36
- });
37
- }
38
- constructor() {
39
- super();
40
- this.navIcons = false;
41
- this.total = 0;
42
- this.selectedIndex = 0;
43
- this.addEventListener('tabpressed', e => {
44
- const {
45
- value: currentLabel,
46
- shiftKey
47
- } = e.detail;
48
- const index = this.paginationButtons.findIndex(button => Number(button.label) === currentLabel);
49
- const focusDirection = shiftKey ? -1 : 1;
50
- const newIndex = index + focusDirection;
51
- if (newIndex < 0) {
52
- return this.prevButton.focus();
53
- }
54
- if (newIndex > this.paginationButtons.length - 1) {
55
- return this.nextButton.focus();
56
- }
57
- this.paginationButtons && this.paginationButtons[index + focusDirection].focus();
58
- });
59
- }
60
- totalChanged(_, newValue) {
61
- if (newValue < 0) {
62
- this.total = 0;
63
373
  }
64
- this.selectedIndex = 0;
65
- }
66
- selectedIndexChanged(oldValue, newValue) {
67
- if (oldValue === undefined) return;
68
- this.$emit('pagination-change', {
69
- selectedIndex: newValue,
70
- total: this.total,
71
- oldIndex: oldValue
72
- });
73
- }
74
- paginationButtonsChanged(_, newValue) {
75
- newValue.forEach(button => {
76
- button.shadowRoot.querySelector('button').classList.add('icon-only');
77
- });
78
- }
79
- }
80
- __decorate([attr, __metadata("design:type", String)], Pagination.prototype, "size", void 0);
81
- __decorate([attr, __metadata("design:type", String)], Pagination.prototype, "shape", void 0);
82
- __decorate([observable, __metadata("design:type", Array)], Pagination.prototype, "paginationButtons", void 0);
83
- __decorate([observable, __metadata("design:type", Function)], Pagination.prototype, "prevButton", void 0);
84
- __decorate([observable, __metadata("design:type", Function)], Pagination.prototype, "nextButton", void 0);
85
- __decorate([attr({
86
- attribute: 'nav-icons',
87
- mode: 'boolean'
88
- }), __metadata("design:type", Object)], Pagination.prototype, "navIcons", void 0);
89
- __decorate([volatile, __metadata("design:type", Object), __metadata("design:paramtypes", [])], Pagination.prototype, "pagesList", null);
90
- __decorate([attr({
91
- mode: 'reflect',
92
- converter: totalConverter
93
- }), __metadata("design:type", Number)], Pagination.prototype, "total", void 0);
94
- __decorate([attr({
95
- mode: 'reflect',
96
- converter: totalConverter,
97
- attribute: 'selected-index'
98
- }), __metadata("design:type", Object)], Pagination.prototype, "selectedIndex", void 0);
99
-
100
- const ALLOWED_SIZES = [Size.SuperCondensed, Size.Condensed, Size.Normal];
101
- const ALLOWED_SHAPES = [Shape.Rounded, Shape.Pill];
102
- const handleSelection = (value, {
103
- parent: x
104
- }) => {
105
- return x.selectedIndex = Number(value) - 1;
106
374
  };
107
- const handleKeyDown = (value, {
108
- event,
109
- parent
110
- }) => {
111
- if (event.key === ' ' || event.key === 'Enter') {
112
- handleSelection(value, {
113
- parent
114
- });
115
- }
116
- if (event.key === 'Tab') {
117
- event.target.dispatchEvent(new CustomEvent('tabpressed', {
118
- detail: {
119
- value,
120
- shiftKey: event.shiftKey
121
- },
122
- bubbles: true,
123
- composed: true
124
- }));
125
- }
375
+ __decorate([
376
+ attr({ attribute: "readonly", mode: "boolean" })
377
+ ], RadioGroup$1.prototype, "readOnly", void 0);
378
+ __decorate([
379
+ attr({ attribute: "disabled", mode: "boolean" })
380
+ ], RadioGroup$1.prototype, "disabled", void 0);
381
+ __decorate([
382
+ attr
383
+ ], RadioGroup$1.prototype, "name", void 0);
384
+ __decorate([
385
+ attr
386
+ ], RadioGroup$1.prototype, "value", void 0);
387
+ __decorate([
388
+ attr
389
+ ], RadioGroup$1.prototype, "orientation", void 0);
390
+ __decorate([
391
+ observable
392
+ ], RadioGroup$1.prototype, "childItems", void 0);
393
+ __decorate([
394
+ observable
395
+ ], RadioGroup$1.prototype, "slottedRadioButtons", void 0);
396
+
397
+ const styles = "/**\n * Do not edit directly\n * Generated on Mon, 04 Sep 2023 12:44:18 GMT\n */\n.positioning-region {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n.positioning-region.vertical {\n flex-direction: column;\n}\nlabel + .positioning-region {\n margin-block-start: 8px;\n}\n\nlabel {\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base);\n}";
398
+
399
+ var __defProp = Object.defineProperty;
400
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
401
+ var __decorateClass = (decorators, target, key, kind) => {
402
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
403
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
404
+ if (decorator = decorators[i])
405
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
406
+ if (kind && result)
407
+ __defProp(target, key, result);
408
+ return result;
126
409
  };
127
- const getClasses = _ => classNames('control');
128
- function getButtonAppearance(value, {
129
- parent
130
- }) {
131
- return parent.selectedIndex === Number(value) - 1 ? 'filled' : 'ghost';
410
+ class RadioGroup extends RadioGroup$1 {
132
411
  }
133
- const paginationButtonRenderer = buttonTag => html`
134
- ${when(value => value !== '...', html`
135
- <${buttonTag} class="vwc-pagination-button"
136
- label="${value => value}"
137
- appearance="${getButtonAppearance}"
138
- size="${(_, {
139
- parent: x
140
- }) => getPaginationSize(x)}"
141
- shape="${(_, {
142
- parent: x
143
- }) => getPaginationShape(x)}"
144
- tabindex="0"
145
- aria-pressed="${(value, {
146
- parent
147
- }) => parent.selectedIndex === Number(value) - 1}"
148
- @click="${handleSelection}"
149
- @keydown="${handleKeyDown}"
150
- </${buttonTag}>
151
- `)}
152
- ${when(value => value === '...', html`<div class="dots size-${getPaginationSize} shape-${getPaginationShape}">...</div>`)}`;
153
- const getPaginationSize = x => {
154
- if (!x.size || !ALLOWED_SIZES.includes(x.size)) {
155
- return Size.SuperCondensed;
156
- }
157
- return x.size;
158
- };
159
- const getPaginationShape = x => {
160
- if (!x.shape || !ALLOWED_SHAPES.includes(x.shape)) {
161
- return Shape.Rounded;
162
- }
163
- return x.shape;
164
- };
165
- const PaginationTemplate = context => {
166
- const buttonTag = context.tagFor(Button);
167
- const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
412
+ __decorateClass([
413
+ attr
414
+ ], RadioGroup.prototype, "label", 2);
415
+
416
+ const RadioGroupTemplate = (context) => {
168
417
  return html`
169
- <div class="${getClasses}">
170
- <${buttonTag} class="prev-button" ${ref('prevButton')}
171
- label="${x => !x.navIcons ? 'Previous' : null}"
172
- icon="${x => x.navIcons ? 'chevron-left-line' : null}"
173
- size="${getPaginationSize}"
174
- shape="${getPaginationShape}"
175
- ?disabled="${x => x.total === 0 || x.selectedIndex === 0}"
176
- @click="${x => x.selectedIndex !== undefined && x.selectedIndex--}"
177
- ></${buttonTag}>
178
- <div id="buttons-wrapper" class="buttons-wrapper" ${children({
179
- property: 'paginationButtons',
180
- filter: elements(buttonTag)
181
- })}>
182
- ${repeat(x => x.pagesList, paginationButtonTemplate, {
183
- positioning: true
184
- })}
185
- </div>
186
- <${buttonTag} class="next-button" ${ref('nextButton')}
187
- label="${x => !x.navIcons ? 'Next' : null}"
188
- icon="${x => x.navIcons ? 'chevron-right-line' : null}"
189
- size="${getPaginationSize}"
190
- shape="${getPaginationShape}"
191
- ?disabled="${x => x.total === 0 || x.selectedIndex === x.total - 1}"
192
- @click="${x => x.selectedIndex !== undefined && x.selectedIndex++}"
193
- ></${buttonTag}>
194
- </div>`;
418
+ <template
419
+ role="radiogroup"
420
+ aria-disabled="${(x) => x.disabled}"
421
+ aria-readonly="${(x) => x.readOnly}"
422
+ aria-orientation="${(x) => x.orientation}"
423
+ @click="${(x, c) => x.clickHandler(c.event)}"
424
+ @keydown="${(x, c) => x.keydownHandler(c.event)}"
425
+ @focusout="${(x, c) => x.focusOutHandler(c.event)}"
426
+ >
427
+
428
+ ${when((x) => x.label, html`<label>${(x) => x.label}</label>`)}
429
+
430
+ <div class="positioning-region ${(x) => x.orientation === Orientation$1.horizontal ? "horizontal" : "vertical"}">
431
+ <slot ${slotted({ property: "slottedRadioButtons", filter: elements(context.tagFor(Radio)) })}></slot>
432
+ </div>
433
+ </template>
434
+ `;
195
435
  };
196
436
 
197
- const paginationDefinition = Pagination.compose({
198
- baseName: 'pagination',
199
- template: PaginationTemplate,
200
- styles: css_248z
437
+ const radioGroupDefinition = RadioGroup.compose({
438
+ baseName: "radio-group",
439
+ template: RadioGroupTemplate,
440
+ styles
201
441
  });
202
- const paginationRegistries = [paginationDefinition(), buttonRegistries];
203
- const registerPagination = registerFactory(paginationRegistries);
442
+ const radioGroupRegistries = [radioGroupDefinition()];
443
+ const registerRadioGroup = registerFactory(radioGroupRegistries);
204
444
 
205
- export { paginationRegistries as a, paginationDefinition as p, registerPagination as r };
445
+ export { radioGroupRegistries as a, registerRadioGroup as b, radioGroupDefinition as r };