@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/menu/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-menu 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/menu/demo/readme.md ADDED
@@ -0,0 +1,145 @@
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
+ # Menu
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-menu>` element provides a list of options for a user to select from.
24
+
25
+ A list of options is created within the `<slot>` of the `<auro-menu>` element by using the `<auro-menuoption>` element to define options. Use a standard `<hr>` element to create dividers within the list of options.
26
+
27
+ The `<auro-menu>` element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The `<auro-menu>` element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.
28
+ <!-- AURO-GENERATED-CONTENT:END -->
29
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
30
+ <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
31
+ <!-- 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. -->
32
+ <!-- AURO-GENERATED-CONTENT:END -->
33
+
34
+ ## Getting Started
35
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
36
+ <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
37
+
38
+ #### NPM Installation
39
+
40
+ ```shell
41
+ $ npm i @aurodesignsystem/auro-formkit
42
+ ```
43
+ <!-- AURO-GENERATED-CONTENT:END -->
44
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
45
+ <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
46
+
47
+ ### Import Options
48
+
49
+ #### Automatic Registration
50
+
51
+ For automatic registration, simply import the component:
52
+
53
+ ```javascript
54
+ // Registers <auro-menu> automatically
55
+ import '@aurodesignsystem/auro-formkit/auro-menu';
56
+ ```
57
+
58
+ #### Custom Registration
59
+
60
+ To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroMenu.register('custom-menu')` method on the component class and pass in a unique name.
61
+
62
+ ```javascript
63
+ // Import the class only
64
+ import { AuroMenu } from '@aurodesignsystem/auro-formkit/auro-menu/class';
65
+
66
+ // Register with a custom name if desired
67
+ AuroMenu.register('custom-menu');
68
+ ```
69
+
70
+ #### TypeScript Module Resolution
71
+
72
+ When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
73
+
74
+ ```json
75
+ {
76
+ "compilerOptions": {
77
+ "moduleResolution": "bundler"
78
+ }
79
+ }
80
+ ```
81
+
82
+ This configuration enables proper module resolution for the component's TypeScript files.
83
+ <!-- AURO-GENERATED-CONTENT:END -->
84
+ **Reference component in HTML**
85
+
86
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
87
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
88
+
89
+ ```html
90
+ <auro-menu>
91
+ <auro-menuoption value="stops">Stops</auro-menuoption>
92
+ <auro-menuoption value="price">Price</auro-menuoption>
93
+ <auro-menuoption value="duration">Duration</auro-menuoption>
94
+ <auro-menuoption value="departure">Departure</auro-menuoption>
95
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
96
+ </auro-menu>
97
+ ```
98
+ <!-- AURO-GENERATED-CONTENT:END -->
99
+
100
+ ### Design Token CSS Custom Property dependency
101
+
102
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
103
+ The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
104
+
105
+ <!-- AURO-GENERATED-CONTENT:END -->
106
+
107
+ ## Install from CDN
108
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
109
+ <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
110
+ 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.
111
+
112
+ ```html
113
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-menu/+esm"></script>
114
+ ```
115
+ <!-- AURO-GENERATED-CONTENT:END -->
116
+
117
+ ## UI development browser support
118
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
119
+ For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
120
+
121
+ <!-- AURO-GENERATED-CONTENT:END -->
122
+
123
+ ## auro-menu use cases
124
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
125
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
126
+ The `<auro-menu>` element should be used in situations where users may:
127
+
128
+ * A user needs to select one option from a list of options.
129
+ <!-- AURO-GENERATED-CONTENT:END -->
130
+
131
+ ## Formkit development
132
+
133
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
134
+ <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
135
+
136
+ ### Filtering
137
+
138
+ Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
139
+
140
+ To only develop a single component, use the `--filter` flag:
141
+
142
+ ```shell
143
+ npx turbo dev --filter=@aurodesignsystem/auro-input
144
+ ```
145
+ <!-- AURO-GENERATED-CONTENT:END -->
package/components/menu/dist/auro-menu-utils.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ /**
2
+ * Converts value to an array.
3
+ * If the value is a JSON string representing an array, it will be parsed.
4
+ * If the value is already an array, it is returned.
5
+ * If the value is undefined, it returns undefined.
6
+ * @private
7
+ * @param {any} value - The value to be converted. Can be a string, array, or undefined.
8
+ * @returns {Array|undefined} - The converted array or undefined.
9
+ * @throws {Error} - Throws an error if the value is not an array, undefined,
10
+ * or if the value cannot be parsed into an array from a JSON string.
11
+ */
12
+ export function arrayConverter(value: any): any[] | undefined;
13
+ /**
14
+ * Compare two arrays for equality.
15
+ * @private
16
+ * @param {Array} arr1 - First array to compare.
17
+ * @param {Array} arr2 - Second array to compare.
18
+ * @returns {boolean} True if arrays are equal.
19
+ */
20
+ export function arraysAreEqual(arr1: any[], arr2: any[]): boolean;
21
+ /**
22
+ * Compares array for changes.
23
+ * @private
24
+ * @param {Array|any} newVal - New value to compare.
25
+ * @param {Array|any} oldVal - Old value to compare.
26
+ * @returns {boolean} True if arrays have changed.
27
+ */
28
+ export function arrayOrUndefinedHasChanged(newVal: any[] | any, oldVal: any[] | any): boolean;
29
+ /**
30
+ * Validates if an option can be interacted with.
31
+ * @private
32
+ * @param {HTMLElement} option - The option to check.
33
+ * @returns {boolean} True if option is interactive.
34
+ */
35
+ export function isOptionInteractive(option: HTMLElement): boolean;
36
+ /**
37
+ * Helper method to dispatch custom events.
38
+ * @param {HTMLElement} element - Element to dispatch event from.
39
+ * @param {string} eventName - Name of the event to dispatch.
40
+ * @param {Object} [detail] - Optional detail object to include with the event.
41
+ */
42
+ export function dispatchMenuEvent(element: HTMLElement, eventName: string, detail?: any): void;
package/components/menu/dist/auro-menu.d.ts ADDED
@@ -0,0 +1,205 @@
1
+ /**
2
+ * The auro-menu element provides users a way to select from a list of options.
3
+ * @attr {Array<HTMLElement>|undefined} optionSelected - An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected.
4
+ * @attr {object} optionactive - Specifies the current active menuOption.
5
+ * @attr {string} matchword - Specifies a string used to highlight matched string parts in options.
6
+ * @attr {boolean} disabled - When true, the entire menu and all options are disabled;
7
+ * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
8
+ * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
9
+ * @attr {boolean} multiselect - When true, the selected option can be multiple options.
10
+ * @attr {Array<string>|undefined} value - Value selected for the menu. `undefined` when no selection has been made, otherwise an array of strings. In single-select mode, the array will contain only one value.
11
+ * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
12
+ * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
13
+ * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
14
+ * @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
15
+ * @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
16
+ * @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
17
+ * @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
18
+ * @slot loadingText - Text to show while loading attribute is set
19
+ * @slot loadingIcon - Icon to show while loading attribute is set
20
+ * @slot - Slot for insertion of menu options.
21
+ */
22
+ export class AuroMenu extends LitElement {
23
+ static get properties(): {
24
+ noCheckmark: {
25
+ type: BooleanConstructor;
26
+ reflect: boolean;
27
+ attribute: string;
28
+ };
29
+ disabled: {
30
+ type: BooleanConstructor;
31
+ reflect: boolean;
32
+ };
33
+ loading: {
34
+ type: BooleanConstructor;
35
+ reflect: boolean;
36
+ };
37
+ optionSelected: {
38
+ converter: typeof arrayConverter;
39
+ hasChanged: typeof arrayOrUndefinedHasChanged;
40
+ };
41
+ optionActive: {
42
+ type: ObjectConstructor;
43
+ attribute: string;
44
+ };
45
+ matchWord: {
46
+ type: StringConstructor;
47
+ attribute: string;
48
+ };
49
+ multiSelect: {
50
+ type: BooleanConstructor;
51
+ reflect: boolean;
52
+ attribute: string;
53
+ };
54
+ value: {
55
+ type: ObjectConstructor;
56
+ converter: typeof arrayConverter;
57
+ hasChanged: typeof arrayOrUndefinedHasChanged;
58
+ };
59
+ };
60
+ static get styles(): import("lit").CSSResult[];
61
+ /**
62
+ * This will register this element with the browser.
63
+ * @param {string} [name="auro-menu"] - The name of element that you want to register to.
64
+ *
65
+ * @example
66
+ * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
67
+ *
68
+ */
69
+ static register(name?: string): void;
70
+ value: any;
71
+ optionSelected: any;
72
+ matchWord: any;
73
+ noCheckmark: boolean;
74
+ optionActive: Element;
75
+ loading: boolean;
76
+ multiSelect: boolean;
77
+ /**
78
+ * Handles keyboard navigation.
79
+ * @private
80
+ * @param {KeyboardEvent} event - Event object from the browser.
81
+ */
82
+ private handleKeyDown;
83
+ /**
84
+ * Handles option selection via mouse.
85
+ * @private
86
+ * @param {MouseEvent} event - Event object from the browser.
87
+ */
88
+ private handleMouseSelect;
89
+ /**
90
+ * Handles option hover events.
91
+ * @private
92
+ * @param {CustomEvent} event - Event object from the browser.
93
+ */
94
+ private handleOptionHover;
95
+ /**
96
+ * Handles slot change events.
97
+ * @private
98
+ */
99
+ private handleSlotChange;
100
+ firstUpdated(): void;
101
+ loadingSlots: NodeListOf<Element>;
102
+ updated(changedProperties: any): void;
103
+ index: any;
104
+ /**
105
+ * Updates the UI state and appearance of menu items based on changed properties.
106
+ * @private
107
+ * @param {Map<string, boolean>} changedProperties - LitElement's changed properties map.
108
+ */
109
+ private updateItemsState;
110
+ /**
111
+ * Initializes the menu's state and structure.
112
+ * @private
113
+ */
114
+ private initializeMenu;
115
+ /**
116
+ * Initializes menu items and their attributes.
117
+ * @private
118
+ */
119
+ private initItems;
120
+ items: Element[];
121
+ /**
122
+ * Updates menu state when an option is selected.
123
+ * @private
124
+ * @param {HTMLElement} option - The option element to select.
125
+ */
126
+ private handleSelectState;
127
+ /**
128
+ * Deselects a menu option and updates related state.
129
+ * @private
130
+ * @param {HTMLElement} option - The menuoption to be deselected.
131
+ */
132
+ private handleDeselectState;
133
+ /**
134
+ * Resets all options to their default state.
135
+ * @private
136
+ */
137
+ private clearSelection;
138
+ /**
139
+ * Resets the menu to its initial state.
140
+ * This is the only way to return value to undefined.
141
+ * @public
142
+ */
143
+ public reset(): void;
144
+ /**
145
+ * Handles nested menu structure.
146
+ * @private
147
+ * @param {HTMLElement} menu - Root menu element.
148
+ */
149
+ private handleNestedMenus;
150
+ /**
151
+ * Makes a selection based on the current index or clicked option.
152
+ * @private
153
+ */
154
+ private makeSelection;
155
+ /**
156
+ * Toggle the selection state of the menuoption.
157
+ * @private
158
+ * @param {HTMLElement} option - The menuoption to toggle.
159
+ */
160
+ private toggleOption;
161
+ rootMenu: boolean;
162
+ /**
163
+ * Navigates through options using keyboard.
164
+ * @private
165
+ * @param {string} direction - 'up' or 'down'.
166
+ */
167
+ private navigateOptions;
168
+ /**
169
+ * Updates the active option state and dispatches events.
170
+ * @private
171
+ * @param {number} index - Index of the option to make active.
172
+ */
173
+ private updateActiveOption;
174
+ /**
175
+ * Handles custom events defined on options.
176
+ * @private
177
+ * @param {HTMLElement} option - Option with custom event.
178
+ */
179
+ private handleCustomEvent;
180
+ /**
181
+ * Notifies selection change to parent components.
182
+ * @private
183
+ */
184
+ private notifySelectionChange;
185
+ /**
186
+ * Checks if an option is currently selected.
187
+ * @private
188
+ * @param {HTMLElement} option - The option to check.
189
+ * @returns {boolean}
190
+ */
191
+ private isOptionSelected;
192
+ /**
193
+ * Getter for loading placeholder state.
194
+ * @returns {boolean} - True if loading slots are present and non-empty.
195
+ */
196
+ get hasLoadingPlaceholder(): boolean;
197
+ /**
198
+ * Renders the component.
199
+ * @returns {boolean} - True if loading slots are present and non-empty.
200
+ */
201
+ render(): boolean;
202
+ }
203
+ import { LitElement } from "lit";
204
+ import { arrayConverter } from './auro-menu-utils.js';
205
+ import { arrayOrUndefinedHasChanged } from './auro-menu-utils.js';
package/components/menu/dist/auro-menuoption.d.ts ADDED
@@ -0,0 +1,63 @@
1
+ /**
2
+ * The auro-menu element provides users a way to define a menu option.
3
+ *
4
+ * @attr {String} value - Specifies the value to be sent to a server.
5
+ * @attr {String} noCheckmark - When true, selected option will not show the checkmark.
6
+ * @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
7
+ * @attr {Boolean} selected - Specifies that an option is selected.
8
+ * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
9
+ * @slot - Specifies text for an option, but is not the value.
10
+ */
11
+ export class AuroMenuOption extends LitElement {
12
+ static get properties(): {
13
+ nocheckmark: {
14
+ type: BooleanConstructor;
15
+ reflect: boolean;
16
+ };
17
+ selected: {
18
+ type: BooleanConstructor;
19
+ reflect: boolean;
20
+ };
21
+ disabled: {
22
+ type: BooleanConstructor;
23
+ reflect: boolean;
24
+ };
25
+ value: {
26
+ type: StringConstructor;
27
+ };
28
+ tabIndex: {
29
+ type: NumberConstructor;
30
+ reflect: boolean;
31
+ };
32
+ };
33
+ static get styles(): import("lit").CSSResult[];
34
+ /**
35
+ * This will register this element with the browser.
36
+ * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
37
+ *
38
+ * @example
39
+ * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
40
+ *
41
+ */
42
+ static register(name?: string): void;
43
+ iconTag: any;
44
+ selected: boolean;
45
+ nocheckmark: boolean;
46
+ disabled: boolean;
47
+ /**
48
+ * @private
49
+ */
50
+ private runtimeUtils;
51
+ firstUpdated(): void;
52
+ updated(changedProperties: any): void;
53
+ /**
54
+ * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
55
+ *
56
+ * @private
57
+ * @param {string} svgContent - The SVG content to be embedded.
58
+ * @returns {Element} The HTML element containing the SVG icon.
59
+ */
60
+ private generateIconHtml;
61
+ render(): import("lit-html").TemplateResult;
62
+ }
63
+ import { LitElement } from "lit";
package/components/menu/dist/dropdownVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "3.0.0";
2
+ export default _default;
package/components/menu/dist/iconVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "8.0.2";
2
+ export default _default;
package/components/menu/dist/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { AuroMenu } from './auro-menu.js';
2
+ import { AuroMenuOption } from './auro-menuoption.js';
3
+ export { AuroMenu, AuroMenuOption };
4
+ export { arrayConverter, arrayOrUndefinedHasChanged, isOptionInteractive, dispatchMenuEvent } from "./auro-menu-utils.js";