@descope/web-components-ui 2.2.34 → 2.2.35

package/dist/index.esm.js

@@ -15,7 +15,7 @@ import '@vaadin/email-field';
 import '@vaadin/number-field';
 import '@vaadin/password-field';
 import '@vaadin/text-area';
-import parsePhoneNumberFromString$1, { parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js/min';
+import parsePhoneNumberFromString$1, { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';
 import '@vaadin/grid';
 import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
 import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
@@ -11020,32 +11020,6 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const parsePhoneNumber = (val) => {
-  const value = val || '';
-  let countryCode = '';
-  let phoneNumber = '';
-
-  // Attempt to parse the value using libphonenumber-js
-  const parsed = parsePhoneNumberFromString(value);
-
-  if (parsed) {
-    if (parsed.countryCallingCode) {
-      countryCode = `+${parsed.countryCallingCode}`;
-    }
-
-    if (parsed.nationalNumber) {
-      phoneNumber = parsed.nationalNumber;
-    }
-  } else {
-    // Fallback: assume a dash separates country code and phone number
-    const [country, phone] = value.split('-');
-    countryCode = country || '';
-    phoneNumber = phone || '';
-  }
-
-  return [countryCode, phoneNumber];
-};
-
 const componentName$Y = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'readonly'];
@@ -11154,18 +11128,24 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$9 {
       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() {
@@ -11254,41 +11234,6 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$9 {
 
     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 = '') {
@@ -11301,7 +11246,6 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$9 {
     this.#ayt.reset();
 
     const formattedVal = this.#ayt.input(nationalNumber);
-
     return formattedVal || nationalNumber;
   }
 
@@ -11324,24 +11268,11 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$9 {
     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))
@@ -11366,23 +11297,6 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$9 {
     }
   }
 
-  #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$1[attrName] || attrName;