@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/combobox/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-combobox</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-combobox'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/combobox/demo/readme.md ADDED
@@ -0,0 +1,154 @@
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
+ # Combobox
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-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
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-combobox> automatically
51
+ import '@aurodesignsystem/auro-formkit/auro-combobox';
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 `AuroCombobox.register('custom-combobox')` method on the component class and pass in a unique name.
57
+
58
+ ```javascript
59
+ // Import the class only
60
+ import { AuroCombobox } from '@aurodesignsystem/auro-formkit/auro-combobox/class';
61
+
62
+ // Register with a custom name if desired
63
+ AuroCombobox.register('custom-combobox');
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-combobox>
87
+ <span slot="ariaLabel.bib.close">Close combobox</span>
88
+ <span slot="ariaLabel.input.clear">Clear All</span>
89
+ <span slot="bib.fullscreen.headline">Bib Header</span>
90
+ <span slot="label">Name</span>
91
+ <auro-menu>
92
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
93
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
94
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
95
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
96
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
97
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
98
+ </auro-menu>
99
+ </auro-combobox>
100
+ ```
101
+ <!-- AURO-GENERATED-CONTENT:END -->
102
+
103
+ ### Design Token CSS Custom Property dependency
104
+
105
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
106
+ The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
107
+
108
+ <!-- AURO-GENERATED-CONTENT:END -->
109
+
110
+ ## Install from CDN
111
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
112
+ <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
113
+ 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.
114
+
115
+ ```html
116
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-combobox/+esm"></script>
117
+ ```
118
+ <!-- AURO-GENERATED-CONTENT:END -->
119
+
120
+ ## UI development browser support
121
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
122
+ For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
123
+
124
+ <!-- AURO-GENERATED-CONTENT:END -->
125
+
126
+ ## auro-combobox use cases
127
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
128
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
129
+ The `<auro-combobox>` element should be used in situations where users may:
130
+
131
+ * Search
132
+ * Airports: user looks for a specific airport by searching for the city name or airport code
133
+ * Site wide: user searches for a topic site wide and combobox makes suggestions on searchable results
134
+ * Filter
135
+ * Options: user chooses filters for their search by using combobox
136
+ * Select
137
+ * Quantity: user types a quantity to select an option within a range (for example, the user may be limited to 2-34)
138
+ <!-- AURO-GENERATED-CONTENT:END -->
139
+
140
+ ## Formkit development
141
+
142
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
143
+ <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
144
+
145
+ ### Filtering
146
+
147
+ Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
148
+
149
+ To only develop a single component, use the `--filter` flag:
150
+
151
+ ```shell
152
+ npx turbo dev --filter=@aurodesignsystem/auro-input
153
+ ```
154
+ <!-- AURO-GENERATED-CONTENT:END -->
package/components/combobox/dist/auro-combobox.d.ts ADDED
@@ -0,0 +1,434 @@
1
+ /**
2
+ * @slot - Default slot for the menu content.
3
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
4
+ * @slot ariaLabel.input.clear - Sets aria-label on clear button
5
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
6
+ * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
7
+ * @slot label - Defines the content of the label.
8
+ * @slot helpText - Defines the content of the helpText.
9
+ * @slot displayValue - Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts.
10
+ * @event auroCombobox-valueSet - Notifies that the component has a new value set.
11
+ * @event auroFormElement-validated - Notifies that the component value(s) have been validated.
12
+ */
13
+ export class AuroCombobox extends AuroElement {
14
+ static get properties(): {
15
+ /**
16
+ * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
17
+ * @default false
18
+ */
19
+ autocomplete: {
20
+ type: StringConstructor;
21
+ reflect: boolean;
22
+ };
23
+ /**
24
+ * If declared, bib's position will be automatically calculated where to appear.
25
+ */
26
+ autoPlacement: {
27
+ type: BooleanConstructor;
28
+ reflect: boolean;
29
+ };
30
+ /**
31
+ * When attribute is present auro-menu will apply checkmarks to selected options.
32
+ */
33
+ checkmark: {
34
+ type: BooleanConstructor;
35
+ reflect: boolean;
36
+ };
37
+ /**
38
+ * If set, disables the combobox.
39
+ */
40
+ disabled: {
41
+ type: BooleanConstructor;
42
+ reflect: boolean;
43
+ };
44
+ /**
45
+ * ID for the dropdown.
46
+ * @private
47
+ */
48
+ dropdownId: {
49
+ type: StringConstructor;
50
+ reflect: boolean;
51
+ attribute: boolean;
52
+ };
53
+ /**
54
+ * Whether or not the dropdown is open.
55
+ * @private
56
+ */
57
+ dropdownOpen: {
58
+ type: BooleanConstructor;
59
+ reflect: boolean;
60
+ attribute: boolean;
61
+ };
62
+ /**
63
+ * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
64
+ */
65
+ error: {
66
+ type: StringConstructor;
67
+ reflect: boolean;
68
+ };
69
+ /**
70
+ * Specifies the input mask format.
71
+ */
72
+ format: {
73
+ type: StringConstructor;
74
+ reflect: boolean;
75
+ };
76
+ /** Exposes inputmode attribute for input. */
77
+ inputmode: {
78
+ type: StringConstructor;
79
+ attribute: boolean;
80
+ reflect: boolean;
81
+ };
82
+ /**
83
+ * If declared, the popover and trigger will be set to the same width.
84
+ */
85
+ matchWidth: {
86
+ type: BooleanConstructor;
87
+ reflect: boolean;
88
+ };
89
+ /**
90
+ * If set, combobox will not filter menuoptions based in input.
91
+ */
92
+ noFilter: {
93
+ type: BooleanConstructor;
94
+ reflect: boolean;
95
+ };
96
+ /**
97
+ * If declared, the bib will NOT flip to an alternate position
98
+ * when there isn't enough space in the specified `placement`.
99
+ * @default false
100
+ */
101
+ noFlip: {
102
+ type: BooleanConstructor;
103
+ reflect: boolean;
104
+ };
105
+ /**
106
+ * If set, disables auto-validation on blur.
107
+ */
108
+ noValidate: {
109
+ type: BooleanConstructor;
110
+ reflect: boolean;
111
+ };
112
+ /**
113
+ * Gap between the trigger element and bib.
114
+ * @default 0
115
+ */
116
+ offset: {
117
+ type: NumberConstructor;
118
+ reflect: boolean;
119
+ };
120
+ /**
121
+ * If declared, onDark styles will be applied to the trigger.
122
+ */
123
+ onDark: {
124
+ type: BooleanConstructor;
125
+ reflect: boolean;
126
+ };
127
+ /**
128
+ * Specifies the current selected option.
129
+ * @type {HTMLElement}
130
+ */
131
+ optionSelected: HTMLElement;
132
+ /**
133
+ * Position where the bib should appear relative to the trigger.
134
+ * Accepted values:
135
+ * "top" | "right" | "bottom" | "left" |
136
+ * "bottom-start" | "top-start" | "top-end" |
137
+ * "right-start" | "right-end" | "bottom-end" |
138
+ * "left-start" | "left-end"
139
+ * @default bottom-start
140
+ */
141
+ placement: {
142
+ type: StringConstructor;
143
+ reflect: boolean;
144
+ };
145
+ /**
146
+ * Define custom placeholder text, only supported by date input formats.
147
+ */
148
+ placeholder: {
149
+ type: StringConstructor;
150
+ reflect: boolean;
151
+ };
152
+ /**
153
+ * Populates the `required` attribute on the input. Used for client-side validation.
154
+ */
155
+ required: {
156
+ type: BooleanConstructor;
157
+ reflect: boolean;
158
+ };
159
+ /**
160
+ * Sets a custom help text message to display for all validityStates.
161
+ */
162
+ setCustomValidity: {
163
+ type: StringConstructor;
164
+ };
165
+ /**
166
+ * Custom help text message to display when validity = `customError`.
167
+ */
168
+ setCustomValidityCustomError: {
169
+ type: StringConstructor;
170
+ };
171
+ /**
172
+ * Custom help text message to display when validity = `valueMissing`.
173
+ */
174
+ setCustomValidityValueMissing: {
175
+ type: StringConstructor;
176
+ };
177
+ /**
178
+ * If set, the `icon` attribute will be applied to the trigger `auro-input` element.
179
+ */
180
+ triggerIcon: {
181
+ type: BooleanConstructor;
182
+ reflect: boolean;
183
+ };
184
+ /**
185
+ * Applies the defined value as the type attribute on auro-input.
186
+ */
187
+ type: {
188
+ type: StringConstructor;
189
+ reflect: boolean;
190
+ };
191
+ /**
192
+ * Specifies the `validityState` this element is in.
193
+ */
194
+ validity: {
195
+ type: StringConstructor;
196
+ reflect: boolean;
197
+ };
198
+ /**
199
+ * Value selected for the dropdown menu.
200
+ */
201
+ value: {
202
+ type: StringConstructor;
203
+ };
204
+ /**
205
+ * If declared, make bib.fullscreen.headline in HeadingDisplay.
206
+ * Otherwise, Heading 600
207
+ */
208
+ largeFullscreenHeadline: {
209
+ type: BooleanConstructor;
210
+ reflect: boolean;
211
+ };
212
+ /**
213
+ * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
214
+ * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
215
+ *
216
+ * When expanded, the dropdown will automatically display in fullscreen mode
217
+ * if the screen size is equal to or smaller than the selected breakpoint.
218
+ * @default sm
219
+ */
220
+ fullscreenBreakpoint: {
221
+ type: StringConstructor;
222
+ reflect: boolean;
223
+ };
224
+ /**
225
+ * Specifies the currently active option.
226
+ * @private
227
+ */
228
+ optionActive: {
229
+ type: ObjectConstructor;
230
+ reflect: boolean;
231
+ attribute: boolean;
232
+ };
233
+ };
234
+ static get styles(): import("lit").CSSResult[];
235
+ /**
236
+ * This will register this element with the browser.
237
+ * @param {string} [name='auro-combobox'] - The name of element that you want to register to.
238
+ *
239
+ * @example
240
+ * AuroCombobox.register('custom-combobox') // this will register this element to <custom-combobox/>
241
+ *
242
+ */
243
+ static register(name?: string): void;
244
+ matchWidth: boolean;
245
+ /**
246
+ * @private
247
+ * @returns {void} Internal defaults.
248
+ */
249
+ private privateDefaults;
250
+ dropdownOpen: any;
251
+ dropdownId: any;
252
+ onDark: boolean;
253
+ noFilter: boolean;
254
+ validity: any;
255
+ value: any;
256
+ optionSelected: any;
257
+ checkmark: boolean;
258
+ disabled: boolean;
259
+ noValidate: boolean;
260
+ required: boolean;
261
+ triggerIcon: boolean;
262
+ availableOptions: any[];
263
+ optionActive: any;
264
+ msgSelectionMissing: string;
265
+ fullscreenBreakpoint: string;
266
+ largeFullscreenHeadline: boolean;
267
+ validation: AuroFormValidation;
268
+ runtimeUtils: any;
269
+ isHiddenWhileLoading: boolean;
270
+ errorMessage: any;
271
+ /**
272
+ * @private
273
+ */
274
+ private shape;
275
+ /**
276
+ * @private
277
+ */
278
+ private size;
279
+ placement: string;
280
+ offset: number;
281
+ noFlip: boolean;
282
+ autoPlacement: boolean;
283
+ dropdownTag: any;
284
+ bibtemplateTag: any;
285
+ inputTag: any;
286
+ helpTextTag: any;
287
+ /**
288
+ * Checks if the element is valid.
289
+ * @returns {boolean} - Returns true if the element is valid, false otherwise.
290
+ */
291
+ isValid(): boolean;
292
+ /**
293
+ * Updates the filter for the available options based on the input value.
294
+ * @private
295
+ */
296
+ private updateFilter;
297
+ noMatchOption: any;
298
+ /**
299
+ * Syncs the values and states of this component, the input, and the menu, including this.optionSelected and this.menu.optionSelected.
300
+ * @private
301
+ * @returns {void}
302
+ */
303
+ private syncValuesAndStates;
304
+ /**
305
+ * Resets the menu matchWord to true.
306
+ * @private
307
+ */
308
+ private resetMenuMatchword;
309
+ /**
310
+ * Processes hidden state of all menu options and determines if there are any available options not hidden.
311
+ * @private
312
+ * @returns {void}
313
+ */
314
+ private handleMenuOptions;
315
+ /**
316
+ * Determines the element error state based on the `required` attribute and input value.
317
+ * @private
318
+ * @returns {void}
319
+ */
320
+ private generateOptionsArray;
321
+ options: any[] | NodeListOf<Element>;
322
+ /**
323
+ * Hides the dropdown bib if its open.
324
+ * @returns {void}
325
+ */
326
+ hideBib(): void;
327
+ /**
328
+ * Shows the dropdown bib if there are options to show.
329
+ * @returns {void}
330
+ */
331
+ showBib(): void;
332
+ /**
333
+ * Binds all behavior needed to the dropdown after rendering.
334
+ * @private
335
+ * @returns {void}
336
+ */
337
+ private configureDropdown;
338
+ bibtemplate: any;
339
+ inputInBib: any;
340
+ /**
341
+ * @private
342
+ */
343
+ private setInputFocus;
344
+ /**
345
+ * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
346
+ * @private
347
+ */
348
+ private updateMenuShapeSize;
349
+ /**
350
+ * Binds all behavior needed to the menu after rendering.
351
+ * @private
352
+ * @returns {void}
353
+ */
354
+ private configureMenu;
355
+ menu: Element;
356
+ /**
357
+ * Binds all behavior needed to the input after rendering.
358
+ * @private
359
+ * @returns {void}
360
+ */
361
+ private configureInput;
362
+ /**
363
+ * Manages the visibility of the dropdown based on loading state changes.
364
+ *
365
+ * This method listens for loading state changes and adjusts the visibility of the dropdown accordingly.
366
+ * If the dropdown is visible and loading is true without any loading placeholders, it hides the dropdown
367
+ * and sets a flag to indicate it is hidden while loading. If loading is false and the dropdown was previously
368
+ * hidden, it checks if the active element is within the dropdown and shows it again if true.
369
+ *
370
+ * @private
371
+ * @param {CustomEvent} event - The event object containing details about the loading state change.
372
+ * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
373
+ * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
374
+ * @returns {void}
375
+ */
376
+ private handleMenuLoadingChange;
377
+ /**
378
+ * Handle changes to the input value and trigger changes that should result.
379
+ * @private
380
+ * @param {Event} event - The input event triggered by the input element.
381
+ * @returns {void}
382
+ */
383
+ private handleInputValueChange;
384
+ /**
385
+ * Binds all behavior needed to the combobox after rendering.
386
+ * @private
387
+ * @returns {void}
388
+ */
389
+ private configureCombobox;
390
+ menus: Element[];
391
+ firstUpdated(): void;
392
+ dropdown: any;
393
+ input: any;
394
+ /**
395
+ * Focuses the combobox trigger input.
396
+ * @returns {void}
397
+ */
398
+ focus(): void;
399
+ /**
400
+ * Resets component to initial state.
401
+ * @returns {void}
402
+ */
403
+ reset(): void;
404
+ /**
405
+ * Clears the current value of the combobox.
406
+ * @returns {void}
407
+ */
408
+ clear(): void;
409
+ /**
410
+ * Validates value.
411
+ * @param {boolean} [force=false] - Whether to force validation.
412
+ */
413
+ validate(force?: boolean): void;
414
+ updated(changedProperties: any): Promise<void>;
415
+ /**
416
+ * Applies slotted nodes to a target element with a new slot name.
417
+ * @private
418
+ * @param {HTMLSlotElement} slot - The slot element containing the nodes to apply.
419
+ * @param {HTMLElement} target - The target element to apply the nodes to.
420
+ * @param {string} newSlotName - The new slot name for the applied nodes.
421
+ * @returns {void}
422
+ */
423
+ private transportAssignedNodes;
424
+ /**
425
+ * Watch for slot changes and recalculate the menuoptions.
426
+ * @private
427
+ * @param {Event} event - `slotchange` event.
428
+ * @returns {void}
429
+ */
430
+ private handleSlotChange;
431
+ render(): import("lit-html").TemplateResult;
432
+ }
433
+ import { AuroElement } from '../../layoutElement/src/auroElement.js';
434
+ import AuroFormValidation from '@auro-formkit/form-validation';
package/components/combobox/dist/bibtemplateVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "1.0.0";
2
+ export default _default;
package/components/combobox/dist/dropdownVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "3.0.0";
2
+ export default _default;
package/components/combobox/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { AuroCombobox };
2
+ import { AuroCombobox } from './auro-combobox.js';