@descope/web-components-ui 1.0.120 → 1.0.122

package/dist/index.esm.js

@@ -3129,6 +3129,7 @@ const ComboBoxClass = compose(
 		selector: '',
 		mappings: {
 			backgroundColor: { selector: 'vaadin-combo-box-scroller' },
+			fontFamily: { selector: 'vaadin-combo-box-item' },
 			// TODO: this mapping doesn't work, needs fixing.
 			cursor: { selector: 'vaadin-combo-box-item' },
 		},
@@ -4403,6 +4404,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 +4476,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 +4514,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 +4525,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;
 				});
-
 			}
 		}
 	}
@@ -4695,7 +4705,11 @@ const PhoneFieldClass = compose(
 			fontFamily: [
 				label$1,
 				errorMessage$1,
-				helperText$1
+				helperText$1,
+				{
+					...countryCodeInput,
+					property: ComboBoxClass.cssVarList.overlay.fontFamily
+				}
 			],
 			hostWidth: [
 				{ ...host$1, property: 'width' },
@@ -5208,7 +5222,7 @@ const globalsThemeToStyle = (theme, themeName = '') => {
 		''
 	);
 
-	if(!themeName) return style
+	if (!themeName) return style
 
 	return `*[data-theme="${themeName}"] {${style}}`
 };