@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/dropdown/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-dropdown</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-dropdown'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/dropdown/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
+ # Dropdown
21
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
22
+ <!-- The below content is automatically added from ./docs/partials/description.md -->
23
+ The `auro-dropdown` component is a trigger and dropdown element combination intended to be used with dropdown content that is interactive. `auro-dropdown` is content agnostic and any valid HTML can be placed in either the trigger or the dropdown.
24
+
25
+ _Note: if the dropdown content in your implementation is not interactive (e.g. a tooltip) [auro-popover](http://auro.alaskaair.com/components/auro/popover) may better serve your needs._
26
+ <!-- AURO-GENERATED-CONTENT:END -->
27
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
28
+ <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
29
+ <!-- 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. -->
30
+ <!-- AURO-GENERATED-CONTENT:END -->
31
+
32
+ ## Getting Started
33
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
34
+ <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
35
+
36
+ #### NPM Installation
37
+
38
+ ```shell
39
+ $ npm i @aurodesignsystem/auro-formkit
40
+ ```
41
+ <!-- AURO-GENERATED-CONTENT:END -->
42
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
43
+ <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
44
+
45
+ ### Import Options
46
+
47
+ #### Automatic Registration
48
+
49
+ For automatic registration, simply import the component:
50
+
51
+ ```javascript
52
+ // Registers <auro-dropdown> automatically
53
+ import '@aurodesignsystem/auro-formkit/auro-dropdown';
54
+ ```
55
+
56
+ #### Custom Registration
57
+
58
+ To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroDropdown.register('custom-dropdown')` method on the component class and pass in a unique name.
59
+
60
+ ```javascript
61
+ // Import the class only
62
+ import { AuroDropdown } from '@aurodesignsystem/auro-formkit/auro-dropdown/class';
63
+
64
+ // Register with a custom name if desired
65
+ AuroDropdown.register('custom-dropdown');
66
+ ```
67
+
68
+ #### TypeScript Module Resolution
69
+
70
+ When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
71
+
72
+ ```json
73
+ {
74
+ "compilerOptions": {
75
+ "moduleResolution": "bundler"
76
+ }
77
+ }
78
+ ```
79
+
80
+ This configuration enables proper module resolution for the component's TypeScript files.
81
+ <!-- AURO-GENERATED-CONTENT:END -->
82
+ **Reference component in HTML**
83
+
84
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
85
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
86
+
87
+ ```html
88
+ <auro-dropdown aria-label="custom label">
89
+ Lorem ipsum solar
90
+ <div slot="trigger">
91
+ Trigger
92
+ </div>
93
+ </auro-dropdown>
94
+ ```
95
+ <!-- AURO-GENERATED-CONTENT:END -->
96
+
97
+ ### Design Token CSS Custom Property dependency
98
+
99
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
100
+ The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
101
+
102
+ <!-- AURO-GENERATED-CONTENT:END -->
103
+
104
+ ## Install from CDN
105
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
106
+ <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
107
+ 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.
108
+
109
+ ```html
110
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-dropdown/+esm"></script>
111
+ ```
112
+ <!-- AURO-GENERATED-CONTENT:END -->
113
+
114
+ ## UI development browser support
115
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
116
+ For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
117
+
118
+ <!-- AURO-GENERATED-CONTENT:END -->
119
+
120
+ ## auro-dropdown use cases
121
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
122
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
123
+ The `auro-dropdown` element should be used in situations where users may:
124
+
125
+ * interact with an element to get clarification on content offering
126
+ * provide definition to iconic imagery
127
+ * when interactive help is required
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/dropdown/dist/auro-dropdown.d.ts ADDED
@@ -0,0 +1,425 @@
1
+ export class AuroDropdown extends AuroElement {
2
+ static get properties(): {
3
+ /**
4
+ * If declared, bib's position will be automatically calculated where to appear.
5
+ * @default false
6
+ */
7
+ autoPlacement: {
8
+ type: BooleanConstructor;
9
+ reflect: boolean;
10
+ };
11
+ /**
12
+ * If declared, the dropdown will only show by calling the API .show() public method.
13
+ * @default false
14
+ */
15
+ disableEventShow: {
16
+ type: BooleanConstructor;
17
+ reflect: boolean;
18
+ };
19
+ /**
20
+ * If declared, applies a border around the trigger slot.
21
+ */
22
+ simple: {
23
+ type: BooleanConstructor;
24
+ reflect: boolean;
25
+ };
26
+ /**
27
+ * If declared, the dropdown displays a chevron on the right.
28
+ * @attr {Boolean} chevron
29
+ */
30
+ chevron: {
31
+ type: BooleanConstructor;
32
+ reflect: boolean;
33
+ };
34
+ /**
35
+ * If declared, the dropdown is not interactive.
36
+ */
37
+ disabled: {
38
+ type: BooleanConstructor;
39
+ reflect: boolean;
40
+ };
41
+ /**
42
+ * If declared, the focus trap inside of bib will be turned off.
43
+ */
44
+ disableFocusTrap: {
45
+ type: BooleanConstructor;
46
+ reflect: boolean;
47
+ };
48
+ /**
49
+ * @private
50
+ */
51
+ dropdownWidth: {
52
+ type: NumberConstructor;
53
+ };
54
+ /**
55
+ * The unique ID for the dropdown bib element.
56
+ * @private
57
+ */
58
+ dropdownId: {
59
+ type: StringConstructor;
60
+ reflect: boolean;
61
+ attribute: boolean;
62
+ };
63
+ /**
64
+ * If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both.
65
+ */
66
+ error: {
67
+ type: BooleanConstructor;
68
+ reflect: boolean;
69
+ };
70
+ /**
71
+ * Contains the help text message for the current validity error.
72
+ */
73
+ errorMessage: {
74
+ type: StringConstructor;
75
+ };
76
+ /**
77
+ * If declared, the bib will display when focus is applied to the trigger.
78
+ */
79
+ focusShow: {
80
+ type: BooleanConstructor;
81
+ reflect: boolean;
82
+ };
83
+ /**
84
+ * If true, the dropdown bib is displayed.
85
+ */
86
+ isPopoverVisible: {
87
+ type: BooleanConstructor;
88
+ reflect: boolean;
89
+ attribute: string;
90
+ };
91
+ /**
92
+ * If true, the dropdown bib is taking the fullscreen when it's open.
93
+ */
94
+ isBibFullscreen: {
95
+ type: BooleanConstructor;
96
+ reflect: boolean;
97
+ };
98
+ /**
99
+ * If declared, the trigger will toggle the dropdown on mouseover/mouseout.
100
+ */
101
+ hoverToggle: {
102
+ type: BooleanConstructor;
103
+ reflect: boolean;
104
+ };
105
+ /**
106
+ * @private
107
+ */
108
+ hasTriggerContent: {
109
+ type: BooleanConstructor;
110
+ };
111
+ /**
112
+ * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
113
+ * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
114
+ *
115
+ * When expanded, the dropdown will automatically display in fullscreen mode
116
+ * if the screen size is equal to or smaller than the selected breakpoint.
117
+ * @default sm
118
+ */
119
+ fullscreenBreakpoint: {
120
+ type: StringConstructor;
121
+ reflect: boolean;
122
+ };
123
+ /**
124
+ * Defines if the trigger should size based on the parent element providing the border UI.
125
+ * @private
126
+ */
127
+ parentBorder: {
128
+ type: BooleanConstructor;
129
+ reflect: boolean;
130
+ };
131
+ /**
132
+ * If declared, the popover and trigger will be set to the same width.
133
+ */
134
+ matchWidth: {
135
+ type: BooleanConstructor;
136
+ reflect: boolean;
137
+ };
138
+ /**
139
+ * If declared, the bib will NOT flip to an alternate position
140
+ * when there isn't enough space in the specified `placement`.
141
+ * @default false
142
+ */
143
+ noFlip: {
144
+ type: BooleanConstructor;
145
+ reflect: boolean;
146
+ };
147
+ /**
148
+ * If declared, the dropdown will not hide when moving focus outside the element.
149
+ */
150
+ noHideOnThisFocusLoss: {
151
+ type: BooleanConstructor;
152
+ reflect: boolean;
153
+ };
154
+ /**
155
+ * If declared, the trigger will only show the dropdown bib.
156
+ */
157
+ noToggle: {
158
+ type: BooleanConstructor;
159
+ reflect: boolean;
160
+ };
161
+ /**
162
+ * Gap between the trigger element and bib.
163
+ * @default 0
164
+ */
165
+ offset: {
166
+ type: NumberConstructor;
167
+ reflect: boolean;
168
+ };
169
+ /**
170
+ * If declared, onDark styles will be applied.
171
+ */
172
+ onDark: {
173
+ type: BooleanConstructor;
174
+ reflect: boolean;
175
+ };
176
+ /**
177
+ * If declared, and a function is set, that function will execute when the slot content is updated.
178
+ */
179
+ onSlotChange: {
180
+ type: FunctionConstructor;
181
+ reflect: boolean;
182
+ };
183
+ /**
184
+ * Position where the bib should appear relative to the trigger.
185
+ * @default bottom-start
186
+ */
187
+ placement: {
188
+ type: StringConstructor;
189
+ reflect: boolean;
190
+ };
191
+ /**
192
+ * @private
193
+ */
194
+ tabIndex: {
195
+ type: NumberConstructor;
196
+ };
197
+ /**
198
+ * The value for the role attribute of the trigger element.
199
+ */
200
+ a11yRole: {
201
+ type: StringConstructor;
202
+ attribute: boolean;
203
+ reflect: boolean;
204
+ };
205
+ };
206
+ static get styles(): import("lit").CSSResult[];
207
+ /**
208
+ * This will register this element with the browser.
209
+ * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
210
+ *
211
+ * @example
212
+ * AuroDropdown.register("custom-dropdown") // this will register this element to <custom-dropdown/>
213
+ *
214
+ */
215
+ static register(name?: string): void;
216
+ isPopoverVisible: boolean;
217
+ isBibFullscreen: boolean;
218
+ matchWidth: boolean;
219
+ noHideOnThisFocusLoss: boolean;
220
+ errorMessage: any;
221
+ layout: any;
222
+ shape: any;
223
+ size: any;
224
+ parentBorder: boolean;
225
+ /**
226
+ * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
227
+ * @private
228
+ * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
229
+ */
230
+ private handleDropdownToggle;
231
+ /**
232
+ * @private
233
+ * @returns {object} Class definition for the wrapper element.
234
+ */
235
+ private get commonWrapperClasses();
236
+ /**
237
+ * @private
238
+ * @returns {void} Internal defaults.
239
+ */
240
+ private privateDefaults;
241
+ chevron: boolean;
242
+ disabled: boolean;
243
+ disableFocusTrap: boolean;
244
+ error: boolean;
245
+ noToggle: boolean;
246
+ a11yRole: string;
247
+ onDark: boolean;
248
+ showTriggerBorders: boolean;
249
+ triggerContentFocusable: any;
250
+ simple: boolean;
251
+ placement: string;
252
+ offset: number;
253
+ noFlip: boolean;
254
+ autoPlacement: boolean;
255
+ /**
256
+ * @private
257
+ */
258
+ private hasTriggerContent;
259
+ /**
260
+ * @private
261
+ */
262
+ private triggerContentSlot;
263
+ /**
264
+ * @private
265
+ */
266
+ private runtimeUtils;
267
+ /**
268
+ * @private
269
+ */
270
+ private floater;
271
+ /**
272
+ * @private
273
+ */
274
+ private iconTag;
275
+ /**
276
+ * @private
277
+ */
278
+ private dropdownBibTag;
279
+ /**
280
+ * @private
281
+ */
282
+ private helpTextTag;
283
+ /**
284
+ * Creates and dispatches a duplicate focus event on the trigger element.
285
+ * @private
286
+ * @param {Event} event - The original focus event.
287
+ */
288
+ private bindFocusEventToTrigger;
289
+ /**
290
+ * @ignore
291
+ */
292
+ get floaterConfig(): {
293
+ placement: string;
294
+ flip: boolean;
295
+ autoPlacement: boolean;
296
+ offset: number;
297
+ };
298
+ /**
299
+ * Public method to hide the dropdown.
300
+ * @returns {void}
301
+ */
302
+ hide(): void;
303
+ /**
304
+ * Public method to show the dropdown.
305
+ * @returns {void}
306
+ */
307
+ show(): void;
308
+ /**
309
+ * When bib is open, focus on the first element inside of bib.
310
+ * If not, trigger element will get focus.
311
+ */
312
+ focus(): void;
313
+ /**
314
+ * Accessor for reusing the focusable entity query string.
315
+ * @private
316
+ * @returns {string}
317
+ */
318
+ private get focusableEntityQuery();
319
+ updated(changedProperties: any): void;
320
+ firstUpdated(): void;
321
+ dropdownId: any;
322
+ bibContent: any;
323
+ /**
324
+ * Exposes CSS parts for styling from parent components.
325
+ * @returns {void}
326
+ */
327
+ exposeCssParts(): void;
328
+ /**
329
+ * Determines if content is within a custom slot.
330
+ * @private
331
+ * @param {HTMLElement} element - The element to check.
332
+ * @returns {Boolean}
333
+ */
334
+ private isCustomSlotContent;
335
+ /**
336
+ * Function to support @focusin event.
337
+ * @private
338
+ * @return {void}
339
+ */
340
+ private handleFocusin;
341
+ hasFocus: boolean;
342
+ /**
343
+ * @private
344
+ */
345
+ private updateFocusTrap;
346
+ focusTrap: any;
347
+ /**
348
+ * Function to support @focusout event.
349
+ * @private
350
+ * @return {void}
351
+ */
352
+ private handleFocusout;
353
+ /**
354
+ * Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
355
+ * This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
356
+ * @private
357
+ */
358
+ private setupTriggerFocusEventBinding;
359
+ /**
360
+ * Clears focus and blur event listeners from nested Auro components within the trigger slot.
361
+ * @private
362
+ * @returns {void}
363
+ */
364
+ private clearTriggerFocusEventBinding;
365
+ clearTriggerA11yAttributes(triggerElement: any): void;
366
+ /**
367
+ * Handles changes to the trigger content slot and updates related properties.
368
+ *
369
+ * It first updates the floater settings
370
+ * Then, it retrieves the assigned nodes from the event target and checks if any of
371
+ * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
372
+ *
373
+ * @private
374
+ * @method handleTriggerContentSlotChange
375
+ * @param {Event} event - Native slotchange event.
376
+ * @returns {void}
377
+ */
378
+ private handleTriggerContentSlotChange;
379
+ triggerNode: EventTarget;
380
+ /**
381
+ * Handles the default slot change event and updates the content.
382
+ *
383
+ * This method retrieves all nodes assigned to the default slot of the event target and appends them
384
+ * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
385
+ * notify about the slot change.
386
+ *
387
+ * @private
388
+ * @method handleDefaultSlot
389
+ * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
390
+ */
391
+ private handleDefaultSlot;
392
+ /**
393
+ * Returns HTML for the common portion of the layouts.
394
+ * @private
395
+ * @param {Object} helpTextClasses - Classes to apply to the help text container.
396
+ * @returns {html} - Returns HTML.
397
+ */
398
+ private renderBasicHtml;
399
+ /**
400
+ * Returns HTML for the classic layout. Does not support type="*".
401
+ * @private
402
+ * @returns {html} - Returns HTML for the classic layout.
403
+ */
404
+ private renderLayoutClassic;
405
+ /**
406
+ * Returns HTML for the snowflake layout. Does not support type="*".
407
+ * @private
408
+ * @returns {html} - Returns HTML for the snowflake layout.
409
+ */
410
+ private renderLayoutSnowflake;
411
+ /**
412
+ * Returns HTML for the emphasized layout. Does not support type="*".
413
+ * @private
414
+ * @returns {html} - Returns HTML for the emphasized layout.
415
+ */
416
+ private renderLayoutEmphasized;
417
+ /**
418
+ * Logic to determine the layout of the component.
419
+ * @private
420
+ * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
421
+ * @returns {HTMLCollection} - Returns the HTML for the layout.
422
+ */
423
+ private renderLayout;
424
+ }
425
+ import { AuroElement } from '../../layoutElement/src/auroElement.js';
package/components/dropdown/dist/auro-dropdownBib.d.ts ADDED
@@ -0,0 +1,68 @@
1
+ /**
2
+ * @prop { String } fullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
3
+ * @csspart bibContainer - Apply css to the bib container.
4
+ */
5
+ export class AuroDropdownBib extends LitElement {
6
+ static get styles(): import("lit").CSSResult[];
7
+ static get properties(): {
8
+ /**
9
+ * If declared, will take the fullscreen when the bib is displayed.
10
+ */
11
+ isFullscreen: {
12
+ type: BooleanConstructor;
13
+ reflect: boolean;
14
+ };
15
+ /**
16
+ * If declared, will apply all styles for the common theme.
17
+ */
18
+ common: {
19
+ type: BooleanConstructor;
20
+ reflect: boolean;
21
+ };
22
+ /**
23
+ * If declared, will apply extra padding to bib content.
24
+ */
25
+ inset: {
26
+ type: BooleanConstructor;
27
+ reflect: boolean;
28
+ };
29
+ /**
30
+ * If declared, the bib width will match the trigger width.
31
+ * @private
32
+ */
33
+ matchWidth: {
34
+ type: BooleanConstructor;
35
+ reflect: boolean;
36
+ };
37
+ /**
38
+ * If declared, will apply border-radius to the bib.
39
+ */
40
+ rounded: {
41
+ type: BooleanConstructor;
42
+ reflect: boolean;
43
+ };
44
+ /**
45
+ * A reference to the associated bib template element.
46
+ */
47
+ bibTemplate: {
48
+ type: ObjectConstructor;
49
+ };
50
+ shape: {
51
+ type: StringConstructor;
52
+ reflect: boolean;
53
+ };
54
+ };
55
+ /**
56
+ * @private
57
+ */
58
+ private _mobileBreakpointValue;
59
+ shape: string;
60
+ matchWidth: boolean;
61
+ set mobileFullscreenBreakpoint(value: string);
62
+ get mobileFullscreenBreakpoint(): string;
63
+ updated(changedProperties: any): void;
64
+ bibTemplate: any;
65
+ firstUpdated(changedProperties: any): void;
66
+ render(): import("lit-html").TemplateResult;
67
+ }
68
+ import { LitElement } from "lit";
package/components/dropdown/dist/dropdownVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "3.0.0";
2
+ export default _default;
package/components/dropdown/dist/helptextVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "1.0.0";
2
+ export default _default;