@aurodesignsystem-dev/auro-formkit 0.0.0-pr593.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 (268) 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 +39 -0
  6. package/components/bibtemplate/dist/headerVersion.d.ts +2 -0
  7. package/components/bibtemplate/dist/iconVersion.d.ts +2 -0
  8. package/components/bibtemplate/dist/index.d.ts +2 -0
  9. package/components/bibtemplate/dist/index.js +709 -0
  10. package/components/bibtemplate/dist/registered.js +709 -0
  11. package/components/bibtemplate/dist/styles/color-css.d.ts +2 -0
  12. package/components/bibtemplate/dist/styles/style-css.d.ts +2 -0
  13. package/components/bibtemplate/dist/styles/tokens-css.d.ts +2 -0
  14. package/components/checkbox/README.md +142 -0
  15. package/components/checkbox/demo/api.html +55 -0
  16. package/components/checkbox/demo/api.js +17 -0
  17. package/components/checkbox/demo/api.md +401 -0
  18. package/components/checkbox/demo/api.min.js +1833 -0
  19. package/components/checkbox/demo/index.html +51 -0
  20. package/components/checkbox/demo/index.js +8 -0
  21. package/components/checkbox/demo/index.md +327 -0
  22. package/components/checkbox/demo/index.min.js +1808 -0
  23. package/components/checkbox/demo/readme.html +50 -0
  24. package/components/checkbox/demo/readme.md +142 -0
  25. package/components/checkbox/dist/auro-checkbox-group.d.ts +166 -0
  26. package/components/checkbox/dist/auro-checkbox.d.ts +129 -0
  27. package/components/checkbox/dist/helptextVersion.d.ts +2 -0
  28. package/components/checkbox/dist/index.d.ts +3 -0
  29. package/components/checkbox/dist/index.js +1757 -0
  30. package/components/checkbox/dist/registered.js +1758 -0
  31. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +2 -0
  32. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +2 -0
  33. package/components/checkbox/dist/styles/color-css.d.ts +2 -0
  34. package/components/checkbox/dist/styles/colorGroup-css.d.ts +2 -0
  35. package/components/checkbox/dist/styles/tokens-css.d.ts +2 -0
  36. package/components/combobox/README.md +152 -0
  37. package/components/combobox/demo/api.html +57 -0
  38. package/components/combobox/demo/api.js +36 -0
  39. package/components/combobox/demo/api.md +1209 -0
  40. package/components/combobox/demo/api.min.js +15117 -0
  41. package/components/combobox/demo/index.html +56 -0
  42. package/components/combobox/demo/index.js +26 -0
  43. package/components/combobox/demo/index.md +621 -0
  44. package/components/combobox/demo/index.min.js +14971 -0
  45. package/components/combobox/demo/readme.html +50 -0
  46. package/components/combobox/demo/readme.md +152 -0
  47. package/components/combobox/dist/auro-combobox.d.ts +384 -0
  48. package/components/combobox/dist/bibtemplateVersion.d.ts +2 -0
  49. package/components/combobox/dist/dropdownVersion.d.ts +2 -0
  50. package/components/combobox/dist/index.d.ts +2 -0
  51. package/components/combobox/dist/index.js +13554 -0
  52. package/components/combobox/dist/inputVersion.d.ts +2 -0
  53. package/components/combobox/dist/registered.js +13556 -0
  54. package/components/combobox/dist/styles/style-css.d.ts +2 -0
  55. package/components/counter/README.md +146 -0
  56. package/components/counter/demo/api.html +54 -0
  57. package/components/counter/demo/api.js +20 -0
  58. package/components/counter/demo/api.md +584 -0
  59. package/components/counter/demo/api.min.js +7111 -0
  60. package/components/counter/demo/index.html +54 -0
  61. package/components/counter/demo/index.js +21 -0
  62. package/components/counter/demo/index.md +244 -0
  63. package/components/counter/demo/index.min.js +7075 -0
  64. package/components/counter/demo/readme.html +50 -0
  65. package/components/counter/demo/readme.md +146 -0
  66. package/components/counter/dist/auro-counter-button.d.ts +12 -0
  67. package/components/counter/dist/auro-counter-group.d.ts +235 -0
  68. package/components/counter/dist/auro-counter-wrapper.d.ts +22 -0
  69. package/components/counter/dist/auro-counter.d.ts +97 -0
  70. package/components/counter/dist/bibtemplateVersion.d.ts +2 -0
  71. package/components/counter/dist/dropdownVersion.d.ts +2 -0
  72. package/components/counter/dist/iconVersion.d.ts +2 -0
  73. package/components/counter/dist/index.d.ts +3 -0
  74. package/components/counter/dist/index.js +7018 -0
  75. package/components/counter/dist/registered.js +7019 -0
  76. package/components/counter/dist/styles/color-css.d.ts +2 -0
  77. package/components/counter/dist/styles/counter-button-color-css.d.ts +2 -0
  78. package/components/counter/dist/styles/counter-button-css.d.ts +2 -0
  79. package/components/counter/dist/styles/counter-group-css.d.ts +2 -0
  80. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +2 -0
  81. package/components/counter/dist/styles/counter-wrapper-css.d.ts +2 -0
  82. package/components/counter/dist/styles/style-css.d.ts +2 -0
  83. package/components/counter/dist/styles/tokens-css.d.ts +2 -0
  84. package/components/datepicker/README.md +140 -0
  85. package/components/datepicker/demo/api.html +57 -0
  86. package/components/datepicker/demo/api.js +35 -0
  87. package/components/datepicker/demo/api.md +1479 -0
  88. package/components/datepicker/demo/api.min.js +24534 -0
  89. package/components/datepicker/demo/index.html +56 -0
  90. package/components/datepicker/demo/index.js +19 -0
  91. package/components/datepicker/demo/index.md +112 -0
  92. package/components/datepicker/demo/index.min.js +24255 -0
  93. package/components/datepicker/demo/readme.html +50 -0
  94. package/components/datepicker/demo/readme.md +140 -0
  95. package/components/datepicker/dist/auro-calendar-cell.d.ts +163 -0
  96. package/components/datepicker/dist/auro-calendar-month.d.ts +20 -0
  97. package/components/datepicker/dist/auro-calendar.d.ts +133 -0
  98. package/components/datepicker/dist/auro-datepicker.d.ts +466 -0
  99. package/components/datepicker/dist/bibtemplateVersion.d.ts +2 -0
  100. package/components/datepicker/dist/buttonVersion.d.ts +2 -0
  101. package/components/datepicker/dist/dropdownVersion.d.ts +2 -0
  102. package/components/datepicker/dist/index.d.ts +2 -0
  103. package/components/datepicker/dist/index.js +24185 -0
  104. package/components/datepicker/dist/inputVersion.d.ts +2 -0
  105. package/components/datepicker/dist/popoverVersion.d.ts +2 -0
  106. package/components/datepicker/dist/registered.js +24185 -0
  107. package/components/datepicker/dist/styles/color-calendar-css.d.ts +2 -0
  108. package/components/datepicker/dist/styles/color-cell-css.d.ts +2 -0
  109. package/components/datepicker/dist/styles/color-css.d.ts +2 -0
  110. package/components/datepicker/dist/styles/color-month-css.d.ts +2 -0
  111. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +2 -0
  112. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +2 -0
  113. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +2 -0
  114. package/components/datepicker/dist/styles/style-css.d.ts +2 -0
  115. package/components/datepicker/dist/styles/tokens-css.d.ts +2 -0
  116. package/components/datepicker/dist/utilities.d.ts +78 -0
  117. package/components/datepicker/dist/utilitiesCalendar.d.ts +38 -0
  118. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +50 -0
  119. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +5 -0
  120. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +60 -0
  121. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +1 -0
  122. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +57 -0
  123. package/components/dropdown/README.md +144 -0
  124. package/components/dropdown/demo/api.html +57 -0
  125. package/components/dropdown/demo/api.js +21 -0
  126. package/components/dropdown/demo/api.md +1434 -0
  127. package/components/dropdown/demo/api.min.js +3826 -0
  128. package/components/dropdown/demo/index.html +55 -0
  129. package/components/dropdown/demo/index.js +19 -0
  130. package/components/dropdown/demo/index.md +510 -0
  131. package/components/dropdown/demo/index.min.js +3789 -0
  132. package/components/dropdown/demo/readme.html +50 -0
  133. package/components/dropdown/demo/readme.md +144 -0
  134. package/components/dropdown/dist/auro-dropdown.d.ts +406 -0
  135. package/components/dropdown/dist/auro-dropdownBib.d.ts +46 -0
  136. package/components/dropdown/dist/dropdownVersion.d.ts +2 -0
  137. package/components/dropdown/dist/helptextVersion.d.ts +2 -0
  138. package/components/dropdown/dist/iconVersion.d.ts +2 -0
  139. package/components/dropdown/dist/index.d.ts +2 -0
  140. package/components/dropdown/dist/index.js +3734 -0
  141. package/components/dropdown/dist/registered.js +3734 -0
  142. package/components/dropdown/dist/styles/bibColors-css.d.ts +2 -0
  143. package/components/dropdown/dist/styles/bibStyles-css.d.ts +2 -0
  144. package/components/dropdown/dist/styles/color-css.d.ts +2 -0
  145. package/components/dropdown/dist/styles/style-css.d.ts +2 -0
  146. package/components/dropdown/dist/styles/tokens-css.d.ts +2 -0
  147. package/components/form/README.md +142 -0
  148. package/components/form/demo/api.html +49 -0
  149. package/components/form/demo/api.js +3 -0
  150. package/components/form/demo/api.md +51 -0
  151. package/components/form/demo/api.min.js +638 -0
  152. package/components/form/demo/autocomplete.html +15 -0
  153. package/components/form/demo/index.html +50 -0
  154. package/components/form/demo/index.js +4 -0
  155. package/components/form/demo/index.md +403 -0
  156. package/components/form/demo/index.min.js +639 -0
  157. package/components/form/demo/readme.html +50 -0
  158. package/components/form/demo/readme.md +142 -0
  159. package/components/form/demo/registerDemoDeps.js +23 -0
  160. package/components/form/demo/working.html +118 -0
  161. package/components/form/dist/auro-form.d.ts +223 -0
  162. package/components/form/dist/index.d.ts +2 -0
  163. package/components/form/dist/index.js +614 -0
  164. package/components/form/dist/registered.d.ts +1 -0
  165. package/components/form/dist/registered.js +614 -0
  166. package/components/form/dist/styles/style-css.d.ts +2 -0
  167. package/components/helptext/dist/auro-helptext.d.ts +61 -0
  168. package/components/helptext/dist/index.d.ts +2 -0
  169. package/components/helptext/dist/index.js +209 -0
  170. package/components/helptext/dist/registered.js +209 -0
  171. package/components/helptext/dist/styles/color-css.d.ts +2 -0
  172. package/components/helptext/dist/styles/style-css.d.ts +2 -0
  173. package/components/helptext/dist/styles/tokens-css.d.ts +2 -0
  174. package/components/input/README.md +135 -0
  175. package/components/input/demo/api.html +42 -0
  176. package/components/input/demo/api.js +29 -0
  177. package/components/input/demo/api.md +1252 -0
  178. package/components/input/demo/api.min.js +7238 -0
  179. package/components/input/demo/index.html +43 -0
  180. package/components/input/demo/index.js +20 -0
  181. package/components/input/demo/index.md +202 -0
  182. package/components/input/demo/index.min.js +7157 -0
  183. package/components/input/demo/readme.html +50 -0
  184. package/components/input/demo/readme.md +135 -0
  185. package/components/input/dist/auro-input.d.ts +31 -0
  186. package/components/input/dist/base-input.d.ts +512 -0
  187. package/components/input/dist/buttonVersion.d.ts +2 -0
  188. package/components/input/dist/helptextVersion.d.ts +2 -0
  189. package/components/input/dist/i18n.d.ts +18 -0
  190. package/components/input/dist/iconVersion.d.ts +2 -0
  191. package/components/input/dist/index.d.ts +2 -0
  192. package/components/input/dist/index.js +7063 -0
  193. package/components/input/dist/registered.js +7063 -0
  194. package/components/input/dist/styles/borders-css.d.ts +2 -0
  195. package/components/input/dist/styles/color-css.d.ts +2 -0
  196. package/components/input/dist/styles/input-css.d.ts +2 -0
  197. package/components/input/dist/styles/label-css.d.ts +2 -0
  198. package/components/input/dist/styles/mixins-css.d.ts +2 -0
  199. package/components/input/dist/styles/notificationIcons-css.d.ts +2 -0
  200. package/components/input/dist/styles/style-css.d.ts +2 -0
  201. package/components/input/dist/styles/tokens-css.d.ts +2 -0
  202. package/components/input/dist/utilities.d.ts +25 -0
  203. package/components/menu/README.md +145 -0
  204. package/components/menu/demo/api.html +55 -0
  205. package/components/menu/demo/api.js +27 -0
  206. package/components/menu/demo/api.md +954 -0
  207. package/components/menu/demo/api.min.js +1538 -0
  208. package/components/menu/demo/index.html +52 -0
  209. package/components/menu/demo/index.js +28 -0
  210. package/components/menu/demo/index.md +61 -0
  211. package/components/menu/demo/index.min.js +1484 -0
  212. package/components/menu/demo/readme.html +50 -0
  213. package/components/menu/demo/readme.md +145 -0
  214. package/components/menu/dist/auro-menu-utils.d.ts +42 -0
  215. package/components/menu/dist/auro-menu.d.ts +205 -0
  216. package/components/menu/dist/auro-menuoption.d.ts +63 -0
  217. package/components/menu/dist/dropdownVersion.d.ts +2 -0
  218. package/components/menu/dist/iconVersion.d.ts +2 -0
  219. package/components/menu/dist/index.d.ts +4 -0
  220. package/components/menu/dist/index.js +1426 -0
  221. package/components/menu/dist/registered.js +1427 -0
  222. package/components/menu/dist/styles/color-menu-css.d.ts +2 -0
  223. package/components/menu/dist/styles/color-menuoption-css.d.ts +2 -0
  224. package/components/menu/dist/styles/style-menu-css.d.ts +2 -0
  225. package/components/menu/dist/styles/style-menuoption-css.d.ts +2 -0
  226. package/components/menu/dist/styles/tokens-css.d.ts +2 -0
  227. package/components/radio/README.md +137 -0
  228. package/components/radio/demo/api.html +53 -0
  229. package/components/radio/demo/api.js +19 -0
  230. package/components/radio/demo/api.md +562 -0
  231. package/components/radio/demo/api.min.js +1944 -0
  232. package/components/radio/demo/index.html +50 -0
  233. package/components/radio/demo/index.js +8 -0
  234. package/components/radio/demo/index.md +150 -0
  235. package/components/radio/demo/index.min.js +1901 -0
  236. package/components/radio/demo/readme.html +50 -0
  237. package/components/radio/demo/readme.md +137 -0
  238. package/components/radio/dist/auro-radio-group.d.ts +194 -0
  239. package/components/radio/dist/auro-radio.d.ts +144 -0
  240. package/components/radio/dist/helptextVersion.d.ts +2 -0
  241. package/components/radio/dist/index.d.ts +3 -0
  242. package/components/radio/dist/index.js +1850 -0
  243. package/components/radio/dist/registered.js +1851 -0
  244. package/components/radio/dist/styles/auro-radio-group-css.d.ts +2 -0
  245. package/components/radio/dist/styles/color-css.d.ts +2 -0
  246. package/components/radio/dist/styles/groupColor-css.d.ts +2 -0
  247. package/components/radio/dist/styles/style-css.d.ts +2 -0
  248. package/components/radio/dist/styles/tokens-css.d.ts +2 -0
  249. package/components/select/README.md +144 -0
  250. package/components/select/demo/api.html +71 -0
  251. package/components/select/demo/api.js +35 -0
  252. package/components/select/demo/api.md +1313 -0
  253. package/components/select/demo/api.min.js +7763 -0
  254. package/components/select/demo/index.html +66 -0
  255. package/components/select/demo/index.js +9 -0
  256. package/components/select/demo/index.md +815 -0
  257. package/components/select/demo/index.min.js +7651 -0
  258. package/components/select/demo/readme.html +50 -0
  259. package/components/select/demo/readme.md +144 -0
  260. package/components/select/dist/auro-select.d.ts +359 -0
  261. package/components/select/dist/bibtemplateVersion.d.ts +2 -0
  262. package/components/select/dist/dropdownVersion.d.ts +2 -0
  263. package/components/select/dist/index.d.ts +2 -0
  264. package/components/select/dist/index.js +6300 -0
  265. package/components/select/dist/registered.js +6300 -0
  266. package/components/select/dist/styles/style-css.d.ts +2 -0
  267. package/package.json +217 -0
  268. package/packages/build-tools/src/postinstall.mjs +12 -0
package/components/radio/demo/readme.html ADDED
@@ -0,0 +1,50 @@
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 Generator | auro-radio custom element</title>
20
+ <link
21
+ rel="stylesheet"
22
+ type="text/css"
23
+ href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
+ />
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
27
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
+ </head>
30
+ <body class="auro-markdown">
31
+ <main></main>
32
+
33
+ <script type="module">
34
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
35
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
36
+ fetch('./readme.md')
37
+ .then((response) => response.text())
38
+ .then((text) => {
39
+ const rawHtml = marked.parse(text);
40
+ document.querySelector('main').innerHTML = rawHtml;
41
+ Prism.highlightAll();
42
+ })
43
+ </script>
44
+ <script type="module">
45
+ import { initExamples } from "./index.min.js";
46
+
47
+ initExamples();
48
+ </script>
49
+ </body>
50
+ </html>
package/components/radio/demo/readme.md ADDED
@@ -0,0 +1,137 @@
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
+ # Radio
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-radio>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) that is rendered as a small circle, which is filled or highlighted when selected. Only one `<auro-radio>` component in a given `<auro-radio-group>` can be selected at the same time.
24
+ <!-- AURO-GENERATED-CONTENT:END -->
25
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
26
+ <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
27
+ <!-- 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. -->
28
+ <!-- AURO-GENERATED-CONTENT:END -->
29
+
30
+ ## Getting Started
31
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
32
+ <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
33
+
34
+ #### NPM Installation
35
+
36
+ ```shell
37
+ $ npm i @aurodesignsystem/auro-formkit
38
+ ```
39
+ <!-- AURO-GENERATED-CONTENT:END -->
40
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
41
+ <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
42
+
43
+ ### Import Options
44
+
45
+ #### Automatic Registration
46
+
47
+ For automatic registration, simply import the component:
48
+
49
+ ```javascript
50
+ // Registers <auro-radio> automatically
51
+ import '@aurodesignsystem/auro-formkit/auro-radio';
52
+ ```
53
+
54
+ #### Custom Registration
55
+
56
+ To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroRadio.register('custom-radio')` method on the component class and pass in a unique name.
57
+
58
+ ```javascript
59
+ // Import the class only
60
+ import { AuroRadio } from '@aurodesignsystem/auro-formkit/auro-radio/class';
61
+
62
+ // Register with a custom name if desired
63
+ AuroRadio.register('custom-radio');
64
+ ```
65
+
66
+ #### TypeScript Module Resolution
67
+
68
+ When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
69
+
70
+ ```json
71
+ {
72
+ "compilerOptions": {
73
+ "moduleResolution": "bundler"
74
+ }
75
+ }
76
+ ```
77
+
78
+ This configuration enables proper module resolution for the component's TypeScript files.
79
+ <!-- AURO-GENERATED-CONTENT:END -->
80
+ **Reference component in HTML**
81
+
82
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
83
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
84
+
85
+ ```html
86
+ <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
87
+ ```
88
+ <!-- AURO-GENERATED-CONTENT:END -->
89
+
90
+ ### Design Token CSS Custom Property dependency
91
+
92
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
93
+ The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
94
+
95
+ <!-- AURO-GENERATED-CONTENT:END -->
96
+
97
+ ## Install from CDN
98
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
99
+ <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
100
+ 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.
101
+
102
+ ```html
103
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-radio/+esm"></script>
104
+ ```
105
+ <!-- AURO-GENERATED-CONTENT:END -->
106
+
107
+ ## UI development browser support
108
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
109
+ For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
110
+
111
+ <!-- AURO-GENERATED-CONTENT:END -->
112
+
113
+ ## auro-radio use cases
114
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
115
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
116
+ The `<auro-radio>` element is designed to be a single component for the use of creating an input `type="radio"` with an associated `<label>` that meets all use case and accessibility standards.
117
+
118
+ The following examples illustrate fully functional `<auro-radio>` elements wrapped with the `<auro-radio-group>` element. The `<auro-radio-group>` element is REQUIRED in order to mantain the relationship between individual `<auro-radio>` elements for functional radio button actions.
119
+
120
+ **Note**: The `<auro-radio>` element is only for to for use as a set of two or more `<auro-radio>` elements within an `<auro-radio-group>` element.
121
+ <!-- AURO-GENERATED-CONTENT:END -->
122
+
123
+ ## Formkit development
124
+
125
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
126
+ <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
127
+
128
+ ### Filtering
129
+
130
+ Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
131
+
132
+ To only develop a single component, use the `--filter` flag:
133
+
134
+ ```shell
135
+ npx turbo dev --filter=@aurodesignsystem/auro-input
136
+ ```
137
+ <!-- AURO-GENERATED-CONTENT:END -->
package/components/radio/dist/auro-radio-group.d.ts ADDED
@@ -0,0 +1,194 @@
1
+ /**
2
+ * @attr {String} validity - Specifies the `validityState` this element is in.
3
+ * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
4
+ * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
5
+ * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
6
+ * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
7
+ * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
8
+ * @attr {Boolean} onDark - Applies dark mode styles to the component.
9
+ * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
10
+ * @attr {Object} optionSelected - Specifies the current selected radio button.
11
+ * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
12
+ * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
13
+ * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
14
+ * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
15
+ * @event auroFormElement-validated - Notifies that the element has been validated.
16
+ * @event input - Notifies every time the value prop of the element is changed.
17
+ */
18
+ export class AuroRadioGroup extends LitElement {
19
+ static get styles(): import("lit").CSSResult[];
20
+ static get properties(): {
21
+ disabled: {
22
+ type: BooleanConstructor;
23
+ reflect: boolean;
24
+ };
25
+ horizontal: {
26
+ type: BooleanConstructor;
27
+ };
28
+ error: {
29
+ type: StringConstructor;
30
+ reflect: boolean;
31
+ };
32
+ value: {
33
+ type: StringConstructor;
34
+ };
35
+ noValidate: {
36
+ type: BooleanConstructor;
37
+ reflect: boolean;
38
+ };
39
+ onDark: {
40
+ type: BooleanConstructor;
41
+ reflect: boolean;
42
+ };
43
+ required: {
44
+ type: BooleanConstructor;
45
+ reflect: boolean;
46
+ };
47
+ setCustomValidity: {
48
+ type: StringConstructor;
49
+ };
50
+ setCustomValidityCustomError: {
51
+ type: StringConstructor;
52
+ };
53
+ setCustomValidityValueMissing: {
54
+ type: StringConstructor;
55
+ };
56
+ validity: {
57
+ type: StringConstructor;
58
+ reflect: boolean;
59
+ };
60
+ optionSelected: {
61
+ type: ObjectConstructor;
62
+ };
63
+ /**
64
+ * Indicates whether the radio group is in a dirty state (has been interacted with).
65
+ * @type {boolean}
66
+ * @default false
67
+ * @private
68
+ */
69
+ touched: boolean;
70
+ };
71
+ /**
72
+ * This will register this element with the browser.
73
+ * @param {string} [name="auro-radio-group"] - The name of element that you want to register to.
74
+ *
75
+ * @example
76
+ * AuroRadioGroup.register("custom-radio-group") // This will register this element to <custom-radio-group/>
77
+ *
78
+ */
79
+ static register(name?: string): void;
80
+ disabled: boolean;
81
+ horizontal: boolean;
82
+ required: boolean;
83
+ validity: any;
84
+ value: any;
85
+ optionSelected: EventTarget;
86
+ onDark: boolean;
87
+ touched: boolean;
88
+ /**
89
+ * @private
90
+ */
91
+ private validation;
92
+ /**
93
+ * @private
94
+ */
95
+ private index;
96
+ /**
97
+ * @private
98
+ */
99
+ private max;
100
+ /**
101
+ * @private
102
+ */
103
+ private runtimeUtils;
104
+ /**
105
+ * @private
106
+ */
107
+ private helpTextTag;
108
+ firstUpdated(): void;
109
+ /**
110
+ * Method for handling of selection of a radio element.
111
+ * @private
112
+ * @param {Event} event - The trigger event tied to this function.
113
+ * @returns {void}
114
+ */
115
+ private handleSelection;
116
+ /**
117
+ * Method handles radio element blur.
118
+ * @private
119
+ * @returns {void}
120
+ */
121
+ private handleRadioBlur;
122
+ /**
123
+ * LitElement lifecycle method. Called after the DOM has been updated.
124
+ * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
125
+ * @returns {void}
126
+ */
127
+ updated(changedProperties: Map<string, any>): void;
128
+ /**
129
+ * Resets component to initial state.
130
+ * @returns {void}
131
+ */
132
+ reset(): void;
133
+ /**
134
+ * Validates value.
135
+ * @param {boolean} [force=false] - Whether to force validation.
136
+ */
137
+ validate(force?: boolean): void;
138
+ /**
139
+ * Method handles the reset event from a radio element.
140
+ * @private
141
+ * @returns {void}
142
+ */
143
+ private resetRadio;
144
+ /**
145
+ * Method for handling the attributes of each radio input.
146
+ * @private
147
+ * @returns {void}
148
+ */
149
+ private handleItems;
150
+ items: Element[];
151
+ /**
152
+ * Method for handling slot content changes.
153
+ * @private
154
+ * @returns {void}
155
+ */
156
+ private handleSlotChange;
157
+ /**
158
+ * Method for initializing the tab index of the checked radio input.
159
+ * @private
160
+ * @returns {void}
161
+ */
162
+ private initializeIndex;
163
+ /**
164
+ * Method for handling a newly selected radio input.
165
+ * @private
166
+ * @param {Event} event - The trigger event tied to this function.
167
+ * @returns {void}
168
+ */
169
+ private handleToggleSelected;
170
+ /**
171
+ * Method for selecting a radio input.
172
+ * @private
173
+ * @param {Number} index - The value of the element's index attribute.
174
+ * @returns {void}
175
+ */
176
+ private selectItem;
177
+ /**
178
+ * Method for selecting the next radio input.
179
+ * @private
180
+ * @param {Number} index - The value of the element's index attribute.
181
+ * @param {String} moveDirection - Arrow key pressed by user.
182
+ * @returns {void}
183
+ */
184
+ private selectNextItem;
185
+ /**
186
+ * Method for handling a keydown event.
187
+ * @private
188
+ * @param {Event} event - The trigger event tied to this function.
189
+ * @returns {void}
190
+ */
191
+ private handleKeyDown;
192
+ render(): import("lit-html").TemplateResult;
193
+ }
194
+ import { LitElement } from "lit";
package/components/radio/dist/auro-radio.d.ts ADDED
@@ -0,0 +1,144 @@
1
+ /**
2
+ * @attr {Boolean} checked - If set to true, the radio button will be filled.
3
+ * @attr {Boolean} disabled - If set to true, the radio button will be non-clickable.
4
+ * @attr {Boolean} required - Defines element as required.
5
+ * @attr {Boolean} error - If set to true, sets an error state on the radio button.
6
+ * @attr {Boolean} onDark - If set to true, the component will render with a dark theme.
7
+ * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
8
+ *
9
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
10
+ * @attr id
11
+ *
12
+ * @event focusSelected - Notifies that the component has gained focus.
13
+ * @event auroRadio-blur - Notifies that the component has lost focus.
14
+ * @event resetRadio - Notifies that the component has reset the checked/selected state.
15
+ * @event auroRadio-selected - Notifies that the component has been marked as checked/selected.
16
+ */
17
+ export class AuroRadio extends LitElement {
18
+ static get styles(): import("lit").CSSResult[];
19
+ static get properties(): {
20
+ checked: {
21
+ type: BooleanConstructor;
22
+ reflect: boolean;
23
+ };
24
+ disabled: {
25
+ type: BooleanConstructor;
26
+ reflect: boolean;
27
+ };
28
+ required: {
29
+ type: BooleanConstructor;
30
+ reflect: boolean;
31
+ };
32
+ error: {
33
+ type: BooleanConstructor;
34
+ reflect: boolean;
35
+ };
36
+ onDark: {
37
+ type: BooleanConstructor;
38
+ reflect: boolean;
39
+ };
40
+ label: {
41
+ type: StringConstructor;
42
+ };
43
+ name: {
44
+ type: StringConstructor;
45
+ };
46
+ value: {
47
+ type: StringConstructor;
48
+ };
49
+ tabIndex: {
50
+ type: NumberConstructor;
51
+ reflect: boolean;
52
+ };
53
+ /**
54
+ * Whether or not the radio button has been touched by the user.
55
+ * @private
56
+ */
57
+ touched: {
58
+ type: BooleanConstructor;
59
+ reflect: boolean;
60
+ attribute: boolean;
61
+ };
62
+ /**
63
+ * @private
64
+ * id for input node
65
+ */
66
+ inputId: {
67
+ type: StringConstructor;
68
+ reflect: boolean;
69
+ attribute: boolean;
70
+ };
71
+ };
72
+ /**
73
+ * This will register this element with the browser.
74
+ * @param {string} [name="auro-radio"] - The name of element that you want to register to.
75
+ *
76
+ * @example
77
+ * AuroRadio.register("custom-radio") // This will resgiter this element to <custom-radio/>
78
+ *
79
+ */
80
+ static register(name?: string): void;
81
+ checked: boolean;
82
+ disabled: boolean;
83
+ required: boolean;
84
+ error: boolean;
85
+ onDark: boolean;
86
+ touched: boolean;
87
+ /**
88
+ * @private
89
+ */
90
+ private runtimeUtils;
91
+ /**
92
+ * Method for handling content when change event is fired.
93
+ * @private
94
+ * @param {Event} event - The trigger event tied to this function.
95
+ * @returns {void}
96
+ */
97
+ private handleChange;
98
+ /**
99
+ * Method for handling content when input event is fired.
100
+ * @private
101
+ * @param {Event} event - The trigger event tied to this function.
102
+ * @returns {void}
103
+ */
104
+ private handleInput;
105
+ /**
106
+ * Method for handling focus event.
107
+ * @private
108
+ * @param {Event} event - The trigger event tied to this function.
109
+ * @returns {void}
110
+ */
111
+ private handleFocus;
112
+ /**
113
+ * Method for handling blur event.
114
+ * @private
115
+ * @param {Event} event - The trigger event tied to this function.
116
+ * @returns {void}
117
+ */
118
+ private handleBlur;
119
+ /**
120
+ * Resets component to initial state.
121
+ * @returns {void}
122
+ */
123
+ reset(): void;
124
+ updated(changedProperties: any): void;
125
+ /**
126
+ * Method for handling content when it is invalid accessibility wise.
127
+ * @private
128
+ * @param {Boolean} error - The element's error attribute.
129
+ * @returns {void}
130
+ */
131
+ private invalid;
132
+ /**
133
+ * Method for handling passing the required status to aria.
134
+ * @private
135
+ * @param {Boolean} required - The element's required attribute.
136
+ * @returns {void}
137
+ */
138
+ private isRequired;
139
+ firstUpdated(): void;
140
+ input: HTMLInputElement;
141
+ inputId: string;
142
+ render(): import("lit-html").TemplateResult<1>;
143
+ }
144
+ import { LitElement } from "lit";
package/components/radio/dist/helptextVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "1.0.0";
2
+ export default _default;
package/components/radio/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { AuroRadio } from './auro-radio.js';
2
+ import { AuroRadioGroup } from './auro-radio-group.js';
3
+ export { AuroRadio, AuroRadioGroup };