@descope/web-components-ui 1.0.74 → 1.0.76

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

@@ -0,0 +1,186 @@
+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, {...phoneInput, property: textVars.color}, {...countryCodeInput, property: comboVars.color}],
+
+			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;
+
+/*
+Bugs:
+- default code value, open the dropdown and click outside, the value is gone
+- make invalid by blur, enter a 6 digit number, component is valid but the divider is red
+- missing handling of outline when focused, hiding the divider when focusing the phone
+*/

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-area/TextArea.js

@@ -31,7 +31,9 @@ const TextArea = compose(
 			borderStyle: { selector: selectors.input },
 			borderColor: { selector: selectors.input },
 			borderRadius: { selector: selectors.input },
-			outline: { selector: selectors.input },
+			outlineWidth: { selector: selectors.input },
+			outlineStyle: { selector: selectors.input },
+			outlineColor: { selector: selectors.input },
 			outlineOffset: { selector: selectors.input }
 		}
 	}),

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,18 @@ 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::part(input-field) {
 		overflow: hidden;
+		padding: 0;
 	}
 	vaadin-text-field[readonly] > input:placeholder-shown {
 		opacity: 1;
@@ -53,9 +80,13 @@ overrides = `
 		-webkit-text-fill-color: var(${TextField.cssVarList.color});
 		box-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;
 	}
+
+	vaadin-text-field input {
+		-webkit-mask-image: none;
+	}
+
 	vaadin-text-field > label,
 	vaadin-text-field::part(input-field) {
-		cursor: pointer;
 		color: var(${TextField.cssVarList.color});
 	}
 	vaadin-text-field::part(input-field):focus {
@@ -69,6 +100,10 @@ overrides = `
 	vaadin-text-field[readonly]::part(input-field)::after {
 		border: 0 solid;
 	}
+
+	vaadin-text-field::before {
+		height: unset;
+	}
 `;
 
 export default TextField;

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

@@ -1,34 +1,42 @@
 const selectors = {
 	label: '::part(label)',
-	input: '::part(input-field)',
+	inputWrapper: '::part(input-field)',
 	readOnlyInput: '[readonly]::part(input-field)::after',
 	placeholder: '> input:placeholder-shown',
-	host: () => ':host'
+	host: () => ':host',
+	input: 'input'
 };
 
 export default {
-	backgroundColor: { selector: selectors.input },
-	color: { selector: selectors.input },
+	backgroundColor: { selector: selectors.inputWrapper },
+	color: { selector: selectors.inputWrapper },
 	width: { selector: selectors.host },
 	borderColor: [
-		{ selector: selectors.input },
+		{ selector: selectors.inputWrapper },
 		{ selector: selectors.readOnlyInput }
 	],
 	borderWidth: [
-		{ selector: selectors.input },
+		{ selector: selectors.inputWrapper },
 		{ selector: selectors.readOnlyInput }
 	],
 	borderStyle: [
-		{ selector: selectors.input },
+		{ selector: selectors.inputWrapper },
 		{ selector: selectors.readOnlyInput }
 	],
-	borderRadius: { selector: selectors.input },
-	boxShadow: { selector: selectors.input },
-	fontSize: {},
-	height: { selector: selectors.input },
-	padding: { selector: selectors.input },
-	outline: { selector: selectors.input },
-	outlineOffset: { selector: selectors.input },
+	borderRadius: { selector: selectors.inputWrapper },
+	boxShadow: { selector: selectors.inputWrapper },
 
+	// we apply font-size also on the host so we can set its width with em
+	fontSize: [{}, { selector: selectors.host }],
+	
+	height: { selector: selectors.inputWrapper },
+	padding: { selector: selectors.inputWrapper },
+	margin: { selector: selectors.inputWrapper },
+	caretColor: { selector: selectors.input },
+	outlineColor: { selector: selectors.inputWrapper },
+	outlineStyle: { selector: selectors.inputWrapper },
+	outlineWidth: { selector: selectors.inputWrapper },
+	outlineOffset: { selector: selectors.inputWrapper },
+	textAlign: {selector: selectors.input},
 	placeholderColor: { selector: selectors.placeholder, property: 'color' }
 };

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/normalizeBooleanAttributesMixin.js

@@ -1,11 +1,20 @@
-// we want all the valueless attributes to have "true" value 
+import { observeAttributes } from "../helpers/componentHelpers";
+
+// we want all the valueless attributes to have "true" value
+// and all the falsy attribute to be removed
 export const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (newValue === '') {
-      this.setAttribute(attrName, 'true')
-      newValue = 'true'
-    }
+  init() {
+    super.init?.();
+
+    observeAttributes(this, (attrs) =>
+      attrs.forEach(attr => {
+        const attrVal = this.getAttribute(attr)
 
-    super.attributeChangedCallback?.(attrName, oldValue, newValue)
+        if (attrVal === '') {
+          this.setAttribute(attr, 'true')
+        } else if (attrVal === 'false') {
+          this.removeAttribute(attr)
+        }
+      }), {})
   }
 }