@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/select/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-select 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/select/demo/readme.md ADDED
@@ -0,0 +1,144 @@
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
+ # Select
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-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
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-select> automatically
51
+ import '@aurodesignsystem/auro-formkit/auro-select';
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 `AuroSelect.register('custom-select')` method on the component class and pass in a unique name.
57
+
58
+ ```javascript
59
+ // Import the class only
60
+ import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
61
+
62
+ // Register with a custom name if desired
63
+ AuroSelect.register('custom-select');
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-select>
87
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
88
+ <span slot="label">Select Example</span>
89
+ <auro-menu>
90
+ <auro-menuoption value="stops">Stops</auro-menuoption>
91
+ <auro-menuoption value="price">Price</auro-menuoption>
92
+ <auro-menuoption value="duration">Duration</auro-menuoption>
93
+ <auro-menuoption value="departure">Departure</auro-menuoption>
94
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
95
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
96
+ </auro-menu>
97
+ </auro-select>
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-select/+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-select 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
+ See description.
128
+ <!-- AURO-GENERATED-CONTENT:END -->
129
+
130
+ ## Formkit development
131
+
132
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
133
+ <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
134
+
135
+ ### Filtering
136
+
137
+ Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
138
+
139
+ To only develop a single component, use the `--filter` flag:
140
+
141
+ ```shell
142
+ npx turbo dev --filter=@aurodesignsystem/auro-input
143
+ ```
144
+ <!-- AURO-GENERATED-CONTENT:END -->
package/components/select/dist/auro-select.d.ts ADDED
@@ -0,0 +1,359 @@
1
+ /**
2
+ * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
3
+ *
4
+ * @slot - Default slot for the menu content.
5
+ * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
6
+ * @slot label - Defines the content of the label.
7
+ * @slot helpText - Defines the content of the helpText.
8
+ * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
9
+ * @event auroSelect-valueSet - Notifies that the component has a new value set.
10
+ * @event input - Notifies every time the value prop of the element is changed.
11
+ * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
12
+ * @csspart helpText - Apply CSS to the help text.
13
+ */
14
+ export class AuroSelect extends LitElement {
15
+ static get properties(): {
16
+ /**
17
+ * If declared, sets the autocomplete attribute for the select element.
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
+ * @default false
26
+ */
27
+ autoPlacement: {
28
+ type: BooleanConstructor;
29
+ reflect: boolean;
30
+ };
31
+ /**
32
+ * When attribute is present, element shows disabled state.
33
+ */
34
+ disabled: {
35
+ type: BooleanConstructor;
36
+ reflect: boolean;
37
+ };
38
+ /**
39
+ * The name for the select element.
40
+ */
41
+ name: {
42
+ type: StringConstructor;
43
+ reflect: boolean;
44
+ };
45
+ /**
46
+ * If set, makes dropdown width match the size of the content, rather than the width of the trigger.
47
+ */
48
+ flexMenuWidth: {
49
+ type: BooleanConstructor;
50
+ reflect: boolean;
51
+ };
52
+ /**
53
+ * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
54
+ * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
55
+ *
56
+ * When expanded, the dropdown will automatically display in fullscreen mode
57
+ * if the screen size is equal to or smaller than the selected breakpoint.
58
+ * @default sm
59
+ */
60
+ fullscreenBreakpoint: {
61
+ type: StringConstructor;
62
+ reflect: boolean;
63
+ };
64
+ /**
65
+ * If declared, make bib.fullscreen.headline in HeadingDisplay.
66
+ * Otherwise, Heading 600
67
+ */
68
+ largeFullscreenHeadline: {
69
+ type: BooleanConstructor;
70
+ reflect: boolean;
71
+ };
72
+ /**
73
+ * When true, checkmark on selected option will no longer be present.
74
+ */
75
+ noCheckmark: {
76
+ type: BooleanConstructor;
77
+ reflect: boolean;
78
+ };
79
+ /**
80
+ * If declared, the bib will NOT flip to an alternate position
81
+ * when there isn't enough space in the specified `placement`.
82
+ * @default false
83
+ */
84
+ noFlip: {
85
+ type: BooleanConstructor;
86
+ reflect: boolean;
87
+ };
88
+ /**
89
+ * If set, disables auto-validation on blur.
90
+ */
91
+ noValidate: {
92
+ type: BooleanConstructor;
93
+ reflect: boolean;
94
+ };
95
+ /**
96
+ * Gap between the trigger element and bib.
97
+ * @default 0
98
+ */
99
+ offset: {
100
+ type: NumberConstructor;
101
+ reflect: boolean;
102
+ };
103
+ /**
104
+ * If declared, onDark styles will be applied to the trigger.
105
+ */
106
+ onDark: {
107
+ type: BooleanConstructor;
108
+ reflect: boolean;
109
+ };
110
+ /**
111
+ * @private
112
+ */
113
+ optionActive: {
114
+ type: ObjectConstructor;
115
+ };
116
+ /**
117
+ * Specifies the current selected menuOption.
118
+ */
119
+ optionSelected: {
120
+ converter: typeof arrayConverter;
121
+ hasChanged: typeof arrayOrUndefinedHasChanged;
122
+ };
123
+ /**
124
+ * @private
125
+ */
126
+ options: {
127
+ type: ArrayConstructor;
128
+ };
129
+ /**
130
+ * Position where the bib should appear relative to the trigger.
131
+ * Accepted values:
132
+ * "top" | "right" | "bottom" | "left" |
133
+ * "bottom-start" | "top-start" | "top-end" |
134
+ * "right-start" | "right-end" | "bottom-end" |
135
+ * "left-start" | "left-end"
136
+ * @default bottom-start
137
+ */
138
+ placement: {
139
+ type: StringConstructor;
140
+ reflect: boolean;
141
+ };
142
+ /**
143
+ * Populates the `required` attribute on the element. Used for client-side validation.
144
+ */
145
+ required: {
146
+ type: BooleanConstructor;
147
+ reflect: boolean;
148
+ };
149
+ /**
150
+ * When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
151
+ */
152
+ error: {
153
+ type: StringConstructor;
154
+ reflect: boolean;
155
+ };
156
+ /**
157
+ * Sets a custom help text message to display for all validityStates.
158
+ */
159
+ setCustomValidity: {
160
+ type: StringConstructor;
161
+ };
162
+ /**
163
+ * Custom help text message to display when validity = `customError`.
164
+ */
165
+ setCustomValidityCustomError: {
166
+ type: StringConstructor;
167
+ };
168
+ /**
169
+ * Custom help text message to display when validity = `valueMissing`.
170
+ */
171
+ setCustomValidityValueMissing: {
172
+ type: StringConstructor;
173
+ };
174
+ /**
175
+ * Specifies the `validityState` this element is in.
176
+ */
177
+ validity: {
178
+ type: StringConstructor;
179
+ reflect: boolean;
180
+ };
181
+ /**
182
+ * Value selected for the component.
183
+ */
184
+ value: {
185
+ converter: typeof arrayConverter;
186
+ hasChanged: typeof arrayOrUndefinedHasChanged;
187
+ };
188
+ /**
189
+ * Sets multi-select mode, allowing multiple options to be selected at once.
190
+ */
191
+ multiSelect: {
192
+ type: BooleanConstructor;
193
+ reflect: boolean;
194
+ attribute: string;
195
+ };
196
+ /**
197
+ * Indicates whether the input is in a dirty state (has been interacted with).
198
+ * @type {boolean}
199
+ * @default false
200
+ * @private
201
+ */
202
+ touched: boolean;
203
+ };
204
+ static get styles(): import("lit").CSSResult[];
205
+ /**
206
+ * This will register this element with the browser.
207
+ * @param {string} [name="auro-select"] - The name of element that you want to register to.
208
+ *
209
+ * @example
210
+ * AuroSelect.register("custom-select") // this will register this element to <custom-select/>
211
+ *
212
+ */
213
+ static register(name?: string): void;
214
+ placement: string;
215
+ offset: number;
216
+ noFlip: boolean;
217
+ autoPlacement: boolean;
218
+ /**
219
+ * @private
220
+ */
221
+ private uniqueId;
222
+ /**
223
+ * @private
224
+ */
225
+ private validation;
226
+ /**
227
+ * @private
228
+ */
229
+ private runtimeUtils;
230
+ /**
231
+ * @private
232
+ */
233
+ private dropdownTag;
234
+ /**
235
+ * @private
236
+ */
237
+ private bibtemplateTag;
238
+ /**
239
+ * @private
240
+ */
241
+ private isHiddenWhileLoading;
242
+ /**
243
+ * @private
244
+ * @returns {void} Internal defaults.
245
+ */
246
+ private privateDefaults;
247
+ options: any[] | Element[];
248
+ optionActive: any;
249
+ optionSelected: any;
250
+ value: any;
251
+ fullscreenBreakpoint: string;
252
+ onDark: boolean;
253
+ /**
254
+ * Binds all behavior needed to the dropdown after rendering.
255
+ * @private
256
+ * @returns {void}
257
+ */
258
+ private configureDropdown;
259
+ dropdown: any;
260
+ menuWrapper: any;
261
+ bibtemplate: any;
262
+ /**
263
+ * Updates the displayed value in an Auro dropdown component based on optionSelected.
264
+ * @private
265
+ * @returns {void}
266
+ */
267
+ private updateDisplayedValue;
268
+ /**
269
+ * Binds all behavior needed to the menu after rendering.
270
+ * @private
271
+ * @returns {void}
272
+ */
273
+ private configureMenu;
274
+ menu: Element;
275
+ /**
276
+ * Binds all behavior needed to the component after rendering.
277
+ * @private
278
+ * @returns {void}
279
+ */
280
+ private configureSelect;
281
+ /**
282
+ * Updates the active option in the menu based on keyboard input.
283
+ * @private
284
+ * @param {string} _key - The key pressed by the user.
285
+ * @returns {void}
286
+ */
287
+ private updateActiveOptionBasedOnKey;
288
+ sameLetterTimes: any;
289
+ lastLetter: string;
290
+ /**
291
+ * Manages the visibility of the dropdown based on loading state changes.
292
+ *
293
+ * This method listens for loading state changes and adjusts the visibility of the dropdown accordingly.
294
+ * If the dropdown is visible and loading is true without any loading placeholders, it hides the dropdown
295
+ * and sets a flag to indicate it is hidden while loading. If loading is false and the dropdown was previously
296
+ * hidden, it checks if the active element is within the dropdown and shows it again if true.
297
+ *
298
+ * @private
299
+ * @param {CustomEvent} event - The event object containing details about the loading state change.
300
+ * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
301
+ * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
302
+ * @returns {void}
303
+ */
304
+ private handleMenuLoadingChange;
305
+ /**
306
+ * Function to support @focusin event.
307
+ * @private
308
+ * @return {void}
309
+ */
310
+ private handleFocusin;
311
+ touched: boolean;
312
+ /**
313
+ * Watch for slot changes and recalculate the menuoptions.
314
+ * @private
315
+ * @param {Event} event - `slotchange` event.
316
+ * @returns {void}
317
+ */
318
+ private handleSlotChange;
319
+ /**
320
+ * Determines the element error state based on the `required` attribute and input value.
321
+ * @private
322
+ * @returns {void}
323
+ */
324
+ private generateOptionsArray;
325
+ firstUpdated(): void;
326
+ updated(changedProperties: any): Promise<void>;
327
+ /**
328
+ * Resets component to initial state.
329
+ * @returns {void}
330
+ */
331
+ reset(): void;
332
+ /**
333
+ * Hide dropdownbib.
334
+ * @private
335
+ */
336
+ private hideBib;
337
+ /**
338
+ * Validates value.
339
+ * @param {boolean} [force=false] - Whether to force validation.
340
+ */
341
+ validate(force?: boolean): void;
342
+ /**
343
+ * Syncs the value from the native select element to the component's value.
344
+ * @param {Event} event // The change event from the native select element.
345
+ * @returns {void}
346
+ * @private
347
+ */
348
+ private _handleNativeSelectChange;
349
+ /**
350
+ * Updates the native select element's value based on the component's value.
351
+ * @returns {void}
352
+ * @private
353
+ */
354
+ private _updateNativeSelect;
355
+ render(): import("lit-html").TemplateResult;
356
+ }
357
+ import { LitElement } from "lit";
358
+ import { arrayConverter } from '@aurodesignsystem/auro-menu';
359
+ import { arrayOrUndefinedHasChanged } from '@aurodesignsystem/auro-menu';
package/components/select/dist/bibtemplateVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "1.0.0";
2
+ export default _default;
package/components/select/dist/dropdownVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "3.0.0";
2
+ export default _default;
package/components/select/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { AuroSelect };
2
+ import { AuroSelect } from './auro-select.js';