@descope/web-components-ui 1.45.0 → 1.46.0

package/dist/index.esm.js

@@ -10359,22 +10359,21 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$8 {
     const countryCode = this.comboBox.value;
     const nationalNumer = this.textField.value;
 
-    const hasCountryCode = !!countryCode.length;
-    const hasNationalNumber = !!nationalNumer.length;
-
-    const isEmpty = !hasCountryCode || !hasNationalNumber;
-    const isValidLength = hasNationalNumber && nationalNumer.length >= this.minLength;
+    const isEmpty = !countryCode || !nationalNumer;
+    const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;
 
     if (this.isRequired && isEmpty) {
       return { valueMissing: true };
     }
 
-    if (!isValidLength) {
-      return { tooShort: true };
-    }
+    if (this.value) {
+      if (!isValidLength) {
+        return { tooShort: true };
+      }
 
-    if (this.value && this.isStrictValidation && !this.#isValidParsedValue()) {
-      return { patternMismatch: true };
+      if (this.isStrictValidation && !this.#isValidParsedValue()) {
+        return { patternMismatch: true };
+      }
     }
 
     return {};
@@ -10916,6 +10915,7 @@ const observedAttributes$3 = [
   'readonly',
   'phone-input-placeholder',
   'name',
+  'maxlength',
   'autocomplete',
   'label-type',
 ];
@@ -11022,21 +11022,19 @@ class PhoneFieldInternal extends BaseInputClass$7 {
       return { valueMissing: true };
     }
 
-    if (stripValue.length < this.minLength) {
-      return { tooShort: true };
-    }
-
-    if (stripValue.length > this.maxLength) {
-      return { tooLong: true };
-    }
+    if (this.textField.value) {
+      if (stripValue.length < this.minLength) {
+        return { tooShort: true };
+      }
 
-    if (
-      // has `strict-validation` and not properly parsed
-      (this.isStrictValidation && this.textField.value && !this.#isValidParsedValue()) ||
-      // if no `strict-validation` then conform with naive pattern
-      (!this.isStrictValidation && this.textField.value && !validPhonePattern.test(this.value))
-    ) {
-      return { patternMismatch: true };
+      if (
+        // has `strict-validation` and not properly parsed
+        (this.isStrictValidation && this.textField.value && !this.#isValidParsedValue()) ||
+        // if no `strict-validation` then conform with naive pattern
+        (!this.isStrictValidation && this.textField.value && !validPhonePattern.test(this.value))
+      ) {
+        return { patternMismatch: true };
+      }
     }
 
     return {};