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