@descope/web-components-ui 1.0.156 → 1.0.158

package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1841],{7361:(t,e,i)=>{i.d(e,{f:()=>u,Z:()=>h});var s=i(3878),n=i(4567);const r=t=>{t?.focus(),t?.setSelectionRange(1,1)},a=t=>{const e=t.replace(/\s/g,"");return e.match(/^\d+$/)?[...e]:[]},u=(0,n.iY)("passcode-internal"),p=["digits"],l=["disabled","bordered","size","invalid","readonly"],d=(0,s.P)({componentName:u,baseSelector:"div"}),h=class extends d{static get observedAttributes(){return p.concat(d.observedAttributes||[])}static get componentName(){return u}constructor(){super(),this.innerHTML='\n\t\t<div class="wrapper"></div>\n\t\t<style>\n\t\t\t.wrapper {\n\t\t\t\tdisplay: flex;\n\t\t\t\twidth: 100%;\n\t\t\t\tjustify-content: space-between;\n\t\t\t}\n\t\t</style>\n\t\t',this.wrapperEle=this.querySelector("div")}renderInputs(){const t=[...Array(this.digits).keys()].map((t=>`\n\t\t<descope-text-field\n\t\t\tdata-id=${t}\n\t\t\ttype="tel"\n\t\t\tautocomplete="one-time-code"\n\t\t\tinputMode="numeric"\n\t\t></descope-text-field>\n\t`));this.wrapperEle.innerHTML=t.join(""),this.inputs=Array.from(this.querySelectorAll("descope-text-field")),this.initInputs()}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map((({value:t})=>t)).join("")||""}set value(t){if(t===this.value)return;const e=a(t);e.length&&this.fillDigits(e,this.inputs[0])}get pattern(){return`^$|^\\d{${this.digits},}$`}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:this.pattern&&!new RegExp(this.pattern).test(this.value)?{patternMismatch:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[0].focus()})),super.init?.(),this.renderInputs()}getInputIdx(t){return Number.parseInt(t.getAttribute("data-id"),10)}getNextInput(t){const e=this.getInputIdx(t),i=Math.min(e+1,this.inputs.length-1);return this.inputs[i]}getPrevInput(t){const e=this.getInputIdx(t),i=Math.max(e-1,0);return this.inputs[i]}fillDigits(t,e){for(let i=0;i<t.length;i+=1){e.value=t[i]??"";const s=this.getNextInput(e);if(s===e)break;e=s}r(e)}initInputs(){this.inputs.forEach((t=>{t.addEventListener("input",(e=>{const i=a(t.value);i.length?this.fillDigits(i,t):t.value=""})),t.onkeydown=({key:e})=>{"Backspace"===e?(t.selectionStart||t.setSelectionRange(1,1),setTimeout((()=>{r(this.getPrevInput(t))}))):1===e.length&&(t.value="")},(0,n.oP)(this,t,{includeAttrs:l})})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),e!==i&&p.includes(t)&&"digits"===t&&this.renderInputs()}}},4775:(t,e,i)=>{i.r(e);var s=i(7361);customElements.define(s.f,s.Z)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1841],{7361:(t,e,s)=>{s.d(e,{f:()=>u,Z:()=>h});var i=s(3878),n=s(4567);const r=t=>{t?.focus(),t?.setSelectionRange(1,1)},a=t=>{const e=t.replace(/\s/g,"");return e.match(/^\d+$/)?[...e]:[]},u=(0,n.iY)("passcode-internal"),p=["digits"],l=["disabled","bordered","size","invalid","readonly"],d=(0,i.P)({componentName:u,baseSelector:"div"}),h=class extends d{static get observedAttributes(){return p.concat(d.observedAttributes||[])}static get componentName(){return u}constructor(){super(),this.innerHTML='\n\t\t<div class="wrapper"></div>\n\t\t<style>\n\t\t\t.wrapper {\n\t\t\t\tdisplay: flex;\n\t\t\t\twidth: 100%;\n\t\t\t\tjustify-content: space-between;\n\t\t\t}\n\t\t</style>\n\t\t',this.wrapperEle=this.querySelector("div")}renderInputs(){const t=[...Array(this.digits).keys()].map((t=>`\n\t\t<descope-text-field\n\t\t\tdata-id=${t}\n\t\t\ttype="tel"\n\t\t\tautocomplete="one-time-code"\n\t\t\tinputMode="numeric"\n\t\t></descope-text-field>\n\t`));this.wrapperEle.innerHTML=t.join(""),this.inputs=Array.from(this.querySelectorAll("descope-text-field")),this.initInputs()}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map((({value:t})=>t)).join("")||""}set value(t){if(t===this.value)return;const e=a(t);e.length&&this.fillDigits(e,this.inputs[0])}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:this.pattern&&!new RegExp(this.pattern).test(this.value)?{patternMismatch:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[0].focus()})),super.init?.(),this.renderInputs()}getInputIdx(t){return Number.parseInt(t.getAttribute("data-id"),10)}getNextInput(t){const e=this.getInputIdx(t),s=Math.min(e+1,this.inputs.length-1);return this.inputs[s]}getPrevInput(t){const e=this.getInputIdx(t),s=Math.max(e-1,0);return this.inputs[s]}fillDigits(t,e){for(let s=0;s<t.length;s+=1){e.value=t[s]??"";const i=this.getNextInput(e);if(i===e)break;e=i}r(e)}parseInputValue(t){const e=a(t.value);e.length?this.fillDigits(e,t):t.value=""}initInputs(){let t;this.inputs.forEach((e=>{e.addEventListener("change",(s=>{t!==s.target&&this.parseInputValue(e)})),e.addEventListener("input",(s=>{t=s.target,setTimeout((()=>{t=null,"deleteContentBackward"===s.inputType&&r(this.getPrevInput(e))})),this.parseInputValue(e)})),e.onkeydown=({key:t})=>{"Backspace"===t?e.setSelectionRange(1,1):1===t.length&&(e.value="")},(0,n.oP)(this,e,{includeAttrs:l})})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),e!==s&&p.includes(t)&&"digits"===t&&this.renderInputs()}get pattern(){return`^$|^\\d{${this.digits},}$`}}},4775:(t,e,s)=>{s.r(e);var i=s(7361);customElements.define(i.f,i.Z)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.156",
+  "version": "1.0.158",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

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

@@ -74,10 +74,6 @@ class PasscodeInternal extends BaseInputClass {
     }
   }
 
-  get pattern() {
-    return `^$|^\\d{${this.digits},}$`;
-  }
-
   getValidity() {
     if (this.isRequired && !this.value) {
       return { valueMissing: true };
@@ -131,29 +127,50 @@ class PasscodeInternal extends BaseInputClass {
     focusElement(currentInput);
   }
 
+  parseInputValue(input) {
+    const charArr = getSanitizedCharacters(input.value);
+
+    if (!charArr.length) {
+      // if we got an invalid value we want to clear the input
+      input.value = '';
+    } else this.fillDigits(charArr, input);
+  }
+
   initInputs() {
+    let currentInput;
+
     this.inputs.forEach((input) => {
+      input.addEventListener('change', (e) => {
+        if (currentInput !== e.target) {
+          this.parseInputValue(input);
+        }
+      });
+
       // sanitize the input
-      input.addEventListener('input', (_) => {
-        const charArr = getSanitizedCharacters(input.value);
+      input.addEventListener('input', (e) => {
+        // 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
+        // and validate it was not preceeded by an `input` event.
+        // To do so, we're keeping a reference to the input element in `input` events,
+        // and only if there the reference is null, then we're assuming no `input` event was preceeding,
+        // and we're parsing the digits.
+        currentInput = e.target;
+        setTimeout(() => {
+          currentInput = null;
+          if (e.inputType === 'deleteContentBackward') {
+            focusElement(this.getPrevInput(input));
+          }
+        });
 
-        if (!charArr.length) {
-          // if we got an invalid value we want to clear the input
-          input.value = '';
-        } else this.fillDigits(charArr, input);
+        this.parseInputValue(input);
       });
 
       // 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 the cursor is at 0, we want to move it to 1, so the value will be deleted
-          if (!input.selectionStart) {
-            input.setSelectionRange(1, 1);
-          }
-          setTimeout(() => {
-            focusElement(this.getPrevInput(input));
-          });
+          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
@@ -179,6 +196,10 @@ class PasscodeInternal extends BaseInputClass {
       }
     }
   }
+
+  get pattern() {
+    return `^$|^\\d{${this.digits},}$`;
+  }
 }
 
 export default PasscodeInternal;