@aurodesignsystem-dev/auro-formkit 0.0.0-pr1144.2 → 0.0.0-pr1145.0

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

@@ -944,6 +944,52 @@ class AuroFormValidation {
             message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
           }
         ]
+      },
+      combobox: {
+        filter: [
+          {
+            check: (e) => {
+
+              // Guard Clause: If the behavior is not 'filter', skip this validation
+              if (e.behavior !== 'filter') return false;
+
+              // Get the current input value
+              const currentInputValue = e.input.value;
+
+              // Skip validation if the input has no value
+              if (!currentInputValue) return false;
+
+              /**
+               * Let's check if the option selected and combobox value match.
+               */
+
+              // Guard Clause: If there is no option selected fail the validation
+              if (!e.optionSelected) return true;
+
+              // Guard Clause: If there is no value fail the validation
+              if (!e.value) return true;
+
+              // Guard Clause: If the selected option's value doesn't match the input value fail the validation
+              if (e.optionSelected.value !== e.value) return true;
+
+              /**
+               * Now let's make sure the user hasn't change the value in the input after selecting an option.
+               * This is to make sure there's no user confusion if they select an option but then change the value to something else.
+               */
+
+              // Guard Clause: If the current input value doesn't match the option selected value fail the validation
+              if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
+
+              // Guard Clause: If the current input value doesn't match the combobox value fail the validation
+              if (currentInputValue && currentInputValue !== e.value) return true;
+
+              // If all the checks passed the validation passes
+              return false;
+            },
+            validity: 'valueMissing',
+            message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
+          }
+        ] 
       }
     };
 
@@ -952,6 +998,8 @@ class AuroFormValidation {
       elementType = 'input';
     } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
       elementType = 'counter';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      elementType = 'combobox';
     }
 
     if (elementType) {
@@ -1130,6 +1178,15 @@ class AuroFormValidation {
         }
       }
 
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+      
+      if (isCombobox) {
+
+        if (!elem.persistInput || elem.behavior === "filter") {
+          hasValue = elem.input.value?.length > 0;
+        }
+      }
+
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
@@ -1138,6 +1195,11 @@ class AuroFormValidation {
         this.validateElementAttributes(elem);
       } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
+      } else if (isCombobox) {
+        this.validateElementAttributes(elem);
+
+        // Don't run extra validation for cases where the combobox is not being used as a filter
+        validationShouldRun = elem.behavior !== 'filter';
       }
     }
 
@@ -1145,8 +1207,8 @@ class AuroFormValidation {
 
       const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
 
-      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
-      if (!isCombobox || isCombobox && !elem.persistValue) {
+      // Don't reset combobox validity if persistInput is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
         this.auroInputElements.forEach(input => input.validate());
@@ -1219,6 +1281,8 @@ class AuroFormValidation {
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
+        elem.errorMessage = elem.input?.inputElement?.validationMessage;
       } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];
 

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

@@ -936,6 +936,52 @@ class AuroFormValidation {
             message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
           }
         ]
+      },
+      combobox: {
+        filter: [
+          {
+            check: (e) => {
+
+              // Guard Clause: If the behavior is not 'filter', skip this validation
+              if (e.behavior !== 'filter') return false;
+
+              // Get the current input value
+              const currentInputValue = e.input.value;
+
+              // Skip validation if the input has no value
+              if (!currentInputValue) return false;
+
+              /**
+               * Let's check if the option selected and combobox value match.
+               */
+
+              // Guard Clause: If there is no option selected fail the validation
+              if (!e.optionSelected) return true;
+
+              // Guard Clause: If there is no value fail the validation
+              if (!e.value) return true;
+
+              // Guard Clause: If the selected option's value doesn't match the input value fail the validation
+              if (e.optionSelected.value !== e.value) return true;
+
+              /**
+               * Now let's make sure the user hasn't change the value in the input after selecting an option.
+               * This is to make sure there's no user confusion if they select an option but then change the value to something else.
+               */
+
+              // Guard Clause: If the current input value doesn't match the option selected value fail the validation
+              if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
+
+              // Guard Clause: If the current input value doesn't match the combobox value fail the validation
+              if (currentInputValue && currentInputValue !== e.value) return true;
+
+              // If all the checks passed the validation passes
+              return false;
+            },
+            validity: 'valueMissing',
+            message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
+          }
+        ] 
       }
     };
 
@@ -944,6 +990,8 @@ class AuroFormValidation {
       elementType = 'input';
     } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
       elementType = 'counter';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      elementType = 'combobox';
     }
 
     if (elementType) {
@@ -1122,6 +1170,15 @@ class AuroFormValidation {
         }
       }
 
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+      
+      if (isCombobox) {
+
+        if (!elem.persistInput || elem.behavior === "filter") {
+          hasValue = elem.input.value?.length > 0;
+        }
+      }
+
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
@@ -1130,6 +1187,11 @@ class AuroFormValidation {
         this.validateElementAttributes(elem);
       } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
+      } else if (isCombobox) {
+        this.validateElementAttributes(elem);
+
+        // Don't run extra validation for cases where the combobox is not being used as a filter
+        validationShouldRun = elem.behavior !== 'filter';
       }
     }
 
@@ -1137,8 +1199,8 @@ class AuroFormValidation {
 
       const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
 
-      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
-      if (!isCombobox || isCombobox && !elem.persistValue) {
+      // Don't reset combobox validity if persistInput is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
         this.auroInputElements.forEach(input => input.validate());
@@ -1211,6 +1273,8 @@ class AuroFormValidation {
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
+        elem.errorMessage = elem.input?.inputElement?.validationMessage;
       } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];
 

package/components/checkbox/dist/index.js

@@ -889,6 +889,52 @@ class AuroFormValidation {
             message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
           }
         ]
+      },
+      combobox: {
+        filter: [
+          {
+            check: (e) => {
+
+              // Guard Clause: If the behavior is not 'filter', skip this validation
+              if (e.behavior !== 'filter') return false;
+
+              // Get the current input value
+              const currentInputValue = e.input.value;
+
+              // Skip validation if the input has no value
+              if (!currentInputValue) return false;
+
+              /**
+               * Let's check if the option selected and combobox value match.
+               */
+
+              // Guard Clause: If there is no option selected fail the validation
+              if (!e.optionSelected) return true;
+
+              // Guard Clause: If there is no value fail the validation
+              if (!e.value) return true;
+
+              // Guard Clause: If the selected option's value doesn't match the input value fail the validation
+              if (e.optionSelected.value !== e.value) return true;
+
+              /**
+               * Now let's make sure the user hasn't change the value in the input after selecting an option.
+               * This is to make sure there's no user confusion if they select an option but then change the value to something else.
+               */
+
+              // Guard Clause: If the current input value doesn't match the option selected value fail the validation
+              if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
+
+              // Guard Clause: If the current input value doesn't match the combobox value fail the validation
+              if (currentInputValue && currentInputValue !== e.value) return true;
+
+              // If all the checks passed the validation passes
+              return false;
+            },
+            validity: 'valueMissing',
+            message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
+          }
+        ] 
       }
     };
 
@@ -897,6 +943,8 @@ class AuroFormValidation {
       elementType = 'input';
     } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
       elementType = 'counter';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      elementType = 'combobox';
     }
 
     if (elementType) {
@@ -1075,6 +1123,15 @@ class AuroFormValidation {
         }
       }
 
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+      
+      if (isCombobox) {
+
+        if (!elem.persistInput || elem.behavior === "filter") {
+          hasValue = elem.input.value?.length > 0;
+        }
+      }
+
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
@@ -1083,6 +1140,11 @@ class AuroFormValidation {
         this.validateElementAttributes(elem);
       } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
+      } else if (isCombobox) {
+        this.validateElementAttributes(elem);
+
+        // Don't run extra validation for cases where the combobox is not being used as a filter
+        validationShouldRun = elem.behavior !== 'filter';
       }
     }
 
@@ -1090,8 +1152,8 @@ class AuroFormValidation {
 
       const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
 
-      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
-      if (!isCombobox || isCombobox && !elem.persistValue) {
+      // Don't reset combobox validity if persistInput is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
         this.auroInputElements.forEach(input => input.validate());
@@ -1164,6 +1226,8 @@ class AuroFormValidation {
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
+        elem.errorMessage = elem.input?.inputElement?.validationMessage;
       } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];
 

package/components/checkbox/dist/registered.js

@@ -889,6 +889,52 @@ class AuroFormValidation {
             message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
           }
         ]
+      },
+      combobox: {
+        filter: [
+          {
+            check: (e) => {
+
+              // Guard Clause: If the behavior is not 'filter', skip this validation
+              if (e.behavior !== 'filter') return false;
+
+              // Get the current input value
+              const currentInputValue = e.input.value;
+
+              // Skip validation if the input has no value
+              if (!currentInputValue) return false;
+
+              /**
+               * Let's check if the option selected and combobox value match.
+               */
+
+              // Guard Clause: If there is no option selected fail the validation
+              if (!e.optionSelected) return true;
+
+              // Guard Clause: If there is no value fail the validation
+              if (!e.value) return true;
+
+              // Guard Clause: If the selected option's value doesn't match the input value fail the validation
+              if (e.optionSelected.value !== e.value) return true;
+
+              /**
+               * Now let's make sure the user hasn't change the value in the input after selecting an option.
+               * This is to make sure there's no user confusion if they select an option but then change the value to something else.
+               */
+
+              // Guard Clause: If the current input value doesn't match the option selected value fail the validation
+              if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
+
+              // Guard Clause: If the current input value doesn't match the combobox value fail the validation
+              if (currentInputValue && currentInputValue !== e.value) return true;
+
+              // If all the checks passed the validation passes
+              return false;
+            },
+            validity: 'valueMissing',
+            message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
+          }
+        ] 
       }
     };
 
@@ -897,6 +943,8 @@ class AuroFormValidation {
       elementType = 'input';
     } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
       elementType = 'counter';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      elementType = 'combobox';
     }
 
     if (elementType) {
@@ -1075,6 +1123,15 @@ class AuroFormValidation {
         }
       }
 
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+      
+      if (isCombobox) {
+
+        if (!elem.persistInput || elem.behavior === "filter") {
+          hasValue = elem.input.value?.length > 0;
+        }
+      }
+
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
@@ -1083,6 +1140,11 @@ class AuroFormValidation {
         this.validateElementAttributes(elem);
       } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
+      } else if (isCombobox) {
+        this.validateElementAttributes(elem);
+
+        // Don't run extra validation for cases where the combobox is not being used as a filter
+        validationShouldRun = elem.behavior !== 'filter';
       }
     }
 
@@ -1090,8 +1152,8 @@ class AuroFormValidation {
 
       const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
 
-      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
-      if (!isCombobox || isCombobox && !elem.persistValue) {
+      // Don't reset combobox validity if persistInput is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
         this.auroInputElements.forEach(input => input.validate());
@@ -1164,6 +1226,8 @@ class AuroFormValidation {
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
+        elem.errorMessage = elem.input?.inputElement?.validationMessage;
       } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];