@descope/web-components-ui 2.3.0 → 2.3.2

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, { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';
+import parsePhoneNumberFromString$1, { parsePhoneNumberFromString, AsYouType } 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';
@@ -10293,7 +10293,7 @@ var CountryCodes = [
     },
     {
       name: 'Guyana',
-      dialCode: '+595',
+      dialCode: '+592',
       code: 'GY',
     },
     {
@@ -11183,12 +11183,56 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$9 {
     return `${this.comboBox.value}-${this.textField.value.replace(/\D+/g, '')}`;
   }
 
+  #clearValue() {
+    this.comboBox.selectedItem = undefined;
+    this.textField.value = '';
+  }
+
   set value(val) {
-    const nationalNumber = val.replace(
-      new RegExp(`^\\+?${this.comboBox.value.replace('+', '')}-?`),
-      ''
-    );
+    // reject empty or digit-free values
+    if (!val || !/\d/.test(val)) {
+      this.#clearValue();
+      return;
+    }
 
+    // ensure plus prefix
+    if (!val.startsWith('+')) {
+      val = `+${val}`;
+    }
+
+    let dialCode = '';
+    let nationalNumber = '';
+
+    if (val.includes('-')) {
+      // dash explicitly marks where the dial code ends — no parsing needed
+      const dashIdx = val.indexOf('-');
+      dialCode = val.slice(0, dashIdx);
+      nationalNumber = val.slice(dashIdx + 1).replace(/\D+/g, '');
+    } else {
+      // parse only to get dial code length,
+      const parsed = parsePhoneNumberFromString(val);
+      if (parsed?.countryCallingCode) {
+        dialCode = `+${parsed.countryCallingCode}`;
+        // slice the raw value to avoid parser transformations
+        nationalNumber = val.slice(dialCode.length).replace(/\D+/g, '');
+      }
+    }
+
+    // dial code must contain digits (e.g. '+1', not just '+')
+    if (!/\d/.test(dialCode)) {
+      this.#clearValue();
+      return;
+    }
+
+    // resolve country code from dial code
+    const countryCode = CountryCodes.find((c) => c.dialCode === dialCode)?.code;
+
+    // sync combo box when country changes
+    if (countryCode && countryCode !== this.selectedCountryCode) {
+      this.comboBox.selectedItem = this.#getCountryItemByCodeId(countryCode);
+    }
+
+    // set formatted or raw national number on the text field
     if (this.isFormatValue) {
       this.textField.value = this.#formatNationalNumber(nationalNumber);
     } else {
@@ -11239,7 +11283,7 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$9 {
     super.attributeChangedCallback(attrName, oldValue, newValue);
 
     if (oldValue !== newValue) {
-      if (attrName === 'default-code' && newValue) {
+      if (attrName === 'default-code' && newValue && !this.selectedCountryCode) {
         this.#handleDefaultCountryCode(newValue);
       } else if (inputRelatedAttrs$1.includes(attrName)) {
         const attr = mapAttrs$1[attrName] || attrName;
@@ -11317,7 +11361,7 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$9 {
   }
 
   // return country item by country code `data-country-code` (e.g. `US`)
-  #getCountryByCodeId(countryCode) {
+  #getCountryItemByCodeId(countryCode) {
     return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);
   }
 
@@ -11333,7 +11377,7 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$9 {
 
   #handleDefaultCountryCode(countryCode) {
     if (!this.comboBox.value) {
-      const countryCodeItem = this.#getCountryByCodeId(countryCode);
+      const countryCodeItem = this.#getCountryItemByCodeId(countryCode);
       // When replacing the input component (inserting internal component into text-field) -
       // Vaadin resets the input's value. We use setTimeout in order to make sure this happens
       // after the reset.
@@ -18918,7 +18962,9 @@ class RawHybridField extends BaseClass$6 {
 
   set value(val) {
     this.handleActiveInput(val);
-    this.activeInput.value = val;
+    setTimeout(() => {
+      this.activeInput.value = val;
+    });
   }
 
   async init() {