@descope/web-components-ui 2.2.34 → 2.2.35

package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -1,7 +1,7 @@
 import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
 import { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';
 import CountryCodes from '../../CountryCodes';
-import { comboBoxItem, parsePhoneNumber } from '../helpers';
+import { comboBoxItem } from '../helpers';
 import { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';
 
 export const componentName = getComponentName('phone-field-internal');
@@ -112,18 +112,24 @@ class PhoneFieldInternal extends BaseInputClass {
       return '';
     }
 
-    const [countryCode, phoneNumber] = parsePhoneNumber(
-      `${this.comboBox.value}-${this.textField.value}`
-    );
+    if (this.allowAlphanumericInput) {
+      return `${this.comboBox.value}-${this.textField.value}`;
+    }
 
-    return `${countryCode || this.comboBox.value}-${phoneNumber || this.textField.value}`;
+    return `${this.comboBox.value}-${this.textField.value.replace(/\D+/g, '')}`;
   }
 
   set value(val) {
-    const [countryCode, nationalNumber] = parsePhoneNumber(val);
+    const nationalNumber = val.replace(
+      new RegExp(`^\\+?${this.comboBox.value.replace('+', '')}-?`),
+      ''
+    );
 
-    this.#setCountryCode(countryCode);
-    this.#setNationalNumber(nationalNumber);
+    if (this.isFormatValue) {
+      this.textField.value = this.#formatNationalNumber(nationalNumber);
+    } else {
+      this.textField.value = nationalNumber;
+    }
   }
 
   init() {
@@ -212,41 +218,6 @@ class PhoneFieldInternal extends BaseInputClass {
 
     this.handleFocusEventsDispatching(this.inputs);
     this.handleInputEventDispatching();
-
-    // verify country code item against phone number pattern and replace if needed and country is allowed
-    // (e.g. +1 can be US or CA, depending on the pattern)
-    this.addEventListener('input', this.#handleSameCountryCodes.bind(this));
-  }
-
-  #setCountryCode(val) {
-    if (!val || val === this.selectedCountryCode) return;
-
-    let countryCodeItem = undefined;
-
-    if (this.value) {
-      // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)
-      const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);
-      countryCodeItem = this.#getCountryByCodeId(code);
-    }
-
-    // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)
-    // then use the first option with same dial code (e.g. in that case - `US` for +1)
-    if (!countryCodeItem) {
-      countryCodeItem = this.#getCountryByDialCode(val);
-    }
-
-    // set country code item; in it doesn't exist in list - set `undefined`
-    this.comboBox.selectedItem = countryCodeItem;
-  }
-
-  #setNationalNumber(val) {
-    if (this.isFormatValue) {
-      val = this.#formatNationalNumber(val);
-    }
-
-    if (this.textField.value !== val) {
-      this.textField.value = val;
-    }
   }
 
   #formatNationalNumber(nationalNumber = '') {
@@ -259,7 +230,6 @@ class PhoneFieldInternal extends BaseInputClass {
     this.#ayt.reset();
 
     const formattedVal = this.#ayt.input(nationalNumber);
-
     return formattedVal || nationalNumber;
   }
 
@@ -282,24 +252,11 @@ class PhoneFieldInternal extends BaseInputClass {
     return this.restrictCountries.includes(countryCode);
   }
 
-  // return country item by dial code `data-id` (e.g. `+1`)
-  #getCountryByDialCode(dialCode) {
-    return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) || undefined;
-  }
-
   // return country item by country code `data-country-code` (e.g. `US`)
   #getCountryByCodeId(countryCode) {
     return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);
   }
 
-  #getCountryCodeByPhoneNumber(val) {
-    if (!val) return undefined;
-    const parsed = parsePhoneNumberFromString(val);
-    if (!parsed?.country) return undefined;
-    const foundCountryItem = this.#getCountryByCodeId(parsed.country);
-    return foundCountryItem?.getAttribute('data-country-code');
-  }
-
   #updateComboBoxItems(restrictCountries) {
     const items = restrictCountries.length
       ? CountryCodes.filter((c) => restrictCountries.includes(c.code))
@@ -324,23 +281,6 @@ class PhoneFieldInternal extends BaseInputClass {
     }
   }
 
-  #handleSameCountryCodes() {
-    if (!this.value) return;
-
-    const country = this.#getCountryCodeByPhoneNumber(this.value);
-
-    if (!country) return;
-
-    // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)
-    if (this.selectedCountryCode !== country) {
-      const foundCountryItem = this.#getCountryByCodeId(country);
-      // if found country is defined in country list then set it, otherwise - clear phone number
-      if (foundCountryItem) {
-        this.comboBox.selectedItem = foundCountryItem;
-      }
-    }
-  }
-
   #handleLabelTypeAttrs(attrName, newValue) {
     // set or remove label attributes from inner text/combo components on `label-type` change
     const attr = mapAttrs[attrName] || attrName;