@descope/web-components-ui 0.0.1

package/src/components/descope-notification/descope-notification-card/index.js

@@ -0,0 +1,6 @@
+import '@vaadin/notification';
+import { componentName, NotificationCardClass } from './NotificationCardClass';
+
+customElements.define(componentName, NotificationCardClass);
+
+export { NotificationCardClass };

package/src/components/descope-notification/descope-notification-container.js

@@ -0,0 +1,13 @@
+import '@vaadin/notification';
+import { getComponentName } from '../../helpers/componentHelpers';
+
+const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
+
+if (!vaadinContainerClass) {
+  throw new Error('could not get vaadin-notification-container class');
+}
+
+class NotificationContainerClass extends vaadinContainerClass {}
+customElements.define(getComponentName('notification-container'), NotificationContainerClass);
+
+export { NotificationContainerClass };

package/src/components/descope-notification/index.js

@@ -0,0 +1,8 @@
+import '@vaadin/notification';
+import './descope-notification-container';
+import './descope-notification-card';
+import { componentName, NotificationClass } from './NotificationClass';
+
+customElements.define(componentName, NotificationClass);
+
+export { NotificationClass };

package/src/components/descope-notp-image/NotpImageClass.js

@@ -0,0 +1,10 @@
+import { getComponentName } from '../../helpers/componentHelpers';
+import { createCssVarImageClass } from '../../baseClasses/createCssVarImageClass';
+
+export const componentName = getComponentName('notp-image');
+
+export const NotpImageClass = createCssVarImageClass({
+  componentName,
+  varName: 'url',
+  fallbackVarName: 'fallbackUrl',
+});

package/src/components/descope-notp-image/index.js

@@ -0,0 +1,5 @@
+import { componentName, NotpImageClass } from './NotpImageClass';
+
+customElements.define(componentName, NotpImageClass);
+
+export { NotpImageClass };

package/src/components/descope-number-field/NumberFieldClass.js

@@ -0,0 +1,54 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
+} from '../../mixins';
+import textFieldMappings from '../descope-text-field/textFieldMappings';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import {
+  inputFloatingLabelStyle,
+  resetInputLabelPosition,
+  resetInputOverrides,
+  useHostExternalPadding,
+} from '../../helpers/themeHelpers/resetHelpers';
+
+export const componentName = getComponentName('number-field');
+
+export const NumberFieldClass = compose(
+  createStyleMixin({
+    mappings: textFieldMappings,
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  componentNameValidationMixin
+)(
+  createProxy({
+    slots: ['', 'prefix', 'suffix'],
+    wrappedEleName: 'vaadin-number-field',
+    style: () => `
+			:host {
+				display: inline-block;
+				max-width: 100%;
+				padding: calc(var(${NumberFieldClass.cssVarList.inputOutlineWidth}) + var(${
+          NumberFieldClass.cssVarList.inputOutlineOffset
+        }));
+			}
+      ${resetInputLabelPosition('vaadin-number-field')}
+			${useHostExternalPadding(NumberFieldClass.cssVarList)}
+			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
+      ${inputFloatingLabelStyle()}
+
+      vaadin-number-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
+        opacity: 0;
+      }
+      vaadin-number-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
+        opacity: 0;
+      }
+		`,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);

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

@@ -0,0 +1,6 @@
+import '@vaadin/number-field';
+import { componentName, NumberFieldClass } from './NumberFieldClass';
+
+customElements.define(componentName, NumberFieldClass);
+
+export { NumberFieldClass };

package/src/components/descope-passcode/PasscodeClass.js

@@ -0,0 +1,209 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
+} from '../../mixins';
+import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal';
+import { TextFieldClass } from '../descope-text-field/TextFieldClass';
+import { LoaderRadialClass } from '../descope-loader-radial/LoaderRadialClass';
+import { compose } from '../../helpers';
+import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+import {
+  resetInputCursor,
+  resetInputLabelPosition,
+  resetInputFieldDefaultWidth,
+} from '../../helpers/themeHelpers/resetHelpers';
+
+export const componentName = getComponentName('passcode');
+
+const observedAttributes = ['digits'];
+
+const customMixin = (superclass) =>
+  class PasscodeMixinClass extends superclass {
+    static get observedAttributes() {
+      return observedAttributes.concat(superclass.observedAttributes || []);
+    }
+
+    get digits() {
+      return Number.parseInt(this.getAttribute('digits'), 10) || 6;
+    }
+
+    init() {
+      super.init?.();
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+      <${descopeInternalComponentName}
+        bordered="true"
+        name="code"
+        tabindex="-1"
+        slot="input"
+      ><slot></slot></${descopeInternalComponentName}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
+
+      forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+      if (attrName === 'digits') {
+        this.style.setProperty('--passcode-digits-count', newValue);
+      }
+    }
+  };
+
+const {
+  host,
+  digitField,
+  label,
+  requiredIndicator,
+  internalWrapper,
+  focusedDigitField,
+  errorMessage,
+} = {
+  host: { selector: () => ':host' },
+  focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
+  digitField: { selector: () => TextFieldClass.componentName },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  internalWrapper: { selector: 'descope-passcode-internal .wrapper' },
+  errorMessage: { selector: '::part(error-message)' },
+};
+
+const textVars = TextFieldClass.cssVarList;
+const loaderVars = LoaderRadialClass.cssVarList;
+
+export const PasscodeClass = compose(
+  createStyleMixin({
+    mappings: {
+      fontSize: [{ ...digitField, property: textVars.fontSize }, host],
+      hostWidth: { property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+      fontFamily: [host, { ...label }],
+      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' },
+      digitValueTextColor: {
+        selector: TextFieldClass.componentName,
+        property: textVars.inputValueTextColor,
+      },
+      digitSize: [
+        { ...digitField, property: 'height' },
+        { ...digitField, property: 'width' },
+      ],
+      digitPadding: { ...digitField, property: textVars.inputHorizontalPadding },
+      digitTextAlign: { ...digitField, property: textVars.inputTextAlign },
+      digitCaretTextColor: { ...digitField, property: textVars.inputCaretTextColor },
+      digitSpacing: { ...internalWrapper, property: 'gap' },
+      digitOutlineColor: { ...digitField, property: textVars.inputOutlineColor },
+      digitOutlineWidth: { ...digitField, property: textVars.inputOutlineWidth },
+
+      focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars.inputOutlineColor },
+      overlayOpacity: { ...internalWrapper, property: 'opacity' },
+      spinnerSize: { selector: LoaderRadialClass.componentName, property: loaderVars.spinnerSize },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
+			:host {
+				display: inline-flex;
+				max-width: 100%;
+				min-width: calc(var(--passcode-digits-count) * 2em);
+			}
+			${resetInputFieldDefaultWidth()}
+			:host::after {
+				background-color: transparent;
+			}
+			:host::part(input-field)::after {
+				background-color: transparent;
+			}
+
+      :host([loading="true"]) descope-passcode-internal .loader-container {
+        display: block;
+      }
+
+			descope-passcode-internal {
+				-webkit-mask-image: none;
+				padding: 0;
+				width: 100%;
+				height: 100%;
+				min-height: initial;
+			}
+
+			descope-passcode-internal .wrapper {
+				box-sizing: border-box;
+				min-height: initial;
+				height: 100%;
+				justify-content: space-between;
+			}
+
+			descope-passcode-internal descope-text-field {
+				min-width: 2em;
+				max-width: var(${textVars.inputHeight});
+			}
+
+			vaadin-text-field::part(input-field) {
+				background-color: transparent;
+				padding: 0;
+				overflow: hidden;
+				-webkit-mask-image: none;
+			}
+
+      /* safari */
+			vaadin-text-field::part(input-field)::after {
+        opacity: 0;
+      }
+
+			vaadin-text-field {
+				margin: 0;
+				padding: 0;
+				width: 100%;
+			}
+
+			vaadin-text-field::before {
+				height: 0;
+			}
+
+			vaadin-text-field[readonly] > input:placeholder-shown {
+				opacity: 1;
+			}
+
+			vaadin-text-field[readonly]::part(input-field)::after {
+				border: 0 solid;
+			}
+
+			vaadin-text-field::part(input-field) {
+				box-shadow: none;
+			}
+
+      ${resetInputLabelPosition('vaadin-text-field')}
+			${resetInputCursor('vaadin-text-field')}
+    	`,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);
+
+export default PasscodeClass;

package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js

@@ -0,0 +1,231 @@
+/* eslint-disable no-param-reassign */
+import debounce from 'lodash.debounce';
+import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
+import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
+import { sanitizeStr, focusElement, createInputMaskStyle, toggleMaskVisibility } from './helpers';
+
+export const componentName = getComponentName('passcode-internal');
+
+const observedAttributes = ['digits', 'loading'];
+
+const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
+
+class PasscodeInternal extends BaseInputClass {
+  static get observedAttributes() {
+    return observedAttributes.concat(BaseInputClass.observedAttributes || []);
+  }
+
+  constructor() {
+    super();
+
+    this.innerHTML = `
+		<div class="wrapper"></div>
+		<div class="loader-container">
+      <descope-loader-radial size="xs" mode="primary"></descope-loader-radial>
+    </div>
+		<style>
+			.wrapper {
+				display: flex;
+				width: 100%;
+				justify-content: space-between;
+        direction: ltr;
+        position: relative;
+			}
+
+      descope-text-field {
+        direction: ltr;
+      }
+
+      .loader-container {
+        display: none;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+		</style>
+		`;
+
+    this.wrapperEle = this.querySelector('.wrapper');
+    this.loaderContainer = this.querySelector('.loader-container');
+  }
+
+  renderInputs() {
+    const inputs = [...Array(this.digits).keys()].map(
+      (idx) => `
+		<descope-text-field
+			data-id=${idx}
+			type="tel"
+			autocomplete="one-time-code"
+			inputMode="numeric"
+		></descope-text-field>
+	`
+    );
+
+    this.wrapperEle.innerHTML = inputs.join('');
+
+    this.inputs = Array.from(this.querySelectorAll('descope-text-field'));
+
+    this.initInputs();
+  }
+
+  handleLoadingState(isLoading) {
+    if (isLoading) {
+      this.setAttribute('inert', 'true');
+    } else {
+      this.removeAttribute('inert');
+    }
+  }
+
+  get digits() {
+    return Number.parseInt(this.getAttribute('digits'), 10) || 6;
+  }
+
+  get value() {
+    return this.inputs?.map(({ value }) => value).join('') || '';
+  }
+
+  set value(val) {
+    if (val === this.value) return;
+
+    this.parseInputValue(this.inputs[0], sanitizeStr(val));
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+    if (this.pattern && !new RegExp(this.pattern).test(this.value)) {
+      return { patternMismatch: true };
+    }
+
+    return {};
+  }
+
+  init() {
+    // we are adding listeners before calling to super because it's stopping the events
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) this.inputs[0].focus();
+    });
+
+    super.init?.();
+
+    this.renderInputs();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  getInputIdx(inputEle) {
+    return Number.parseInt(inputEle.getAttribute('data-id'), 10);
+  }
+
+  getNextInput(currInput) {
+    const currentIdx = this.getInputIdx(currInput);
+    const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1);
+    return this.inputs[newIdx];
+  }
+
+  getPrevInput(currInput) {
+    const currentIdx = this.getInputIdx(currInput);
+    const newIdx = Math.max(currentIdx - 1, 0);
+    return this.inputs[newIdx];
+  }
+
+  fillDigits(charArr, currentInput) {
+    for (let i = 0; i < charArr.length; i += 1) {
+      currentInput.value = charArr[i] ?? '';
+
+      const nextInput = this.getNextInput(currentInput);
+
+      if (nextInput === currentInput) break;
+      currentInput = nextInput;
+    }
+
+    focusElement(currentInput);
+  }
+
+  parseInputValue(input, value = '') {
+    const charArr = value.split('');
+
+    if (!charArr.length) {
+      // if we got an invalid value we want to clear the input
+      input.value = '';
+    } else this.fillDigits(charArr, input);
+  }
+
+  initInputs() {
+    this.inputs.forEach((input) => {
+      input.shadowRoot.appendChild(createInputMaskStyle());
+
+      const handleParseInput = (val) => {
+        this.parseInputValue(input, val);
+        toggleMaskVisibility(input);
+      };
+
+      const debouncedHandleParseInput = debounce(handleParseInput, 20, { trailing: true });
+
+      // sanitize the input
+      input.addEventListener('input', (e) => {
+        input.value = sanitizeStr(input.value);
+
+        if (input.value) {
+          toggleMaskVisibility(input, input.value[0]);
+        }
+
+        setTimeout(() => {
+          if (e?.inputType === 'deleteContentBackward') {
+            focusElement(this.getPrevInput(input));
+          }
+        });
+        debouncedHandleParseInput(input.value);
+      });
+
+      // we want backspace to focus on the previous digit
+      input.onkeydown = ({ key }) => {
+        // when user deletes a digit, we want to focus the previous digit
+        if (key === 'Backspace') {
+          // if value is empty then the input element does not fire `input` event
+          // if this is the case, we focus the element here.
+          // otherwise, the focusElement occurs as part of the `input` event listener
+          if (!input.value) {
+            setTimeout(() => focusElement(this.getPrevInput(input)), 0);
+          } else {
+            input.setSelectionRange(1, 1);
+          }
+        } else if (key.length === 1) {
+          // we want only characters and not command keys
+          input.value = ''; // we are clearing the previous value so we can override it with the new value
+        }
+      };
+
+      forwardAttrs(this, input, { includeAttrs: forwardAttributes });
+    });
+
+    this.handleFocusEventsDispatching(this.inputs);
+    this.handleInputEventDispatching();
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    // sync attributes to inputs
+    if (oldValue !== newValue) {
+      if (observedAttributes.includes(attrName)) {
+        if (attrName === 'digits') {
+          this.renderInputs();
+        }
+        if (attrName === 'loading') {
+          this.handleLoadingState(newValue === 'true');
+        }
+      }
+    }
+  }
+
+  get pattern() {
+    return `^$|^\\d{${this.digits},}$`;
+  }
+}
+
+export default PasscodeInternal;

package/src/components/descope-passcode/descope-passcode-internal/helpers.js

@@ -0,0 +1,41 @@
+const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';
+const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';
+const INPUT_MASK_FALLBACK_PROP = '--descope-input-mask-fallback';
+
+export const focusElement = (ele) => {
+  ele?.focus();
+  ele?.setSelectionRange?.(1, 1);
+};
+
+export const sanitizeStr = (str) => {
+  return str.replace(/\D/g, '') || '';
+};
+
+// During debounced input we hide the value with a mask.
+// This allows us to hide the multiple population of the first input
+// in case of an automated input (e.g. Safari OTP Autofill or paste).
+export const createInputMaskStyle = () => {
+  const ele = document.createElement('style');
+  ele.id = 'input-mask';
+  ele.innerHTML = `vaadin-text-field::part(input-field)::before {
+    ${INPUT_MASK_FALLBACK_PROP}: '';
+    content: var(${INPUT_MASK_TEXT_PROP}, var(${INPUT_MASK_FALLBACK_PROP}));
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: var(${INPUT_MASK_DISPLAY_PROP}, none);
+    align-items: center;
+    justify-content: center;
+  }`;
+  return ele;
+};
+
+export const toggleMaskVisibility = (input, value) => {
+  if (value) {
+    input.style.setProperty(INPUT_MASK_TEXT_PROP, `"${value}"`);
+    input.style.setProperty(INPUT_MASK_DISPLAY_PROP, 'flex');
+  } else {
+    input.style.removeProperty(INPUT_MASK_TEXT_PROP);
+    input.style.removeProperty(INPUT_MASK_DISPLAY_PROP);
+  }
+};

package/src/components/descope-passcode/descope-passcode-internal/index.js

@@ -0,0 +1,3 @@
+import PasscodeInternal, { componentName } from './PasscodeInternal';
+
+customElements.define(componentName, PasscodeInternal);

package/src/components/descope-passcode/index.js

@@ -0,0 +1,8 @@
+import { componentName, PasscodeClass } from './PasscodeClass';
+import '../descope-text-field';
+import '../descope-loader-radial';
+import './descope-passcode-internal';
+
+customElements.define(componentName, PasscodeClass);
+
+export { PasscodeClass };