@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/counter/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-counter</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-counter'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/counter/demo/readme.md ADDED
@@ -0,0 +1,146 @@
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
+ # Counter
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-counter` component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the `auro-counter-group` to facilitate a collection of counters to add passenger types to a flight.
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-counter> automatically
51
+ import '@aurodesignsystem/auro-formkit/auro-counter';
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 `AuroCounter.register('custom-counter')` method on the component class and pass in a unique name.
57
+
58
+ ```javascript
59
+ // Import the class only
60
+ import { AuroCounter } from '@aurodesignsystem/auro-formkit/auro-counter/class';
61
+
62
+ // Register with a custom name if desired
63
+ AuroCounter.register('custom-counter');
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-counter-group>
87
+ <auro-counter>
88
+ Short label
89
+ </auro-counter>
90
+ <auro-counter>
91
+ Another short label
92
+ </auro-counter>
93
+ <auro-counter>
94
+ This is an example of the wrapping behavior for a long label
95
+ </auro-counter>
96
+ </auro-counter-group>
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@latest/auro-counter/+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-counter 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-counter` element should be used in situations where users may:
127
+
128
+ * Need to input a numeric value within a defined range
129
+ * Need a user-friendly interface for quantity selection
130
+ <!-- AURO-GENERATED-CONTENT:END -->
131
+
132
+ ## Formkit development
133
+
134
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
135
+ <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
136
+
137
+ ### Filtering
138
+
139
+ Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
140
+
141
+ To only develop a single component, use the `--filter` flag:
142
+
143
+ ```shell
144
+ npx turbo dev --filter=@aurodesignsystem/auro-input
145
+ ```
146
+ <!-- AURO-GENERATED-CONTENT:END -->
package/components/counter/dist/auro-counter-button.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ export class AuroCounterButton {
2
+ static get styles(): import("lit").CSSResult[];
3
+ /**
4
+ * This will register this element with the browser.
5
+ * @param {string} [name="auro-counter-button"] - The name of element that you want to register to.
6
+ *
7
+ * @example
8
+ * AuroCounterButton.register("custom-counter-button") // this will register this element to <custom-counter-button/>
9
+ *
10
+ */
11
+ static register(name?: string): void;
12
+ size: string;
13
+ shape: string;
14
+ }
package/components/counter/dist/auro-counter-group.d.ts ADDED
@@ -0,0 +1,386 @@
1
+ /**
2
+ * Auro Counter Group is a group of counter components.
3
+ *
4
+ * This web component provides a flexible interface for grouping multiple counters, supporting
5
+ * validation, custom validity messages, and disabled states based on the group's value.
6
+ *
7
+ * @element auro-counter-group
8
+ * @extends LitElement
9
+ * @slot default - Slot for counter elements.
10
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
11
+ * @slot bib.fullscreen.headline - Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required.
12
+ * @slot bib.fullscreen.footer - Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true.
13
+ * @slot label - Dropdown label content. Only used when `isDropdown` is true.
14
+ * @slot valueText - Dropdown value text display. Only used when `isDropdown` is true.
15
+ * @slot helpText - Dropdown help text content. Only used when `isDropdown` is true.
16
+ * @property {'classic'|'snowflake'} layout - Determines the layout style of the counter group when it is a dropdown. Options are 'classic' or 'snowflake'. Default is 'classic'.
17
+ */
18
+ export class AuroCounterGroup extends LitElement {
19
+ static get styles(): import("lit").CSSResult[];
20
+ static get properties(): {
21
+ /**
22
+ * If declared, bib's position will be automatically calculated where to appear.
23
+ * @default false
24
+ */
25
+ autoPlacement: {
26
+ type: BooleanConstructor;
27
+ reflect: boolean;
28
+ };
29
+ /**
30
+ * The current error message to display when the component is invalid.
31
+ */
32
+ error: {
33
+ type: StringConstructor;
34
+ reflect: boolean;
35
+ };
36
+ /**
37
+ * The current error message to display when the component is invalid.
38
+ * This is set by validation and is not available to consumers.
39
+ * @private
40
+ */
41
+ errorMessage: {
42
+ type: StringConstructor;
43
+ reflect: boolean;
44
+ attribute: boolean;
45
+ };
46
+ /**
47
+ * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
48
+ * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
49
+ *
50
+ * When expanded, the dropdown will automatically display in fullscreen mode
51
+ * if the screen size is equal to or smaller than the selected breakpoint.
52
+ * @default sm
53
+ */
54
+ fullscreenBreakpoint: {
55
+ type: StringConstructor;
56
+ reflect: boolean;
57
+ };
58
+ /**
59
+ * Indicates if the counter group is displayed as a dropdown.
60
+ */
61
+ isDropdown: {
62
+ type: BooleanConstructor;
63
+ };
64
+ /**
65
+ * If declared, the dropdown will expand to the width of its parent container.
66
+ * Otherwise, the dropdown width will be determined by its content.
67
+ */
68
+ matchWidth: {
69
+ type: BooleanConstructor;
70
+ reflect: boolean;
71
+ };
72
+ /**
73
+ * The maximum value allowed for the whole group of counters.
74
+ */
75
+ max: {
76
+ type: NumberConstructor;
77
+ reflect: boolean;
78
+ };
79
+ /**
80
+ * The minimum value allowed for the whole group of counters.
81
+ */
82
+ min: {
83
+ type: NumberConstructor;
84
+ reflect: boolean;
85
+ };
86
+ /**
87
+ * If declared, make bib.fullscreen.headline in HeadingDisplay.
88
+ * Otherwise, Heading 600.
89
+ */
90
+ largeFullscreenHeadline: {
91
+ type: BooleanConstructor;
92
+ reflect: boolean;
93
+ };
94
+ /**
95
+ * If declared, the bib will NOT flip to an alternate position
96
+ * when there isn't enough space in the specified `placement`.
97
+ * @default false
98
+ */
99
+ noFlip: {
100
+ type: BooleanConstructor;
101
+ reflect: boolean;
102
+ };
103
+ /**
104
+ * Gap between the trigger element and bib.
105
+ * @default 0
106
+ */
107
+ offset: {
108
+ type: NumberConstructor;
109
+ reflect: boolean;
110
+ };
111
+ /**
112
+ * If declared, counters and dropdown will be rendered with onDark styles.
113
+ */
114
+ onDark: {
115
+ type: BooleanConstructor;
116
+ reflect: boolean;
117
+ };
118
+ /**
119
+ * Position where the bib should appear relative to the trigger.
120
+ * Accepted values:
121
+ * "top" | "right" | "bottom" | "left" |
122
+ * "bottom-start" | "top-start" | "top-end" |
123
+ * "right-start" | "right-end" | "bottom-end" |
124
+ * "left-start" | "left-end".
125
+ * @default bottom-start
126
+ */
127
+ placement: {
128
+ type: StringConstructor;
129
+ reflect: boolean;
130
+ };
131
+ /**
132
+ * The total value of the counters.
133
+ */
134
+ total: {
135
+ type: NumberConstructor;
136
+ };
137
+ /**
138
+ * Reflects the validity state.
139
+ */
140
+ validity: {
141
+ type: StringConstructor;
142
+ reflect: boolean;
143
+ };
144
+ /**
145
+ * The current individual values of the nested counters.
146
+ */
147
+ value: {
148
+ type: ObjectConstructor;
149
+ };
150
+ /**
151
+ * The current text in the valueText slot.
152
+ * @private
153
+ */
154
+ valueText: {
155
+ type: StringConstructor;
156
+ reflect: boolean;
157
+ attribute: boolean;
158
+ };
159
+ };
160
+ /**
161
+ * Registers the custom element with the browser.
162
+ * @param {string} [name="auro-counter-group"] - Custom element name to register.
163
+ * @example
164
+ * AuroCounterGroup.register("custom-counter-group") // registers <custom-counter-group/>
165
+ */
166
+ static register(name?: string): void;
167
+ max: any;
168
+ min: any;
169
+ onDark: boolean;
170
+ total: number;
171
+ validity: any;
172
+ value: {};
173
+ matchWidth: boolean;
174
+ isDropdown: boolean;
175
+ fullscreenBreakpoint: string;
176
+ largeFullscreenHeadline: boolean;
177
+ autoPlacement: boolean;
178
+ noFlip: boolean;
179
+ placement: string;
180
+ /**
181
+ * @private
182
+ */
183
+ private counters;
184
+ /**
185
+ * @private
186
+ */
187
+ private dropdown;
188
+ /**
189
+ * @private
190
+ */
191
+ private bibtemplate;
192
+ /**
193
+ * @private
194
+ */
195
+ private validation;
196
+ /**
197
+ * Updates the aggregate value based on the values of contained auro-counter components.
198
+ * This method queries for all `auro-counter` elements, sums their values, and updates the component's `value` property.
199
+ * Additionally, it iterates through each counter and calls `manageDisabled()` on it.
200
+ * @private
201
+ */
202
+ private updateValue;
203
+ /**
204
+ * Updates the validity of the counter group based on the validity of its counters.
205
+ * This method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.
206
+ * If any counter is invalid, it generates a combined error message from all invalid counters.
207
+ * @returns {void}
208
+ * @private
209
+ */
210
+ private updateValidity;
211
+ /**
212
+ * Dynamically generated dropdown tag.
213
+ * @private
214
+ * @type {string}
215
+ */
216
+ private dropdownTag;
217
+ /**
218
+ * Dynamically generated bibtempalate tag.
219
+ * @private
220
+ * @type {string}
221
+ */
222
+ private bibtemplateTag;
223
+ /**
224
+ * Dynamically generated helpText tag.
225
+ * @private
226
+ * @type {string}
227
+ */
228
+ private helpTextTag;
229
+ /**
230
+ * @private
231
+ */
232
+ private iconTag;
233
+ /**
234
+ * Dynamically disables increment/decrement buttons on a counter based on group value.
235
+ * This method checks the total aggregated value against the group's min and max properties.
236
+ * If the total value is at or below the minimum, the counter's decrement button is disabled; if at or above the maximum, the increment button is disabled.
237
+ *
238
+ * @param {HTMLElement} counter - The counter element to potentially disable.
239
+ * @private
240
+ */
241
+ private manageDisabled;
242
+ /**
243
+ * Attaches input event listeners to all auro-counter elements within the component.
244
+ * This method selects all `auro-counter` and `[auro-counter]` elements and adds an `input` event listener to each.
245
+ * The listener calls `this.updateValue()` whenever the value of a counter changes.
246
+ * @private
247
+ */
248
+ private configureCounters;
249
+ /**
250
+ * Renders help text error messages.
251
+ * @param {Array<string>} messages - The error messages to render.
252
+ * @returns {TemplateResult[]} - The rendered error messages rendered in a TemplateResult.
253
+ * @private
254
+ */
255
+ private renderHelpTextErrors;
256
+ /**
257
+ * Gets and returns an array of counters in an invalid state.
258
+ * @returns {Array<HTMLElement>} - Returns an array of invalid counters.
259
+ * @param {NodeList} counters - The NodeList of counter elements to check.
260
+ * @private
261
+ */
262
+ private getInvalidCounters;
263
+ /**
264
+ * Gets all valid error messages from errored counters.
265
+ * @param {NodeList} invalidCounters - The NodeList of counter elements to check.
266
+ * @returns {Array<string>} - Returns an array of error messages from invalid counters.
267
+ * @private
268
+ */
269
+ private getErrorMessages;
270
+ errorMessage: any;
271
+ /**
272
+ * Hides the dropdown bib if its open.
273
+ * @returns {void}
274
+ */
275
+ hideBib(): void;
276
+ /**
277
+ * Shows the dropdown bib if there are options to show.
278
+ * @returns {void}
279
+ */
280
+ showBib(): void;
281
+ /**
282
+ * Configures the dropdown counters by selecting all `auro-counter` elements,
283
+ * appending them to the `auro-counter-wrapper` element within the shadow DOM,
284
+ * and setting up keyboard navigation and input event listeners.
285
+ * @private
286
+ */
287
+ private configureDropdownCounters;
288
+ /**
289
+ * This sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
290
+ * @private
291
+ */
292
+ private configureBibtemplate;
293
+ /**
294
+ * Watch for slot changes and recalculate the menuoptions.
295
+ * @private
296
+ * @param {Event} event - `slotchange` event.
297
+ * @returns {void}
298
+ */
299
+ private handleSlotChange;
300
+ /**
301
+ * Safely converts a value to a number, returning 0 if invalid.
302
+ * @private
303
+ * @param {*} value - The value to convert.
304
+ * @returns {number} The converted number or 0 if invalid.
305
+ */
306
+ private safeNumberConversion;
307
+ /**
308
+ * Updates the value text in the dropdown trigger based on the counters in the counter group.
309
+ * @private
310
+ */
311
+ private updateValueText;
312
+ valueText: any;
313
+ /**
314
+ * Validates value.
315
+ * @param {boolean} [force=false] - Whether to force validation.
316
+ */
317
+ validate(force?: boolean): void;
318
+ updated(changedProperties: any): void;
319
+ firstUpdated(): void;
320
+ /**
321
+ * Returns HTML for the help text and error message.
322
+ * @private
323
+ * @returns {html} - Returns HTML for the help text and error message.
324
+ */
325
+ private renderHelpText;
326
+ /**
327
+ * Returns HTML for the validation error icon.
328
+ * @private
329
+ * @returns {html} - Returns HTML for the validation error icon.
330
+ */
331
+ private renderValidationErrorIcon;
332
+ /**
333
+ * Render the dropdown structure for the counter group.
334
+ * @returns {TemplateResult} The dropdown template.
335
+ * @private
336
+ */
337
+ private renderCounterDropdown;
338
+ /**
339
+ * Render the dropdown trigger for the dropdown.
340
+ * @returns {TemplateResult} The dropdown trigger template.
341
+ * @private
342
+ */
343
+ private renderDropdownTrigger;
344
+ /**
345
+ * Render the dropdown bib template for the dropdown.
346
+ * @returns {TemplateResult} The bib template.
347
+ * @private
348
+ */
349
+ private renderBibTemplate;
350
+ /**
351
+ * Render the fullscreen bib slots for the dropdown.
352
+ * @returns {TemplateResult} The fullscreen slots template.
353
+ * @private
354
+ */
355
+ private renderFullscreenSlots;
356
+ /**
357
+ * Render the counter group container.
358
+ * @param {boolean} isInDropdown - Whether the counter group is inside a dropdown.
359
+ * @returns {TemplateResult} The counter group template.
360
+ * @private
361
+ */
362
+ private renderCounterGroup;
363
+ /**
364
+ * Render the classic layout.
365
+ * @returns {TemplateResult} The classic layout template.
366
+ * @private
367
+ */
368
+ private renderLayoutClassic;
369
+ shape: any;
370
+ layout: any;
371
+ size: any;
372
+ /**
373
+ * Render the snowflake layout.
374
+ * @returns {TemplateResult} The snowflake layout template.
375
+ * @private
376
+ */
377
+ private renderLayoutSnowflake;
378
+ /**
379
+ * Renders the component by layout type.
380
+ * @param {string} [ForcedLayout] - Optionally force a specific layout for rendering.
381
+ * @returns {TemplateResult} The layout template.
382
+ * @private
383
+ */
384
+ private renderLayout;
385
+ }
386
+ import { LitElement } from "lit";
package/components/counter/dist/auro-counter-wrapper.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ /**
2
+ * Auro Counter Wrapper is a group of counter components.
3
+ *
4
+ * This web component provides a flexible interface for grouping multiple counters, supporting
5
+ * validation, custom validity messages, and disabled states based on the group's value.
6
+ *
7
+ * @element auro-counter-group
8
+ * @extends LitElement
9
+ * @slot Default - Slot for counter elements.
10
+ */
11
+ export class AuroCounterWrapper extends LitElement {
12
+ static get styles(): import("lit").CSSResult[];
13
+ /**
14
+ * Registers the custom element with the browser.
15
+ * @param {string} [name="auro-counter-wrapper"] - Custom element name to register.
16
+ * @example
17
+ * AuroCounterWrapper.register("custom-counter-wrapper") // registers <custom-counter-wrapper/>
18
+ */
19
+ static register(name?: string): void;
20
+ render(): import("lit-html").TemplateResult;
21
+ }
22
+ import { LitElement } from "lit";