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

package/components/select/dist/index.js

@@ -145,20 +145,20 @@ class AuroFormValidation {
       const pattern = new RegExp(`^${elem.pattern}$`, 'u');
 
       if (!pattern.test(elem.value)) {
-        elem.validity = 'badInput';
-        elem.setCustomValidity = elem.setCustomValidityBadInput || '';
+        elem.validity = 'patternMismatch';
+        elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
       }
     }
 
     // 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 || '';
+      elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
     }
     
     if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
-      elem.setCustomValidity = elem.setCustomValidityTooLong || '';
+      elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
     }
   }
 
@@ -174,33 +174,32 @@ class AuroFormValidation {
         const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
 
         if (!elem.value.match(emailRegex)) {
-          elem.validity = 'badInput';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.validity = 'patternMismatch';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         }
       } else if (elem.type === 'credit-card') {
         if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
           elem.validity = 'tooShort';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         }
       } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
-          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+          elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
         }
 
-        if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
+        if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
           elem.validity = 'rangeUnderflow';
-          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+          elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
         }
-
       } else if (elem.type === 'month-day-year' ||
                  elem.type === 'month-year' ||
                  elem.type === 'month-fullYear' ||
                  elem.type === 'year-month-day'
       ) {
-        if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) {
+        if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
           elem.validity = 'tooShort';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         } else {
           const valueDate = new Date(elem.value);
 
@@ -210,7 +209,7 @@ class AuroFormValidation {
 
             if (valueDate > maxDate) {
               elem.validity = 'rangeOverflow';
-              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+              elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
             }
           }
 
@@ -220,7 +219,7 @@ class AuroFormValidation {
 
             if (valueDate < minDate) {
               elem.validity = 'rangeUnderflow';
-              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+              elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
             }
           }
         }
@@ -243,10 +242,10 @@ class AuroFormValidation {
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
-      elem.setCustomValidity = elem.error;
+      elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
     } else if (validationShouldRun) {
       elem.validity = 'valid';
-      elem.setCustomValidity = '';
+      elem.errorMessage = '';
 
       /**
        * Only validate once we interact with the datepicker
@@ -258,7 +257,7 @@ class AuroFormValidation {
       let hasValue = elem.value && elem.value.length > 0;
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements && this.auroInputElements.length === 2) {
+      if (this.auroInputElements?.length === 2) {
         if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
           hasValue = false;
         }
@@ -266,31 +265,27 @@ class AuroFormValidation {
 
       if (!hasValue && elem.required) {
         elem.validity = 'valueMissing';
-        elem.setCustomValidity = elem.setCustomValidityValueMissing || '';
+        elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
         this.validateAttributes(elem);
       }
     }
 
-    if (this.auroInputElements && this.auroInputElements.length > 0) {
+    if (this.auroInputElements?.length > 0) {
       elem.validity = this.auroInputElements[0].validity;
-      elem.setCustomValidity = this.auroInputElements[0].setCustomValidity;
+      elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid') {
-        if (this.auroInputElements.length > 1) {
-          elem.validity = this.auroInputElements[1].validity;
-          elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
-        }
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+        elem.validity = this.auroInputElements[1].validity;
+        elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
     }
 
     if (validationShouldRun || elem.hasAttribute('error')) {
-      if (elem.validity && elem.validity !== 'valid') {
-        // Use the validity message override if it is declared
-        if (elem.ValidityMessageOverride) {
-          elem.setCustomValidity = elem.ValidityMessageOverride;
-        }
+      // Use the validity message override if it is declared
+      if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
+        elem.errorMessage = elem.ValidityMessageOverride;
       }
 
       this.getErrorMessage(elem);
@@ -336,18 +331,18 @@ class AuroFormValidation {
     if (elem.validity !== 'valid') {
       if (elem.setCustomValidity) {
         elem.errorMessage = elem.setCustomValidity;
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
         const input = elem.renderRoot.querySelector('input');
 
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
-      } else if (this.inputElements && this.inputElements.length > 0) {
+      } else if (this.inputElements?.length > 0  && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];
 
         if (firstInput.validationMessage.length > 0) {
           elem.errorMessage = firstInput.validationMessage;
-        } else if (this.inputElements.length === 2) {
+        } else if (this.inputElements?.length === 2) {
           const secondInput = this.inputElements[1];
 
           if (secondInput.validationMessage.length > 0) {
@@ -3262,7 +3257,7 @@ var tokensCss = i$a`:host{--ds-auro-select-placeholder-text-color: var(--ds-colo
  * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
  * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
  * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+ * @attr {String} error - When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
  * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
  * @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 {
      * with `auro-select.value`.
      */
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
-      this.menu.optionSelected = undefined;
-      this.optionSelected = this.menu.optionSelected;
-
-      this.validity = 'badInput';
-
-      // Capitalizes the first letter of each word in this.value string
-      const valueStr = this.value.replace(/(^\w{1})|(\s+\w{1})/gu, (letter) => letter.toUpperCase());
-
-      // Pass the new string to the trigger content
-      this.updateDisplayedValue(valueStr);
-    });
-
-    this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      // set the trigger content back to the placeholder
+      this.reset();
       this.updateDisplayedValue(this.placeholder);
-
-      this.optionSelected = undefined;
-      this.value = undefined;
-
-      this.validation.validate(this);
     });
   }
 
@@ -3798,7 +3775,7 @@ class AuroSelect extends r$4 {
                 </p>`
               : u$3`
                 <p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-                  ${this.setCustomValidity}
+                  ${this.errorMessage}
                 </p>`
             }
           </span>

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

@@ -29,7 +29,7 @@ import tokensCss from "./styles/tokens-css.js";
  * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
  * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
  * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+ * @attr {String} error - When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
  * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
  * @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
@@ -277,26 +277,8 @@ export class AuroSelect extends LitElement {
      * with `auro-select.value`.
      */
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
-      this.menu.optionSelected = undefined;
-      this.optionSelected = this.menu.optionSelected;
-
-      this.validity = 'badInput';
-
-      // Capitalizes the first letter of each word in this.value string
-      const valueStr = this.value.replace(/(^\w{1})|(\s+\w{1})/gu, (letter) => letter.toUpperCase());
-
-      // Pass the new string to the trigger content
-      this.updateDisplayedValue(valueStr);
-    });
-
-    this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      // set the trigger content back to the placeholder
+      this.reset();
       this.updateDisplayedValue(this.placeholder);
-
-      this.optionSelected = undefined;
-      this.value = undefined;
-
-      this.validation.validate(this);
     });
   }
 
@@ -565,7 +547,7 @@ export class AuroSelect extends LitElement {
                 </p>`
               : html`
                 <p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-                  ${this.setCustomValidity}
+                  ${this.errorMessage}
                 </p>`
             }
           </span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",

package/packages/form-validation/src/validation.js

@@ -47,20 +47,20 @@ export default class AuroFormValidation {
       const pattern = new RegExp(`^${elem.pattern}$`, 'u');
 
       if (!pattern.test(elem.value)) {
-        elem.validity = 'badInput';
-        elem.setCustomValidity = elem.setCustomValidityBadInput || '';
+        elem.validity = 'patternMismatch';
+        elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
       }
     }
 
     // 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 || '';
+      elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
     }
     
     if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
-      elem.setCustomValidity = elem.setCustomValidityTooLong || '';
+      elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
     }
   }
 
@@ -76,33 +76,32 @@ export default class AuroFormValidation {
         const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
 
         if (!elem.value.match(emailRegex)) {
-          elem.validity = 'badInput';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.validity = 'patternMismatch';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         }
       } else if (elem.type === 'credit-card') {
         if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
           elem.validity = 'tooShort';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         }
       } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
-          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+          elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
         }
 
-        if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
+        if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
           elem.validity = 'rangeUnderflow';
-          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+          elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
         }
-
       } else if (elem.type === 'month-day-year' ||
                  elem.type === 'month-year' ||
                  elem.type === 'month-fullYear' ||
                  elem.type === 'year-month-day'
       ) {
-        if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) {
+        if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
           elem.validity = 'tooShort';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         } else {
           const valueDate = new Date(elem.value);
 
@@ -112,7 +111,7 @@ export default class AuroFormValidation {
 
             if (valueDate > maxDate) {
               elem.validity = 'rangeOverflow';
-              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+              elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
             }
           }
 
@@ -122,7 +121,7 @@ export default class AuroFormValidation {
 
             if (valueDate < minDate) {
               elem.validity = 'rangeUnderflow';
-              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+              elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
             }
           }
         }
@@ -145,10 +144,10 @@ export default class AuroFormValidation {
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
-      elem.setCustomValidity = elem.error;
+      elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
     } else if (validationShouldRun) {
       elem.validity = 'valid';
-      elem.setCustomValidity = '';
+      elem.errorMessage = '';
 
       /**
        * Only validate once we interact with the datepicker
@@ -160,7 +159,7 @@ export default class AuroFormValidation {
       let hasValue = elem.value && elem.value.length > 0;
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements && this.auroInputElements.length === 2) {
+      if (this.auroInputElements?.length === 2) {
         if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
           hasValue = false;
         }
@@ -168,31 +167,27 @@ export default class AuroFormValidation {
 
       if (!hasValue && elem.required) {
         elem.validity = 'valueMissing';
-        elem.setCustomValidity = elem.setCustomValidityValueMissing || '';
+        elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
         this.validateAttributes(elem);
       }
     }
 
-    if (this.auroInputElements && this.auroInputElements.length > 0) {
+    if (this.auroInputElements?.length > 0) {
       elem.validity = this.auroInputElements[0].validity;
-      elem.setCustomValidity = this.auroInputElements[0].setCustomValidity;
+      elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid') {
-        if (this.auroInputElements.length > 1) {
-          elem.validity = this.auroInputElements[1].validity;
-          elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
-        }
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+        elem.validity = this.auroInputElements[1].validity;
+        elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
     }
 
     if (validationShouldRun || elem.hasAttribute('error')) {
-      if (elem.validity && elem.validity !== 'valid') {
-        // Use the validity message override if it is declared
-        if (elem.ValidityMessageOverride) {
-          elem.setCustomValidity = elem.ValidityMessageOverride;
-        }
+      // Use the validity message override if it is declared
+      if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
+        elem.errorMessage = elem.ValidityMessageOverride;
       }
 
       this.getErrorMessage(elem);
@@ -238,18 +233,18 @@ export default class AuroFormValidation {
     if (elem.validity !== 'valid') {
       if (elem.setCustomValidity) {
         elem.errorMessage = elem.setCustomValidity;
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
         const input = elem.renderRoot.querySelector('input');
 
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
-      } else if (this.inputElements && this.inputElements.length > 0) {
+      } else if (this.inputElements?.length > 0  && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];
 
         if (firstInput.validationMessage.length > 0) {
           elem.errorMessage = firstInput.validationMessage;
-        } else if (this.inputElements.length === 2) {
+        } else if (this.inputElements?.length === 2) {
           const secondInput = this.inputElements[1];
 
           if (secondInput.validationMessage.length > 0) {

package/.turbo/cache/0663fcbb1d711029-meta.json

@@ -1 +0,0 @@
-{"hash":"0663fcbb1d711029","duration":642}

package/.turbo/cache/0a2b0a4df8a0443f-meta.json

@@ -1 +0,0 @@
-{"hash":"0a2b0a4df8a0443f","duration":5988}

package/.turbo/cache/120c8e207aa1ba35-meta.json

@@ -1 +0,0 @@
-{"hash":"120c8e207aa1ba35","duration":19715}

package/.turbo/cache/17dd4bdef6550a07-meta.json

@@ -1 +0,0 @@
-{"hash":"17dd4bdef6550a07","duration":19307}

package/.turbo/cache/32c0b9995fb5f8dd-meta.json

@@ -1 +0,0 @@
-{"hash":"32c0b9995fb5f8dd","duration":20225}

package/.turbo/cache/47ba2b5ebdb579e9-meta.json

@@ -1 +0,0 @@
-{"hash":"47ba2b5ebdb579e9","duration":7164}

package/.turbo/cache/56cb35d4c7473a23-meta.json

@@ -1 +0,0 @@
-{"hash":"56cb35d4c7473a23","duration":20991}

package/.turbo/cache/626afdc67e0cb540-meta.json

@@ -1 +0,0 @@
-{"hash":"626afdc67e0cb540","duration":2590}

package/.turbo/cache/6ef81cf9a66f982a-meta.json

@@ -1 +0,0 @@
-{"hash":"6ef81cf9a66f982a","duration":6301}

package/.turbo/cache/8b735250fa5a62bf-meta.json

@@ -1 +0,0 @@
-{"hash":"8b735250fa5a62bf","duration":19333}

package/.turbo/cache/9154e8fe6ab767ea-meta.json

@@ -1 +0,0 @@
-{"hash":"9154e8fe6ab767ea","duration":6786}

package/.turbo/cache/a49cc58242467fdc-meta.json

@@ -1 +0,0 @@
-{"hash":"a49cc58242467fdc","duration":4080}

package/.turbo/cache/af061e7a077a9ba5-meta.json

@@ -1 +0,0 @@
-{"hash":"af061e7a077a9ba5","duration":9521}

package/.turbo/cache/b50f1b283b4b81cd-meta.json

@@ -1 +0,0 @@
-{"hash":"b50f1b283b4b81cd","duration":2886}

package/.turbo/cache/bf85bc040b7e64db-meta.json

@@ -1 +0,0 @@
-{"hash":"bf85bc040b7e64db","duration":1708}

package/.turbo/cache/cd5f6987783fb56d-meta.json

@@ -1 +0,0 @@
-{"hash":"cd5f6987783fb56d","duration":1163}

package/.turbo/cache/ce67b6522dd09e64-meta.json

@@ -1 +0,0 @@
-{"hash":"ce67b6522dd09e64","duration":9910}

package/.turbo/cache/d716cb7a08152beb-meta.json

@@ -1 +0,0 @@
-{"hash":"d716cb7a08152beb","duration":2951}

package/.turbo/cache/d7a47b77deb3d9a4-meta.json

@@ -1 +0,0 @@
-{"hash":"d7a47b77deb3d9a4","duration":2393}

package/.turbo/cache/ff58f630c9d69af4-meta.json

@@ -1 +0,0 @@
-{"hash":"ff58f630c9d69af4","duration":2639}