@descope/web-components-ui 1.0.358 → 1.0.360

package/dist/index.esm.js

@@ -4,6 +4,7 @@ import '@vaadin/checkbox';
 import '@vaadin/text-field';
 import '@vaadin/email-field';
 import '@vaadin/number-field';
+import debounce from 'lodash.debounce';
 import '@vaadin/icons';
 import '@vaadin/icon';
 import '@vaadin/password-field';
@@ -2518,6 +2519,7 @@ const {
   requiredIndicator: requiredIndicator$9,
   inputField: inputField$6,
   input,
+  inputMask,
   helperText: helperText$8,
   errorMessage: errorMessage$a,
   disabledPlaceholder,
@@ -2534,6 +2536,7 @@ const {
   disabledPlaceholder: { selector: '> input:disabled::placeholder' },
   inputField: { selector: '::part(input-field)' },
   input: { selector: 'input' },
+  inputMask: { selector: '::part(input-field)::before' },
   inputDisabled: { selector: 'input:disabled' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
@@ -2559,7 +2562,10 @@ var textFieldMappings = {
   hostMinWidth: { ...host$i, property: 'min-width' },
   hostDirection: { ...host$i, property: 'direction' },
 
-  inputBackgroundColor: { ...inputField$6, property: 'background-color' },
+  inputBackgroundColor: [
+    { ...inputField$6, property: 'background-color' },
+    { ...inputMask, property: 'background-color' },
+  ],
 
   errorMessageTextColor: { ...errorMessage$a, property: 'color' },
   helperTextColor: { ...helperText$8, property: '-webkit-text-fill-color' },
@@ -2870,18 +2876,46 @@ const NumberFieldClass = compose(
 
 customElements.define(componentName$I, NumberFieldClass);
 
+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';
+
 const focusElement = (ele) => {
   ele?.focus();
   ele?.setSelectionRange?.(1, 1);
 };
 
-const getSanitizedCharacters = (str) => {
-  const pin = str.replace(/\s/g, ''); // sanitize string
+const sanitizeStr = (str) => {
+  return str.replace(/\D/g, '') || '';
+};
 
-  // accept only numbers
-  if (!pin.match(/^\d+$/)) return [];
+// 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).
+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;
+};
 
-  return [...pin]; // creating array of chars
+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);
+  }
 };
 
 /* eslint-disable no-param-reassign */
@@ -2972,11 +3006,7 @@ class PasscodeInternal extends BaseInputClass$7 {
   set value(val) {
     if (val === this.value) return;
 
-    const charArr = getSanitizedCharacters(val);
-
-    if (charArr.length) {
-      this.fillDigits(charArr, this.inputs[0]);
-    }
+    this.parseInputValue(this.inputs[0], sanitizeStr(val));
   }
 
   getValidity() {
@@ -3032,8 +3062,8 @@ class PasscodeInternal extends BaseInputClass$7 {
     focusElement(currentInput);
   }
 
-  parseInputValue(input) {
-    const charArr = getSanitizedCharacters(input.value);
+  parseInputValue(input, value = '') {
+    const charArr = value.split('');
 
     if (!charArr.length) {
       // if we got an invalid value we want to clear the input
@@ -3045,15 +3075,30 @@ class PasscodeInternal extends BaseInputClass$7 {
     let currentInput;
 
     this.inputs.forEach((input) => {
+      input.shadowRoot.appendChild(createInputMaskStyle());
+
       input.addEventListener('change', (e) => {
         if (currentInput !== e.target) {
-          this.parseInputValue(input);
+          this.parseInputValue(input, input.value);
           this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
         }
       });
 
+      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]);
+        }
+
         // when using iPhone's code autofill we get only `change` events.
         // In other scenarios we get `input` AND `change` events.
         // In order to be parse the digits properly in iPhone, we need to listen to `change` event
@@ -3064,12 +3109,11 @@ class PasscodeInternal extends BaseInputClass$7 {
         currentInput = e.target;
         setTimeout(() => {
           currentInput = null;
-          if (e.inputType === 'deleteContentBackward') {
+          if (e?.inputType === 'deleteContentBackward') {
             focusElement(this.getPrevInput(input));
           }
         });
-
-        this.parseInputValue(input);
+        debouncedHandleParseInput(input.value);
       });
 
       // we want backspace to focus on the previous digit
@@ -3394,10 +3438,15 @@ const PasscodeClass = compose(
 				-webkit-mask-image: none;
 			}
 
+      /* safari */
+			vaadin-text-field::part(input-field)::after {
+        opacity: 0;
+      }
+
 			vaadin-text-field {
 				margin: 0;
 				padding: 0;
-				width: 100%
+				width: 100%;
 			}
 
 			vaadin-text-field::before {
@@ -3718,7 +3767,7 @@ const decodeHTML = (html) => {
 
 const componentName$D = getComponentName('enriched-text');
 
-let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -3878,7 +3927,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
       this.contentNode.removeAttribute('inert');
     }
   }
-};
+}
 
 const EnrichedTextClass = compose(
   createStyleMixin({
@@ -3903,9 +3952,10 @@ const EnrichedTextClass = compose(
     },
   }),
   createStyleMixin({ componentNameOverride: getComponentName('link') }),
+  createStyleMixin({ componentNameOverride: getComponentName('text') }),
   draggableMixin,
   componentNameValidationMixin
-)(EnrichedText$2);
+)(EnrichedText);
 
 customElements.define(componentName$D, EnrichedTextClass);
 
@@ -12941,6 +12991,7 @@ const text = {
   [vars$v.textLineHeight]: '1.35em',
   [vars$v.textAlign]: 'left',
   [vars$v.textColor]: globalRefs$m.colors.surface.dark,
+
   variant: {
     h1: {
       [vars$v.fontSize]: globalRefs$m.typography.h1.size,
@@ -13024,33 +13075,31 @@ var text$1 = /*#__PURE__*/Object.freeze({
 });
 
 const globalRefs$l = getThemeRefs(globals);
-const vars$u = EnrichedTextClass.cssVarList;
+const vars$u = LinkClass.cssVarList;
 
-const EnrichedText = {
+const link = {
   [vars$u.hostDirection]: globalRefs$l.direction,
+  [vars$u.cursor]: 'pointer',
 
-  [vars$u.fontSize]: globalRefs$l.typography.body1.size,
-  [vars$u.fontWeight]: globalRefs$l.typography.body1.weight,
-  [vars$u.fontWeightBold]: '900',
-  [vars$u.fontFamily]: globalRefs$l.typography.body1.font,
+  [vars$u.textColor]: globalRefs$l.colors.primary.main,
 
-  [vars$u.textLineHeight]: '1.35em',
-  [vars$u.textAlign]: 'left',
-  [vars$u.textColor]: globalRefs$l.colors.surface.dark,
+  textAlign: {
+    right: { [vars$u.textAlign]: 'right' },
+    left: { [vars$u.textAlign]: 'left' },
+    center: { [vars$u.textAlign]: 'center' },
+  },
 
-  [vars$u.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
-  [vars$u.linkTextDecoration]: 'none',
-  [vars$u.linkHoverTextDecoration]: 'underline',
+  _fullWidth: {
+    [vars$u.hostWidth]: '100%',
+  },
 
-  [vars$u.minWidth]: '0.25em',
-  [vars$u.minHeight]: '1.35em',
+  _hover: {
+    [vars$u.textDecoration]: 'underline',
+  },
 
   mode: {
-    primary: {
-      [vars$u.textColor]: globalRefs$l.colors.surface.contrast,
-    },
     secondary: {
-      [vars$u.textColor]: globalRefs$l.colors.surface.dark,
+      [vars$u.textColor]: globalRefs$l.colors.secondary.main,
     },
     error: {
       [vars$u.textColor]: globalRefs$l.colors.error.main,
@@ -13059,101 +13108,41 @@ const EnrichedText = {
       [vars$u.textColor]: globalRefs$l.colors.success.main,
     },
   },
-
-  variant: {
-    h1: {
-      [vars$u.fontSize]: globalRefs$l.typography.h1.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.h1.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.h1.font,
-    },
-    h2: {
-      [vars$u.fontSize]: globalRefs$l.typography.h2.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.h2.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.h2.font,
-    },
-    h3: {
-      [vars$u.fontSize]: globalRefs$l.typography.h3.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.h3.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.h3.font,
-    },
-    subtitle1: {
-      [vars$u.fontSize]: globalRefs$l.typography.subtitle1.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.subtitle1.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.subtitle1.font,
-    },
-    subtitle2: {
-      [vars$u.fontSize]: globalRefs$l.typography.subtitle2.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.subtitle2.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.subtitle2.font,
-    },
-    body1: {
-      [vars$u.fontSize]: globalRefs$l.typography.body1.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.body1.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.body1.font,
-    },
-    body2: {
-      [vars$u.fontSize]: globalRefs$l.typography.body2.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.body2.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.body2.font,
-    },
-  },
-
-  textAlign: {
-    right: { [vars$u.textAlign]: 'right' },
-    left: { [vars$u.textAlign]: 'left' },
-    center: { [vars$u.textAlign]: 'center' },
-  },
-
-  _fullWidth: {
-    [vars$u.hostWidth]: '100%',
-  },
 };
 
-var EnrichedText$1 = /*#__PURE__*/Object.freeze({
+var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: EnrichedText,
+  default: link,
   vars: vars$u
 });
 
 const globalRefs$k = getThemeRefs(globals);
-const vars$t = LinkClass.cssVarList;
+const vars$t = EnrichedTextClass.cssVarList;
 
-const link = {
+const enrichedText = {
   [vars$t.hostDirection]: globalRefs$k.direction,
-  [vars$t.cursor]: 'pointer',
+  [vars$t.hostWidth]: useVar(vars$v.hostWidth),
 
-  [vars$t.textColor]: globalRefs$k.colors.primary.main,
+  [vars$t.textLineHeight]: useVar(vars$v.textLineHeight),
+  [vars$t.textColor]: useVar(vars$v.textColor),
+  [vars$t.textAlign]: useVar(vars$v.textAlign),
 
-  textAlign: {
-    right: { [vars$t.textAlign]: 'right' },
-    left: { [vars$t.textAlign]: 'left' },
-    center: { [vars$t.textAlign]: 'center' },
-  },
+  [vars$t.fontSize]: useVar(vars$v.fontSize),
+  [vars$t.fontWeight]: useVar(vars$v.fontWeight),
+  [vars$t.fontFamily]: useVar(vars$v.fontFamily),
 
-  _fullWidth: {
-    [vars$t.hostWidth]: '100%',
-  },
-
-  _hover: {
-    [vars$t.textDecoration]: 'underline',
-  },
+  [vars$t.linkColor]: useVar(vars$u.textColor),
+  [vars$t.linkTextDecoration]: 'none',
+  [vars$t.linkHoverTextDecoration]: 'underline',
 
-  mode: {
-    secondary: {
-      [vars$t.textColor]: globalRefs$k.colors.secondary.main,
-    },
-    error: {
-      [vars$t.textColor]: globalRefs$k.colors.error.main,
-    },
-    success: {
-      [vars$t.textColor]: globalRefs$k.colors.success.main,
-    },
-  },
+  [vars$t.fontWeightBold]: '900',
+  [vars$t.minWidth]: '0.25em',
+  [vars$t.minHeight]: '1.35em',
 };
 
-var link$1 = /*#__PURE__*/Object.freeze({
+var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: link,
+  default: enrichedText,
   vars: vars$t
 });
 
@@ -14363,7 +14352,7 @@ const components = {
   totpImage,
   notpImage,
   text: text$1,
-  EnrichedText: EnrichedText$1,
+  enrichedText: enrichedText$1,
   link: link$1,
   divider: divider$1,
   passcode: passcode$1,