@aurodesignsystem/auro-formkit 3.3.0-beta.2 → 3.4.0

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

@@ -173,6 +173,7 @@ class AuroRadio extends i$2 {
     this.error = false;
     this.onDark = false;
     this.tabIndex = -1;
+    this.touched = false;
 
     /**
      * @private
@@ -218,6 +219,16 @@ class AuroRadio extends i$2 {
       tabIndex: {
         type: Number,
         reflect: true
+      },
+
+      /**
+       * Whether or not the radio button has been touched by the user.
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -269,6 +280,7 @@ class AuroRadio extends i$2 {
    * @returns {void}
    */
   handleFocus(event) {
+    this.touched = true;
     this.dispatchEvent(new CustomEvent('focusSelected', {
       bubbles: true,
       composed: true,
@@ -295,6 +307,7 @@ class AuroRadio extends i$2 {
    * @returns {void}
    */
   reset() {
+    this.touched = false;
     this.checked = false;
     this.error = false;
   }
@@ -832,6 +845,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -969,7 +983,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -1039,11 +1053,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -1064,7 +1084,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -1075,7 +1095,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -1154,7 +1174,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -1443,6 +1463,7 @@ class AuroRadioGroup extends i$2 {
     this.value = undefined;
     this.optionSelected = undefined;
     this.onDark = false;
+    this.touched = false;
 
     /**
      * @private
@@ -1524,6 +1545,18 @@ class AuroRadioGroup extends i$2 {
       },
       optionSelected: {
         type: Object
+      },
+
+      /**
+       * Indicates whether the radio group is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -1579,10 +1612,7 @@ class AuroRadioGroup extends i$2 {
    * @returns {void}
    */
   handleRadioBlur() {
-    if (this.value === undefined) {
-      this.value = '';
-    }
-
+    this.touched = true;
     this.validation.validate(this);
   }
 

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

@@ -148,6 +148,7 @@ class AuroRadio extends i$2 {
     this.error = false;
     this.onDark = false;
     this.tabIndex = -1;
+    this.touched = false;
 
     /**
      * @private
@@ -193,6 +194,16 @@ class AuroRadio extends i$2 {
       tabIndex: {
         type: Number,
         reflect: true
+      },
+
+      /**
+       * Whether or not the radio button has been touched by the user.
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -244,6 +255,7 @@ class AuroRadio extends i$2 {
    * @returns {void}
    */
   handleFocus(event) {
+    this.touched = true;
     this.dispatchEvent(new CustomEvent('focusSelected', {
       bubbles: true,
       composed: true,
@@ -270,6 +282,7 @@ class AuroRadio extends i$2 {
    * @returns {void}
    */
   reset() {
+    this.touched = false;
     this.checked = false;
     this.error = false;
   }
@@ -807,6 +820,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -944,7 +958,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -1014,11 +1028,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -1039,7 +1059,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -1050,7 +1070,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -1129,7 +1149,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -1418,6 +1438,7 @@ class AuroRadioGroup extends i$2 {
     this.value = undefined;
     this.optionSelected = undefined;
     this.onDark = false;
+    this.touched = false;
 
     /**
      * @private
@@ -1499,6 +1520,18 @@ class AuroRadioGroup extends i$2 {
       },
       optionSelected: {
         type: Object
+      },
+
+      /**
+       * Indicates whether the radio group is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -1554,10 +1587,7 @@ class AuroRadioGroup extends i$2 {
    * @returns {void}
    */
   handleRadioBlur() {
-    if (this.value === undefined) {
-      this.value = '';
-    }
-
+    this.touched = true;
     this.validation.validate(this);
   }
 

package/components/radio/demo/readme.md

@@ -100,7 +100,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.8/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -60,6 +60,13 @@ export class AuroRadioGroup extends LitElement {
         optionSelected: {
             type: ObjectConstructor;
         };
+        /**
+         * Indicates whether the radio group is in a dirty state (has been interacted with).
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        touched: boolean;
     };
     /**
      * This will register this element with the browser.
@@ -77,6 +84,7 @@ export class AuroRadioGroup extends LitElement {
     value: any;
     optionSelected: EventTarget;
     onDark: boolean;
+    touched: boolean;
     /**
      * @private
      */

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

@@ -49,6 +49,15 @@ export class AuroRadio extends LitElement {
             type: NumberConstructor;
             reflect: boolean;
         };
+        /**
+         * Whether or not the radio button has been touched by the user.
+         * @private
+         */
+        touched: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
     };
     /**
      * This will register this element with the browser.
@@ -64,6 +73,7 @@ export class AuroRadio extends LitElement {
     required: boolean;
     error: boolean;
     onDark: boolean;
+    touched: boolean;
     /**
      * @private
      */

package/components/radio/dist/index.js

@@ -108,6 +108,7 @@ class AuroRadio extends LitElement {
     this.error = false;
     this.onDark = false;
     this.tabIndex = -1;
+    this.touched = false;
 
     /**
      * @private
@@ -153,6 +154,16 @@ class AuroRadio extends LitElement {
       tabIndex: {
         type: Number,
         reflect: true
+      },
+
+      /**
+       * Whether or not the radio button has been touched by the user.
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -204,6 +215,7 @@ class AuroRadio extends LitElement {
    * @returns {void}
    */
   handleFocus(event) {
+    this.touched = true;
     this.dispatchEvent(new CustomEvent('focusSelected', {
       bubbles: true,
       composed: true,
@@ -230,6 +242,7 @@ class AuroRadio extends LitElement {
    * @returns {void}
    */
   reset() {
+    this.touched = false;
     this.checked = false;
     this.error = false;
   }
@@ -760,6 +773,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -897,7 +911,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -967,11 +981,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -992,7 +1012,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -1003,7 +1023,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -1082,7 +1102,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -1371,6 +1391,7 @@ class AuroRadioGroup extends LitElement {
     this.value = undefined;
     this.optionSelected = undefined;
     this.onDark = false;
+    this.touched = false;
 
     /**
      * @private
@@ -1452,6 +1473,18 @@ class AuroRadioGroup extends LitElement {
       },
       optionSelected: {
         type: Object
+      },
+
+      /**
+       * Indicates whether the radio group is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -1507,10 +1540,7 @@ class AuroRadioGroup extends LitElement {
    * @returns {void}
    */
   handleRadioBlur() {
-    if (this.value === undefined) {
-      this.value = '';
-    }
-
+    this.touched = true;
     this.validation.validate(this);
   }
 

package/components/radio/dist/registered.js

@@ -108,6 +108,7 @@ class AuroRadio extends LitElement {
     this.error = false;
     this.onDark = false;
     this.tabIndex = -1;
+    this.touched = false;
 
     /**
      * @private
@@ -153,6 +154,16 @@ class AuroRadio extends LitElement {
       tabIndex: {
         type: Number,
         reflect: true
+      },
+
+      /**
+       * Whether or not the radio button has been touched by the user.
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -204,6 +215,7 @@ class AuroRadio extends LitElement {
    * @returns {void}
    */
   handleFocus(event) {
+    this.touched = true;
     this.dispatchEvent(new CustomEvent('focusSelected', {
       bubbles: true,
       composed: true,
@@ -230,6 +242,7 @@ class AuroRadio extends LitElement {
    * @returns {void}
    */
   reset() {
+    this.touched = false;
     this.checked = false;
     this.error = false;
   }
@@ -760,6 +773,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -897,7 +911,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -967,11 +981,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -992,7 +1012,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -1003,7 +1023,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -1082,7 +1102,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -1371,6 +1391,7 @@ class AuroRadioGroup extends LitElement {
     this.value = undefined;
     this.optionSelected = undefined;
     this.onDark = false;
+    this.touched = false;
 
     /**
      * @private
@@ -1452,6 +1473,18 @@ class AuroRadioGroup extends LitElement {
       },
       optionSelected: {
         type: Object
+      },
+
+      /**
+       * Indicates whether the radio group is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -1507,10 +1540,7 @@ class AuroRadioGroup extends LitElement {
    * @returns {void}
    */
   handleRadioBlur() {
-    if (this.value === undefined) {
-      this.value = '';
-    }
-
+    this.touched = true;
     this.validation.validate(this);
   }
 

package/components/select/README.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.8/auro-select/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->