@descope/web-components-ui 1.0.119 → 1.0.121

package/dist/index.esm.js

@@ -2597,7 +2597,7 @@ const {
 	internalWrapper,
 	focusedDigitField
 } = {
-	host: () => ':host',
+	host: { selector: () => ':host' },
 	focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
 	digitField: { selector: () => TextFieldClass.componentName },
 	label: { selector: '::part(label)' },
@@ -2610,6 +2610,7 @@ const textVars$1 = TextFieldClass.cssVarList;
 const PasscodeClass = compose(
 	createStyleMixin({
 		mappings: {
+			fontSize: [{ ...digitField, property: textVars$1.fontSize }, host$5],
 			hostWidth: { property: 'width' },
 			fontFamily: host$5,
 			labelTextColor: [
@@ -4402,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>
@@ -4473,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;
 	}
 
@@ -4508,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)
@@ -4520,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;
 				});
-
 			}
 		}
 	}
@@ -5207,7 +5217,7 @@ const globalsThemeToStyle = (theme, themeName = '') => {
 		''
 	);
 
-	if(!themeName) return style
+	if (!themeName) return style
 
 	return `*[data-theme="${themeName}"] {${style}}`
 };
@@ -6236,6 +6246,7 @@ const vars$7 = PasscodeClass.cssVarList;
 
 const passcode = {
 	[vars$7.fontFamily]: refs.fontFamily,
+	[vars$7.fontSize]: refs.fontSize,
 	[vars$7.labelTextColor]: refs.labelTextColor,
 	[vars$7.labelRequiredIndicator]: refs.requiredIndicator,
 	[vars$7.digitValueTextColor]: refs.valueTextColor,