@aurodesignsystem/auro-formkit 2.0.0-beta.2 → 2.0.0-beta.4

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 (257) hide show
  1. package/.turbo/cache/013a48308b893dac-meta.json +1 -1
  2. package/.turbo/cache/02244170c798a2bd-meta.json +1 -0
  3. package/.turbo/cache/02244170c798a2bd.tar.zst +0 -0
  4. package/.turbo/cache/051ff97a20add0e2-meta.json +1 -0
  5. package/.turbo/cache/051ff97a20add0e2.tar.zst +0 -0
  6. package/.turbo/cache/07ca42419b9f050c-meta.json +1 -1
  7. package/.turbo/cache/0cea4c1f34f3683b-meta.json +1 -1
  8. package/.turbo/cache/0ea853339c064fa1-meta.json +1 -0
  9. package/.turbo/cache/0ea853339c064fa1.tar.zst +0 -0
  10. package/.turbo/cache/16658beec9f4a809-meta.json +1 -0
  11. package/.turbo/cache/16658beec9f4a809.tar.zst +0 -0
  12. package/.turbo/cache/17259cf94d8f8925-meta.json +1 -1
  13. package/.turbo/cache/1b9818717e4bdf9f-meta.json +1 -0
  14. package/.turbo/cache/1b9818717e4bdf9f.tar.zst +0 -0
  15. package/.turbo/cache/1c0f580d37370ba2-meta.json +1 -0
  16. package/.turbo/cache/1c0f580d37370ba2.tar.zst +0 -0
  17. package/.turbo/cache/1c99a949ec63ab35-meta.json +1 -1
  18. package/.turbo/cache/1df4710eef8ed00d-meta.json +1 -0
  19. package/.turbo/cache/1df4710eef8ed00d.tar.zst +0 -0
  20. package/.turbo/cache/204b66d1b253e9cc-meta.json +1 -0
  21. package/.turbo/cache/204b66d1b253e9cc.tar.zst +0 -0
  22. package/.turbo/cache/257a7a26ea72dbc5-meta.json +1 -1
  23. package/.turbo/cache/2a5d0939d6fc1052-meta.json +1 -0
  24. package/.turbo/cache/2a5d0939d6fc1052.tar.zst +0 -0
  25. package/.turbo/cache/2e3b829fcf75c836-meta.json +1 -0
  26. package/.turbo/cache/2e3b829fcf75c836.tar.zst +0 -0
  27. package/.turbo/cache/3bf45120d0cc9bd8-meta.json +1 -1
  28. package/.turbo/cache/3d380d0d40404cac-meta.json +1 -0
  29. package/.turbo/cache/3d380d0d40404cac.tar.zst +0 -0
  30. package/.turbo/cache/3e12285c614db539-meta.json +1 -0
  31. package/.turbo/cache/3e12285c614db539.tar.zst +0 -0
  32. package/.turbo/cache/45035bf5c4147ccd-meta.json +1 -1
  33. package/.turbo/cache/5bf2d3f7ba5891e0-meta.json +1 -0
  34. package/.turbo/cache/5bf2d3f7ba5891e0.tar.zst +0 -0
  35. package/.turbo/cache/5f304c0f37ef25f3-meta.json +1 -1
  36. package/.turbo/cache/64de7a53e02db647-meta.json +1 -1
  37. package/.turbo/cache/691a74627ec57993-meta.json +1 -1
  38. package/.turbo/cache/69aae513b7ec6c7d-meta.json +1 -1
  39. package/.turbo/cache/6dd67d179191bda8-meta.json +1 -0
  40. package/.turbo/cache/6dd67d179191bda8.tar.zst +0 -0
  41. package/.turbo/cache/6dd7058e6703cb35-meta.json +1 -1
  42. package/.turbo/cache/73e9073a5274616d-meta.json +1 -1
  43. package/.turbo/cache/773edc0f83c8c5a5-meta.json +1 -1
  44. package/.turbo/cache/786a822763403879-meta.json +1 -1
  45. package/.turbo/cache/7e1043cffa69f327-meta.json +1 -0
  46. package/.turbo/cache/7e1043cffa69f327.tar.zst +0 -0
  47. package/.turbo/cache/7ffd501e81790676-meta.json +1 -0
  48. package/.turbo/cache/7ffd501e81790676.tar.zst +0 -0
  49. package/.turbo/cache/80a13352066a9801-meta.json +1 -0
  50. package/.turbo/cache/80a13352066a9801.tar.zst +0 -0
  51. package/.turbo/cache/80b5d974184a01df-meta.json +1 -1
  52. package/.turbo/cache/8954c6073396fadd-meta.json +1 -1
  53. package/.turbo/cache/8e79bd5c3a16a72e-meta.json +1 -0
  54. package/.turbo/cache/8e9ebc3df0e18de0-meta.json +1 -0
  55. package/.turbo/cache/8e9ebc3df0e18de0.tar.zst +0 -0
  56. package/.turbo/cache/92daa6d7c389d548-meta.json +1 -1
  57. package/.turbo/cache/973d0eea26083f4b-meta.json +1 -0
  58. package/.turbo/cache/973d0eea26083f4b.tar.zst +0 -0
  59. package/.turbo/cache/9c6ad42729c7b2d8-meta.json +1 -0
  60. package/.turbo/cache/9c6ad42729c7b2d8.tar.zst +0 -0
  61. package/.turbo/cache/a77bc920ea508bb8-meta.json +1 -1
  62. package/.turbo/cache/a77bc920ea508bb8.tar.zst +0 -0
  63. package/.turbo/cache/a9a9d012c83882d8-meta.json +1 -0
  64. package/.turbo/cache/a9a9d012c83882d8.tar.zst +0 -0
  65. package/.turbo/cache/b54fc4f664a7a5a0-meta.json +1 -1
  66. package/.turbo/cache/ba4418918621fbcd-meta.json +1 -1
  67. package/.turbo/cache/be7c23c37b8ec74b-meta.json +1 -1
  68. package/.turbo/cache/be7c23c37b8ec74b.tar.zst +0 -0
  69. package/.turbo/cache/bffc7582905c2a5e-meta.json +1 -0
  70. package/.turbo/cache/bffc7582905c2a5e.tar.zst +0 -0
  71. package/.turbo/cache/caa0b4ac8d2a04dd-meta.json +1 -1
  72. package/.turbo/cache/caa0b4ac8d2a04dd.tar.zst +0 -0
  73. package/.turbo/cache/cc81de9c0b452a7c-meta.json +1 -1
  74. package/.turbo/cache/d572ebb3c833e8f4-meta.json +1 -0
  75. package/.turbo/cache/d572ebb3c833e8f4.tar.zst +0 -0
  76. package/.turbo/cache/d61543843c932504-meta.json +1 -0
  77. package/.turbo/cache/d61543843c932504.tar.zst +0 -0
  78. package/.turbo/cache/dad1301ac69bcb85-meta.json +1 -1
  79. package/.turbo/cache/db361cb6578dca84-meta.json +1 -0
  80. package/.turbo/cache/db361cb6578dca84.tar.zst +0 -0
  81. package/.turbo/cache/dea5945f55c6aba5-meta.json +1 -0
  82. package/.turbo/cache/dea5945f55c6aba5.tar.zst +0 -0
  83. package/.turbo/cache/e992dab20aeefbaf-meta.json +1 -1
  84. package/.turbo/cache/e992dab20aeefbaf.tar.zst +0 -0
  85. package/.turbo/cache/f3ff9040a2196834-meta.json +1 -0
  86. package/.turbo/cache/f3ff9040a2196834.tar.zst +0 -0
  87. package/.turbo/cache/f817d89688cefca8-meta.json +1 -0
  88. package/.turbo/cache/f817d89688cefca8.tar.zst +0 -0
  89. package/.turbo/cache/fa132b5b5f0e75f8-meta.json +1 -1
  90. package/.turbo/cache/fc57c17867dcac3d-meta.json +1 -0
  91. package/.turbo/cache/fc57c17867dcac3d.tar.zst +0 -0
  92. package/CHANGELOG.md +44 -0
  93. package/components/checkbox/.turbo/turbo-build.log +3 -3
  94. package/components/checkbox/.turbo/turbo-bundler.log +3 -3
  95. package/components/checkbox/demo/api.md +4 -2
  96. package/components/checkbox/demo/api.min.js +31 -36
  97. package/components/checkbox/demo/index.min.js +31 -36
  98. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  99. package/components/checkbox/dist/index.js +31 -36
  100. package/components/checkbox/src/auro-checkbox-group.js +2 -2
  101. package/components/combobox/.turbo/turbo-build.log +3 -3
  102. package/components/combobox/demo/api.md +17 -15
  103. package/components/combobox/demo/api.min.js +500 -218
  104. package/components/combobox/demo/index.min.js +500 -218
  105. package/components/combobox/dist/auro-combobox.d.ts +11 -4
  106. package/components/combobox/dist/auro-combobox.d.ts.map +1 -1
  107. package/components/combobox/dist/index.js +499 -217
  108. package/components/combobox/src/auro-combobox.js +22 -20
  109. package/components/counter/.turbo/turbo-build.log +3 -3
  110. package/components/counter/.turbo/turbo-bundler.log +3 -3
  111. package/components/datepicker/.turbo/turbo-build.log +9 -8
  112. package/components/datepicker/demo/api.md +107 -87
  113. package/components/datepicker/demo/api.min.js +492 -232
  114. package/components/datepicker/demo/index.min.js +492 -232
  115. package/components/datepicker/dist/auro-datepicker.d.ts +6 -13
  116. package/components/datepicker/dist/auro-datepicker.d.ts.map +1 -1
  117. package/components/datepicker/dist/index.js +492 -232
  118. package/components/datepicker/src/auro-datepicker.js +15 -35
  119. package/components/dropdown/.turbo/turbo-build.log +3 -3
  120. package/components/dropdown/.turbo/turbo-bundler.log +2 -2
  121. package/components/dropdown/demo/api.md +4 -4
  122. package/components/dropdown/demo/api.min.js +166 -42
  123. package/components/dropdown/demo/index.min.js +166 -42
  124. package/components/dropdown/dist/auro-dropdown.d.ts +93 -34
  125. package/components/dropdown/dist/auro-dropdown.d.ts.map +1 -1
  126. package/components/dropdown/dist/auro-dropdownBib.d.ts +9 -3
  127. package/components/dropdown/dist/auro-dropdownBib.d.ts.map +1 -1
  128. package/components/dropdown/dist/index.js +166 -42
  129. package/components/dropdown/src/auro-dropdown.js +154 -39
  130. package/components/dropdown/src/auro-dropdownBib.js +12 -3
  131. package/components/dropdown/src/styles/style-css.js +1 -1
  132. package/components/dropdown/src/styles/style.css +4 -0
  133. package/components/dropdown/src/styles/style.scss +5 -0
  134. package/components/form/.turbo/turbo-build.log +3 -3
  135. package/components/form/.turbo/turbo-bundler.log +3 -3
  136. package/components/input/.turbo/turbo-build$colon$sass.log +51 -1
  137. package/components/input/.turbo/turbo-build.log +56 -6
  138. package/components/input/.turbo/turbo-bundler.log +3 -3
  139. package/components/input/.turbo/turbo-sass$colon$render.log +6 -0
  140. package/components/input/demo/api.md +83 -81
  141. package/components/input/demo/api.min.js +282 -121
  142. package/components/input/demo/index.md +6 -6
  143. package/components/input/demo/index.min.js +282 -121
  144. package/components/input/dist/auro-input.d.ts.map +1 -1
  145. package/components/input/dist/base-input.d.ts +155 -84
  146. package/components/input/dist/base-input.d.ts.map +1 -1
  147. package/components/input/dist/index.js +282 -121
  148. package/components/input/dist/styles/mixins-css.d.ts +3 -0
  149. package/components/input/dist/styles/mixins-css.d.ts.map +1 -0
  150. package/components/input/src/auro-input.js +0 -1
  151. package/components/input/src/base-input.js +252 -85
  152. package/components/input/src/styles/borders.scss +3 -19
  153. package/components/input/src/styles/color.css +1 -2
  154. package/components/input/src/styles/color.scss +3 -10
  155. package/components/input/src/styles/input-css.js +1 -1
  156. package/components/input/src/styles/input.css +1 -1
  157. package/components/input/src/styles/input.scss +4 -1
  158. package/components/input/src/styles/label-css.js +1 -1
  159. package/components/input/src/styles/label.css +1 -1
  160. package/components/input/src/styles/label.scss +4 -7
  161. package/components/input/src/styles/mixins-css.js +2 -0
  162. package/components/input/src/styles/mixins.css +1 -0
  163. package/components/input/src/styles/mixins.scss +45 -0
  164. package/components/input/src/styles/notificationIcons-css.js +1 -1
  165. package/components/input/src/styles/notificationIcons.css +13 -12
  166. package/components/input/src/styles/notificationIcons.scss +17 -25
  167. package/components/input/src/styles/style-css.js +1 -1
  168. package/components/input/src/styles/style.css +15 -17
  169. package/components/input/src/styles/style.scss +0 -4
  170. package/components/menu/.turbo/turbo-build.log +3 -3
  171. package/components/menu/.turbo/turbo-bundler.log +3 -3
  172. package/components/menu/demo/api.min.js +1 -1
  173. package/components/menu/demo/index.min.js +1 -1
  174. package/components/menu/dist/auro-menu.d.ts +1 -1
  175. package/components/menu/dist/index.js +1 -1
  176. package/components/menu/src/auro-menu.js +1 -1
  177. package/components/radio/.turbo/turbo-build.log +3 -3
  178. package/components/radio/.turbo/turbo-bundler.log +3 -3
  179. package/components/radio/demo/api.md +3 -1
  180. package/components/radio/demo/api.min.js +30 -35
  181. package/components/radio/demo/index.min.js +30 -35
  182. package/components/radio/dist/index.js +30 -35
  183. package/components/radio/src/auro-radio-group.js +1 -1
  184. package/components/select/.turbo/turbo-build.log +7 -9
  185. package/components/select/demo/api.md +45 -110
  186. package/components/select/demo/api.min.js +320 -224
  187. package/components/select/demo/index.md +100 -43
  188. package/components/select/demo/index.min.js +320 -220
  189. package/components/select/dist/auro-select.d.ts +64 -51
  190. package/components/select/dist/auro-select.d.ts.map +1 -1
  191. package/components/select/dist/index.js +314 -201
  192. package/components/select/src/auro-select.js +100 -118
  193. package/components/select/src/styles/style-css.js +1 -1
  194. package/components/select/src/styles/style.css +7 -0
  195. package/components/select/src/styles/style.scss +11 -1
  196. package/package.json +1 -1
  197. package/packages/form-validation/src/validation.js +29 -34
  198. package/.turbo/cache/0663fcbb1d711029-meta.json +0 -1
  199. package/.turbo/cache/0663fcbb1d711029.tar.zst +0 -0
  200. package/.turbo/cache/0a2b0a4df8a0443f-meta.json +0 -1
  201. package/.turbo/cache/120c8e207aa1ba35-meta.json +0 -1
  202. package/.turbo/cache/120c8e207aa1ba35.tar.zst +0 -0
  203. package/.turbo/cache/17dd4bdef6550a07-meta.json +0 -1
  204. package/.turbo/cache/17dd4bdef6550a07.tar.zst +0 -0
  205. package/.turbo/cache/1de15d89eed2d760-meta.json +0 -1
  206. package/.turbo/cache/1de15d89eed2d760.tar.zst +0 -0
  207. package/.turbo/cache/2990aaa7ebc5b967-meta.json +0 -1
  208. package/.turbo/cache/2990aaa7ebc5b967.tar.zst +0 -0
  209. package/.turbo/cache/32c0b9995fb5f8dd-meta.json +0 -1
  210. package/.turbo/cache/32c0b9995fb5f8dd.tar.zst +0 -0
  211. package/.turbo/cache/47ba2b5ebdb579e9-meta.json +0 -1
  212. package/.turbo/cache/47ba2b5ebdb579e9.tar.zst +0 -0
  213. package/.turbo/cache/4f92cea2d8c63de2-meta.json +0 -1
  214. package/.turbo/cache/4f92cea2d8c63de2.tar.zst +0 -0
  215. package/.turbo/cache/56cb35d4c7473a23-meta.json +0 -1
  216. package/.turbo/cache/56cb35d4c7473a23.tar.zst +0 -0
  217. package/.turbo/cache/5c16ce3cff5c9dff-meta.json +0 -1
  218. package/.turbo/cache/5c16ce3cff5c9dff.tar.zst +0 -0
  219. package/.turbo/cache/626afdc67e0cb540-meta.json +0 -1
  220. package/.turbo/cache/626afdc67e0cb540.tar.zst +0 -0
  221. package/.turbo/cache/6ef81cf9a66f982a-meta.json +0 -1
  222. package/.turbo/cache/6ef81cf9a66f982a.tar.zst +0 -0
  223. package/.turbo/cache/784c03fe9fd5ac05-meta.json +0 -1
  224. package/.turbo/cache/784c03fe9fd5ac05.tar.zst +0 -0
  225. package/.turbo/cache/87219c41a4ace9cd-meta.json +0 -1
  226. package/.turbo/cache/87219c41a4ace9cd.tar.zst +0 -0
  227. package/.turbo/cache/8b735250fa5a62bf-meta.json +0 -1
  228. package/.turbo/cache/8b735250fa5a62bf.tar.zst +0 -0
  229. package/.turbo/cache/9154e8fe6ab767ea-meta.json +0 -1
  230. package/.turbo/cache/9154e8fe6ab767ea.tar.zst +0 -0
  231. package/.turbo/cache/993dff2edb7b6766-meta.json +0 -1
  232. package/.turbo/cache/993dff2edb7b6766.tar.zst +0 -0
  233. package/.turbo/cache/9a097d6576dadd64-meta.json +0 -1
  234. package/.turbo/cache/9a097d6576dadd64.tar.zst +0 -0
  235. package/.turbo/cache/a49cc58242467fdc-meta.json +0 -1
  236. package/.turbo/cache/a49cc58242467fdc.tar.zst +0 -0
  237. package/.turbo/cache/a6a56bb802e1c20f-meta.json +0 -1
  238. package/.turbo/cache/a6a56bb802e1c20f.tar.zst +0 -0
  239. package/.turbo/cache/af061e7a077a9ba5-meta.json +0 -1
  240. package/.turbo/cache/af061e7a077a9ba5.tar.zst +0 -0
  241. package/.turbo/cache/b50f1b283b4b81cd-meta.json +0 -1
  242. package/.turbo/cache/b50f1b283b4b81cd.tar.zst +0 -0
  243. package/.turbo/cache/bf85bc040b7e64db-meta.json +0 -1
  244. package/.turbo/cache/bf85bc040b7e64db.tar.zst +0 -0
  245. package/.turbo/cache/cd5f6987783fb56d-meta.json +0 -1
  246. package/.turbo/cache/cd5f6987783fb56d.tar.zst +0 -0
  247. package/.turbo/cache/ce67b6522dd09e64-meta.json +0 -1
  248. package/.turbo/cache/ce67b6522dd09e64.tar.zst +0 -0
  249. package/.turbo/cache/d716cb7a08152beb-meta.json +0 -1
  250. package/.turbo/cache/d716cb7a08152beb.tar.zst +0 -0
  251. package/.turbo/cache/d7a47b77deb3d9a4-meta.json +0 -1
  252. package/.turbo/cache/d7a47b77deb3d9a4.tar.zst +0 -0
  253. package/.turbo/cache/fbbe2704bf9cb90b-meta.json +0 -1
  254. package/.turbo/cache/fbbe2704bf9cb90b.tar.zst +0 -0
  255. package/.turbo/cache/ff58f630c9d69af4-meta.json +0 -1
  256. package/.turbo/cache/ff58f630c9d69af4.tar.zst +0 -0
  257. /package/.turbo/cache/{0a2b0a4df8a0443f.tar.zst → 8e79bd5c3a16a72e.tar.zst} +0 -0
@@ -7,6 +7,7 @@
7
7
 
8
8
  // If using litElement base class
9
9
  import { LitElement } from "lit";
10
+ import { classMap } from 'lit/directives/class-map.js';
10
11
  import { html } from 'lit/static-html.js';
11
12
 
12
13
  import AuroFormValidation from '@auro-formkit/form-validation';
@@ -25,22 +26,10 @@ import tokensCss from "./styles/tokens-css.js";
25
26
  /**
26
27
  * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
27
28
  *
28
- * @attr {String} validity - Specifies the `validityState` this element is in.
29
- * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
30
- * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
31
- * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
32
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
33
- * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
34
- * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
35
- * @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
36
- * @prop {String} placeholder - Define placeholder text to display before a value is manually selected.
37
- * @prop {String} value - Value selected for the component.
38
- * @prop {Boolean} disabled - When attribute is present element shows disabled state.
39
- * @prop {Boolean} noCheckmark - When true, checkmark on selected option will no longer be present.
40
- * @attr {Object} optionSelected - Specifies the current selected menuOption.
41
29
  * @slot - Default slot for the menu content.
42
30
  * @slot label - Defines the content of the label.
43
31
  * @slot helpText - Defines the content of the helpText.
32
+ * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
44
33
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
45
34
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
46
35
  * @csspart helpText - Apply CSS to the help text.
@@ -51,7 +40,6 @@ export class AuroSelect extends LitElement {
51
40
  constructor() {
52
41
  super();
53
42
 
54
- this.placeholder = 'Please select option';
55
43
  this.optionSelected = undefined;
56
44
  this.validity = undefined;
57
45
 
@@ -106,68 +94,118 @@ export class AuroSelect extends LitElement {
106
94
  // to understand how to use reflected attributes with your property settings.
107
95
  static get properties() {
108
96
  return {
109
- // ...super.properties,
110
- optionSelected: {
111
- type: Object
97
+
98
+ /**
99
+ * When attribute is present, element shows disabled state.
100
+ */
101
+ disabled: {
102
+ type: Boolean,
103
+ reflect: true
112
104
  },
113
- value: {
114
- type: String
105
+
106
+ /**
107
+ * If set, makes dropdown width match the size of the content, rather than the width of the trigger.
108
+ */
109
+ flexMenuWidth: {
110
+ type: Boolean,
111
+ reflect: true
112
+ },
113
+
114
+ /**
115
+ * When true, checkmark on selected option will no longer be present.
116
+ */
117
+ noCheckmark: {
118
+ type: Boolean,
119
+ reflect: true
115
120
  },
121
+
122
+ /**
123
+ * If set, disables auto-validation on blur.
124
+ */
116
125
  noValidate: {
117
126
  type: Boolean,
118
127
  reflect: true
119
128
  },
129
+
130
+ /**
131
+ * @private
132
+ */
133
+ optionActive: {
134
+ type: Object
135
+ },
136
+
137
+ /**
138
+ * Specifies the current selected menuOption.
139
+ */
140
+ optionSelected: {
141
+ type: Object
142
+ },
143
+
144
+ /**
145
+ * @private
146
+ */
147
+ options: {
148
+ type: Array
149
+ },
150
+
151
+ /**
152
+ * Populates the `required` attribute on the element. Used for client-side validation.
153
+ */
120
154
  required: {
121
155
  type: Boolean,
122
156
  reflect: true
123
157
  },
158
+
159
+ /**
160
+ * When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
161
+ */
124
162
  error: {
125
163
  type: String,
126
164
  reflect: true
127
165
  },
166
+
167
+ /**
168
+ * Sets a custom help text message to display for all validityStates.
169
+ */
128
170
  setCustomValidity: {
129
171
  type: String
130
172
  },
173
+
174
+ /**
175
+ * Custom help text message to display when validity = `customError`.
176
+ */
131
177
  setCustomValidityCustomError: {
132
178
  type: String
133
179
  },
180
+
181
+ /**
182
+ * Custom help text message to display when validity = `valueMissing`.
183
+ */
134
184
  setCustomValidityValueMissing: {
135
185
  type: String
136
186
  },
187
+
188
+ /**
189
+ * Specifies the `validityState` this element is in.
190
+ */
137
191
  validity: {
138
192
  type: String,
139
193
  reflect: true
140
194
  },
141
- disabled: {
142
- type: Boolean,
143
- reflect: true
144
- },
145
- noCheckmark: {
146
- type: Boolean,
147
- reflect: true
148
- },
149
- flexMenuWidth: {
150
- type: Boolean,
151
- reflect: true
152
- },
153
- placeholder: { type: String },
154
-
155
- /**
156
- * @private
157
- */
158
- options: { type: Array },
159
195
 
160
196
  /**
161
- * @private
197
+ * Value selected for the component.
162
198
  */
163
- optionActive: { type: Object },
199
+ value: {
200
+ type: String
201
+ }
164
202
  };
165
203
  }
166
204
 
167
205
  static get styles() {
168
206
  return [
169
- styleCss,
170
207
  colorCss,
208
+ styleCss,
171
209
  tokensCss
172
210
  ];
173
211
  }
@@ -202,36 +240,30 @@ export class AuroSelect extends LitElement {
202
240
  }
203
241
 
204
242
  /**
205
- * Updates the displayed value in an Auro dropdown component based on the provided option.
206
- * @param {string|HTMLElement} option - The option to display. If a string, a new span element with the value string is created. If an HTMLElement, the selected option is cloned and non-styling attributes are removed.
243
+ * Updates the displayed value in an Auro dropdown component based on optionSelected
207
244
  * @private
208
245
  * @returns {void}
209
246
  */
210
- updateDisplayedValue(option) {
247
+ updateDisplayedValue() {
211
248
  const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
212
249
 
213
250
  // remove all existing rendered value(s)
214
- triggerContentEl.querySelectorAll('auro-menuoption, [valuestr], [auro-menuoption]').forEach((elm) => {
251
+ triggerContentEl.querySelectorAll('auro-menuoption, [auro-menuoption]').forEach((elm) => {
215
252
  elm.remove();
216
253
  });
217
254
 
218
- if (typeof option === 'string' && option !== this.placeholder) {
219
- // create a new span element with the value string
220
- const valueElem = document.createElement('span');
221
- valueElem.setAttribute('valuestr', true);
222
- valueElem.textContent = option;
223
-
224
- // append the new element into the trigger content
225
- triggerContentEl.appendChild(valueElem);
226
- } else if (typeof option === 'object') {
255
+ if (this.optionSelected) {
227
256
  // clone the selected option and remove attributes that style it
228
- const clone = option.cloneNode(true);
257
+ const clone = this.optionSelected.cloneNode(true);
229
258
  clone.removeAttribute('selected');
230
259
  clone.removeAttribute('class');
231
260
 
232
261
  // insert the non-styled clone into the trigger
233
262
  triggerContentEl.appendChild(clone);
234
263
  }
264
+
265
+ // notify dropdown as trigger content is changed
266
+ this.dropdown.requestUpdate();
235
267
  }
236
268
 
237
269
  /**
@@ -241,7 +273,7 @@ export class AuroSelect extends LitElement {
241
273
  */
242
274
  configureMenu() {
243
275
  this.menu = this.querySelector('auro-menu, [auro-menu]');
244
- this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
276
+
245
277
  // racing condition on custom-select with custom-menu
246
278
  if (!this.menu) {
247
279
  setTimeout(() => {
@@ -250,6 +282,7 @@ export class AuroSelect extends LitElement {
250
282
  return;
251
283
  }
252
284
 
285
+ this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
253
286
  this.menu.setAttribute('aria-hidden', 'true');
254
287
 
255
288
  this.generateOptionsArray();
@@ -262,8 +295,6 @@ export class AuroSelect extends LitElement {
262
295
  this.optionSelected = this.menu.optionSelected;
263
296
  this.value = this.optionSelected.value;
264
297
 
265
- this.updateDisplayedValue(this.optionSelected);
266
-
267
298
  if (this.dropdown.isPopoverVisible) {
268
299
  this.dropdown.hide();
269
300
  }
@@ -277,25 +308,11 @@ export class AuroSelect extends LitElement {
277
308
  * with `auro-select.value`.
278
309
  */
279
310
  this.menu.addEventListener('auroMenu-selectValueFailure', () => {
280
- this.menu.optionSelected = undefined;
281
- this.optionSelected = this.menu.optionSelected;
282
-
283
- this.validity = 'badInput';
284
-
285
- // Capitalizes the first letter of each word in this.value string
286
- const valueStr = this.value.replace(/(^\w{1})|(\s+\w{1})/gu, (letter) => letter.toUpperCase());
287
-
288
- // Pass the new string to the trigger content
289
- this.updateDisplayedValue(valueStr);
311
+ this.reset();
290
312
  });
291
313
 
292
314
  this.menu.addEventListener('auroMenu-selectValueReset', () => {
293
- // set the trigger content back to the placeholder
294
- this.updateDisplayedValue(this.placeholder);
295
-
296
- this.optionSelected = undefined;
297
- this.value = undefined;
298
-
315
+ this.optionSelected = this.menu.optionSelected;
299
316
  this.validation.validate(this);
300
317
  });
301
318
  }
@@ -347,8 +364,6 @@ export class AuroSelect extends LitElement {
347
364
  this.addEventListener('blur', () => {
348
365
  this.validation.validate(this);
349
366
  });
350
-
351
- this.labelForSr();
352
367
  }
353
368
 
354
369
  /**
@@ -467,6 +482,10 @@ export class AuroSelect extends LitElement {
467
482
  }));
468
483
  }
469
484
 
485
+ if (changedProperties.has('optionSelected')) {
486
+ this.updateDisplayedValue();
487
+ }
488
+
470
489
  if (changedProperties.has('error')) {
471
490
  this.validation.validate(this, true);
472
491
  }
@@ -480,52 +499,15 @@ export class AuroSelect extends LitElement {
480
499
  this.validation.reset(this);
481
500
  }
482
501
 
483
- /**
484
- * Handles reading of auro-select by screen readers.
485
- * @private
486
- * @returns {void}
487
- */
488
- labelForSr() {
489
- const placeholderLabel = document.createElement("div");
490
- const textId = "label";
491
-
492
- placeholderLabel.setAttribute("id", textId);
493
- placeholderLabel.setAttribute("aria-live", "polite");
494
-
495
- const styles = {
496
- position: 'absolute',
497
- overflow: 'hidden',
498
- clipPath: 'inset(1px, 1px, 1px, 1px)',
499
- width: '1px',
500
- height: '1px',
501
- padding: '0',
502
- border: '0'
503
- };
504
-
505
- Object.assign(placeholderLabel.style, styles);
506
-
507
- this.addEventListener('focus', () => {
508
- document.body.appendChild(placeholderLabel);
509
-
510
- if (!this.optionSelected) {
511
- document.getElementById(textId).innerHTML = this.placeholder;
512
- } else {
513
- document.getElementById(textId).innerHTML = `${this.optionSelected.innerText}, ${this.placeholder}`;
514
- }
515
- });
516
-
517
- this.addEventListener('blur', () => {
518
- if (document.contains(placeholderLabel)) {
519
- document.body.removeChild(placeholderLabel);
520
- }
521
- });
522
- }
523
-
524
502
  // When using auroElement, use the following attribute and function when hiding content from screen readers.
525
503
  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
526
504
 
527
505
  // function that renders the HTML and CSS into the scope of the component
528
506
  render() {
507
+ const placeholderClass = {
508
+ hidden: this.value,
509
+ };
510
+
529
511
  return html`
530
512
  <div class="outerWrapper">
531
513
  <div aria-live="polite" class="util_displayHiddenVisually">
@@ -552,7 +534,7 @@ export class AuroSelect extends LitElement {
552
534
  chevron
553
535
  part="dropdown">
554
536
  <span slot="trigger" aria-haspopup="true" id="triggerFocus">
555
- ${this.value ? this.displayValue : html`<span class="placeholder">${this.placeholder}</span>`}
537
+ <span id="placeholder" class="${classMap(placeholderClass)}"><slot name="placeholder"></slot></span>
556
538
  </span>
557
539
  <div class="menuWrapper">
558
540
  </div>
@@ -565,7 +547,7 @@ export class AuroSelect extends LitElement {
565
547
  </p>`
566
548
  : html`
567
549
  <p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
568
- ${this.setCustomValidity}
550
+ ${this.errorMessage}
569
551
  </p>`
570
552
  }
571
553
  </span>
@@ -1,2 +1,2 @@
1
1
  import { css } from 'lit';
2
- export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}.selectElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}`;
2
+ export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{padding:0;pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}.selectElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}`;
@@ -62,6 +62,12 @@
62
62
  [slot=trigger] .nestingSpacer {
63
63
  display: none;
64
64
  }
65
+ [slot=trigger] #placeholder.hidden {
66
+ position: absolute;
67
+ z-index: -1;
68
+ opacity: 0;
69
+ pointer-events: none;
70
+ }
65
71
 
66
72
  :host [auro-dropdown] {
67
73
  position: relative;
@@ -83,6 +89,7 @@
83
89
  }
84
90
 
85
91
  auro-menuoption {
92
+ padding: 0;
86
93
  pointer-events: none;
87
94
  }
88
95
 
@@ -24,7 +24,16 @@
24
24
  .nestingSpacer {
25
25
  display: none;
26
26
  }
27
- }
27
+
28
+ #placeholder {
29
+ &.hidden {
30
+ position: absolute;
31
+ z-index: -1;
32
+ opacity: 0;
33
+ pointer-events: none;
34
+ }
35
+ }
36
+ }
28
37
 
29
38
  :host {
30
39
  [auro-dropdown] {
@@ -52,6 +61,7 @@
52
61
  }
53
62
 
54
63
  auro-menuoption {
64
+ padding: 0;
55
65
  pointer-events: none;
56
66
  }
57
67
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem/auro-formkit",
3
- "version": "2.0.0-beta.2",
3
+ "version": "2.0.0-beta.4",
4
4
  "description": "A collection of web components used to build forms.",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
@@ -47,20 +47,20 @@ export default class AuroFormValidation {
47
47
  const pattern = new RegExp(`^${elem.pattern}$`, 'u');
48
48
 
49
49
  if (!pattern.test(elem.value)) {
50
- elem.validity = 'badInput';
51
- elem.setCustomValidity = elem.setCustomValidityBadInput || '';
50
+ elem.validity = 'patternMismatch';
51
+ elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
52
52
  }
53
53
  }
54
54
 
55
55
  // Length > 0 is required to prevent the error message from showing when the input is empty
56
56
  if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
57
57
  elem.validity = 'tooShort';
58
- elem.setCustomValidity = elem.setCustomValidityTooShort || '';
58
+ elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
59
59
  }
60
60
 
61
61
  if (elem.value?.length > elem.maxLength) {
62
62
  elem.validity = 'tooLong';
63
- elem.setCustomValidity = elem.setCustomValidityTooLong || '';
63
+ elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
64
64
  }
65
65
  }
66
66
 
@@ -76,33 +76,32 @@ export default class AuroFormValidation {
76
76
  const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
77
77
 
78
78
  if (!elem.value.match(emailRegex)) {
79
- elem.validity = 'badInput';
80
- elem.setCustomValidity = elem.setCustomValidityForType || '';
79
+ elem.validity = 'patternMismatch';
80
+ elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
81
81
  }
82
82
  } else if (elem.type === 'credit-card') {
83
83
  if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
84
84
  elem.validity = 'tooShort';
85
- elem.setCustomValidity = elem.setCustomValidityForType || '';
85
+ elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
86
86
  }
87
87
  } else if (elem.type === 'number') {
88
88
  if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
89
89
  elem.validity = 'rangeOverflow';
90
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
90
+ elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
91
91
  }
92
92
 
93
- if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
93
+ if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
94
94
  elem.validity = 'rangeUnderflow';
95
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
95
+ elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
96
96
  }
97
-
98
97
  } else if (elem.type === 'month-day-year' ||
99
98
  elem.type === 'month-year' ||
100
99
  elem.type === 'month-fullYear' ||
101
100
  elem.type === 'year-month-day'
102
101
  ) {
103
- if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) {
102
+ if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
104
103
  elem.validity = 'tooShort';
105
- elem.setCustomValidity = elem.setCustomValidityForType || '';
104
+ elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
106
105
  } else {
107
106
  const valueDate = new Date(elem.value);
108
107
 
@@ -112,7 +111,7 @@ export default class AuroFormValidation {
112
111
 
113
112
  if (valueDate > maxDate) {
114
113
  elem.validity = 'rangeOverflow';
115
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
114
+ elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
116
115
  }
117
116
  }
118
117
 
@@ -122,7 +121,7 @@ export default class AuroFormValidation {
122
121
 
123
122
  if (valueDate < minDate) {
124
123
  elem.validity = 'rangeUnderflow';
125
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
124
+ elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
126
125
  }
127
126
  }
128
127
  }
@@ -145,10 +144,10 @@ export default class AuroFormValidation {
145
144
 
146
145
  if (elem.hasAttribute('error')) {
147
146
  elem.validity = 'customError';
148
- elem.setCustomValidity = elem.error;
147
+ elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
149
148
  } else if (validationShouldRun) {
150
149
  elem.validity = 'valid';
151
- elem.setCustomValidity = '';
150
+ elem.errorMessage = '';
152
151
 
153
152
  /**
154
153
  * Only validate once we interact with the datepicker
@@ -160,7 +159,7 @@ export default class AuroFormValidation {
160
159
  let hasValue = elem.value && elem.value.length > 0;
161
160
 
162
161
  // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
163
- if (this.auroInputElements && this.auroInputElements.length === 2) {
162
+ if (this.auroInputElements?.length === 2) {
164
163
  if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
165
164
  hasValue = false;
166
165
  }
@@ -168,31 +167,27 @@ export default class AuroFormValidation {
168
167
 
169
168
  if (!hasValue && elem.required) {
170
169
  elem.validity = 'valueMissing';
171
- elem.setCustomValidity = elem.setCustomValidityValueMissing || '';
170
+ elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
172
171
  } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
173
172
  this.validateType(elem);
174
173
  this.validateAttributes(elem);
175
174
  }
176
175
  }
177
176
 
178
- if (this.auroInputElements && this.auroInputElements.length > 0) {
177
+ if (this.auroInputElements?.length > 0) {
179
178
  elem.validity = this.auroInputElements[0].validity;
180
- elem.setCustomValidity = this.auroInputElements[0].setCustomValidity;
179
+ elem.errorMessage = this.auroInputElements[0].errorMessage;
181
180
 
182
- if (elem.validity === 'valid') {
183
- if (this.auroInputElements.length > 1) {
184
- elem.validity = this.auroInputElements[1].validity;
185
- elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
186
- }
181
+ if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
182
+ elem.validity = this.auroInputElements[1].validity;
183
+ elem.errorMessage = this.auroInputElements[1].errorMessage;
187
184
  }
188
185
  }
189
186
 
190
187
  if (validationShouldRun || elem.hasAttribute('error')) {
191
- if (elem.validity && elem.validity !== 'valid') {
192
- // Use the validity message override if it is declared
193
- if (elem.ValidityMessageOverride) {
194
- elem.setCustomValidity = elem.ValidityMessageOverride;
195
- }
188
+ // Use the validity message override if it is declared
189
+ if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
190
+ elem.errorMessage = elem.ValidityMessageOverride;
196
191
  }
197
192
 
198
193
  this.getErrorMessage(elem);
@@ -238,18 +233,18 @@ export default class AuroFormValidation {
238
233
  if (elem.validity !== 'valid') {
239
234
  if (elem.setCustomValidity) {
240
235
  elem.errorMessage = elem.setCustomValidity;
241
- } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
236
+ } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
242
237
  const input = elem.renderRoot.querySelector('input');
243
238
 
244
239
  if (input.validationMessage.length > 0) {
245
240
  elem.errorMessage = input.validationMessage;
246
241
  }
247
- } else if (this.inputElements && this.inputElements.length > 0) {
242
+ } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
248
243
  const firstInput = this.inputElements[0];
249
244
 
250
245
  if (firstInput.validationMessage.length > 0) {
251
246
  elem.errorMessage = firstInput.validationMessage;
252
- } else if (this.inputElements.length === 2) {
247
+ } else if (this.inputElements?.length === 2) {
253
248
  const secondInput = this.inputElements[1];
254
249
 
255
250
  if (secondInput.validationMessage.length > 0) {
@@ -1 +0,0 @@
1
- {"hash":"0663fcbb1d711029","duration":642}
@@ -1 +0,0 @@
1
- {"hash":"0a2b0a4df8a0443f","duration":5988}
@@ -1 +0,0 @@
1
- {"hash":"120c8e207aa1ba35","duration":19715}
@@ -1 +0,0 @@
1
- {"hash":"17dd4bdef6550a07","duration":19307}
@@ -1 +0,0 @@
1
- {"hash":"1de15d89eed2d760","duration":3404}
@@ -1 +0,0 @@
1
- {"hash":"2990aaa7ebc5b967","duration":3755}
@@ -1 +0,0 @@
1
- {"hash":"32c0b9995fb5f8dd","duration":20225}
@@ -1 +0,0 @@
1
- {"hash":"47ba2b5ebdb579e9","duration":7164}
@@ -1 +0,0 @@
1
- {"hash":"4f92cea2d8c63de2","duration":2007}
@@ -1 +0,0 @@
1
- {"hash":"56cb35d4c7473a23","duration":20991}
@@ -1 +0,0 @@
1
- {"hash":"5c16ce3cff5c9dff","duration":3164}