@descope/web-components-ui 0.0.1

package/src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js

@@ -0,0 +1,236 @@
+import { componentName as descopeInternalComponentName } from './descope-phone-input-box-internal/PhoneFieldInternalInputBox';
+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 CountryCodes from '../CountryCodes';
+import {
+  resetInputLabelPosition,
+  resetInputCursor,
+  resetInputFieldDefaultWidth,
+  resetInputFieldInvalidBackgroundColor,
+  useHostExternalPadding,
+  inputFloatingLabelStyle,
+} from '../../../helpers/themeHelpers/resetHelpers';
+
+const textVars = TextFieldClass.cssVarList;
+
+export const componentName = getComponentName('phone-input-box-field');
+
+const customMixin = (superclass) =>
+  class PhoneInputBoxFieldMixinClass 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',
+          'disabled',
+          'phone-input-placeholder',
+          'label',
+          'label-type',
+          'allow-alphanumeric-input',
+        ],
+      });
+    }
+
+    get phoneNumberInputEle() {
+      return this.inputElement?.phoneNumberInputEle;
+    }
+  };
+
+const {
+  host,
+  label,
+  inputElement,
+  requiredIndicator,
+  inputField,
+  inputFieldInternal,
+  phoneInput,
+  errorMessage,
+  helperText,
+} = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  placeholder: { selector: '> input:placeholder-shown' },
+  inputElement: { selector: 'input' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  inputField: { selector: () => 'vaadin-text-field::part(input-field)' },
+  inputFieldInternal: {
+    selector: () => 'descope-phone-field-internal-input-box vaadin-text-field::part(input-field)',
+  },
+  phoneInput: { selector: () => 'descope-text-field' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+};
+
+export const PhoneFieldInputBoxClass = compose(
+  createStyleMixin({
+    mappings: {
+      fontSize: [
+        host,
+        inputField,
+        {
+          selector: TextFieldClass.componentName,
+          property: TextFieldClass.cssVarList.fontSize,
+        },
+      ],
+      fontFamily: [label, errorMessage, helperText],
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: { ...host, property: 'direction' },
+
+      inputBorderStyle: { ...inputFieldInternal, property: 'border-style' },
+      inputBorderWidth: { ...inputFieldInternal, property: 'border-width' },
+      inputBorderColor: { ...inputFieldInternal, property: 'border-color' },
+      inputBorderRadius: [
+        { ...inputField, property: 'border-radius' },
+        { ...inputFieldInternal, property: 'border-radius' },
+      ],
+
+      inputHorizontalPadding: [
+        { ...phoneInput, property: 'padding-left' },
+        { ...phoneInput, property: 'padding-right' },
+      ],
+
+      labelFontSize: { ...label, property: 'font-size' },
+      labelFontWeight: { ...label, property: 'font-weight' },
+      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 },
+
+      inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
+
+      inputOutlineStyle: { ...inputField, property: 'outline-style' },
+      inputOutlineColor: { ...inputField, property: 'outline-color' },
+      inputOutlineWidth: { ...inputField, property: 'outline-width' },
+      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+
+      labelPosition: { ...label, property: 'position' },
+      labelTopPosition: { ...label, property: 'top' },
+      labelHorizontalPosition: [
+        { ...label, property: 'left' },
+        { ...label, property: 'right' },
+      ],
+      inputTransformY: { ...label, property: 'transform' },
+      inputTransition: { ...label, property: 'transition' },
+      marginInlineStart: { ...label, property: 'margin-inline-start' },
+      valueInputHeight: { ...inputElement, property: 'height' },
+      valueInputMarginBottom: {
+        selector: TextFieldClass.componentName,
+        property: textVars.valueInputMarginBottom,
+      },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  customMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
+    :host {
+      display: inline-flex;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+    ${useHostExternalPadding(PhoneFieldInputBoxClass.cssVarList)}
+    ${resetInputCursor('vaadin-text-field')}
+    ${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
+    ${resetInputFieldDefaultWidth()}
+
+    vaadin-text-field {
+      width: 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(input-field) {
+      padding: 0;
+      background: transparent;
+      overflow: hidden;
+      -webkit-mask-image: none;
+    }
+    descope-phone-field-internal-input-box {
+      -webkit-mask-image: none;
+      padding: 0;
+      width: 100%;
+    }
+    descope-phone-field-internal-input-box > div {
+      width: 100%;
+    }
+    descope-phone-field-internal-input-box .separator {
+      flex: 0;
+      border: none;
+    }
+    descope-phone-field-internal-input-box descope-text-field {
+      ${textVars.inputOutlineWidth}: 0;
+      ${textVars.inputOutlineOffset}: 0;
+    }
+    descope-text-field {
+      flex-grow: 1;
+      width: 100%;
+      direction: ltr;
+    }
+    vaadin-text-field[readonly] > input:placeholder-shown {
+      opacity: 1;
+    }
+    vaadin-text-field::part(input-field)::after {
+      border: none;
+    }
+
+    vaadin-text-field[label-type="floating"]:not([focused])[readonly] input:placeholder-shown {
+      opacity: 0;
+    }
+    vaadin-text-field[label-type="floating"]:not([focused])[disabled] input:placeholder-shown {
+      opacity: 0;
+    }
+
+    ${resetInputLabelPosition('vaadin-text-field')}
+    ${inputFloatingLabelStyle()}
+		`,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);
+
+export default PhoneFieldInputBoxClass;

package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js

@@ -0,0 +1,172 @@
+import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
+import { getComponentName } from '../../../../helpers/componentHelpers';
+import { getCountryByCodeId } from '../../helpers';
+
+export const componentName = getComponentName('phone-field-internal-input-box');
+
+const observedAttributes = [
+  'disabled',
+  'size',
+  'bordered',
+  'invalid',
+  'readonly',
+  'phone-input-placeholder',
+  'name',
+  'autocomplete',
+  'label-type',
+  'allow-alphanumeric-input',
+];
+const mapAttrs = {
+  'phone-input-placeholder': 'placeholder',
+};
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
+
+class PhoneFieldInternal extends BaseInputClass {
+  static get observedAttributes() {
+    return [].concat(BaseInputClass.observedAttributes || [], observedAttributes);
+  }
+
+  constructor() {
+    super();
+
+    this.innerHTML = `
+      <div>
+        <descope-text-field tabindex="1"></descope-text-field>
+      </div>
+      `;
+
+    this.phoneNumberInput = this.querySelector('descope-text-field');
+  }
+
+  get defaultCountryCode() {
+    return getCountryByCodeId(this.getAttribute('default-code'));
+  }
+
+  get hasDefaultCode() {
+    return !!this.getAttribute('default-code');
+  }
+
+  get allowAlphanumericInput() {
+    return this.getAttribute('allow-alphanumeric-input') === 'true';
+  }
+
+  get value() {
+    if (!this.phoneNumberValue) {
+      return '';
+    }
+
+    if (this.hasDefaultCode) {
+      // we want to transform phone numbers to a valid {dialCode}-{phoneNumber} format
+      // e.g.:
+      // +972-12345 => +972-12345
+      // 972-12345 => +972-12345
+      // 12345 => +972-12345
+      //
+      // we also want to handle any extra dash if added in the start of the phone number
+      // e.g.:
+      // +972--12345 => +972-12345
+      const pattern = new RegExp(`\\+?${parseInt(this.defaultCountryCode, 10)}--?`);
+      return `${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(pattern, '')}`;
+    }
+
+    return this.phoneNumberInput.value;
+  }
+
+  set value(val) {
+    this.phoneNumberInput.value = val;
+  }
+
+  get phoneNumberValue() {
+    return this.phoneNumberInput.value;
+  }
+
+  get phoneNumberInputEle() {
+    return this.phoneNumberInput.shadowRoot.querySelector('input');
+  }
+
+  get minLength() {
+    return parseInt(this.getAttribute('minlength'), 10) || 0;
+  }
+
+  get maxLength() {
+    return parseInt(this.getAttribute('maxlength'), 10) || 50;
+  }
+
+  getValidity() {
+    const validPhonePattern = /^\+?\d{1,4}-?(?:\d-?){1,15}$/;
+    const stripValue = this.value.replace(/\D/g, '');
+
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+
+    if (stripValue.length < this.minLength) {
+      return { tooShort: true };
+    }
+
+    if (stripValue.length > this.maxLength) {
+      return { tooLong: true };
+    }
+
+    if (!validPhonePattern.test(this.value)) {
+      return { patternMismatch: true };
+    }
+
+    return {};
+  }
+
+  init() {
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) this.phoneNumberInput.focus();
+    });
+
+    super.init?.();
+    this.initInputs();
+  }
+
+  getCountryByDialCode(countryDialCode) {
+    return this.countryCodeInput.items?.find(
+      (c) => c.getAttribute('data-country-code') === countryDialCode
+    );
+  }
+
+  initInputs() {
+    // Sanitize phone input value to filter everything but digits
+    this.phoneNumberInput.addEventListener('input', (e) => {
+      if (e.target.value.length === 1 && e.target.value === '-') {
+        e.target.value = '';
+      }
+
+      e.target.value = e.target.value
+        .replace(/(?!^)\+/g, '')
+        .replace('--', '-')
+        .replace('+-', '+');
+
+      let sanitizedInput = e.target.value;
+      if (!this.allowAlphanumericInput) {
+        const telDigitsRegExp = /^[+\d-]+$/;
+        sanitizedInput = e.target.value
+          .split('')
+          .filter((char) => telDigitsRegExp.test(char))
+          .join('');
+      }
+
+      e.target.value = sanitizedInput;
+    });
+
+    this.handleFocusEventsDispatching([this.phoneNumberInput]);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue && observedAttributes.includes(attrName)) {
+      const attr = mapAttrs[attrName] || attrName;
+      this.phoneNumberInput.setAttribute(attr, newValue);
+    }
+  }
+}
+
+export default PhoneFieldInternal;

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

@@ -0,0 +1,5 @@
+import '../../../descope-text-field';
+
+import PhoneFieldInternalInputBox, { componentName } from './PhoneFieldInternalInputBox';
+
+customElements.define(componentName, PhoneFieldInternalInputBox);

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

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

package/src/components/phone-fields/helpers.js

@@ -0,0 +1,5 @@
+import CountryCodes from './CountryCodes';
+
+export const getCountryByCodeId = (countryCode) => {
+  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
+};

package/src/constants.js

@@ -0,0 +1,4 @@
+export const DESCOPE_PREFIX = 'descope';
+export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
+export const BASE_THEME_SECTION = 'host';
+export const PORTAL_THEME_PREFIX = '@';

package/src/darkTheme.js

@@ -0,0 +1,52 @@
+import merge from 'lodash.merge';
+import { defaultTheme } from './theme';
+import { codeSnippetDarkThemeOverrides } from './theme/components/codeSnippet';
+
+export const colors = {
+  surface: {
+    main: '#181a1c',
+    dark: '#bec4ca',
+    light: '#555f68',
+    highlight: '#22262a',
+    contrast: '#f5f6f7',
+  },
+  primary: {
+    main: '#1f80ff',
+    dark: '#71aeff',
+    light: '#004094',
+    highlight: '#00214d',
+    contrast: '#000000',
+  },
+  secondary: {
+    main: '#a665eb',
+    dark: '#b9a0f3',
+    light: '#683ae6',
+    highlight: '#361299',
+    contrast: '#000000',
+  },
+  success: {
+    main: '#27963c',
+    dark: '#8bc3a2',
+    light: '#004d0f',
+    highlight: '#001f00',
+    contrast: '#000000',
+  },
+  error: {
+    main: '#f85249',
+    dark: '#fa7c75',
+    light: '#c51107',
+    highlight: '#4a0603',
+    contrast: '#000000',
+  },
+};
+
+const darkTheme = merge({}, defaultTheme, {
+  globals: {
+    colors,
+  },
+  components: {
+    ...codeSnippetDarkThemeOverrides,
+  },
+});
+
+export default darkTheme;

package/src/dev/index.js

@@ -0,0 +1,3 @@
+export { defaultTheme } from '../theme';
+export { default as darkTheme } from '../darkTheme';
+export { themeToStyle } from '../helpers/themeHelpers';

package/src/helpers/componentHelpers.js

@@ -0,0 +1,95 @@
+import { kebabCaseJoin } from '.';
+import { DESCOPE_PREFIX } from '../constants';
+
+export const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
+  // sync all attrs on init
+  const filteredAttrs = Array.from(ele.attributes)
+    .filter(
+      (attr) =>
+        !excludeAttrs.includes(attr.name) &&
+        (!includeAttrs.length || includeAttrs.includes(attr.name))
+    )
+    .map((attr) => attr.name);
+
+  callback(filteredAttrs);
+
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach((mutation) => {
+      if (
+        mutation.type === 'attributes' &&
+        !excludeAttrs.includes(mutation.attributeName) &&
+        (!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
+      ) {
+        callback([mutation.attributeName]);
+      }
+    });
+  });
+
+  observer.observe(ele, { attributes: true });
+};
+
+// calling the callback with this object: { addedNodes, removedNodes }
+export const observeChildren = (ele, callback) => {
+  callback({ addedNodes: Array.from(ele.children), removedNodes: [] });
+
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach((mutation) => {
+      if (mutation.type === 'childList' || mutation.type === 'characterData') {
+        callback(mutation);
+      }
+    });
+  });
+
+  observer.observe(ele, { childList: true, characterData: true, subtree: true });
+};
+
+const createSyncAttrsCb =
+  (srcEle, targetEle, mapAttrs = {}) =>
+  (attrNames) => {
+    attrNames.forEach((attrName) => {
+      const targetAttrName = mapAttrs[attrName] || attrName;
+      const srcAttrVal = srcEle.getAttribute(attrName);
+      if (srcAttrVal !== null) {
+        if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+          targetEle.setAttribute(targetAttrName, srcAttrVal);
+        }
+      } else {
+        targetEle.removeAttribute(targetAttrName);
+      }
+    });
+  };
+
+export const syncAttrs = (ele1, ele2, options) => {
+  observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
+  observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
+};
+
+export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
+
+export const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
+
+export const forwardAttrs = (source, dest, options = {}) => {
+  observeAttributes(source, createSyncAttrsCb(source, dest, options.mapAttrs), options);
+};
+
+export const forwardProps = (src, target, props = []) => {
+  if (!props.length) return;
+
+  const config = props.reduce(
+    (acc, prop) =>
+      Object.assign(acc, {
+        [prop]: {
+          get() {
+            return src[prop];
+          },
+          set(v) {
+            // eslint-disable-next-line no-param-reassign
+            src[prop] = v;
+          },
+        },
+      }),
+    {}
+  );
+
+  Object.defineProperties(target, config);
+};

package/src/helpers/index.js

@@ -0,0 +1,68 @@
+export const kebabCase = (str) =>
+  str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_.]+/g, '-')
+    .toLowerCase();
+
+export const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));
+
+export const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
+export const camelCaseJoin = (...args) =>
+  args
+    .filter(Boolean)
+    .map((arg, index) => (index === 0 ? arg : upperFirst(arg)))
+    .join('');
+
+export const compose =
+  (...fns) =>
+  (val) =>
+    fns.reduceRight((res, fn) => fn(res), val);
+
+export const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
+
+export const isUrl = (maybeUrl) => {
+  try {
+    // eslint-disable-next-line no-new
+    new URL(maybeUrl);
+
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+/**
+ * Compares two arrays unorderedly.
+ * @param {Array} arr1 - The first array to compare.
+ * @param {Array} arr2 - The second array to compare.
+ * @returns {boolean} - Returns true if the arrays are equal unorderedly, false otherwise.
+ */
+export const compareArraysUnordered = (arr1, arr2) => {
+  if (!Array.isArray(arr1) || !Array.isArray(arr2)) {
+    return false;
+  }
+
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+
+  const sortedArr1 = arr1.slice().sort();
+  const sortedArr2 = arr2.slice().sort();
+
+  for (let i = 0; i < sortedArr1.length; i++) {
+    if (sortedArr1[i] !== sortedArr2[i]) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+export const toTitle = (str) =>
+  str
+    .replace(/([A-Z])/g, ' $1')
+    .trim()
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');

package/src/helpers/mixinsHelpers.js

@@ -0,0 +1,10 @@
+// create a dispatch event function that also calls to the onevent function in case  it's set
+// usage example:
+// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
+// this will dispatch a new event when called, but also call to "onsomething"
+export function createDispatchEvent(eventName, options = {}) {
+  const event = new Event(eventName, options);
+
+  this[`on${eventName}`]?.(event); // in case we got an event callback as property
+  this.dispatchEvent(event);
+}