@govtechsg/sgds-web-component 3.0.0-rc.0 → 3.0.0-rc.2

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 (491) hide show
  1. package/Masthead/index.js +1 -1
  2. package/README.md +5 -5
  3. package/base/button.js +1 -1
  4. package/base/form-control-element.d.ts +4 -11
  5. package/base/form-control-element.js +13 -23
  6. package/base/form-control-element.js.map +1 -1
  7. package/components/Accordion/accordion-item.js +1 -1
  8. package/components/Accordion/index.umd.js +7 -19
  9. package/components/Accordion/index.umd.js.map +1 -1
  10. package/components/Accordion/sgds-accordion-item.d.ts +3 -7
  11. package/components/Accordion/sgds-accordion-item.js +6 -18
  12. package/components/Accordion/sgds-accordion-item.js.map +1 -1
  13. package/components/ActionCard/index.umd.js +407 -329
  14. package/components/ActionCard/index.umd.js.map +1 -1
  15. package/components/Alert/alert.js +1 -1
  16. package/components/Alert/index.umd.js +553 -485
  17. package/components/Alert/index.umd.js.map +1 -1
  18. package/components/Alert/sgds-alert.d.ts +2 -2
  19. package/components/Alert/sgds-alert.js +6 -13
  20. package/components/Alert/sgds-alert.js.map +1 -1
  21. package/components/Badge/badge.js +1 -1
  22. package/components/Badge/index.umd.js +9 -10
  23. package/components/Badge/index.umd.js.map +1 -1
  24. package/components/Badge/sgds-badge.d.ts +4 -5
  25. package/components/Badge/sgds-badge.js +6 -7
  26. package/components/Badge/sgds-badge.js.map +1 -1
  27. package/components/Button/index.umd.js +8 -81
  28. package/components/Button/index.umd.js.map +1 -1
  29. package/components/Button/sgds-button.js +1 -1
  30. package/components/Button/sgds-button.js.map +1 -1
  31. package/components/Checkbox/checkbox.js +1 -1
  32. package/components/Checkbox/index.umd.js +541 -475
  33. package/components/Checkbox/index.umd.js.map +1 -1
  34. package/components/Checkbox/sgds-checkbox-group.d.ts +7 -1
  35. package/components/Checkbox/sgds-checkbox-group.js +15 -4
  36. package/components/Checkbox/sgds-checkbox-group.js.map +1 -1
  37. package/components/Checkbox/sgds-checkbox.d.ts +30 -21
  38. package/components/Checkbox/sgds-checkbox.js +77 -60
  39. package/components/Checkbox/sgds-checkbox.js.map +1 -1
  40. package/components/ComboBox/index.umd.js +385 -216
  41. package/components/ComboBox/index.umd.js.map +1 -1
  42. package/components/Datepicker/datepicker-input.d.ts +4 -2
  43. package/components/Datepicker/datepicker-input.js +24 -7
  44. package/components/Datepicker/datepicker-input.js.map +1 -1
  45. package/components/Datepicker/index.umd.js +433 -244
  46. package/components/Datepicker/index.umd.js.map +1 -1
  47. package/components/Datepicker/sgds-datepicker.d.ts +1 -1
  48. package/components/Datepicker/sgds-datepicker.js.map +1 -1
  49. package/components/Drawer/index.umd.js +2 -2
  50. package/components/Drawer/index.umd.js.map +1 -1
  51. package/components/Dropdown/index.umd.js +8 -81
  52. package/components/Dropdown/index.umd.js.map +1 -1
  53. package/components/FileUpload/file-upload.js +1 -1
  54. package/components/FileUpload/index.umd.js +579 -272
  55. package/components/FileUpload/index.umd.js.map +1 -1
  56. package/components/FileUpload/sgds-file-upload.d.ts +42 -30
  57. package/components/FileUpload/sgds-file-upload.js +147 -103
  58. package/components/FileUpload/sgds-file-upload.js.map +1 -1
  59. package/components/Footer/footer-item.js +6 -0
  60. package/components/Footer/footer-item.js.map +1 -0
  61. package/components/Footer/footer.js +1 -1
  62. package/components/Footer/index.d.ts +2 -0
  63. package/components/Footer/index.js +2 -0
  64. package/components/Footer/index.js.map +1 -1
  65. package/components/Footer/index.umd.js +93 -94
  66. package/components/Footer/index.umd.js.map +1 -1
  67. package/components/Footer/sgds-footer-item.d.ts +13 -0
  68. package/components/Footer/sgds-footer-item.js +27 -0
  69. package/components/Footer/sgds-footer-item.js.map +1 -0
  70. package/components/Footer/sgds-footer.d.ts +9 -30
  71. package/components/Footer/sgds-footer.js +65 -90
  72. package/components/Footer/sgds-footer.js.map +1 -1
  73. package/components/Icon/icon.js +6 -0
  74. package/components/Icon/icon.js.map +1 -0
  75. package/components/Icon/index.d.ts +6 -0
  76. package/components/Icon/index.js +4 -0
  77. package/components/Icon/index.js.map +1 -0
  78. package/components/Icon/index.umd.js +4389 -0
  79. package/components/Icon/index.umd.js.map +1 -0
  80. package/components/Icon/sgds-icon.d.ts +21 -0
  81. package/components/Icon/sgds-icon.js +64 -0
  82. package/components/Icon/sgds-icon.js.map +1 -0
  83. package/components/IconButton/icon-button.js +1 -1
  84. package/components/IconButton/index.umd.js +6 -9
  85. package/components/IconButton/index.umd.js.map +1 -1
  86. package/components/IconButton/sgds-icon-button.d.ts +2 -2
  87. package/components/IconButton/sgds-icon-button.js +4 -9
  88. package/components/IconButton/sgds-icon-button.js.map +1 -1
  89. package/components/Input/index.umd.js +1734 -1376
  90. package/components/Input/index.umd.js.map +1 -1
  91. package/components/Input/sgds-input.d.ts +41 -21
  92. package/components/Input/sgds-input.js +103 -66
  93. package/components/Input/sgds-input.js.map +1 -1
  94. package/components/Masthead/index.umd.js +1 -1
  95. package/components/Masthead/masthead.js +1 -1
  96. package/components/Modal/index.umd.js +2 -2
  97. package/components/Modal/index.umd.js.map +1 -1
  98. package/components/QuantityToggle/index.umd.js +894 -316
  99. package/components/QuantityToggle/index.umd.js.map +1 -1
  100. package/components/QuantityToggle/sgds-quantity-toggle.d.ts +42 -15
  101. package/components/QuantityToggle/sgds-quantity-toggle.js +129 -62
  102. package/components/QuantityToggle/sgds-quantity-toggle.js.map +1 -1
  103. package/components/Radio/index.umd.js +516 -203
  104. package/components/Radio/index.umd.js.map +1 -1
  105. package/components/Radio/sgds-radio-group.d.ts +38 -27
  106. package/components/Radio/sgds-radio-group.js +100 -84
  107. package/components/Radio/sgds-radio-group.js.map +1 -1
  108. package/components/Radio/sgds-radio.js +1 -1
  109. package/components/Radio/sgds-radio.js.map +1 -1
  110. package/components/Stepper/index.umd.js +2 -1
  111. package/components/Stepper/index.umd.js.map +1 -1
  112. package/components/Stepper/sgds-stepper.d.ts +1 -0
  113. package/components/Stepper/sgds-stepper.js +1 -0
  114. package/components/Stepper/sgds-stepper.js.map +1 -1
  115. package/components/Stepper/stepper.js +1 -1
  116. package/components/Switch/index.umd.js +21 -321
  117. package/components/Switch/index.umd.js.map +1 -1
  118. package/components/Switch/sgds-switch.js +1 -2
  119. package/components/Switch/sgds-switch.js.map +1 -1
  120. package/components/Textarea/index.umd.js +1554 -1336
  121. package/components/Textarea/index.umd.js.map +1 -1
  122. package/components/Textarea/sgds-textarea.d.ts +33 -22
  123. package/components/Textarea/sgds-textarea.js +78 -75
  124. package/components/Textarea/sgds-textarea.js.map +1 -1
  125. package/components/Textarea/textarea.js +1 -1
  126. package/components/Toast/index.umd.js +9 -21
  127. package/components/Toast/index.umd.js.map +1 -1
  128. package/components/Toast/sgds-toast.d.ts +2 -1
  129. package/components/Toast/sgds-toast.js +6 -18
  130. package/components/Toast/sgds-toast.js.map +1 -1
  131. package/components/Toast/toast.js +1 -1
  132. package/components/Tooltip/index.umd.js +14 -14
  133. package/components/Tooltip/index.umd.js.map +1 -1
  134. package/components/Tooltip/sgds-tooltip.d.ts +4 -7
  135. package/components/Tooltip/sgds-tooltip.js +14 -14
  136. package/components/Tooltip/sgds-tooltip.js.map +1 -1
  137. package/components/index.d.ts +1 -0
  138. package/components/index.js +1 -0
  139. package/components/index.js.map +1 -1
  140. package/components/index.umd.js +1320 -1126
  141. package/components/index.umd.js.map +1 -1
  142. package/css/reboot.css +39 -6
  143. package/css/sgds.css +0 -2
  144. package/icons/arrow-bar-down.svg +3 -0
  145. package/icons/arrow-bar-left.svg +3 -0
  146. package/icons/arrow-bar-right.svg +3 -0
  147. package/icons/arrow-bar-up.svg +3 -0
  148. package/icons/arrow-clockwise.svg +3 -0
  149. package/icons/arrow-down.svg +3 -0
  150. package/icons/arrow-left.svg +3 -0
  151. package/icons/arrow-repeat.svg +3 -0
  152. package/icons/arrow-right.svg +3 -0
  153. package/icons/arrow-up.svg +3 -0
  154. package/icons/bank-fill.svg +3 -0
  155. package/icons/bell-slash.svg +3 -0
  156. package/icons/bell.svg +3 -0
  157. package/icons/bi-funnel.svg +3 -0
  158. package/icons/bookmark-fill.svg +3 -0
  159. package/icons/bookmark.svg +3 -0
  160. package/icons/box-arrow-up-right.svg +3 -0
  161. package/icons/box-seam.svg +3 -0
  162. package/icons/building.svg +3 -0
  163. package/icons/calculator.svg +3 -0
  164. package/icons/calendar-check.svg +4 -0
  165. package/icons/calendar-x.svg +4 -0
  166. package/icons/calendar.svg +3 -0
  167. package/icons/camera.svg +3 -0
  168. package/icons/chat-left-text.svg +3 -0
  169. package/icons/check-circle-fill.svg +3 -0
  170. package/icons/check-circle.svg +3 -0
  171. package/icons/check.svg +3 -0
  172. package/icons/chevron-down.svg +3 -0
  173. package/icons/chevron-left.svg +3 -0
  174. package/icons/chevron-right.svg +3 -0
  175. package/icons/chevron-up .svg +3 -0
  176. package/icons/clock.svg +4 -0
  177. package/icons/cloud-check.svg +4 -0
  178. package/icons/cloud-download.svg +3 -0
  179. package/icons/cloud-upload.svg +3 -0
  180. package/icons/cloud.svg +3 -0
  181. package/icons/compass.svg +4 -0
  182. package/icons/cross.svg +3 -0
  183. package/icons/cursor-fill.svg +3 -0
  184. package/icons/cursor.svg +3 -0
  185. package/icons/dash-circle.svg +3 -0
  186. package/icons/dash-square.svg +3 -0
  187. package/icons/dash.svg +3 -0
  188. package/icons/download.svg +3 -0
  189. package/icons/exclamation-circle-fill.svg +3 -0
  190. package/icons/exclamation-circle.svg +4 -0
  191. package/icons/exclamation-triangle-fill.svg +3 -0
  192. package/icons/exclamation-triangle.svg +4 -0
  193. package/icons/exclamation.svg +4 -0
  194. package/icons/eye-fill.svg +3 -0
  195. package/icons/eye-slash-fill.svg +4 -0
  196. package/icons/eye-slash.svg +3 -0
  197. package/icons/eye.svg +3 -0
  198. package/icons/facebook.svg +3 -0
  199. package/icons/file-earmark-text.svg +3 -0
  200. package/icons/file-pdf.svg +4 -0
  201. package/icons/file-plus.svg +4 -0
  202. package/icons/file-text.svg +3 -0
  203. package/icons/file.svg +3 -0
  204. package/icons/files.svg +4 -0
  205. package/icons/folder-check.svg +4 -0
  206. package/icons/folder-minus.svg +4 -0
  207. package/icons/folder-plus.svg +4 -0
  208. package/icons/folder.svg +3 -0
  209. package/icons/gear.svg +3 -0
  210. package/icons/geo-alt.svg +4 -0
  211. package/icons/geo-fill.svg +4 -0
  212. package/icons/geo.svg +4 -0
  213. package/icons/google.svg +3 -0
  214. package/icons/grid-fill.svg +3 -0
  215. package/icons/hand-thumbs-down.svg +3 -0
  216. package/icons/hand-thumbs-up.svg +3 -0
  217. package/icons/hdd.svg +3 -0
  218. package/icons/house-door.svg +3 -0
  219. package/icons/house.svg +3 -0
  220. package/icons/image.svg +3 -0
  221. package/icons/inbox.svg +3 -0
  222. package/icons/info-circle-fill.svg +3 -0
  223. package/icons/info-circle.svg +4 -0
  224. package/icons/instagram.svg +3 -0
  225. package/icons/layers.svg +3 -0
  226. package/icons/layout-text-window-reverse.svg +3 -0
  227. package/icons/layout-text-window.svg +3 -0
  228. package/icons/layout.svg +3 -0
  229. package/icons/link.svg +3 -0
  230. package/icons/linkedin.svg +3 -0
  231. package/icons/list.svg +3 -0
  232. package/icons/lock-fill.svg +3 -0
  233. package/icons/lock.svg +3 -0
  234. package/icons/mail.svg +3 -0
  235. package/icons/map.svg +3 -0
  236. package/icons/paperclip.svg +3 -0
  237. package/icons/pencil.svg +3 -0
  238. package/icons/pending-circle.svg +3 -0
  239. package/icons/person-dash.svg +3 -0
  240. package/icons/person-plus.svg +3 -0
  241. package/icons/person-x.svg +3 -0
  242. package/icons/person.svg +3 -0
  243. package/icons/pin-map-fill.svg +3 -0
  244. package/icons/pin.svg +3 -0
  245. package/icons/placeholder.svg +3 -0
  246. package/icons/plus-circle.svg +3 -0
  247. package/icons/plus-square.svg +3 -0
  248. package/icons/plus.svg +3 -0
  249. package/icons/printer.svg +3 -0
  250. package/icons/question-circle.svg +4 -0
  251. package/icons/save.svg +3 -0
  252. package/icons/search.svg +3 -0
  253. package/icons/share.svg +3 -0
  254. package/icons/slash-circle.svg +3 -0
  255. package/icons/sliders.svg +3 -0
  256. package/icons/speedometer.svg +3 -0
  257. package/icons/star-fill.svg +3 -0
  258. package/icons/star.svg +3 -0
  259. package/icons/stoplights.svg +4 -0
  260. package/icons/telephone.svg +3 -0
  261. package/icons/three-dots-vertical.svg +3 -0
  262. package/icons/three-dots.svg +3 -0
  263. package/icons/toggle-off.svg +3 -0
  264. package/icons/toggle-on.svg +3 -0
  265. package/icons/trash.svg +3 -0
  266. package/icons/twitter-x.svg +3 -0
  267. package/icons/unlock.svg +3 -0
  268. package/icons/upload.svg +3 -0
  269. package/icons/window-dash.svg +4 -0
  270. package/icons/window-desktop.svg +4 -0
  271. package/icons/window-dock.svg +4 -0
  272. package/icons/window-fullscreen.svg +3 -0
  273. package/icons/window-plus.svg +4 -0
  274. package/icons/window-sidebar.svg +3 -0
  275. package/icons/window-split.svg +3 -0
  276. package/icons/window-stack.svg +3 -0
  277. package/icons/window-x.svg +4 -0
  278. package/icons/window.svg +3 -0
  279. package/icons/x-circle-fill.svg +3 -0
  280. package/icons/x-circle.svg +3 -0
  281. package/icons/youtube.svg +3 -0
  282. package/icons/zoom-in.svg +3 -0
  283. package/icons/zoom-out.svg +3 -0
  284. package/index.d.ts +1 -0
  285. package/index.js +1 -0
  286. package/index.js.map +1 -1
  287. package/index.umd.js +1340 -1121
  288. package/index.umd.js.map +1 -1
  289. package/internals/CloseButton/close-button.js +1 -1
  290. package/internals/CloseButton/sgds-close-button.js +1 -1
  291. package/internals/CloseButton/sgds-close-button.js.map +1 -1
  292. package/package.json +1 -1
  293. package/react/base/button.cjs.js +1 -1
  294. package/react/base/button.js +1 -1
  295. package/react/base/form-control-element.cjs.js +13 -23
  296. package/react/base/form-control-element.cjs.js.map +1 -1
  297. package/react/base/form-control-element.js +13 -23
  298. package/react/base/form-control-element.js.map +1 -1
  299. package/react/checkbox/index.cjs.js +2 -0
  300. package/react/checkbox/index.cjs.js.map +1 -1
  301. package/react/checkbox/index.d.ts +2 -0
  302. package/react/checkbox/index.js +2 -0
  303. package/react/checkbox/index.js.map +1 -1
  304. package/react/components/Accordion/accordion-item.cjs.js +1 -1
  305. package/react/components/Accordion/accordion-item.js +1 -1
  306. package/react/components/Accordion/sgds-accordion-item.cjs.js +6 -18
  307. package/react/components/Accordion/sgds-accordion-item.cjs.js.map +1 -1
  308. package/react/components/Accordion/sgds-accordion-item.js +6 -18
  309. package/react/components/Accordion/sgds-accordion-item.js.map +1 -1
  310. package/react/components/Alert/alert.cjs.js +1 -1
  311. package/react/components/Alert/alert.js +1 -1
  312. package/react/components/Alert/sgds-alert.cjs.js +5 -12
  313. package/react/components/Alert/sgds-alert.cjs.js.map +1 -1
  314. package/react/components/Alert/sgds-alert.js +6 -13
  315. package/react/components/Alert/sgds-alert.js.map +1 -1
  316. package/react/components/Badge/badge.cjs.js +1 -1
  317. package/react/components/Badge/badge.js +1 -1
  318. package/react/components/Badge/sgds-badge.cjs.js +6 -7
  319. package/react/components/Badge/sgds-badge.cjs.js.map +1 -1
  320. package/react/components/Badge/sgds-badge.js +6 -7
  321. package/react/components/Badge/sgds-badge.js.map +1 -1
  322. package/react/components/Button/sgds-button.cjs.js +2 -2
  323. package/react/components/Button/sgds-button.cjs.js.map +1 -1
  324. package/react/components/Button/sgds-button.js +1 -1
  325. package/react/components/Button/sgds-button.js.map +1 -1
  326. package/react/components/Checkbox/checkbox.cjs.js +1 -1
  327. package/react/components/Checkbox/checkbox.js +1 -1
  328. package/react/components/Checkbox/sgds-checkbox-group.cjs.js +15 -4
  329. package/react/components/Checkbox/sgds-checkbox-group.cjs.js.map +1 -1
  330. package/react/components/Checkbox/sgds-checkbox-group.js +15 -4
  331. package/react/components/Checkbox/sgds-checkbox-group.js.map +1 -1
  332. package/react/components/Checkbox/sgds-checkbox.cjs.js +77 -60
  333. package/react/components/Checkbox/sgds-checkbox.cjs.js.map +1 -1
  334. package/react/components/Checkbox/sgds-checkbox.js +77 -60
  335. package/react/components/Checkbox/sgds-checkbox.js.map +1 -1
  336. package/react/components/Datepicker/datepicker-input.cjs.js +24 -7
  337. package/react/components/Datepicker/datepicker-input.cjs.js.map +1 -1
  338. package/react/components/Datepicker/datepicker-input.js +24 -7
  339. package/react/components/Datepicker/datepicker-input.js.map +1 -1
  340. package/react/components/Datepicker/sgds-datepicker.cjs.js.map +1 -1
  341. package/react/components/Datepicker/sgds-datepicker.js.map +1 -1
  342. package/react/components/FileUpload/file-upload.cjs.js +1 -1
  343. package/react/components/FileUpload/file-upload.js +1 -1
  344. package/react/components/FileUpload/sgds-file-upload.cjs.js +145 -101
  345. package/react/components/FileUpload/sgds-file-upload.cjs.js.map +1 -1
  346. package/react/components/FileUpload/sgds-file-upload.js +147 -103
  347. package/react/components/FileUpload/sgds-file-upload.js.map +1 -1
  348. package/react/components/Footer/footer-item.cjs.js +11 -0
  349. package/react/components/Footer/footer-item.cjs.js.map +1 -0
  350. package/react/components/Footer/footer-item.js +7 -0
  351. package/react/components/Footer/footer-item.js.map +1 -0
  352. package/react/components/Footer/footer.cjs.js +1 -1
  353. package/react/components/Footer/footer.js +1 -1
  354. package/react/components/Footer/sgds-footer-item.cjs.js +33 -0
  355. package/react/components/Footer/sgds-footer-item.cjs.js.map +1 -0
  356. package/react/components/Footer/sgds-footer-item.js +28 -0
  357. package/react/components/Footer/sgds-footer-item.js.map +1 -0
  358. package/react/components/Footer/sgds-footer.cjs.js +65 -90
  359. package/react/components/Footer/sgds-footer.cjs.js.map +1 -1
  360. package/react/components/Footer/sgds-footer.js +65 -90
  361. package/react/components/Footer/sgds-footer.js.map +1 -1
  362. package/react/components/Icon/icon.cjs.js +11 -0
  363. package/react/components/Icon/icon.cjs.js.map +1 -0
  364. package/react/components/Icon/icon.js +7 -0
  365. package/react/components/Icon/icon.js.map +1 -0
  366. package/react/components/Icon/sgds-icon.cjs.js +70 -0
  367. package/react/components/Icon/sgds-icon.cjs.js.map +1 -0
  368. package/react/components/Icon/sgds-icon.js +65 -0
  369. package/react/components/Icon/sgds-icon.js.map +1 -0
  370. package/react/components/IconButton/icon-button.cjs.js +1 -1
  371. package/react/components/IconButton/icon-button.js +1 -1
  372. package/react/components/IconButton/sgds-icon-button.cjs.js +4 -9
  373. package/react/components/IconButton/sgds-icon-button.cjs.js.map +1 -1
  374. package/react/components/IconButton/sgds-icon-button.js +4 -9
  375. package/react/components/IconButton/sgds-icon-button.js.map +1 -1
  376. package/react/components/Input/sgds-input.cjs.js +101 -64
  377. package/react/components/Input/sgds-input.cjs.js.map +1 -1
  378. package/react/components/Input/sgds-input.js +103 -66
  379. package/react/components/Input/sgds-input.js.map +1 -1
  380. package/react/components/Masthead/masthead.cjs.js +1 -1
  381. package/react/components/Masthead/masthead.js +1 -1
  382. package/react/components/QuantityToggle/sgds-quantity-toggle.cjs.js +128 -61
  383. package/react/components/QuantityToggle/sgds-quantity-toggle.cjs.js.map +1 -1
  384. package/react/components/QuantityToggle/sgds-quantity-toggle.js +129 -62
  385. package/react/components/QuantityToggle/sgds-quantity-toggle.js.map +1 -1
  386. package/react/components/Radio/sgds-radio-group.cjs.js +99 -83
  387. package/react/components/Radio/sgds-radio-group.cjs.js.map +1 -1
  388. package/react/components/Radio/sgds-radio-group.js +100 -84
  389. package/react/components/Radio/sgds-radio-group.js.map +1 -1
  390. package/react/components/Radio/sgds-radio.cjs.js +1 -1
  391. package/react/components/Radio/sgds-radio.cjs.js.map +1 -1
  392. package/react/components/Radio/sgds-radio.js +1 -1
  393. package/react/components/Radio/sgds-radio.js.map +1 -1
  394. package/react/components/Stepper/sgds-stepper.cjs.js +1 -0
  395. package/react/components/Stepper/sgds-stepper.cjs.js.map +1 -1
  396. package/react/components/Stepper/sgds-stepper.js +1 -0
  397. package/react/components/Stepper/sgds-stepper.js.map +1 -1
  398. package/react/components/Stepper/stepper.cjs.js +1 -1
  399. package/react/components/Stepper/stepper.js +1 -1
  400. package/react/components/Switch/sgds-switch.cjs.js +1 -2
  401. package/react/components/Switch/sgds-switch.cjs.js.map +1 -1
  402. package/react/components/Switch/sgds-switch.js +1 -2
  403. package/react/components/Switch/sgds-switch.js.map +1 -1
  404. package/react/components/Textarea/sgds-textarea.cjs.js +76 -73
  405. package/react/components/Textarea/sgds-textarea.cjs.js.map +1 -1
  406. package/react/components/Textarea/sgds-textarea.js +78 -75
  407. package/react/components/Textarea/sgds-textarea.js.map +1 -1
  408. package/react/components/Textarea/textarea.cjs.js +1 -1
  409. package/react/components/Textarea/textarea.js +1 -1
  410. package/react/components/Toast/sgds-toast.cjs.js +6 -18
  411. package/react/components/Toast/sgds-toast.cjs.js.map +1 -1
  412. package/react/components/Toast/sgds-toast.js +6 -18
  413. package/react/components/Toast/sgds-toast.js.map +1 -1
  414. package/react/components/Toast/toast.cjs.js +1 -1
  415. package/react/components/Toast/toast.js +1 -1
  416. package/react/components/Tooltip/sgds-tooltip.cjs.js +14 -14
  417. package/react/components/Tooltip/sgds-tooltip.cjs.js.map +1 -1
  418. package/react/components/Tooltip/sgds-tooltip.js +14 -14
  419. package/react/components/Tooltip/sgds-tooltip.js.map +1 -1
  420. package/react/footer-item/index.cjs.js +39 -0
  421. package/react/footer-item/index.cjs.js.map +1 -0
  422. package/react/footer-item/index.d.ts +3 -0
  423. package/react/footer-item/index.js +15 -0
  424. package/react/footer-item/index.js.map +1 -0
  425. package/react/icon/index.cjs.js +42 -0
  426. package/react/icon/index.cjs.js.map +1 -0
  427. package/react/icon/index.d.ts +6 -0
  428. package/react/icon/index.js +18 -0
  429. package/react/icon/index.js.map +1 -0
  430. package/react/index.cjs.js +64 -60
  431. package/react/index.cjs.js.map +1 -1
  432. package/react/index.d.ts +2 -0
  433. package/react/index.js +2 -0
  434. package/react/index.js.map +1 -1
  435. package/react/input/index.cjs.js +3 -1
  436. package/react/input/index.cjs.js.map +1 -1
  437. package/react/input/index.d.ts +2 -0
  438. package/react/input/index.js +3 -1
  439. package/react/input/index.js.map +1 -1
  440. package/react/internals/CloseButton/close-button.cjs.js +1 -1
  441. package/react/internals/CloseButton/close-button.js +1 -1
  442. package/react/internals/CloseButton/sgds-close-button.cjs.js +1 -1
  443. package/react/internals/CloseButton/sgds-close-button.cjs.js.map +1 -1
  444. package/react/internals/CloseButton/sgds-close-button.js +1 -1
  445. package/react/internals/CloseButton/sgds-close-button.js.map +1 -1
  446. package/react/styles/form-hint.cjs.js +1 -1
  447. package/react/styles/form-hint.js +1 -1
  448. package/react/styles/form-label.cjs.js +1 -1
  449. package/react/styles/form-label.js +1 -1
  450. package/react/utils/formSubmitController.cjs.js +64 -0
  451. package/react/utils/formSubmitController.cjs.js.map +1 -0
  452. package/react/utils/formSubmitController.js +60 -0
  453. package/react/utils/formSubmitController.js.map +1 -0
  454. package/react/utils/inputValidationController.cjs.js +130 -0
  455. package/react/utils/inputValidationController.cjs.js.map +1 -0
  456. package/react/utils/inputValidationController.js +126 -0
  457. package/react/utils/inputValidationController.js.map +1 -0
  458. package/react/utils/validatorMixin.cjs.js +108 -0
  459. package/react/utils/validatorMixin.cjs.js.map +1 -0
  460. package/react/utils/validatorMixin.js +104 -0
  461. package/react/utils/validatorMixin.js.map +1 -0
  462. package/styles/form-hint.js +1 -1
  463. package/styles/form-label.js +1 -1
  464. package/themes/day.css +1 -1
  465. package/themes/night.css +3 -2
  466. package/themes/root.css +2 -0
  467. package/utils/{form.d.ts → formSubmitController.d.ts} +10 -20
  468. package/utils/formSubmitController.js +59 -0
  469. package/utils/formSubmitController.js.map +1 -0
  470. package/utils/inputValidationController.d.ts +70 -0
  471. package/utils/inputValidationController.js +125 -0
  472. package/utils/inputValidationController.js.map +1 -0
  473. package/utils/validatorMixin.d.ts +24 -0
  474. package/utils/validatorMixin.js +103 -0
  475. package/utils/validatorMixin.js.map +1 -0
  476. package/base/form-check-element.d.ts +0 -50
  477. package/base/form-check-element.js +0 -169
  478. package/base/form-check-element.js.map +0 -1
  479. package/css/body.css +0 -28
  480. package/css/caption.css +0 -7
  481. package/css/label.css +0 -28
  482. package/react/base/form-check-element.cjs.js +0 -175
  483. package/react/base/form-check-element.cjs.js.map +0 -1
  484. package/react/base/form-check-element.js +0 -170
  485. package/react/base/form-check-element.js.map +0 -1
  486. package/react/utils/form.cjs.js +0 -137
  487. package/react/utils/form.cjs.js.map +0 -1
  488. package/react/utils/form.js +0 -133
  489. package/react/utils/form.js.map +0 -1
  490. package/utils/form.js +0 -132
  491. package/utils/form.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"form.cjs.js","sources":["../../../src/utils/form.ts"],"sourcesContent":["import type SgdsButton from \"../components/Button/sgds-button\";\nimport type { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport SgdsElement from \"../base/sgds-element\";\nconst reportValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();\n\nexport class FormSubmitController implements ReactiveController {\n host?: ReactiveControllerHost & Element;\n form?: HTMLFormElement | null;\n options: FormSubmitControllerOptions;\n\n constructor(host: ReactiveControllerHost & Element, options?: Partial<FormSubmitControllerOptions>) {\n (this.host = host).addController(this);\n this.options = {\n form: (input: HTMLInputElement) => {\n return input.closest(\"form\");\n },\n name: (input: HTMLInputElement) => input.name,\n value: (input: HTMLInputElement) => input.value,\n defaultValue: (input: HTMLInputElement) => input.defaultValue,\n disabled: (input: HTMLInputElement) => input.disabled,\n reportValidity: (input: HTMLInputElement) => {\n return typeof input.reportValidity === \"function\" ? input.reportValidity() : true;\n },\n setValue: (input: HTMLInputElement, value: string) => {\n input.value = value;\n },\n ...options\n };\n this.handleFormData = this.handleFormData.bind(this);\n this.handleFormSubmit = this.handleFormSubmit.bind(this);\n this.handleFormReset = this.handleFormReset.bind(this);\n this.reportFormValidity = this.reportFormValidity.bind(this);\n }\n\n hostConnected() {\n this.form = this.options.form(this.host);\n\n if (this.form) {\n this.form.addEventListener(\"formdata\", this.handleFormData);\n this.form.addEventListener(\"submit\", this.handleFormSubmit);\n this.form.addEventListener(\"reset\", this.handleFormReset);\n\n // Overload the form's reportValidity() method so it looks at Shoelace form controls\n if (!reportValidityOverloads.has(this.form)) {\n reportValidityOverloads.set(this.form, this.form.reportValidity);\n this.form.reportValidity = () => this.reportFormValidity();\n }\n }\n }\n\n hostDisconnected() {\n if (this.form) {\n this.form.removeEventListener(\"formdata\", this.handleFormData);\n this.form.removeEventListener(\"submit\", this.handleFormSubmit);\n this.form.removeEventListener(\"reset\", this.handleFormReset);\n\n // Remove the overload and restore the original method\n if (reportValidityOverloads.has(this.form)) {\n this.form.reportValidity = reportValidityOverloads.get(this.form);\n reportValidityOverloads.delete(this.form);\n }\n\n this.form = undefined;\n }\n }\n\n handleFormData(event: FormDataEvent) {\n const disabled = this.options.disabled(this.host);\n const name = this.options.name(this.host);\n const value = this.options.value(this.host);\n\n if (!disabled && typeof name === \"string\" && typeof value !== \"undefined\") {\n if (Array.isArray(value)) {\n (value as unknown[]).forEach(val => {\n event.formData.append(name, (val as string | number | boolean).toString());\n });\n } else {\n event.formData.append(name, (value as string | number | boolean).toString());\n }\n }\n }\n\n handleFormSubmit(event: Event) {\n const disabled = this.options.disabled(this.host);\n const reportValidity = this.options.reportValidity;\n if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n handleFormReset() {\n this.options.setValue(this.host, this.options.defaultValue(this.host));\n }\n\n reportFormValidity() {\n //\n // Shoelace form controls work hard to act like regular form controls. They support the Constraint Validation API\n // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also\n // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using\n // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.\n //\n // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger\n // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't\n // be necessary once we can use ElementInternals.\n //\n // Note that we're also honoring the form's novalidate attribute.\n //\n if (this.form && !this.form.noValidate) {\n // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom\n // elements that support the constraint validation API.\n const elements = this.form.querySelectorAll<HTMLInputElement>(\"*\");\n for (const element of elements) {\n if (typeof element.reportValidity === \"function\") {\n if (!element.reportValidity()) {\n return false;\n }\n }\n }\n }\n\n return true;\n }\n\n doAction(type: \"submit\" | \"reset\", invoker?: HTMLInputElement | SgdsButton) {\n if (this.form) {\n const button = document.createElement(\"button\");\n button.type = type;\n button.style.position = \"absolute\";\n button.style.width = \"0\";\n button.style.height = \"0\";\n button.style.clipPath = \"inset(50%)\";\n button.style.overflow = \"hidden\";\n button.style.whiteSpace = \"nowrap\";\n\n // Pass form attributes through to the temporary button\n if (invoker) {\n [\"formaction\", \"formmethod\", \"formnovalidate\", \"formtarget\"].forEach(attr => {\n if (invoker.hasAttribute(attr)) {\n button.setAttribute(attr, invoker.getAttribute(attr));\n }\n });\n }\n\n this.form.append(button);\n button.click();\n button.remove();\n }\n }\n\n /** Resets the form, restoring all the control to their default value */\n reset(invoker?: HTMLInputElement | SgdsButton) {\n this.doAction(\"reset\", invoker);\n }\n\n /** Submits the form, triggering validation and form data injection. */\n submit(invoker?: HTMLInputElement | SgdsButton) {\n // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a\n // native submit button into the form, \"click\" it, then remove it to simulate a standard form submission.\n this.doAction(\"submit\", invoker);\n }\n}\n\nexport interface FormSubmitControllerOptions {\n /** A function that returns the form containing the form control. */\n form: (input: unknown) => HTMLFormElement | null;\n /** A function that returns the form control's name, which will be submitted with the form data. */\n name: (input: unknown) => string;\n /** A function that returns the form control's current value. */\n value: (input: unknown) => unknown | unknown[];\n /** A function that returns the form control's default value. */\n defaultValue: (input: unknown) => unknown | unknown[];\n /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */\n disabled: (input: unknown) => boolean;\n /**\n * A function that maps to the form control's reportValidity() function. When the control is invalid, this will\n * prevent submission and trigger the browser's constraint violation warning.\n */\n reportValidity: (input: unknown) => boolean;\n\n /** A function that sets the form control's value */\n setValue: (input: unknown, value: unknown) => void;\n}\n\nexport interface SgdsFormControl extends SgdsElement {\n // Form attributes\n name: string;\n value: unknown;\n disabled?: boolean;\n defaultValue?: unknown;\n defaultChecked?: boolean;\n form?: string;\n valid?: boolean;\n invalid?: boolean;\n\n // Constraint validation attributes\n pattern?: string;\n min?: number | string | Date;\n max?: number | string | Date;\n step?: number | \"any\";\n required?: boolean;\n minlength?: number;\n maxlength?: number;\n}\n"],"names":[],"mappings":"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"}
@@ -1,133 +0,0 @@
1
- 'use client';
2
- const reportValidityOverloads = new WeakMap();
3
- class FormSubmitController {
4
- constructor(host, options) {
5
- (this.host = host).addController(this);
6
- this.options = Object.assign({ form: (input) => {
7
- return input.closest("form");
8
- }, name: (input) => input.name, value: (input) => input.value, defaultValue: (input) => input.defaultValue, disabled: (input) => input.disabled, reportValidity: (input) => {
9
- return typeof input.reportValidity === "function" ? input.reportValidity() : true;
10
- }, setValue: (input, value) => {
11
- input.value = value;
12
- } }, options);
13
- this.handleFormData = this.handleFormData.bind(this);
14
- this.handleFormSubmit = this.handleFormSubmit.bind(this);
15
- this.handleFormReset = this.handleFormReset.bind(this);
16
- this.reportFormValidity = this.reportFormValidity.bind(this);
17
- }
18
- hostConnected() {
19
- this.form = this.options.form(this.host);
20
- if (this.form) {
21
- this.form.addEventListener("formdata", this.handleFormData);
22
- this.form.addEventListener("submit", this.handleFormSubmit);
23
- this.form.addEventListener("reset", this.handleFormReset);
24
- // Overload the form's reportValidity() method so it looks at Shoelace form controls
25
- if (!reportValidityOverloads.has(this.form)) {
26
- reportValidityOverloads.set(this.form, this.form.reportValidity);
27
- this.form.reportValidity = () => this.reportFormValidity();
28
- }
29
- }
30
- }
31
- hostDisconnected() {
32
- if (this.form) {
33
- this.form.removeEventListener("formdata", this.handleFormData);
34
- this.form.removeEventListener("submit", this.handleFormSubmit);
35
- this.form.removeEventListener("reset", this.handleFormReset);
36
- // Remove the overload and restore the original method
37
- if (reportValidityOverloads.has(this.form)) {
38
- this.form.reportValidity = reportValidityOverloads.get(this.form);
39
- reportValidityOverloads.delete(this.form);
40
- }
41
- this.form = undefined;
42
- }
43
- }
44
- handleFormData(event) {
45
- const disabled = this.options.disabled(this.host);
46
- const name = this.options.name(this.host);
47
- const value = this.options.value(this.host);
48
- if (!disabled && typeof name === "string" && typeof value !== "undefined") {
49
- if (Array.isArray(value)) {
50
- value.forEach(val => {
51
- event.formData.append(name, val.toString());
52
- });
53
- }
54
- else {
55
- event.formData.append(name, value.toString());
56
- }
57
- }
58
- }
59
- handleFormSubmit(event) {
60
- const disabled = this.options.disabled(this.host);
61
- const reportValidity = this.options.reportValidity;
62
- if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
63
- event.preventDefault();
64
- event.stopImmediatePropagation();
65
- }
66
- }
67
- handleFormReset() {
68
- this.options.setValue(this.host, this.options.defaultValue(this.host));
69
- }
70
- reportFormValidity() {
71
- //
72
- // Shoelace form controls work hard to act like regular form controls. They support the Constraint Validation API
73
- // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also
74
- // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using
75
- // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.
76
- //
77
- // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger
78
- // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't
79
- // be necessary once we can use ElementInternals.
80
- //
81
- // Note that we're also honoring the form's novalidate attribute.
82
- //
83
- if (this.form && !this.form.noValidate) {
84
- // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom
85
- // elements that support the constraint validation API.
86
- const elements = this.form.querySelectorAll("*");
87
- for (const element of elements) {
88
- if (typeof element.reportValidity === "function") {
89
- if (!element.reportValidity()) {
90
- return false;
91
- }
92
- }
93
- }
94
- }
95
- return true;
96
- }
97
- doAction(type, invoker) {
98
- if (this.form) {
99
- const button = document.createElement("button");
100
- button.type = type;
101
- button.style.position = "absolute";
102
- button.style.width = "0";
103
- button.style.height = "0";
104
- button.style.clipPath = "inset(50%)";
105
- button.style.overflow = "hidden";
106
- button.style.whiteSpace = "nowrap";
107
- // Pass form attributes through to the temporary button
108
- if (invoker) {
109
- ["formaction", "formmethod", "formnovalidate", "formtarget"].forEach(attr => {
110
- if (invoker.hasAttribute(attr)) {
111
- button.setAttribute(attr, invoker.getAttribute(attr));
112
- }
113
- });
114
- }
115
- this.form.append(button);
116
- button.click();
117
- button.remove();
118
- }
119
- }
120
- /** Resets the form, restoring all the control to their default value */
121
- reset(invoker) {
122
- this.doAction("reset", invoker);
123
- }
124
- /** Submits the form, triggering validation and form data injection. */
125
- submit(invoker) {
126
- // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
127
- // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
128
- this.doAction("submit", invoker);
129
- }
130
- }
131
-
132
- export { FormSubmitController };
133
- //# sourceMappingURL=form.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"form.js","sources":["../../../src/utils/form.ts"],"sourcesContent":["import type SgdsButton from \"../components/Button/sgds-button\";\nimport type { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport SgdsElement from \"../base/sgds-element\";\nconst reportValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();\n\nexport class FormSubmitController implements ReactiveController {\n host?: ReactiveControllerHost & Element;\n form?: HTMLFormElement | null;\n options: FormSubmitControllerOptions;\n\n constructor(host: ReactiveControllerHost & Element, options?: Partial<FormSubmitControllerOptions>) {\n (this.host = host).addController(this);\n this.options = {\n form: (input: HTMLInputElement) => {\n return input.closest(\"form\");\n },\n name: (input: HTMLInputElement) => input.name,\n value: (input: HTMLInputElement) => input.value,\n defaultValue: (input: HTMLInputElement) => input.defaultValue,\n disabled: (input: HTMLInputElement) => input.disabled,\n reportValidity: (input: HTMLInputElement) => {\n return typeof input.reportValidity === \"function\" ? input.reportValidity() : true;\n },\n setValue: (input: HTMLInputElement, value: string) => {\n input.value = value;\n },\n ...options\n };\n this.handleFormData = this.handleFormData.bind(this);\n this.handleFormSubmit = this.handleFormSubmit.bind(this);\n this.handleFormReset = this.handleFormReset.bind(this);\n this.reportFormValidity = this.reportFormValidity.bind(this);\n }\n\n hostConnected() {\n this.form = this.options.form(this.host);\n\n if (this.form) {\n this.form.addEventListener(\"formdata\", this.handleFormData);\n this.form.addEventListener(\"submit\", this.handleFormSubmit);\n this.form.addEventListener(\"reset\", this.handleFormReset);\n\n // Overload the form's reportValidity() method so it looks at Shoelace form controls\n if (!reportValidityOverloads.has(this.form)) {\n reportValidityOverloads.set(this.form, this.form.reportValidity);\n this.form.reportValidity = () => this.reportFormValidity();\n }\n }\n }\n\n hostDisconnected() {\n if (this.form) {\n this.form.removeEventListener(\"formdata\", this.handleFormData);\n this.form.removeEventListener(\"submit\", this.handleFormSubmit);\n this.form.removeEventListener(\"reset\", this.handleFormReset);\n\n // Remove the overload and restore the original method\n if (reportValidityOverloads.has(this.form)) {\n this.form.reportValidity = reportValidityOverloads.get(this.form);\n reportValidityOverloads.delete(this.form);\n }\n\n this.form = undefined;\n }\n }\n\n handleFormData(event: FormDataEvent) {\n const disabled = this.options.disabled(this.host);\n const name = this.options.name(this.host);\n const value = this.options.value(this.host);\n\n if (!disabled && typeof name === \"string\" && typeof value !== \"undefined\") {\n if (Array.isArray(value)) {\n (value as unknown[]).forEach(val => {\n event.formData.append(name, (val as string | number | boolean).toString());\n });\n } else {\n event.formData.append(name, (value as string | number | boolean).toString());\n }\n }\n }\n\n handleFormSubmit(event: Event) {\n const disabled = this.options.disabled(this.host);\n const reportValidity = this.options.reportValidity;\n if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n handleFormReset() {\n this.options.setValue(this.host, this.options.defaultValue(this.host));\n }\n\n reportFormValidity() {\n //\n // Shoelace form controls work hard to act like regular form controls. They support the Constraint Validation API\n // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also\n // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using\n // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.\n //\n // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger\n // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't\n // be necessary once we can use ElementInternals.\n //\n // Note that we're also honoring the form's novalidate attribute.\n //\n if (this.form && !this.form.noValidate) {\n // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom\n // elements that support the constraint validation API.\n const elements = this.form.querySelectorAll<HTMLInputElement>(\"*\");\n for (const element of elements) {\n if (typeof element.reportValidity === \"function\") {\n if (!element.reportValidity()) {\n return false;\n }\n }\n }\n }\n\n return true;\n }\n\n doAction(type: \"submit\" | \"reset\", invoker?: HTMLInputElement | SgdsButton) {\n if (this.form) {\n const button = document.createElement(\"button\");\n button.type = type;\n button.style.position = \"absolute\";\n button.style.width = \"0\";\n button.style.height = \"0\";\n button.style.clipPath = \"inset(50%)\";\n button.style.overflow = \"hidden\";\n button.style.whiteSpace = \"nowrap\";\n\n // Pass form attributes through to the temporary button\n if (invoker) {\n [\"formaction\", \"formmethod\", \"formnovalidate\", \"formtarget\"].forEach(attr => {\n if (invoker.hasAttribute(attr)) {\n button.setAttribute(attr, invoker.getAttribute(attr));\n }\n });\n }\n\n this.form.append(button);\n button.click();\n button.remove();\n }\n }\n\n /** Resets the form, restoring all the control to their default value */\n reset(invoker?: HTMLInputElement | SgdsButton) {\n this.doAction(\"reset\", invoker);\n }\n\n /** Submits the form, triggering validation and form data injection. */\n submit(invoker?: HTMLInputElement | SgdsButton) {\n // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a\n // native submit button into the form, \"click\" it, then remove it to simulate a standard form submission.\n this.doAction(\"submit\", invoker);\n }\n}\n\nexport interface FormSubmitControllerOptions {\n /** A function that returns the form containing the form control. */\n form: (input: unknown) => HTMLFormElement | null;\n /** A function that returns the form control's name, which will be submitted with the form data. */\n name: (input: unknown) => string;\n /** A function that returns the form control's current value. */\n value: (input: unknown) => unknown | unknown[];\n /** A function that returns the form control's default value. */\n defaultValue: (input: unknown) => unknown | unknown[];\n /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */\n disabled: (input: unknown) => boolean;\n /**\n * A function that maps to the form control's reportValidity() function. When the control is invalid, this will\n * prevent submission and trigger the browser's constraint violation warning.\n */\n reportValidity: (input: unknown) => boolean;\n\n /** A function that sets the form control's value */\n setValue: (input: unknown, value: unknown) => void;\n}\n\nexport interface SgdsFormControl extends SgdsElement {\n // Form attributes\n name: string;\n value: unknown;\n disabled?: boolean;\n defaultValue?: unknown;\n defaultChecked?: boolean;\n form?: string;\n valid?: boolean;\n invalid?: boolean;\n\n // Constraint validation attributes\n pattern?: string;\n min?: number | string | Date;\n max?: number | string | Date;\n step?: number | \"any\";\n required?: boolean;\n minlength?: number;\n maxlength?: number;\n}\n"],"names":[],"mappings":"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"}
package/utils/form.js DELETED
@@ -1,132 +0,0 @@
1
- const reportValidityOverloads = new WeakMap();
2
- class FormSubmitController {
3
- constructor(host, options) {
4
- (this.host = host).addController(this);
5
- this.options = Object.assign({ form: (input) => {
6
- return input.closest("form");
7
- }, name: (input) => input.name, value: (input) => input.value, defaultValue: (input) => input.defaultValue, disabled: (input) => input.disabled, reportValidity: (input) => {
8
- return typeof input.reportValidity === "function" ? input.reportValidity() : true;
9
- }, setValue: (input, value) => {
10
- input.value = value;
11
- } }, options);
12
- this.handleFormData = this.handleFormData.bind(this);
13
- this.handleFormSubmit = this.handleFormSubmit.bind(this);
14
- this.handleFormReset = this.handleFormReset.bind(this);
15
- this.reportFormValidity = this.reportFormValidity.bind(this);
16
- }
17
- hostConnected() {
18
- this.form = this.options.form(this.host);
19
- if (this.form) {
20
- this.form.addEventListener("formdata", this.handleFormData);
21
- this.form.addEventListener("submit", this.handleFormSubmit);
22
- this.form.addEventListener("reset", this.handleFormReset);
23
- // Overload the form's reportValidity() method so it looks at Shoelace form controls
24
- if (!reportValidityOverloads.has(this.form)) {
25
- reportValidityOverloads.set(this.form, this.form.reportValidity);
26
- this.form.reportValidity = () => this.reportFormValidity();
27
- }
28
- }
29
- }
30
- hostDisconnected() {
31
- if (this.form) {
32
- this.form.removeEventListener("formdata", this.handleFormData);
33
- this.form.removeEventListener("submit", this.handleFormSubmit);
34
- this.form.removeEventListener("reset", this.handleFormReset);
35
- // Remove the overload and restore the original method
36
- if (reportValidityOverloads.has(this.form)) {
37
- this.form.reportValidity = reportValidityOverloads.get(this.form);
38
- reportValidityOverloads.delete(this.form);
39
- }
40
- this.form = undefined;
41
- }
42
- }
43
- handleFormData(event) {
44
- const disabled = this.options.disabled(this.host);
45
- const name = this.options.name(this.host);
46
- const value = this.options.value(this.host);
47
- if (!disabled && typeof name === "string" && typeof value !== "undefined") {
48
- if (Array.isArray(value)) {
49
- value.forEach(val => {
50
- event.formData.append(name, val.toString());
51
- });
52
- }
53
- else {
54
- event.formData.append(name, value.toString());
55
- }
56
- }
57
- }
58
- handleFormSubmit(event) {
59
- const disabled = this.options.disabled(this.host);
60
- const reportValidity = this.options.reportValidity;
61
- if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
62
- event.preventDefault();
63
- event.stopImmediatePropagation();
64
- }
65
- }
66
- handleFormReset() {
67
- this.options.setValue(this.host, this.options.defaultValue(this.host));
68
- }
69
- reportFormValidity() {
70
- //
71
- // Shoelace form controls work hard to act like regular form controls. They support the Constraint Validation API
72
- // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also
73
- // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using
74
- // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.
75
- //
76
- // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger
77
- // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't
78
- // be necessary once we can use ElementInternals.
79
- //
80
- // Note that we're also honoring the form's novalidate attribute.
81
- //
82
- if (this.form && !this.form.noValidate) {
83
- // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom
84
- // elements that support the constraint validation API.
85
- const elements = this.form.querySelectorAll("*");
86
- for (const element of elements) {
87
- if (typeof element.reportValidity === "function") {
88
- if (!element.reportValidity()) {
89
- return false;
90
- }
91
- }
92
- }
93
- }
94
- return true;
95
- }
96
- doAction(type, invoker) {
97
- if (this.form) {
98
- const button = document.createElement("button");
99
- button.type = type;
100
- button.style.position = "absolute";
101
- button.style.width = "0";
102
- button.style.height = "0";
103
- button.style.clipPath = "inset(50%)";
104
- button.style.overflow = "hidden";
105
- button.style.whiteSpace = "nowrap";
106
- // Pass form attributes through to the temporary button
107
- if (invoker) {
108
- ["formaction", "formmethod", "formnovalidate", "formtarget"].forEach(attr => {
109
- if (invoker.hasAttribute(attr)) {
110
- button.setAttribute(attr, invoker.getAttribute(attr));
111
- }
112
- });
113
- }
114
- this.form.append(button);
115
- button.click();
116
- button.remove();
117
- }
118
- }
119
- /** Resets the form, restoring all the control to their default value */
120
- reset(invoker) {
121
- this.doAction("reset", invoker);
122
- }
123
- /** Submits the form, triggering validation and form data injection. */
124
- submit(invoker) {
125
- // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
126
- // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
127
- this.doAction("submit", invoker);
128
- }
129
- }
130
-
131
- export { FormSubmitController };
132
- //# sourceMappingURL=form.js.map
package/utils/form.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"form.js","sources":["../../src/utils/form.ts"],"sourcesContent":["import type SgdsButton from \"../components/Button/sgds-button\";\nimport type { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport SgdsElement from \"../base/sgds-element\";\nconst reportValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();\n\nexport class FormSubmitController implements ReactiveController {\n host?: ReactiveControllerHost & Element;\n form?: HTMLFormElement | null;\n options: FormSubmitControllerOptions;\n\n constructor(host: ReactiveControllerHost & Element, options?: Partial<FormSubmitControllerOptions>) {\n (this.host = host).addController(this);\n this.options = {\n form: (input: HTMLInputElement) => {\n return input.closest(\"form\");\n },\n name: (input: HTMLInputElement) => input.name,\n value: (input: HTMLInputElement) => input.value,\n defaultValue: (input: HTMLInputElement) => input.defaultValue,\n disabled: (input: HTMLInputElement) => input.disabled,\n reportValidity: (input: HTMLInputElement) => {\n return typeof input.reportValidity === \"function\" ? input.reportValidity() : true;\n },\n setValue: (input: HTMLInputElement, value: string) => {\n input.value = value;\n },\n ...options\n };\n this.handleFormData = this.handleFormData.bind(this);\n this.handleFormSubmit = this.handleFormSubmit.bind(this);\n this.handleFormReset = this.handleFormReset.bind(this);\n this.reportFormValidity = this.reportFormValidity.bind(this);\n }\n\n hostConnected() {\n this.form = this.options.form(this.host);\n\n if (this.form) {\n this.form.addEventListener(\"formdata\", this.handleFormData);\n this.form.addEventListener(\"submit\", this.handleFormSubmit);\n this.form.addEventListener(\"reset\", this.handleFormReset);\n\n // Overload the form's reportValidity() method so it looks at Shoelace form controls\n if (!reportValidityOverloads.has(this.form)) {\n reportValidityOverloads.set(this.form, this.form.reportValidity);\n this.form.reportValidity = () => this.reportFormValidity();\n }\n }\n }\n\n hostDisconnected() {\n if (this.form) {\n this.form.removeEventListener(\"formdata\", this.handleFormData);\n this.form.removeEventListener(\"submit\", this.handleFormSubmit);\n this.form.removeEventListener(\"reset\", this.handleFormReset);\n\n // Remove the overload and restore the original method\n if (reportValidityOverloads.has(this.form)) {\n this.form.reportValidity = reportValidityOverloads.get(this.form);\n reportValidityOverloads.delete(this.form);\n }\n\n this.form = undefined;\n }\n }\n\n handleFormData(event: FormDataEvent) {\n const disabled = this.options.disabled(this.host);\n const name = this.options.name(this.host);\n const value = this.options.value(this.host);\n\n if (!disabled && typeof name === \"string\" && typeof value !== \"undefined\") {\n if (Array.isArray(value)) {\n (value as unknown[]).forEach(val => {\n event.formData.append(name, (val as string | number | boolean).toString());\n });\n } else {\n event.formData.append(name, (value as string | number | boolean).toString());\n }\n }\n }\n\n handleFormSubmit(event: Event) {\n const disabled = this.options.disabled(this.host);\n const reportValidity = this.options.reportValidity;\n if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n handleFormReset() {\n this.options.setValue(this.host, this.options.defaultValue(this.host));\n }\n\n reportFormValidity() {\n //\n // Shoelace form controls work hard to act like regular form controls. They support the Constraint Validation API\n // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also\n // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using\n // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.\n //\n // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger\n // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't\n // be necessary once we can use ElementInternals.\n //\n // Note that we're also honoring the form's novalidate attribute.\n //\n if (this.form && !this.form.noValidate) {\n // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom\n // elements that support the constraint validation API.\n const elements = this.form.querySelectorAll<HTMLInputElement>(\"*\");\n for (const element of elements) {\n if (typeof element.reportValidity === \"function\") {\n if (!element.reportValidity()) {\n return false;\n }\n }\n }\n }\n\n return true;\n }\n\n doAction(type: \"submit\" | \"reset\", invoker?: HTMLInputElement | SgdsButton) {\n if (this.form) {\n const button = document.createElement(\"button\");\n button.type = type;\n button.style.position = \"absolute\";\n button.style.width = \"0\";\n button.style.height = \"0\";\n button.style.clipPath = \"inset(50%)\";\n button.style.overflow = \"hidden\";\n button.style.whiteSpace = \"nowrap\";\n\n // Pass form attributes through to the temporary button\n if (invoker) {\n [\"formaction\", \"formmethod\", \"formnovalidate\", \"formtarget\"].forEach(attr => {\n if (invoker.hasAttribute(attr)) {\n button.setAttribute(attr, invoker.getAttribute(attr));\n }\n });\n }\n\n this.form.append(button);\n button.click();\n button.remove();\n }\n }\n\n /** Resets the form, restoring all the control to their default value */\n reset(invoker?: HTMLInputElement | SgdsButton) {\n this.doAction(\"reset\", invoker);\n }\n\n /** Submits the form, triggering validation and form data injection. */\n submit(invoker?: HTMLInputElement | SgdsButton) {\n // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a\n // native submit button into the form, \"click\" it, then remove it to simulate a standard form submission.\n this.doAction(\"submit\", invoker);\n }\n}\n\nexport interface FormSubmitControllerOptions {\n /** A function that returns the form containing the form control. */\n form: (input: unknown) => HTMLFormElement | null;\n /** A function that returns the form control's name, which will be submitted with the form data. */\n name: (input: unknown) => string;\n /** A function that returns the form control's current value. */\n value: (input: unknown) => unknown | unknown[];\n /** A function that returns the form control's default value. */\n defaultValue: (input: unknown) => unknown | unknown[];\n /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */\n disabled: (input: unknown) => boolean;\n /**\n * A function that maps to the form control's reportValidity() function. When the control is invalid, this will\n * prevent submission and trigger the browser's constraint violation warning.\n */\n reportValidity: (input: unknown) => boolean;\n\n /** A function that sets the form control's value */\n setValue: (input: unknown, value: unknown) => void;\n}\n\nexport interface SgdsFormControl extends SgdsElement {\n // Form attributes\n name: string;\n value: unknown;\n disabled?: boolean;\n defaultValue?: unknown;\n defaultChecked?: boolean;\n form?: string;\n valid?: boolean;\n invalid?: boolean;\n\n // Constraint validation attributes\n pattern?: string;\n min?: number | string | Date;\n max?: number | string | Date;\n step?: number | \"any\";\n required?: boolean;\n minlength?: number;\n maxlength?: number;\n}\n"],"names":[],"mappings":"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"}