@descope/web-components-ui 3.14.9 → 3.15.0

package/dist/umd/descope-modal-index-js.js

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4139],{52079(e,r,o){o.r(r),o.d(r,{ModalClass:()=>p,componentName:()=>d}),o(69117);var t=o(25964),a=o(9696),s=o(97810),l=o(79365);const d=(0,s.xE)("modal"),n=["opened"],p=(0,a.Zz)((0,l.RF)({mappings:{overlayBackdropColor:{property:()=>p.cssVarList.overlay.backdropColor},overlayBackgroundColor:{property:()=>p.cssVarList.overlay.backgroundColor},overlayShadow:{property:()=>p.cssVarList.overlay.shadow},overlayWidth:{property:()=>p.cssVarList.overlay.width},overlayBorderWidth:{property:()=>p.cssVarList.overlay.borderWidth},overlayBorderStyle:{property:()=>p.cssVarList.overlay.borderStyle},overlayBorderColor:{property:()=>p.cssVarList.overlay.borderColor},overlayBorderRadius:{property:()=>p.cssVarList.overlay.borderRadius}}}),(0,l.mA)({name:"overlay",selector:"",mappings:{hostDisplay:{selector:()=>":host(.descope-modal)",property:"display",important:!0},backgroundColor:[{selector:()=>"::part(content)",property:"background-color"},{selector:()=>"::part(overlay)",property:"background-color"}],backdropColor:{selector:()=>"::part(backdrop)",property:"background-color"},borderStyle:{selector:()=>"::part(content)",property:"border-style"},borderWidth:{selector:()=>"::part(content)",property:"border-width"},borderColor:{selector:()=>"::part(content)",property:"border-color"},borderRadius:{selector:()=>"::part(content)",property:"border-radius  "},width:{selector:()=>"::part(overlay)",property:"width"},shadow:{selector:()=>"::part(overlay)",property:"box-shadow"}},forward:{include:!1,attributes:["opened","style"]}}),l.VO,l.tQ,e=>class extends e{static get observedAttributes(){return[].concat(e.observedAttributes||[],n)}get opened(){return"true"===this.getAttribute("opened")}handleOpened(){this.opened?this.style.display="":this.style.display="none"}attributeChangedCallback(e,r,o){super.attributeChangedCallback?.(e,r,o),"opened"===e&&this.handleOpened()}init(){super.init?.(),this.style.display="none",setTimeout(()=>{this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay").appendChild(document.createElement("slot")),this.#e(),(0,s.EA)(this,this.baseElement,{includeAttrs:["opened"]}),this.handleOpened()})}#e(){const e=this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay");e._attachOverlay=()=>{e.bringToFront(),(0,t.fz)("\n          :host {\n            display: flex!important;\n          }\n          ",this.baseElement)},e._detachOverlay=()=>{this.baseElement.style.display="none"},e._enterModalState=()=>{},e.close=()=>!1}})((0,l.tz)({slots:[""],wrappedEleName:"vaadin-dialog",style:()=>"\n      vaaadin-dialog {\n        display: flex!important;\n      }\n    ",excludeAttrsSync:["tabindex","opened","style"],componentName:d}));customElements.define(d,p)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4139],{52079(e,r,t){t.r(r),t.d(r,{ModalClass:()=>i,componentName:()=>d}),t(69117);var o=t(25964),a=t(9696),s=t(97810),l=t(79365);const d=(0,s.xE)("modal"),n=["opened"],i=(0,a.Zz)((0,l.RF)({mappings:{overlayBackdropColor:{property:()=>i.cssVarList.overlay.backdropColor},overlayBackgroundColor:{property:()=>i.cssVarList.overlay.backgroundColor},overlayShadow:{property:()=>i.cssVarList.overlay.shadow},overlayWidth:{property:()=>i.cssVarList.overlay.width},overlayBorderWidth:{property:()=>i.cssVarList.overlay.borderWidth},overlayBorderStyle:{property:()=>i.cssVarList.overlay.borderStyle},overlayBorderColor:{property:()=>i.cssVarList.overlay.borderColor},overlayBorderRadius:{property:()=>i.cssVarList.overlay.borderRadius}}}),(0,l.mA)({name:"overlay",selector:"",mappings:{hostDisplay:{selector:()=>":host(.descope-modal)",property:"display",important:!0},backgroundColor:[{selector:()=>"::part(content)",property:"background-color"},{selector:()=>"::part(overlay)",property:"background-color"}],backdropColor:{selector:()=>"::part(backdrop)",property:"background-color"},borderStyle:{selector:()=>"::part(content)",property:"border-style"},borderWidth:{selector:()=>"::part(content)",property:"border-width"},borderColor:{selector:()=>"::part(content)",property:"border-color"},borderRadius:{selector:()=>"::part(content)",property:"border-radius  "},width:{selector:()=>"::part(overlay)",property:"width"},shadow:{selector:()=>"::part(overlay)",property:"box-shadow"}},forward:{include:!1,attributes:["opened","style"]}}),l.VO,l.tQ,e=>class extends e{static get observedAttributes(){return[].concat(e.observedAttributes||[],n)}get opened(){return"true"===this.getAttribute("opened")}get closeOnOutsideClick(){return"true"===this.getAttribute("close-on-outside-click")}handleOpened(){this.opened?this.style.display="":this.style.display="none"}attributeChangedCallback(e,r,t){super.attributeChangedCallback?.(e,r,t),"opened"===e&&this.handleOpened()}init(){super.init?.(),this.style.display="none",setTimeout(()=>{this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay").appendChild(document.createElement("slot")),this.#e(),(0,s.EA)(this,this.baseElement,{includeAttrs:["opened"]}),this.handleOpened()})}#e(){const e=this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay");e._attachOverlay=()=>{e.bringToFront(),(0,o.fz)("\n          :host {\n            display: flex!important;\n          }\n          ",this.baseElement)},e._detachOverlay=()=>{this.baseElement.style.display="none"},e._enterModalState=()=>{},e.close=()=>!1,e.addEventListener("click",r=>{if(!this.closeOnOutsideClick||!this.opened)return;const t=e.shadowRoot?.querySelector('[part="overlay"]');t&&!r.composedPath().includes(t)&&this.removeAttribute("opened")})}})((0,l.tz)({slots:[""],wrappedEleName:"vaadin-dialog",style:()=>"\n      vaaadin-dialog {\n        display: flex!important;\n      }\n    ",excludeAttrsSync:["tabindex","opened","style"],componentName:d}));customElements.define(d,i)}}]);
 //# sourceMappingURL=descope-modal-index-js.js.map

package/dist/umd/descope-modal-index-js.js.map

@@ -1 +1 @@
-{"version":3,"file":"descope-modal-index-js.js","mappings":"mPAWO,MAAMA,GAAgB,QAAiB,SAExCC,EAAgB,CAAC,UAgFVC,GAAa,SACxB,QAAiB,CACfC,SAAU,CACRC,qBAAsB,CAAEC,SAAU,IAAMH,EAAWI,WAAWC,QAAQC,eACtEC,uBAAwB,CAAEJ,SAAU,IAAMH,EAAWI,WAAWC,QAAQG,iBACxEC,cAAe,CAAEN,SAAU,IAAMH,EAAWI,WAAWC,QAAQK,QAC/DC,aAAc,CAAER,SAAU,IAAMH,EAAWI,WAAWC,QAAQO,OAC9DC,mBAAoB,CAAEV,SAAU,IAAMH,EAAWI,WAAWC,QAAQS,aACpEC,mBAAoB,CAAEZ,SAAU,IAAMH,EAAWI,WAAWC,QAAQW,aACpEC,mBAAoB,CAAEd,SAAU,IAAMH,EAAWI,WAAWC,QAAQa,aACpEC,oBAAqB,CAAEhB,SAAU,IAAMH,EAAWI,WAAWC,QAAQe,kBAGzE,QAAY,CACVC,KAAM,UACNC,SAAU,GACVrB,SAAU,CACRsB,YAAa,CACXD,SAAU,IAAM,wBAChBnB,SAAU,UACVqB,WAAW,GAEbhB,gBAAiB,CACf,CAAEc,SAAU,IAAM,kBAAmBnB,SAAU,oBAC/C,CAAEmB,SAAU,IAAM,kBAAmBnB,SAAU,qBAEjDG,cAAe,CACbgB,SAAU,IAAM,mBAChBnB,SAAU,oBAEZa,YAAa,CACXM,SAAU,IAAM,kBAChBnB,SAAU,gBAEZW,YAAa,CACXQ,SAAU,IAAM,kBAChBnB,SAAU,gBAEZe,YAAa,CACXI,SAAU,IAAM,kBAChBnB,SAAU,gBAEZiB,aAAc,CACZE,SAAU,IAAM,kBAChBnB,SAAU,mBAEZS,MAAO,CAAEU,SAAU,IAAM,kBAAmBnB,SAAU,SACtDO,OAAQ,CAAEY,SAAU,IAAM,kBAAmBnB,SAAU,eAEzDsB,QAAS,CACPC,SAAS,EACTC,WAAY,CAAC,SAAU,YAG3B,KACA,KArImBC,GACnB,cAA8BA,EAC5B,6BAAWC,GACT,MAAO,GAAGC,OAAOF,EAAWC,oBAAsB,GAAI9B,EACxD,CAEA,UAAIgC,GACF,MAAuC,SAAhCC,KAAKC,aAAa,SAC3B,CAEA,YAAAC,GACMF,KAAKD,OACPC,KAAKG,MAAMC,QAAU,GAErBJ,KAAKG,MAAMC,QAAU,MAEzB,CAEA,wBAAAC,CAAyBhB,EAAMiB,EAAUC,GACvCC,MAAMH,2BAA2BhB,EAAMiB,EAAUC,GAEpC,WAATlB,GACFW,KAAKE,cAET,CAEA,IAAAO,GACED,MAAMC,SACNT,KAAKG,MAAMC,QAAU,OAKrBM,WAAW,KAITV,KAAKW,YAAYC,WACdC,cAAc,yBACdC,YAAYC,SAASC,cAAc,SAEtChB,MAAK,KACL,QAAaA,KAAMA,KAAKW,YAAa,CAAEM,aAAc,CAAC,YAMtDjB,KAAKE,gBAET,CAKA,KACE,MAAM7B,EAAU2B,KAAKW,YAAYC,WAAWC,cAAc,yBAE1DxC,EAAQ6C,eAAiB,KACvB7C,EAAQ8C,gBACR,QACE,qFAKAnB,KAAKW,cAGTtC,EAAQ+C,eAAiB,KACvBpB,KAAKW,YAAYR,MAAMC,QAAU,QAEnC/B,EAAQgD,iBAAmB,OAE3BhD,EAAQiD,MAAQ,KAAM,CACxB,GAGsB,EA0DxB,QAAY,CACVC,MAAO,CAAC,IACRC,eAAgB,gBAChBrB,MAAO,IAAM,4EAKbsB,iBAAkB,CAAC,WAAY,SAAU,SACzC3D,mBC7JJ4D,eAAeC,OAAO7D,EAAeE,E","sources":["webpack://@descope/web-components-ui/./src/components/descope-modal/ModalClass.js","webpack://@descope/web-components-ui/./src/components/descope-modal/index.js"],"sourcesContent":["import { injectStyle } from '@descope-ui/common/components-helpers';\nimport { compose } from '../../helpers';\nimport { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';\nimport {\n  createStyleMixin,\n  draggableMixin,\n  createProxy,\n  componentNameValidationMixin,\n  portalMixin,\n} from '../../mixins';\n\nexport const componentName = getComponentName('modal');\n\nconst observedAttrs = ['opened'];\n\nconst customMixin = (superclass) =>\n  class ModalMixinClass extends superclass {\n    static get observedAttributes() {\n      return [].concat(superclass.observedAttributes || [], observedAttrs);\n    }\n\n    get opened() {\n      return this.getAttribute('opened') === 'true';\n    }\n\n    handleOpened() {\n      if (this.opened) {\n        this.style.display = '';\n      } else {\n        this.style.display = 'none';\n      }\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n      super.attributeChangedCallback?.(name, oldValue, newValue);\n\n      if (name === 'opened') {\n        this.handleOpened();\n      }\n    }\n\n    init() {\n      super.init?.();\n      this.style.display = 'none';\n\n      // vaadin-dialog might not be loaded in time\n      // in order to make sure it's loaded before this block is running\n      // we are wrapping it with setTimeout\n      setTimeout(() => {\n        // we want to sync descope-modal content through vaadin-dialog into the overlay\n        // so we are adding a slot to the overlay, which allows us to forward the content from\n        // vaadin-dialog to vaadin-dialog-overlay\n        this.baseElement.shadowRoot\n          .querySelector('vaadin-dialog-overlay')\n          .appendChild(document.createElement('slot'));\n\n        this.#overrideOverlaySettings();\n        forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });\n\n        // we need to always open the modal in `opened=false`\n        // to prevent it from rendering outside the dialog\n        // first, we have to run `overrideOverlaySettings` to setup\n        // the component.\n        this.handleOpened();\n      });\n    }\n\n    // the default vaadin behavior is to attach the overlay to the body when opened\n    // we do not want that because it's difficult to style the overlay in this way\n    // so we override it to open inside the shadow DOM\n    #overrideOverlaySettings() {\n      const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');\n\n      overlay._attachOverlay = () => {\n        overlay.bringToFront();\n        injectStyle(\n          `\n          :host {\n            display: flex!important;\n          }\n          `,\n          this.baseElement\n        );\n      };\n      overlay._detachOverlay = () => {\n        this.baseElement.style.display = 'none';\n      };\n      overlay._enterModalState = () => {};\n\n      overlay.close = () => false;\n    }\n  };\n\nexport const ModalClass = compose(\n  createStyleMixin({\n    mappings: {\n      overlayBackdropColor: { property: () => ModalClass.cssVarList.overlay.backdropColor },\n      overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },\n      overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },\n      overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },\n      overlayBorderWidth: { property: () => ModalClass.cssVarList.overlay.borderWidth },\n      overlayBorderStyle: { property: () => ModalClass.cssVarList.overlay.borderStyle },\n      overlayBorderColor: { property: () => ModalClass.cssVarList.overlay.borderColor },\n      overlayBorderRadius: { property: () => ModalClass.cssVarList.overlay.borderRadius },\n    },\n  }),\n  portalMixin({\n    name: 'overlay',\n    selector: '',\n    mappings: {\n      hostDisplay: {\n        selector: () => ':host(.descope-modal)',\n        property: 'display',\n        important: true,\n      },\n      backgroundColor: [\n        { selector: () => '::part(content)', property: 'background-color' },\n        { selector: () => '::part(overlay)', property: 'background-color' },\n      ],\n      backdropColor: {\n        selector: () => '::part(backdrop)',\n        property: 'background-color',\n      },\n      borderStyle: {\n        selector: () => '::part(content)',\n        property: 'border-style',\n      },\n      borderWidth: {\n        selector: () => '::part(content)',\n        property: 'border-width',\n      },\n      borderColor: {\n        selector: () => '::part(content)',\n        property: 'border-color',\n      },\n      borderRadius: {\n        selector: () => '::part(content)',\n        property: 'border-radius  ',\n      },\n      width: { selector: () => '::part(overlay)', property: 'width' },\n      shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },\n    },\n    forward: {\n      include: false,\n      attributes: ['opened', 'style'],\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n  customMixin\n)(\n  createProxy({\n    slots: [''],\n    wrappedEleName: 'vaadin-dialog',\n    style: () => `\n      vaaadin-dialog {\n        display: flex!important;\n      }\n    `,\n    excludeAttrsSync: ['tabindex', 'opened', 'style'],\n    componentName,\n  })\n);\n","import '@vaadin/dialog';\nimport { componentName, ModalClass } from './ModalClass';\n\ncustomElements.define(componentName, ModalClass);\n\nexport { ModalClass, componentName };\n"],"names":["componentName","observedAttrs","ModalClass","mappings","overlayBackdropColor","property","cssVarList","overlay","backdropColor","overlayBackgroundColor","backgroundColor","overlayShadow","shadow","overlayWidth","width","overlayBorderWidth","borderWidth","overlayBorderStyle","borderStyle","overlayBorderColor","borderColor","overlayBorderRadius","borderRadius","name","selector","hostDisplay","important","forward","include","attributes","superclass","observedAttributes","concat","opened","this","getAttribute","handleOpened","style","display","attributeChangedCallback","oldValue","newValue","super","init","setTimeout","baseElement","shadowRoot","querySelector","appendChild","document","createElement","includeAttrs","_attachOverlay","bringToFront","_detachOverlay","_enterModalState","close","slots","wrappedEleName","excludeAttrsSync","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"descope-modal-index-js.js","mappings":"mPAWO,MAAMA,GAAgB,QAAiB,SAExCC,EAAgB,CAAC,UA0GVC,GAAa,SACxB,QAAiB,CACfC,SAAU,CACRC,qBAAsB,CAAEC,SAAU,IAAMH,EAAWI,WAAWC,QAAQC,eACtEC,uBAAwB,CAAEJ,SAAU,IAAMH,EAAWI,WAAWC,QAAQG,iBACxEC,cAAe,CAAEN,SAAU,IAAMH,EAAWI,WAAWC,QAAQK,QAC/DC,aAAc,CAAER,SAAU,IAAMH,EAAWI,WAAWC,QAAQO,OAC9DC,mBAAoB,CAAEV,SAAU,IAAMH,EAAWI,WAAWC,QAAQS,aACpEC,mBAAoB,CAAEZ,SAAU,IAAMH,EAAWI,WAAWC,QAAQW,aACpEC,mBAAoB,CAAEd,SAAU,IAAMH,EAAWI,WAAWC,QAAQa,aACpEC,oBAAqB,CAAEhB,SAAU,IAAMH,EAAWI,WAAWC,QAAQe,kBAGzE,QAAY,CACVC,KAAM,UACNC,SAAU,GACVrB,SAAU,CACRsB,YAAa,CACXD,SAAU,IAAM,wBAChBnB,SAAU,UACVqB,WAAW,GAEbhB,gBAAiB,CACf,CAAEc,SAAU,IAAM,kBAAmBnB,SAAU,oBAC/C,CAAEmB,SAAU,IAAM,kBAAmBnB,SAAU,qBAEjDG,cAAe,CACbgB,SAAU,IAAM,mBAChBnB,SAAU,oBAEZa,YAAa,CACXM,SAAU,IAAM,kBAChBnB,SAAU,gBAEZW,YAAa,CACXQ,SAAU,IAAM,kBAChBnB,SAAU,gBAEZe,YAAa,CACXI,SAAU,IAAM,kBAChBnB,SAAU,gBAEZiB,aAAc,CACZE,SAAU,IAAM,kBAChBnB,SAAU,mBAEZS,MAAO,CAAEU,SAAU,IAAM,kBAAmBnB,SAAU,SACtDO,OAAQ,CAAEY,SAAU,IAAM,kBAAmBnB,SAAU,eAEzDsB,QAAS,CACPC,SAAS,EACTC,WAAY,CAAC,SAAU,YAG3B,KACA,KA/JmBC,GACnB,cAA8BA,EAC5B,6BAAWC,GACT,MAAO,GAAGC,OAAOF,EAAWC,oBAAsB,GAAI9B,EACxD,CAEA,UAAIgC,GACF,MAAuC,SAAhCC,KAAKC,aAAa,SAC3B,CAEA,uBAAIC,GACF,MAAuD,SAAhDF,KAAKC,aAAa,yBAC3B,CAEA,YAAAE,GACMH,KAAKD,OACPC,KAAKI,MAAMC,QAAU,GAErBL,KAAKI,MAAMC,QAAU,MAEzB,CAEA,wBAAAC,CAAyBjB,EAAMkB,EAAUC,GACvCC,MAAMH,2BAA2BjB,EAAMkB,EAAUC,GAEpC,WAATnB,GACFW,KAAKG,cAET,CAEA,IAAAO,GACED,MAAMC,SACNV,KAAKI,MAAMC,QAAU,OAKrBM,WAAW,KAITX,KAAKY,YAAYC,WACdC,cAAc,yBACdC,YAAYC,SAASC,cAAc,SAEtCjB,MAAK,KACL,QAAaA,KAAMA,KAAKY,YAAa,CAAEM,aAAc,CAAC,YAMtDlB,KAAKG,gBAET,CAKA,KACE,MAAM9B,EAAU2B,KAAKY,YAAYC,WAAWC,cAAc,yBAE1DzC,EAAQ8C,eAAiB,KACvB9C,EAAQ+C,gBACR,QACE,qFAKApB,KAAKY,cAGTvC,EAAQgD,eAAiB,KACvBrB,KAAKY,YAAYR,MAAMC,QAAU,QAEnChC,EAAQiD,iBAAmB,OAE3BjD,EAAQkD,MAAQ,KAAM,EAQtBlD,EAAQmD,iBAAiB,QAAUC,IACjC,IAAKzB,KAAKE,sBAAwBF,KAAKD,OAAQ,OAK/C,MAAM2B,EAAcrD,EAAQwC,YAAYC,cAAc,oBACjDY,IAAeD,EAAME,eAAeC,SAASF,IAMlD1B,KAAK6B,gBAAgB,WAEzB,GAGsB,EA0DxB,QAAY,CACVC,MAAO,CAAC,IACRC,eAAgB,gBAChB3B,MAAO,IAAM,4EAKb4B,iBAAkB,CAAC,WAAY,SAAU,SACzClE,mBCvLJmE,eAAeC,OAAOpE,EAAeE,E","sources":["webpack://@descope/web-components-ui/./src/components/descope-modal/ModalClass.js","webpack://@descope/web-components-ui/./src/components/descope-modal/index.js"],"sourcesContent":["import { injectStyle } from '@descope-ui/common/components-helpers';\nimport { compose } from '../../helpers';\nimport { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';\nimport {\n  createStyleMixin,\n  draggableMixin,\n  createProxy,\n  componentNameValidationMixin,\n  portalMixin,\n} from '../../mixins';\n\nexport const componentName = getComponentName('modal');\n\nconst observedAttrs = ['opened'];\n\nconst customMixin = (superclass) =>\n  class ModalMixinClass extends superclass {\n    static get observedAttributes() {\n      return [].concat(superclass.observedAttributes || [], observedAttrs);\n    }\n\n    get opened() {\n      return this.getAttribute('opened') === 'true';\n    }\n\n    get closeOnOutsideClick() {\n      return this.getAttribute('close-on-outside-click') === 'true';\n    }\n\n    handleOpened() {\n      if (this.opened) {\n        this.style.display = '';\n      } else {\n        this.style.display = 'none';\n      }\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n      super.attributeChangedCallback?.(name, oldValue, newValue);\n\n      if (name === 'opened') {\n        this.handleOpened();\n      }\n    }\n\n    init() {\n      super.init?.();\n      this.style.display = 'none';\n\n      // vaadin-dialog might not be loaded in time\n      // in order to make sure it's loaded before this block is running\n      // we are wrapping it with setTimeout\n      setTimeout(() => {\n        // we want to sync descope-modal content through vaadin-dialog into the overlay\n        // so we are adding a slot to the overlay, which allows us to forward the content from\n        // vaadin-dialog to vaadin-dialog-overlay\n        this.baseElement.shadowRoot\n          .querySelector('vaadin-dialog-overlay')\n          .appendChild(document.createElement('slot'));\n\n        this.#overrideOverlaySettings();\n        forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });\n\n        // we need to always open the modal in `opened=false`\n        // to prevent it from rendering outside the dialog\n        // first, we have to run `overrideOverlaySettings` to setup\n        // the component.\n        this.handleOpened();\n      });\n    }\n\n    // the default vaadin behavior is to attach the overlay to the body when opened\n    // we do not want that because it's difficult to style the overlay in this way\n    // so we override it to open inside the shadow DOM\n    #overrideOverlaySettings() {\n      const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');\n\n      overlay._attachOverlay = () => {\n        overlay.bringToFront();\n        injectStyle(\n          `\n          :host {\n            display: flex!important;\n          }\n          `,\n          this.baseElement\n        );\n      };\n      overlay._detachOverlay = () => {\n        this.baseElement.style.display = 'none';\n      };\n      overlay._enterModalState = () => {};\n\n      overlay.close = () => false;\n\n      // close the modal when the user clicks/taps the backdrop (outside the modal\n      // box). Vaadin's own outside-click does not fire here because we keep the\n      // overlay in the shadow DOM (see _attachOverlay above), which leaves it out\n      // of Vaadin's overlay stack, so we detect the backdrop click ourselves.\n      // the listener is always attached and reads `closeOnOutsideClick` at click\n      // time, so toggling the attribute after init is respected.\n      overlay.addEventListener('click', (event) => {\n        if (!this.closeOnOutsideClick || !this.opened) return;\n\n        // the visible modal box; clicks inside it (content + its padding) keep\n        // the modal open, only clicks on the dimmed backdrop close it. if we\n        // can't find the box, don't close - safer than closing on an inside click\n        const overlayPart = overlay.shadowRoot?.querySelector('[part=\"overlay\"]');\n        if (!overlayPart || event.composedPath().includes(overlayPart)) {\n          return;\n        }\n\n        // just close ourselves; consumers that need to react (e.g. ModalDriver\n        // resetting the content) observe the `opened` attribute\n        this.removeAttribute('opened');\n      });\n    }\n  };\n\nexport const ModalClass = compose(\n  createStyleMixin({\n    mappings: {\n      overlayBackdropColor: { property: () => ModalClass.cssVarList.overlay.backdropColor },\n      overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },\n      overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },\n      overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },\n      overlayBorderWidth: { property: () => ModalClass.cssVarList.overlay.borderWidth },\n      overlayBorderStyle: { property: () => ModalClass.cssVarList.overlay.borderStyle },\n      overlayBorderColor: { property: () => ModalClass.cssVarList.overlay.borderColor },\n      overlayBorderRadius: { property: () => ModalClass.cssVarList.overlay.borderRadius },\n    },\n  }),\n  portalMixin({\n    name: 'overlay',\n    selector: '',\n    mappings: {\n      hostDisplay: {\n        selector: () => ':host(.descope-modal)',\n        property: 'display',\n        important: true,\n      },\n      backgroundColor: [\n        { selector: () => '::part(content)', property: 'background-color' },\n        { selector: () => '::part(overlay)', property: 'background-color' },\n      ],\n      backdropColor: {\n        selector: () => '::part(backdrop)',\n        property: 'background-color',\n      },\n      borderStyle: {\n        selector: () => '::part(content)',\n        property: 'border-style',\n      },\n      borderWidth: {\n        selector: () => '::part(content)',\n        property: 'border-width',\n      },\n      borderColor: {\n        selector: () => '::part(content)',\n        property: 'border-color',\n      },\n      borderRadius: {\n        selector: () => '::part(content)',\n        property: 'border-radius  ',\n      },\n      width: { selector: () => '::part(overlay)', property: 'width' },\n      shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },\n    },\n    forward: {\n      include: false,\n      attributes: ['opened', 'style'],\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n  customMixin\n)(\n  createProxy({\n    slots: [''],\n    wrappedEleName: 'vaadin-dialog',\n    style: () => `\n      vaaadin-dialog {\n        display: flex!important;\n      }\n    `,\n    excludeAttrsSync: ['tabindex', 'opened', 'style'],\n    componentName,\n  })\n);\n","import '@vaadin/dialog';\nimport { componentName, ModalClass } from './ModalClass';\n\ncustomElements.define(componentName, ModalClass);\n\nexport { ModalClass, componentName };\n"],"names":["componentName","observedAttrs","ModalClass","mappings","overlayBackdropColor","property","cssVarList","overlay","backdropColor","overlayBackgroundColor","backgroundColor","overlayShadow","shadow","overlayWidth","width","overlayBorderWidth","borderWidth","overlayBorderStyle","borderStyle","overlayBorderColor","borderColor","overlayBorderRadius","borderRadius","name","selector","hostDisplay","important","forward","include","attributes","superclass","observedAttributes","concat","opened","this","getAttribute","closeOnOutsideClick","handleOpened","style","display","attributeChangedCallback","oldValue","newValue","super","init","setTimeout","baseElement","shadowRoot","querySelector","appendChild","document","createElement","includeAttrs","_attachOverlay","bringToFront","_detachOverlay","_enterModalState","close","addEventListener","event","overlayPart","composedPath","includes","removeAttribute","slots","wrappedEleName","excludeAttrsSync","customElements","define"],"sourceRoot":""}

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

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[3359],{3393(t,e,i){i.d(e,{y:()=>a});var n=i(9696),s=i(79365),r=i(81365);const a=(...t)=>(0,n.Zz)(s.XX,s._$,s.yF,s.jd)((0,r.q)(...t))},47168(t,e,i){i.d(e,{A:()=>h,T:()=>p});var n=i(68049),s=i.n(n),r=i(25964),a=i(3393),u=i(97810),l=i(18280);const p=(0,u.xE)("passcode-internal"),d=["digits","loading"],o=["disabled","bordered","size","invalid","readonly","aria-labelledby"],c=(0,a.y)({componentName:p,baseSelector:"div"}),h=class extends c{static get observedAttributes(){return d.concat(c.observedAttributes||[])}constructor(){super(),this.innerHTML='\n\t\t<div class="wrapper"></div>\n\t\t<div class="loader-container">\n      <descope-loader-radial size="xs" mode="primary"></descope-loader-radial>\n    </div>\n\t\t',this.wrapperEle=this.querySelector(".wrapper"),this.loaderContainer=this.querySelector(".loader-container")}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()}handleLoadingState(t){t?this.setAttribute("inert","true"):this.removeAttribute("inert")}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map(({value:t})=>t).join("")||""}set value(t){t!==this.value&&this.parseInputValue(this.inputs[0],(0,l.zj)(t))}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 n=this.getNextInput(e);if(n===e)break;e=n}(0,l.pW)(e)}parseInputValue(t,e=""){const i=e.split("");i.length?this.fillDigits(i,t):t.value=""}initInputs(){this.inputs.forEach(t=>{(0,r.fz)(`\n        vaadin-text-field::part(input-field)::before {\n          ${l.vz}: '';\n          content: var(${l._B}, var(${l.vz}));\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          display: var(${l.n6}, none);\n          align-items: center;\n          justify-content: center;\n        }`,t);const e=s()(e=>{this.parseInputValue(t,e),(0,l.Z)(t)},0,{trailing:!0});t.addEventListener("input",i=>{t.value=(0,l.zj)(t.value),t.value&&(0,l.Z)(t,t.value[0]),setTimeout(()=>{"deleteContentBackward"===i?.inputType&&(0,l.pW)(this.getPrevInput(t))}),e(t.value)}),t.onkeydown=({key:e})=>{"Backspace"===e?t.value?t.setSelectionRange(1,1):setTimeout(()=>(0,l.pW)(this.getPrevInput(t)),0):1===e.length&&(t.value="")},(0,u.EA)(this,t,{includeAttrs:o}),t.shadowRoot.querySelector("input").setAttribute("aria-label","passcode digit")}),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),e!==i&&d.includes(t)&&("digits"===t&&this.renderInputs(),"loading"===t&&this.handleLoadingState("true"===i))}get pattern(){return`^$|^\\d{${this.digits},}$`}}},18280(t,e,i){i.d(e,{Z:()=>l,_B:()=>n,n6:()=>s,pW:()=>a,vz:()=>r,zj:()=>u});const n="--descope-input-mask-content",s="--descope-input-mask-display",r="--descope-input-mask-fallback",a=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},u=t=>t.replace(/\D/g,"")||"",l=(t,e)=>{e?(t.style.setProperty(n,`"${e}"`),t.style.setProperty(s,"flex")):(t.style.removeProperty(n),t.style.removeProperty(s))}},59053(t,e,i){i.r(e);var n=i(47168);customElements.define(n.T,n.A)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[3359],{3393(t,e,n){n.d(e,{y:()=>a});var i=n(9696),s=n(79365),r=n(81365);const a=(...t)=>(0,i.Zz)(s.XX,s._$,s.yF,s.jd)((0,r.q)(...t))},47168(t,e,n){n.d(e,{A:()=>h,T:()=>p});var i=n(68049),s=n.n(i),r=n(25964),a=n(3393),u=n(97810),l=n(18280);const p=(0,u.xE)("passcode-internal"),d=["digits","loading"],o=["disabled","bordered","size","invalid","readonly","aria-labelledby"],c=(0,a.y)({componentName:p,baseSelector:"div"}),h=class extends c{static get observedAttributes(){return d.concat(c.observedAttributes||[])}constructor(){super(),this.innerHTML='\n\t\t<div class="wrapper"></div>\n\t\t<div class="loader-container">\n      <descope-loader-radial size="xs" mode="primary"></descope-loader-radial>\n    </div>\n\t\t',this.wrapperEle=this.querySelector(".wrapper"),this.loaderContainer=this.querySelector(".loader-container")}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()}handleLoadingState(t){t?this.setAttribute("inert","true"):this.removeAttribute("inert")}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map(({value:t})=>t).join("")||""}set value(t){t!==this.value&&this.parseInputValue(this.inputs[0],(0,l.zj)(t))}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),n=Math.min(e+1,this.inputs.length-1);return this.inputs[n]}getPrevInput(t){const e=this.getInputIdx(t),n=Math.max(e-1,0);return this.inputs[n]}fillDigits(t,e){for(let n=0;n<t.length;n+=1){e.value=t[n]??"";const i=this.getNextInput(e);if(i===e)break;e=i}(0,l.pW)(e)}parseInputValue(t,e=""){const n=e.split("");n.length?this.fillDigits(n,t):t.value=""}initInputs(){this.inputs.forEach(t=>{(0,r.fz)(`\n        vaadin-text-field::part(input-field)::before {\n          ${l.vz}: '';\n          content: var(${l._B}, var(${l.vz}));\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          display: var(${l.n6}, none);\n          align-items: center;\n          justify-content: center;\n        }`,t);const e=s()(e=>{this.parseInputValue(t,e),(0,l.Z)(t)},0,{trailing:!0});let n=!1;t.addEventListener("input",i=>{t.value=(0,l.zj)(t.value),t.value&&(0,l.Z)(t,t.value[0]);const s="deleteContentBackward"===i?.inputType||n;n=!1,s&&(0,l.pW)(this.getPrevInput(t)),e(t.value)}),t.onkeydown=e=>{const{key:i}=e;"Backspace"===i?t.value?(t.setSelectionRange(1,1),n=!0):(e.preventDefault(),n=!1,(0,l.pW)(this.getPrevInput(t))):(n=!1,1===i.length&&(t.value=""))},(0,u.EA)(this,t,{includeAttrs:o}),t.shadowRoot.querySelector("input").setAttribute("aria-label","passcode digit")}),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&d.includes(t)&&("digits"===t&&this.renderInputs(),"loading"===t&&this.handleLoadingState("true"===n))}get pattern(){return`^$|^\\d{${this.digits},}$`}}},18280(t,e,n){n.d(e,{Z:()=>l,_B:()=>i,n6:()=>s,pW:()=>a,vz:()=>r,zj:()=>u});const i="--descope-input-mask-content",s="--descope-input-mask-display",r="--descope-input-mask-fallback",a=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},u=t=>t.replace(/\D/g,"")||"",l=(t,e)=>{e?(t.style.setProperty(i,`"${e}"`),t.style.setProperty(s,"flex")):(t.style.removeProperty(i),t.style.removeProperty(s))}},59053(t,e,n){n.r(e);var i=n(47168);customElements.define(i.T,i.A)}}]);
 //# sourceMappingURL=descope-passcode-descope-passcode-internal-index-js.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"descope-passcode-descope-passcode-internal-index-js.js","mappings":"0LASO,MAAMA,EAAuB,IAAIC,KACtC,QACE,KACA,KACA,KACA,KAJF,EAKE,UAAmBA,G,2GCFhB,MAAMC,GAAgB,QAAiB,qBAExCC,EAAqB,CAAC,SAAU,WAEhCC,EAAoB,CACxB,WACA,WACA,OACA,UACA,WACA,mBAGIC,GAAiB,OAAqB,CAAEH,gBAAeI,aAAc,QAqN3E,EAnNA,cAA+BD,EAC7B,6BAAWF,GACT,OAAOA,EAAmBI,OAAOF,EAAeF,oBAAsB,GACxE,CAEA,WAAAK,GACEC,QAEAC,KAAKC,UAAY,0KAOjBD,KAAKE,WAAaF,KAAKG,cAAc,YACrCH,KAAKI,gBAAkBJ,KAAKG,cAAc,oBAC5C,CAEA,YAAAE,GACE,MAAMC,EAAS,IAAIC,MAAMP,KAAKQ,QAAQC,QAAQC,IAC3CC,GAAQ,4CAEFA,sHAQTX,KAAKE,WAAWD,UAAYK,EAAOM,KAAK,IAExCZ,KAAKM,OAASC,MAAMM,KAAKb,KAAKc,iBAAiB,uBAE/Cd,KAAKe,YACP,CAEA,kBAAAC,CAAmBC,GACbA,EACFjB,KAAKkB,aAAa,QAAS,QAE3BlB,KAAKmB,gBAAgB,QAEzB,CAEA,UAAIX,GACF,OAAOY,OAAOC,SAASrB,KAAKsB,aAAa,UAAW,KAAO,CAC7D,CAEA,SAAIC,GACF,OAAOvB,KAAKM,QAAQI,IAAI,EAAGa,WAAYA,GAAOX,KAAK,KAAO,EAC5D,CAEA,SAAIW,CAAMC,GACJA,IAAQxB,KAAKuB,OAEjBvB,KAAKyB,gBAAgBzB,KAAKM,OAAO,IAAI,QAAYkB,GACnD,CAEA,WAAAE,GACE,OAAI1B,KAAK2B,aAAe3B,KAAKuB,MACpB,CAAEK,cAAc,GAErB5B,KAAK6B,UAAY,IAAIC,OAAO9B,KAAK6B,SAASE,KAAK/B,KAAKuB,OAC/C,CAAES,iBAAiB,GAGrB,CAAC,CACV,CAEA,IAAAC,GAEEjC,KAAKkC,iBAAiB,QAAUC,IAE1BA,EAAEC,WAAWpC,KAAKM,OAAO,GAAG+B,UAGlCtC,MAAMkC,SAENjC,KAAKK,cACP,CAEA,WAAAiC,CAAYC,GACV,OAAOnB,OAAOC,SAASkB,EAASjB,aAAa,WAAY,GAC3D,CAEA,YAAAkB,CAAaC,GACX,MAAMC,EAAa1C,KAAKsC,YAAYG,GAC9BE,EAASC,KAAKC,IAAIH,EAAa,EAAG1C,KAAKM,OAAOwC,OAAS,GAC7D,OAAO9C,KAAKM,OAAOqC,EACrB,CAEA,YAAAI,CAAaN,GACX,MAAMC,EAAa1C,KAAKsC,YAAYG,GAC9BE,EAASC,KAAKI,IAAIN,EAAa,EAAG,GACxC,OAAO1C,KAAKM,OAAOqC,EACrB,CAEA,UAAAM,CAAWC,EAASC,GAClB,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAQJ,OAAQM,GAAK,EAAG,CAC1CD,EAAa5B,MAAQ2B,EAAQE,IAAM,GAEnC,MAAMC,EAAYrD,KAAKwC,aAAaW,GAEpC,GAAIE,IAAcF,EAAc,MAChCA,EAAeE,CACjB,EAEA,QAAaF,EACf,CAEA,eAAA1B,CAAgB6B,EAAO/B,EAAQ,IAC7B,MAAM2B,EAAU3B,EAAMgC,MAAM,IAEvBL,EAAQJ,OAGN9C,KAAKiD,WAAWC,EAASI,GAD9BA,EAAM/B,MAAQ,EAElB,CAEA,UAAAR,GACEf,KAAKM,OAAOkD,QAASF,KAInB,QACE,uEAEI,qCACa,aAA6B,mHAI7B,8FAIjBA,GAGF,MAKMG,EAA4B,IALRjC,IACxBxB,KAAKyB,gBAAgB6B,EAAO9B,IAC5B,OAAqB8B,IAGsC,EAAG,CAAEI,UAAU,IAG5EJ,EAAMpB,iBAAiB,QAAUC,IAC/BmB,EAAM/B,OAAQ,QAAY+B,EAAM/B,OAE5B+B,EAAM/B,QACR,OAAqB+B,EAAOA,EAAM/B,MAAM,IAG1CoC,WAAW,KACY,0BAAjBxB,GAAGyB,YACL,QAAa5D,KAAK+C,aAAaO,MAGnCG,EAA0BH,EAAM/B,SAIlC+B,EAAMO,UAAY,EAAGC,UAEP,cAARA,EAIGR,EAAM/B,MAGT+B,EAAMS,kBAAkB,EAAG,GAF3BJ,WAAW,KAAM,QAAa3D,KAAK+C,aAAaO,IAAS,GAInC,IAAfQ,EAAIhB,SAEbQ,EAAM/B,MAAQ,MAIlB,QAAavB,KAAMsD,EAAO,CAAEU,aAActE,IAC1C4D,EAAMW,WAAW9D,cAAc,SAASe,aAAa,aAAc,oBAGrElB,KAAKkE,6BAA6BlE,KAAKM,QACvCN,KAAKmE,6BACP,CAEA,wBAAAC,CAAyBC,EAAUC,EAAUC,GAC3CxE,MAAMqE,2BAA2BC,EAAUC,EAAUC,GAGjDD,IAAaC,GACX9E,EAAmB+E,SAASH,KACb,WAAbA,GACFrE,KAAKK,eAEU,YAAbgE,GACFrE,KAAKgB,mBAAgC,SAAbuD,GAIhC,CAEA,WAAI1C,GACF,MAAO,WAAW7B,KAAKQ,WACzB,E,6EC5OK,MAAMiE,EAAuB,+BACvBC,EAA0B,+BAC1BC,EAA2B,gCAE3BC,EAAgBC,IAC3BA,GAAKxC,QACLwC,GAAKd,oBAAoB,EAAG,IAGjBe,EAAeC,GAAQA,EAAIC,QAAQ,MAAO,KAAO,GAEjDC,EAAuB,CAAC3B,EAAO/B,KACtCA,GACF+B,EAAM4B,MAAMC,YAAYV,EAAsB,IAAIlD,MAClD+B,EAAM4B,MAAMC,YAAYT,EAAyB,UAEjDpB,EAAM4B,MAAME,eAAeX,GAC3BnB,EAAM4B,MAAME,eAAeV,I,qCCf/BW,eAAeC,OAAO,IAAe,I","sources":["webpack://@descope/web-components-ui/./src/baseClasses/createBaseInputClass.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/descope-passcode-internal/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/descope-passcode-internal/index.js"],"sourcesContent":["import { compose } from '../helpers';\nimport {\n  changeMixin,\n  inputEventsDispatchingMixin,\n  inputValidationMixin,\n  normalizeBooleanAttributesMixin,\n} from '../mixins';\nimport { createBaseClass } from './createBaseClass';\n\nexport const createBaseInputClass = (...args) =>\n  compose(\n    inputValidationMixin,\n    changeMixin,\n    normalizeBooleanAttributesMixin,\n    inputEventsDispatchingMixin\n  )(createBaseClass(...args));\n","import debounce from 'lodash.debounce';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\nimport { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport {\n  sanitizeStr,\n  focusElement,\n  toggleMaskVisibility,\n  INPUT_MASK_FALLBACK_PROP,\n  INPUT_MASK_TEXT_PROP,\n  INPUT_MASK_DISPLAY_PROP,\n} from './helpers';\n\nexport const componentName = getComponentName('passcode-internal');\n\nconst observedAttributes = ['digits', 'loading'];\n\nconst forwardAttributes = [\n  'disabled',\n  'bordered',\n  'size',\n  'invalid',\n  'readonly',\n  'aria-labelledby',\n];\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PasscodeInternal extends BaseInputClass {\n  static get observedAttributes() {\n    return observedAttributes.concat(BaseInputClass.observedAttributes || []);\n  }\n\n  constructor() {\n    super();\n\n    this.innerHTML = `\n\t\t<div class=\"wrapper\"></div>\n\t\t<div class=\"loader-container\">\n      <descope-loader-radial size=\"xs\" mode=\"primary\"></descope-loader-radial>\n    </div>\n\t\t`;\n\n    this.wrapperEle = this.querySelector('.wrapper');\n    this.loaderContainer = this.querySelector('.loader-container');\n  }\n\n  renderInputs() {\n    const inputs = [...Array(this.digits).keys()].map(\n      (idx) => `\n\t\t<descope-text-field\n\t\t\tdata-id=${idx}\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`\n    );\n\n    this.wrapperEle.innerHTML = inputs.join('');\n\n    this.inputs = Array.from(this.querySelectorAll('descope-text-field'));\n\n    this.initInputs();\n  }\n\n  handleLoadingState(isLoading) {\n    if (isLoading) {\n      this.setAttribute('inert', 'true');\n    } else {\n      this.removeAttribute('inert');\n    }\n  }\n\n  get digits() {\n    return Number.parseInt(this.getAttribute('digits'), 10) || 6;\n  }\n\n  get value() {\n    return this.inputs?.map(({ value }) => value).join('') || '';\n  }\n\n  set value(val) {\n    if (val === this.value) return;\n\n    this.parseInputValue(this.inputs[0], sanitizeStr(val));\n  }\n\n  getValidity() {\n    if (this.isRequired && !this.value) {\n      return { valueMissing: true };\n    }\n    if (this.pattern && !new RegExp(this.pattern).test(this.value)) {\n      return { patternMismatch: true };\n    }\n\n    return {};\n  }\n\n  init() {\n    // we are adding listeners before calling to super because it's stopping the events\n    this.addEventListener('focus', (e) => {\n      // we want to ignore focus events we are dispatching\n      if (e.isTrusted) this.inputs[0].focus();\n    });\n\n    super.init?.();\n\n    this.renderInputs();\n  }\n\n  getInputIdx(inputEle) {\n    return Number.parseInt(inputEle.getAttribute('data-id'), 10);\n  }\n\n  getNextInput(currInput) {\n    const currentIdx = this.getInputIdx(currInput);\n    const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1);\n    return this.inputs[newIdx];\n  }\n\n  getPrevInput(currInput) {\n    const currentIdx = this.getInputIdx(currInput);\n    const newIdx = Math.max(currentIdx - 1, 0);\n    return this.inputs[newIdx];\n  }\n\n  fillDigits(charArr, currentInput) {\n    for (let i = 0; i < charArr.length; i += 1) {\n      currentInput.value = charArr[i] ?? '';\n\n      const nextInput = this.getNextInput(currentInput);\n\n      if (nextInput === currentInput) break;\n      currentInput = nextInput;\n    }\n\n    focusElement(currentInput);\n  }\n\n  parseInputValue(input, value = '') {\n    const charArr = value.split('');\n\n    if (!charArr.length) {\n      // if we got an invalid value we want to clear the input\n      input.value = '';\n    } else this.fillDigits(charArr, input);\n  }\n\n  initInputs() {\n    this.inputs.forEach((input) => {\n      // During debounced input we hide the value with a mask.\n      // This allows us to hide the multiple population of the first input\n      // in case of an automated input (e.g. Safari OTP Autofill or paste).\n      injectStyle(\n        `\n        vaadin-text-field::part(input-field)::before {\n          ${INPUT_MASK_FALLBACK_PROP}: '';\n          content: var(${INPUT_MASK_TEXT_PROP}, var(${INPUT_MASK_FALLBACK_PROP}));\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          display: var(${INPUT_MASK_DISPLAY_PROP}, none);\n          align-items: center;\n          justify-content: center;\n        }`,\n        input\n      );\n\n      const handleParseInput = (val) => {\n        this.parseInputValue(input, val);\n        toggleMaskVisibility(input);\n      };\n\n      const debouncedHandleParseInput = debounce(handleParseInput, 0, { trailing: true });\n\n      // sanitize the input\n      input.addEventListener('input', (e) => {\n        input.value = sanitizeStr(input.value);\n\n        if (input.value) {\n          toggleMaskVisibility(input, input.value[0]);\n        }\n\n        setTimeout(() => {\n          if (e?.inputType === 'deleteContentBackward') {\n            focusElement(this.getPrevInput(input));\n          }\n        });\n        debouncedHandleParseInput(input.value);\n      });\n\n      // we want backspace to focus on the previous digit\n      input.onkeydown = ({ key }) => {\n        // when user deletes a digit, we want to focus the previous digit\n        if (key === 'Backspace') {\n          // if value is empty then the input element does not fire `input` event\n          // if this is the case, we focus the element here.\n          // otherwise, the focusElement occurs as part of the `input` event listener\n          if (!input.value) {\n            setTimeout(() => focusElement(this.getPrevInput(input)), 0);\n          } else {\n            input.setSelectionRange(1, 1);\n          }\n        } else if (key.length === 1) {\n          // we want only characters and not command keys\n          input.value = ''; // we are clearing the previous value so we can override it with the new value\n        }\n      };\n\n      forwardAttrs(this, input, { includeAttrs: forwardAttributes });\n      input.shadowRoot.querySelector('input').setAttribute('aria-label', 'passcode digit');\n    });\n\n    this.handleFocusEventsDispatching(this.inputs);\n    this.handleInputEventDispatching();\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    // sync attributes to inputs\n    if (oldValue !== newValue) {\n      if (observedAttributes.includes(attrName)) {\n        if (attrName === 'digits') {\n          this.renderInputs();\n        }\n        if (attrName === 'loading') {\n          this.handleLoadingState(newValue === 'true');\n        }\n      }\n    }\n  }\n\n  get pattern() {\n    return `^$|^\\\\d{${this.digits},}$`;\n  }\n}\n\nexport default PasscodeInternal;\n","export const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';\nexport const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';\nexport const INPUT_MASK_FALLBACK_PROP = '--descope-input-mask-fallback';\n\nexport const focusElement = (ele) => {\n  ele?.focus();\n  ele?.setSelectionRange?.(1, 1);\n};\n\nexport const sanitizeStr = (str) => str.replace(/\\D/g, '') || '';\n\nexport const toggleMaskVisibility = (input, value) => {\n  if (value) {\n    input.style.setProperty(INPUT_MASK_TEXT_PROP, `\"${value}\"`);\n    input.style.setProperty(INPUT_MASK_DISPLAY_PROP, 'flex');\n  } else {\n    input.style.removeProperty(INPUT_MASK_TEXT_PROP);\n    input.style.removeProperty(INPUT_MASK_DISPLAY_PROP);\n  }\n};\n","import PasscodeInternal, { componentName } from './PasscodeInternal';\n\ncustomElements.define(componentName, PasscodeInternal);\n"],"names":["createBaseInputClass","args","componentName","observedAttributes","forwardAttributes","BaseInputClass","baseSelector","concat","constructor","super","this","innerHTML","wrapperEle","querySelector","loaderContainer","renderInputs","inputs","Array","digits","keys","map","idx","join","from","querySelectorAll","initInputs","handleLoadingState","isLoading","setAttribute","removeAttribute","Number","parseInt","getAttribute","value","val","parseInputValue","getValidity","isRequired","valueMissing","pattern","RegExp","test","patternMismatch","init","addEventListener","e","isTrusted","focus","getInputIdx","inputEle","getNextInput","currInput","currentIdx","newIdx","Math","min","length","getPrevInput","max","fillDigits","charArr","currentInput","i","nextInput","input","split","forEach","debouncedHandleParseInput","trailing","setTimeout","inputType","onkeydown","key","setSelectionRange","includeAttrs","shadowRoot","handleFocusEventsDispatching","handleInputEventDispatching","attributeChangedCallback","attrName","oldValue","newValue","includes","INPUT_MASK_TEXT_PROP","INPUT_MASK_DISPLAY_PROP","INPUT_MASK_FALLBACK_PROP","focusElement","ele","sanitizeStr","str","replace","toggleMaskVisibility","style","setProperty","removeProperty","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"descope-passcode-descope-passcode-internal-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/baseClasses/createBaseInputClass.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/descope-passcode-internal/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/descope-passcode-internal/index.js"],"sourcesContent":["import { compose } from '../helpers';\nimport {\n  changeMixin,\n  inputEventsDispatchingMixin,\n  inputValidationMixin,\n  normalizeBooleanAttributesMixin,\n} from '../mixins';\nimport { createBaseClass } from './createBaseClass';\n\nexport const createBaseInputClass = (...args) =>\n  compose(\n    inputValidationMixin,\n    changeMixin,\n    normalizeBooleanAttributesMixin,\n    inputEventsDispatchingMixin\n  )(createBaseClass(...args));\n","import debounce from 'lodash.debounce';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\nimport { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport {\n  sanitizeStr,\n  focusElement,\n  toggleMaskVisibility,\n  INPUT_MASK_FALLBACK_PROP,\n  INPUT_MASK_TEXT_PROP,\n  INPUT_MASK_DISPLAY_PROP,\n} from './helpers';\n\nexport const componentName = getComponentName('passcode-internal');\n\nconst observedAttributes = ['digits', 'loading'];\n\nconst forwardAttributes = [\n  'disabled',\n  'bordered',\n  'size',\n  'invalid',\n  'readonly',\n  'aria-labelledby',\n];\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PasscodeInternal extends BaseInputClass {\n  static get observedAttributes() {\n    return observedAttributes.concat(BaseInputClass.observedAttributes || []);\n  }\n\n  constructor() {\n    super();\n\n    this.innerHTML = `\n\t\t<div class=\"wrapper\"></div>\n\t\t<div class=\"loader-container\">\n      <descope-loader-radial size=\"xs\" mode=\"primary\"></descope-loader-radial>\n    </div>\n\t\t`;\n\n    this.wrapperEle = this.querySelector('.wrapper');\n    this.loaderContainer = this.querySelector('.loader-container');\n  }\n\n  renderInputs() {\n    const inputs = [...Array(this.digits).keys()].map(\n      (idx) => `\n\t\t<descope-text-field\n\t\t\tdata-id=${idx}\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`\n    );\n\n    this.wrapperEle.innerHTML = inputs.join('');\n\n    this.inputs = Array.from(this.querySelectorAll('descope-text-field'));\n\n    this.initInputs();\n  }\n\n  handleLoadingState(isLoading) {\n    if (isLoading) {\n      this.setAttribute('inert', 'true');\n    } else {\n      this.removeAttribute('inert');\n    }\n  }\n\n  get digits() {\n    return Number.parseInt(this.getAttribute('digits'), 10) || 6;\n  }\n\n  get value() {\n    return this.inputs?.map(({ value }) => value).join('') || '';\n  }\n\n  set value(val) {\n    if (val === this.value) return;\n\n    this.parseInputValue(this.inputs[0], sanitizeStr(val));\n  }\n\n  getValidity() {\n    if (this.isRequired && !this.value) {\n      return { valueMissing: true };\n    }\n    if (this.pattern && !new RegExp(this.pattern).test(this.value)) {\n      return { patternMismatch: true };\n    }\n\n    return {};\n  }\n\n  init() {\n    // we are adding listeners before calling to super because it's stopping the events\n    this.addEventListener('focus', (e) => {\n      // we want to ignore focus events we are dispatching\n      if (e.isTrusted) this.inputs[0].focus();\n    });\n\n    super.init?.();\n\n    this.renderInputs();\n  }\n\n  getInputIdx(inputEle) {\n    return Number.parseInt(inputEle.getAttribute('data-id'), 10);\n  }\n\n  getNextInput(currInput) {\n    const currentIdx = this.getInputIdx(currInput);\n    const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1);\n    return this.inputs[newIdx];\n  }\n\n  getPrevInput(currInput) {\n    const currentIdx = this.getInputIdx(currInput);\n    const newIdx = Math.max(currentIdx - 1, 0);\n    return this.inputs[newIdx];\n  }\n\n  fillDigits(charArr, currentInput) {\n    for (let i = 0; i < charArr.length; i += 1) {\n      currentInput.value = charArr[i] ?? '';\n\n      const nextInput = this.getNextInput(currentInput);\n\n      if (nextInput === currentInput) break;\n      currentInput = nextInput;\n    }\n\n    focusElement(currentInput);\n  }\n\n  parseInputValue(input, value = '') {\n    const charArr = value.split('');\n\n    if (!charArr.length) {\n      // if we got an invalid value we want to clear the input\n      input.value = '';\n    } else this.fillDigits(charArr, input);\n  }\n\n  initInputs() {\n    this.inputs.forEach((input) => {\n      // During debounced input we hide the value with a mask.\n      // This allows us to hide the multiple population of the first input\n      // in case of an automated input (e.g. Safari OTP Autofill or paste).\n      injectStyle(\n        `\n        vaadin-text-field::part(input-field)::before {\n          ${INPUT_MASK_FALLBACK_PROP}: '';\n          content: var(${INPUT_MASK_TEXT_PROP}, var(${INPUT_MASK_FALLBACK_PROP}));\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          display: var(${INPUT_MASK_DISPLAY_PROP}, none);\n          align-items: center;\n          justify-content: center;\n        }`,\n        input\n      );\n\n      const handleParseInput = (val) => {\n        this.parseInputValue(input, val);\n        toggleMaskVisibility(input);\n      };\n\n      const debouncedHandleParseInput = debounce(handleParseInput, 0, { trailing: true });\n\n      // Per-input flag: set in keydown, consumed in the input event.\n      // Fallback for WebKit/Safari, where the native input event can fire\n      // non-composed; proxyInputMixin then re-dispatches it as a plain Event\n      // (no inputType), so the 'deleteContentBackward' check misses the\n      // backspace and navigation is skipped.\n      let lastKeyWasBackspace = false;\n\n      // sanitize the input\n      input.addEventListener('input', (e) => {\n        input.value = sanitizeStr(input.value);\n\n        if (input.value) {\n          toggleMaskVisibility(input, input.value[0]);\n        }\n\n        // inputType covers iOS (unreliable keydown); the flag covers WebKit\n        // (missing inputType). See flag declaration above.\n        const isBackspace = e?.inputType === 'deleteContentBackward' || lastKeyWasBackspace;\n        lastKeyWasBackspace = false;\n\n        if (isBackspace) {\n          // Navigate synchronously (no setTimeout) to prevent WebKit key-event\n          // leakage: with setTimeout(0), WebKit can dispatch the next key-repeat\n          // backspace event to the newly focused element, deleting a second digit.\n          // Calling focusElement here (inside the input event, not keydown) is safe\n          // because the browser has already finished processing the deletion.\n          focusElement(this.getPrevInput(input));\n        }\n\n        debouncedHandleParseInput(input.value);\n      });\n\n      // we want backspace to focus on the previous digit\n      input.onkeydown = (e) => {\n        const { key } = e;\n        if (key === 'Backspace') {\n          if (!input.value) {\n            // Empty field: the input event will not fire (nothing to delete),\n            // so we must handle navigation here.\n            // e.preventDefault() stops WebKit from leaking this keypress to\n            // the element that receives focus (key-event leakage).\n            e.preventDefault();\n            lastKeyWasBackspace = false;\n            focusElement(this.getPrevInput(input));\n          } else {\n            // Non-empty field: let the browser delete normally so the input\n            // event fires (needed on older iOS where keydown is unreliable).\n            // Move the caret to the end first so Backspace deletes the digit\n            // even if a direct tap left the caret before it (caret at index 0).\n            input.setSelectionRange(1, 1);\n            // Fallback signal for the input handler (see flag declaration above).\n            lastKeyWasBackspace = true;\n          }\n        } else {\n          lastKeyWasBackspace = false;\n          if (key.length === 1) {\n            // we want only characters and not command keys\n            input.value = ''; // we are clearing the previous value so we can override it with the new value\n          }\n        }\n      };\n\n      forwardAttrs(this, input, { includeAttrs: forwardAttributes });\n      input.shadowRoot.querySelector('input').setAttribute('aria-label', 'passcode digit');\n    });\n\n    this.handleFocusEventsDispatching(this.inputs);\n    this.handleInputEventDispatching();\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    // sync attributes to inputs\n    if (oldValue !== newValue) {\n      if (observedAttributes.includes(attrName)) {\n        if (attrName === 'digits') {\n          this.renderInputs();\n        }\n        if (attrName === 'loading') {\n          this.handleLoadingState(newValue === 'true');\n        }\n      }\n    }\n  }\n\n  get pattern() {\n    return `^$|^\\\\d{${this.digits},}$`;\n  }\n}\n\nexport default PasscodeInternal;\n","export const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';\nexport const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';\nexport const INPUT_MASK_FALLBACK_PROP = '--descope-input-mask-fallback';\n\nexport const focusElement = (ele) => {\n  ele?.focus();\n  ele?.setSelectionRange?.(1, 1);\n};\n\nexport const sanitizeStr = (str) => str.replace(/\\D/g, '') || '';\n\nexport const toggleMaskVisibility = (input, value) => {\n  if (value) {\n    input.style.setProperty(INPUT_MASK_TEXT_PROP, `\"${value}\"`);\n    input.style.setProperty(INPUT_MASK_DISPLAY_PROP, 'flex');\n  } else {\n    input.style.removeProperty(INPUT_MASK_TEXT_PROP);\n    input.style.removeProperty(INPUT_MASK_DISPLAY_PROP);\n  }\n};\n","import PasscodeInternal, { componentName } from './PasscodeInternal';\n\ncustomElements.define(componentName, PasscodeInternal);\n"],"names":["createBaseInputClass","args","componentName","observedAttributes","forwardAttributes","BaseInputClass","baseSelector","concat","constructor","super","this","innerHTML","wrapperEle","querySelector","loaderContainer","renderInputs","inputs","Array","digits","keys","map","idx","join","from","querySelectorAll","initInputs","handleLoadingState","isLoading","setAttribute","removeAttribute","Number","parseInt","getAttribute","value","val","parseInputValue","getValidity","isRequired","valueMissing","pattern","RegExp","test","patternMismatch","init","addEventListener","e","isTrusted","focus","getInputIdx","inputEle","getNextInput","currInput","currentIdx","newIdx","Math","min","length","getPrevInput","max","fillDigits","charArr","currentInput","i","nextInput","input","split","forEach","debouncedHandleParseInput","trailing","lastKeyWasBackspace","isBackspace","inputType","onkeydown","key","setSelectionRange","preventDefault","includeAttrs","shadowRoot","handleFocusEventsDispatching","handleInputEventDispatching","attributeChangedCallback","attrName","oldValue","newValue","includes","INPUT_MASK_TEXT_PROP","INPUT_MASK_DISPLAY_PROP","INPUT_MASK_FALLBACK_PROP","focusElement","ele","sanitizeStr","str","replace","toggleMaskVisibility","style","setProperty","removeProperty","customElements","define"],"sourceRoot":""}

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

@@ -1,5 +1,5 @@
 /*! For license information please see descope-passcode-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[77,3359,4838,7163,8884],{28027(t,e,r){r.d(e,{T:()=>l,w:()=>d});var i=r(88961),n=r(63200),o=r(25964),a=r(79673),s=r(47656);const l=(0,o.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,n.Zz)((0,i.RF)({mappings:s.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart","selectionEnd"],useProxyTargets:!0}),i.tQ,t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},r={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,r),setTimeout(()=>{Object.assign(this.icon,e)},5e3)})}onLabelClick(){this.focus()}attributeChangedCallback(t,e,r){super.attributeChangeCallback?.(t,e,r),"type"===t&&this.baseElement._setType(r),e!==r&&("label-type"===t?"floating"===r?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===r))}})((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(d.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,a.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},64014(t,e,r){r.r(e),r.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),r(11284),r(37182),r(95260);var i=r(28027);customElements.define(i.T,i.w)},47656(t,e,r){r.d(e,{A:()=>v});const{host:i,label:n,placeholder:o,requiredIndicator:a,inputField:s,input:l,inputMask:p,helperText:d,errorMessage:c,disabledPlaceholder:u,inputDisabled:h,inputIcon:g,externalInput:y,externalInputDisabled:b,externalPlaceholder:m,externalDisabledPlaceholder:f}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:[{selector:"> input:placeholder-shown"},{selector:()=>":host::slotted(input:placeholder-shown)"}],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)"},inputIcon:{selector:"vaadin-icon"},externalInput:{selector:()=>"::slotted(input)"},externalInputDisabled:{selector:()=>"::slotted(input:disabled)"},externalPlaceholder:{selector:()=>"::slotted(input:placeholder-shown)"},externalDisabledPlaceholder:{selector:()=>"::slotted(input:disabled::placeholder)"}},v={fontSize:[{},i],fontFamily:[n,s,d,c],labelFontSize:{...n,property:"font-size"},labelFontWeight:{...n,property:"font-weight"},inputValueFontWeight:[{...l,property:"font-weight"},{...y,property:"font-weight"}],inputPlaceholderFontWeight:[{selector:()=>":host input:placeholder-shown",property:"font-weight"},{...m,property:"font-weight"}],helperTextFontWeight:{...d,property:"font-weight"},errorMessageFontWeight:{...c,property:"font-weight"},labelTextColor:[{...n,property:"color"},{...a,property:"color"},{...n,property:"-webkit-text-fill-color"},{...a,property:"-webkit-text-fill-color"}],hostWidth:{...i,property:"width"},hostMinWidth:{...i,property:"min-width"},hostDirection:{...i,property:"direction"},inputDirection:{...l,property:"direction"},inputBackgroundColor:[{...s,property:"background-color"},{...p,property:"background-color"}],errorMessageTextColor:{...c,property:"color"},errorMessageIcon:{...c,property:"background-image"},errorMessageIconSize:{...c,property:"background-size"},errorMessageIconPadding:{...c,property:"padding-inline-start"},errorMessageIconRepeat:{...c,property:"background-repeat"},errorMessageIconPosition:{...c,property:"background-position"},errorMessageFontSize:{...c,property:"font-size"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...s,property:"color"},{...h,property:"-webkit-text-fill-color"},{...b,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...l,property:"caret-color"},{...y,property:"caret-color"}],labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...s,property:"border-color"},inputBorderWidth:{...s,property:"border-width"},inputBorderStyle:{...s,property:"border-style"},inputBorderRadius:{...s,property:"border-radius"},inputHeight:{...s,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"},{...y,property:"padding-left"},{...y,property:"padding-right"}],inputOutlineColor:{...s,property:"outline-color"},inputOutlineStyle:{...s,property:"outline-style"},inputOutlineWidth:{...s,property:"outline-width"},inputOutlineOffset:{...s,property:"outline-offset"},textAlign:{},inputTextAlign:[{...l,property:"text-align"},{...y,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...m,property:"color"},{...o,property:"color"},{...u,property:"-webkit-text-fill-color"},{...f,property:"-webkit-text-fill-color"}],labelPosition:{...n,property:"position"},labelTopPosition:{...n,property:"top"},labelHorizontalPosition:[{...n,property:"left"},{...n,property:"right"}],inputTransformY:{...n,property:"transform"},inputTransition:{...n,property:"transition"},marginInlineStart:{...n,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...m,property:"opacity"}],inputVerticalAlignment:[{...s,property:"align-items"},{...y,property:"align-items"}],valueInputHeight:[{...l,property:"height"},{...y,property:"height"}],valueInputMarginBottom:[{...l,property:"margin-bottom"},{...y,property:"margin-bottom"}],inputIconOffset:[{...g,property:"margin-right"},{...g,property:"margin-left"}],inputIconSize:{...g,property:"font-size"},inputIconColor:{...g,property:"color"},inputTextSecurity:[{...l,property:"-webkit-text-security"},{...l,property:"text-security"},{...y,property:"-webkit-text-security"},{...y,property:"text-security"}]}},3393(t,e,r){r.d(e,{y:()=>a});var i=r(9696),n=r(79365),o=r(81365);const a=(...t)=>(0,i.Zz)(n.XX,n._$,n.yF,n.jd)((0,o.q)(...t))},74713(t,e,r){r.d(e,{T:()=>s,l:()=>p});var i=r(25964),n=r(79365),o=r(81365),a=r(9696);const s=(0,r(97810).xE)("loader-radial");class l extends((0,o.q)({componentName:s,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div></div>\n\t",(0,i.fz)("\n    @keyframes spin {\n\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tposition: relative;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tanimation-name: spin;\n\t\t\t}\n        ",this)}}const p=(0,a.Zz)((0,n.RF)({mappings:{hostDisplay:{property:"display"},spinnerSize:[{property:"width"},{property:"height"}],spinnerBorderWidth:{property:"border-width"},spinnerBorderStyle:{property:"border-style"},spinnerBorderRadius:{property:"border-radius"},spinnerQuadrant1Color:{property:"border-top-color"},spinnerQuadrant2Color:{property:"border-bottom-color"},spinnerQuadrant3Color:{property:"border-right-color"},spinnerQuadrant4Color:{property:"border-left-color"},animationDuration:{},animationTimingFunction:{},animationIterationCount:{}}}),n.VO,n.tQ)(l)},54249(t,e,r){r.r(e),r.d(e,{LoaderRadialClass:()=>i.l,componentName:()=>i.T});var i=r(74713);customElements.define(i.T,i.l)},47168(t,e,r){r.d(e,{A:()=>h,T:()=>p});var i=r(68049),n=r.n(i),o=r(25964),a=r(3393),s=r(97810),l=r(18280);const p=(0,s.xE)("passcode-internal"),d=["digits","loading"],c=["disabled","bordered","size","invalid","readonly","aria-labelledby"],u=(0,a.y)({componentName:p,baseSelector:"div"}),h=class extends u{static get observedAttributes(){return d.concat(u.observedAttributes||[])}constructor(){super(),this.innerHTML='\n\t\t<div class="wrapper"></div>\n\t\t<div class="loader-container">\n      <descope-loader-radial size="xs" mode="primary"></descope-loader-radial>\n    </div>\n\t\t',this.wrapperEle=this.querySelector(".wrapper"),this.loaderContainer=this.querySelector(".loader-container")}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()}handleLoadingState(t){t?this.setAttribute("inert","true"):this.removeAttribute("inert")}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map(({value:t})=>t).join("")||""}set value(t){t!==this.value&&this.parseInputValue(this.inputs[0],(0,l.zj)(t))}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),r=Math.min(e+1,this.inputs.length-1);return this.inputs[r]}getPrevInput(t){const e=this.getInputIdx(t),r=Math.max(e-1,0);return this.inputs[r]}fillDigits(t,e){for(let r=0;r<t.length;r+=1){e.value=t[r]??"";const i=this.getNextInput(e);if(i===e)break;e=i}(0,l.pW)(e)}parseInputValue(t,e=""){const r=e.split("");r.length?this.fillDigits(r,t):t.value=""}initInputs(){this.inputs.forEach(t=>{(0,o.fz)(`\n        vaadin-text-field::part(input-field)::before {\n          ${l.vz}: '';\n          content: var(${l._B}, var(${l.vz}));\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          display: var(${l.n6}, none);\n          align-items: center;\n          justify-content: center;\n        }`,t);const e=n()(e=>{this.parseInputValue(t,e),(0,l.Z)(t)},0,{trailing:!0});t.addEventListener("input",r=>{t.value=(0,l.zj)(t.value),t.value&&(0,l.Z)(t,t.value[0]),setTimeout(()=>{"deleteContentBackward"===r?.inputType&&(0,l.pW)(this.getPrevInput(t))}),e(t.value)}),t.onkeydown=({key:e})=>{"Backspace"===e?t.value?t.setSelectionRange(1,1):setTimeout(()=>(0,l.pW)(this.getPrevInput(t)),0):1===e.length&&(t.value="")},(0,s.EA)(this,t,{includeAttrs:c}),t.shadowRoot.querySelector("input").setAttribute("aria-label","passcode digit")}),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,r){super.attributeChangedCallback?.(t,e,r),e!==r&&d.includes(t)&&("digits"===t&&this.renderInputs(),"loading"===t&&this.handleLoadingState("true"===r))}get pattern(){return`^$|^\\d{${this.digits},}$`}}},18280(t,e,r){r.d(e,{Z:()=>l,_B:()=>i,n6:()=>n,pW:()=>a,vz:()=>o,zj:()=>s});const i="--descope-input-mask-content",n="--descope-input-mask-display",o="--descope-input-mask-fallback",a=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},s=t=>t.replace(/\D/g,"")||"",l=(t,e)=>{e?(t.style.setProperty(i,`"${e}"`),t.style.setProperty(n,"flex")):(t.style.removeProperty(i),t.style.removeProperty(n))}},59053(t,e,r){r.r(e);var i=r(47168);customElements.define(i.T,i.A)},54690(t,e,r){r.r(e),r.d(e,{PasscodeClass:()=>C,componentName:()=>c});var i=r(25964),n=r(28027),o=r(79365),a=r(47168),s=r(74713),l=r(9696),p=r(97810),d=r(73551);const c=(0,p.xE)("passcode"),u=["digits"],{host:h,digitField:g,label:y,requiredIndicator:b,internalWrapper:m,focusedDigitField:f,errorMessage:v}={host:{selector:()=>":host"},focusedDigitField:{selector:()=>`${n.w.componentName}[focused="true"]`},digitField:{selector:()=>n.w.componentName},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"},errorMessage:{selector:"::part(error-message)"}},x=n.w.cssVarList,w=s.l.cssVarList,C=(0,l.Zz)((0,o.RF)({mappings:{fontSize:[{...g,property:x.fontSize},h],hostWidth:{property:"width"},hostDirection:{...h,property:"direction"},fontFamily:[h,{...y}],labelFontWeight:{...y,property:"font-weight"},errorMessageFontWeight:{...v,property:"font-weight"},digitValueFontWeight:{selector:n.w.componentName,property:x.inputValueFontWeight},labelTextColor:[{...y,property:"color"},{...y,property:"-webkit-text-fill-color"},{...b,property:"color"},{...b,property:"-webkit-text-fill-color"}],labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...v,property:"color"},errorMessageIcon:{...v,property:"background-image"},errorMessageIconSize:{...v,property:"background-size"},errorMessageIconPadding:{...v,property:"padding-inline-start"},errorMessageIconRepeat:{...v,property:"background-repeat"},errorMessageIconPosition:{...v,property:"background-position"},errorMessageFontSize:{...v,property:"font-size"},digitValueTextColor:{selector:n.w.componentName,property:x.inputValueTextColor},digitSize:[{...g,property:"height"},{...g,property:"width"}],digitPadding:{...g,property:x.inputHorizontalPadding},digitTextAlign:{...g,property:x.inputTextAlign},digitCaretTextColor:{...g,property:x.inputCaretTextColor},digitSpacing:{...m,property:"gap"},digitOutlineColor:{...g,property:x.inputOutlineColor},digitOutlineWidth:{...g,property:x.inputOutlineWidth},focusedDigitFieldOutlineColor:{...f,property:x.inputOutlineColor},overlayOpacity:{...m,property:"opacity"},spinnerSize:{selector:s.l.componentName,property:w.spinnerSize}}}),o.VO,o.Yg,(0,o.OZ)({proxyProps:["value","selectionStart"]}),o.tQ,t=>class extends t{static get observedAttributes(){return u.concat(t.observedAttributes||[])}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}init(){super.init?.(),(0,i.fz)("\n        .wrapper {\n          display: flex;\n          width: 100%;\n          justify-content: space-between;\n          direction: ltr;\n          position: relative;\n        }\n\n        descope-text-field {\n          direction: ltr;\n        }\n\n        .loader-container {\n          display: none;\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n        }\n          ",this);const t=document.createElement("template");t.innerHTML=`\n      <${a.T}\n        bordered="true"\n        name="code"\n        tabindex="-1"\n        slot="input"\n        role="textbox"\n      ><slot></slot></${a.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.T),(0,p.EA)(this,this.inputElement,{includeAttrs:["digits","size","loading","disabled"]})}attributeChangedCallback(t,e,r){super.attributeChangedCallback?.(t,e,r),"digits"===t&&(this.style["--passcode-digits-count"]=r)}})((0,o.tz)({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,d.X6)()}\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      :host([loading="true"]) descope-passcode-internal .loader-container {\n        display: block;\n      }\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(${x.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      /* safari */\n\t\t\tvaadin-text-field::part(input-field)::after {\n        opacity: 0;\n      }\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      ${(0,d.$J)("vaadin-text-field")}\n\t\t\t${(0,d.I4)("vaadin-text-field")}\n    \t`,excludeAttrsSync:["tabindex","style"],componentName:c}));r(64014),r(54249),r(59053),customElements.define(c,C)},18330(t,e,r){r.d(e,{f:()=>n});var i=r(44099);class n extends i.r{constructor(t,e){super(t,"input","input",{initializer:(t,r)=>{r.value&&(t.value=r.value),r.type&&t.setAttribute("type",r.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},37436(t,e,r){r.d(e,{a:()=>n});var i=r(44218);const n=t=>class extends((0,i.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},27136(t,e,r){r.d(e,{A:()=>h}),r(86689);var i=r(13256),n=r(82901),o=r(72562),a=r(81488),s=r(86314),l=r(87550),p=r(18330),d=r(37436),c=r(37720);const u=t=>class extends((0,d.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new p.f(this,t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t})),this.addController(new c.q(this.inputElement,this._labelController))}};(0,l.SF)("vaadin-text-field",s.k,{moduleId:"vaadin-text-field-styles"});class h extends(u((0,l.cp)((0,o.q)(i.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return i.qy`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[77,3359,4838,7163,8884],{28027(t,e,r){r.d(e,{T:()=>l,w:()=>d});var i=r(88961),n=r(63200),o=r(25964),a=r(79673),s=r(47656);const l=(0,o.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,n.Zz)((0,i.RF)({mappings:s.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart","selectionEnd"],useProxyTargets:!0}),i.tQ,t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},r={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,r),setTimeout(()=>{Object.assign(this.icon,e)},5e3)})}onLabelClick(){this.focus()}attributeChangedCallback(t,e,r){super.attributeChangeCallback?.(t,e,r),"type"===t&&this.baseElement._setType(r),e!==r&&("label-type"===t?"floating"===r?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===r))}})((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(d.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,a.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},64014(t,e,r){r.r(e),r.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),r(11284),r(37182),r(95260);var i=r(28027);customElements.define(i.T,i.w)},47656(t,e,r){r.d(e,{A:()=>v});const{host:i,label:n,placeholder:o,requiredIndicator:a,inputField:s,input:l,inputMask:p,helperText:d,errorMessage:c,disabledPlaceholder:u,inputDisabled:h,inputIcon:g,externalInput:y,externalInputDisabled:b,externalPlaceholder:m,externalDisabledPlaceholder:f}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:[{selector:"> input:placeholder-shown"},{selector:()=>":host::slotted(input:placeholder-shown)"}],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)"},inputIcon:{selector:"vaadin-icon"},externalInput:{selector:()=>"::slotted(input)"},externalInputDisabled:{selector:()=>"::slotted(input:disabled)"},externalPlaceholder:{selector:()=>"::slotted(input:placeholder-shown)"},externalDisabledPlaceholder:{selector:()=>"::slotted(input:disabled::placeholder)"}},v={fontSize:[{},i],fontFamily:[n,s,d,c],labelFontSize:{...n,property:"font-size"},labelFontWeight:{...n,property:"font-weight"},inputValueFontWeight:[{...l,property:"font-weight"},{...y,property:"font-weight"}],inputPlaceholderFontWeight:[{selector:()=>":host input:placeholder-shown",property:"font-weight"},{...m,property:"font-weight"}],helperTextFontWeight:{...d,property:"font-weight"},errorMessageFontWeight:{...c,property:"font-weight"},labelTextColor:[{...n,property:"color"},{...a,property:"color"},{...n,property:"-webkit-text-fill-color"},{...a,property:"-webkit-text-fill-color"}],hostWidth:{...i,property:"width"},hostMinWidth:{...i,property:"min-width"},hostDirection:{...i,property:"direction"},inputDirection:{...l,property:"direction"},inputBackgroundColor:[{...s,property:"background-color"},{...p,property:"background-color"}],errorMessageTextColor:{...c,property:"color"},errorMessageIcon:{...c,property:"background-image"},errorMessageIconSize:{...c,property:"background-size"},errorMessageIconPadding:{...c,property:"padding-inline-start"},errorMessageIconRepeat:{...c,property:"background-repeat"},errorMessageIconPosition:{...c,property:"background-position"},errorMessageFontSize:{...c,property:"font-size"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...s,property:"color"},{...h,property:"-webkit-text-fill-color"},{...b,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...l,property:"caret-color"},{...y,property:"caret-color"}],labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...s,property:"border-color"},inputBorderWidth:{...s,property:"border-width"},inputBorderStyle:{...s,property:"border-style"},inputBorderRadius:{...s,property:"border-radius"},inputHeight:{...s,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"},{...y,property:"padding-left"},{...y,property:"padding-right"}],inputOutlineColor:{...s,property:"outline-color"},inputOutlineStyle:{...s,property:"outline-style"},inputOutlineWidth:{...s,property:"outline-width"},inputOutlineOffset:{...s,property:"outline-offset"},textAlign:{},inputTextAlign:[{...l,property:"text-align"},{...y,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...m,property:"color"},{...o,property:"color"},{...u,property:"-webkit-text-fill-color"},{...f,property:"-webkit-text-fill-color"}],labelPosition:{...n,property:"position"},labelTopPosition:{...n,property:"top"},labelHorizontalPosition:[{...n,property:"left"},{...n,property:"right"}],inputTransformY:{...n,property:"transform"},inputTransition:{...n,property:"transition"},marginInlineStart:{...n,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...m,property:"opacity"}],inputVerticalAlignment:[{...s,property:"align-items"},{...y,property:"align-items"}],valueInputHeight:[{...l,property:"height"},{...y,property:"height"}],valueInputMarginBottom:[{...l,property:"margin-bottom"},{...y,property:"margin-bottom"}],inputIconOffset:[{...g,property:"margin-right"},{...g,property:"margin-left"}],inputIconSize:{...g,property:"font-size"},inputIconColor:{...g,property:"color"},inputTextSecurity:[{...l,property:"-webkit-text-security"},{...l,property:"text-security"},{...y,property:"-webkit-text-security"},{...y,property:"text-security"}]}},3393(t,e,r){r.d(e,{y:()=>a});var i=r(9696),n=r(79365),o=r(81365);const a=(...t)=>(0,i.Zz)(n.XX,n._$,n.yF,n.jd)((0,o.q)(...t))},74713(t,e,r){r.d(e,{T:()=>s,l:()=>p});var i=r(25964),n=r(79365),o=r(81365),a=r(9696);const s=(0,r(97810).xE)("loader-radial");class l extends((0,o.q)({componentName:s,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div></div>\n\t",(0,i.fz)("\n    @keyframes spin {\n\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tposition: relative;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tanimation-name: spin;\n\t\t\t}\n        ",this)}}const p=(0,a.Zz)((0,n.RF)({mappings:{hostDisplay:{property:"display"},spinnerSize:[{property:"width"},{property:"height"}],spinnerBorderWidth:{property:"border-width"},spinnerBorderStyle:{property:"border-style"},spinnerBorderRadius:{property:"border-radius"},spinnerQuadrant1Color:{property:"border-top-color"},spinnerQuadrant2Color:{property:"border-bottom-color"},spinnerQuadrant3Color:{property:"border-right-color"},spinnerQuadrant4Color:{property:"border-left-color"},animationDuration:{},animationTimingFunction:{},animationIterationCount:{}}}),n.VO,n.tQ)(l)},54249(t,e,r){r.r(e),r.d(e,{LoaderRadialClass:()=>i.l,componentName:()=>i.T});var i=r(74713);customElements.define(i.T,i.l)},47168(t,e,r){r.d(e,{A:()=>h,T:()=>p});var i=r(68049),n=r.n(i),o=r(25964),a=r(3393),s=r(97810),l=r(18280);const p=(0,s.xE)("passcode-internal"),d=["digits","loading"],c=["disabled","bordered","size","invalid","readonly","aria-labelledby"],u=(0,a.y)({componentName:p,baseSelector:"div"}),h=class extends u{static get observedAttributes(){return d.concat(u.observedAttributes||[])}constructor(){super(),this.innerHTML='\n\t\t<div class="wrapper"></div>\n\t\t<div class="loader-container">\n      <descope-loader-radial size="xs" mode="primary"></descope-loader-radial>\n    </div>\n\t\t',this.wrapperEle=this.querySelector(".wrapper"),this.loaderContainer=this.querySelector(".loader-container")}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()}handleLoadingState(t){t?this.setAttribute("inert","true"):this.removeAttribute("inert")}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map(({value:t})=>t).join("")||""}set value(t){t!==this.value&&this.parseInputValue(this.inputs[0],(0,l.zj)(t))}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),r=Math.min(e+1,this.inputs.length-1);return this.inputs[r]}getPrevInput(t){const e=this.getInputIdx(t),r=Math.max(e-1,0);return this.inputs[r]}fillDigits(t,e){for(let r=0;r<t.length;r+=1){e.value=t[r]??"";const i=this.getNextInput(e);if(i===e)break;e=i}(0,l.pW)(e)}parseInputValue(t,e=""){const r=e.split("");r.length?this.fillDigits(r,t):t.value=""}initInputs(){this.inputs.forEach(t=>{(0,o.fz)(`\n        vaadin-text-field::part(input-field)::before {\n          ${l.vz}: '';\n          content: var(${l._B}, var(${l.vz}));\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          display: var(${l.n6}, none);\n          align-items: center;\n          justify-content: center;\n        }`,t);const e=n()(e=>{this.parseInputValue(t,e),(0,l.Z)(t)},0,{trailing:!0});let r=!1;t.addEventListener("input",i=>{t.value=(0,l.zj)(t.value),t.value&&(0,l.Z)(t,t.value[0]);const n="deleteContentBackward"===i?.inputType||r;r=!1,n&&(0,l.pW)(this.getPrevInput(t)),e(t.value)}),t.onkeydown=e=>{const{key:i}=e;"Backspace"===i?t.value?(t.setSelectionRange(1,1),r=!0):(e.preventDefault(),r=!1,(0,l.pW)(this.getPrevInput(t))):(r=!1,1===i.length&&(t.value=""))},(0,s.EA)(this,t,{includeAttrs:c}),t.shadowRoot.querySelector("input").setAttribute("aria-label","passcode digit")}),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,r){super.attributeChangedCallback?.(t,e,r),e!==r&&d.includes(t)&&("digits"===t&&this.renderInputs(),"loading"===t&&this.handleLoadingState("true"===r))}get pattern(){return`^$|^\\d{${this.digits},}$`}}},18280(t,e,r){r.d(e,{Z:()=>l,_B:()=>i,n6:()=>n,pW:()=>a,vz:()=>o,zj:()=>s});const i="--descope-input-mask-content",n="--descope-input-mask-display",o="--descope-input-mask-fallback",a=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},s=t=>t.replace(/\D/g,"")||"",l=(t,e)=>{e?(t.style.setProperty(i,`"${e}"`),t.style.setProperty(n,"flex")):(t.style.removeProperty(i),t.style.removeProperty(n))}},59053(t,e,r){r.r(e);var i=r(47168);customElements.define(i.T,i.A)},54690(t,e,r){r.r(e),r.d(e,{PasscodeClass:()=>C,componentName:()=>c});var i=r(25964),n=r(28027),o=r(79365),a=r(47168),s=r(74713),l=r(9696),p=r(97810),d=r(73551);const c=(0,p.xE)("passcode"),u=["digits"],{host:h,digitField:g,label:y,requiredIndicator:b,internalWrapper:m,focusedDigitField:f,errorMessage:v}={host:{selector:()=>":host"},focusedDigitField:{selector:()=>`${n.w.componentName}[focused="true"]`},digitField:{selector:()=>n.w.componentName},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"},errorMessage:{selector:"::part(error-message)"}},x=n.w.cssVarList,w=s.l.cssVarList,C=(0,l.Zz)((0,o.RF)({mappings:{fontSize:[{...g,property:x.fontSize},h],hostWidth:{property:"width"},hostDirection:{...h,property:"direction"},fontFamily:[h,{...y}],labelFontWeight:{...y,property:"font-weight"},errorMessageFontWeight:{...v,property:"font-weight"},digitValueFontWeight:{selector:n.w.componentName,property:x.inputValueFontWeight},labelTextColor:[{...y,property:"color"},{...y,property:"-webkit-text-fill-color"},{...b,property:"color"},{...b,property:"-webkit-text-fill-color"}],labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...v,property:"color"},errorMessageIcon:{...v,property:"background-image"},errorMessageIconSize:{...v,property:"background-size"},errorMessageIconPadding:{...v,property:"padding-inline-start"},errorMessageIconRepeat:{...v,property:"background-repeat"},errorMessageIconPosition:{...v,property:"background-position"},errorMessageFontSize:{...v,property:"font-size"},digitValueTextColor:{selector:n.w.componentName,property:x.inputValueTextColor},digitSize:[{...g,property:"height"},{...g,property:"width"}],digitPadding:{...g,property:x.inputHorizontalPadding},digitTextAlign:{...g,property:x.inputTextAlign},digitCaretTextColor:{...g,property:x.inputCaretTextColor},digitSpacing:{...m,property:"gap"},digitOutlineColor:{...g,property:x.inputOutlineColor},digitOutlineWidth:{...g,property:x.inputOutlineWidth},focusedDigitFieldOutlineColor:{...f,property:x.inputOutlineColor},overlayOpacity:{...m,property:"opacity"},spinnerSize:{selector:s.l.componentName,property:w.spinnerSize}}}),o.VO,o.Yg,(0,o.OZ)({proxyProps:["value","selectionStart"]}),o.tQ,t=>class extends t{static get observedAttributes(){return u.concat(t.observedAttributes||[])}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}init(){super.init?.(),(0,i.fz)("\n        .wrapper {\n          display: flex;\n          width: 100%;\n          justify-content: space-between;\n          direction: ltr;\n          position: relative;\n        }\n\n        descope-text-field {\n          direction: ltr;\n        }\n\n        .loader-container {\n          display: none;\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n        }\n          ",this);const t=document.createElement("template");t.innerHTML=`\n      <${a.T}\n        bordered="true"\n        name="code"\n        tabindex="-1"\n        slot="input"\n        role="textbox"\n      ><slot></slot></${a.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.T),(0,p.EA)(this,this.inputElement,{includeAttrs:["digits","size","loading","disabled"]})}attributeChangedCallback(t,e,r){super.attributeChangedCallback?.(t,e,r),"digits"===t&&(this.style["--passcode-digits-count"]=r)}})((0,o.tz)({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,d.X6)()}\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      :host([loading="true"]) descope-passcode-internal .loader-container {\n        display: block;\n      }\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(${x.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      /* safari */\n\t\t\tvaadin-text-field::part(input-field)::after {\n        opacity: 0;\n      }\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      ${(0,d.$J)("vaadin-text-field")}\n\t\t\t${(0,d.I4)("vaadin-text-field")}\n    \t`,excludeAttrsSync:["tabindex","style"],componentName:c}));r(64014),r(54249),r(59053),customElements.define(c,C)},18330(t,e,r){r.d(e,{f:()=>n});var i=r(44099);class n extends i.r{constructor(t,e){super(t,"input","input",{initializer:(t,r)=>{r.value&&(t.value=r.value),r.type&&t.setAttribute("type",r.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},37436(t,e,r){r.d(e,{a:()=>n});var i=r(44218);const n=t=>class extends((0,i.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},27136(t,e,r){r.d(e,{A:()=>h}),r(86689);var i=r(13256),n=r(82901),o=r(72562),a=r(81488),s=r(86314),l=r(87550),p=r(18330),d=r(37436),c=r(37720);const u=t=>class extends((0,d.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new p.f(this,t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t})),this.addController(new c.q(this.inputElement,this._labelController))}};(0,l.SF)("vaadin-text-field",s.k,{moduleId:"vaadin-text-field-styles"});class h extends(u((0,l.cp)((0,o.q)(i.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return i.qy`
       <style>
         [part='input-field'] {
           flex-grow: 0;