@descope/web-components-ui 1.0.358 → 1.0.359

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 {