@descope/web-components-ui 1.0.136 → 1.0.150

package/src/components/descope-phone-field/PhoneFieldClass.js

@@ -1,16 +1,16 @@
 import { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 import { compose } from '../../helpers';
-import {
-	createProxy,
-	createStyleMixin,
-	draggableMixin,
-	proxyInputMixin
-} from '../../mixins';
+import { createProxy, createStyleMixin, draggableMixin, proxyInputMixin } from '../../mixins';
 import { TextFieldClass } from '../descope-text-field/TextFieldClass';
 import { ComboBoxClass } from '../descope-combo-box/ComboBoxClass';
 import CountryCodes from './CountryCodes';
-import { resetInputCursor, resetInputFieldInvalidBackgroundColor, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
+import {
+  resetInputCursor,
+  resetInputFieldDefaultWidth,
+  resetInputFieldInvalidBackgroundColor,
+  useHostExternalPadding,
+} from '../../helpers/themeHelpers/resetHelpers';
 
 const textVars = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
@@ -18,151 +18,148 @@ const comboVars = ComboBoxClass.cssVarList;
 export const componentName = getComponentName('phone-field');
 
 const customMixin = (superclass) =>
-	class PhoneFieldMixinClass extends superclass {
-		static get CountryCodes() {
-			return CountryCodes;
-		}
+  class PhoneFieldMixinClass extends superclass {
+    static get CountryCodes() {
+      return CountryCodes;
+    }
 
-		constructor() {
-			super();
-		}
+    init() {
+      super.init?.();
 
-		init() {
-			super.init?.();
+      const template = document.createElement('template');
 
-			const template = document.createElement('template');
-
-			template.innerHTML = `
-				<${descopeInternalComponentName} 
+      template.innerHTML = `
+				<${descopeInternalComponentName}
 					tabindex="-1"
 					slot="input"
 				></${descopeInternalComponentName}>
       		`;
 
-			this.baseElement.appendChild(template.content.cloneNode(true));
-
-			this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
-
-			forwardAttrs(this.shadowRoot.host, this.inputElement, {
-				includeAttrs: [
-					'size',
-					'bordered',
-					'invalid',
-					'minlength',
-					'maxlength',
-					'default-code',
-					'country-input-placeholder',
-					'phone-input-placeholder',
-				]
-			});
-		}
-	};
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
+
+      forwardAttrs(this.shadowRoot.host, this.inputElement, {
+        includeAttrs: [
+          'size',
+          'bordered',
+          'invalid',
+          'minlength',
+          'maxlength',
+          'default-code',
+          'country-input-placeholder',
+          'phone-input-placeholder',
+        ],
+      });
+    }
+  };
 
 const {
-	host,
-	label,
-	requiredIndicator,
-	inputField,
-	countryCodeInput,
-	phoneInput,
-	separator,
-	errorMessage,
-	helperText
+  host,
+  label,
+  requiredIndicator,
+  inputField,
+  countryCodeInput,
+  phoneInput,
+  separator,
+  errorMessage,
+  helperText,
 } = {
-	host: { selector: () => ':host' },
-	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-	inputField: { selector: '::part(input-field)' },
-	phoneInput: { selector: () => 'descope-text-field' },
-	countryCodeInput: { selector: () => 'descope-combo-box' },
-	separator: { selector: 'descope-phone-field-internal .separator' },
-	helperText: { selector: '::part(helper-text)' },
-	errorMessage: { selector: '::part(error-message)' }
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  inputField: { selector: '::part(input-field)' },
+  phoneInput: { selector: () => 'descope-text-field' },
+  countryCodeInput: { selector: () => 'descope-combo-box' },
+  separator: { selector: 'descope-phone-field-internal .separator' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
 };
 
 export const PhoneFieldClass = compose(
-	createStyleMixin({
-		mappings: {
-			fontSize: [
-				host,
-				inputField,
-				{
-					selector: TextFieldClass.componentName,
-					property: TextFieldClass.cssVarList.fontSize
-				},
-				{
-					selector: ComboBoxClass.componentName,
-					property: ComboBoxClass.cssVarList.fontSize
-				}
-			],
-			fontFamily: [
-				label,
-				errorMessage,
-				helperText,
-				{
-					...countryCodeInput,
-					property: ComboBoxClass.cssVarList.overlay.fontFamily
-				}
-			],
-			hostWidth: [
-				{ ...host, property: 'width' },
-				{ ...phoneInput, property: 'width' },
-				{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' }
-			],
-
-			inputBorderStyle: [
-				{ ...inputField, property: 'border-style' },
-				{ ...separator, property: 'border-left-style' }
-			],
-			inputBorderWidth: [
-				{ ...inputField, property: 'border-width' },
-				{ ...separator, property: 'border-left-width' }
-			],
-			inputBorderColor: [
-				{ ...inputField, property: 'border-color' },
-				{ ...separator, property: 'border-left-color' }
-			],
-			inputBorderRadius: { ...inputField, property: 'border-radius' },
-
-			countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
-			countryCodeDropdownWidth: {
-				...countryCodeInput,
-				property: '--vaadin-combo-box-overlay-width'
-			},
-			phoneInputWidth: { ...phoneInput, property: 'width' },
-
-			labelTextColor: [
-				{ ...label, property: 'color' },
-				{ ...requiredIndicator, property: 'color' },
-			],
-			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
-
-			inputValueTextColor: [
-				{ ...phoneInput, property: textVars.inputValueTextColor },
-				{ ...countryCodeInput, property: comboVars.inputValueTextColor }
-			],
-
-			inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
-
-			overlayItemBackgroundColor: {
-				selector: 'descope-combo-box',
-				property: comboVars.overlayItemBackgroundColor
-			},
-
-			inputOutlineStyle: { ...inputField, property: 'outline-style' },
-			inputOutlineColor: { ...inputField, property: 'outline-color' },
-			inputOutlineWidth: { ...inputField, property: 'outline-width' },
-			inputOutlineOffset: { ...inputField, property: 'outline-offset' },
-		},
-	}),
-	draggableMixin,
-	proxyInputMixin,
-	customMixin,
+  createStyleMixin({
+    mappings: {
+      fontSize: [
+        host,
+        inputField,
+        {
+          selector: TextFieldClass.componentName,
+          property: TextFieldClass.cssVarList.fontSize,
+        },
+        {
+          selector: ComboBoxClass.componentName,
+          property: ComboBoxClass.cssVarList.fontSize,
+        },
+      ],
+      fontFamily: [
+        label,
+        errorMessage,
+        helperText,
+        {
+          ...countryCodeInput,
+          property: ComboBoxClass.cssVarList.overlay.fontFamily,
+        },
+      ],
+      hostWidth: [
+        { ...host, property: 'width' },
+        { ...phoneInput, property: 'width' },
+        { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
+      ],
+
+      inputBorderStyle: [
+        { ...inputField, property: 'border-style' },
+        { ...separator, property: 'border-left-style' },
+      ],
+      inputBorderWidth: [
+        { ...inputField, property: 'border-width' },
+        { ...separator, property: 'border-left-width' },
+      ],
+      inputBorderColor: [
+        { ...inputField, property: 'border-color' },
+        { ...separator, property: 'border-left-color' },
+      ],
+      inputBorderRadius: { ...inputField, property: 'border-radius' },
+
+      countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
+      countryCodeDropdownWidth: {
+        ...countryCodeInput,
+        property: '--vaadin-combo-box-overlay-width',
+      },
+      phoneInputWidth: { ...phoneInput, property: 'width' },
+
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+
+      inputValueTextColor: [
+        { ...phoneInput, property: textVars.inputValueTextColor },
+        { ...countryCodeInput, property: comboVars.inputValueTextColor },
+      ],
+
+      inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
+
+      overlayItemBackgroundColor: {
+        selector: 'descope-combo-box',
+        property: comboVars.overlayItemBackgroundColor,
+      },
+
+      inputOutlineStyle: { ...inputField, property: 'outline-style' },
+      inputOutlineColor: { ...inputField, property: 'outline-color' },
+      inputOutlineWidth: { ...inputField, property: 'outline-width' },
+      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin,
+  customMixin
 )(
-	createProxy({
-		slots: [],
-		wrappedEleName: 'vaadin-text-field',
-		style: () => `
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
 			:host {
 				display: inline-flex;
 				max-width: 100%;
@@ -172,6 +169,7 @@ export const PhoneFieldClass = compose(
 			${useHostExternalPadding(PhoneFieldClass.cssVarList)}
 			${resetInputCursor('vaadin-text-field')}
 			${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
+			${resetInputFieldDefaultWidth()}
 
 			div {
 				display: inline-flex;
@@ -220,7 +218,7 @@ export const PhoneFieldClass = compose(
 			descope-text-field {
 				flex-grow: 1;
 				${textVars.inputOutlineWidth}: 0;
-				${comboVars.inputOutlineOffset}: 0;
+				${textVars.inputOutlineOffset}: 0;
 				${textVars.inputBorderWidth}: 0;
 				${textVars.inputBorderRadius}: 0;
 			}
@@ -231,9 +229,9 @@ export const PhoneFieldClass = compose(
 				border: none;
 			}
 		`,
-		excludeAttrsSync: ['tabindex'],
-		componentName
-	})
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
 );
 
 export default PhoneFieldClass;