@descope/web-components-ui 1.0.219 → 1.0.221

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

@@ -1 +1 @@
-"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||[])}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.value?e.setSelectionRange(1,1):setTimeout((()=>r(this.getPrevInput(e))),0):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)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1841],{7361:(t,e,s)=>{s.d(e,{f:()=>a,Z:()=>h});var i=s(3878),n=s(4567);const r=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},u=t=>{const e=t.replace(/\s/g,"");return e.match(/^\d+$/)?[...e]:[]},a=(0,n.iY)("passcode-internal"),p=["digits"],l=["disabled","bordered","size","invalid","readonly"],d=(0,i.P)({componentName:a,baseSelector:"div"}),h=class extends d{static get observedAttributes(){return p.concat(d.observedAttributes||[])}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=u(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=u(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),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))})),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.value?e.setSelectionRange(1,1):setTimeout((()=>r(this.getPrevInput(e))),0):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/dist/umd/descope-passcode-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{4919:(t,e,n)=>{n.r(e),n.d(e,{PasscodeClass:()=>x});var i=n(1e3),r=n(7361),o=n(6417),a=n(2061),d=n(4567),s=n(4201);const l=(0,d.iY)("passcode"),p=["digits"],{host:c,digitField:u,label:g,requiredIndicator:h,internalWrapper:m,focusedDigitField:f,errorMessage:b}={host:{selector:()=>":host"},focusedDigitField:{selector:()=>`${o.z.componentName}[focused="true"]`},digitField:{selector:()=>o.z.componentName},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"},errorMessage:{selector:"::part(error-message)"}},y=o.z.cssVarList,x=(0,a.qC)((0,i.yk)({mappings:{fontSize:[{...u,property:y.fontSize},c],hostWidth:{property:"width"},fontFamily:[c,{...g}],labelTextColor:[{...g,property:"color"},{...h,property:"color"}],labelRequiredIndicator:{...h,property:"content"},errorMessageTextColor:{...b,property:"color"},digitValueTextColor:{selector:o.z.componentName,property:y.inputValueTextColor},digitSize:[{...u,property:"height"},{...u,property:"width"}],digitPadding:{...u,property:y.inputHorizontalPadding},digitTextAlign:{...u,property:y.inputTextAlign},digitCaretTextColor:{...u,property:y.inputCaretTextColor},digitSpacing:{...m,property:"gap"},digitOutlineColor:{...u,property:y.inputOutlineColor},digitOutlineWidth:{...u,property:y.inputOutlineWidth},focusedDigitFieldOutlineColor:{...f,property:y.inputOutlineColor}}}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"]}),i.Ae,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${r.f}\n\t\t\t\tbordered="true"\n\t\t\t\tname="code"\n\t\t\t\ttabindex="-1"\n\t\t\t\tslot="input"\n\t\t\t><slot></slot></${r.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(r.f),(0,d.oP)(this,this.inputElement,{includeAttrs:["digits","size"]})}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"digits"===t&&this.style.setProperty("--passcode-digits-count",n)}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: calc(var(--passcode-digits-count) * 2em);\n\t\t\t}\n\t\t\t${(0,s.DY)()}\n\t\t\t:host::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t\t:host::part(input-field)::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\n\t\t\tdescope-passcode-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tmin-height: initial;\n\t\t\t}\n\n\t\t\tdescope-passcode-internal .wrapper {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tmin-height: initial;\n\t\t\t\theight: 100%;\n\t\t\t\tjustify-content: space-between;\n\t\t\t}\n\n\t\t\tdescope-passcode-internal descope-text-field {\n\t\t\t\tmin-width: 2em;\n\t\t\t\tmax-width: var(${y.inputHeight});\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbackground-color: transparent;\n\t\t\t\tpadding: 0;\n\t\t\t\toverflow: hidden;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\n\t\t\tvaadin-text-field {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%\n\t\t\t}\n\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\t\t\tborder: 0 solid;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n\t\t\t${(0,s.Pd)("vaadin-text-field")}\n    \t`,excludeAttrsSync:["tabindex"],componentName:l}));n(9357),n(4775),customElements.define(l,x)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{4919:(t,e,n)=>{n.r(e),n.d(e,{PasscodeClass:()=>x});var i=n(1e3),r=n(7361),o=n(6417),a=n(2061),d=n(4567),s=n(4201);const l=(0,d.iY)("passcode"),p=["digits"],{host:c,digitField:u,label:g,requiredIndicator:h,internalWrapper:m,focusedDigitField:f,errorMessage:b}={host:{selector:()=>":host"},focusedDigitField:{selector:()=>`${o.z.componentName}[focused="true"]`},digitField:{selector:()=>o.z.componentName},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"},errorMessage:{selector:"::part(error-message)"}},y=o.z.cssVarList,x=(0,a.qC)((0,i.yk)({mappings:{fontSize:[{...u,property:y.fontSize},c],hostWidth:{property:"width"},fontFamily:[c,{...g}],labelTextColor:[{...g,property:"color"},{...h,property:"color"}],labelRequiredIndicator:{...h,property:"content"},errorMessageTextColor:{...b,property:"color"},digitValueTextColor:{selector:o.z.componentName,property:y.inputValueTextColor},digitSize:[{...u,property:"height"},{...u,property:"width"}],digitPadding:{...u,property:y.inputHorizontalPadding},digitTextAlign:{...u,property:y.inputTextAlign},digitCaretTextColor:{...u,property:y.inputCaretTextColor},digitSpacing:{...m,property:"gap"},digitOutlineColor:{...u,property:y.inputOutlineColor},digitOutlineWidth:{...u,property:y.inputOutlineWidth},focusedDigitFieldOutlineColor:{...f,property:y.inputOutlineColor}}}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"]}),i.Ae,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n      <${r.f}\n        bordered="true"\n        name="code"\n        tabindex="-1"\n        slot="input"\n      ><slot></slot></${r.f}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(r.f),(0,d.oP)(this,this.inputElement,{includeAttrs:["digits","size"]})}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"digits"===t&&this.style.setProperty("--passcode-digits-count",n)}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: calc(var(--passcode-digits-count) * 2em);\n\t\t\t}\n\t\t\t${(0,s.DY)()}\n\t\t\t:host::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t\t:host::part(input-field)::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\n\t\t\tdescope-passcode-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tmin-height: initial;\n\t\t\t}\n\n\t\t\tdescope-passcode-internal .wrapper {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tmin-height: initial;\n\t\t\t\theight: 100%;\n\t\t\t\tjustify-content: space-between;\n\t\t\t}\n\n\t\t\tdescope-passcode-internal descope-text-field {\n\t\t\t\tmin-width: 2em;\n\t\t\t\tmax-width: var(${y.inputHeight});\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbackground-color: transparent;\n\t\t\t\tpadding: 0;\n\t\t\t\toverflow: hidden;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\n\t\t\tvaadin-text-field {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%\n\t\t\t}\n\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\t\t\tborder: 0 solid;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n\t\t\t${(0,s.Pd)("vaadin-text-field")}\n    \t`,excludeAttrsSync:["tabindex"],componentName:l}));n(9357),n(4775),customElements.define(l,x)}}]);

package/package.json

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

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

@@ -33,13 +33,13 @@ const customMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${descopeInternalComponentName}
-				bordered="true"
-				name="code"
-				tabindex="-1"
-				slot="input"
-			><slot></slot></${descopeInternalComponentName}>
-			`;
+      <${descopeInternalComponentName}
+        bordered="true"
+        name="code"
+        tabindex="-1"
+        slot="input"
+      ><slot></slot></${descopeInternalComponentName}>
+      `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 

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

@@ -139,6 +139,7 @@ class PasscodeInternal extends BaseInputClass {
       input.addEventListener('change', (e) => {
         if (currentInput !== e.target) {
           this.parseInputValue(input);
+          this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
         }
       });