@warp-ds/elements 2.3.0-next.9 → 2.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 (282) hide show
  1. package/dist/custom-elements.json +156 -3728
  2. package/dist/index.d.ts +34 -717
  3. package/dist/packages/affix/index.js.map +2 -2
  4. package/dist/packages/alert/index.js.map +2 -2
  5. package/dist/packages/attention/attention.stories.js +4 -1
  6. package/dist/packages/attention/index.js +55 -19
  7. package/dist/packages/attention/index.js.map +3 -3
  8. package/dist/packages/attention/styles.js +1 -1
  9. package/dist/packages/badge/index.js.map +2 -2
  10. package/dist/packages/box/index.js.map +2 -2
  11. package/dist/packages/breadcrumbs/index.js.map +2 -2
  12. package/dist/packages/button/button.react.stories.d.ts +1 -1
  13. package/dist/packages/button/button.stories.d.ts +4 -4
  14. package/dist/packages/button/button.stories.js +4 -4
  15. package/dist/packages/button/button.test.js +30 -1
  16. package/dist/packages/button/index.d.ts +2 -0
  17. package/dist/packages/button/index.js +49 -13
  18. package/dist/packages/button/index.js.map +3 -3
  19. package/dist/packages/card/index.js.map +2 -2
  20. package/dist/packages/datepicker/datepicker.d.ts +1 -0
  21. package/dist/packages/datepicker/datepicker.js +439 -2732
  22. package/dist/packages/datepicker/datepicker.react.stories.d.ts +1 -1
  23. package/dist/packages/datepicker/datepicker.test.js +27 -0
  24. package/dist/packages/datepicker/index.js +2785 -1
  25. package/dist/packages/datepicker/{datepicker.js.map → index.js.map} +3 -3
  26. package/dist/packages/expandable/index.js.map +2 -2
  27. package/dist/packages/link/index.d.ts +2 -8
  28. package/dist/packages/link/index.js +43 -7
  29. package/dist/packages/link/index.js.map +4 -4
  30. package/dist/packages/link/link.react.stories.d.ts +6 -4
  31. package/dist/packages/link/link.react.stories.js +22 -12
  32. package/dist/packages/link/link.stories.d.ts +5 -3
  33. package/dist/packages/link/link.stories.js +22 -12
  34. package/dist/packages/link/styles.js +36 -0
  35. package/dist/packages/modal/index.js.map +2 -2
  36. package/dist/packages/modal/modal-header.js.map +2 -2
  37. package/dist/packages/modal/modal.stories.d.ts +3 -3
  38. package/dist/packages/modal/modal.stories.js +32 -32
  39. package/dist/packages/pill/index.js.map +2 -2
  40. package/dist/packages/select/index.d.ts +26 -5
  41. package/dist/packages/select/index.js +17 -16
  42. package/dist/packages/select/index.js.map +3 -3
  43. package/dist/packages/select/select.react.stories.d.ts +1 -1
  44. package/dist/packages/select/select.stories.d.ts +1 -1
  45. package/dist/packages/select/select.stories.js +3 -4
  46. package/dist/packages/select/select.test.js +30 -0
  47. package/dist/packages/textfield/index.d.ts +4 -0
  48. package/dist/packages/textfield/index.js +20 -19
  49. package/dist/packages/textfield/index.js.map +3 -3
  50. package/dist/packages/textfield/textfield.react.stories.d.ts +1 -1
  51. package/dist/packages/textfield/textfield.stories.d.ts +1 -0
  52. package/dist/packages/textfield/textfield.stories.js +17 -0
  53. package/dist/web-types.json +44 -707
  54. package/package.json +11 -89
  55. package/dist/packages/combobox/combobox.react.stories.d.ts +0 -28
  56. package/dist/packages/combobox/combobox.react.stories.js +0 -90
  57. package/dist/packages/combobox/combobox.stories.d.ts +0 -18
  58. package/dist/packages/combobox/combobox.stories.js +0 -117
  59. package/dist/packages/combobox/index.d.ts +0 -85
  60. package/dist/packages/combobox/index.js +0 -2492
  61. package/dist/packages/combobox/index.js.map +0 -7
  62. package/dist/packages/combobox/locales/da/messages.d.mts +0 -1
  63. package/dist/packages/combobox/locales/da/messages.mjs +0 -1
  64. package/dist/packages/combobox/locales/en/messages.d.mts +0 -1
  65. package/dist/packages/combobox/locales/en/messages.mjs +0 -1
  66. package/dist/packages/combobox/locales/fi/messages.d.mts +0 -1
  67. package/dist/packages/combobox/locales/fi/messages.mjs +0 -1
  68. package/dist/packages/combobox/locales/nb/messages.d.mts +0 -1
  69. package/dist/packages/combobox/locales/nb/messages.mjs +0 -1
  70. package/dist/packages/combobox/locales/sv/messages.d.mts +0 -1
  71. package/dist/packages/combobox/locales/sv/messages.mjs +0 -1
  72. package/dist/packages/combobox/react.d.ts +0 -7
  73. package/dist/packages/combobox/react.js +0 -17
  74. package/dist/packages/combobox/styles.d.ts +0 -1
  75. package/dist/packages/combobox/styles.js +0 -2
  76. package/dist/packages/dead-toggle/dead-toggle.react.stories.d.ts +0 -15
  77. package/dist/packages/dead-toggle/dead-toggle.react.stories.js +0 -34
  78. package/dist/packages/dead-toggle/dead-toggle.stories.d.ts +0 -14
  79. package/dist/packages/dead-toggle/dead-toggle.stories.js +0 -45
  80. package/dist/packages/dead-toggle/dead-toggle.test.d.ts +0 -1
  81. package/dist/packages/dead-toggle/dead-toggle.test.js +0 -9
  82. package/dist/packages/dead-toggle/index.d.ts +0 -17
  83. package/dist/packages/dead-toggle/index.js +0 -2547
  84. package/dist/packages/dead-toggle/index.js.map +0 -7
  85. package/dist/packages/dead-toggle/react.d.ts +0 -2
  86. package/dist/packages/dead-toggle/react.js +0 -11
  87. package/dist/packages/pageindicator/index.d.ts +0 -10
  88. package/dist/packages/pageindicator/index.js +0 -32
  89. package/dist/packages/pageindicator/index.js.map +0 -7
  90. package/dist/packages/pageindicator/pageindicator.react.stories.d.ts +0 -19
  91. package/dist/packages/pageindicator/pageindicator.react.stories.js +0 -20
  92. package/dist/packages/pageindicator/pageindicator.stories.d.ts +0 -32
  93. package/dist/packages/pageindicator/pageindicator.stories.js +0 -71
  94. package/dist/packages/pageindicator/react.d.ts +0 -2
  95. package/dist/packages/pageindicator/react.js +0 -11
  96. package/dist/packages/pageindicator/style.d.ts +0 -1
  97. package/dist/packages/pageindicator/style.js +0 -26
  98. package/dist/packages/pagination/index.d.ts +0 -32
  99. package/dist/packages/pagination/index.js +0 -2500
  100. package/dist/packages/pagination/index.js.map +0 -7
  101. package/dist/packages/pagination/locales/da/messages.d.mts +0 -1
  102. package/dist/packages/pagination/locales/da/messages.mjs +0 -1
  103. package/dist/packages/pagination/locales/en/messages.d.mts +0 -1
  104. package/dist/packages/pagination/locales/en/messages.mjs +0 -1
  105. package/dist/packages/pagination/locales/fi/messages.d.mts +0 -1
  106. package/dist/packages/pagination/locales/fi/messages.mjs +0 -1
  107. package/dist/packages/pagination/locales/nb/messages.d.mts +0 -1
  108. package/dist/packages/pagination/locales/nb/messages.mjs +0 -1
  109. package/dist/packages/pagination/locales/sv/messages.d.mts +0 -1
  110. package/dist/packages/pagination/locales/sv/messages.mjs +0 -1
  111. package/dist/packages/pagination/pagination.react.stories.d.ts +0 -21
  112. package/dist/packages/pagination/pagination.react.stories.js +0 -45
  113. package/dist/packages/pagination/pagination.stories.d.ts +0 -14
  114. package/dist/packages/pagination/pagination.stories.js +0 -56
  115. package/dist/packages/pagination/pagination.test.d.ts +0 -1
  116. package/dist/packages/pagination/pagination.test.js +0 -76
  117. package/dist/packages/pagination/react.d.ts +0 -5
  118. package/dist/packages/pagination/react.js +0 -15
  119. package/dist/packages/pagination/styles.d.ts +0 -1
  120. package/dist/packages/pagination/styles.js +0 -2
  121. package/dist/packages/rip-and-tear-checkbox/checkbox-group.d.ts +0 -10
  122. package/dist/packages/rip-and-tear-checkbox/checkbox-group.js +0 -7
  123. package/dist/packages/rip-and-tear-checkbox/checkbox-group.js.map +0 -7
  124. package/dist/packages/rip-and-tear-checkbox/checkbox.d.ts +0 -66
  125. package/dist/packages/rip-and-tear-checkbox/checkbox.js +0 -2591
  126. package/dist/packages/rip-and-tear-checkbox/checkbox.js.map +0 -7
  127. package/dist/packages/rip-and-tear-checkbox/checkbox.stories.d.ts +0 -11
  128. package/dist/packages/rip-and-tear-checkbox/checkbox.stories.js +0 -25
  129. package/dist/packages/rip-and-tear-checkbox/index.d.ts +0 -1
  130. package/dist/packages/rip-and-tear-checkbox/index.js +0 -6
  131. package/dist/packages/rip-and-tear-checkbox/react.d.ts +0 -7
  132. package/dist/packages/rip-and-tear-checkbox/react.js +0 -20
  133. package/dist/packages/rip-and-tear-checkbox/rip-and-tear-checkbox.react.stories.d.ts +0 -12
  134. package/dist/packages/rip-and-tear-checkbox/rip-and-tear-checkbox.react.stories.js +0 -10
  135. package/dist/packages/rip-and-tear-checkbox/styles.d.ts +0 -0
  136. package/dist/packages/rip-and-tear-checkbox/styles.js +0 -0
  137. package/dist/packages/rip-and-tear-radio/base-element.d.ts +0 -46
  138. package/dist/packages/rip-and-tear-radio/base-element.js +0 -100
  139. package/dist/packages/rip-and-tear-radio/custom-error-validator.d.ts +0 -6
  140. package/dist/packages/rip-and-tear-radio/custom-error-validator.js +0 -22
  141. package/dist/packages/rip-and-tear-radio/form-associated-element.d.ts +0 -103
  142. package/dist/packages/rip-and-tear-radio/form-associated-element.js +0 -282
  143. package/dist/packages/rip-and-tear-radio/host-styles.d.ts +0 -1
  144. package/dist/packages/rip-and-tear-radio/host-styles.js +0 -12
  145. package/dist/packages/rip-and-tear-radio/index.d.ts +0 -1
  146. package/dist/packages/rip-and-tear-radio/index.js +0 -6
  147. package/dist/packages/rip-and-tear-radio/invalid.d.ts +0 -8
  148. package/dist/packages/rip-and-tear-radio/invalid.js +0 -5
  149. package/dist/packages/rip-and-tear-radio/math.d.ts +0 -1
  150. package/dist/packages/rip-and-tear-radio/math.js +0 -4
  151. package/dist/packages/rip-and-tear-radio/radio-group-styles.d.ts +0 -1
  152. package/dist/packages/rip-and-tear-radio/radio-group-styles.js +0 -59
  153. package/dist/packages/rip-and-tear-radio/radio-group-styles.js.map +0 -7
  154. package/dist/packages/rip-and-tear-radio/radio-group.d.ts +0 -72
  155. package/dist/packages/rip-and-tear-radio/radio-group.js +0 -2648
  156. package/dist/packages/rip-and-tear-radio/radio-group.js.map +0 -7
  157. package/dist/packages/rip-and-tear-radio/radio-styles.d.ts +0 -0
  158. package/dist/packages/rip-and-tear-radio/radio-styles.js +0 -1
  159. package/dist/packages/rip-and-tear-radio/radio-styles.js.map +0 -7
  160. package/dist/packages/rip-and-tear-radio/radio.d.ts +0 -38
  161. package/dist/packages/rip-and-tear-radio/radio.js +0 -2562
  162. package/dist/packages/rip-and-tear-radio/radio.js.map +0 -7
  163. package/dist/packages/rip-and-tear-radio/radio.stories.d.ts +0 -8
  164. package/dist/packages/rip-and-tear-radio/radio.stories.js +0 -2653
  165. package/dist/packages/rip-and-tear-radio/radio.stories.js.map +0 -7
  166. package/dist/packages/rip-and-tear-radio/react.d.ts +0 -9
  167. package/dist/packages/rip-and-tear-radio/react.js +0 -22
  168. package/dist/packages/rip-and-tear-radio/required-validator.d.ts +0 -11
  169. package/dist/packages/rip-and-tear-radio/required-validator.js +0 -34
  170. package/dist/packages/rip-and-tear-radio/rip-and-tear-radio.react.stories.d.ts +0 -9
  171. package/dist/packages/rip-and-tear-radio/rip-and-tear-radio.react.stories.js +0 -10
  172. package/dist/packages/rip-and-tear-radio/slot.d.ts +0 -20
  173. package/dist/packages/rip-and-tear-radio/slot.js +0 -71
  174. package/dist/packages/rip-and-tear-radio/watch.d.ts +0 -26
  175. package/dist/packages/rip-and-tear-radio/watch.js +0 -39
  176. package/dist/packages/slider/Slider.d.ts +0 -2
  177. package/dist/packages/slider/Slider.js +0 -8
  178. package/dist/packages/slider/SliderThumb.d.ts +0 -2
  179. package/dist/packages/slider/SliderThumb.js +0 -8
  180. package/dist/packages/slider/index.d.ts +0 -2
  181. package/dist/packages/slider/index.js +0 -2
  182. package/dist/packages/slider/oddbird-css-anchor-positioning.d.ts +0 -2
  183. package/dist/packages/slider/oddbird-css-anchor-positioning.js +0 -3
  184. package/dist/packages/slider/react.d.ts +0 -8
  185. package/dist/packages/slider/react.js +0 -20
  186. package/dist/packages/slider/slider-thumb.d.ts +0 -57
  187. package/dist/packages/slider/slider-thumb.js +0 -2705
  188. package/dist/packages/slider/slider-thumb.js.map +0 -7
  189. package/dist/packages/slider/slider.d.ts +0 -46
  190. package/dist/packages/slider/slider.js +0 -2587
  191. package/dist/packages/slider/slider.js.map +0 -7
  192. package/dist/packages/slider/slider.react.stories.d.ts +0 -18
  193. package/dist/packages/slider/slider.react.stories.js +0 -118
  194. package/dist/packages/slider/slider.stories.d.ts +0 -18
  195. package/dist/packages/slider/slider.stories.js +0 -197
  196. package/dist/packages/slider/slider.test.d.ts +0 -4
  197. package/dist/packages/slider/slider.test.js +0 -83
  198. package/dist/packages/slider/styles/w-slider-thumb.styles.d.ts +0 -1
  199. package/dist/packages/slider/styles/w-slider-thumb.styles.js +0 -167
  200. package/dist/packages/slider/styles/w-slider.styles.d.ts +0 -1
  201. package/dist/packages/slider/styles/w-slider.styles.js +0 -134
  202. package/dist/packages/slider/styles.d.ts +0 -1
  203. package/dist/packages/slider/styles.js +0 -2
  204. package/dist/packages/steps/index.d.ts +0 -36
  205. package/dist/packages/steps/index.js +0 -2465
  206. package/dist/packages/steps/index.js.map +0 -7
  207. package/dist/packages/steps/locales/da/messages.d.mts +0 -1
  208. package/dist/packages/steps/locales/da/messages.mjs +0 -1
  209. package/dist/packages/steps/locales/en/messages.d.mts +0 -1
  210. package/dist/packages/steps/locales/en/messages.mjs +0 -1
  211. package/dist/packages/steps/locales/fi/messages.d.mts +0 -1
  212. package/dist/packages/steps/locales/fi/messages.mjs +0 -1
  213. package/dist/packages/steps/locales/nb/messages.d.mts +0 -1
  214. package/dist/packages/steps/locales/nb/messages.mjs +0 -1
  215. package/dist/packages/steps/locales/sv/messages.d.mts +0 -1
  216. package/dist/packages/steps/locales/sv/messages.mjs +0 -1
  217. package/dist/packages/steps/react.d.ts +0 -3
  218. package/dist/packages/steps/react.js +0 -16
  219. package/dist/packages/steps/steps.react.stories.d.ts +0 -15
  220. package/dist/packages/steps/steps.react.stories.js +0 -112
  221. package/dist/packages/steps/steps.stories.d.ts +0 -12
  222. package/dist/packages/steps/steps.stories.js +0 -172
  223. package/dist/packages/steps/styles.d.ts +0 -1
  224. package/dist/packages/steps/styles.js +0 -2
  225. package/dist/packages/switch/index.d.ts +0 -15
  226. package/dist/packages/switch/index.js +0 -2455
  227. package/dist/packages/switch/index.js.map +0 -7
  228. package/dist/packages/switch/react.d.ts +0 -5
  229. package/dist/packages/switch/react.js +0 -15
  230. package/dist/packages/switch/styles.d.ts +0 -1
  231. package/dist/packages/switch/styles.js +0 -2
  232. package/dist/packages/switch/switch.react.stories.d.ts +0 -15
  233. package/dist/packages/switch/switch.react.stories.js +0 -29
  234. package/dist/packages/switch/switch.stories.d.ts +0 -9
  235. package/dist/packages/switch/switch.stories.js +0 -34
  236. package/dist/packages/tabs/index.d.ts +0 -4
  237. package/dist/packages/tabs/index.js +0 -3
  238. package/dist/packages/tabs/react.d.ts +0 -12
  239. package/dist/packages/tabs/react.js +0 -31
  240. package/dist/packages/tabs/styles.d.ts +0 -1
  241. package/dist/packages/tabs/styles.js +0 -2
  242. package/dist/packages/tabs/tab-panel.d.ts +0 -20
  243. package/dist/packages/tabs/tab-panel.js +0 -51
  244. package/dist/packages/tabs/tab.d.ts +0 -18
  245. package/dist/packages/tabs/tab.js +0 -2464
  246. package/dist/packages/tabs/tab.js.map +0 -7
  247. package/dist/packages/tabs/tabs.d.ts +0 -40
  248. package/dist/packages/tabs/tabs.js +0 -2448
  249. package/dist/packages/tabs/tabs.js.map +0 -7
  250. package/dist/packages/tabs/tabs.react.stories.d.ts +0 -15
  251. package/dist/packages/tabs/tabs.react.stories.js +0 -51
  252. package/dist/packages/tabs/tabs.stories.d.ts +0 -11
  253. package/dist/packages/tabs/tabs.stories.js +0 -93
  254. package/dist/packages/textarea/index.d.ts +0 -1
  255. package/dist/packages/textarea/index.js +0 -1
  256. package/dist/packages/textarea/locales/da/messages.d.mts +0 -1
  257. package/dist/packages/textarea/locales/da/messages.mjs +0 -1
  258. package/dist/packages/textarea/locales/en/messages.d.mts +0 -1
  259. package/dist/packages/textarea/locales/en/messages.mjs +0 -1
  260. package/dist/packages/textarea/locales/fi/messages.d.mts +0 -1
  261. package/dist/packages/textarea/locales/fi/messages.mjs +0 -1
  262. package/dist/packages/textarea/locales/nb/messages.d.mts +0 -1
  263. package/dist/packages/textarea/locales/nb/messages.mjs +0 -1
  264. package/dist/packages/textarea/locales/sv/messages.d.mts +0 -1
  265. package/dist/packages/textarea/locales/sv/messages.mjs +0 -1
  266. package/dist/packages/textarea/react.d.ts +0 -11
  267. package/dist/packages/textarea/react.js +0 -21
  268. package/dist/packages/textarea/styles.d.ts +0 -1
  269. package/dist/packages/textarea/styles.js +0 -2
  270. package/dist/packages/textarea/textarea.d.ts +0 -48
  271. package/dist/packages/textarea/textarea.js +0 -2475
  272. package/dist/packages/textarea/textarea.js.map +0 -7
  273. package/dist/packages/textarea/textarea.react.stories.d.ts +0 -33
  274. package/dist/packages/textarea/textarea.react.stories.js +0 -41
  275. package/dist/packages/textarea/textarea.stories.d.ts +0 -19
  276. package/dist/packages/textarea/textarea.stories.js +0 -85
  277. package/dist/packages/textarea/textarea.test.d.ts +0 -1
  278. package/dist/packages/textarea/textarea.test.js +0 -49
  279. package/dist/packages/toggle-styles.d.ts +0 -1
  280. package/dist/packages/toggle-styles.js +0 -108
  281. package/dist/setup-tests.d.ts +0 -1
  282. package/dist/setup-tests.js +0 -1
@@ -1,100 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { LitElement, unsafeCSS } from 'lit';
8
- import { property } from 'lit/decorators.js';
9
- import { styles as hostStyles } from './host-styles';
10
- export default class BaseElement extends LitElement {
11
- /**
12
- * Override the default styles property to fetch and convert string CSS files. Components can override this behavior
13
- * by setting their own `static styles = []` property.
14
- */
15
- static get styles() {
16
- const styles = Array.isArray(this.css) ? this.css : this.css ? [this.css] : [];
17
- return [hostStyles, ...styles].map((style) => (typeof style === 'string' ? unsafeCSS(style) : style));
18
- }
19
- #hasRecordedInitialProperties;
20
- constructor() {
21
- super();
22
- this.#hasRecordedInitialProperties = false;
23
- this.initialReflectedProperties = new Map();
24
- /**
25
- * Methods for setting and checking custom states.
26
- */
27
- this.customStates = {
28
- /** Adds or removes the specified custom state. */
29
- set: (customState, active) => {
30
- if (!this.internals?.states)
31
- return;
32
- if (active) {
33
- this.internals.states.add(customState);
34
- }
35
- else {
36
- this.internals.states.delete(customState);
37
- }
38
- },
39
- /** Determines whether or not the element currently has the specified state. */
40
- has: (customState) => {
41
- if (!this.internals?.states)
42
- return false;
43
- return this.internals.states.has(customState);
44
- },
45
- };
46
- try {
47
- this.internals = this.attachInternals();
48
- }
49
- catch {
50
- /* Need to tell people if they need a polyfill. */
51
- console.error('Element internals are not supported in your browser. Consider using a polyfill');
52
- }
53
- this.customStates.set('wa-defined', true);
54
- const Self = this.constructor;
55
- for (const [property, spec] of Self.elementProperties) {
56
- if (spec.default === 'inherit' && spec.initial !== undefined && typeof property === 'string') {
57
- this.customStates.set(`initial-${property}-${spec.initial}`, true);
58
- }
59
- }
60
- }
61
- attributeChangedCallback(name, oldValue, newValue) {
62
- if (!this.#hasRecordedInitialProperties) {
63
- this.constructor.elementProperties.forEach((obj, prop) => {
64
- if (obj.reflect && this[prop] != null) {
65
- this.initialReflectedProperties.set(prop, this[prop]);
66
- }
67
- });
68
- this.#hasRecordedInitialProperties = true;
69
- }
70
- super.attributeChangedCallback(name, oldValue, newValue);
71
- }
72
- willUpdate(changedProperties) {
73
- super.willUpdate(changedProperties);
74
- // Run the morph fixing *after* willUpdate.
75
- this.initialReflectedProperties.forEach((value, prop) => {
76
- // If a prop changes to `null`, we assume this happens via an attribute changing to `null`.
77
- if (changedProperties.has(prop) && this[prop] == null) {
78
- // Silly type gymnastics to appease the compiler.
79
- this[prop] = value;
80
- }
81
- });
82
- }
83
- /**
84
- * Given a native event, this function cancels it and dispatches it again from the host element using the desired
85
- * event options.
86
- */
87
- relayNativeEvent(event, eventOptions) {
88
- event.stopImmediatePropagation();
89
- this.dispatchEvent(new event.constructor(event.type, {
90
- ...event,
91
- ...eventOptions,
92
- }));
93
- }
94
- }
95
- __decorate([
96
- property()
97
- ], BaseElement.prototype, "dir", void 0);
98
- __decorate([
99
- property()
100
- ], BaseElement.prototype, "lang", void 0);
@@ -1,6 +0,0 @@
1
- import type { Validator } from './form-associated-element';
2
- /**
3
- * This validator is for if you have an exact copy of your element in the shadow DOM. Rather than needing
4
- * custom translations and error messages, you can simply rely on the element "formControl" in your shadow dom.
5
- */
6
- export declare const CustomErrorValidator: () => Validator;
@@ -1,22 +0,0 @@
1
- /**
2
- * This validator is for if you have an exact copy of your element in the shadow DOM. Rather than needing
3
- * custom translations and error messages, you can simply rely on the element "formControl" in your shadow dom.
4
- */
5
- export const CustomErrorValidator = () => {
6
- return {
7
- observedAttributes: ['custom-error'],
8
- checkValidity(element) {
9
- const validity = {
10
- message: '',
11
- isValid: true,
12
- invalidKeys: [],
13
- };
14
- if (element.customError) {
15
- validity.message = element.customError;
16
- validity.isValid = false;
17
- validity.invalidKeys = ['customError'];
18
- }
19
- return validity;
20
- },
21
- };
22
- };
@@ -1,103 +0,0 @@
1
- import { LitElement } from 'lit';
2
- import BaseElement from './base-element.js';
3
- export interface Validator<T extends BaseFormAssociatedElement = BaseFormAssociatedElement> {
4
- observedAttributes?: string[];
5
- checkValidity: (element: T) => {
6
- message: string;
7
- isValid: boolean;
8
- invalidKeys: Exclude<keyof ValidityState, 'valid'>[];
9
- };
10
- message?: string | ((element: T) => string);
11
- }
12
- export interface BaseFormControl extends BaseElement {
13
- name: null | string;
14
- disabled?: boolean;
15
- defaultValue?: unknown;
16
- defaultChecked?: boolean;
17
- checked?: boolean;
18
- defaultSelected?: boolean;
19
- selected?: boolean;
20
- form?: string | null;
21
- value?: unknown;
22
- pattern?: string;
23
- min?: number | string | Date;
24
- max?: number | string | Date;
25
- step?: number | 'any';
26
- required?: boolean;
27
- minlength?: number;
28
- maxlength?: number;
29
- readonly validity: ValidityState;
30
- readonly validationMessage: string;
31
- checkValidity: () => boolean;
32
- getForm: () => HTMLFormElement | null;
33
- reportValidity: () => boolean;
34
- setCustomValidity: (message: string) => void;
35
- hasInteracted: boolean;
36
- valueHasChanged?: boolean;
37
- /** Convenience API for `setCustomValidity()` */
38
- customError: null | string;
39
- }
40
- export declare class BaseFormAssociatedElement extends BaseElement implements Omit<ElementInternals, 'form' | 'setFormValue'>, BaseFormControl {
41
- static formAssociated: boolean;
42
- /**
43
- * Validators are static because they have `observedAttributes`, essentially attributes to "watch"
44
- * for changes. Whenever these attributes change, we want to be notified and update the validator.
45
- */
46
- static get validators(): Validator[];
47
- static get observedAttributes(): string[];
48
- /** The name of the input, submitted as a name/value pair with form data. */
49
- name: string | null;
50
- /** Disables the form control. */
51
- disabled: boolean;
52
- required: boolean;
53
- assumeInteractionOn: string[];
54
- input?: (HTMLElement & {
55
- value: unknown;
56
- }) | HTMLInputElement | HTMLTextAreaElement;
57
- validators: Validator[];
58
- valueHasChanged: boolean;
59
- hasInteracted: boolean;
60
- customError: string | null;
61
- private emittedEvents;
62
- constructor();
63
- private states;
64
- connectedCallback(): void;
65
- firstUpdated(...args: Parameters<LitElement['firstUpdated']>): void;
66
- emitInvalid: (e: Event) => void;
67
- protected willUpdate(changedProperties: Parameters<LitElement['willUpdate']>[0]): void;
68
- private handleInteraction;
69
- get labels(): NodeList;
70
- getForm(): HTMLFormElement;
71
- get validity(): ValidityState;
72
- get willValidate(): boolean;
73
- get validationMessage(): string;
74
- checkValidity(): boolean;
75
- reportValidity(): boolean;
76
- /**
77
- * Override this to change where constraint validation popups are anchored.
78
- */
79
- get validationTarget(): undefined | HTMLElement;
80
- setValidity(...args: Parameters<typeof this.internals.setValidity>): void;
81
- setCustomStates(): void;
82
- /**
83
- * Do not use this when creating a "Validator". This is intended for end users of components.
84
- * We track manually defined custom errors so we don't clear them on accident in our validators.
85
- *
86
- */
87
- setCustomValidity(message: string): void;
88
- formResetCallback(): void;
89
- formDisabledCallback(isDisabled: boolean): void;
90
- /**
91
- * Called when the browser is trying to restore element’s state to state in which case reason is "restore", or when
92
- * the browser is trying to fulfill autofill on behalf of user in which case reason is "autocomplete". In the case of
93
- * "restore", state is a string, File, or FormData object previously set as the second argument to setFormValue.
94
- */
95
- formStateRestoreCallback(state: string | File | FormData | null, reason: 'autocomplete' | 'restore'): void;
96
- setValue(...args: Parameters<typeof this.internals.setFormValue>): void;
97
- get allValidators(): Validator<BaseFormAssociatedElement>[];
98
- /**
99
- * Reset validity is a way of removing manual custom errors and native validation.
100
- */
101
- resetValidity(): void;
102
- updateValidity(): void;
103
- }
@@ -1,282 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { isServer } from 'lit';
8
- import { property } from 'lit/decorators.js';
9
- import BaseElement from './base-element.js';
10
- import { CustomErrorValidator } from './custom-error-validator.js';
11
- import { WInvalidEvent } from './invalid';
12
- // setFormValue omitted so that we can use `setValue`
13
- export class BaseFormAssociatedElement extends BaseElement {
14
- static { this.formAssociated = true; }
15
- /**
16
- * Validators are static because they have `observedAttributes`, essentially attributes to "watch"
17
- * for changes. Whenever these attributes change, we want to be notified and update the validator.
18
- */
19
- static get validators() {
20
- return [CustomErrorValidator()];
21
- }
22
- // Append all Validator "observedAttributes" into the "observedAttributes" so they can run.
23
- static get observedAttributes() {
24
- const parentAttrs = new Set(super.observedAttributes || []);
25
- for (const validator of this.validators) {
26
- if (!validator.observedAttributes) {
27
- continue;
28
- }
29
- for (const attr of validator.observedAttributes) {
30
- parentAttrs.add(attr);
31
- }
32
- }
33
- return [...parentAttrs];
34
- }
35
- constructor() {
36
- super();
37
- // Form attributes
38
- /** The name of the input, submitted as a name/value pair with form data. */
39
- this.name = null;
40
- /** Disables the form control. */
41
- this.disabled = false;
42
- this.required = false;
43
- this.assumeInteractionOn = ['input'];
44
- this.validators = [];
45
- // Should these be private?
46
- this.valueHasChanged = false;
47
- this.hasInteracted = false;
48
- // This works around a limitation in Safari. It is a hacky way for us to preserve custom errors generated by the user.
49
- this.customError = null;
50
- this.emittedEvents = [];
51
- this.emitInvalid = (e) => {
52
- if (e.target !== this)
53
- return;
54
- // An "invalid" event counts as interacted, this is usually triggered by a button "submitting"
55
- this.hasInteracted = true;
56
- this.dispatchEvent(new WInvalidEvent());
57
- };
58
- this.handleInteraction = (event) => {
59
- const emittedEvents = this.emittedEvents;
60
- if (!emittedEvents.includes(event.type)) {
61
- emittedEvents.push(event.type);
62
- }
63
- // Mark it as user-interacted as soon as all associated events have been emitted
64
- if (emittedEvents.length === this.assumeInteractionOn?.length) {
65
- this.hasInteracted = true;
66
- }
67
- };
68
- if (!isServer) {
69
- this.addEventListener('invalid', this.emitInvalid);
70
- }
71
- }
72
- connectedCallback() {
73
- super.connectedCallback();
74
- this.updateValidity();
75
- // Lazily evaluate after the constructor to allow people to override the `assumeInteractionOn`
76
- this.assumeInteractionOn.forEach((event) => {
77
- this.addEventListener(event, this.handleInteraction);
78
- });
79
- }
80
- firstUpdated(...args) {
81
- super.firstUpdated(...args);
82
- this.updateValidity();
83
- }
84
- willUpdate(changedProperties) {
85
- if (!isServer && changedProperties.has('customError')) {
86
- // We use null because it we really don't want it to show up in the attributes because `custom-error` does reflect
87
- if (!this.customError) {
88
- this.customError = null;
89
- }
90
- this.setCustomValidity(this.customError || '');
91
- }
92
- if (changedProperties.has('value') || changedProperties.has('disabled')) {
93
- // @ts-expect-error Some components will use an accessors, other use a property, so we don't want to limit them.
94
- const value = this.value;
95
- // Accounts for the snowflake case on `<wa-select>`
96
- if (Array.isArray(value)) {
97
- if (this.name) {
98
- const formData = new FormData();
99
- for (const val of value) {
100
- formData.append(this.name, val);
101
- }
102
- this.setValue(formData, formData);
103
- }
104
- }
105
- else {
106
- this.setValue(value, value);
107
- }
108
- }
109
- if (changedProperties.has('disabled')) {
110
- this.customStates.set('disabled', this.disabled);
111
- if (this.hasAttribute('disabled') || (!isServer && !this.matches(':disabled'))) {
112
- this.toggleAttribute('disabled', this.disabled);
113
- }
114
- }
115
- this.updateValidity();
116
- super.willUpdate(changedProperties);
117
- }
118
- get labels() {
119
- return this.internals.labels;
120
- }
121
- getForm() {
122
- return this.internals.form;
123
- }
124
- get validity() {
125
- return this.internals.validity;
126
- }
127
- // Not sure if this supports `novalidate`. Will need to test.
128
- get willValidate() {
129
- return this.internals.willValidate;
130
- }
131
- get validationMessage() {
132
- return this.internals.validationMessage;
133
- }
134
- checkValidity() {
135
- this.updateValidity();
136
- return this.internals.checkValidity();
137
- }
138
- reportValidity() {
139
- this.updateValidity();
140
- // This seems reasonable. `reportValidity()` is kind of like "we expect you to have interacted"
141
- this.hasInteracted = true;
142
- return this.internals.reportValidity();
143
- }
144
- /**
145
- * Override this to change where constraint validation popups are anchored.
146
- */
147
- get validationTarget() {
148
- return (this.input || undefined);
149
- }
150
- setValidity(...args) {
151
- const flags = args[0];
152
- const message = args[1];
153
- let anchor = args[2];
154
- if (!anchor) {
155
- anchor = this.validationTarget;
156
- }
157
- this.internals.setValidity(flags, message, anchor || undefined);
158
- this.requestUpdate('validity');
159
- this.setCustomStates();
160
- }
161
- setCustomStates() {
162
- const required = Boolean(this.required);
163
- const isValid = this.internals.validity.valid;
164
- const hasInteracted = this.hasInteracted;
165
- this.customStates.set('required', required);
166
- this.customStates.set('optional', !required);
167
- this.customStates.set('invalid', !isValid);
168
- this.customStates.set('valid', isValid);
169
- this.customStates.set('user-invalid', !isValid && hasInteracted);
170
- this.customStates.set('user-valid', isValid && hasInteracted);
171
- }
172
- /**
173
- * Do not use this when creating a "Validator". This is intended for end users of components.
174
- * We track manually defined custom errors so we don't clear them on accident in our validators.
175
- *
176
- */
177
- setCustomValidity(message) {
178
- if (!message) {
179
- // We use null because it we really don't want it to show up in the attributes because `custom-error` does reflect
180
- this.customError = null;
181
- this.setValidity({});
182
- return;
183
- }
184
- this.customError = message;
185
- this.setValidity({ customError: true }, message, this.validationTarget);
186
- }
187
- formResetCallback() {
188
- this.resetValidity();
189
- this.hasInteracted = false;
190
- this.valueHasChanged = false;
191
- this.emittedEvents = [];
192
- this.updateValidity();
193
- }
194
- formDisabledCallback(isDisabled) {
195
- this.disabled = isDisabled;
196
- this.updateValidity();
197
- }
198
- /**
199
- * Called when the browser is trying to restore element’s state to state in which case reason is "restore", or when
200
- * the browser is trying to fulfill autofill on behalf of user in which case reason is "autocomplete". In the case of
201
- * "restore", state is a string, File, or FormData object previously set as the second argument to setFormValue.
202
- */
203
- formStateRestoreCallback(state, reason) {
204
- // @ts-expect-error We purposely do not have a value property. It makes things hard to extend.
205
- this.value = state;
206
- if (reason === 'restore') {
207
- this.resetValidity();
208
- }
209
- this.updateValidity();
210
- }
211
- setValue(...args) {
212
- const [value, state] = args;
213
- this.internals.setFormValue(value, state);
214
- }
215
- get allValidators() {
216
- const staticValidators = this.constructor.validators || [];
217
- const validators = this.validators || [];
218
- return [...staticValidators, ...validators];
219
- }
220
- /**
221
- * Reset validity is a way of removing manual custom errors and native validation.
222
- */
223
- resetValidity() {
224
- this.setCustomValidity('');
225
- this.setValidity({});
226
- }
227
- updateValidity() {
228
- if (this.disabled ||
229
- this.hasAttribute('disabled') ||
230
- !this.willValidate //
231
- ) {
232
- this.resetValidity();
233
- return;
234
- }
235
- const validators = this.allValidators;
236
- if (!validators?.length) {
237
- // If there's no validators, we do nothing. We also don't want to mess with custom errors, so we just stop here.
238
- return;
239
- }
240
- const flags = {
241
- // Don't trust custom errors from the Browser. Safari breaks the spec.
242
- customError: Boolean(this.customError),
243
- };
244
- const formControl = this.validationTarget || this.input || undefined;
245
- let finalMessage = '';
246
- for (const validator of validators) {
247
- const { isValid, message, invalidKeys } = validator.checkValidity(this);
248
- if (isValid) {
249
- continue;
250
- }
251
- if (!finalMessage) {
252
- finalMessage = message;
253
- }
254
- if (invalidKeys?.length >= 0) {
255
- invalidKeys.forEach((str) => (flags[str] = true));
256
- }
257
- }
258
- // This is a workaround for preserving custom errors
259
- if (!finalMessage) {
260
- finalMessage = this.validationMessage;
261
- }
262
- this.setValidity(flags, finalMessage, formControl);
263
- }
264
- }
265
- __decorate([
266
- property({ reflect: true })
267
- ], BaseFormAssociatedElement.prototype, "name", void 0);
268
- __decorate([
269
- property({ type: Boolean })
270
- ], BaseFormAssociatedElement.prototype, "disabled", void 0);
271
- __decorate([
272
- property({ state: true, attribute: false })
273
- ], BaseFormAssociatedElement.prototype, "valueHasChanged", void 0);
274
- __decorate([
275
- property({ state: true, attribute: false })
276
- ], BaseFormAssociatedElement.prototype, "hasInteracted", void 0);
277
- __decorate([
278
- property({ attribute: 'custom-error', reflect: true })
279
- ], BaseFormAssociatedElement.prototype, "customError", void 0);
280
- __decorate([
281
- property({ attribute: false, state: true, type: Object })
282
- ], BaseFormAssociatedElement.prototype, "validity", null);
@@ -1 +0,0 @@
1
- export declare const styles: import("lit").CSSResult;
@@ -1,12 +0,0 @@
1
- import { css } from 'lit';
2
- export const styles = css `
3
- :host {
4
- box-sizing: border-box !important;
5
- }
6
-
7
- :host *,
8
- :host *::before,
9
- :host *::after {
10
- box-sizing: inherit !important;
11
- }
12
- `;
@@ -1 +0,0 @@
1
- export {};
@@ -1,6 +0,0 @@
1
- import { WRadio } from './radio';
2
- import { WRadioGroup } from './radio-group';
3
- if (!customElements.get('w-radio')) {
4
- customElements.define('w-radio', WRadio);
5
- customElements.define('w-radio-group', WRadioGroup);
6
- }
@@ -1,8 +0,0 @@
1
- export declare class WInvalidEvent extends Event {
2
- constructor();
3
- }
4
- declare global {
5
- interface GlobalEventHandlersEventMap {
6
- 'wa-invalid': WInvalidEvent;
7
- }
8
- }
@@ -1,5 +0,0 @@
1
- export class WInvalidEvent extends Event {
2
- constructor() {
3
- super('w-invalid', { bubbles: true, cancelable: false, composed: true });
4
- }
5
- }
@@ -1 +0,0 @@
1
- export declare function uniqueId(prefix?: string): string;
@@ -1,4 +0,0 @@
1
- import { nanoid } from 'nanoid';
2
- export function uniqueId(prefix = '') {
3
- return `${prefix}${nanoid()}`;
4
- }
@@ -1 +0,0 @@
1
- export declare const styles: import("lit").CSSResult;
@@ -1,59 +0,0 @@
1
- import{css as o}from"lit";var r=o`
2
- :host {
3
- display: block;
4
- }
5
-
6
- .form-control {
7
- position: relative;
8
- border: none;
9
- padding: 0;
10
- margin: 0;
11
- }
12
-
13
- .label {
14
- font-size: var(--w-font-size-s);
15
- line-height: var(--w-line-height-s);
16
- font-weight: 700;
17
- -webkit-font-smoothing: antialiased;
18
- -moz-osx-font-smoothing: grayscale;
19
- font-smoothing: grayscale;
20
- cursor: pointer;
21
- padding-bottom: 0.4rem;
22
- color: var(--w-s-color-text);
23
- display: block;
24
- }
25
-
26
- .radio-group-required .label::after {
27
- content: var(--wa-form-control-required-content);
28
- margin-inline-start: var(--wa-form-control-required-content-offset);
29
- }
30
-
31
- .button-group {
32
- display: flex;
33
- }
34
-
35
- [part~='form-control-input'] {
36
- display: flex;
37
- flex-direction: column;
38
- flex-wrap: wrap;
39
- }
40
-
41
- /* Horizontal */
42
- :host([orientation='horizontal']) [part~='form-control-input'] {
43
- flex-direction: row;
44
- gap: 1em;
45
- }
46
-
47
- /* Help text */
48
- [part~='hint'] {
49
- margin-block-start: 0.5em;
50
- }
51
-
52
- /* Radios have the "button" appearance */
53
- :host fieldset.has-radio-buttons {
54
- [part~='form-control-input'] {
55
- gap: 0;
56
- }
57
- }
58
- `;export{r as styles};
59
- //# sourceMappingURL=radio-group-styles.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../packages/rip-and-tear-radio/radio-group-styles.ts"],
4
- "sourcesContent": ["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n }\n\n .form-control {\n position: relative;\n border: none;\n padding: 0;\n margin: 0;\n }\n\n .label {\n font-size: var(--w-font-size-s);\n line-height: var(--w-line-height-s);\n font-weight: 700;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-smoothing: grayscale;\n cursor: pointer;\n padding-bottom: 0.4rem;\n color: var(--w-s-color-text);\n display: block;\n }\n\n .radio-group-required .label::after {\n content: var(--wa-form-control-required-content);\n margin-inline-start: var(--wa-form-control-required-content-offset);\n }\n\n .button-group {\n display: flex;\n }\n\n [part~='form-control-input'] {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n }\n\n /* Horizontal */\n :host([orientation='horizontal']) [part~='form-control-input'] {\n flex-direction: row;\n gap: 1em;\n }\n\n /* Help text */\n [part~='hint'] {\n margin-block-start: 0.5em;\n }\n\n /* Radios have the \"button\" appearance */\n :host fieldset.has-radio-buttons {\n [part~='form-control-input'] {\n gap: 0;\n }\n }\n`;\n"],
5
- "mappings": "AAAA,OAAS,OAAAA,MAAW,MAEb,IAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
- "names": ["css", "styles"]
7
- }