@descope/web-components-ui 0.0.1

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

@@ -0,0 +1,313 @@
+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 { TextFieldClass } from '../../descope-text-field/TextFieldClass';
+import { ComboBoxClass } from '../../descope-combo-box/ComboBoxClass';
+import CountryCodes from '../CountryCodes';
+import {
+  resetInputCursor,
+  resetInputLabelPosition,
+  resetInputFieldDefaultWidth,
+  resetInputFieldInvalidBackgroundColor,
+  useHostExternalPadding,
+} from '../../../helpers/themeHelpers/resetHelpers';
+
+const textVars = TextFieldClass.cssVarList;
+const comboVars = ComboBoxClass.cssVarList;
+
+export const componentName = getComponentName('phone-field');
+
+const customMixin = (superclass) =>
+  class PhoneFieldMixinClass extends superclass {
+    static get CountryCodes() {
+      return CountryCodes;
+    }
+
+    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',
+          'disabled',
+          'restrict-countries',
+          'country-input-label',
+          'readonly',
+          'label',
+          'label-type',
+          'allow-alphanumeric-input',
+        ],
+      });
+    }
+
+    get countryCodeItems() {
+      return this.inputElement?.countryCodeValue;
+    }
+
+    get phoneNumberInputEle() {
+      return this.inputElement?.phoneNumberInputEle;
+    }
+
+    get countryCodeInputData() {
+      return this.inputElement?.countryCodeInputData;
+    }
+
+    get countryCodes() {
+      return Array.from(this.inputElement.countryCodeInputData).map((ele) =>
+        ele.getAttribute('data-country-code')
+      );
+    }
+  };
+
+const {
+  host,
+  label,
+  requiredIndicator,
+  inputField,
+  internalAfter,
+  countryCodeInput,
+  phoneInput,
+  separator,
+  errorMessage,
+  helperText,
+} = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  inputField: { selector: '::part(input-field)' },
+  internalAfter: { selector: 'descope-phone-field-internal::after' },
+  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' },
+      ],
+      hostDirection: { ...host, property: 'direction' },
+
+      inputBorderStyle: [
+        { ...internalAfter, property: 'outline-style' },
+        { ...separator, property: 'border-left-style' },
+      ],
+      inputBorderWidth: [
+        { ...internalAfter, property: 'outline-width' },
+        { ...separator, property: 'border-left-width' },
+      ],
+      inputBorderColor: [
+        { ...internalAfter, property: 'outline-color' },
+        { ...separator, property: 'border-left-color' },
+      ],
+      inputBorderRadius: [
+        { ...inputField, property: 'border-radius' },
+        { ...internalAfter, property: 'border-radius' },
+      ],
+
+      countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
+      countryCodeDropdownWidth: {
+        ...countryCodeInput,
+        property: '--vaadin-combo-box-overlay-width',
+      },
+      phoneInputWidth: { ...phoneInput, property: 'width' },
+
+      horizontalPadding: [
+        { ...phoneInput, property: 'padding-left' },
+        { ...phoneInput, property: 'padding-right' },
+        { ...countryCodeInput, property: 'padding-left' },
+        { ...countryCodeInput, property: 'padding-right' },
+      ],
+
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
+
+      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' },
+
+      valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],
+      valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],
+      marginInlineStart: [
+        { ...phoneInput, property: textVars.marginInlineStart },
+        { ...countryCodeInput, property: comboVars.marginInlineStart },
+      ],
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  customMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
+			:host {
+				display: inline-flex;
+				max-width: 100%;
+				min-width: 15em;
+				box-sizing: border-box;
+			}
+			${useHostExternalPadding(PhoneFieldClass.cssVarList)}
+			${resetInputCursor('vaadin-text-field')}
+			${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
+			${resetInputFieldDefaultWidth()}
+
+			div {
+				display: inline-flex;
+			}
+			vaadin-text-field {
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				padding: 0;
+			}
+			vaadin-text-field[focus-ring]::part(input-field) {
+				box-shadow: none;
+			}
+			vaadin-text-field::before {
+				height: 0;
+			}
+			vaadin-text-field::part(label) {
+        margin-left: 0;
+        margin-right: 0;
+      }
+			vaadin-text-field::part(input-field) {
+				padding: 0;
+				background: transparent;
+				overflow: hidden;
+			}
+			descope-phone-field-internal {
+				-webkit-mask-image: none;
+				padding: 0;
+				width: 100%;
+				height: 100%;
+        direction: ltr;
+        position: relative;
+			}
+      descope-phone-field-internal::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        box-sizing: border-box;
+        outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);
+        pointer-events: none;
+      }
+			descope-phone-field-internal > div {
+				width: 100%;
+				height: 100%;
+			}
+			descope-phone-field-internal .separator {
+				flex: 0;
+				border: none;
+			}
+			descope-combo-box {
+				flex-shrink: 0;
+        min-width: 5.75em;
+				${comboVars.inputOutlineWidth}: 0;
+				${comboVars.inputOutlineOffset}: 0;
+				${comboVars.inputBorderWidth}: 0;
+				${comboVars.inputBorderRadius}: 0;
+			}
+			descope-text-field {
+				flex-grow: 1;
+				${textVars.inputOutlineWidth}: 0;
+				${textVars.inputOutlineOffset}: 0;
+				${textVars.inputBorderWidth}: 0;
+				${textVars.inputBorderRadius}: 0;
+      }
+
+      :host([label-type="floating"]) vaadin-text-field::part(label) {
+        display: none;
+      }
+      descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
+        opacity: 0;
+      }
+      descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
+        opacity: 0;
+      }
+
+			vaadin-text-field::part(input-field)::after {
+				border: none;
+			}
+      ${resetInputLabelPosition('vaadin-text-field')}
+		`,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);
+
+export default PhoneFieldClass;

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

@@ -0,0 +1,272 @@
+import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
+import { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';
+import CountryCodes from '../../CountryCodes';
+import { comboBoxItem, parsePhoneNumber } from '../helpers';
+
+export const componentName = getComponentName('phone-field-internal');
+
+const commonAttrs = ['disabled', 'size', 'bordered', 'readonly', 'allow-alphanumeric-input'];
+const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
+const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
+const labelTypeAttrs = ['label-type', 'country-input-label', 'label'];
+const mapAttrs = {
+  'country-input-label': 'label',
+  'country-input-placeholder': 'placeholder',
+  'phone-input-placeholder': 'placeholder',
+};
+
+const inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
+
+class PhoneFieldInternal extends BaseInputClass {
+  static get observedAttributes() {
+    return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);
+  }
+
+  constructor() {
+    super();
+
+    this.innerHTML = `
+    <div class="wrapper">
+      <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];
+
+    forwardAttrs(this, this.countryCodeInput, { includeAttrs: ['label-type'] });
+    forwardAttrs(this, this.phoneNumberInput, { includeAttrs: ['label-type', 'required'] });
+
+    // override combo box setter to display dialCode value in input
+    this.countryCodeInput.customValueTransformFn = (val) => {
+      const [, dialCode] = val?.split?.(' ') || [];
+      return dialCode;
+    };
+  }
+
+  get countryCodeInputData() {
+    return this.countryCodeInput.items;
+  }
+
+  get allowAlphanumericInput() {
+    return this.getAttribute('allow-alphanumeric-input') === 'true';
+  }
+
+  get value() {
+    if (!this.phoneNumberValue) {
+      return '';
+    }
+    return `${this.countryCodeInput.value}-${this.phoneNumberInput.value}`;
+  }
+
+  set value(val) {
+    const [countryCode, phoneNumber] = parsePhoneNumber(val);
+
+    this.#setCountryCode(countryCode);
+    this.#setPhoneNumber(phoneNumber);
+  }
+
+  setSelectionRange(...args) {
+    this.phoneNumberInput.setSelectionRange(...args);
+  }
+
+  get selectionStart() {
+    return this.phoneNumberInput.selectionStart;
+  }
+
+  #setCountryCode(val) {
+    if (val) {
+      const countryCodeItem = this.getCountryByDialCode(val);
+      if (countryCodeItem) {
+        this.countryCodeInput.selectedItem = countryCodeItem;
+      }
+    } else {
+      this.countryCodeInput.selectedItem = undefined;
+    }
+  }
+
+  #setPhoneNumber(val) {
+    if (this.phoneNumberInput.value === val) {
+      return;
+    }
+
+    this.phoneNumberInput.value = val;
+  }
+
+  get phoneNumberValue() {
+    return this.phoneNumberInput.value;
+  }
+
+  get countryCodeValue() {
+    return this.countryCodeInput.shadowRoot.querySelector('input').value;
+  }
+
+  get phoneNumberInputEle() {
+    return this.phoneNumberInput.shadowRoot.querySelector('input');
+  }
+
+  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 (hasPhone && !hasCode) {
+      return { valueMissing: true };
+    }
+    return {};
+  }
+
+  init() {
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) this.inputs[1].focus();
+    });
+
+    super.init?.();
+    this.initInputs();
+  }
+
+  getRestrictedCountries() {
+    const attr = this.getAttribute('restrict-countries');
+    return attr ? attr.split(',') : [];
+  }
+
+  getCountryByDialCode(countryDialCode) {
+    return this.countryCodeInput.items?.find((c) => c.getAttribute('data-id') === countryDialCode);
+  }
+
+  getCountryByCodeId(countryCode) {
+    return this.countryCodeInput.items?.find(
+      (c) => c.getAttribute('data-country-code') === countryCode
+    );
+  }
+
+  updateCountryCodeItems(restrictCountries) {
+    const items = restrictCountries.length
+      ? CountryCodes.filter((c) => restrictCountries.includes(c.code))
+      : CountryCodes;
+    this.querySelector('descope-combo-box').innerHTML = items
+      .map((item) => comboBoxItem(item))
+      .join('');
+  }
+
+  handleDefaultCountryCode(countryCode) {
+    if (!this.countryCodeInput.value) {
+      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 (countryCodeItem) {
+        setTimeout(() => {
+          this.countryCodeInput.selectedItem = countryCodeItem;
+        });
+      }
+    }
+  }
+
+  initInputs() {
+    // Sanitize phone input value to filter everything but digits
+    this.phoneNumberInput.addEventListener('input', (e) => {
+      if (!this.allowAlphanumericInput) {
+        const telDigitsRegExp = /^\d$/;
+        const sanitizedInput = e.target.value
+          .split('')
+          .filter((char) => telDigitsRegExp.test(char))
+          .join('');
+        e.target.value = sanitizedInput;
+      }
+    });
+
+    this.handleFocusEventsDispatching(this.inputs);
+    this.handleInputEventDispatching();
+  }
+
+  handleLabelTypeAttrs(attrName, newValue) {
+    // set or remove label attributes from inner text/combo components on `label-type` change
+    const attr = mapAttrs[attrName] || attrName;
+
+    if (attrName === 'label-type') {
+      this.onLabelTypeChange(newValue);
+    }
+    // on inner components label attr change - set label attributes for text/combo components
+    // only if label-type is `floating`
+    else if (this.getAttribute('label-type') === 'floating') {
+      if (attrName === 'country-input-label') {
+        this.countryCodeInput.setAttribute(attr, newValue);
+      } else if (attrName === 'label') {
+        this.phoneNumberInput.setAttribute(attr, newValue);
+      }
+    }
+  }
+
+  onLabelTypeChange(newValue) {
+    if (newValue === 'floating') {
+      // on change to `floating` label - set inner components `label` and `placeholder`
+      this.countryCodeInput.setAttribute('label', this.getAttribute('country-input-label') || '');
+      this.countryCodeInput.setAttribute(
+        'placeholder',
+        this.getAttribute('country-input-placeholder') || ''
+      );
+      this.phoneNumberInput.setAttribute('label', this.getAttribute('label') || '');
+      this.phoneNumberInput.setAttribute(
+        'placeholder',
+        this.getAttribute('phone-input-placeholder') || ''
+      );
+    } else {
+      // for other cases - reset inner components label-type and labels
+      this.inputs.forEach((input) => input.removeAttribute('label'));
+    }
+  }
+
+  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);
+        }
+      }
+
+      if (labelTypeAttrs.includes(attrName)) {
+        this.handleLabelTypeAttrs(attrName, newValue);
+      }
+
+      if (attrName === 'restrict-countries') {
+        this.updateCountryCodeItems(this.getRestrictedCountries());
+      }
+    }
+  }
+}
+
+export default PhoneFieldInternal;

package/src/components/phone-fields/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/phone-fields/descope-phone-field/helpers.js

@@ -0,0 +1,52 @@
+import { parsePhoneNumberFromString } from 'libphonenumber-js/min';
+
+// We use JSDelivr (proxy by static.descope.com) 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://static.descope.com/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="${dialCode}"
+		data-name="${code} ${dialCode} ${country}"
+		data-country-code="${code}"
+	>
+		<div>
+			<span>
+				<img src="${getCountryFlag(code)}" width="20"/>
+			</span>
+			<span>${country}</span>
+		</div>
+		<div>
+			<span>${code}</span>
+			<span>${dialCode}</span>
+		</div>
+	</div>
+`;
+
+export const parsePhoneNumber = (val) => {
+  const value = val || '';
+  let countryCode = '';
+  let phoneNumber = '';
+
+  // Attempt to parse the value using libphonenumber-js
+  const parsed = parsePhoneNumberFromString(value);
+
+  if (parsed) {
+    if (parsed.countryCallingCode) {
+      countryCode = `+${parsed.countryCallingCode}`;
+    }
+
+    if (parsed.nationalNumber) {
+      phoneNumber = parsed.nationalNumber;
+    }
+  } else {
+    // Fallback: assume a dash separates country code and phone number
+    const [country, phone] = value.split('-');
+    countryCode = country || '';
+    phoneNumber = phone || '';
+  }
+
+  return [countryCode, phoneNumber];
+};

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

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