@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 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1,162 +0,0 @@
1
- import { _ as __decorate, a as attr, b as __metadata, o as observable, v as volatile, h as html, d as __classPrivateFieldGet, f as __classPrivateFieldSet } from './index.js';
2
- import { I as Icon } from './icon.js';
3
- import { w as when } from './when.js';
4
-
5
- var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 17 Aug 2023 11:13:18 GMT\n */\n.message {\n display: flex;\n contain: inline-size;\n font: var(--vvd-typography-base-condensed);\n gap: 4px;\n grid-column: 1/-1;\n}\n.message-text {\n color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n color: var(--_low-ink-color);\n}\n.message-icon {\n font-size: 16px;\n}\n.success-message .message-icon {\n color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n color: var(--vvd-color-alert-500);\n}";
6
-
7
- const ElementInternalsKey = 'ElementInternals';
8
- const supportsElementInternals = () => ElementInternalsKey in window && 'setFormValue' in window[ElementInternalsKey].prototype;
9
- class FormElementHelperText {}
10
- __decorate([attr({
11
- attribute: 'helper-text'
12
- }), __metadata("design:type", String)], FormElementHelperText.prototype, "helperText", void 0);
13
- class FormElementSuccessText {}
14
- __decorate([attr({
15
- attribute: 'success-text'
16
- }), __metadata("design:type", String)], FormElementSuccessText.prototype, "successText", void 0);
17
- class FormElementCharCount {
18
- constructor() {
19
- this.charCount = false;
20
- }
21
- }
22
- __decorate([attr({
23
- attribute: 'char-count',
24
- mode: 'boolean'
25
- }), __metadata("design:type", Object)], FormElementCharCount.prototype, "charCount", void 0);
26
- function formElements(constructor) {
27
- var _Decorated_blurred, _Decorated_handleInvalidEvent;
28
- class Decorated extends constructor {
29
- get errorValidationMessage() {
30
- return this.userValid ? '' : this.validationMessage;
31
- }
32
- constructor(...args) {
33
- super(...args);
34
- this.userValid = true;
35
- _Decorated_blurred.set(this, false);
36
- _Decorated_handleInvalidEvent.set(this, () => {
37
- if (__classPrivateFieldGet(this, _Decorated_blurred, "f") && this.dirtyValue) return;
38
- __classPrivateFieldSet(this, _Decorated_blurred, true, "f");
39
- this.dirtyValue = true;
40
- this.validate();
41
- });
42
- this.validate = () => {
43
- if (supportsElementInternals() && this.proxy instanceof HTMLElement) {
44
- this.setValidity(this.proxy.validity, this.proxy.validationMessage, this.control);
45
- } else {
46
- super.validate();
47
- }
48
- this.userValid = !this.userValid;
49
- if (this.proxy instanceof HTMLElement) {
50
- this.userValid = __classPrivateFieldGet(this, _Decorated_blurred, "f") && this.dirtyValue ? !this.validationMessage : true;
51
- }
52
- };
53
- this.addEventListener('blur', () => {
54
- __classPrivateFieldSet(this, _Decorated_blurred, true, "f");
55
- this.validate();
56
- });
57
- this.addEventListener('focus', () => {
58
- __classPrivateFieldSet(this, _Decorated_blurred, false, "f");
59
- });
60
- this.addEventListener('invalid', () => {
61
- this.proxy.dispatchEvent(new Event('invalid'));
62
- });
63
- }
64
- connectedCallback() {
65
- var _a;
66
- (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
67
- this.proxy.addEventListener('invalid', __classPrivateFieldGet(this, _Decorated_handleInvalidEvent, "f"));
68
- }
69
- disconnectedCallback() {
70
- var _a;
71
- (_a = super.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
72
- this.proxy.removeEventListener('invalid', __classPrivateFieldGet(this, _Decorated_handleInvalidEvent, "f"));
73
- }
74
- }
75
- _Decorated_blurred = new WeakMap(), _Decorated_handleInvalidEvent = new WeakMap();
76
- __decorate([attr, __metadata("design:type", String)], Decorated.prototype, "label", void 0);
77
- __decorate([observable, __metadata("design:type", Object)], Decorated.prototype, "userValid", void 0);
78
- __decorate([volatile, __metadata("design:type", Object), __metadata("design:paramtypes", [])], Decorated.prototype, "errorValidationMessage", null);
79
- return Decorated;
80
- }
81
- function getFeedbackTemplate(messageType, context) {
82
- const MessageTypeMap = {
83
- 'helper': {
84
- 'messageProperty': 'helperText',
85
- 'className': 'helper',
86
- 'iconType': ''
87
- },
88
- 'error': {
89
- 'messageProperty': 'errorValidationMessage',
90
- 'className': 'error',
91
- 'iconType': 'info-line'
92
- },
93
- 'success': {
94
- 'messageProperty': 'successText',
95
- 'className': 'success',
96
- 'iconType': 'check-circle-line'
97
- }
98
- };
99
- const iconTag = context.tagFor(Icon);
100
- const messageTypeConfig = MessageTypeMap[messageType];
101
- const iconType = messageTypeConfig.iconType;
102
- return html`
103
- <style>
104
- ${css_248z}
105
-
106
- </style>
107
- <div class="message ${MessageTypeMap[messageType].className}-message">
108
- ${when(() => iconType, html`
109
- <${iconTag} class="message-icon" name="${iconType}"></${iconTag}>`)}
110
- ${feedbackMessage({
111
- messageProperty: MessageTypeMap[messageType].messageProperty
112
- })}
113
- </div>`;
114
- }
115
- function feedbackMessage({
116
- messageProperty
117
- }) {
118
- return html`
119
- <span class="message-text">${x => x[messageProperty]}</span>
120
- `;
121
- }
122
- function errorText(constructor) {
123
- var _Decorated_shouldValidate, _Decorated_prevSuccessText;
124
- class Decorated extends constructor {
125
- constructor(...args) {
126
- super(...args);
127
- _Decorated_shouldValidate.set(this, true);
128
- _Decorated_prevSuccessText.set(this, '');
129
- this._validate = this.validate;
130
- this.validate = () => {
131
- if (__classPrivateFieldGet(this, _Decorated_shouldValidate, "f")) this._validate();
132
- };
133
- }
134
- errorTextChanged(_, newmsg) {
135
- if (newmsg) {
136
- this.setValidity({
137
- customError: true
138
- }, newmsg, this.control);
139
- __classPrivateFieldSet(this, _Decorated_prevSuccessText, this.successText, "f");
140
- this.successText = '';
141
- this.userValid = !this.userValid;
142
- this.userValid = false;
143
- __classPrivateFieldSet(this, _Decorated_shouldValidate, false, "f");
144
- } else {
145
- this.setValidity({
146
- customError: false
147
- }, '', this.control);
148
- this.successText = __classPrivateFieldGet(this, _Decorated_prevSuccessText, "f");
149
- this.userValid = true;
150
- __classPrivateFieldSet(this, _Decorated_shouldValidate, true, "f");
151
- this._validate();
152
- }
153
- }
154
- }
155
- _Decorated_shouldValidate = new WeakMap(), _Decorated_prevSuccessText = new WeakMap();
156
- __decorate([attr({
157
- attribute: 'error-text'
158
- }), __metadata("design:type", String)], Decorated.prototype, "errorText", void 0);
159
- return Decorated;
160
- }
161
-
162
- export { FormElementSuccessText as F, FormElementHelperText as a, FormElementCharCount as b, errorText as e, formElements as f, getFeedbackTemplate as g };