@descope/web-components-ui 1.0.120 → 1.0.121

package/dist/index.esm.js

@@ -4403,6 +4403,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => (`
 		style="display:flex; flex-direction: column;"
 		data-id="${code}"
 		data-name="${code} ${dialCode} ${country}"
+		data-dial-code="${dialCode}"
 	>
 		<div>
 			<span>
@@ -4474,7 +4475,10 @@ class PhoneFieldInternal extends BaseInputClass$1 {
 
 	set value(val) {
 		const [countryCode = '', phoneNumber = ''] = val.split('-');
-		this.countryCodeInput.value = countryCode;
+		const countryCodeItem = this.getCountryByDialCode(countryCode);
+		if (countryCodeItem) {
+			this.countryCodeInput.selectedItem = countryCodeItem;
+		}
 		this.phoneNumberInput.value = phoneNumber;
 	}
 
@@ -4509,7 +4513,6 @@ class PhoneFieldInternal extends BaseInputClass$1 {
 	};
 
 	init() {
-
 		this.addEventListener('focus', (e) => {
 			// we want to ignore focus events we are dispatching
 			if (e.isTrusted)
@@ -4521,18 +4524,24 @@ class PhoneFieldInternal extends BaseInputClass$1 {
 		this.setComboBoxDescriptor();
 	}
 
+	getCountryByDialCode(countryDialCode) {
+		return this.countryCodeInput.items.find(c => c.getAttribute('data-dial-code') === countryDialCode);
+	}
+
+	getCountryByCodeId(countryCode) {
+		return this.countryCodeInput.items.find(c => c['data-id'] === countryCode)?.['data-name'];
+	}
+
 	handleDefaultCountryCode(countryCode) {
 		if (!this.countryCodeInput.value) {
-			const countryData = this.countryCodeInput.items.find(c => c['data-id'] === countryCode)?.['data-name'];
-
+			const countryCodeItem = this.getCountryByCodeId(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.
-			if (countryData) {
+			if (countryCodeItem) {
 				setTimeout(() => {
-					this.countryCodeInput.selectedItem = this.countryCodeInput.items.find(node => node['data-id'] === countryCode);
+					this.countryCodeInput.selectedItem = countryCodeItem;
 				});
-
 			}
 		}
 	}
@@ -5208,7 +5217,7 @@ const globalsThemeToStyle = (theme, themeName = '') => {
 		''
 	);
 
-	if(!themeName) return style
+	if (!themeName) return style
 
 	return `*[data-theme="${themeName}"] {${style}}`
 };