@descope/web-components-ui 1.0.73 → 1.0.75

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

@@ -0,0 +1,179 @@
+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 TextField from '../descope-text-field/TextField';
+import ComboBox from '../descope-combo-box/ComboBox';
+
+const textVars = TextField.cssVarList;
+const comboVars = ComboBox.cssVarList;
+
+export const componentName = getComponentName('phone-field');
+
+const customMixin = (superclass) =>
+	class PhoneFieldClass extends superclass {
+		constructor() {
+			super();
+		}
+
+		init() {
+			super.init?.();
+
+			const template = document.createElement('template');
+
+			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',
+				]
+			});
+		}
+	};
+
+const {
+	inputWrapper,
+	countryCodeInput,
+	phoneInput,
+	label,
+	requiredIndicator,
+	separator
+} = {
+	inputWrapper: { selector: '::part(input-field)' },
+	phoneInput: { selector: () => 'descope-text-field' },
+	countryCodeInput: { selector: () => 'descope-combo-box' },
+	label: { selector: '> label' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	separator: { selector: 'descope-phone-field-internal .separator' }
+};
+
+const PhoneField = compose(
+	createStyleMixin({
+		mappings: {
+			componentWidth: { selector: () => ':host', property: 'width' },
+
+			wrapperBorderStyle: [
+				{ ...inputWrapper, property: 'border-style' },
+				{ ...separator, property: 'border-left-style' }
+			],
+			wrapperBorderWidth: [
+				{ ...inputWrapper, property: 'border-width' },
+				{ ...separator, property: 'border-left-width' }
+			],
+			wrapperBorderColor: [
+				{ ...inputWrapper, property: 'border-color' },
+				{ ...separator, property: 'border-left-color' }
+			],
+			wrapperBorderRadius: { ...inputWrapper, property: 'border-radius' },
+
+			inputHeight: { ...inputWrapper, property: 'height' },
+
+			countryCodeInputWidth: { ...countryCodeInput, property: comboVars.width },
+			countryCodeDropdownWidth: {
+				...countryCodeInput,
+				property: '--vaadin-combo-box-overlay-width'
+			},
+
+			phoneInputWidth: { ...phoneInput, property: 'width' },
+
+			color: [label, requiredIndicator],
+
+			placeholderColor: {
+				...phoneInput,
+				property: textVars.placeholderColor
+			},
+
+			overlayItemBackgroundColor: {
+				selector: 'descope-combo-box',
+				property: comboVars.overlayItemBackgroundColor
+			},
+		},
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	customMixin,
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => `
+			:host {
+				--vaadin-field-default-width: auto;
+				display: inline-block;
+			}
+			div {
+				display: inline-flex;
+			}
+			vaadin-text-field {
+				padding: 0;
+				width: 100%;
+				height: 100%;
+			}
+			vaadin-text-field::part(input-field) {
+				padding: 0;
+				min-height: 0;
+				background: transparent;
+				overflow: hidden;
+			}
+			descope-phone-field-internal {
+				-webkit-mask-image: none;
+				padding: 0;
+				min-height: 0;
+				width: 100%;
+				height: 100%;	
+			}
+			descope-phone-field-internal > div {
+				width: 100%;
+				height: 100%;
+			}
+			descope-phone-field-internal .separator {
+				flex: 0;
+				border: none;
+			}
+			descope-combo-box {
+				flex-shrink: 0;
+				height: 100%;
+				${comboVars.borderWidth}: 0;
+			}
+			descope-text-field {
+				flex-grow: 1;
+				min-height: 0;
+				height: 100%;
+				${textVars.borderWidth}: 0;
+				${textVars.borderRadius}: 0;
+			}
+			vaadin-text-field[required]::part(required-indicator)::after {
+				content: "*";
+			}
+			vaadin-text-field[readonly] > input:placeholder-shown {
+				opacity: 1;
+			}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		componentName
+	})
+);
+
+export default PhoneField;

package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -0,0 +1,213 @@
+import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
+import { getComponentName } from '../../../helpers/componentHelpers';
+import { createDispatchEvent } from '../../../helpers/mixinsHelpers';
+import CountryCodes from '../CountryCodes';
+import { comboBoxItem } from '../helpers';
+
+export const componentName = getComponentName('phone-field-internal');
+
+const commonAttrs = [
+	'disabled',
+	'size',
+	'bordered',
+	'invalid',
+];
+const countryAttrs = ['country-input-placeholder', 'default-code'];
+const phoneAttrs = ['phone-input-placeholder', 'maxlength'];
+const mapAttrs = {
+	'country-input-placeholder': 'placeholder',
+	'phone-input-placeholder': 'placeholder',
+}
+
+const inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs);
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
+
+class PhoneFieldInternal extends BaseInputClass {
+	static get observedAttributes() {
+		return [].concat(
+			BaseInputClass.observedAttributes || [],
+			inputRelatedAttrs,
+		);
+	}
+
+	#dispatchBlur = createDispatchEvent.bind(this, 'blur');
+	#dispatchFocus = createDispatchEvent.bind(this, 'focus');
+
+	constructor() {
+		super();
+
+		this.innerHTML = `
+        <div>
+            <descope-combo-box
+				item-label-path="data-name"
+				item-value-path="data-id"
+			>
+			${CountryCodes.map(item => comboBoxItem(item)).join('')}
+			</descope-combo-box>
+			<div class="separator"></div>
+            <descope-text-field type="tel"></descope-text-field>
+         </div>`;
+
+		this.countryCodeInput = this.querySelector('descope-combo-box');
+		this.phoneNumberInput = this.querySelector('descope-text-field');
+		this.inputs = [
+			this.countryCodeInput,
+			this.phoneNumberInput
+		];
+	}
+
+	get value() {
+		return this.inputs.map(({ value }) => value).join('-');
+	}
+
+	set value(val) {
+		const [countryCode = '', phoneNumber = ''] = val.split('-');
+		this.countryCodeInput.value = countryCode;
+		this.phoneNumberInput.value = phoneNumber;
+	}
+
+	get phoneNumberValue() {
+		return this.phoneNumberInput.value;
+	}
+
+	get countryCodeValue() {
+		return this.countryCodeInput.shadowRoot.querySelector('input').value;
+	}
+
+	get minLength() {
+		return parseInt(this.getAttribute('minlength'), 10) || 0;
+	}
+
+	getValidity() {
+		const hasCode = this.countryCodeInput.value;
+		const hasPhone = this.phoneNumberInput.value;
+		const emptyValue = !hasCode || !hasPhone;
+		const hasMinPhoneLength = this.phoneNumberInput.value.length && this.phoneNumberInput.value.length < this.minLength;
+
+		if (this.isRequired && emptyValue) {
+			return { valueMissing: true };
+		}
+		if (hasMinPhoneLength) {
+			return { tooShort: true };
+		}
+		if ((hasCode && !hasPhone) || (!hasCode && hasPhone)) {
+			return { valueMissing: true };
+		}
+		return {}
+	};
+
+	init() {
+		super.init();
+		this.initInputs();
+		this.setComboBoxDescriptor();
+	}
+
+	handleDefaultCountryCode(countryCode) {
+		if (!this.countryCodeInput.value) {
+			const countryData = this.countryCodeInput.items.find(c => c['data-id'] === countryCode)?.['data-name'];
+
+			// 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) {
+				setTimeout(() => this.countryCodeInput.value = countryData);
+			}
+		}
+	}
+
+	// We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
+	// field that it searches the value, and the finaly display value of the input. We want to search ALL
+	// the values (so we made a field with all the values), but display ONLY the dial code, so we added
+	// this setter, which does that.
+	setComboBoxDescriptor() {
+		const comboBox = this.countryCodeInput;
+		const input = comboBox.shadowRoot.querySelector('input');
+		const valueDescriptor = Object.getOwnPropertyDescriptor(
+			input.constructor.prototype,
+			'value'
+		);
+		Object.defineProperties(input, {
+			value: {
+				...valueDescriptor,
+				set(val) {
+					if (!comboBox.items?.length) {
+						return;
+					}
+
+					const [_code, dialCode] = val.split(' ');
+
+					if (val === this.value) {
+						return;
+					}
+
+					valueDescriptor.set.call(this, dialCode || '');
+				}
+			}
+		});
+	}
+
+	initInputs() {
+		let prevVal = this.value
+		let blurTimerId
+
+		// Sanitize phone input value to filter everything but digits
+		this.phoneNumberInput.addEventListener('input', (e) => {
+			const telDigitsRegExp = /^\d$/;
+			const sanitizedInput = e.target.value
+				.split('')
+				.filter(char => telDigitsRegExp.test(char))
+				.join('');
+			e.target.value = sanitizedInput;
+		});
+
+		this.inputs.forEach(input => {
+			input.addEventListener('blur', (e) => {
+				e.stopImmediatePropagation();
+				blurTimerId = setTimeout(() => {
+					blurTimerId = null
+					this.#dispatchBlur()
+				});
+			})
+
+			input.addEventListener('focus', (e) => {
+				e.stopImmediatePropagation();
+				clearTimeout(blurTimerId)
+				if (!blurTimerId) {
+					this.#dispatchFocus()
+				}
+			})
+
+			input.addEventListener('input', (e) => {
+				if (prevVal === this.value) {
+					e.stopImmediatePropagation();
+				}
+			});
+		});
+	}
+
+	attributeChangedCallback(attrName, oldValue, newValue) {
+		super.attributeChangedCallback(attrName, oldValue, newValue);
+
+		if (oldValue !== newValue) {
+			if (attrName === 'default-code' && newValue) {
+				this.handleDefaultCountryCode(newValue);
+			}
+			else if (inputRelatedAttrs.includes(attrName)) {
+				const attr = mapAttrs[attrName] || attrName;
+
+				if (commonAttrs.includes(attrName)) {
+					this.inputs.forEach(input => input.setAttribute(attr, newValue));
+				}
+				else if (countryAttrs.includes(attrName)) {
+					this.countryCodeInput.setAttribute(attr, newValue);
+				}
+				else if (phoneAttrs.includes(attrName)) {
+					this.phoneNumberInput.setAttribute(attr, newValue);
+				}
+			}
+		}
+	}
+}
+
+export default PhoneFieldInternal;

package/src/components/descope-phone-field/descope-phone-field-internal/index.js

@@ -0,0 +1,6 @@
+import '../../descope-combo-box';
+import '../../descope-text-field';
+
+import PhoneFieldInternal, { componentName } from './PhoneFieldInternal';
+
+customElements.define(componentName, PhoneFieldInternal);

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

@@ -0,0 +1,23 @@
+// We use JSDelivr in order to fetch the images as image file from this library (svg-country-flags)
+// This reduces our bundle size, and we use it as a static remote resource.
+export const getCountryFlag = (code) =>
+	`https://cdn.jsdelivr.net/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;
+
+export const comboBoxItem = ({ code, dialCode, name: country }) => (`
+	<div
+		style="display:flex; flex-direction: column;"
+		data-id="${code}"
+		data-name="${code} ${dialCode} ${country}"
+	>
+		<div>
+			<span>
+				<img src="${getCountryFlag(code)}" width="20"/>
+			</span>
+			<span>${country}</span>
+		</div>
+		<div>
+			<span>${code}</span>
+			<span>${dialCode}</span>
+		</div>
+	</div>
+`);

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

@@ -0,0 +1,9 @@
+import './descope-phone-field-internal';
+import '../descope-combo-box';
+import '../descope-text-field';
+
+import PhoneField, { componentName } from './PhoneField';
+
+customElements.define(componentName, PhoneField);
+
+export { PhoneField };

package/src/components/descope-text-field/TextField.js

@@ -13,13 +13,36 @@ export const componentName = getComponentName('text-field');
 
 let overrides = ``;
 
+const observedAttrs = ['type'];
+
+const customMixin = (superclass) =>
+	class TextFieldClass extends superclass {
+		static get observedAttributes() {
+			return observedAttrs.concat(superclass.observedAttributes || []);
+		}
+
+		attributeChangedCallback(attrName, oldVal, newVal) {
+			super.attributeChangeCallback?.(attrName, oldVal, newVal);
+
+			// Vaadin doesn't allow to change the input type attribute.
+			// We need the ability to do that, so we're overriding their
+			// behavior with their private API.
+			// When receiving a `type` attribute, we use their private API
+			// to set it on the input.
+			if (attrName === 'type') {
+				this.baseElement._setType(newVal);
+			}
+		}
+	}
+
 const TextField = compose(
 	createStyleMixin({
 		mappings: textFieldMappings
 	}),
 	draggableMixin,
 	proxyInputMixin,
-	componentNameValidationMixin
+	componentNameValidationMixin,
+	customMixin
 )(
 	createProxy({
 		slots: ['prefix', 'suffix'],
@@ -33,14 +56,20 @@ const TextField = compose(
 overrides = `
 	:host {
 		display: inline-block;
+		--vaadin-field-default-width: auto;
 	}
-
 	vaadin-text-field {
 		margin: 0;
 		padding: 0;
+		width: 100%;
+		height: 100%;
+	}
+	vaadin-text-field input {
+		min-height: 0;
 	}
 	vaadin-text-field::part(input-field) {
 		overflow: hidden;
+		padding: 0;
 	}
 	vaadin-text-field[readonly] > input:placeholder-shown {
 		opacity: 1;
@@ -55,7 +84,6 @@ overrides = `
 	}
 	vaadin-text-field > label,
 	vaadin-text-field::part(input-field) {
-		cursor: pointer;
 		color: var(${TextField.cssVarList.color});
 	}
 	vaadin-text-field::part(input-field):focus {

package/src/components/descope-text-field/textFieldMappings.js

@@ -24,7 +24,10 @@ export default {
 	],
 	borderRadius: { selector: selectors.input },
 	boxShadow: { selector: selectors.input },
-	fontSize: {},
+
+	// we apply font-size also on the host so we can set its width with em
+	fontSize: [{}, { selector: selectors.host }],
+
 	height: { selector: selectors.input },
 	padding: { selector: selectors.input },
 	outline: { selector: selectors.input },

package/src/index.js

@@ -16,6 +16,7 @@ import './components/descope-text';
 import './components/descope-text-area';
 import './components/descope-text-field';
 import './components/descope-image';
+import './components/descope-phone-field';
 
 export {
 	globalsThemeToStyle,

package/src/mixins/inputValidationMixin.js

@@ -5,7 +5,9 @@ const observedAttributes = [
 
 const errorAttributes = {
   valueMissing: 'data-errormessage-value-missing',
-  patternMismatch: 'data-errormessage-pattern-mismatch'
+  patternMismatch: 'data-errormessage-pattern-mismatch',
+  tooShort: 'data-errormessage-pattern-mismatch-too-short',
+  tooLong: 'data-errormessage-pattern-mismatch-too-long',
 }
 export const inputValidationMixin = (superclass) => class InputValidationMixinClass extends superclass {
   static get observedAttributes() {
@@ -35,6 +37,14 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
     return 'Please match the requested format.'
   }
 
+  get defaultErrorMsgTooShort() {
+    return `Minimum length is ${this.getAttribute('minlength')}.`
+  }
+
+  get defaultErrorMsgTooLong() {
+    return `Maximum length is ${this.getAttribute('maxlength')}.  `
+  }
+
   getErrorMessage(flags) {
     switch (true) {
       case flags.valueMissing:
@@ -43,6 +53,12 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
       case flags.patternMismatch || flags.typeMismatch:
         return this.getAttribute(errorAttributes.patternMismatch) ||
           this.defaultErrorMsgPatternMismatch
+      case flags.tooShort:
+        return this.getAttribute(errorAttributes.tooShort) ||
+          this.defaultErrorMsgTooShort
+      case flags.tooLong:
+        return this.getAttribute(errorAttributes.tooLong) ||
+          this.defaultErrorMsgTooLong
       case flags.customError:
         return this.validationMessage
       default:
@@ -110,6 +126,9 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
     this.addEventListener('invalid', (e) => e.stopPropagation())
     this.addEventListener('input', this.#setValidity)
 
-    this.#setValidity();
+    // The attribute sync takes time, so getValidity returns valid,
+    // even when it shouldn't. This way allows all attributes to sync
+    // after render, before checking the validity.
+    setTimeout(() => this.#setValidity());
   }
 }

package/src/mixins/portalMixin.js

@@ -15,7 +15,12 @@ const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
 const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
 
-export const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
+export const portalMixin = ({
+  name,
+  selector,
+  mappings = {},
+  forward: { attributes = [], include = true } = {}
+}) => (superclass) => {
   const eleDisplayName = name || sanitizeSelector(selector)
 
   const BaseClass = createStyleMixin({
@@ -58,9 +63,9 @@ export const portalMixin = ({ name, selector, mappings = {} }) => (superclass) =
 
     init() {
       super.init?.();
-      forwardAttrs(this, this.#portalEle, { excludeAttrs: ['hover'] })
+      forwardAttrs(this, this.#portalEle, { [include ? 'includeAttrs' : 'excludeAttrs']: attributes })
 
       this.#handleHoverAttribute();
     }
   }
-}
+}

package/src/theme/components/comboBox.js

@@ -1,6 +1,5 @@
 import globals from '../globals';
 import ComboBox from '../../components/descope-combo-box/ComboBox';
-import { textField } from './textField';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 
 const globalRefs = getThemeRefs(globals);
@@ -8,18 +7,49 @@ const globalRefs = getThemeRefs(globals);
 const vars = ComboBox.cssVarList;
 
 export const comboBox = {
-	...textField(ComboBox.cssVarList),
+	[vars.borderColor]: globalRefs.colors.surface.main,
+	[vars.borderWidth]: '1px',
+	[vars.borderStyle]: 'solid',
+	[vars.cursor]: 'pointer',
+	[vars.padding]: '0',
+	[vars.placeholderColor]: globalRefs.colors.surface.main,
+	[vars.toggleColor]: globalRefs.colors.surface.contrast,
+	[vars.toggleCursor]: 'pointer',
 	size: {
 		xs: {
-			[vars.width]: '30px'
+			[vars.height]: '14px',
+			[vars.fontSize]: '8px',
+			[vars.padding]: `0 ${globalRefs.spacing.xs}`
+		},
+		sm: {
+			[vars.height]: '20px',
+			[vars.fontSize]: '10px',
+			[vars.padding]: `0 ${globalRefs.spacing.sm}`
+		},
+		md: {
+			[vars.height]: '30px',
+			[vars.fontSize]: '14px',
+			[vars.padding]: `0 ${globalRefs.spacing.md}`
+		},
+		lg: {
+			[vars.height]: '40px',
+			[vars.fontSize]: '20px',
+			[vars.padding]: `0 ${globalRefs.spacing.lg}`
+		},
+		xl: {
+			[vars.height]: '50px',
+			[vars.fontSize]: '25px',
+			[vars.padding]: `0 ${globalRefs.spacing.xl}`
 		}
 	},
-	[vars.borderColor]: 'green',
-	[vars.borderWidth]: '0',
-	[vars.cursor]: 'pointer',
-	[vars.padding]: '0',
-	// [vars.overlayBackground]: 'blue',
-	// [vars.overlayBorder]: '3px solid red',
+	_invalid: {
+		[vars.borderColor]: globalRefs.colors.error.main,
+		[vars.placeholderColor]: globalRefs.colors.error.light,
+		[vars.toggleColor]: globalRefs.colors.error.main,
+	},
+	// [vars.overlayCursor]: 'pointer',
+	// [vars.overlayBackground]: globalRefs.colors.surface.light,
+	// [vars.overlayBorder]: `2px solid red`,
 };
 
 export default comboBox;

package/src/theme/components/index.js

@@ -15,6 +15,7 @@ import passcode from './passcode';
 import { loaderRadial, loaderLinear } from './loader';
 import comboBox from './comboBox';
 import image from './image';
+import phoneField from './phoneField';
 
 export default {
 	button,
@@ -34,5 +35,6 @@ export default {
 	loaderRadial,
 	loaderLinear,
 	comboBox,
-	image
+	image,
+	phoneField
 };