@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/input/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-input</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-input'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/input/demo/readme.md ADDED
@@ -0,0 +1,139 @@
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
+ # Input
21
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
22
+ <!-- The below content is automatically added from ./docs/partials/description.md -->
23
+ Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helpText` for additional content support.
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:END -->
28
+
29
+ ## Getting Started
30
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
31
+ <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
32
+
33
+ #### NPM Installation
34
+
35
+ ```shell
36
+ $ npm i @aurodesignsystem/auro-formkit
37
+ ```
38
+ <!-- AURO-GENERATED-CONTENT:END -->
39
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
40
+ <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
41
+
42
+ ### Import Options
43
+
44
+ #### Automatic Registration
45
+
46
+ For automatic registration, simply import the component:
47
+
48
+ ```javascript
49
+ // Registers <auro-input> automatically
50
+ import '@aurodesignsystem/auro-formkit/auro-input';
51
+ ```
52
+
53
+ #### Custom Registration
54
+
55
+ To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroInput.register('custom-input')` method on the component class and pass in a unique name.
56
+
57
+ ```javascript
58
+ // Import the class only
59
+ import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
60
+
61
+ // Register with a custom name if desired
62
+ AuroInput.register('custom-input');
63
+ ```
64
+
65
+ #### TypeScript Module Resolution
66
+
67
+ When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
68
+
69
+ ```json
70
+ {
71
+ "compilerOptions": {
72
+ "moduleResolution": "bundler"
73
+ }
74
+ }
75
+ ```
76
+
77
+ This configuration enables proper module resolution for the component's TypeScript files.
78
+ <!-- AURO-GENERATED-CONTENT:END -->
79
+ **Reference component in HTML**
80
+
81
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
82
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
83
+
84
+ ```html
85
+ <auro-input>
86
+ <span slot="ariaLabel.clear">Clear All</span>
87
+ <span slot="label">Label</span>
88
+ <span slot="helpText">Help Text</span>
89
+ </auro-input>
90
+ ```
91
+ <!-- AURO-GENERATED-CONTENT:END -->
92
+
93
+ ### Design Token CSS Custom Property dependency
94
+
95
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
96
+ The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
97
+
98
+ <!-- AURO-GENERATED-CONTENT:END -->
99
+
100
+ ## Install from CDN
101
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
102
+ <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
103
+ 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.
104
+
105
+ ```html
106
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-input/+esm"></script>
107
+ ```
108
+ <!-- AURO-GENERATED-CONTENT:END -->
109
+
110
+ ## UI development browser support
111
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
112
+ For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
113
+
114
+ <!-- AURO-GENERATED-CONTENT:END -->
115
+
116
+ ## auro-input use cases
117
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
118
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
119
+ The `<auro-input>` element should be used in situations where users may:
120
+
121
+ * needs to enter information
122
+ * be filling out a form
123
+ <!-- AURO-GENERATED-CONTENT:END -->
124
+
125
+ ## Formkit development
126
+
127
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
128
+ <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
129
+
130
+ ### Filtering
131
+
132
+ Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
133
+
134
+ To only develop a single component, use the `--filter` flag:
135
+
136
+ ```shell
137
+ npx turbo dev --filter=@aurodesignsystem/auro-input
138
+ ```
139
+ <!-- AURO-GENERATED-CONTENT:END -->
package/components/input/dist/auro-input.d.ts ADDED
@@ -0,0 +1,167 @@
1
+ export class AuroInput extends BaseInput {
2
+ static get styles(): import("lit").CSSResult[];
3
+ /**
4
+ * This will register this element with the browser.
5
+ * @param {string} [name="auro-input"] - The name of element that you want to register to.
6
+ *
7
+ * @example
8
+ * AuroInput.register("custom-input") // this will register this element to <custom-input/>
9
+ *
10
+ */
11
+ static register(name?: string): void;
12
+ /**
13
+ * @private
14
+ */
15
+ private buttonTag;
16
+ /**
17
+ * @private
18
+ */
19
+ private hasDisplayValueContent;
20
+ /**
21
+ * @private
22
+ */
23
+ private helpTextTag;
24
+ /**
25
+ * @private
26
+ */
27
+ private iconTag;
28
+ /**
29
+ * Determines if the HTML input element should be visually hidden.
30
+ * Returns true when display value content exists without focus and has a value,
31
+ * or when the input has no value, is not focused, and has no placeholder text.
32
+ * @returns {boolean} - True if the input should be visually hidden, false otherwise.
33
+ * @private
34
+ */
35
+ private get inputHidden();
36
+ /**
37
+ * Determines if the input should display in a state with no focus or value indication.
38
+ * Returns true when the input has display content without focus and has a value,
39
+ * or when the input has no value and is not focused.
40
+ * @returns {boolean} - True if the input should show no focus or value state, false otherwise.
41
+ * @private
42
+ */
43
+ private get noFocusOrValue();
44
+ /**
45
+ * Whether the label is being hidden currently based on state.
46
+ * @returns {boolean} - Returns true if the label is hidden.
47
+ * @private
48
+ */
49
+ private get labelHidden();
50
+ /**
51
+ * Returns the label font class based on layout and visibility state.
52
+ * @private
53
+ * @returns {string} - The font class for the label.
54
+ */
55
+ private get labelFontClass();
56
+ /**
57
+ * Returns the input font class based on layout and visibility state.
58
+ * @private
59
+ * @returns {string} - The font class for the input.
60
+ */
61
+ private get inputFontClass();
62
+ /**
63
+ * Returns classmap configuration for html5 input labels in all layouts.
64
+ * @private
65
+ * @returns {Record<string, boolean>}
66
+ */
67
+ private get commonLabelClasses();
68
+ /**
69
+ * Returns classmap configuration for html5 inputs in all layouts.
70
+ * @private
71
+ * @returns {Record<string, boolean>} - Returns classmap.
72
+ */
73
+ private get commonInputClasses();
74
+ /**
75
+ * Returns classmap configuration for html5 inputs in each layout.
76
+ * @private
77
+ * @returns {object} - Returns classmap.
78
+ */
79
+ private get legacyInputClasses();
80
+ /**
81
+ * Returns classmap configuration for wrapper elements in each layout.
82
+ * @private
83
+ * @returns {object} - Returns classmap.
84
+ */
85
+ private get commonWrapperClasses();
86
+ /**
87
+ * Returns classmap configuration for helpText elements in each layout.
88
+ * @private
89
+ * @returns {object} - Returns classmap.
90
+ */
91
+ private get helpTextClasses();
92
+ /**
93
+ * Function to determine if the input is meant to render an icon visualizing the input type.
94
+ * @private
95
+ * @returns {boolean} - Returns true if the input type is meant to render an icon.
96
+ */
97
+ private hasTypeIcon;
98
+ /**
99
+ * Function to determine if there is any displayValue content to render.
100
+ * @private
101
+ * @returns {void}
102
+ */
103
+ private checkDisplayValueSlotChange;
104
+ /**
105
+ * Returns HTML for the validation error icon.
106
+ * @private
107
+ * @returns {html} - Returns HTML for the validation error icon.
108
+ */
109
+ private renderValidationErrorIconHtml;
110
+ /**
111
+ * Returns HTML for the HTML5 input element.
112
+ * @private
113
+ * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
114
+ * @returns {html} - Returns HTML for the HTML5 input element.
115
+ */
116
+ private renderHtmlInput;
117
+ /**
118
+ * Returns HTML for the clear action button.
119
+ * @private
120
+ * @returns {html} - Returns HTML for the clear action button.
121
+ */
122
+ private renderHtmlActionClear;
123
+ /**
124
+ * Returns HTML for the show password button.
125
+ * @private
126
+ * @returns {html} - Returns HTML for the show password button.
127
+ */
128
+ private renderHtmlNotificationPassword;
129
+ /**
130
+ * Returns HTML for the input type icon.
131
+ * @private
132
+ * @returns {html} - Returns HTML for the input type icon.
133
+ */
134
+ private renderHtmlTypeIcon;
135
+ /**
136
+ * Returns HTML for the help text and error message.
137
+ * @private
138
+ * @returns {html} - Returns HTML for the help text and error message.
139
+ */
140
+ private renderHtmlHelpText;
141
+ /**
142
+ * Returns HTML for the classic layout.
143
+ * @private
144
+ * @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
145
+ */
146
+ private renderLayoutClassic;
147
+ /**
148
+ * Returns HTML for the emphasized layout. Does not support type="*".
149
+ * @private
150
+ * @returns {html} - Returns HTML for the emphasized layout.
151
+ */
152
+ private renderLayoutEmphasized;
153
+ /**
154
+ * Returns HTML for the emphasized layout. Does not support type="*".
155
+ * @private
156
+ * @returns {html} - Returns HTML for the emphasized layout.
157
+ */
158
+ private renderLayoutSnowflake;
159
+ /**
160
+ * Logic to determine the layout of the component.
161
+ * @private
162
+ * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
163
+ * @returns {void}
164
+ */
165
+ private renderLayout;
166
+ }
167
+ import BaseInput from './base-input.js';