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

package/components/radio/demo/api.min.js

@@ -15,6 +15,14 @@ function dynamicExample() {
   }
 }
 
+function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -276,6 +284,15 @@ class AuroRadio extends r {
     }));
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('checked')) {
       this.dispatchEvent(new CustomEvent('resetRadio', {
@@ -384,6 +401,30 @@ class AuroFormValidation {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
+  /**
+   * Resets the element to its initial state.
+   * @private
+   * @param {object} elem - HTML element to reset.
+   * @returns {void}
+   */
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+
+    // Resets the second value of the datepicker in range state
+    if (elem.valueEnd) {
+      elem.valueEnd = undefined;
+    }
+
+    // Resets selected option of element
+    if (elem.optionSelected) {
+      elem.optionSelected = undefined;
+    }
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+
   /**
    * Determines the validity state of the element based on the common attribute restrictions (pattern).
    * @private
@@ -398,10 +439,15 @@ class AuroFormValidation {
         elem.validity = 'badInput';
         elem.setCustomValidity = elem.setCustomValidityBadInput || '';
       }
-    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
+    }
+
+    // Length > 0 is required to prevent the error message from showing when the input is empty
+    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
       elem.validity = 'tooShort';
       elem.setCustomValidity = elem.setCustomValidityTooShort || '';
-    } else if (elem.value && elem.value.length > elem.maxLength) {
+    }
+    
+    if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
       elem.setCustomValidity = elem.setCustomValidityTooLong || '';
     }
@@ -427,7 +473,7 @@ class AuroFormValidation {
           elem.validity = 'tooShort';
           elem.setCustomValidity = elem.setCustomValidityForType || '';
         }
-      } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
+      } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
           elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -532,14 +578,10 @@ class AuroFormValidation {
 
     if (validationShouldRun || elem.hasAttribute('error')) {
       if (elem.validity && elem.validity !== 'valid') {
-        elem.isValid = false;
-
         // Use the validity message override if it is declared
         if (elem.ValidityMessageOverride) {
           elem.setCustomValidity = elem.ValidityMessageOverride;
         }
-      } else {
-        elem.isValid = true;
       }
 
       this.getErrorMessage(elem);
@@ -812,20 +854,20 @@ class AuroRadioGroup extends r {
   }
 
   /**
-   * Method for a total reset of the radio element.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
-    this.value = undefined;
+    // Sets first radio button to receive focus during keyboard navigation
     this.index = 0;
-    this.optionSelected = undefined;
+
     const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
 
     buttons.forEach((button) => {
-      button.checked = false;
+      button.reset();
     });
 
-    this.validation.validate(this);
+    this.validation.reset(this);
   }
 
   /**
@@ -1037,6 +1079,7 @@ function initExamples(initCount) {
 
   try {
     dynamicExample();
+    resetStateExample();
   } catch (error) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/radio/demo/index.min.js

@@ -259,6 +259,15 @@ class AuroRadio extends r {
     }));
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('checked')) {
       this.dispatchEvent(new CustomEvent('resetRadio', {
@@ -367,6 +376,30 @@ class AuroFormValidation {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
+  /**
+   * Resets the element to its initial state.
+   * @private
+   * @param {object} elem - HTML element to reset.
+   * @returns {void}
+   */
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+
+    // Resets the second value of the datepicker in range state
+    if (elem.valueEnd) {
+      elem.valueEnd = undefined;
+    }
+
+    // Resets selected option of element
+    if (elem.optionSelected) {
+      elem.optionSelected = undefined;
+    }
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+
   /**
    * Determines the validity state of the element based on the common attribute restrictions (pattern).
    * @private
@@ -381,10 +414,15 @@ class AuroFormValidation {
         elem.validity = 'badInput';
         elem.setCustomValidity = elem.setCustomValidityBadInput || '';
       }
-    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
+    }
+
+    // Length > 0 is required to prevent the error message from showing when the input is empty
+    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
       elem.validity = 'tooShort';
       elem.setCustomValidity = elem.setCustomValidityTooShort || '';
-    } else if (elem.value && elem.value.length > elem.maxLength) {
+    }
+    
+    if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
       elem.setCustomValidity = elem.setCustomValidityTooLong || '';
     }
@@ -410,7 +448,7 @@ class AuroFormValidation {
           elem.validity = 'tooShort';
           elem.setCustomValidity = elem.setCustomValidityForType || '';
         }
-      } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
+      } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
           elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -515,14 +553,10 @@ class AuroFormValidation {
 
     if (validationShouldRun || elem.hasAttribute('error')) {
       if (elem.validity && elem.validity !== 'valid') {
-        elem.isValid = false;
-
         // Use the validity message override if it is declared
         if (elem.ValidityMessageOverride) {
           elem.setCustomValidity = elem.ValidityMessageOverride;
         }
-      } else {
-        elem.isValid = true;
       }
 
       this.getErrorMessage(elem);
@@ -795,20 +829,20 @@ class AuroRadioGroup extends r {
   }
 
   /**
-   * Method for a total reset of the radio element.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
-    this.value = undefined;
+    // Sets first radio button to receive focus during keyboard navigation
     this.index = 0;
-    this.optionSelected = undefined;
+
     const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
 
     buttons.forEach((button) => {
-      button.checked = false;
+      button.reset();
     });
 
-    this.validation.validate(this);
+    this.validation.reset(this);
   }
 
   /**

package/components/radio/dist/auro-radio-group.d.ts

@@ -107,7 +107,7 @@ export class AuroRadioGroup extends LitElement {
      */
     updated(changedProperties: Map<string, any>): void;
     /**
-     * Method for a total reset of the radio element.
+     * Resets component to initial state.
      * @returns {void}
      */
     reset(): void;

package/components/radio/dist/auro-radio.d.ts

@@ -90,6 +90,11 @@ export class AuroRadio extends LitElement {
      * @returns {void}
      */
     private handleBlur;
+    /**
+     * Resets component to initial state.
+     * @returns {void}
+     */
+    reset(): void;
     updated(changedProperties: any): void;
     /**
      * Method for handling content when it is invalid accessibility wise.

package/components/radio/dist/auro-radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auro-radio.d.ts","sourceRoot":"","sources":["../src/auro-radio.js"],"names":[],"mappings":"AAmBA;;;;;;;;;;GAUG;AAGH;IAeE,+CAMC;IAGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA5DC,iBAAoB;IACpB,kBAAqB;IACrB,kBAAqB;IACrB,eAAkB;IAGlB;;OAEG;IACH,qBAAiD;IAqDnD;;;;;OAKG;IACH,qBAKC;IAED;;;;;OAKG;IACH,oBAOC;IAED;;;;;OAKG;IACH,oBAMC;IAED;;;;;OAKG;IACH,mBAMC;IAED,sCAcC;IAED;;;;;OAKG;IACH,gBAMC;IAED;;;;;OAKG;IACH,mBAMC;IAED,qBAWC;IALC,wBAAmD;IAQrD,+CAkCC;CACF;2BAjPgC,KAAK"}
+{"version":3,"file":"auro-radio.d.ts","sourceRoot":"","sources":["../src/auro-radio.js"],"names":[],"mappings":"AAmBA;;;;;;;;;;GAUG;AAGH;IAeE,+CAMC;IAGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA5DC,iBAAoB;IACpB,kBAAqB;IACrB,kBAAqB;IACrB,eAAkB;IAGlB;;OAEG;IACH,qBAAiD;IAqDnD;;;;;OAKG;IACH,qBAKC;IAED;;;;;OAKG;IACH,oBAOC;IAED;;;;;OAKG;IACH,oBAMC;IAED;;;;;OAKG;IACH,mBAMC;IAED;;;OAGG;IACH,SAFa,IAAI,CAKhB;IAED,sCAcC;IAED;;;;;OAKG;IACH,gBAMC;IAED;;;;;OAKG;IACH,mBAMC;IAED,qBAWC;IALC,wBAAmD;IAQrD,+CAkCC;CACF;2BA1PgC,KAAK"}

package/components/radio/dist/index.js

@@ -259,6 +259,15 @@ class AuroRadio extends r {
     }));
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('checked')) {
       this.dispatchEvent(new CustomEvent('resetRadio', {
@@ -367,6 +376,30 @@ class AuroFormValidation {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
+  /**
+   * Resets the element to its initial state.
+   * @private
+   * @param {object} elem - HTML element to reset.
+   * @returns {void}
+   */
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+
+    // Resets the second value of the datepicker in range state
+    if (elem.valueEnd) {
+      elem.valueEnd = undefined;
+    }
+
+    // Resets selected option of element
+    if (elem.optionSelected) {
+      elem.optionSelected = undefined;
+    }
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+
   /**
    * Determines the validity state of the element based on the common attribute restrictions (pattern).
    * @private
@@ -381,10 +414,15 @@ class AuroFormValidation {
         elem.validity = 'badInput';
         elem.setCustomValidity = elem.setCustomValidityBadInput || '';
       }
-    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
+    }
+
+    // Length > 0 is required to prevent the error message from showing when the input is empty
+    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
       elem.validity = 'tooShort';
       elem.setCustomValidity = elem.setCustomValidityTooShort || '';
-    } else if (elem.value && elem.value.length > elem.maxLength) {
+    }
+    
+    if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
       elem.setCustomValidity = elem.setCustomValidityTooLong || '';
     }
@@ -410,7 +448,7 @@ class AuroFormValidation {
           elem.validity = 'tooShort';
           elem.setCustomValidity = elem.setCustomValidityForType || '';
         }
-      } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
+      } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
           elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -515,14 +553,10 @@ class AuroFormValidation {
 
     if (validationShouldRun || elem.hasAttribute('error')) {
       if (elem.validity && elem.validity !== 'valid') {
-        elem.isValid = false;
-
         // Use the validity message override if it is declared
         if (elem.ValidityMessageOverride) {
           elem.setCustomValidity = elem.ValidityMessageOverride;
         }
-      } else {
-        elem.isValid = true;
       }
 
       this.getErrorMessage(elem);
@@ -795,20 +829,20 @@ class AuroRadioGroup extends r {
   }
 
   /**
-   * Method for a total reset of the radio element.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
-    this.value = undefined;
+    // Sets first radio button to receive focus during keyboard navigation
     this.index = 0;
-    this.optionSelected = undefined;
+
     const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
 
     buttons.forEach((button) => {
-      button.checked = false;
+      button.reset();
     });
 
-    this.validation.validate(this);
+    this.validation.reset(this);
   }
 
   /**

package/components/radio/src/auro-radio-group.js

@@ -216,20 +216,20 @@ export class AuroRadioGroup extends LitElement {
   }
 
   /**
-   * Method for a total reset of the radio element.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
-    this.value = undefined;
+    // Sets first radio button to receive focus during keyboard navigation
     this.index = 0;
-    this.optionSelected = undefined;
+
     const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
 
     buttons.forEach((button) => {
-      button.checked = false;
+      button.reset();
     });
 
-    this.validation.validate(this);
+    this.validation.reset(this);
   }
 
   /**

package/components/radio/src/auro-radio.js

@@ -151,6 +151,15 @@ export class AuroRadio extends LitElement {
     }));
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('checked')) {
       this.dispatchEvent(new CustomEvent('resetRadio', {

package/components/select/.turbo/turbo-build.log

@@ -137,13 +137,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 672ms
+created dist in 548ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 583ms
+created ./demo/ in 575ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 453ms
+created ./demo/ in 393ms
 
 > @auro-formkit/auro-select@3.3.0 build:docs
 > 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
   ⁕ FILE:src=./../apiExamples/label.html 
   ⁕ FILE:src=./../apiExamples/labelWithPlaceholder.html 
   ⁕ FILE:src=./../apiExamples/helpText.html 
+  ⁕ FILE:src=./../apiExamples/resetState.html 
   ⁕ FILE:src=./../apiExamples/valueExtraction.html 
   ⁕ FILE:src=./../apiExamples/customErrorValidity.html 
   ⁕ FILE:src=./../apiExamples/valueAlert.html 
@@ -221,8 +222,10 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/select
   ⁕ CODE:src=./../apiExamples/label.html 
   ⁕ CODE:src=./../apiExamples/labelWithPlaceholder.html 
   ⁕ CODE:src=./../apiExamples/helpText.html 
-  ⁕ CODE:src=./../apiExamples/valueExtraction.js 
+  ⁕ CODE:src=./../apiExamples/resetState.html 
+  ⁕ CODE:src=./../apiExamples/resetState.js 
   ⁕ CODE:src=./../apiExamples/valueExtraction.html 
+  ⁕ CODE:src=./../apiExamples/valueExtraction.js 
   ⁕ CODE:src=./../apiExamples/customErrorValidity.html 
   ⁕ CODE:src=./../apiExamples/customErrorValidity.js 
   ⁕ CODE:src=./alertValue.js 

package/components/select/demo/api.js

@@ -2,8 +2,9 @@ import { customErrorValidityExample } from "../apiExamples/customErrorValidity";
 import { setErrorExample } from "../apiExamples/errorApi";
 import { valueExample } from "../apiExamples/value";
 import { valueExtractionExample } from "../apiExamples/valueExtraction";
-import { inDialogExample } from '../apiExamples/inDialog.js';
-import { auroMenuLoadingExample } from "../apiExamples/loading.js";
+import { inDialogExample } from '../apiExamples/inDialog';
+import { resetStateExample } from "../apiExamples/resetState";
+import { auroMenuLoadingExample } from "../apiExamples/loading";
 
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 import { AuroSelect } from '../src/auro-select.js';
@@ -21,6 +22,7 @@ export function initExamples(initCount) {
     valueExample();
     valueExtractionExample();
     inDialogExample();
+    resetStateExample();
     auroMenuLoadingExample();
   } catch (err) {
     if (initCount <= 20) {

package/components/select/demo/api.md

@@ -30,6 +30,12 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [validity](#validity)                      | `validity`                      | `String`  | "undefined"            | Specifies the `validityState` this element is in. |
 | [value](#value)                         | `value`                         | `String`  |                        | Value selected for the component.                |
 
+## Methods
+
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| [reset](#reset) | `(): void` | Resets component to initial state. |
+
 ## Events
 
 | Event                       | Type               | Description                                      |
@@ -497,6 +503,64 @@ Use the `helptext` slot to provide additional information back to your user abou
 
 ## Functional Examples
 
+### Reset State
+
+Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
+  <auro-button id="resetStateBtn">Reset</auro-button>
+  <br/><br/>
+  <auro-select id="resetStateExample" required value="price">
+    <span slot="label">Name</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.html -->
+
+```html
+<auro-button id="resetStateBtn">Reset</auro-button>
+<br/><br/>
+<auro-select id="resetStateExample" required value="price">
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.js -->
+
+```js
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Extract value
 
 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
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueExtraction.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.js -->
-
-```js
-export function valueExtractionExample() {
-  const valueExtractionExample = document.querySelector('#valueExtraction');
-  const valueExtractionBtn = document.querySelector('#valueExtractionBtn');
-
-  valueExtractionBtn.addEventListener('click', () => {
-    console.warn('Value selected:', valueExtractionExample.value);
-    console.warn('Option selected:', valueExtractionExample.optionSelected);
-
-    alert(`Value selected: ${valueExtractionExample.value}`);
-  })
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueExtraction.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.html -->
 
@@ -553,6 +600,23 @@ export function valueExtractionExample() {
 <auro-button id="valueExtractionBtn">Get current value</auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueExtraction.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.js -->
+
+```js
+export function valueExtractionExample() {
+  const valueExtractionExample = document.querySelector('#valueExtraction');
+  const valueExtractionBtn = document.querySelector('#valueExtractionBtn');
+
+  valueExtractionBtn.addEventListener('click', () => {
+    console.warn('Value selected:', valueExtractionExample.value);
+    console.warn('Option selected:', valueExtractionExample.optionSelected);
+
+    alert(`Value selected: ${valueExtractionExample.value}`);
+  })
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Custom Validity with Error State