@descope/web-components-ui 2.2.54 → 2.2.55

package/dist/index.esm.js

@@ -2076,6 +2076,19 @@ const activeableMixin = (superclass) =>
     }
   };
 
+const inputOverrideValidConstraintsMixin$1 = (superclass) =>
+  class InputOverrideValidConstraintsMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      // vaadin uses `validConstraints` (required, pattern, minlength, maxlength) to determine if it should validate
+      // the input or not. We want to override this behavior, so we can enforce validation even if these attributes are not present.
+      if (this.baseElement._hasValidConstraints) {
+        this.baseElement._hasValidConstraints = () => true;
+      }
+    }
+  };
+
 const disableRules = [
   'blockquote',
   'list',
@@ -5225,7 +5238,7 @@ const componentName$1d = getComponentName$1('combo-box');
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
     static get observedAttributes() {
-      return ['label-type'];
+      return ['label-type', 'require-match'];
     }
 
     // eslint-disable-next-line class-methods-use-this
@@ -5297,6 +5310,10 @@ const ComboBoxMixin = (superclass) =>
       }
     }
 
+    get requireMatch() {
+      return this.getAttribute('require-match') === 'true' && !this.allowCustomValue;
+    }
+
     // eslint-disable-next-line class-methods-use-this
     isValidDataType(data) {
       const isValid = Array.isArray(data);
@@ -5449,16 +5466,27 @@ const ComboBoxMixin = (superclass) =>
       }
     }
 
+    isValueMatch() {
+      return this.baseElement.items.some(val => val.getAttribute('data-id') === this.baseElement.querySelector('input').value);
+    }
+
     init() {
       super.init?.();
 
       // eslint-disable-next-line func-names
       this.getValidity = function () {
+        if (this.requireMatch && !this.isValueMatch()) {
+          return {
+            patternMismatch: true,
+          };
+        }
+
         if (!this.value && this.isRequired) {
           return {
             valueMissing: true,
           };
         }
+
         return {};
       };
 
@@ -5510,6 +5538,10 @@ const ComboBoxMixin = (superclass) =>
       }
     }
 
+    handleRequireMatchChange(shouldValidate) {
+      this.baseElement.allowCustomValue = shouldValidate || this.allowCustomValue;
+    }
+
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
@@ -5520,6 +5552,8 @@ const ComboBoxMixin = (superclass) =>
           } else {
             this.removeEventListener('click', this.onLabelClick);
           }
+        } else if (attrName === 'require-match') {
+          this.handleRequireMatchChange(newValue === 'true');
         }
       }
     }
@@ -5817,6 +5851,7 @@ const ComboBoxClass = compose$1(
     proxyProps: ['selectionStart'],
     inputEvent: 'value-changed',
   }),
+  inputOverrideValidConstraintsMixin$1,
   componentNameValidationMixin$1,
   ComboBoxMixin,
 )(