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

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 (211) 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/07ca42419b9f050c-meta.json +1 -1
  5. package/.turbo/cache/0cea4c1f34f3683b-meta.json +1 -1
  6. package/.turbo/cache/17259cf94d8f8925-meta.json +1 -1
  7. package/.turbo/cache/1ab37ce15d9be440-meta.json +1 -0
  8. package/.turbo/cache/1ab37ce15d9be440.tar.zst +0 -0
  9. package/.turbo/cache/1b9818717e4bdf9f-meta.json +1 -0
  10. package/.turbo/cache/1b9818717e4bdf9f.tar.zst +0 -0
  11. package/.turbo/cache/1c0f580d37370ba2-meta.json +1 -0
  12. package/.turbo/cache/1c0f580d37370ba2.tar.zst +0 -0
  13. package/.turbo/cache/1c99a949ec63ab35-meta.json +1 -1
  14. package/.turbo/cache/1de15d89eed2d760-meta.json +1 -1
  15. package/.turbo/cache/2110a4d14e0d11b2-meta.json +1 -0
  16. package/.turbo/cache/2110a4d14e0d11b2.tar.zst +0 -0
  17. package/.turbo/cache/257a7a26ea72dbc5-meta.json +1 -1
  18. package/.turbo/cache/2990aaa7ebc5b967-meta.json +1 -1
  19. package/.turbo/cache/2990aaa7ebc5b967.tar.zst +0 -0
  20. package/.turbo/cache/2fd056afdf4eb39d-meta.json +1 -0
  21. package/.turbo/cache/2fd056afdf4eb39d.tar.zst +0 -0
  22. package/.turbo/cache/3bf45120d0cc9bd8-meta.json +1 -1
  23. package/.turbo/cache/3e12285c614db539-meta.json +1 -0
  24. package/.turbo/cache/3e12285c614db539.tar.zst +0 -0
  25. package/.turbo/cache/45035bf5c4147ccd-meta.json +1 -1
  26. package/.turbo/cache/4f92cea2d8c63de2-meta.json +1 -1
  27. package/.turbo/cache/5bf2d3f7ba5891e0-meta.json +1 -0
  28. package/.turbo/cache/5bf2d3f7ba5891e0.tar.zst +0 -0
  29. package/.turbo/cache/5c16ce3cff5c9dff-meta.json +1 -1
  30. package/.turbo/cache/5f304c0f37ef25f3-meta.json +1 -1
  31. package/.turbo/cache/64de7a53e02db647-meta.json +1 -1
  32. package/.turbo/cache/691a74627ec57993-meta.json +1 -1
  33. package/.turbo/cache/69aae513b7ec6c7d-meta.json +1 -1
  34. package/.turbo/cache/6dd67d179191bda8-meta.json +1 -0
  35. package/.turbo/cache/6dd67d179191bda8.tar.zst +0 -0
  36. package/.turbo/cache/6dd7058e6703cb35-meta.json +1 -1
  37. package/.turbo/cache/73e9073a5274616d-meta.json +1 -1
  38. package/.turbo/cache/773edc0f83c8c5a5-meta.json +1 -1
  39. package/.turbo/cache/784c03fe9fd5ac05-meta.json +1 -1
  40. package/.turbo/cache/786a822763403879-meta.json +1 -1
  41. package/.turbo/cache/7e1043cffa69f327-meta.json +1 -0
  42. package/.turbo/cache/7e1043cffa69f327.tar.zst +0 -0
  43. package/.turbo/cache/80a13352066a9801-meta.json +1 -0
  44. package/.turbo/cache/80a13352066a9801.tar.zst +0 -0
  45. package/.turbo/cache/80b5d974184a01df-meta.json +1 -1
  46. package/.turbo/cache/87219c41a4ace9cd-meta.json +1 -1
  47. package/.turbo/cache/87219c41a4ace9cd.tar.zst +0 -0
  48. package/.turbo/cache/8954c6073396fadd-meta.json +1 -1
  49. package/.turbo/cache/8e79bd5c3a16a72e-meta.json +1 -0
  50. package/.turbo/cache/92daa6d7c389d548-meta.json +1 -1
  51. package/.turbo/cache/993dff2edb7b6766-meta.json +1 -1
  52. package/.turbo/cache/9a097d6576dadd64-meta.json +1 -1
  53. package/.turbo/cache/a63cbfecf0f78586-meta.json +1 -0
  54. package/.turbo/cache/{ce67b6522dd09e64.tar.zst → a63cbfecf0f78586.tar.zst} +0 -0
  55. package/.turbo/cache/a6a56bb802e1c20f-meta.json +1 -1
  56. package/.turbo/cache/a77bc920ea508bb8-meta.json +1 -1
  57. package/.turbo/cache/a77bc920ea508bb8.tar.zst +0 -0
  58. package/.turbo/cache/b2c66328fdd78093-meta.json +1 -0
  59. package/.turbo/cache/b2c66328fdd78093.tar.zst +0 -0
  60. package/.turbo/cache/b54fc4f664a7a5a0-meta.json +1 -1
  61. package/.turbo/cache/ba4418918621fbcd-meta.json +1 -1
  62. package/.turbo/cache/be7c23c37b8ec74b-meta.json +1 -1
  63. package/.turbo/cache/be7c23c37b8ec74b.tar.zst +0 -0
  64. package/.turbo/cache/bffc7582905c2a5e-meta.json +1 -0
  65. package/.turbo/cache/bffc7582905c2a5e.tar.zst +0 -0
  66. package/.turbo/cache/caa0b4ac8d2a04dd-meta.json +1 -1
  67. package/.turbo/cache/caa0b4ac8d2a04dd.tar.zst +0 -0
  68. package/.turbo/cache/cc81de9c0b452a7c-meta.json +1 -1
  69. package/.turbo/cache/d39e6ef95ebc4cc0-meta.json +1 -0
  70. package/.turbo/cache/d39e6ef95ebc4cc0.tar.zst +0 -0
  71. package/.turbo/cache/d572ebb3c833e8f4-meta.json +1 -0
  72. package/.turbo/cache/d572ebb3c833e8f4.tar.zst +0 -0
  73. package/.turbo/cache/d61543843c932504-meta.json +1 -0
  74. package/.turbo/cache/d61543843c932504.tar.zst +0 -0
  75. package/.turbo/cache/dad1301ac69bcb85-meta.json +1 -1
  76. package/.turbo/cache/dea5945f55c6aba5-meta.json +1 -0
  77. package/.turbo/cache/dea5945f55c6aba5.tar.zst +0 -0
  78. package/.turbo/cache/e992dab20aeefbaf-meta.json +1 -1
  79. package/.turbo/cache/e992dab20aeefbaf.tar.zst +0 -0
  80. package/.turbo/cache/f411e2deb0676959-meta.json +1 -0
  81. package/.turbo/cache/f411e2deb0676959.tar.zst +0 -0
  82. package/.turbo/cache/fa132b5b5f0e75f8-meta.json +1 -1
  83. package/.turbo/cache/fbbe2704bf9cb90b-meta.json +1 -1
  84. package/CHANGELOG.md +26 -0
  85. package/components/checkbox/.turbo/turbo-build.log +3 -3
  86. package/components/checkbox/.turbo/turbo-bundler.log +3 -3
  87. package/components/checkbox/demo/api.md +4 -2
  88. package/components/checkbox/demo/api.min.js +31 -36
  89. package/components/checkbox/demo/index.min.js +31 -36
  90. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  91. package/components/checkbox/dist/index.js +31 -36
  92. package/components/checkbox/src/auro-checkbox-group.js +2 -2
  93. package/components/combobox/.turbo/turbo-build.log +3 -3
  94. package/components/combobox/demo/api.md +17 -15
  95. package/components/combobox/demo/api.min.js +104 -116
  96. package/components/combobox/demo/index.min.js +104 -116
  97. package/components/combobox/dist/auro-combobox.d.ts +11 -4
  98. package/components/combobox/dist/auro-combobox.d.ts.map +1 -1
  99. package/components/combobox/dist/index.js +103 -115
  100. package/components/combobox/src/auro-combobox.js +22 -20
  101. package/components/counter/.turbo/turbo-build.log +3 -3
  102. package/components/counter/.turbo/turbo-bundler.log +3 -3
  103. package/components/datepicker/.turbo/turbo-build.log +9 -8
  104. package/components/datepicker/demo/api.md +107 -87
  105. package/components/datepicker/demo/api.min.js +96 -130
  106. package/components/datepicker/demo/index.min.js +96 -130
  107. package/components/datepicker/dist/auro-datepicker.d.ts +6 -13
  108. package/components/datepicker/dist/auro-datepicker.d.ts.map +1 -1
  109. package/components/datepicker/dist/index.js +96 -130
  110. package/components/datepicker/src/auro-datepicker.js +15 -35
  111. package/components/dropdown/.turbo/turbo-build.log +3 -3
  112. package/components/dropdown/.turbo/turbo-bundler.log +2 -2
  113. package/components/form/.turbo/turbo-build.log +3 -3
  114. package/components/form/.turbo/turbo-bundler.log +3 -3
  115. package/components/input/.turbo/turbo-build$colon$sass.log +51 -1
  116. package/components/input/.turbo/turbo-build.log +56 -6
  117. package/components/input/.turbo/turbo-bundler.log +3 -3
  118. package/components/input/.turbo/turbo-sass$colon$render.log +6 -0
  119. package/components/input/demo/api.md +83 -83
  120. package/components/input/demo/api.min.js +52 -61
  121. package/components/input/demo/index.md +6 -6
  122. package/components/input/demo/index.min.js +52 -61
  123. package/components/input/dist/auro-input.d.ts.map +1 -1
  124. package/components/input/dist/base-input.d.ts +5 -12
  125. package/components/input/dist/base-input.d.ts.map +1 -1
  126. package/components/input/dist/index.js +52 -61
  127. package/components/input/dist/styles/mixins-css.d.ts +3 -0
  128. package/components/input/dist/styles/mixins-css.d.ts.map +1 -0
  129. package/components/input/src/auro-input.js +0 -1
  130. package/components/input/src/base-input.js +22 -25
  131. package/components/input/src/styles/borders.scss +3 -19
  132. package/components/input/src/styles/color.css +1 -2
  133. package/components/input/src/styles/color.scss +3 -10
  134. package/components/input/src/styles/input-css.js +1 -1
  135. package/components/input/src/styles/input.css +1 -1
  136. package/components/input/src/styles/input.scss +4 -1
  137. package/components/input/src/styles/label-css.js +1 -1
  138. package/components/input/src/styles/label.css +1 -1
  139. package/components/input/src/styles/label.scss +4 -7
  140. package/components/input/src/styles/mixins-css.js +2 -0
  141. package/components/input/src/styles/mixins.css +1 -0
  142. package/components/input/src/styles/mixins.scss +45 -0
  143. package/components/input/src/styles/notificationIcons-css.js +1 -1
  144. package/components/input/src/styles/notificationIcons.css +13 -12
  145. package/components/input/src/styles/notificationIcons.scss +17 -25
  146. package/components/input/src/styles/style-css.js +1 -1
  147. package/components/input/src/styles/style.css +15 -17
  148. package/components/input/src/styles/style.scss +0 -4
  149. package/components/menu/.turbo/turbo-build.log +3 -3
  150. package/components/menu/.turbo/turbo-bundler.log +3 -3
  151. package/components/menu/demo/api.min.js +1 -1
  152. package/components/menu/demo/index.min.js +1 -1
  153. package/components/menu/dist/auro-menu.d.ts +1 -1
  154. package/components/menu/dist/index.js +1 -1
  155. package/components/menu/src/auro-menu.js +1 -1
  156. package/components/radio/.turbo/turbo-build.log +3 -3
  157. package/components/radio/.turbo/turbo-bundler.log +3 -3
  158. package/components/radio/demo/api.md +3 -1
  159. package/components/radio/demo/api.min.js +30 -35
  160. package/components/radio/demo/index.min.js +30 -35
  161. package/components/radio/dist/index.js +30 -35
  162. package/components/radio/src/auro-radio-group.js +1 -1
  163. package/components/select/.turbo/turbo-build.log +3 -3
  164. package/components/select/demo/api.md +7 -11
  165. package/components/select/demo/api.min.js +33 -60
  166. package/components/select/demo/index.min.js +33 -56
  167. package/components/select/dist/auro-select.d.ts +2 -2
  168. package/components/select/dist/auro-select.d.ts.map +1 -1
  169. package/components/select/dist/index.js +32 -55
  170. package/components/select/src/auro-select.js +3 -21
  171. package/package.json +1 -1
  172. package/packages/form-validation/src/validation.js +29 -34
  173. package/.turbo/cache/0663fcbb1d711029-meta.json +0 -1
  174. package/.turbo/cache/0663fcbb1d711029.tar.zst +0 -0
  175. package/.turbo/cache/0a2b0a4df8a0443f-meta.json +0 -1
  176. package/.turbo/cache/120c8e207aa1ba35-meta.json +0 -1
  177. package/.turbo/cache/120c8e207aa1ba35.tar.zst +0 -0
  178. package/.turbo/cache/17dd4bdef6550a07-meta.json +0 -1
  179. package/.turbo/cache/17dd4bdef6550a07.tar.zst +0 -0
  180. package/.turbo/cache/32c0b9995fb5f8dd-meta.json +0 -1
  181. package/.turbo/cache/32c0b9995fb5f8dd.tar.zst +0 -0
  182. package/.turbo/cache/47ba2b5ebdb579e9-meta.json +0 -1
  183. package/.turbo/cache/47ba2b5ebdb579e9.tar.zst +0 -0
  184. package/.turbo/cache/56cb35d4c7473a23-meta.json +0 -1
  185. package/.turbo/cache/56cb35d4c7473a23.tar.zst +0 -0
  186. package/.turbo/cache/626afdc67e0cb540-meta.json +0 -1
  187. package/.turbo/cache/626afdc67e0cb540.tar.zst +0 -0
  188. package/.turbo/cache/6ef81cf9a66f982a-meta.json +0 -1
  189. package/.turbo/cache/6ef81cf9a66f982a.tar.zst +0 -0
  190. package/.turbo/cache/8b735250fa5a62bf-meta.json +0 -1
  191. package/.turbo/cache/8b735250fa5a62bf.tar.zst +0 -0
  192. package/.turbo/cache/9154e8fe6ab767ea-meta.json +0 -1
  193. package/.turbo/cache/9154e8fe6ab767ea.tar.zst +0 -0
  194. package/.turbo/cache/a49cc58242467fdc-meta.json +0 -1
  195. package/.turbo/cache/a49cc58242467fdc.tar.zst +0 -0
  196. package/.turbo/cache/af061e7a077a9ba5-meta.json +0 -1
  197. package/.turbo/cache/af061e7a077a9ba5.tar.zst +0 -0
  198. package/.turbo/cache/b50f1b283b4b81cd-meta.json +0 -1
  199. package/.turbo/cache/b50f1b283b4b81cd.tar.zst +0 -0
  200. package/.turbo/cache/bf85bc040b7e64db-meta.json +0 -1
  201. package/.turbo/cache/bf85bc040b7e64db.tar.zst +0 -0
  202. package/.turbo/cache/cd5f6987783fb56d-meta.json +0 -1
  203. package/.turbo/cache/cd5f6987783fb56d.tar.zst +0 -0
  204. package/.turbo/cache/ce67b6522dd09e64-meta.json +0 -1
  205. package/.turbo/cache/d716cb7a08152beb-meta.json +0 -1
  206. package/.turbo/cache/d716cb7a08152beb.tar.zst +0 -0
  207. package/.turbo/cache/d7a47b77deb3d9a4-meta.json +0 -1
  208. package/.turbo/cache/d7a47b77deb3d9a4.tar.zst +0 -0
  209. package/.turbo/cache/ff58f630c9d69af4-meta.json +0 -1
  210. package/.turbo/cache/ff58f630c9d69af4.tar.zst +0 -0
  211. /package/.turbo/cache/{0a2b0a4df8a0443f.tar.zst → 8e79bd5c3a16a72e.tar.zst} +0 -0
@@ -32,10 +32,6 @@ function valueExample() {
32
32
  document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => {
33
33
  valueExample.value = 'flight course';
34
34
  });
35
-
36
- document.querySelector('#undefinedValueExampleBtn').addEventListener('click', () => {
37
- valueExample.value = undefined;
38
- });
39
35
  }
40
36
 
41
37
  function valueExtractionExample() {
@@ -253,20 +249,20 @@ class AuroFormValidation {
253
249
  const pattern = new RegExp(`^${elem.pattern}$`, 'u');
254
250
 
255
251
  if (!pattern.test(elem.value)) {
256
- elem.validity = 'badInput';
257
- elem.setCustomValidity = elem.setCustomValidityBadInput || '';
252
+ elem.validity = 'patternMismatch';
253
+ elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
258
254
  }
259
255
  }
260
256
 
261
257
  // Length > 0 is required to prevent the error message from showing when the input is empty
262
258
  if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
263
259
  elem.validity = 'tooShort';
264
- elem.setCustomValidity = elem.setCustomValidityTooShort || '';
260
+ elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
265
261
  }
266
262
 
267
263
  if (elem.value?.length > elem.maxLength) {
268
264
  elem.validity = 'tooLong';
269
- elem.setCustomValidity = elem.setCustomValidityTooLong || '';
265
+ elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
270
266
  }
271
267
  }
272
268
 
@@ -282,33 +278,32 @@ class AuroFormValidation {
282
278
  const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
283
279
 
284
280
  if (!elem.value.match(emailRegex)) {
285
- elem.validity = 'badInput';
286
- elem.setCustomValidity = elem.setCustomValidityForType || '';
281
+ elem.validity = 'patternMismatch';
282
+ elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
287
283
  }
288
284
  } else if (elem.type === 'credit-card') {
289
285
  if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
290
286
  elem.validity = 'tooShort';
291
- elem.setCustomValidity = elem.setCustomValidityForType || '';
287
+ elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
292
288
  }
293
289
  } else if (elem.type === 'number') {
294
290
  if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
295
291
  elem.validity = 'rangeOverflow';
296
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
292
+ elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
297
293
  }
298
294
 
299
- if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
295
+ if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
300
296
  elem.validity = 'rangeUnderflow';
301
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
297
+ elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
302
298
  }
303
-
304
299
  } else if (elem.type === 'month-day-year' ||
305
300
  elem.type === 'month-year' ||
306
301
  elem.type === 'month-fullYear' ||
307
302
  elem.type === 'year-month-day'
308
303
  ) {
309
- if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) {
304
+ if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
310
305
  elem.validity = 'tooShort';
311
- elem.setCustomValidity = elem.setCustomValidityForType || '';
306
+ elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
312
307
  } else {
313
308
  const valueDate = new Date(elem.value);
314
309
 
@@ -318,7 +313,7 @@ class AuroFormValidation {
318
313
 
319
314
  if (valueDate > maxDate) {
320
315
  elem.validity = 'rangeOverflow';
321
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
316
+ elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
322
317
  }
323
318
  }
324
319
 
@@ -328,7 +323,7 @@ class AuroFormValidation {
328
323
 
329
324
  if (valueDate < minDate) {
330
325
  elem.validity = 'rangeUnderflow';
331
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
326
+ elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
332
327
  }
333
328
  }
334
329
  }
@@ -351,10 +346,10 @@ class AuroFormValidation {
351
346
 
352
347
  if (elem.hasAttribute('error')) {
353
348
  elem.validity = 'customError';
354
- elem.setCustomValidity = elem.error;
349
+ elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
355
350
  } else if (validationShouldRun) {
356
351
  elem.validity = 'valid';
357
- elem.setCustomValidity = '';
352
+ elem.errorMessage = '';
358
353
 
359
354
  /**
360
355
  * Only validate once we interact with the datepicker
@@ -366,7 +361,7 @@ class AuroFormValidation {
366
361
  let hasValue = elem.value && elem.value.length > 0;
367
362
 
368
363
  // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
369
- if (this.auroInputElements && this.auroInputElements.length === 2) {
364
+ if (this.auroInputElements?.length === 2) {
370
365
  if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
371
366
  hasValue = false;
372
367
  }
@@ -374,31 +369,27 @@ class AuroFormValidation {
374
369
 
375
370
  if (!hasValue && elem.required) {
376
371
  elem.validity = 'valueMissing';
377
- elem.setCustomValidity = elem.setCustomValidityValueMissing || '';
372
+ elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
378
373
  } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
379
374
  this.validateType(elem);
380
375
  this.validateAttributes(elem);
381
376
  }
382
377
  }
383
378
 
384
- if (this.auroInputElements && this.auroInputElements.length > 0) {
379
+ if (this.auroInputElements?.length > 0) {
385
380
  elem.validity = this.auroInputElements[0].validity;
386
- elem.setCustomValidity = this.auroInputElements[0].setCustomValidity;
381
+ elem.errorMessage = this.auroInputElements[0].errorMessage;
387
382
 
388
- if (elem.validity === 'valid') {
389
- if (this.auroInputElements.length > 1) {
390
- elem.validity = this.auroInputElements[1].validity;
391
- elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
392
- }
383
+ if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
384
+ elem.validity = this.auroInputElements[1].validity;
385
+ elem.errorMessage = this.auroInputElements[1].errorMessage;
393
386
  }
394
387
  }
395
388
 
396
389
  if (validationShouldRun || elem.hasAttribute('error')) {
397
- if (elem.validity && elem.validity !== 'valid') {
398
- // Use the validity message override if it is declared
399
- if (elem.ValidityMessageOverride) {
400
- elem.setCustomValidity = elem.ValidityMessageOverride;
401
- }
390
+ // Use the validity message override if it is declared
391
+ if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
392
+ elem.errorMessage = elem.ValidityMessageOverride;
402
393
  }
403
394
 
404
395
  this.getErrorMessage(elem);
@@ -444,18 +435,18 @@ class AuroFormValidation {
444
435
  if (elem.validity !== 'valid') {
445
436
  if (elem.setCustomValidity) {
446
437
  elem.errorMessage = elem.setCustomValidity;
447
- } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
438
+ } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
448
439
  const input = elem.renderRoot.querySelector('input');
449
440
 
450
441
  if (input.validationMessage.length > 0) {
451
442
  elem.errorMessage = input.validationMessage;
452
443
  }
453
- } else if (this.inputElements && this.inputElements.length > 0) {
444
+ } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
454
445
  const firstInput = this.inputElements[0];
455
446
 
456
447
  if (firstInput.validationMessage.length > 0) {
457
448
  elem.errorMessage = firstInput.validationMessage;
458
- } else if (this.inputElements.length === 2) {
449
+ } else if (this.inputElements?.length === 2) {
459
450
  const secondInput = this.inputElements[1];
460
451
 
461
452
  if (secondInput.validationMessage.length > 0) {
@@ -3370,7 +3361,7 @@ var tokensCss$2 = i$b`:host{--ds-auro-select-placeholder-text-color: var(--ds-co
3370
3361
  * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
3371
3362
  * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
3372
3363
  * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
3373
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
3364
+ * @attr {String} error - When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
3374
3365
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
3375
3366
  * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
3376
3367
  * @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
@@ -3618,26 +3609,8 @@ class AuroSelect extends r$4 {
3618
3609
  * with `auro-select.value`.
3619
3610
  */
3620
3611
  this.menu.addEventListener('auroMenu-selectValueFailure', () => {
3621
- this.menu.optionSelected = undefined;
3622
- this.optionSelected = this.menu.optionSelected;
3623
-
3624
- this.validity = 'badInput';
3625
-
3626
- // Capitalizes the first letter of each word in this.value string
3627
- const valueStr = this.value.replace(/(^\w{1})|(\s+\w{1})/gu, (letter) => letter.toUpperCase());
3628
-
3629
- // Pass the new string to the trigger content
3630
- this.updateDisplayedValue(valueStr);
3631
- });
3632
-
3633
- this.menu.addEventListener('auroMenu-selectValueReset', () => {
3634
- // set the trigger content back to the placeholder
3612
+ this.reset();
3635
3613
  this.updateDisplayedValue(this.placeholder);
3636
-
3637
- this.optionSelected = undefined;
3638
- this.value = undefined;
3639
-
3640
- this.validation.validate(this);
3641
3614
  });
3642
3615
  }
3643
3616
 
@@ -3906,7 +3879,7 @@ class AuroSelect extends r$4 {
3906
3879
  </p>`
3907
3880
  : u$3`
3908
3881
  <p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
3909
- ${this.setCustomValidity}
3882
+ ${this.errorMessage}
3910
3883
  </p>`
3911
3884
  }
3912
3885
  </span>
@@ -3940,8 +3913,8 @@ var tokensCss$1 = i$b`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
3940
3913
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
3941
3914
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
3942
3915
  * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
3943
- * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
3944
3916
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
3917
+ * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
3945
3918
  * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
3946
3919
  * @slot loadingText - Text to show while loading attribute is set
3947
3920
  * @slot loadingIcon - Icon to show while loading attribute is set
@@ -145,20 +145,20 @@ class AuroFormValidation {
145
145
  const pattern = new RegExp(`^${elem.pattern}$`, 'u');
146
146
 
147
147
  if (!pattern.test(elem.value)) {
148
- elem.validity = 'badInput';
149
- elem.setCustomValidity = elem.setCustomValidityBadInput || '';
148
+ elem.validity = 'patternMismatch';
149
+ elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
150
150
  }
151
151
  }
152
152
 
153
153
  // Length > 0 is required to prevent the error message from showing when the input is empty
154
154
  if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
155
155
  elem.validity = 'tooShort';
156
- elem.setCustomValidity = elem.setCustomValidityTooShort || '';
156
+ elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
157
157
  }
158
158
 
159
159
  if (elem.value?.length > elem.maxLength) {
160
160
  elem.validity = 'tooLong';
161
- elem.setCustomValidity = elem.setCustomValidityTooLong || '';
161
+ elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
162
162
  }
163
163
  }
164
164
 
@@ -174,33 +174,32 @@ class AuroFormValidation {
174
174
  const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
175
175
 
176
176
  if (!elem.value.match(emailRegex)) {
177
- elem.validity = 'badInput';
178
- elem.setCustomValidity = elem.setCustomValidityForType || '';
177
+ elem.validity = 'patternMismatch';
178
+ elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
179
179
  }
180
180
  } else if (elem.type === 'credit-card') {
181
181
  if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
182
182
  elem.validity = 'tooShort';
183
- elem.setCustomValidity = elem.setCustomValidityForType || '';
183
+ elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
184
184
  }
185
185
  } else if (elem.type === 'number') {
186
186
  if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
187
187
  elem.validity = 'rangeOverflow';
188
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
188
+ elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
189
189
  }
190
190
 
191
- if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
191
+ if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
192
192
  elem.validity = 'rangeUnderflow';
193
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
193
+ elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
194
194
  }
195
-
196
195
  } else if (elem.type === 'month-day-year' ||
197
196
  elem.type === 'month-year' ||
198
197
  elem.type === 'month-fullYear' ||
199
198
  elem.type === 'year-month-day'
200
199
  ) {
201
- if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) {
200
+ if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
202
201
  elem.validity = 'tooShort';
203
- elem.setCustomValidity = elem.setCustomValidityForType || '';
202
+ elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
204
203
  } else {
205
204
  const valueDate = new Date(elem.value);
206
205
 
@@ -210,7 +209,7 @@ class AuroFormValidation {
210
209
 
211
210
  if (valueDate > maxDate) {
212
211
  elem.validity = 'rangeOverflow';
213
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
212
+ elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
214
213
  }
215
214
  }
216
215
 
@@ -220,7 +219,7 @@ class AuroFormValidation {
220
219
 
221
220
  if (valueDate < minDate) {
222
221
  elem.validity = 'rangeUnderflow';
223
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
222
+ elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
224
223
  }
225
224
  }
226
225
  }
@@ -243,10 +242,10 @@ class AuroFormValidation {
243
242
 
244
243
  if (elem.hasAttribute('error')) {
245
244
  elem.validity = 'customError';
246
- elem.setCustomValidity = elem.error;
245
+ elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
247
246
  } else if (validationShouldRun) {
248
247
  elem.validity = 'valid';
249
- elem.setCustomValidity = '';
248
+ elem.errorMessage = '';
250
249
 
251
250
  /**
252
251
  * Only validate once we interact with the datepicker
@@ -258,7 +257,7 @@ class AuroFormValidation {
258
257
  let hasValue = elem.value && elem.value.length > 0;
259
258
 
260
259
  // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
261
- if (this.auroInputElements && this.auroInputElements.length === 2) {
260
+ if (this.auroInputElements?.length === 2) {
262
261
  if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
263
262
  hasValue = false;
264
263
  }
@@ -266,31 +265,27 @@ class AuroFormValidation {
266
265
 
267
266
  if (!hasValue && elem.required) {
268
267
  elem.validity = 'valueMissing';
269
- elem.setCustomValidity = elem.setCustomValidityValueMissing || '';
268
+ elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
270
269
  } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
271
270
  this.validateType(elem);
272
271
  this.validateAttributes(elem);
273
272
  }
274
273
  }
275
274
 
276
- if (this.auroInputElements && this.auroInputElements.length > 0) {
275
+ if (this.auroInputElements?.length > 0) {
277
276
  elem.validity = this.auroInputElements[0].validity;
278
- elem.setCustomValidity = this.auroInputElements[0].setCustomValidity;
277
+ elem.errorMessage = this.auroInputElements[0].errorMessage;
279
278
 
280
- if (elem.validity === 'valid') {
281
- if (this.auroInputElements.length > 1) {
282
- elem.validity = this.auroInputElements[1].validity;
283
- elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
284
- }
279
+ if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
280
+ elem.validity = this.auroInputElements[1].validity;
281
+ elem.errorMessage = this.auroInputElements[1].errorMessage;
285
282
  }
286
283
  }
287
284
 
288
285
  if (validationShouldRun || elem.hasAttribute('error')) {
289
- if (elem.validity && elem.validity !== 'valid') {
290
- // Use the validity message override if it is declared
291
- if (elem.ValidityMessageOverride) {
292
- elem.setCustomValidity = elem.ValidityMessageOverride;
293
- }
286
+ // Use the validity message override if it is declared
287
+ if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
288
+ elem.errorMessage = elem.ValidityMessageOverride;
294
289
  }
295
290
 
296
291
  this.getErrorMessage(elem);
@@ -336,18 +331,18 @@ class AuroFormValidation {
336
331
  if (elem.validity !== 'valid') {
337
332
  if (elem.setCustomValidity) {
338
333
  elem.errorMessage = elem.setCustomValidity;
339
- } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
334
+ } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
340
335
  const input = elem.renderRoot.querySelector('input');
341
336
 
342
337
  if (input.validationMessage.length > 0) {
343
338
  elem.errorMessage = input.validationMessage;
344
339
  }
345
- } else if (this.inputElements && this.inputElements.length > 0) {
340
+ } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
346
341
  const firstInput = this.inputElements[0];
347
342
 
348
343
  if (firstInput.validationMessage.length > 0) {
349
344
  elem.errorMessage = firstInput.validationMessage;
350
- } else if (this.inputElements.length === 2) {
345
+ } else if (this.inputElements?.length === 2) {
351
346
  const secondInput = this.inputElements[1];
352
347
 
353
348
  if (secondInput.validationMessage.length > 0) {
@@ -3262,7 +3257,7 @@ var tokensCss$2 = i$b`:host{--ds-auro-select-placeholder-text-color: var(--ds-co
3262
3257
  * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
3263
3258
  * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
3264
3259
  * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
3265
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
3260
+ * @attr {String} error - When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
3266
3261
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
3267
3262
  * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
3268
3263
  * @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
@@ -3510,26 +3505,8 @@ class AuroSelect extends r$4 {
3510
3505
  * with `auro-select.value`.
3511
3506
  */
3512
3507
  this.menu.addEventListener('auroMenu-selectValueFailure', () => {
3513
- this.menu.optionSelected = undefined;
3514
- this.optionSelected = this.menu.optionSelected;
3515
-
3516
- this.validity = 'badInput';
3517
-
3518
- // Capitalizes the first letter of each word in this.value string
3519
- const valueStr = this.value.replace(/(^\w{1})|(\s+\w{1})/gu, (letter) => letter.toUpperCase());
3520
-
3521
- // Pass the new string to the trigger content
3522
- this.updateDisplayedValue(valueStr);
3523
- });
3524
-
3525
- this.menu.addEventListener('auroMenu-selectValueReset', () => {
3526
- // set the trigger content back to the placeholder
3508
+ this.reset();
3527
3509
  this.updateDisplayedValue(this.placeholder);
3528
-
3529
- this.optionSelected = undefined;
3530
- this.value = undefined;
3531
-
3532
- this.validation.validate(this);
3533
3510
  });
3534
3511
  }
3535
3512
 
@@ -3798,7 +3775,7 @@ class AuroSelect extends r$4 {
3798
3775
  </p>`
3799
3776
  : u$3`
3800
3777
  <p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
3801
- ${this.setCustomValidity}
3778
+ ${this.errorMessage}
3802
3779
  </p>`
3803
3780
  }
3804
3781
  </span>
@@ -3832,8 +3809,8 @@ var tokensCss$1 = i$b`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
3832
3809
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
3833
3810
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
3834
3811
  * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
3835
- * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
3836
3812
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
3813
+ * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
3837
3814
  * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
3838
3815
  * @slot loadingText - Text to show while loading attribute is set
3839
3816
  * @slot loadingIcon - Icon to show while loading attribute is set
@@ -5,7 +5,7 @@
5
5
  * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
6
6
  * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
7
7
  * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
8
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
8
+ * @attr {String} error - When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
9
9
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
10
10
  * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
11
11
  * @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
@@ -94,7 +94,7 @@ export class AuroSelect extends LitElement {
94
94
  static register(name?: string): void;
95
95
  placeholder: string;
96
96
  optionSelected: any;
97
- validity: string;
97
+ validity: any;
98
98
  /**
99
99
  * @private
100
100
  */
@@ -1 +1 @@
1
- {"version":3,"file":"auro-select.d.ts","sourceRoot":"","sources":["../src/auro-select.js"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH;IAyDE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAgDI;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IAED,+CAMC;IAmBD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IApJC,oBAAyC;IACzC,oBAA+B;IAC/B,iBAAyB;IAMzB;;OAEG;IACH,iBAEuC;IAEvC;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAOjD;;OAEG;IACH,oBAAyF;IAEzF;;OAEG;IACH,6BAAiC;IAGnC;;;OAGG;IACH,wBAGC;IAFC,2BAAiB;IACjB,kBAAwB;IA0E1B;;;;OAIG;IACH,0BAUC;IATC,cAA4E;IAC5E,iBAA8D;IAsBhE;;;;;OAKG;IACH,6BAyBC;IAED;;;;OAIG;IACH,sBA2DC;IA1DC,cAAwD;IAoBtD,WAAsC;IAwC1C;;;;OAIG;IACH,wBA4CC;IAED;;;;;;;;;;;;;OAaG;IACH,gCAUC;IAED;;;;OAIG;IACH,sBAYC;IAED;;;;OAIG;IACH,6BAMC;IA4BD,qBAYC;IAED,sCAqBC;IAED;;;OAGG;IACH,SAFa,IAAI,CAIhB;IAED;;;;OAIG;IACH,mBAkCC;IAMD,4CAgDC;CACF;2BAxjB0B,KAAK"}
1
+ {"version":3,"file":"auro-select.d.ts","sourceRoot":"","sources":["../src/auro-select.js"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH;IAyDE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAgDI;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IAED,+CAMC;IAmBD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IApJC,oBAAyC;IACzC,oBAA+B;IAC/B,cAAyB;IAMzB;;OAEG;IACH,iBAEuC;IAEvC;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAOjD;;OAEG;IACH,oBAAyF;IAEzF;;OAEG;IACH,6BAAiC;IAGnC;;;OAGG;IACH,wBAGC;IAFC,2BAAiB;IACjB,kBAAwB;IA0E1B;;;;OAIG;IACH,0BAUC;IATC,cAA4E;IAC5E,iBAA8D;IAsBhE;;;;;OAKG;IACH,6BAyBC;IAED;;;;OAIG;IACH,sBAyCC;IAxCC,cAAwD;IAoBtD,WAAsC;IAsB1C;;;;OAIG;IACH,wBA4CC;IAED;;;;;;;;;;;;;OAaG;IACH,gCAUC;IAED;;;;OAIG;IACH,sBAYC;IAED;;;;OAIG;IACH,6BAMC;IA4BD,qBAYC;IAED,sCAqBC;IAED;;;OAGG;IACH,SAFa,IAAI,CAIhB;IAED;;;;OAIG;IACH,mBAkCC;IAMD,4CAgDC;CACF;2BAtiB0B,KAAK"}