@aurodesignsystem-dev/auro-formkit 0.0.0-pr622.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 +56 -0
  251. package/components/select/demo/api.js +35 -0
  252. package/components/select/demo/api.md +1135 -0
  253. package/components/select/demo/api.min.js +7695 -0
  254. package/components/select/demo/index.html +51 -0
  255. package/components/select/demo/index.js +9 -0
  256. package/components/select/demo/index.md +638 -0
  257. package/components/select/demo/index.min.js +7583 -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 +332 -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 +6219 -0
  265. package/components/select/dist/registered.js +6219 -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/counter/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-counter 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/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@0.0.0/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,12 @@
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
+ }
package/components/counter/dist/auro-counter-group.d.ts ADDED
@@ -0,0 +1,235 @@
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 bib.fullscreen.headline - Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required.
11
+ * @slot bib.fullscreen.footer - Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true.
12
+ * @slot label - Dropdown label content. Only used when `isDropdown` is true.
13
+ * @slot valueText - Dropdown value text display. Only used when `isDropdown` is true.
14
+ * @slot helpText - Dropdown help text content. Only used when `isDropdown` is true.
15
+ */
16
+ export class AuroCounterGroup extends LitElement {
17
+ static get styles(): import("lit").CSSResult[];
18
+ static get properties(): {
19
+ /**
20
+ * If declared, bib's position will be automatically calculated where to appear.
21
+ * @default false
22
+ */
23
+ autoPlacement: {
24
+ type: BooleanConstructor;
25
+ reflect: boolean;
26
+ };
27
+ /**
28
+ * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
29
+ * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
30
+ *
31
+ * When expanded, the dropdown will automatically display in fullscreen mode
32
+ * if the screen size is equal to or smaller than the selected breakpoint.
33
+ * @default sm
34
+ */
35
+ fullscreenBreakpoint: {
36
+ type: StringConstructor;
37
+ reflect: boolean;
38
+ };
39
+ /**
40
+ * Indicates if the counter group is displayed as a dropdown.
41
+ */
42
+ isDropdown: {
43
+ type: BooleanConstructor;
44
+ };
45
+ /**
46
+ * The maximum value allowed for the whole group of counters.
47
+ */
48
+ max: {
49
+ type: NumberConstructor;
50
+ reflect: boolean;
51
+ };
52
+ /**
53
+ * The minimum value allowed for the whole group of counters.
54
+ */
55
+ min: {
56
+ type: NumberConstructor;
57
+ reflect: boolean;
58
+ };
59
+ /**
60
+ * If declared, make bib.fullscreen.headline in HeadingDisplay.
61
+ * Otherwise, Heading 600.
62
+ */
63
+ largeFullscreenHeadline: {
64
+ type: BooleanConstructor;
65
+ reflect: boolean;
66
+ };
67
+ /**
68
+ * If declared, the bib will NOT flip to an alternate position
69
+ * when there isn't enough space in the specified `placement`.
70
+ * @default false
71
+ */
72
+ noFlip: {
73
+ type: BooleanConstructor;
74
+ reflect: boolean;
75
+ };
76
+ /**
77
+ * Gap between the trigger element and bib.
78
+ * @default 0
79
+ */
80
+ offset: {
81
+ type: NumberConstructor;
82
+ reflect: boolean;
83
+ };
84
+ /**
85
+ * If declared, counters and dropdown will be rendered with onDark styles.
86
+ */
87
+ onDark: {
88
+ type: BooleanConstructor;
89
+ reflect: boolean;
90
+ };
91
+ /**
92
+ * Position where the bib should appear relative to the trigger.
93
+ * Accepted values:
94
+ * "top" | "right" | "bottom" | "left" |
95
+ * "bottom-start" | "top-start" | "top-end" |
96
+ * "right-start" | "right-end" | "bottom-end" |
97
+ * "left-start" | "left-end"
98
+ * @default bottom-start
99
+ */
100
+ placement: {
101
+ type: StringConstructor;
102
+ reflect: boolean;
103
+ };
104
+ /**
105
+ * The total value of the counters.
106
+ */
107
+ total: {
108
+ type: NumberConstructor;
109
+ };
110
+ /**
111
+ * Reflects the validity state.
112
+ */
113
+ validity: {
114
+ type: StringConstructor;
115
+ reflect: boolean;
116
+ };
117
+ /**
118
+ * The current individual values of the nested counters.
119
+ */
120
+ value: {
121
+ type: ObjectConstructor;
122
+ };
123
+ };
124
+ /**
125
+ * Registers the custom element with the browser.
126
+ * @param {string} [name="auro-counter-group"] - Custom element name to register.
127
+ * @example
128
+ * AuroCounterGroup.register("custom-counter-group") // registers <custom-counter-group/>
129
+ */
130
+ static register(name?: string): void;
131
+ max: any;
132
+ min: any;
133
+ onDark: boolean;
134
+ total: number;
135
+ validity: any;
136
+ value: {};
137
+ isDropdown: boolean;
138
+ fullscreenBreakpoint: string;
139
+ largeFullscreenHeadline: boolean;
140
+ autoPlacement: boolean;
141
+ noFlip: boolean;
142
+ /**
143
+ * @private
144
+ */
145
+ private counters;
146
+ /**
147
+ * @private
148
+ */
149
+ private dropdown;
150
+ /**
151
+ * @private
152
+ */
153
+ private bibtemplate;
154
+ /**
155
+ * @private
156
+ */
157
+ private validation;
158
+ /**
159
+ * Dynamically generated dropdown tag.
160
+ * @private
161
+ * @type {string}
162
+ */
163
+ private dropdownTag;
164
+ /**
165
+ * Dynamically generated bibtempalate tag.
166
+ * @private
167
+ * @type {string}
168
+ */
169
+ private bibtemplateTag;
170
+ /**
171
+ * Traps keyboard tab interactions within dropdown when open.
172
+ * @private
173
+ * @param {KeyboardEvent} event - The keyboard event.
174
+ * @param {NodeList} counters - The list of counter elements.
175
+ */
176
+ private trapKeyboard;
177
+ /**
178
+ * Dynamically disables increment/decrement buttons on a counter based on group value.
179
+ * This method checks the total aggregated value against the group's min and max properties.
180
+ * 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.
181
+ *
182
+ * @param {HTMLElement} counter - The counter element to potentially disable.
183
+ * @private
184
+ */
185
+ private manageDisabled;
186
+ /**
187
+ * Attaches input event listeners to all auro-counter elements within the component.
188
+ * This method selects all `auro-counter` and `[auro-counter]` elements and adds an `input` event listener to each.
189
+ * The listener calls `this.updateValue()` whenever the value of a counter changes.
190
+ * @private
191
+ */
192
+ private configureCounters;
193
+ /**
194
+ * Configures the dropdown counters by selecting all `auro-counter` elements,
195
+ * appending them to the `auro-counter-wrapper` element within the shadow DOM,
196
+ * and setting up keyboard navigation and input event listeners.
197
+ * @private
198
+ */
199
+ private configureDropdownCounters;
200
+ keydownHandler: (keydownEvent: any) => void;
201
+ /**
202
+ * This sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
203
+ * @private
204
+ */
205
+ private configureBibtemplate;
206
+ /**
207
+ * Watch for slot changes and recalculate the menuoptions.
208
+ * @private
209
+ * @param {Event} event - `slotchange` event.
210
+ * @returns {void}
211
+ */
212
+ private handleSlotChange;
213
+ /**
214
+ * Safely converts a value to a number, returning 0 if invalid.
215
+ * @private
216
+ * @param {*} value - The value to convert.
217
+ * @returns {number} The converted number or 0 if invalid.
218
+ */
219
+ private safeNumberConversion;
220
+ /**
221
+ * Updates the aggregate value based on the values of contained auro-counter components.
222
+ * This method queries for all `auro-counter` elements, sums their values, and updates the component's `value` property.
223
+ * Additionally, it iterates through each counter and calls `manageDisabled()` on it.
224
+ * @private
225
+ */
226
+ private updateValue;
227
+ /**
228
+ * Validates value.
229
+ * @param {boolean} [force=false] - Whether to force validation.
230
+ */
231
+ validate(force?: boolean): void;
232
+ updated(changedProperties: any): void;
233
+ render(): import("lit-html").TemplateResult;
234
+ }
235
+ 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";
package/components/counter/dist/auro-counter.d.ts ADDED
@@ -0,0 +1,97 @@
1
+ /**
2
+ * Auro Counter is a customizable counter component for user interface interactions.
3
+ *
4
+ * This web component provides a flexible counter interface with increment and decrement buttons,
5
+ * supporting optional sub-labels and disabled states.
6
+ *
7
+ * @element auro-counter
8
+ * @extends LitElement
9
+ * @slot default - Main label content for the counter.
10
+ * @slot description - Descriptive content for the counter.
11
+ */
12
+ export class AuroCounter extends LitElement {
13
+ /**
14
+ * Defines reactive properties for the component.
15
+ * @returns {Object} Property configuration.
16
+ */
17
+ static get properties(): any;
18
+ /**
19
+ * Registers the custom element with the browser.
20
+ * @param {string} [name="auro-counter"] - Custom element name to register.
21
+ * @example
22
+ * AuroCounter.register("custom-counter") // registers <custom-counter/>
23
+ */
24
+ static register(name?: string): void;
25
+ static get styles(): import("lit").CSSResult[];
26
+ defaultSlot: any;
27
+ disabled: boolean;
28
+ disableMax: boolean;
29
+ disableMin: boolean;
30
+ max: number;
31
+ min: number;
32
+ onDark: boolean;
33
+ validity: any;
34
+ value: number;
35
+ /**
36
+ * @private
37
+ */
38
+ private validation;
39
+ /**
40
+ * Dynamically generated icon tag for counter buttons.
41
+ * @private
42
+ * @type {string}
43
+ */
44
+ private iconTag;
45
+ /**
46
+ * Increments the counter value by 1. If a value is provided, it increments by that amount.
47
+ * @method increment
48
+ * @param {number} [value] - The amount to increment by.
49
+ * @returns {void}
50
+ */
51
+ increment(value?: number): void;
52
+ /**
53
+ * Decrements the value of the counter by 1. If a value is provided, it decrements by that amount.
54
+ * @method decrement
55
+ * @param {number} [value] - The amount to decrement by.
56
+ * @returns {void}
57
+ */
58
+ decrement(value?: number): void;
59
+ /**
60
+ * Initializes the value of the counter.
61
+ * If the current value is undefined, it sets the value to the minimum value.
62
+ * @private
63
+ */
64
+ private initValue;
65
+ /**
66
+ * Determines if the increment button should be disabled based on the current value and extrema.
67
+ *
68
+ * @param {number} extrema - The extreme value (either min or max) to compare against the current value.
69
+ * @returns {boolean} - Returns true if the increment button should be disabled, otherwise false.
70
+ * @private
71
+ */
72
+ private isIncrementDisabled;
73
+ /**
74
+ * Validates value.
75
+ * @param {boolean} [force=false] - Whether to force validation.
76
+ */
77
+ validate(force?: boolean): void;
78
+ /**
79
+ * Handles the keydown event for the counter component.
80
+ * @param {KeyboardEvent} event - The keyboard event object.
81
+ * @returns {void}
82
+ * @private
83
+ */
84
+ private handleKeyDown;
85
+ firstUpdated(): void;
86
+ /**
87
+ * Handles the change event for the default slot.
88
+ * Updates the defaultSlot property with the trimmed text content of the first assigned node.
89
+ *
90
+ * @param {Event} event - The event object representing the slot change event.
91
+ * @private
92
+ */
93
+ private onDefaultSlotChange;
94
+ updated(changedProperties: any): void;
95
+ render(): import("lit-html").TemplateResult;
96
+ }
97
+ import { LitElement } from "lit";
package/components/counter/dist/bibtemplateVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "1.0.0";
2
+ export default _default;
package/components/counter/dist/dropdownVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "3.0.0";
2
+ export default _default;
package/components/counter/dist/iconVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "8.0.2";
2
+ export default _default;
package/components/counter/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { AuroCounter } from './auro-counter.js';
2
+ import { AuroCounterGroup } from './auro-counter-group.js';
3
+ export { AuroCounter, AuroCounterGroup };