@descope/web-components-ui 1.44.0 → 1.45.0

package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js

@@ -1,20 +1,18 @@
 import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
 import { getComponentName } from '../../../../helpers/componentHelpers';
-import { getCountryByCodeId } from '../../helpers';
+import { getCountryByCodeId, matchingParenthesis } from '../../helpers';
+import parsePhoneNumberFromString, { AsYouType } from 'libphonenumber-js/min';
 
 export const componentName = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes = [
   'disabled',
   'size',
-  'bordered',
-  'invalid',
   'readonly',
   'phone-input-placeholder',
   'name',
   'autocomplete',
   'label-type',
-  'allow-alphanumeric-input',
 ];
 const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
@@ -27,77 +25,95 @@ class PhoneFieldInternal extends BaseInputClass {
     return [].concat(BaseInputClass.observedAttributes || [], observedAttributes);
   }
 
+  #ayt;
+
   constructor() {
     super();
 
     this.innerHTML = `
       <div>
-        <descope-text-field tabindex="1"></descope-text-field>
+        <descope-text-field tabindex="1" type="tel" bordered="false"></descope-text-field>
       </div>
       `;
 
-    this.phoneNumberInput = this.querySelector('descope-text-field');
+    this.textField = this.querySelector('descope-text-field');
+  }
+
+  // notice: this function is exposed in parent component
+  get phoneNumberInputEle() {
+    return this.textField.shadowRoot.querySelector('input');
   }
 
-  get defaultCountryCode() {
+  get defaultDialCode() {
     return getCountryByCodeId(this.getAttribute('default-code'));
   }
 
-  get hasDefaultCode() {
-    return !!this.getAttribute('default-code');
+  get defaultCode() {
+    return this.getAttribute('default-code');
   }
 
   get allowAlphanumericInput() {
     return this.getAttribute('allow-alphanumeric-input') === 'true';
   }
 
-  get value() {
-    if (!this.phoneNumberValue) {
-      return '';
-    }
+  get minLength() {
+    return parseInt(this.getAttribute('minlength'), 10) || 0;
+  }
 
-    if (this.hasDefaultCode) {
-      // we want to transform phone numbers to a valid {dialCode}-{phoneNumber} format
-      // e.g.:
-      // +972-12345 => +972-12345
-      // 972-12345 => +972-12345
-      // 12345 => +972-12345
-      //
-      // we also want to handle any extra dash if added in the start of the phone number
-      // e.g.:
-      // +972--12345 => +972-12345
-      const pattern = new RegExp(`\\+?${parseInt(this.defaultCountryCode, 10)}--?`);
-      return `${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(pattern, '')}`;
-    }
+  get maxLength() {
+    return parseInt(this.getAttribute('maxlength'), 10) || 50;
+  }
 
-    return this.phoneNumberInput.value;
+  get restrictCountries() {
+    return this.getAttribute('restrict-countries')?.split(',').filter(Boolean) || [];
   }
 
-  set value(val) {
-    this.phoneNumberInput.value = val;
+  get isFormatValue() {
+    return this.getAttribute('format-value') === 'true';
   }
 
-  get phoneNumberValue() {
-    return this.phoneNumberInput.value;
+  get isStrictValidation() {
+    return this.getAttribute('strict-validation') === 'true';
   }
 
-  get phoneNumberInputEle() {
-    return this.phoneNumberInput.shadowRoot.querySelector('input');
+  get value() {
+    if (!this.textField.value) return '';
+
+    if (!this.isStrictValidation) {
+      return this.#nonParsedValue();
+    }
+
+    const parsedVal = this.#parseWithCountryCode();
+
+    if (parsedVal?.country && parsedVal?.countryCallingCode && parsedVal?.nationalNumber) {
+      return `+${[parsedVal?.countryCallingCode, parsedVal?.nationalNumber].join('-')}`;
+    }
+
+    // if failed to parse or to find country code return text field value
+    return this.textField.value;
   }
 
-  get minLength() {
-    return parseInt(this.getAttribute('minlength'), 10) || 0;
+  set value(val) {
+    this.textField.value = val;
   }
 
-  get maxLength() {
-    return parseInt(this.getAttribute('maxlength'), 10) || 50;
+  init() {
+    this.addEventListener('focus', (e) => {
+      // We want to ignore focus events we are dispatching
+      if (e.isTrusted) this.textField.focus();
+    });
+
+    super.init?.();
+
+    this.textField.addEventListener('input', this.#onInput.bind(this));
+    this.handleFocusEventsDispatching([this.textField]);
   }
 
   getValidity() {
     const validPhonePattern = /^\+?\d{1,4}-?(?:\d-?){1,15}$/;
-    const stripValue = this.value.replace(/\D/g, '');
+    const stripValue = this.#sanitizeVal(this.textField.value);
 
-    if (this.isRequired && !this.value) {
+    if (this.isRequired && !this.textField.value) {
       return { valueMissing: true };
     }
 
@@ -109,63 +125,144 @@ class PhoneFieldInternal extends BaseInputClass {
       return { tooLong: true };
     }
 
-    if (this.value && !validPhonePattern.test(this.value)) {
+    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 {};
   }
 
-  init() {
-    this.addEventListener('focus', (e) => {
-      // we want to ignore focus events we are dispatching
-      if (e.isTrusted) this.phoneNumberInput.focus();
-    });
+  setSelectionRange(...args) {
+    this.textField.setSelectionRange(...args);
+  }
 
-    super.init?.();
-    this.initInputs();
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue && observedAttributes.includes(attrName)) {
+      const attr = mapAttrs[attrName] || attrName;
+      this.textField.setAttribute(attr, newValue);
+    }
   }
 
-  getCountryByDialCode(countryDialCode) {
-    return this.countryCodeInput.items?.find(
-      (c) => c.getAttribute('data-country-code') === countryDialCode
+  #onInput(e) {
+    let sanitizedInput = this.#sanitizeInput(e.target.value);
+
+    if (this.isFormatValue && this.#canFormat(sanitizedInput)) {
+      sanitizedInput = this.#formatPhoneNumber(sanitizedInput);
+    }
+
+    e.target.value = sanitizedInput;
+  }
+
+  #nonParsedValue() {
+    if (!this.defaultDialCode) {
+      return this.textField.value;
+    }
+
+    const nationalNumber = this.#trimDuplicateCountryCode(this.textField.value);
+    const sanitizedVal = this.#sanitizeVal(nationalNumber);
+
+    return [this.defaultDialCode, sanitizedVal].join('-');
+  }
+
+  #parseWithCountryCode() {
+    if (this.defaultDialCode) {
+      return parsePhoneNumberFromString(
+        [this.defaultDialCode, this.#sanitizeVal(this.textField.value)].filter(Boolean).join('')
+      );
+    }
+
+    // if default-code or not parsed - try to extract country code from value
+    return parsePhoneNumberFromString(this.textField.value);
+  }
+
+  #sanitizeVal(val) {
+    return val.replace(/\D/g, '');
+  }
+
+  #trimDuplicateCountryCode(val) {
+    if (this.textField.value?.[0] === '+') {
+      const dialCodePrefixPattern = new RegExp(`^\\${this.defaultDialCode}`);
+      const trimmed = val.replace(dialCodePrefixPattern, '');
+      return trimmed;
+    }
+    return val;
+  }
+
+  #isValidParsedValue() {
+    const parsed = parsePhoneNumberFromString(this.value);
+    return (
+      parsed && // parsed successfully (not undefined)
+      parsed.isValid?.() && // Parsed object is valid
+      parsed.country && // Parsed object with a country code
+      this.#isAllowedCountry(parsed.country) && // Parsed with allowed country code
+      (this.defaultCode ? this.defaultCode === parsed.country : true) // In case default country code is set validate parsed country matches it
     );
   }
 
-  initInputs() {
-    // Sanitize phone input value to filter everything but digits
-    this.phoneNumberInput.addEventListener('input', (e) => {
-      if (e.target.value.length === 1 && e.target.value === '-') {
-        e.target.value = '';
-      }
-
-      e.target.value = e.target.value
-        .replace(/(?!^)\+/g, '')
-        .replace('--', '-')
-        .replace('+-', '+');
-
-      let sanitizedInput = e.target.value;
-      if (!this.allowAlphanumericInput) {
-        const telDigitsRegExp = /^[+\d-]+$/;
-        sanitizedInput = e.target.value
-          .split('')
-          .filter((char) => telDigitsRegExp.test(char))
-          .join('');
-      }
-
-      e.target.value = sanitizedInput;
-    });
+  #isAllowedCountry(countryCode) {
+    if (!this.restrictCountries) {
+      return true;
+    }
 
-    this.handleFocusEventsDispatching([this.phoneNumberInput]);
+    return this.restrictCountries.includes(countryCode);
   }
 
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    super.attributeChangedCallback(attrName, oldValue, newValue);
+  #sanitizeInput(val) {
+    val = val
+      .replace(/^-+/, '') // dash as first char
+      .replace(/(?!^)\+/g, '') // multiple plus symbols
+      .replace('--', '-') // consecutive dashes
+      .replace('+-', '+'); // dash following plus symbol
+
+    if (!this.allowAlphanumericInput) {
+      const telDigitsRegExp = /^[+\d-\(\)]+$/;
+      val = val
+        .split('')
+        .filter((char) => telDigitsRegExp.test(char))
+        .join('');
+    }
 
-    if (oldValue !== newValue && observedAttributes.includes(attrName)) {
-      const attr = mapAttrs[attrName] || attrName;
-      this.phoneNumberInput.setAttribute(attr, newValue);
+    return val;
+  }
+
+  #formatPhoneNumber(phoneNumber = '') {
+    // Get country code from `default-code or` from phone number
+    const countryCode = this.defaultCode || this.#getCountryCodeFromValue(phoneNumber);
+
+    // Skip formatting if no country code is available
+    if (!countryCode) {
+      return phoneNumber;
+    }
+
+    // Update AsYouType country code if needed
+    if (!this.#ayt || this.#ayt.country !== countryCode) {
+      this.#ayt = new AsYouType(countryCode);
     }
+
+    // We need to reset AsYouType instance before setting new input
+    this.#ayt.reset();
+
+    // Set AsYouType input
+    const formattedVal = this.#ayt.input(phoneNumber) || phoneNumber;
+
+    return formattedVal;
+  }
+
+  #getCountryCodeFromValue(val) {
+    const parsed = parsePhoneNumberFromString(val);
+    return parsed?.country || '';
+  }
+
+  #canFormat(val) {
+    if (!matchingParenthesis(val)) return false;
+    return true;
   }
 }
 

package/src/components/phone-fields/descope-phone-input-box-field/index.js

@@ -1,5 +1,4 @@
 import './descope-phone-input-box-internal';
-import '@descope-ui/descope-combo-box';
 import '../../descope-text-field';
 
 import { componentName, PhoneFieldInputBoxClass } from './PhoneFieldInputBoxClass';

package/src/components/phone-fields/helpers.js

@@ -1,5 +1,12 @@
+import parsePhoneNumberFromString from 'libphonenumber-js/min';
 import CountryCodes from './CountryCodes';
 
 export const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
+
+export const matchingParenthesis = (val) => {
+  const openParenMatches = val.match(/\(/g);
+  const closeParenMatches = val.match(/\)/g);
+  return openParenMatches?.length === closeParenMatches?.length;
+};

package/src/mixins/index.js

@@ -11,3 +11,4 @@ export { normalizeBooleanAttributesMixin } from './normalizeBooleanAttributesMix
 export { lifecycleEventsMixin } from './lifecycleEventsMixin';
 export { inputEventsDispatchingMixin } from './inputEventsDispatchingMixin';
 export { externalInputMixin } from './externalInputMixin';
+export { inputOverrideValidConstraintsMixin } from './inputOverrideValidConstraints';

package/src/mixins/inputOverrideValidConstraints.js

@@ -0,0 +1,12 @@
+export const inputOverrideValidConstraintsMixin = (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;
+      }
+    }
+  };