@aurodesignsystem-dev/auro-formkit 0.0.0-pr1001.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (297) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +314 -0
  5. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +50 -0
  6. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  7. package/components/bibtemplate/dist/headerVersion.d.ts +2 -0
  8. package/components/bibtemplate/dist/iconVersion.d.ts +2 -0
  9. package/components/bibtemplate/dist/index.d.ts +2 -0
  10. package/components/bibtemplate/dist/index.js +1940 -0
  11. package/components/bibtemplate/dist/registered.js +1940 -0
  12. package/components/bibtemplate/dist/styles/color-css.d.ts +2 -0
  13. package/components/bibtemplate/dist/styles/style-css.d.ts +2 -0
  14. package/components/bibtemplate/dist/styles/tokens-css.d.ts +2 -0
  15. package/components/checkbox/README.md +142 -0
  16. package/components/checkbox/demo/api.html +61 -0
  17. package/components/checkbox/demo/api.js +17 -0
  18. package/components/checkbox/demo/api.md +436 -0
  19. package/components/checkbox/demo/api.min.js +1870 -0
  20. package/components/checkbox/demo/index.html +57 -0
  21. package/components/checkbox/demo/index.js +8 -0
  22. package/components/checkbox/demo/index.md +327 -0
  23. package/components/checkbox/demo/index.min.js +1845 -0
  24. package/components/checkbox/demo/readme.html +57 -0
  25. package/components/checkbox/demo/readme.md +142 -0
  26. package/components/checkbox/dist/auro-checkbox-group.d.ts +166 -0
  27. package/components/checkbox/dist/auro-checkbox.d.ts +136 -0
  28. package/components/checkbox/dist/helptextVersion.d.ts +2 -0
  29. package/components/checkbox/dist/index.d.ts +3 -0
  30. package/components/checkbox/dist/index.js +1794 -0
  31. package/components/checkbox/dist/registered.js +1795 -0
  32. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +2 -0
  33. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +2 -0
  34. package/components/checkbox/dist/styles/color-css.d.ts +2 -0
  35. package/components/checkbox/dist/styles/colorGroup-css.d.ts +2 -0
  36. package/components/checkbox/dist/styles/tokens-css.d.ts +2 -0
  37. package/components/combobox/README.md +154 -0
  38. package/components/combobox/demo/api.html +63 -0
  39. package/components/combobox/demo/api.js +36 -0
  40. package/components/combobox/demo/api.md +1326 -0
  41. package/components/combobox/demo/api.min.js +18691 -0
  42. package/components/combobox/demo/index.html +63 -0
  43. package/components/combobox/demo/index.js +26 -0
  44. package/components/combobox/demo/index.md +725 -0
  45. package/components/combobox/demo/index.min.js +18545 -0
  46. package/components/combobox/demo/readme.html +57 -0
  47. package/components/combobox/demo/readme.md +154 -0
  48. package/components/combobox/dist/auro-combobox.d.ts +434 -0
  49. package/components/combobox/dist/bibtemplateVersion.d.ts +2 -0
  50. package/components/combobox/dist/dropdownVersion.d.ts +2 -0
  51. package/components/combobox/dist/index.d.ts +2 -0
  52. package/components/combobox/dist/index.js +16999 -0
  53. package/components/combobox/dist/inputVersion.d.ts +2 -0
  54. package/components/combobox/dist/registered.js +17001 -0
  55. package/components/combobox/dist/styles/emphasized/style-css.d.ts +2 -0
  56. package/components/combobox/dist/styles/snowflake/style-css.d.ts +2 -0
  57. package/components/combobox/dist/styles/style-css.d.ts +2 -0
  58. package/components/counter/README.md +146 -0
  59. package/components/counter/demo/api.html +61 -0
  60. package/components/counter/demo/api.js +20 -0
  61. package/components/counter/demo/api.md +730 -0
  62. package/components/counter/demo/api.min.js +10406 -0
  63. package/components/counter/demo/index.html +61 -0
  64. package/components/counter/demo/index.js +21 -0
  65. package/components/counter/demo/index.md +401 -0
  66. package/components/counter/demo/index.min.js +10370 -0
  67. package/components/counter/demo/readme.html +57 -0
  68. package/components/counter/demo/readme.md +146 -0
  69. package/components/counter/dist/auro-counter-button.d.ts +14 -0
  70. package/components/counter/dist/auro-counter-group.d.ts +386 -0
  71. package/components/counter/dist/auro-counter-wrapper.d.ts +22 -0
  72. package/components/counter/dist/auro-counter.d.ts +113 -0
  73. package/components/counter/dist/bibtemplateVersion.d.ts +2 -0
  74. package/components/counter/dist/dropdownVersion.d.ts +2 -0
  75. package/components/counter/dist/helptextVersion.d.ts +2 -0
  76. package/components/counter/dist/iconVersion.d.ts +2 -0
  77. package/components/counter/dist/index.d.ts +3 -0
  78. package/components/counter/dist/index.js +10313 -0
  79. package/components/counter/dist/registered.js +10314 -0
  80. package/components/counter/dist/styles/color-css.d.ts +2 -0
  81. package/components/counter/dist/styles/counter-button-color-css.d.ts +2 -0
  82. package/components/counter/dist/styles/counter-button-css.d.ts +2 -0
  83. package/components/counter/dist/styles/counter-group-css.d.ts +2 -0
  84. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +2 -0
  85. package/components/counter/dist/styles/counter-wrapper-css.d.ts +2 -0
  86. package/components/counter/dist/styles/shapeSize-css.d.ts +2 -0
  87. package/components/counter/dist/styles/style-css.d.ts +2 -0
  88. package/components/counter/dist/styles/tokens-css.d.ts +2 -0
  89. package/components/datepicker/README.md +141 -0
  90. package/components/datepicker/demo/api.html +63 -0
  91. package/components/datepicker/demo/api.js +35 -0
  92. package/components/datepicker/demo/api.md +1529 -0
  93. package/components/datepicker/demo/api.min.js +29755 -0
  94. package/components/datepicker/demo/index.html +62 -0
  95. package/components/datepicker/demo/index.js +19 -0
  96. package/components/datepicker/demo/index.md +204 -0
  97. package/components/datepicker/demo/index.min.js +29476 -0
  98. package/components/datepicker/demo/readme.html +57 -0
  99. package/components/datepicker/demo/readme.md +141 -0
  100. package/components/datepicker/dist/auro-calendar-cell.d.ts +163 -0
  101. package/components/datepicker/dist/auro-calendar-month.d.ts +20 -0
  102. package/components/datepicker/dist/auro-calendar.d.ts +133 -0
  103. package/components/datepicker/dist/auro-datepicker.d.ts +625 -0
  104. package/components/datepicker/dist/bibtemplateVersion.d.ts +2 -0
  105. package/components/datepicker/dist/buttonVersion.d.ts +2 -0
  106. package/components/datepicker/dist/dropdownVersion.d.ts +2 -0
  107. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  108. package/components/datepicker/dist/index.d.ts +2 -0
  109. package/components/datepicker/dist/index.js +29406 -0
  110. package/components/datepicker/dist/inputVersion.d.ts +2 -0
  111. package/components/datepicker/dist/popoverVersion.d.ts +2 -0
  112. package/components/datepicker/dist/registered.js +29406 -0
  113. package/components/datepicker/dist/styles/classic/color-css.d.ts +2 -0
  114. package/components/datepicker/dist/styles/classic/style-css.d.ts +2 -0
  115. package/components/datepicker/dist/styles/color-calendar-css.d.ts +2 -0
  116. package/components/datepicker/dist/styles/color-cell-css.d.ts +2 -0
  117. package/components/datepicker/dist/styles/color-css.d.ts +2 -0
  118. package/components/datepicker/dist/styles/color-month-css.d.ts +2 -0
  119. package/components/datepicker/dist/styles/shapeSize-css.d.ts +2 -0
  120. package/components/datepicker/dist/styles/snowflake/color-css.d.ts +2 -0
  121. package/components/datepicker/dist/styles/snowflake/style-css.d.ts +2 -0
  122. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +2 -0
  123. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +2 -0
  124. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +2 -0
  125. package/components/datepicker/dist/styles/style-css.d.ts +2 -0
  126. package/components/datepicker/dist/styles/tokens-css.d.ts +2 -0
  127. package/components/datepicker/dist/utilities.d.ts +78 -0
  128. package/components/datepicker/dist/utilitiesCalendar.d.ts +38 -0
  129. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +50 -0
  130. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +5 -0
  131. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +60 -0
  132. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +1 -0
  133. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +57 -0
  134. package/components/dropdown/README.md +144 -0
  135. package/components/dropdown/demo/api.html +63 -0
  136. package/components/dropdown/demo/api.js +21 -0
  137. package/components/dropdown/demo/api.md +1266 -0
  138. package/components/dropdown/demo/api.min.js +4442 -0
  139. package/components/dropdown/demo/index.html +61 -0
  140. package/components/dropdown/demo/index.js +19 -0
  141. package/components/dropdown/demo/index.md +337 -0
  142. package/components/dropdown/demo/index.min.js +4405 -0
  143. package/components/dropdown/demo/readme.html +57 -0
  144. package/components/dropdown/demo/readme.md +144 -0
  145. package/components/dropdown/dist/auro-dropdown.d.ts +425 -0
  146. package/components/dropdown/dist/auro-dropdownBib.d.ts +68 -0
  147. package/components/dropdown/dist/dropdownVersion.d.ts +2 -0
  148. package/components/dropdown/dist/helptextVersion.d.ts +2 -0
  149. package/components/dropdown/dist/iconVersion.d.ts +2 -0
  150. package/components/dropdown/dist/index.d.ts +2 -0
  151. package/components/dropdown/dist/index.js +4350 -0
  152. package/components/dropdown/dist/registered.js +4350 -0
  153. package/components/dropdown/dist/styles/classic/bibColors-css.d.ts +2 -0
  154. package/components/dropdown/dist/styles/classic/bibStyles-css.d.ts +2 -0
  155. package/components/dropdown/dist/styles/classic/color-css.d.ts +2 -0
  156. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  157. package/components/dropdown/dist/styles/color-css.d.ts +2 -0
  158. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  159. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  160. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  161. package/components/dropdown/dist/styles/style-css.d.ts +2 -0
  162. package/components/dropdown/dist/styles/tokens-css.d.ts +2 -0
  163. package/components/form/README.md +142 -0
  164. package/components/form/demo/api.html +56 -0
  165. package/components/form/demo/api.js +3 -0
  166. package/components/form/demo/api.md +51 -0
  167. package/components/form/demo/api.min.js +638 -0
  168. package/components/form/demo/autocomplete.html +31 -0
  169. package/components/form/demo/index.html +57 -0
  170. package/components/form/demo/index.js +4 -0
  171. package/components/form/demo/index.md +403 -0
  172. package/components/form/demo/index.min.js +639 -0
  173. package/components/form/demo/readme.html +57 -0
  174. package/components/form/demo/readme.md +142 -0
  175. package/components/form/demo/registerDemoDeps.js +23 -0
  176. package/components/form/demo/working.html +124 -0
  177. package/components/form/dist/auro-form.d.ts +223 -0
  178. package/components/form/dist/index.d.ts +2 -0
  179. package/components/form/dist/index.js +614 -0
  180. package/components/form/dist/registered.d.ts +1 -0
  181. package/components/form/dist/registered.js +614 -0
  182. package/components/form/dist/styles/style-css.d.ts +2 -0
  183. package/components/helptext/dist/auro-helptext.d.ts +59 -0
  184. package/components/helptext/dist/index.d.ts +2 -0
  185. package/components/helptext/dist/index.js +207 -0
  186. package/components/helptext/dist/registered.js +207 -0
  187. package/components/helptext/dist/styles/color-css.d.ts +2 -0
  188. package/components/helptext/dist/styles/style-css.d.ts +2 -0
  189. package/components/helptext/dist/styles/tokens-css.d.ts +2 -0
  190. package/components/input/README.md +139 -0
  191. package/components/input/demo/api.html +48 -0
  192. package/components/input/demo/api.js +29 -0
  193. package/components/input/demo/api.md +1366 -0
  194. package/components/input/demo/api.min.js +8542 -0
  195. package/components/input/demo/index.html +49 -0
  196. package/components/input/demo/index.js +20 -0
  197. package/components/input/demo/index.md +270 -0
  198. package/components/input/demo/index.min.js +8461 -0
  199. package/components/input/demo/readme.html +57 -0
  200. package/components/input/demo/readme.md +139 -0
  201. package/components/input/dist/auro-input.d.ts +167 -0
  202. package/components/input/dist/base-input.d.ts +566 -0
  203. package/components/input/dist/buttonVersion.d.ts +2 -0
  204. package/components/input/dist/helptextVersion.d.ts +2 -0
  205. package/components/input/dist/i18n.d.ts +18 -0
  206. package/components/input/dist/iconVersion.d.ts +2 -0
  207. package/components/input/dist/index.d.ts +2 -0
  208. package/components/input/dist/index.js +8367 -0
  209. package/components/input/dist/registered.js +8367 -0
  210. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  211. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  212. package/components/input/dist/styles/color-css.d.ts +2 -0
  213. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  214. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  215. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  216. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  217. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  218. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  219. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  220. package/components/input/dist/styles/mixins-css.d.ts +2 -0
  221. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  222. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  223. package/components/input/dist/styles/style-css.d.ts +2 -0
  224. package/components/input/dist/styles/tokens-css.d.ts +2 -0
  225. package/components/input/dist/utilities.d.ts +25 -0
  226. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  227. package/components/layoutElement/dist/index.d.ts +2 -0
  228. package/components/layoutElement/dist/index.js +98 -0
  229. package/components/layoutElement/dist/registered.js +98 -0
  230. package/components/menu/README.md +145 -0
  231. package/components/menu/demo/api.html +62 -0
  232. package/components/menu/demo/api.js +27 -0
  233. package/components/menu/demo/api.md +1011 -0
  234. package/components/menu/demo/api.min.js +1762 -0
  235. package/components/menu/demo/index.html +58 -0
  236. package/components/menu/demo/index.js +28 -0
  237. package/components/menu/demo/index.md +61 -0
  238. package/components/menu/demo/index.min.js +1708 -0
  239. package/components/menu/demo/readme.html +57 -0
  240. package/components/menu/demo/readme.md +145 -0
  241. package/components/menu/dist/auro-menu-utils.d.ts +34 -0
  242. package/components/menu/dist/auro-menu.d.ts +246 -0
  243. package/components/menu/dist/auro-menuoption.d.ts +81 -0
  244. package/components/menu/dist/dropdownVersion.d.ts +2 -0
  245. package/components/menu/dist/iconVersion.d.ts +2 -0
  246. package/components/menu/dist/index.d.ts +4 -0
  247. package/components/menu/dist/index.js +1691 -0
  248. package/components/menu/dist/registered.js +1651 -0
  249. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  250. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  251. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  252. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  253. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  254. package/components/radio/README.md +137 -0
  255. package/components/radio/demo/api.html +59 -0
  256. package/components/radio/demo/api.js +19 -0
  257. package/components/radio/demo/api.md +602 -0
  258. package/components/radio/demo/api.min.js +1951 -0
  259. package/components/radio/demo/index.html +56 -0
  260. package/components/radio/demo/index.js +8 -0
  261. package/components/radio/demo/index.md +150 -0
  262. package/components/radio/demo/index.min.js +1908 -0
  263. package/components/radio/demo/readme.html +57 -0
  264. package/components/radio/demo/readme.md +137 -0
  265. package/components/radio/dist/auro-radio-group.d.ts +194 -0
  266. package/components/radio/dist/auro-radio.d.ts +147 -0
  267. package/components/radio/dist/helptextVersion.d.ts +2 -0
  268. package/components/radio/dist/index.d.ts +3 -0
  269. package/components/radio/dist/index.js +1857 -0
  270. package/components/radio/dist/registered.js +1858 -0
  271. package/components/radio/dist/styles/auro-radio-group-css.d.ts +2 -0
  272. package/components/radio/dist/styles/color-css.d.ts +2 -0
  273. package/components/radio/dist/styles/groupColor-css.d.ts +2 -0
  274. package/components/radio/dist/styles/style-css.d.ts +2 -0
  275. package/components/radio/dist/styles/tokens-css.d.ts +2 -0
  276. package/components/select/README.md +145 -0
  277. package/components/select/demo/api.html +77 -0
  278. package/components/select/demo/api.js +35 -0
  279. package/components/select/demo/api.md +1413 -0
  280. package/components/select/demo/api.min.js +10502 -0
  281. package/components/select/demo/index.html +73 -0
  282. package/components/select/demo/index.js +9 -0
  283. package/components/select/demo/index.md +1151 -0
  284. package/components/select/demo/index.min.js +10390 -0
  285. package/components/select/demo/readme.html +57 -0
  286. package/components/select/demo/readme.md +145 -0
  287. package/components/select/dist/auro-select.d.ts +512 -0
  288. package/components/select/dist/bibtemplateVersion.d.ts +2 -0
  289. package/components/select/dist/dropdownVersion.d.ts +2 -0
  290. package/components/select/dist/helptextVersion.d.ts +2 -0
  291. package/components/select/dist/index.d.ts +2 -0
  292. package/components/select/dist/index.js +8898 -0
  293. package/components/select/dist/registered.js +8898 -0
  294. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  295. package/components/select/dist/styles/style-css.d.ts +2 -0
  296. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  297. package/package.json +218 -0
package/components/form/demo/readme.html ADDED
@@ -0,0 +1,57 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/index.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-form</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-form's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ </head>
37
+ <body class="auro-markdown">
38
+ <main></main>
39
+
40
+ <script type="module">
41
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
42
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
43
+ fetch('./readme.md')
44
+ .then((response) => response.text())
45
+ .then((text) => {
46
+ const rawHtml = marked.parse(text);
47
+ document.querySelector('main').innerHTML = rawHtml;
48
+ Prism.highlightAll();
49
+ })
50
+ </script>
51
+ <script type="module">
52
+ import { initExamples } from "./index.min.js";
53
+
54
+ initExamples();
55
+ </script>
56
+ </body>
57
+ </html>
package/components/form/demo/readme.md ADDED
@@ -0,0 +1,142 @@
1
+ <!--
2
+ The README.md file is a compiled document. No edits should be made directly to this file.
3
+
4
+ README.md is created by running `npm run build:docs`.
5
+
6
+ This file is generated based on a template fetched from
7
+ `../../docs/templates/componentReadmeTemplate.md`
8
+ and copied to `./componentDocs/README.md` each time the docs are compiled.
9
+
10
+ The following sections are editable by making changes to the following files:
11
+
12
+ | SECTION | DESCRIPTION | FILE LOCATION |
13
+ |------------------------|---------------------------------------------------|-------------------------------------|
14
+ | Description | Description of the component | `./docs/partials/description.md` |
15
+ | Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` |
16
+ | Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
17
+ | Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` |
18
+ -->
19
+
20
+ # Form
21
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
22
+ <!-- The below content is automatically added from ./docs/partials/description.md -->
23
+ `<auro-form>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) designed to
24
+ serve as the base logic for all auro-constructed forms.
25
+
26
+ It automatically "scrapes" its inner content for any auro form elements, and surfaces
27
+ them (along with events) to the parent form element as a JSON object.
28
+ <!-- AURO-GENERATED-CONTENT:END -->
29
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
30
+ <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
31
+ <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
32
+ <!-- AURO-GENERATED-CONTENT:END -->
33
+
34
+ ## Getting Started
35
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
36
+ <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
37
+
38
+ #### NPM Installation
39
+
40
+ ```shell
41
+ $ npm i @aurodesignsystem/auro-formkit
42
+ ```
43
+ <!-- AURO-GENERATED-CONTENT:END -->
44
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
45
+ <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
46
+
47
+ ### Import Options
48
+
49
+ #### Automatic Registration
50
+
51
+ For automatic registration, simply import the component:
52
+
53
+ ```javascript
54
+ // Registers <auro-form> automatically
55
+ import '@aurodesignsystem/auro-formkit/auro-form';
56
+ ```
57
+
58
+ #### Custom Registration
59
+
60
+ To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroForm.register('custom-form')` method on the component class and pass in a unique name.
61
+
62
+ ```javascript
63
+ // Import the class only
64
+ import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
65
+
66
+ // Register with a custom name if desired
67
+ AuroForm.register('custom-form');
68
+ ```
69
+
70
+ #### TypeScript Module Resolution
71
+
72
+ When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
73
+
74
+ ```json
75
+ {
76
+ "compilerOptions": {
77
+ "moduleResolution": "bundler"
78
+ }
79
+ }
80
+ ```
81
+
82
+ This configuration enables proper module resolution for the component's TypeScript files.
83
+ <!-- AURO-GENERATED-CONTENT:END -->
84
+ **Reference component in HTML**
85
+
86
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
87
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
88
+
89
+ ```html
90
+ <auro-form>
91
+ <auro-input id="search-box" name="searchBox" required>
92
+ <span slot="label">Search flights</span>
93
+ </auro-input>
94
+ <auro-button type="submit">Submit</auro-button>
95
+ </auro-form>
96
+ ```
97
+ <!-- AURO-GENERATED-CONTENT:END -->
98
+
99
+ ### Design Token CSS Custom Property dependency
100
+
101
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
102
+ The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
103
+
104
+ <!-- AURO-GENERATED-CONTENT:END -->
105
+
106
+ ## Install from CDN
107
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
108
+ <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
109
+ In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
110
+
111
+ ```html
112
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-form/+esm"></script>
113
+ ```
114
+ <!-- AURO-GENERATED-CONTENT:END -->
115
+
116
+ ## UI development browser support
117
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
118
+ For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
119
+
120
+ <!-- AURO-GENERATED-CONTENT:END -->
121
+
122
+ ## auro-form use cases
123
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
124
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
125
+ The `<auro-form>` element should be used in situations where users want to build HTML forms.
126
+ <!-- AURO-GENERATED-CONTENT:END -->
127
+
128
+ ## Formkit development
129
+
130
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
131
+ <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
132
+
133
+ ### Filtering
134
+
135
+ Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
136
+
137
+ To only develop a single component, use the `--filter` flag:
138
+
139
+ ```shell
140
+ npx turbo dev --filter=@aurodesignsystem/auro-input
141
+ ```
142
+ <!-- AURO-GENERATED-CONTENT:END -->
package/components/form/demo/registerDemoDeps.js ADDED
@@ -0,0 +1,23 @@
1
+ import "@aurodesignsystem/auro-button";
2
+ import {AuroInput} from "@aurodesignsystem/auro-input";
3
+ import {AuroDatePicker} from "@aurodesignsystem/auro-datepicker";
4
+ import {AuroCounter, AuroCounterGroup} from "@aurodesignsystem/auro-counter";
5
+ import {AuroRadio, AuroRadioGroup} from "@aurodesignsystem/auro-radio";
6
+ import {AuroCheckbox, AuroCheckboxGroup} from "@aurodesignsystem/auro-checkbox";
7
+ import {AuroCombobox} from "@aurodesignsystem/auro-combobox";
8
+ import {AuroMenu, AuroMenuOption} from "@aurodesignsystem/auro-menu";
9
+ import {AuroSelect} from "@aurodesignsystem/auro-select";
10
+
11
+ AuroInput.register();
12
+ AuroInput.register('auro-input-two');
13
+ AuroDatePicker.register();
14
+ AuroCounter.register();
15
+ AuroCounterGroup.register();
16
+ AuroRadio.register();
17
+ AuroRadioGroup.register();
18
+ AuroCheckbox.register();
19
+ AuroCheckboxGroup.register();
20
+ AuroCombobox.register();
21
+ AuroMenu.register();
22
+ AuroMenuOption.register();
23
+ AuroSelect.register();
package/components/form/demo/working.html ADDED
@@ -0,0 +1,124 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/index.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-form</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-form's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ </head>
37
+ <body class="auro-markdown">
38
+ <main>
39
+ <style>
40
+ .submitBlock {
41
+ margin-top: 1rem;
42
+ display: flex;
43
+ justify-content: flex-end;
44
+ gap: 1rem;
45
+ }
46
+
47
+ .datepickerBlock {
48
+ margin-top: 1rem;
49
+ }
50
+
51
+ auro-form {
52
+ display: block;
53
+ width: 100%;
54
+ padding: 1rem;
55
+ border: 1px solid #2a2a2a;
56
+ border-radius: 1rem;
57
+ }
58
+ </style>
59
+
60
+ <h2>auro-form testing</h2>
61
+ <auro-form>
62
+ <auro-input id="first-name" name="firstName" required>
63
+ <span slot="label">First Name</span>
64
+ </auro-input>
65
+ <div>
66
+ <auro-input id="last-name" name="lastName" required>
67
+ <span slot="label">Last Name</span>
68
+ </auro-input>
69
+ </div>
70
+ <div>
71
+ <div>
72
+ <auro-input id="occupation" name="occupation" required>
73
+ <span slot="label">Occupation</span>
74
+ </auro-input>
75
+ </div>
76
+ </div>
77
+
78
+ <auro-input-two id="cool-fact" name="coolFact" required>
79
+ <span slot="label">Cool Fact</span>
80
+ </auro-input-two>
81
+
82
+ <div class="datepickerBlock">
83
+ <h4>Pick a cool date</h4>
84
+ <auro-datepicker id="date-example" name="dateExample" required>
85
+ <span slot="fromLabel">Choose a date</span>
86
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
87
+ </auro-datepicker>
88
+ </div>
89
+
90
+ <div class="datepickerBlock">
91
+ <h4>Pick a date range</h4>
92
+ <auro-datepicker id="date-range" name="dateRange" required range>
93
+ <span slot="fromLabel">Start</span>
94
+ <span slot="toLabel">End</span>
95
+ <span slot="bib.fullscreen.dateLabel">Choose a range</span>
96
+ </auro-datepicker>
97
+ </div>
98
+
99
+ <div class="submitBlock">
100
+ <auro-button type="reset">Reset</auro-button>
101
+ <auro-button type="submit">Submit</auro-button>
102
+ </div>
103
+ </auro-form>
104
+ </main>
105
+
106
+ <!-- Form elements MUST be registered BEFORE form if custom names are used -->
107
+ <script type="module" data-demo-script="true" src="./registerDemoDeps.js"></script>
108
+ <script type="module" data-demo-script="true" src="./index.js"></script>
109
+ <!--<script type="module" data-demo-script="true" src="~@auro-formkit/auro-input/dist/index.min.js"></script>-->
110
+
111
+ <script>
112
+ const form = document.querySelector('auro-form');
113
+ form.addEventListener('submit', (event) => {
114
+ console.log(event)
115
+
116
+ console.log(event.target.value)
117
+ })
118
+ </script>
119
+
120
+ <!-- If additional elements are needed for the demo, add them here. -->
121
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
122
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
123
+ </body>
124
+ </html>
package/components/form/dist/auro-form.d.ts ADDED
@@ -0,0 +1,223 @@
1
+ /**
2
+ * @typedef {Object} FormStateMember - The form state member.
3
+ * @property {string | number | boolean | string[] | null} value - The value of the form element.
4
+ * @property {ValidityState} validity - The validity state of the form element, stored when fired from the form element.
5
+ * @property {boolean} required - Whether the form element is required or not.
6
+ * @property {HTMLElement} element - Whether the form element is required or not.
7
+ */
8
+ /**
9
+ * @typedef {Object.<string, FormStateMember>} FormState - The form state.
10
+ */
11
+ /**
12
+ * The auro-form element provides users a way to ... (it would be great if you fill this out).
13
+ *
14
+ * @attr {Boolean} fixed - Uses fixed pixel values for element shape
15
+ * @attr {String} cssClass - Applies designated CSS class to demo element - you want to delete me!
16
+ * @event {Event} change - Fires when form state changes.
17
+ */
18
+ export class AuroForm extends LitElement {
19
+ static get properties(): {
20
+ formState: {
21
+ attribute: boolean;
22
+ };
23
+ _validity: {
24
+ attribute: boolean;
25
+ };
26
+ _isInitialState: {
27
+ attribute: boolean;
28
+ };
29
+ _elements: {
30
+ attribute: boolean;
31
+ };
32
+ _submitElements: {
33
+ attribute: boolean;
34
+ };
35
+ _resetElements: {
36
+ attribute: boolean;
37
+ };
38
+ };
39
+ static get formElementTags(): string[];
40
+ static get buttonElementTags(): string[];
41
+ static get styles(): import("lit").CSSResult[];
42
+ /**
43
+ * This will register this element with the browser.
44
+ * @param {string} [name="auro-form"] - The name of element that you want to register to.
45
+ *
46
+ * @example
47
+ * AuroForm.register("custom-form") // this will register this element to <custom-form/>
48
+ *
49
+ */
50
+ static register(name?: string): void;
51
+ /** @type {FormState} */
52
+ formState: FormState;
53
+ /** @type {"valid" | "invalid" | null} */
54
+ _validity: "valid" | "invalid" | null;
55
+ _isInitialState: boolean;
56
+ /** @type {(HTMLElement & {reset: () => void})[]} */
57
+ _elements: (HTMLElement & {
58
+ reset: () => void;
59
+ })[];
60
+ /** @type {HTMLButtonElement[]} */
61
+ _submitelements: HTMLButtonElement[];
62
+ /** @type {HTMLButtonElement[]} */
63
+ _resetElements: HTMLButtonElement[];
64
+ /**
65
+ * @private
66
+ * @type {MutationObserver[]}
67
+ */
68
+ private mutationObservers;
69
+ /**
70
+ * Reset fires an event called `reset` - just as you would expect from a normal form.
71
+ */
72
+ reset(): void;
73
+ /**
74
+ * Submit fires an event called `submit` - just as you would expect from a normal form.
75
+ */
76
+ submit(): void;
77
+ /**
78
+ * Shared input listener for all form elements.
79
+ * @private
80
+ * @param {Event} event - The event that is fired from the form element.
81
+ */
82
+ private sharedInputListener;
83
+ /**
84
+ * Shared validation listener for all form elements.
85
+ * @private
86
+ * @param {Event} event - The event that is fired from the form element.
87
+ */
88
+ private sharedValidationListener;
89
+ /**
90
+ * Mutation observer for form elements. Slot change does not trigger unless
91
+ * root-level elements are added/removed. This is a workaround to ensure
92
+ * nested form elements are also observed.
93
+ *
94
+ * @private
95
+ * @returns {void}
96
+ */
97
+ private mutationEventListener;
98
+ /**
99
+ * Compare tag name with element to identify it (for API purposes).
100
+ * @param {string} elementTag - The HTML tag name like `auro-datepicker`.
101
+ * @param {HTMLElement} element - The actual HTML element to compare.
102
+ * @returns {boolean}
103
+ * @private
104
+ */
105
+ private _isElementTag;
106
+ /**
107
+ * Shared code for determining if an element is something we care about (submit, form element, etc.).
108
+ * @param {string[]} collection - The array to use for tag name search.
109
+ * @param {HTMLElement} element - The element to compare against the master list.
110
+ * @returns {boolean}
111
+ * @private
112
+ */
113
+ private _isInElementCollection;
114
+ /**
115
+ * Check if the tag name is a form element.
116
+ * @param {HTMLElement} element - The element to check (attr or tag name).
117
+ * @returns {boolean}
118
+ */
119
+ isFormElement(element: HTMLElement): boolean;
120
+ /**
121
+ * Validates if an event is from a valid form element with a name.
122
+ * @param {Event} event - The event to validate.
123
+ * @returns {boolean} - True if event is valid for processing.
124
+ * @private
125
+ */
126
+ private _eventIsValidFormEvent;
127
+ /**
128
+ * Check if the tag name is a button element.
129
+ * @param {HTMLElement} element - The element to check.
130
+ * @returns {boolean}
131
+ */
132
+ isButtonElement(element: HTMLElement): boolean;
133
+ /**
134
+ * Reduce the form value into a key-value pair.
135
+ *
136
+ * NOTE: form keys use `name` first, and `id` second if `name` is not available.
137
+ * This follows standard HTML5 form behavior - submission uses `name` by default when creating
138
+ * the FormData object.
139
+ *
140
+ * @returns {Record<string, string | number | boolean | string[] | null>} The form value.
141
+ */
142
+ get value(): Record<string, string | number | boolean | string[] | null>;
143
+ /**
144
+ * Getter for internal _submitElements.
145
+ * @returns {HTMLButtonElement[]}
146
+ */
147
+ get submitElements(): HTMLButtonElement[];
148
+ /**
149
+ * Returns a collection of elements that will reset the form.
150
+ * @returns {HTMLButtonElement[]}
151
+ */
152
+ get resetElements(): HTMLButtonElement[];
153
+ /**
154
+ * Infer validity status based on current formState.
155
+ * @private
156
+ */
157
+ private _calculateValidity;
158
+ /**
159
+ * Current validity state of the form, based on form element events.
160
+ * @returns {"valid" | "invalid"}
161
+ */
162
+ get validity(): "valid" | "invalid";
163
+ _setInitialState(): void;
164
+ /**
165
+ * Mostly internal way to determine if a form is in the initial state.
166
+ * @returns {boolean}
167
+ */
168
+ get isInitialState(): boolean;
169
+ setDisabledStateOnButtons(): void;
170
+ /**
171
+ * Construct the query strings from elements, append them together, execute, and return the NodeList.
172
+ * @returns {NodeList}
173
+ */
174
+ queryAuroElements(): NodeList;
175
+ /**
176
+ * Store an element in state and on the _elements array.
177
+ * @param {HTMLElement} element - The element to add to our state.
178
+ * @private
179
+ */
180
+ private _addElementToState;
181
+ /**
182
+ * Initialize (or reinitialize) the form state.
183
+ */
184
+ initializeState(): void;
185
+ _attachEventListeners(): void;
186
+ firstUpdated(_changedProperties: any): void;
187
+ updated(_changedProperties: any): void;
188
+ /**
189
+ * Slot change event listener. This is the main entry point for the form element.
190
+ * @param {Event} event - The slot change event.
191
+ * @returns {void}
192
+ */
193
+ onSlotChange(event: Event): void;
194
+ render(): import("lit-html").TemplateResult<1>;
195
+ }
196
+ /**
197
+ * - The form state member.
198
+ */
199
+ export type FormStateMember = {
200
+ /**
201
+ * - The value of the form element.
202
+ */
203
+ value: string | number | boolean | string[] | null;
204
+ /**
205
+ * - The validity state of the form element, stored when fired from the form element.
206
+ */
207
+ validity: ValidityState;
208
+ /**
209
+ * - Whether the form element is required or not.
210
+ */
211
+ required: boolean;
212
+ /**
213
+ * - Whether the form element is required or not.
214
+ */
215
+ element: HTMLElement;
216
+ };
217
+ /**
218
+ * - The form state.
219
+ */
220
+ export type FormState = {
221
+ [x: string]: FormStateMember;
222
+ };
223
+ import { LitElement } from "lit";
package/components/form/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { AuroForm };
2
+ import { AuroForm } from './auro-form.js';