@aurodesignsystem/auro-formkit 1.6.0-beta.10 → 1.6.0-beta.11

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 (217) hide show
  1. package/.turbo/cache/013a48308b893dac-meta.json +1 -1
  2. package/.turbo/cache/0593477832b1052b-meta.json +1 -0
  3. package/.turbo/cache/0593477832b1052b.tar.zst +0 -0
  4. package/.turbo/cache/07ca42419b9f050c-meta.json +1 -1
  5. package/.turbo/cache/0a2b0a4df8a0443f-meta.json +1 -0
  6. package/.turbo/cache/0a2b0a4df8a0443f.tar.zst +0 -0
  7. package/.turbo/cache/0cea4c1f34f3683b-meta.json +1 -1
  8. package/.turbo/cache/13cf37c850bd8cf4-meta.json +1 -1
  9. package/.turbo/cache/141bb7d9a95e288b-meta.json +1 -0
  10. package/.turbo/cache/141bb7d9a95e288b.tar.zst +0 -0
  11. package/.turbo/cache/17259cf94d8f8925-meta.json +1 -1
  12. package/.turbo/cache/1c99a949ec63ab35-meta.json +1 -1
  13. package/.turbo/cache/257a7a26ea72dbc5-meta.json +1 -1
  14. package/.turbo/cache/32c0b9995fb5f8dd-meta.json +1 -0
  15. package/.turbo/cache/32c0b9995fb5f8dd.tar.zst +0 -0
  16. package/.turbo/cache/3924bce8e51f0ffa-meta.json +1 -1
  17. package/.turbo/cache/3ba80396ea6d6457-meta.json +1 -0
  18. package/.turbo/cache/3ba80396ea6d6457.tar.zst +0 -0
  19. package/.turbo/cache/3bf45120d0cc9bd8-meta.json +1 -1
  20. package/.turbo/cache/45035bf5c4147ccd-meta.json +1 -1
  21. package/.turbo/cache/4567487084a055b7-meta.json +1 -1
  22. package/.turbo/cache/4763278a7d3dbc16-meta.json +1 -1
  23. package/.turbo/cache/4763278a7d3dbc16.tar.zst +0 -0
  24. package/.turbo/cache/4ceca20b1e98dbd7-meta.json +1 -0
  25. package/.turbo/cache/4ceca20b1e98dbd7.tar.zst +0 -0
  26. package/.turbo/cache/4e8c9ab436c836bc-meta.json +1 -0
  27. package/.turbo/cache/4e8c9ab436c836bc.tar.zst +0 -0
  28. package/.turbo/cache/5c16ce3cff5c9dff-meta.json +1 -1
  29. package/.turbo/cache/5f304c0f37ef25f3-meta.json +1 -1
  30. package/.turbo/cache/626afdc67e0cb540-meta.json +1 -0
  31. package/.turbo/cache/626afdc67e0cb540.tar.zst +0 -0
  32. package/.turbo/cache/64de7a53e02db647-meta.json +1 -1
  33. package/.turbo/cache/691a74627ec57993-meta.json +1 -1
  34. package/.turbo/cache/69aae513b7ec6c7d-meta.json +1 -1
  35. package/.turbo/cache/69f7eb632e38f934-meta.json +1 -0
  36. package/.turbo/cache/69f7eb632e38f934.tar.zst +0 -0
  37. package/.turbo/cache/6dd7058e6703cb35-meta.json +1 -1
  38. package/.turbo/cache/73e9073a5274616d-meta.json +1 -1
  39. package/.turbo/cache/773edc0f83c8c5a5-meta.json +1 -1
  40. package/.turbo/cache/786a822763403879-meta.json +1 -1
  41. package/.turbo/cache/80b5d974184a01df-meta.json +1 -1
  42. package/.turbo/cache/8954c6073396fadd-meta.json +1 -1
  43. package/.turbo/cache/8ca4e3f31520b797-meta.json +1 -0
  44. package/.turbo/cache/8ca4e3f31520b797.tar.zst +0 -0
  45. package/.turbo/cache/92daa6d7c389d548-meta.json +1 -1
  46. package/.turbo/cache/9a097d6576dadd64-meta.json +1 -1
  47. package/.turbo/cache/a77bc920ea508bb8-meta.json +1 -1
  48. package/.turbo/cache/a77bc920ea508bb8.tar.zst +0 -0
  49. package/.turbo/cache/ac45d828a2a1fb4a-meta.json +1 -0
  50. package/.turbo/cache/ac45d828a2a1fb4a.tar.zst +0 -0
  51. package/.turbo/cache/b057e863c1b9bd7b-meta.json +1 -0
  52. package/.turbo/cache/b057e863c1b9bd7b.tar.zst +0 -0
  53. package/.turbo/cache/b54fc4f664a7a5a0-meta.json +1 -1
  54. package/.turbo/cache/ba4418918621fbcd-meta.json +1 -1
  55. package/.turbo/cache/bb8b41cd0ade3986-meta.json +1 -0
  56. package/.turbo/cache/bb8b41cd0ade3986.tar.zst +0 -0
  57. package/.turbo/cache/bb8ec1d0fe0a761f-meta.json +1 -0
  58. package/.turbo/cache/bb8ec1d0fe0a761f.tar.zst +0 -0
  59. package/.turbo/cache/be7c23c37b8ec74b-meta.json +1 -1
  60. package/.turbo/cache/be7c23c37b8ec74b.tar.zst +0 -0
  61. package/.turbo/cache/bf85bc040b7e64db-meta.json +1 -0
  62. package/.turbo/cache/bf85bc040b7e64db.tar.zst +0 -0
  63. package/.turbo/cache/c1b72a92dec4fe37-meta.json +1 -1
  64. package/.turbo/cache/caa0b4ac8d2a04dd-meta.json +1 -1
  65. package/.turbo/cache/caa0b4ac8d2a04dd.tar.zst +0 -0
  66. package/.turbo/cache/cc81de9c0b452a7c-meta.json +1 -1
  67. package/.turbo/cache/cd845bb6102c589a-meta.json +1 -0
  68. package/.turbo/cache/cd845bb6102c589a.tar.zst +0 -0
  69. package/.turbo/cache/d7a47b77deb3d9a4-meta.json +1 -0
  70. package/.turbo/cache/d7a47b77deb3d9a4.tar.zst +0 -0
  71. package/.turbo/cache/dad1301ac69bcb85-meta.json +1 -1
  72. package/.turbo/cache/e44f36589cdc0bbc-meta.json +1 -0
  73. package/.turbo/cache/e44f36589cdc0bbc.tar.zst +0 -0
  74. package/.turbo/cache/e86cee22dff5e281-meta.json +1 -1
  75. package/.turbo/cache/e992dab20aeefbaf-meta.json +1 -1
  76. package/.turbo/cache/e992dab20aeefbaf.tar.zst +0 -0
  77. package/.turbo/cache/f5db6f7110f4ae32-meta.json +1 -0
  78. package/.turbo/cache/f5db6f7110f4ae32.tar.zst +0 -0
  79. package/.turbo/cache/f680556a8e954eac-meta.json +1 -1
  80. package/.turbo/cache/f680556a8e954eac.tar.zst +0 -0
  81. package/.turbo/cache/fa132b5b5f0e75f8-meta.json +1 -1
  82. package/.turbo/cache/fbbe2704bf9cb90b-meta.json +1 -1
  83. package/.turbo/cache/ff58f630c9d69af4-meta.json +1 -0
  84. package/.turbo/cache/ff58f630c9d69af4.tar.zst +0 -0
  85. package/CHANGELOG.md +32 -0
  86. package/components/checkbox/.turbo/turbo-build.log +6 -3
  87. package/components/checkbox/.turbo/turbo-bundler.log +3 -3
  88. package/components/checkbox/demo/api.html +6 -1
  89. package/components/checkbox/demo/api.js +16 -0
  90. package/components/checkbox/demo/api.md +63 -4
  91. package/components/checkbox/demo/api.min.js +84 -13
  92. package/components/checkbox/demo/index.min.js +59 -13
  93. package/components/checkbox/dist/auro-checkbox-group.d.ts +6 -1
  94. package/components/checkbox/dist/auro-checkbox-group.d.ts.map +1 -1
  95. package/components/checkbox/dist/auro-checkbox.d.ts +5 -0
  96. package/components/checkbox/dist/auro-checkbox.d.ts.map +1 -1
  97. package/components/checkbox/dist/index.js +59 -13
  98. package/components/checkbox/src/auro-checkbox-group.js +18 -6
  99. package/components/checkbox/src/auro-checkbox.js +9 -0
  100. package/components/combobox/.turbo/turbo-build.log +6 -3
  101. package/components/combobox/demo/api.js +4 -2
  102. package/components/combobox/demo/api.md +60 -1
  103. package/components/combobox/demo/api.min.js +100 -30
  104. package/components/combobox/demo/index.min.js +91 -30
  105. package/components/combobox/dist/auro-combobox.d.ts +5 -1
  106. package/components/combobox/dist/auro-combobox.d.ts.map +1 -1
  107. package/components/combobox/dist/index.js +90 -28
  108. package/components/combobox/src/auro-combobox.js +14 -3
  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 +6 -3
  112. package/components/datepicker/demo/api.js +2 -0
  113. package/components/datepicker/demo/api.md +46 -1
  114. package/components/datepicker/demo/api.min.js +99 -29
  115. package/components/datepicker/demo/index.min.js +90 -29
  116. package/components/datepicker/dist/auro-datepicker.d.ts +5 -2
  117. package/components/datepicker/dist/auro-datepicker.d.ts.map +1 -1
  118. package/components/datepicker/dist/index.js +90 -29
  119. package/components/datepicker/src/auro-datepicker.js +14 -4
  120. package/components/dropdown/.turbo/turbo-build.log +3 -3
  121. package/components/dropdown/.turbo/turbo-bundler.log +3 -3
  122. package/components/form/.turbo/turbo-build.log +3 -3
  123. package/components/form/.turbo/turbo-bundler.log +3 -3
  124. package/components/input/.turbo/turbo-build$colon$sass.log +2 -2
  125. package/components/input/.turbo/turbo-build.log +16 -13
  126. package/components/input/.turbo/turbo-bundler.log +3 -3
  127. package/components/input/demo/api.js +2 -0
  128. package/components/input/demo/api.md +148 -98
  129. package/components/input/demo/api.min.js +56 -21
  130. package/components/input/demo/index.min.js +44 -18
  131. package/components/input/dist/base-input.d.ts +7 -8
  132. package/components/input/dist/base-input.d.ts.map +1 -1
  133. package/components/input/dist/index.js +44 -18
  134. package/components/input/src/base-input.js +11 -10
  135. package/components/input/src/styles/input-css.js +1 -1
  136. package/components/input/src/styles/input.css +13 -0
  137. package/components/input/src/styles/input.scss +21 -0
  138. package/components/input/src/styles/label-css.js +1 -1
  139. package/components/input/src/styles/label.css +3 -3
  140. package/components/input/src/styles/label.scss +1 -2
  141. package/components/input/src/styles/notificationIcons-css.js +1 -1
  142. package/components/input/src/styles/notificationIcons.css +7 -0
  143. package/components/input/src/styles/notificationIcons.scss +14 -0
  144. package/components/input/src/styles/style-css.js +1 -1
  145. package/components/input/src/styles/style.css +23 -3
  146. package/components/menu/.turbo/turbo-build.log +3 -3
  147. package/components/menu/.turbo/turbo-bundler.log +3 -3
  148. package/components/menu/demo/api.min.js +1 -2
  149. package/components/menu/demo/index.min.js +1 -2
  150. package/components/menu/dist/auro-menuoption.d.ts +0 -1
  151. package/components/menu/dist/auro-menuoption.d.ts.map +1 -1
  152. package/components/menu/dist/index.js +1 -2
  153. package/components/menu/src/auro-menuoption.js +1 -2
  154. package/components/radio/.turbo/turbo-build.log +6 -3
  155. package/components/radio/.turbo/turbo-bundler.log +3 -3
  156. package/components/radio/demo/api.html +1 -0
  157. package/components/radio/demo/api.js +2 -0
  158. package/components/radio/demo/api.md +57 -3
  159. package/components/radio/demo/api.min.js +55 -12
  160. package/components/radio/demo/index.min.js +46 -12
  161. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  162. package/components/radio/dist/auro-radio.d.ts +5 -0
  163. package/components/radio/dist/auro-radio.d.ts.map +1 -1
  164. package/components/radio/dist/index.js +46 -12
  165. package/components/radio/src/auro-radio-group.js +5 -5
  166. package/components/radio/src/auro-radio.js +9 -0
  167. package/components/select/.turbo/turbo-build.log +7 -4
  168. package/components/select/demo/api.js +4 -2
  169. package/components/select/demo/api.md +81 -17
  170. package/components/select/demo/api.min.js +51 -11
  171. package/components/select/demo/index.min.js +42 -11
  172. package/components/select/dist/auro-select.d.ts +5 -1
  173. package/components/select/dist/auro-select.d.ts.map +1 -1
  174. package/components/select/dist/index.js +41 -9
  175. package/components/select/src/auro-select.js +9 -2
  176. package/package.json +1 -1
  177. package/packages/form-validation/src/validation.js +32 -7
  178. package/.turbo/cache/049b9083252d38be-meta.json +0 -1
  179. package/.turbo/cache/049b9083252d38be.tar.zst +0 -0
  180. package/.turbo/cache/0a1dd4481355cb0b-meta.json +0 -1
  181. package/.turbo/cache/0a1dd4481355cb0b.tar.zst +0 -0
  182. package/.turbo/cache/3323eb841acb9c4e-meta.json +0 -1
  183. package/.turbo/cache/3323eb841acb9c4e.tar.zst +0 -0
  184. package/.turbo/cache/34ba23e2e2d652ad-meta.json +0 -1
  185. package/.turbo/cache/34ba23e2e2d652ad.tar.zst +0 -0
  186. package/.turbo/cache/368cd6fed7975ad2-meta.json +0 -1
  187. package/.turbo/cache/368cd6fed7975ad2.tar.zst +0 -0
  188. package/.turbo/cache/549e6ef9f9ffd9a8-meta.json +0 -1
  189. package/.turbo/cache/549e6ef9f9ffd9a8.tar.zst +0 -0
  190. package/.turbo/cache/59ccd8430174883c-meta.json +0 -1
  191. package/.turbo/cache/59ccd8430174883c.tar.zst +0 -0
  192. package/.turbo/cache/683d4c0e20c077a9-meta.json +0 -1
  193. package/.turbo/cache/683d4c0e20c077a9.tar.zst +0 -0
  194. package/.turbo/cache/8f8ffe35cc79d1a9-meta.json +0 -1
  195. package/.turbo/cache/8f8ffe35cc79d1a9.tar.zst +0 -0
  196. package/.turbo/cache/926d632729ca6536-meta.json +0 -1
  197. package/.turbo/cache/926d632729ca6536.tar.zst +0 -0
  198. package/.turbo/cache/9e7be41cc3a7ef43-meta.json +0 -1
  199. package/.turbo/cache/9e7be41cc3a7ef43.tar.zst +0 -0
  200. package/.turbo/cache/9ee793063ea89126-meta.json +0 -1
  201. package/.turbo/cache/9ee793063ea89126.tar.zst +0 -0
  202. package/.turbo/cache/a1558cef51c034da-meta.json +0 -1
  203. package/.turbo/cache/a1558cef51c034da.tar.zst +0 -0
  204. package/.turbo/cache/a24f2ff8e94e56e8-meta.json +0 -1
  205. package/.turbo/cache/a24f2ff8e94e56e8.tar.zst +0 -0
  206. package/.turbo/cache/a2705cf095a2ceb0-meta.json +0 -1
  207. package/.turbo/cache/a2705cf095a2ceb0.tar.zst +0 -0
  208. package/.turbo/cache/a33c0749886a41b5-meta.json +0 -1
  209. package/.turbo/cache/a33c0749886a41b5.tar.zst +0 -0
  210. package/.turbo/cache/a66b465385a30a2b-meta.json +0 -1
  211. package/.turbo/cache/a66b465385a30a2b.tar.zst +0 -0
  212. package/.turbo/cache/e25ac25a8a0ad126-meta.json +0 -1
  213. package/.turbo/cache/e25ac25a8a0ad126.tar.zst +0 -0
  214. package/.turbo/cache/e671573e4ef02c47-meta.json +0 -1
  215. package/.turbo/cache/e671573e4ef02c47.tar.zst +0 -0
  216. package/.turbo/cache/ffec4500b911b85a-meta.json +0 -1
  217. package/.turbo/cache/ffec4500b911b85a.tar.zst +0 -0
@@ -259,6 +259,15 @@ class AuroRadio extends r {
259
259
  }));
260
260
  }
261
261
 
262
+ /**
263
+ * Resets component to initial state.
264
+ * @returns {void}
265
+ */
266
+ reset() {
267
+ this.checked = false;
268
+ this.error = false;
269
+ }
270
+
262
271
  updated(changedProperties) {
263
272
  if (changedProperties.has('checked')) {
264
273
  this.dispatchEvent(new CustomEvent('resetRadio', {
@@ -367,6 +376,30 @@ class AuroFormValidation {
367
376
  this.runtimeUtils = new AuroLibraryRuntimeUtils();
368
377
  }
369
378
 
379
+ /**
380
+ * Resets the element to its initial state.
381
+ * @private
382
+ * @param {object} elem - HTML element to reset.
383
+ * @returns {void}
384
+ */
385
+ reset(elem) {
386
+ elem.validity = undefined;
387
+ elem.value = undefined;
388
+
389
+ // Resets the second value of the datepicker in range state
390
+ if (elem.valueEnd) {
391
+ elem.valueEnd = undefined;
392
+ }
393
+
394
+ // Resets selected option of element
395
+ if (elem.optionSelected) {
396
+ elem.optionSelected = undefined;
397
+ }
398
+
399
+ // Runs validation to handle error attribute
400
+ this.validate(elem);
401
+ }
402
+
370
403
  /**
371
404
  * Determines the validity state of the element based on the common attribute restrictions (pattern).
372
405
  * @private
@@ -381,10 +414,15 @@ class AuroFormValidation {
381
414
  elem.validity = 'badInput';
382
415
  elem.setCustomValidity = elem.setCustomValidityBadInput || '';
383
416
  }
384
- } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
417
+ }
418
+
419
+ // Length > 0 is required to prevent the error message from showing when the input is empty
420
+ if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
385
421
  elem.validity = 'tooShort';
386
422
  elem.setCustomValidity = elem.setCustomValidityTooShort || '';
387
- } else if (elem.value && elem.value.length > elem.maxLength) {
423
+ }
424
+
425
+ if (elem.value?.length > elem.maxLength) {
388
426
  elem.validity = 'tooLong';
389
427
  elem.setCustomValidity = elem.setCustomValidityTooLong || '';
390
428
  }
@@ -410,7 +448,7 @@ class AuroFormValidation {
410
448
  elem.validity = 'tooShort';
411
449
  elem.setCustomValidity = elem.setCustomValidityForType || '';
412
450
  }
413
- } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
451
+ } else if (elem.type === 'number') {
414
452
  if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
415
453
  elem.validity = 'rangeOverflow';
416
454
  elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -515,14 +553,10 @@ class AuroFormValidation {
515
553
 
516
554
  if (validationShouldRun || elem.hasAttribute('error')) {
517
555
  if (elem.validity && elem.validity !== 'valid') {
518
- elem.isValid = false;
519
-
520
556
  // Use the validity message override if it is declared
521
557
  if (elem.ValidityMessageOverride) {
522
558
  elem.setCustomValidity = elem.ValidityMessageOverride;
523
559
  }
524
- } else {
525
- elem.isValid = true;
526
560
  }
527
561
 
528
562
  this.getErrorMessage(elem);
@@ -795,20 +829,20 @@ class AuroRadioGroup extends r {
795
829
  }
796
830
 
797
831
  /**
798
- * Method for a total reset of the radio element.
832
+ * Resets component to initial state.
799
833
  * @returns {void}
800
834
  */
801
835
  reset() {
802
- this.value = undefined;
836
+ // Sets first radio button to receive focus during keyboard navigation
803
837
  this.index = 0;
804
- this.optionSelected = undefined;
838
+
805
839
  const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
806
840
 
807
841
  buttons.forEach((button) => {
808
- button.checked = false;
842
+ button.reset();
809
843
  });
810
844
 
811
- this.validation.validate(this);
845
+ this.validation.reset(this);
812
846
  }
813
847
 
814
848
  /**
@@ -216,20 +216,20 @@ export class AuroRadioGroup extends LitElement {
216
216
  }
217
217
 
218
218
  /**
219
- * Method for a total reset of the radio element.
219
+ * Resets component to initial state.
220
220
  * @returns {void}
221
221
  */
222
222
  reset() {
223
- this.value = undefined;
223
+ // Sets first radio button to receive focus during keyboard navigation
224
224
  this.index = 0;
225
- this.optionSelected = undefined;
225
+
226
226
  const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
227
227
 
228
228
  buttons.forEach((button) => {
229
- button.checked = false;
229
+ button.reset();
230
230
  });
231
231
 
232
- this.validation.validate(this);
232
+ this.validation.reset(this);
233
233
  }
234
234
 
235
235
  /**
@@ -151,6 +151,15 @@ export class AuroRadio extends LitElement {
151
151
  }));
152
152
  }
153
153
 
154
+ /**
155
+ * Resets component to initial state.
156
+ * @returns {void}
157
+ */
158
+ reset() {
159
+ this.checked = false;
160
+ this.error = false;
161
+ }
162
+
154
163
  updated(changedProperties) {
155
164
  if (changedProperties.has('checked')) {
156
165
  this.dispatchEvent(new CustomEvent('resetRadio', {
@@ -137,13 +137,13 @@ More info and automated migrator: https://sass-lang.com/d/import
137
137
 
138
138
  
139
139
  ./src/index.js → dist...
140
- created dist in 672ms
140
+ created dist in 486ms
141
141
  
142
142
  ./demo/index.js → ./demo/...
143
- created ./demo/ in 583ms
143
+ created ./demo/ in 472ms
144
144
  
145
145
  ./demo/api.js → ./demo/...
146
- created ./demo/ in 453ms
146
+ created ./demo/ in 371ms
147
147
 
148
148
  > @auro-formkit/auro-select@3.3.0 build:docs
149
149
  > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component select
@@ -205,6 +205,7 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/select
205
205
  ⁕ FILE:src=./../apiExamples/label.html
206
206
  ⁕ FILE:src=./../apiExamples/labelWithPlaceholder.html
207
207
  ⁕ FILE:src=./../apiExamples/helpText.html
208
+ ⁕ FILE:src=./../apiExamples/resetState.html
208
209
  ⁕ FILE:src=./../apiExamples/valueExtraction.html
209
210
  ⁕ FILE:src=./../apiExamples/customErrorValidity.html
210
211
  ⁕ FILE:src=./../apiExamples/valueAlert.html
@@ -221,8 +222,10 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/select
221
222
  ⁕ CODE:src=./../apiExamples/label.html
222
223
  ⁕ CODE:src=./../apiExamples/labelWithPlaceholder.html
223
224
  ⁕ CODE:src=./../apiExamples/helpText.html
224
- ⁕ CODE:src=./../apiExamples/valueExtraction.js
225
+ ⁕ CODE:src=./../apiExamples/resetState.html
226
+ ⁕ CODE:src=./../apiExamples/resetState.js
225
227
  ⁕ CODE:src=./../apiExamples/valueExtraction.html
228
+ ⁕ CODE:src=./../apiExamples/valueExtraction.js
226
229
  ⁕ CODE:src=./../apiExamples/customErrorValidity.html
227
230
  ⁕ CODE:src=./../apiExamples/customErrorValidity.js
228
231
  ⁕ CODE:src=./alertValue.js
@@ -2,8 +2,9 @@ import { customErrorValidityExample } from "../apiExamples/customErrorValidity";
2
2
  import { setErrorExample } from "../apiExamples/errorApi";
3
3
  import { valueExample } from "../apiExamples/value";
4
4
  import { valueExtractionExample } from "../apiExamples/valueExtraction";
5
- import { inDialogExample } from '../apiExamples/inDialog.js';
6
- import { auroMenuLoadingExample } from "../apiExamples/loading.js";
5
+ import { inDialogExample } from '../apiExamples/inDialog';
6
+ import { resetStateExample } from "../apiExamples/resetState";
7
+ import { auroMenuLoadingExample } from "../apiExamples/loading";
7
8
 
8
9
  /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
9
10
  import { AuroSelect } from '../src/auro-select.js';
@@ -21,6 +22,7 @@ export function initExamples(initCount) {
21
22
  valueExample();
22
23
  valueExtractionExample();
23
24
  inDialogExample();
25
+ resetStateExample();
24
26
  auroMenuLoadingExample();
25
27
  } catch (err) {
26
28
  if (initCount <= 20) {
@@ -30,6 +30,12 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
30
30
  | [validity](#validity) | `validity` | `String` | "undefined" | Specifies the `validityState` this element is in. |
31
31
  | [value](#value) | `value` | `String` | | Value selected for the component. |
32
32
 
33
+ ## Methods
34
+
35
+ | Method | Type | Description |
36
+ |---------|------------|------------------------------------|
37
+ | [reset](#reset) | `(): void` | Resets component to initial state. |
38
+
33
39
  ## Events
34
40
 
35
41
  | Event | Type | Description |
@@ -497,6 +503,64 @@ Use the `helptext` slot to provide additional information back to your user abou
497
503
 
498
504
  ## Functional Examples
499
505
 
506
+ ### Reset State
507
+
508
+ Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
509
+
510
+ <div class="exampleWrapper">
511
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
512
+ <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
513
+ <auro-button id="resetStateBtn">Reset</auro-button>
514
+ <br/><br/>
515
+ <auro-select id="resetStateExample" required value="price">
516
+ <span slot="label">Name</span>
517
+ <auro-menu>
518
+ <auro-menuoption value="stops">Stops</auro-menuoption>
519
+ <auro-menuoption value="price">Price</auro-menuoption>
520
+ <auro-menuoption value="duration">Duration</auro-menuoption>
521
+ <auro-menuoption value="departure">Departure</auro-menuoption>
522
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
523
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
524
+ </auro-menu>
525
+ </auro-select>
526
+ <!-- AURO-GENERATED-CONTENT:END -->
527
+ </div>
528
+ <auro-accordion alignRight>
529
+ <span slot="trigger">See code</span>
530
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.html) -->
531
+ <!-- The below code snippet is automatically added from ./../apiExamples/resetState.html -->
532
+
533
+ ```html
534
+ <auro-button id="resetStateBtn">Reset</auro-button>
535
+ <br/><br/>
536
+ <auro-select id="resetStateExample" required value="price">
537
+ <span slot="label">Name</span>
538
+ <auro-menu>
539
+ <auro-menuoption value="stops">Stops</auro-menuoption>
540
+ <auro-menuoption value="price">Price</auro-menuoption>
541
+ <auro-menuoption value="duration">Duration</auro-menuoption>
542
+ <auro-menuoption value="departure">Departure</auro-menuoption>
543
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
544
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
545
+ </auro-menu>
546
+ </auro-select>
547
+ ```
548
+ <!-- AURO-GENERATED-CONTENT:END -->
549
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
550
+ <!-- The below code snippet is automatically added from ./../apiExamples/resetState.js -->
551
+
552
+ ```js
553
+ export function resetStateExample() {
554
+ const elem = document.querySelector('#resetStateExample');
555
+
556
+ document.querySelector('#resetStateBtn').addEventListener('click', () => {
557
+ elem.reset();
558
+ });
559
+ }
560
+ ```
561
+ <!-- AURO-GENERATED-CONTENT:END -->
562
+ </auro-accordion>
563
+
500
564
  ### Extract value
501
565
 
502
566
  The following example illustrates how a user may query the `element.value` or `element.optionSelected` for the current value or complete option object that is selected.
@@ -519,23 +583,6 @@ The following example illustrates how a user may query the `element.value` or `e
519
583
  </div>
520
584
  <auro-accordion alignRight>
521
585
  <span slot="trigger">See code</span>
522
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueExtraction.js) -->
523
- <!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.js -->
524
-
525
- ```js
526
- export function valueExtractionExample() {
527
- const valueExtractionExample = document.querySelector('#valueExtraction');
528
- const valueExtractionBtn = document.querySelector('#valueExtractionBtn');
529
-
530
- valueExtractionBtn.addEventListener('click', () => {
531
- console.warn('Value selected:', valueExtractionExample.value);
532
- console.warn('Option selected:', valueExtractionExample.optionSelected);
533
-
534
- alert(`Value selected: ${valueExtractionExample.value}`);
535
- })
536
- }
537
- ```
538
- <!-- AURO-GENERATED-CONTENT:END -->
539
586
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueExtraction.html) -->
540
587
  <!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.html -->
541
588
 
@@ -553,6 +600,23 @@ export function valueExtractionExample() {
553
600
  <auro-button id="valueExtractionBtn">Get current value</auro-button>
554
601
  ```
555
602
  <!-- AURO-GENERATED-CONTENT:END -->
603
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueExtraction.js) -->
604
+ <!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.js -->
605
+
606
+ ```js
607
+ export function valueExtractionExample() {
608
+ const valueExtractionExample = document.querySelector('#valueExtraction');
609
+ const valueExtractionBtn = document.querySelector('#valueExtractionBtn');
610
+
611
+ valueExtractionBtn.addEventListener('click', () => {
612
+ console.warn('Value selected:', valueExtractionExample.value);
613
+ console.warn('Option selected:', valueExtractionExample.optionSelected);
614
+
615
+ alert(`Value selected: ${valueExtractionExample.value}`);
616
+ })
617
+ }
618
+ ```
619
+ <!-- AURO-GENERATED-CONTENT:END -->
556
620
  </auro-accordion>
557
621
 
558
622
  ### Custom Validity with Error State
@@ -57,6 +57,14 @@ function inDialogExample() {
57
57
  });
58
58
  }
59
59
 
60
+ function resetStateExample() {
61
+ const elem = document.querySelector('#resetStateExample');
62
+
63
+ document.querySelector('#resetStateBtn').addEventListener('click', () => {
64
+ elem.reset();
65
+ });
66
+ }
67
+
60
68
  function auroMenuLoadingExample() {
61
69
  const select = document.querySelector("#loadingExample");
62
70
  const menu = document.querySelector("#loadingExampleSelectMenu");
@@ -200,6 +208,30 @@ class AuroFormValidation {
200
208
  this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
201
209
  }
202
210
 
211
+ /**
212
+ * Resets the element to its initial state.
213
+ * @private
214
+ * @param {object} elem - HTML element to reset.
215
+ * @returns {void}
216
+ */
217
+ reset(elem) {
218
+ elem.validity = undefined;
219
+ elem.value = undefined;
220
+
221
+ // Resets the second value of the datepicker in range state
222
+ if (elem.valueEnd) {
223
+ elem.valueEnd = undefined;
224
+ }
225
+
226
+ // Resets selected option of element
227
+ if (elem.optionSelected) {
228
+ elem.optionSelected = undefined;
229
+ }
230
+
231
+ // Runs validation to handle error attribute
232
+ this.validate(elem);
233
+ }
234
+
203
235
  /**
204
236
  * Determines the validity state of the element based on the common attribute restrictions (pattern).
205
237
  * @private
@@ -214,10 +246,15 @@ class AuroFormValidation {
214
246
  elem.validity = 'badInput';
215
247
  elem.setCustomValidity = elem.setCustomValidityBadInput || '';
216
248
  }
217
- } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
249
+ }
250
+
251
+ // Length > 0 is required to prevent the error message from showing when the input is empty
252
+ if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
218
253
  elem.validity = 'tooShort';
219
254
  elem.setCustomValidity = elem.setCustomValidityTooShort || '';
220
- } else if (elem.value && elem.value.length > elem.maxLength) {
255
+ }
256
+
257
+ if (elem.value?.length > elem.maxLength) {
221
258
  elem.validity = 'tooLong';
222
259
  elem.setCustomValidity = elem.setCustomValidityTooLong || '';
223
260
  }
@@ -243,7 +280,7 @@ class AuroFormValidation {
243
280
  elem.validity = 'tooShort';
244
281
  elem.setCustomValidity = elem.setCustomValidityForType || '';
245
282
  }
246
- } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
283
+ } else if (elem.type === 'number') {
247
284
  if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
248
285
  elem.validity = 'rangeOverflow';
249
286
  elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -348,14 +385,10 @@ class AuroFormValidation {
348
385
 
349
386
  if (validationShouldRun || elem.hasAttribute('error')) {
350
387
  if (elem.validity && elem.validity !== 'valid') {
351
- elem.isValid = false;
352
-
353
388
  // Use the validity message override if it is declared
354
389
  if (elem.ValidityMessageOverride) {
355
390
  elem.setCustomValidity = elem.ValidityMessageOverride;
356
391
  }
357
- } else {
358
- elem.isValid = true;
359
392
  }
360
393
 
361
394
  this.getErrorMessage(elem);
@@ -3409,8 +3442,7 @@ class AuroSelect extends r$4 {
3409
3442
  type: Object
3410
3443
  },
3411
3444
  value: {
3412
- type: String,
3413
- reflect: true
3445
+ type: String
3414
3446
  },
3415
3447
  noValidate: {
3416
3448
  type: Boolean,
@@ -3771,6 +3803,14 @@ class AuroSelect extends r$4 {
3771
3803
  }
3772
3804
  }
3773
3805
 
3806
+ /**
3807
+ * Resets component to initial state.
3808
+ * @returns {void}
3809
+ */
3810
+ reset() {
3811
+ this.validation.reset(this);
3812
+ }
3813
+
3774
3814
  /**
3775
3815
  * Handles reading of auro-select by screen readers.
3776
3816
  * @private
@@ -4873,8 +4913,7 @@ class AuroMenuOption extends r$4 {
4873
4913
  reflect: true
4874
4914
  },
4875
4915
  value: {
4876
- type: String,
4877
- reflect: true
4916
+ type: String
4878
4917
  },
4879
4918
  tabIndex: {
4880
4919
  type: Number,
@@ -4966,6 +5005,7 @@ function initExamples(initCount) {
4966
5005
  valueExample();
4967
5006
  valueExtractionExample();
4968
5007
  inDialogExample();
5008
+ resetStateExample();
4969
5009
  auroMenuLoadingExample();
4970
5010
  } catch (err) {
4971
5011
  if (initCount <= 20) {
@@ -110,6 +110,30 @@ class AuroFormValidation {
110
110
  this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
111
111
  }
112
112
 
113
+ /**
114
+ * Resets the element to its initial state.
115
+ * @private
116
+ * @param {object} elem - HTML element to reset.
117
+ * @returns {void}
118
+ */
119
+ reset(elem) {
120
+ elem.validity = undefined;
121
+ elem.value = undefined;
122
+
123
+ // Resets the second value of the datepicker in range state
124
+ if (elem.valueEnd) {
125
+ elem.valueEnd = undefined;
126
+ }
127
+
128
+ // Resets selected option of element
129
+ if (elem.optionSelected) {
130
+ elem.optionSelected = undefined;
131
+ }
132
+
133
+ // Runs validation to handle error attribute
134
+ this.validate(elem);
135
+ }
136
+
113
137
  /**
114
138
  * Determines the validity state of the element based on the common attribute restrictions (pattern).
115
139
  * @private
@@ -124,10 +148,15 @@ class AuroFormValidation {
124
148
  elem.validity = 'badInput';
125
149
  elem.setCustomValidity = elem.setCustomValidityBadInput || '';
126
150
  }
127
- } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
151
+ }
152
+
153
+ // Length > 0 is required to prevent the error message from showing when the input is empty
154
+ if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
128
155
  elem.validity = 'tooShort';
129
156
  elem.setCustomValidity = elem.setCustomValidityTooShort || '';
130
- } else if (elem.value && elem.value.length > elem.maxLength) {
157
+ }
158
+
159
+ if (elem.value?.length > elem.maxLength) {
131
160
  elem.validity = 'tooLong';
132
161
  elem.setCustomValidity = elem.setCustomValidityTooLong || '';
133
162
  }
@@ -153,7 +182,7 @@ class AuroFormValidation {
153
182
  elem.validity = 'tooShort';
154
183
  elem.setCustomValidity = elem.setCustomValidityForType || '';
155
184
  }
156
- } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
185
+ } else if (elem.type === 'number') {
157
186
  if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
158
187
  elem.validity = 'rangeOverflow';
159
188
  elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -258,14 +287,10 @@ class AuroFormValidation {
258
287
 
259
288
  if (validationShouldRun || elem.hasAttribute('error')) {
260
289
  if (elem.validity && elem.validity !== 'valid') {
261
- elem.isValid = false;
262
-
263
290
  // Use the validity message override if it is declared
264
291
  if (elem.ValidityMessageOverride) {
265
292
  elem.setCustomValidity = elem.ValidityMessageOverride;
266
293
  }
267
- } else {
268
- elem.isValid = true;
269
294
  }
270
295
 
271
296
  this.getErrorMessage(elem);
@@ -3319,8 +3344,7 @@ class AuroSelect extends r$4 {
3319
3344
  type: Object
3320
3345
  },
3321
3346
  value: {
3322
- type: String,
3323
- reflect: true
3347
+ type: String
3324
3348
  },
3325
3349
  noValidate: {
3326
3350
  type: Boolean,
@@ -3681,6 +3705,14 @@ class AuroSelect extends r$4 {
3681
3705
  }
3682
3706
  }
3683
3707
 
3708
+ /**
3709
+ * Resets component to initial state.
3710
+ * @returns {void}
3711
+ */
3712
+ reset() {
3713
+ this.validation.reset(this);
3714
+ }
3715
+
3684
3716
  /**
3685
3717
  * Handles reading of auro-select by screen readers.
3686
3718
  * @private
@@ -4783,8 +4815,7 @@ class AuroMenuOption extends r$4 {
4783
4815
  reflect: true
4784
4816
  },
4785
4817
  value: {
4786
- type: String,
4787
- reflect: true
4818
+ type: String
4788
4819
  },
4789
4820
  tabIndex: {
4790
4821
  type: Number,
@@ -28,7 +28,6 @@ export class AuroSelect extends LitElement {
28
28
  };
29
29
  value: {
30
30
  type: StringConstructor;
31
- reflect: boolean;
32
31
  };
33
32
  noValidate: {
34
33
  type: BooleanConstructor;
@@ -181,6 +180,11 @@ export class AuroSelect extends LitElement {
181
180
  private generateOptionsArray;
182
181
  firstUpdated(): void;
183
182
  updated(changedProperties: any): void;
183
+ /**
184
+ * Resets component to initial state.
185
+ * @returns {void}
186
+ */
187
+ reset(): void;
184
188
  /**
185
189
  * Handles reading of auro-select by screen readers.
186
190
  * @private
@@ -1 +1 @@
1
- {"version":3,"file":"auro-select.d.ts","sourceRoot":"","sources":["../src/auro-select.js"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH;IAyDE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAiDI;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IAED,+CAMC;IAmBD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IArJC,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;IA2E1B;;;;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;;;;OAIG;IACH,mBAkCC;IAMD,4CAgDC;CACF;2BAjjB0B,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,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"}