@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/index.html ADDED
@@ -0,0 +1,61 @@
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('./index.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
+ <!-- If additional elements are needed for the demo, add them here. -->
57
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
58
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
59
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
60
+ </body>
61
+ </html>
package/components/counter/demo/index.js ADDED
@@ -0,0 +1,21 @@
1
+ /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
2
+ import { AuroCounter } from '../src/auro-counter.js';
3
+ import { AuroCounterGroup } from '../src/auro-counter-group.js';
4
+
5
+ AuroCounter.register();
6
+ AuroCounterGroup.register();
7
+ AuroCounterGroup.register('custom-counter-group');
8
+ AuroCounter.register('custom-counter');
9
+
10
+ export function initExamples(initialCount = 0) {
11
+ try {
12
+
13
+ } catch (err) {
14
+ if (initialCount <= 20) {
15
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
16
+ setTimeout(() => {
17
+ initExamples(initialCount + 1);
18
+ }, 100);
19
+ }
20
+ }
21
+ }
package/components/counter/demo/index.md ADDED
@@ -0,0 +1,401 @@
1
+ <!--
2
+ The index.md file is a compiled document. No edits should be made directly to this file.
3
+
4
+ index.md is created by running `npm run build:markdownDocs`.
5
+
6
+ This file is generated based on a template fetched from `./docs/partials/index.md`
7
+ -->
8
+
9
+ # Counter
10
+
11
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
12
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
13
+ 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.
14
+ <!-- AURO-GENERATED-CONTENT:END -->
15
+
16
+ ## Examples
17
+
18
+ ### Basic Counter
19
+
20
+ The counter component provides a simple interface for incrementing or decrementing numeric values. It displays a label with increment/decrement buttons and the current value. This is the most basic implementation of a standalone counter:
21
+
22
+ <div class="exampleWrapper">
23
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
24
+ <!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
25
+ <auro-counter>
26
+ Adults
27
+ </auro-counter>
28
+ <!-- AURO-GENERATED-CONTENT:END -->
29
+ </div>
30
+ <div class="exampleWrapper--ondark" aria-hidden>
31
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
32
+ <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
33
+ <auro-counter onDark>
34
+ Adults
35
+ </auro-counter>
36
+ <!-- AURO-GENERATED-CONTENT:END -->
37
+ </div>
38
+ <auro-accordion alignRight>
39
+ <span slot="trigger">See code</span>
40
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-standalone.html) -->
41
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic-standalone.html -->
42
+
43
+ ```html
44
+ <auro-counter>
45
+ Adults
46
+ </auro-counter>
47
+ ```
48
+ <!-- AURO-GENERATED-CONTENT:END -->
49
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
50
+ <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
51
+ <auro-counter onDark>
52
+ Adults
53
+ </auro-counter>
54
+ <!-- AURO-GENERATED-CONTENT:END -->
55
+ </auro-accordion>
56
+
57
+ ### Counter with Description
58
+
59
+ Adding a description provides additional context to users. The description appears below the main label and is useful for displaying important information or requirements:
60
+
61
+ <div class="exampleWrapper">
62
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-description.html) -->
63
+ <!-- The below content is automatically added from ./../apiExamples/basic-description.html -->
64
+ <auro-counter>
65
+ Adults
66
+ <span slot="description">18 years or older</span>
67
+ </auro-counter>
68
+ <!-- AURO-GENERATED-CONTENT:END -->
69
+ </div>
70
+ <div class="exampleWrapper--ondark" aria-hidden>
71
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDescription.html) -->
72
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDescription.html -->
73
+ <auro-counter onDark>
74
+ Adults
75
+ <span slot="description">18 years or older</span>
76
+ </auro-counter>
77
+ <!-- AURO-GENERATED-CONTENT:END -->
78
+ </div>
79
+ <auro-accordion alignRight>
80
+ <span slot="trigger">See code</span>
81
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-description.html) -->
82
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic-description.html -->
83
+
84
+ ```html
85
+ <auro-counter>
86
+ Adults
87
+ <span slot="description">18 years or older</span>
88
+ </auro-counter>
89
+ ```
90
+ <!-- AURO-GENERATED-CONTENT:END -->
91
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDescription.html) -->
92
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDescription.html -->
93
+ <auro-counter onDark>
94
+ Adults
95
+ <span slot="description">18 years or older</span>
96
+ </auro-counter>
97
+ <!-- AURO-GENERATED-CONTENT:END -->
98
+ </auro-accordion>
99
+
100
+ ### Counter with Help Text
101
+
102
+ Help text is supported with counters, and can be added by targetting the `helptext` slot.
103
+
104
+ <div class="exampleWrapper">
105
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-helptext.html) -->
106
+ <!-- The below content is automatically added from ./../apiExamples/counter-helptext.html -->
107
+ <auro-counter>
108
+ Adults
109
+ <span slot="helpText">This is help text for the counter</span>
110
+ </auro-counter>
111
+ <!-- AURO-GENERATED-CONTENT:END -->
112
+ </div>
113
+ <div class="exampleWrapper--ondark" aria-hidden>
114
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-helptext.html) -->
115
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-helptext.html -->
116
+ <auro-counter ondark>
117
+ Adults
118
+ <span slot="helpText">This is help text for the counter</span>
119
+ </auro-counter>
120
+ <!-- AURO-GENERATED-CONTENT:END -->
121
+ </div>
122
+ <auro-accordion alignRight>
123
+ <span slot="trigger">See code</span>
124
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-helptext.html) -->
125
+ <!-- The below code snippet is automatically added from ./../apiExamples/counter-helptext.html -->
126
+
127
+ ```html
128
+ <auro-counter>
129
+ Adults
130
+ <span slot="helpText">This is help text for the counter</span>
131
+ </auro-counter>
132
+ ```
133
+ <!-- AURO-GENERATED-CONTENT:END -->
134
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-helptext.html) -->
135
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-helptext.html -->
136
+ <auro-counter ondark>
137
+ Adults
138
+ <span slot="helpText">This is help text for the counter</span>
139
+ </auro-counter>
140
+ <!-- AURO-GENERATED-CONTENT:END -->
141
+ </auro-accordion>
142
+
143
+ ### Counter with Custom Error
144
+
145
+ A custom error can be set on the counter by adding the `error` attribute with the desired message.
146
+
147
+ <div class="exampleWrapper">
148
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-error.html) -->
149
+ <!-- The below content is automatically added from ./../apiExamples/counter-error.html -->
150
+ <auro-counter error="There is an error with the counter">
151
+ Adults
152
+ </auro-counter>
153
+ <!-- AURO-GENERATED-CONTENT:END -->
154
+ </div>
155
+ <div class="exampleWrapper--ondark" aria-hidden>
156
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
157
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
158
+ <auro-counter ondark error="There is an error with the counter">
159
+ Adults
160
+ </auro-counter>
161
+ <!-- AURO-GENERATED-CONTENT:END -->
162
+ </div>
163
+ <auro-accordion alignRight>
164
+ <span slot="trigger">See code</span>
165
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-error.html) -->
166
+ <!-- The below code snippet is automatically added from ./../apiExamples/counter-error.html -->
167
+
168
+ ```html
169
+ <auro-counter error="There is an error with the counter">
170
+ Adults
171
+ </auro-counter>
172
+ ```
173
+ <!-- AURO-GENERATED-CONTENT:END -->
174
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
175
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
176
+ <auro-counter ondark error="There is an error with the counter">
177
+ Adults
178
+ </auro-counter>
179
+ <!-- AURO-GENERATED-CONTENT:END -->
180
+ </auro-accordion>
181
+
182
+ ### Basic Counter Group
183
+
184
+ Counter groups allow you to manage multiple related counters together. This is useful when you need to collect multiple quantities that are related, such as different passenger types:
185
+
186
+ <div class="exampleWrapper">
187
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
188
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
189
+ <auro-counter-group>
190
+ <auro-counter>
191
+ Short label
192
+ </auro-counter>
193
+ <auro-counter>
194
+ Another short label
195
+ </auro-counter>
196
+ <auro-counter>
197
+ This is an example of the wrapping behavior for a long label
198
+ </auro-counter>
199
+ </auro-counter-group>
200
+ <!-- AURO-GENERATED-CONTENT:END -->
201
+ </div>
202
+ <div class="exampleWrapper--ondark" aria-hidden>
203
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkGroup.html) -->
204
+ <!-- The below content is automatically added from ./../apiExamples/onDarkGroup.html -->
205
+ <auro-counter-group onDark>
206
+ <auro-counter>
207
+ Short label
208
+ </auro-counter>
209
+ <auro-counter>
210
+ Another short label
211
+ </auro-counter>
212
+ <auro-counter>
213
+ This is an example of the wrapping behavior for a long label
214
+ </auro-counter>
215
+ </auro-counter-group>
216
+ <!-- AURO-GENERATED-CONTENT:END -->
217
+ </div>
218
+ <auro-accordion alignRight>
219
+ <span slot="trigger">See code</span>
220
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
221
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
222
+
223
+ ```html
224
+ <auro-counter-group>
225
+ <auro-counter>
226
+ Short label
227
+ </auro-counter>
228
+ <auro-counter>
229
+ Another short label
230
+ </auro-counter>
231
+ <auro-counter>
232
+ This is an example of the wrapping behavior for a long label
233
+ </auro-counter>
234
+ </auro-counter-group>
235
+ ```
236
+ <!-- AURO-GENERATED-CONTENT:END -->
237
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkGroup.html) -->
238
+ <!-- The below content is automatically added from ./../apiExamples/onDarkGroup.html -->
239
+ <auro-counter-group onDark>
240
+ <auro-counter>
241
+ Short label
242
+ </auro-counter>
243
+ <auro-counter>
244
+ Another short label
245
+ </auro-counter>
246
+ <auro-counter>
247
+ This is an example of the wrapping behavior for a long label
248
+ </auro-counter>
249
+ </auro-counter-group>
250
+ <!-- AURO-GENERATED-CONTENT:END -->
251
+ </auro-accordion>
252
+
253
+ ### Dropdown Counter Group
254
+
255
+ The dropdown mode provides a more compact interface, ideal for forms where space is limited. It collapses the counters into a dropdown that expands when clicked.
256
+
257
+ When using a dropdown, an additional layout, `snowflake`, is available for use:
258
+
259
+ <div class="exampleWrapper">
260
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-basic.html) -->
261
+ <!-- The below content is automatically added from ./../apiExamples/dropdown-basic.html -->
262
+ <auro-counter-group isDropdown>
263
+ <span slot="ariaLabel.bib.close">Close Popup</span>
264
+ <div slot="bib.fullscreen.headline">Passengers</div>
265
+ <div slot="label">Passengers</div>
266
+ <auro-counter>
267
+ Adults
268
+ <span slot="description">18 years or older</span>
269
+ </auro-counter>
270
+ <auro-counter>
271
+ Children
272
+ <span slot="description">2-17 years</span>
273
+ </auro-counter>
274
+ </auro-counter-group>
275
+ <!-- AURO-GENERATED-CONTENT:END -->
276
+ </div>
277
+ <div class="exampleWrapper--ondark" aria-hidden>
278
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDropdown.html) -->
279
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDropdown.html -->
280
+ <auro-counter-group onDark isDropdown>
281
+ <div slot="bib.fullscreen.headline">Passengers</div>
282
+ <div slot="label">Passengers</div>
283
+ <auro-counter>
284
+ Adults
285
+ <span slot="description">18 years or older</span>
286
+ </auro-counter>
287
+ <auro-counter>
288
+ Children
289
+ <span slot="description">2-17 years</span>
290
+ </auro-counter>
291
+ </auro-counter-group>
292
+ <!-- AURO-GENERATED-CONTENT:END -->
293
+ </div>
294
+ <div class="exampleWrapper">
295
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-snowflake.html) -->
296
+ <!-- The below content is automatically added from ./../apiExamples/dropdown-snowflake.html -->
297
+ <!-- Example of counter-group properties -->
298
+ <auro-counter-group max="10" min="2" isDropdown layout="snowflake">
299
+ <span slot="ariaLabel.bib.close">Close Popup</span>
300
+ <div slot="bib.fullscreen.headline">Group fullscreen label</div>
301
+ <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
302
+ <div slot="label">Snowflake Dropdown Group</div>
303
+ <div slot="helpText">Total must be between 2-10</div>
304
+ <auro-counter>
305
+ Counter 1
306
+ </auro-counter>
307
+ <auro-counter>
308
+ Counter 2
309
+ </auro-counter>
310
+ </auro-counter-group>
311
+ <!-- AURO-GENERATED-CONTENT:END -->
312
+ </div>
313
+ <div class="exampleWrapper--ondark">
314
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark-dropdown-snowflake.html) -->
315
+ <!-- The below content is automatically added from ./../apiExamples/onDark-dropdown-snowflake.html -->
316
+ <!-- Example of counter-group properties -->
317
+ <auro-counter-group max="10" min="2" isDropdown layout="snowflake" ondark>
318
+ <span slot="ariaLabel.bib.close">Close Popup</span>
319
+ <div slot="bib.fullscreen.headline">Group fullscreen label</div>
320
+ <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
321
+ <div slot="label">Snowflake Dropdown Group</div>
322
+ <div slot="helpText">Total must be between 2-10</div>
323
+ <auro-counter>
324
+ Counter 1
325
+ </auro-counter>
326
+ <auro-counter>
327
+ Counter 2
328
+ </auro-counter>
329
+ </auro-counter-group>
330
+ <!-- AURO-GENERATED-CONTENT:END -->
331
+ </div>
332
+ <auro-accordion alignRight>
333
+ <span slot="trigger">See code</span>
334
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-basic.html) -->
335
+ <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-basic.html -->
336
+ ```html
337
+ <auro-counter-group isDropdown>
338
+ <span slot="ariaLabel.bib.close">Close Popup</span>
339
+ <div slot="bib.fullscreen.headline">Passengers</div>
340
+ <div slot="label">Passengers</div>
341
+ <auro-counter>
342
+ Adults
343
+ <span slot="description">18 years or older</span>
344
+ </auro-counter>
345
+ <auro-counter>
346
+ Children
347
+ <span slot="description">2-17 years</span>
348
+ </auro-counter>
349
+ </auro-counter-group>
350
+ ```
351
+ <!-- AURO-GENERATED-CONTENT:END -->
352
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDropdown.html) -->
353
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDropdown.html -->
354
+ <auro-counter-group onDark isDropdown>
355
+ <div slot="bib.fullscreen.headline">Passengers</div>
356
+ <div slot="label">Passengers</div>
357
+ <auro-counter>
358
+ Adults
359
+ <span slot="description">18 years or older</span>
360
+ </auro-counter>
361
+ <auro-counter>
362
+ Children
363
+ <span slot="description">2-17 years</span>
364
+ </auro-counter>
365
+ </auro-counter-group>
366
+ <!-- AURO-GENERATED-CONTENT:END -->
367
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-snowflake.html) -->
368
+ <!-- The below content is automatically added from ./../apiExamples/dropdown-snowflake.html -->
369
+ <!-- Example of counter-group properties -->
370
+ <auro-counter-group max="10" min="2" isDropdown layout="snowflake">
371
+ <span slot="ariaLabel.bib.close">Close Popup</span>
372
+ <div slot="bib.fullscreen.headline">Group fullscreen label</div>
373
+ <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
374
+ <div slot="label">Snowflake Dropdown Group</div>
375
+ <div slot="helpText">Total must be between 2-10</div>
376
+ <auro-counter>
377
+ Counter 1
378
+ </auro-counter>
379
+ <auro-counter>
380
+ Counter 2
381
+ </auro-counter>
382
+ </auro-counter-group>
383
+ <!-- AURO-GENERATED-CONTENT:END -->
384
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark-dropdown-snowflake.html) -->
385
+ <!-- The below content is automatically added from ./../apiExamples/onDark-dropdown-snowflake.html -->
386
+ <!-- Example of counter-group properties -->
387
+ <auro-counter-group max="10" min="2" isDropdown layout="snowflake" ondark>
388
+ <span slot="ariaLabel.bib.close">Close Popup</span>
389
+ <div slot="bib.fullscreen.headline">Group fullscreen label</div>
390
+ <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
391
+ <div slot="label">Snowflake Dropdown Group</div>
392
+ <div slot="helpText">Total must be between 2-10</div>
393
+ <auro-counter>
394
+ Counter 1
395
+ </auro-counter>
396
+ <auro-counter>
397
+ Counter 2
398
+ </auro-counter>
399
+ </auro-counter-group>
400
+ <!-- AURO-GENERATED-CONTENT:END -->
401
+ </auro-accordion>