@descope/web-components-ui 1.44.0 → 1.45.0

package/dist/umd/descope-hybrid-field-index-js.js

@@ -1,5 +1,5 @@
 /*! For license information please see descope-hybrid-field-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[7299],{54316:(e,t,n)=>{n.r(t),n.d(t,{EmailFieldClass:()=>f,componentName:()=>g}),n(52733);var i=n(47642),r=n(87550);const o=r.AH`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[7299],{54316:(e,t,i)=>{i.r(t),i.d(t,{EmailFieldClass:()=>f,componentName:()=>g}),i(52733);var n=i(47642),r=i(87550);const o=r.AH`
   :host([dir='rtl']) [part='input-field'] ::slotted(input) {
     --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
   }
@@ -7,7 +7,7 @@
   :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {
     --_lumo-text-field-overflow-mask-image: none;
   }
-`;(0,r.SF)("vaadin-email-field",[i.k,o],{moduleId:"lumo-email-field"});var a=n(82901),s=n(27136);const l=n(51450).AH`
+`;(0,r.SF)("vaadin-email-field",[n.k,o],{moduleId:"lumo-email-field"});var a=i(82901),s=i(27136);const l=i(51450).AH`
   :host([dir='rtl']) [part='input-field'] {
     direction: ltr;
   }
@@ -16,5 +16,5 @@
     direction: rtl;
     text-align: left;
   }
-`;(0,r.SF)("vaadin-email-field",l,{moduleId:"vaadin-email-field-styles"});class p extends s.A{static get is(){return"vaadin-email-field"}constructor(){super(),this._setType("email"),this.pattern="^([a-zA-Z0-9_\\.\\-+])+@[a-zA-Z0-9\\-.]+\\.[a-zA-Z0-9\\-]{2,}$"}ready(){super.ready(),this.inputElement&&(this.inputElement.autocapitalize="off")}}(0,a.X)(p);var u=n(79365),d=n(6424),h=n(9696),c=n(97810),m=n(73551);const g=(0,c.xE)("email-field"),f=(0,h.Zz)((0,u.RF)({mappings:d.A}),u.VO,(0,u.RV)({inputType:"email",inputName:"email",autocompleteType:"username",includeAttrs:["disabled","readonly","pattern"]}),(0,u.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),u.tQ,(e=>class extends e{init(){super.init?.(),this.baseElement.setAttribute("pattern","^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$"),this.getAttribute("autocomplete")||this.setAttribute("autocomplete","username"),this.createExternalInput()}}))((0,u.tz)({slots:["","suffix"],wrappedEleName:"vaadin-email-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(${f.cssVarList.inputOutlineWidth}) + var(${f.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      ${(0,m.$J)("vaadin-email-field")}\n\t\t\t${(0,m.cy)(f.cssVarList)}\n\t\t\t${(0,m.LJ)("vaadin-email-field",f.cssVarList)}\n      ${(0,m.Kl)()}\n\n      vaadin-email-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-email-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n      :host ::slotted(*) {\n        -webkit-mask-image: none;\n      }\n\n      vaadin-email-field[external-input="true"] > input:not(:placeholder-shown) {\n        opacity: 0;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:g}));customElements.define(g,f)},44966:(e,t,n)=>{n.r(t),n.d(t,{HybridFieldClass:()=>f,componentName:()=>d}),n(54316),n(98136),n(30057);var i=n(79365),r=n(81365),o=n(9696),a=n(97810);const s=/^\d+$/;var l=n(81808),p=n(16306),u=n(25964);const d=(0,a.xE)("hybrid-field"),h={shared:["bordered","full-width","label-type","size","disabled","readonly","required","st-host-direction","st-error-message-icon","st-error-message-icon-size","st-error-message-icon-padding"],email:["label","placeholder","data-errormessage-value-missing-email","data-errormessage-pattern-mismatch-email","external-input"],phone:{countryCode:["phone-input-label","country-input-label","country-input-placeholder","restrict-countries","default-code","phone-minlength","data-errormessage-value-missing-phone"],inputBox:["label","restrict-countries","default-code","phone-minlength","data-errormessage-value-missing-phone"]}},c={email:{"data-errormessage-value-missing-email":"data-errormessage-value-missing","data-errormessage-pattern-mismatch-email":"data-errormessage-pattern-mismatch"},phone:{"phone-input-label":"label","phone-minlength":"minlength","data-errormessage-value-missing-phone":"data-errormessage-value-missing"}},m="descope-phone-field",g=(0,r.q)({componentName:d,baseSelector:"div"}),f=(0,o.Zz)((0,i.RF)({componentNameOverride:(0,a.xE)("input-wrapper")}),(0,i.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:[{selector:()=>"descope-email-field",property:"direction"},{selector:()=>"descope-phone-field",property:"direction"},{selector:()=>"descope-phone-input-box-field",property:"direction"}],errorMessageIcon:[{selector:()=>l.NF.componentName,property:l.NF.cssVarList.errorMessageIcon},{selector:()=>p.Ul.componentName,property:p.Ul.cssVarList.errorMessageIcon}],errorMessageIconSize:[{selector:()=>l.NF.componentName,property:l.NF.cssVarList.errorMessageIconSize},{selector:()=>p.Ul.componentName,property:p.Ul.cssVarList.errorMessageIconSize}],errorMessageIconPadding:[{selector:()=>l.NF.componentName,property:l.NF.cssVarList.errorMessageIconPadding},{selector:()=>p.Ul.componentName,property:p.Ul.cssVarList.errorMessageIconPadding}],errorMessageIconRepeat:[{selector:()=>l.NF.componentName,property:l.NF.cssVarList.errorMessageIconRepeat},{selector:()=>p.Ul.componentName,property:p.Ul.cssVarList.errorMessageIconRepeat}],errorMessageIconPosition:[{selector:()=>l.NF.componentName,property:l.NF.cssVarList.errorMessageIconPosition},{selector:()=>p.Ul.componentName,property:p.Ul.cssVarList.errorMessageIconPosition}]}}),i.VO,i.tQ)(class extends g{#e=!1;#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n    <div class="wrapper">\n      <descope-email-field external-input="${this.isExternalInput}"></descope-email-field>\n      <descope-phone-field allow-alphanumeric-input="true"></descope-phone-field>\n      <descope-phone-input-box-field allow-alphanumeric-input="true"></descope-phone-input-box-field>\n    </div>\n\t\t`,(0,u.fz)("\n      :host {\n        display: inline-flex;\n        box-sizing: border-box;\n        padding: 0;\n        gap: 0;\n      }\n      .wrapper {\n        display: grid;\n        width: 100%;\n      }\n      descope-email-field,\n      descope-phone-field,\n      descope-phone-input-box-field {\n        grid-area: 1/1;\n        width: 100%;\n        height: 100%;\n      }\n      .hidden {\n        visibility: hidden;\n      }\n      ",this)}get isExternalInput(){return"true"===this.getAttribute("external-input")}get emailInputEle(){return this.isExternalInput?this.emailInput.externalInput:this.emailInput.inputElement}get phoneVariant(){return"inputBox"===this.getAttribute("phone-variant")?this.phoneInputBoxInput:this.phoneCountryCodeInput}get defaultCode(){const e=this.phoneCountryCodeInput.countryCodes?.[0]||"";return this.getAttribute("default-code")||e}get activeInputEle(){return this.activeInput===this.emailInput?this.emailInputEle:this.phoneVariant.phoneNumberInputEle}get value(){return this.activeInput?.value||""}set value(e){this.handleActiveInput(e),this.activeInput.value=e}async init(){super.init?.(),this.initInputs(),this.updateAttrs(),this.toggleInputVisibility(),await this.waitForInputs(),this.initInputEles(),this.overrideEmailInputType(),this.overrideEmailSetAttribute()}waitForInputs(){return new Promise((e=>{const t=setInterval((()=>{this.emailInputEle&&(clearInterval(t),e())}))}))}initInputs(){this.emailInput=this.shadowRoot.querySelector("descope-email-field"),this.phoneCountryCodeInput=this.shadowRoot.querySelector(m),this.phoneInputBoxInput=this.shadowRoot.querySelector("descope-phone-input-box-field"),this.inputs=[this.emailInput,this.phoneCountryCodeInput,this.phoneInputBoxInput],this.activeInput=this.emailInput}initInputEles(){[this.emailInputEle,this.phoneCountryCodeInput.phoneNumberInputEle,this.phoneInputBoxInput.phoneNumberInputEle].forEach((e=>{e.addEventListener("input",this.onValueChange.bind(this))}))}overrideEmailInputType(){this.emailInputEle.addEventListener("focus",(()=>{this.emailInputEle.setAttribute("type","text")})),this.emailInputEle.addEventListener("blur",(()=>{setTimeout((()=>{this.emailInputEle.setAttribute("type","email")}))}))}overrideEmailSetAttribute(){const e=this.emailInput.setAttribute.bind(this.emailInputEle);this.emailInputEle.setAttribute=(t,n)=>("type"!==t||"email"!==n||!this.emailInput.hasAttribute("focused"))&&e(t,n)}updateAttrs(){(0,a.EA)(this,this.emailInput,{includeAttrs:h.email,mapAttrs:c.email}),(0,a.EA)(this,this.phoneCountryCodeInput,{includeAttrs:h.phone.countryCode,mapAttrs:c.phone}),(0,a.EA)(this,this.phoneInputBoxInput,{includeAttrs:h.phone.inputBox,mapAttrs:c.phone}),this.inputs.forEach((e=>(0,a.EA)(this,e,{includeAttrs:h.shared}))),setTimeout((()=>this.phoneCountryCodeInput.setAttribute("default-code",this.defaultCode)))}onValueChange(){this.#t=this.activeInputEle.selectionStart,this.handleActiveInput(this.activeInput.value)}handleActiveInput(e){const t=(e=>s.test(e.replaceAll("+","").replaceAll("-","")))(e)?this.phoneVariant:this.emailInput;this.activeInput!==t&&this.setActiveInput(t)}setActiveInput(e){const t=this.activeInput.value;this.activeInput=e,this.setActiveInputValue(t),this.#e&&this.activeInput.reportValidity(),this.setActiveInputSelectionStart(),this.toggleInputVisibility()}setActiveInputSelectionStart(){setTimeout((()=>{this.activeInputEle.focus(),this.activeInputEle.setSelectionRange?.(this.#t,this.#t)}))}setActiveInputValue(e){const t=(e=>e.replace(/\+\d+-/,""))(e),n=this.activeInput.localName===m?`${this.phoneCountryCodeInput.countryCodeItems}-${t}`:t;this.activeInput.value=n}toggleInputVisibility(){this.inputs.forEach((e=>{e!==this.activeInput?e.classList.add("hidden"):e.classList.remove("hidden")}))}reportValidity(){this.#e=!0;const e=this.activeInputEle;return setTimeout((()=>{e.setSelectionRange?.(e.value.length,e.value.length)})),this.activeInput.reportValidity()}checkValidity(){return this.activeInput.checkValidity()}});customElements.define(d,f)},16306:(e,t,n)=>{n.d(t,{TQ:()=>d,Ul:()=>x});var i=n(9035),r=n(97810),o=n(9696),a=n(79365),s=n(79275),l=n(51680),p=n(73551);const u=s.w.cssVarList,d=(0,r.xE)("phone-input-box-field"),{host:h,label:c,inputElement:m,requiredIndicator:g,inputField:f,inputFieldInternal:y,phoneInput:I,errorMessage:b,helperText:v}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:()=>"vaadin-text-field::part(input-field)"},inputFieldInternal:{selector:()=>"descope-phone-field-internal-input-box vaadin-text-field::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},x=(0,o.Zz)((0,a.RF)({mappings:{fontSize:[h,f,{selector:s.w.componentName,property:s.w.cssVarList.fontSize}],fontFamily:[c,b,v],hostWidth:{...h,property:"width"},hostMinWidth:{...h,property:"min-width"},hostDirection:{...h,property:"direction"},inputBorderStyle:{...y,property:"border-style"},inputBorderWidth:{...y,property:"border-width"},inputBorderColor:{...y,property:"border-color"},inputBorderRadius:[{...f,property:"border-radius"},{...y,property:"border-radius"}],inputHorizontalPadding:[{...I,property:"padding-left"},{...I,property:"padding-right"}],labelFontSize:{...c,property:"font-size"},labelFontWeight:{...c,property:"font-weight"},labelTextColor:[{...c,property:"color"},{...g,property:"color"}],labelRequiredIndicator:{...g,property:"content"},errorMessageTextColor:{...b,property:"color"},errorMessageIcon:{...b,property:"background-image"},errorMessageIconSize:{...b,property:"background-size"},errorMessageIconPadding:{...b,property:"padding-inline-start"},errorMessageIconRepeat:{...b,property:"background-repeat"},errorMessageIconPosition:{...b,property:"background-position"},inputValueTextColor:{...I,property:u.inputValueTextColor},inputPlaceholderTextColor:{...I,property:u.inputPlaceholderColor},inputOutlineStyle:{...f,property:"outline-style"},inputOutlineColor:{...f,property:"outline-color"},inputOutlineWidth:{...f,property:"outline-width"},inputOutlineOffset:{...f,property:"outline-offset"},labelPosition:{...c,property:"position"},labelTopPosition:{...c,property:"top"},labelHorizontalPosition:[{...c,property:"left"},{...c,property:"right"}],inputTransformY:{...c,property:"transform"},inputTransition:{...c,property:"transition"},marginInlineStart:{...c,property:"margin-inline-start"},valueInputHeight:{...m,property:"height"},valueInputMarginBottom:{selector:s.w.componentName,property:u.valueInputMarginBottom}}}),a.VO,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(e=>class extends e{static get CountryCodes(){return l.A}init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n      `,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,r.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","disabled","phone-input-placeholder","label","label-type","allow-alphanumeric-input"]})}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}}))((0,a.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    ${(0,p.cy)(x.cssVarList)}\n    ${(0,p.I4)("vaadin-text-field")}\n    ${(0,p.kG)("vaadin-text-field")}\n    ${(0,p.X6)()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      overflow: hidden;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box .separator {\n      flex: 0;\n      border: none;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${u.inputOutlineWidth}: 0;\n      ${u.inputOutlineOffset}: 0;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\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\n    ${(0,p.$J)("vaadin-text-field")}\n    ${(0,p.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:d}))},9035:(e,t,n)=>{n.d(t,{A:()=>u,T:()=>a});var i=n(3393),r=n(97810),o=n(92259);const a=(0,r.xE)("phone-field-internal-input-box"),s=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type","allow-alphanumeric-input"],l={"phone-input-placeholder":"placeholder"},p=(0,i.y)({componentName:a,baseSelector:"div"}),u=class extends p{static get observedAttributes(){return[].concat(p.observedAttributes||[],s)}constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1"></descope-text-field>\n      </div>\n      ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return(0,o.Q)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const e=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(e,"")}`}return this.phoneNumberInput.value}set value(e){this.phoneNumberInput.value=e}get phoneNumberValue(){return this.phoneNumberInput.value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const e=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:e.length<this.minLength?{tooShort:!0}:e.length>this.maxLength?{tooLong:!0}:this.value&&!/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{patternMismatch:!0}:{}}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(e){return this.countryCodeInput.items?.find((t=>t.getAttribute("data-country-code")===e))}initInputs(){this.phoneNumberInput.addEventListener("input",(e=>{1===e.target.value.length&&"-"===e.target.value&&(e.target.value=""),e.target.value=e.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");let t=e.target.value;if(!this.allowAlphanumericInput){const n=/^[+\d-]+$/;t=e.target.value.split("").filter((e=>n.test(e))).join("")}e.target.value=t})),this.handleFocusEventsDispatching([this.phoneNumberInput])}attributeChangedCallback(e,t,n){if(super.attributeChangedCallback(e,t,n),t!==n&&s.includes(e)){const t=l[e]||e;this.phoneNumberInput.setAttribute(t,n)}}}},78343:(e,t,n)=>{n.r(t),n(21374);var i=n(9035);customElements.define(i.T,i.A)},30057:(e,t,n)=>{n.r(t),n.d(t,{PhoneFieldInputBoxClass:()=>i.Ul,componentName:()=>i.TQ}),n(78343),n(27092),n(21374);var i=n(16306);customElements.define(i.TQ,i.Ul)},92259:(e,t,n)=>{n.d(t,{Q:()=>r});var i=n(51680);const r=e=>i.A.find((t=>t.code===e))?.dialCode}}]);
+`;(0,r.SF)("vaadin-email-field",l,{moduleId:"vaadin-email-field-styles"});class p extends s.A{static get is(){return"vaadin-email-field"}constructor(){super(),this._setType("email"),this.pattern="^([a-zA-Z0-9_\\.\\-+])+@[a-zA-Z0-9\\-.]+\\.[a-zA-Z0-9\\-]{2,}$"}ready(){super.ready(),this.inputElement&&(this.inputElement.autocapitalize="off")}}(0,a.X)(p);var d=i(79365),u=i(6424),h=i(9696),c=i(97810),m=i(73551);const g=(0,c.xE)("email-field"),f=(0,h.Zz)((0,d.RF)({mappings:u.A}),d.VO,(0,d.RV)({inputType:"email",inputName:"email",autocompleteType:"username",includeAttrs:["disabled","readonly","pattern"]}),(0,d.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),d.tQ,(e=>class extends e{init(){super.init?.(),this.baseElement.setAttribute("pattern","^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$"),this.getAttribute("autocomplete")||this.setAttribute("autocomplete","username"),this.createExternalInput()}}))((0,d.tz)({slots:["","suffix"],wrappedEleName:"vaadin-email-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(${f.cssVarList.inputOutlineWidth}) + var(${f.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      ${(0,m.$J)("vaadin-email-field")}\n\t\t\t${(0,m.cy)(f.cssVarList)}\n\t\t\t${(0,m.LJ)("vaadin-email-field",f.cssVarList)}\n      ${(0,m.Kl)()}\n\n      vaadin-email-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-email-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n      :host ::slotted(*) {\n        -webkit-mask-image: none;\n      }\n\n      vaadin-email-field[external-input="true"] > input:not(:placeholder-shown) {\n        opacity: 0;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:g}));customElements.define(g,f)},44966:(e,t,i)=>{i.r(t),i.d(t,{HybridFieldClass:()=>f,componentName:()=>u}),i(54316),i(98136),i(30057);var n=i(79365),r=i(81365),o=i(9696),a=i(97810);const s=/^\d+$/;var l=i(81808),p=i(16306),d=i(25964);const u=(0,a.xE)("hybrid-field"),h={shared:["bordered","full-width","label-type","size","disabled","readonly","required","st-host-direction","st-error-message-icon","st-error-message-icon-size","st-error-message-icon-padding"],email:["label","placeholder","data-errormessage-value-missing-email","data-errormessage-pattern-mismatch-email","external-input"],phone:{countryCode:["phone-input-label","country-input-label","country-input-placeholder","restrict-countries","default-code","phone-minlength","phone-format-value","phone-strict-validation","data-errormessage-value-missing-phone"],inputBox:["label","restrict-countries","default-code","phone-minlength","phone-format-value","phone-strict-validation","data-errormessage-value-missing-phone"]}},c={email:{"data-errormessage-value-missing-email":"data-errormessage-value-missing","data-errormessage-pattern-mismatch-email":"data-errormessage-pattern-mismatch"},phone:{"phone-input-label":"label","phone-minlength":"minlength","phone-format-value":"format-value","phone-strict-validation":"strict-validation","data-errormessage-value-missing-phone":"data-errormessage-value-missing"}},m="descope-phone-field",g=(0,r.q)({componentName:u,baseSelector:"div"}),f=(0,o.Zz)((0,n.RF)({componentNameOverride:(0,a.xE)("input-wrapper")}),(0,n.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:[{selector:()=>"descope-email-field",property:"direction"},{selector:()=>"descope-phone-field",property:"direction"},{selector:()=>"descope-phone-input-box-field",property:"direction"}],errorMessageIcon:[{selector:()=>l.NF.componentName,property:l.NF.cssVarList.errorMessageIcon},{selector:()=>p.Ul.componentName,property:p.Ul.cssVarList.errorMessageIcon}],errorMessageIconSize:[{selector:()=>l.NF.componentName,property:l.NF.cssVarList.errorMessageIconSize},{selector:()=>p.Ul.componentName,property:p.Ul.cssVarList.errorMessageIconSize}],errorMessageIconPadding:[{selector:()=>l.NF.componentName,property:l.NF.cssVarList.errorMessageIconPadding},{selector:()=>p.Ul.componentName,property:p.Ul.cssVarList.errorMessageIconPadding}],errorMessageIconRepeat:[{selector:()=>l.NF.componentName,property:l.NF.cssVarList.errorMessageIconRepeat},{selector:()=>p.Ul.componentName,property:p.Ul.cssVarList.errorMessageIconRepeat}],errorMessageIconPosition:[{selector:()=>l.NF.componentName,property:l.NF.cssVarList.errorMessageIconPosition},{selector:()=>p.Ul.componentName,property:p.Ul.cssVarList.errorMessageIconPosition}]}}),n.VO,n.tQ)(class extends g{#e=!1;#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n    <div class="wrapper">\n      <descope-email-field external-input="${this.isExternalInput}"></descope-email-field>\n      <descope-phone-field allow-alphanumeric-input="true"></descope-phone-field>\n      <descope-phone-input-box-field allow-alphanumeric-input="true"></descope-phone-input-box-field>\n    </div>\n\t\t`,(0,d.fz)("\n      :host {\n        display: inline-flex;\n        box-sizing: border-box;\n        padding: 0;\n        gap: 0;\n      }\n      .wrapper {\n        display: grid;\n        width: 100%;\n      }\n      descope-email-field,\n      descope-phone-field,\n      descope-phone-input-box-field {\n        grid-area: 1/1;\n        width: 100%;\n        height: 100%;\n      }\n      .hidden {\n        visibility: hidden;\n      }\n      ",this)}get isExternalInput(){return"true"===this.getAttribute("external-input")}get emailInputEle(){return this.isExternalInput?this.emailInput.externalInput:this.emailInput.inputElement}get phoneVariant(){return"inputBox"===this.getAttribute("phone-variant")?this.phoneInputBoxInput:this.phoneCountryCodeInput}get defaultCode(){const e=this.phoneCountryCodeInput.countryCodes?.[0]||"";return this.getAttribute("default-code")||e}get activeInputEle(){return this.activeInput===this.emailInput?this.emailInputEle:this.phoneVariant.phoneNumberInputEle}get value(){return this.activeInput?.value||""}set value(e){this.handleActiveInput(e),this.activeInput.value=e}async init(){super.init?.(),this.initInputs(),this.updateAttrs(),this.toggleInputVisibility(),await this.waitForInputs(),this.initInputEles(),this.overrideEmailInputType(),this.overrideEmailSetAttribute()}waitForInputs(){return new Promise((e=>{const t=setInterval((()=>{this.emailInputEle&&(clearInterval(t),e())}))}))}initInputs(){this.emailInput=this.shadowRoot.querySelector("descope-email-field"),this.phoneCountryCodeInput=this.shadowRoot.querySelector(m),this.phoneInputBoxInput=this.shadowRoot.querySelector("descope-phone-input-box-field"),this.inputs=[this.emailInput,this.phoneCountryCodeInput,this.phoneInputBoxInput],this.activeInput=this.emailInput}initInputEles(){[this.emailInputEle,this.phoneCountryCodeInput.phoneNumberInputEle,this.phoneInputBoxInput.phoneNumberInputEle].forEach((e=>{e.addEventListener("input",this.onValueChange.bind(this))}))}overrideEmailInputType(){this.emailInputEle.addEventListener("focus",(()=>{this.emailInputEle.setAttribute("type","text")})),this.emailInputEle.addEventListener("blur",(()=>{setTimeout((()=>{this.emailInputEle.setAttribute("type","email")}))}))}overrideEmailSetAttribute(){const e=this.emailInput.setAttribute.bind(this.emailInputEle);this.emailInputEle.setAttribute=(t,i)=>("type"!==t||"email"!==i||!this.emailInput.hasAttribute("focused"))&&e(t,i)}updateAttrs(){(0,a.EA)(this,this.emailInput,{includeAttrs:h.email,mapAttrs:c.email}),(0,a.EA)(this,this.phoneCountryCodeInput,{includeAttrs:h.phone.countryCode,mapAttrs:c.phone}),(0,a.EA)(this,this.phoneInputBoxInput,{includeAttrs:h.phone.inputBox,mapAttrs:c.phone}),this.inputs.forEach((e=>(0,a.EA)(this,e,{includeAttrs:h.shared}))),setTimeout((()=>this.phoneCountryCodeInput.setAttribute("default-code",this.defaultCode)))}onValueChange(){this.#t=this.activeInputEle.selectionStart,this.handleActiveInput(this.activeInput.value)}handleActiveInput(e){const t=(e=>s.test(e.replaceAll("+","").replaceAll("-","")))(e)?this.phoneVariant:this.emailInput;this.activeInput!==t&&this.setActiveInput(t)}setActiveInput(e){const t=this.activeInput.value;this.activeInput=e,this.setActiveInputValue(t),this.#e&&this.activeInput.reportValidity(),this.setActiveInputSelectionStart(),this.toggleInputVisibility()}setActiveInputSelectionStart(){setTimeout((()=>{this.activeInputEle.focus(),this.activeInputEle.setSelectionRange?.(this.#t,this.#t)}))}setActiveInputValue(e){const t=(e=>e.replace(/\+\d+-/,""))(e),i=this.activeInput.localName===m?`${this.phoneCountryCodeInput.countryCodeItems}-${t}`:t;this.activeInput.value=i}toggleInputVisibility(){this.inputs.forEach((e=>{e!==this.activeInput?e.classList.add("hidden"):e.classList.remove("hidden")}))}reportValidity(){this.#e=!0;const e=this.activeInputEle;return setTimeout((()=>{e.setSelectionRange?.(e.value.length,e.value.length)})),this.activeInput.reportValidity()}checkValidity(){return this.activeInput.checkValidity()}});customElements.define(u,f)},16306:(e,t,i)=>{i.d(t,{TQ:()=>u,Ul:()=>C});var n=i(9035),r=i(97810),o=i(9696),a=i(79365),s=i(79275),l=i(51680),p=i(73551);const d=s.w.cssVarList,u=(0,r.xE)("phone-input-box-field"),{host:h,label:c,inputElement:m,requiredIndicator:g,inputField:f,internalComponent:y,internalComponentAfter:v,phoneInput:b,errorMessage:I,helperText:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:()=>"vaadin-text-field::part(input-field)"},internalComponent:{selector:"descope-phone-field-internal-input-box"},internalComponentAfter:{selector:"descope-phone-field-internal-input-box::after"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},C=(0,o.Zz)((0,a.RF)({mappings:{fontSize:[h,f,{selector:s.w.componentName,property:s.w.cssVarList.fontSize}],fontFamily:[c,I,x],hostWidth:{...h,property:"width"},hostMinWidth:{...h,property:"min-width"},hostDirection:{...h,property:"direction"},inputHorizontalPadding:[{...b,property:"padding-left"},{...b,property:"padding-right"}],labelFontSize:{...c,property:"font-size"},labelFontWeight:{...c,property:"font-weight"},labelTextColor:[{...c,property:"color"},{...g,property:"color"}],labelRequiredIndicator:{...g,property:"content"},errorMessageTextColor:{...I,property:"color"},errorMessageIcon:{...I,property:"background-image"},errorMessageIconSize:{...I,property:"background-size"},errorMessageIconPadding:{...I,property:"padding-inline-start"},errorMessageIconRepeat:{...I,property:"background-repeat"},errorMessageIconPosition:{...I,property:"background-position"},inputValueTextColor:{...b,property:d.inputValueTextColor},inputPlaceholderTextColor:{...b,property:d.inputPlaceholderColor},inputBorderStyle:{...v,property:"border-style"},inputBorderWidth:{...v,property:"border-width"},inputBorderColor:{...v,property:"border-color"},inputBorderRadius:[{...y,property:"border-radius"},{...v,property:"border-radius"}],inputOutlineStyle:{...y,property:"outline-style"},inputOutlineColor:{...y,property:"outline-color"},inputOutlineWidth:{...y,property:"outline-width"},inputOutlineOffset:{...y,property:"outline-offset"},labelPosition:{...c,property:"position"},labelTopPosition:{...c,property:"top"},labelHorizontalPosition:[{...c,property:"left"},{...c,property:"right"}],inputTransformY:{...c,property:"transform"},inputTransition:{...c,property:"transition"},marginInlineStart:{...c,property:"margin-inline-start"},valueInputHeight:{...m,property:"height"},valueInputMarginBottom:{selector:s.w.componentName,property:d.valueInputMarginBottom}}}),a.VO,a.Yg,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(e=>class extends e{static get CountryCodes(){return l.A}init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${n.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${n.T}>\n      `,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(n.T),(0,r.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","minlength","maxlength","default-code","disabled","phone-input-placeholder","label","label-type","allow-alphanumeric-input","restrict-countries","format-value","strict-validation","data-errormessage-type-mismatch"]})}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}}))((0,a.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    ${(0,p.cy)(C.cssVarList)}\n    ${(0,p.I4)("vaadin-text-field")}\n    ${(0,p.kG)("vaadin-text-field")}\n    ${(0,p.X6)()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${d.inputOutlineWidth}: 0;\n      ${d.inputOutlineOffset}: 0;\n    }\n    descope-phone-field-internal-input-box::after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      box-sizing: border-box;\n      pointer-events: none;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\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\n    ${(0,p.$J)("vaadin-text-field")}\n    ${(0,p.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}))},9035:(e,t,i)=>{i.d(t,{A:()=>h,T:()=>l});var n=i(3393),r=i(97810),o=i(92259),a=i(10473),s=i(23530);const l=(0,r.xE)("phone-field-internal-input-box"),p=["disabled","size","readonly","phone-input-placeholder","name","autocomplete","label-type"],d={"phone-input-placeholder":"placeholder"},u=(0,n.y)({componentName:l,baseSelector:"div"}),h=class extends u{static get observedAttributes(){return[].concat(u.observedAttributes||[],p)}#i;constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1" type="tel" bordered="false"></descope-text-field>\n      </div>\n      ',this.textField=this.querySelector("descope-text-field")}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get defaultDialCode(){return(0,o.Q)(this.getAttribute("default-code"))}get defaultCode(){return this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}get restrictCountries(){return this.getAttribute("restrict-countries")?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.textField.value)return"";if(!this.isStrictValidation)return this.#n();const e=this.#r();return e?.country&&e?.countryCallingCode&&e?.nationalNumber?`+${[e?.countryCallingCode,e?.nationalNumber].join("-")}`:this.textField.value}set value(e){this.textField.value=e}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.textField.focus()})),super.init?.(),this.textField.addEventListener("input",this.#o.bind(this)),this.handleFocusEventsDispatching([this.textField])}getValidity(){const e=this.#a(this.textField.value);return this.isRequired&&!this.textField.value?{valueMissing:!0}:e.length<this.minLength?{tooShort:!0}:e.length>this.maxLength?{tooLong:!0}:this.isStrictValidation&&this.textField.value&&!this.#s()||!this.isStrictValidation&&this.textField.value&&!/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{patternMismatch:!0}:{}}setSelectionRange(...e){this.textField.setSelectionRange(...e)}attributeChangedCallback(e,t,i){if(super.attributeChangedCallback(e,t,i),t!==i&&p.includes(e)){const t=d[e]||e;this.textField.setAttribute(t,i)}}#o(e){let t=this.#l(e.target.value);this.isFormatValue&&this.#p(t)&&(t=this.#d(t)),e.target.value=t}#n(){if(!this.defaultDialCode)return this.textField.value;const e=this.#u(this.textField.value),t=this.#a(e);return[this.defaultDialCode,t].join("-")}#r(){return this.defaultDialCode?(0,a.l)([this.defaultDialCode,this.#a(this.textField.value)].filter(Boolean).join("")):(0,a.l)(this.textField.value)}#a(e){return e.replace(/\D/g,"")}#u(e){if("+"===this.textField.value?.[0]){const t=new RegExp(`^\\${this.defaultDialCode}`);return e.replace(t,"")}return e}#s(){const e=(0,a.l)(this.value);return e&&e.isValid?.()&&e.country&&this.#h(e.country)&&(!this.defaultCode||this.defaultCode===e.country)}#h(e){return!this.restrictCountries||this.restrictCountries.includes(e)}#l(e){if(e=e.replace(/^-+/,"").replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+"),!this.allowAlphanumericInput){const t=/^[+\d-\(\)]+$/;e=e.split("").filter((e=>t.test(e))).join("")}return e}#d(e=""){const t=this.defaultCode||this.#c(e);return t?(this.#i&&this.#i.country===t||(this.#i=new s.Q(t)),this.#i.reset(),this.#i.input(e)||e):e}#c(e){const t=(0,a.l)(e);return t?.country||""}#p(e){return!!(0,o.W)(e)}}},78343:(e,t,i)=>{i.r(t),i(21374);var n=i(9035);customElements.define(n.T,n.A)},30057:(e,t,i)=>{i.r(t),i.d(t,{PhoneFieldInputBoxClass:()=>n.Ul,componentName:()=>n.TQ}),i(78343),i(21374);var n=i(16306);customElements.define(n.TQ,n.Ul)},92259:(e,t,i)=>{i.d(t,{Q:()=>r,W:()=>o});var n=i(51680);const r=e=>n.A.find((t=>t.code===e))?.dialCode,o=e=>{const t=e.match(/\(/g),i=e.match(/\)/g);return t?.length===i?.length}}}]);
 //# sourceMappingURL=descope-hybrid-field-index-js.js.map

package/dist/umd/descope-hybrid-field-index-js.js.map

@@ -1 +1 @@
-{"version":3,"file":"descope-hybrid-field-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../../../node_modules/@vaadin/email-field/theme/lumo/vaadin-email-field-styles.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/email-field/src/vaadin-email-field-styles.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/email-field/src/vaadin-email-field.js","webpack://@descope/web-components-ui/./src/components/descope-email-field/EmailFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-email-field/index.js","webpack://@descope/web-components-ui/./src/components/descope-hybrid-field/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-hybrid-field/HybridFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-hybrid-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/helpers.js"],"sourcesContent":["/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';\nimport { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\n\nconst emailField = css`\n  :host([dir='rtl']) [part='input-field'] ::slotted(input) {\n    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);\n  }\n\n  :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {\n    --_lumo-text-field-overflow-mask-image: none;\n  }\n`;\n\nregisterStyles('vaadin-email-field', [inputFieldShared, emailField], {\n  moduleId: 'lumo-email-field',\n});\n","/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { css } from 'lit';\n\n// See https://github.com/vaadin/vaadin-text-field/issues/466\nexport const emailFieldStyles = css`\n  :host([dir='rtl']) [part='input-field'] {\n    direction: ltr;\n  }\n\n  :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {\n    direction: rtl;\n    text-align: left;\n  }\n`;\n","/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { defineCustomElement } from '@vaadin/component-base/src/define.js';\nimport { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { emailFieldStyles } from './vaadin-email-field-styles.js';\n\nregisterStyles('vaadin-email-field', emailFieldStyles, { moduleId: 'vaadin-email-field-styles' });\n\n/**\n * `<vaadin-email-field>` is a Web Component for email field control in forms.\n *\n * ```html\n * <vaadin-email-field label=\"Email\"></vaadin-email-field>\n * ```\n *\n * ### Styling\n *\n * `<vaadin-email-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\n * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.\n *\n * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n *\n * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.\n * @fires {Event} change - Fired when the user commits a value change.\n * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.\n * @fires {CustomEvent} value-changed - Fired when the `value` property changes.\n * @fires {CustomEvent} validated - Fired whenever the field is validated.\n *\n * @customElement\n * @extends TextField\n */\nexport class EmailField extends TextField {\n  static get is() {\n    return 'vaadin-email-field';\n  }\n\n  constructor() {\n    super();\n    this._setType('email');\n    this.pattern = '^([a-zA-Z0-9_\\\\.\\\\-+])+@[a-zA-Z0-9\\\\-.]+\\\\.[a-zA-Z0-9\\\\-]{2,}$';\n  }\n\n  /** @protected */\n  ready() {\n    super.ready();\n\n    if (this.inputElement) {\n      this.inputElement.autocapitalize = 'off';\n    }\n  }\n}\n\ndefineCustomElement(EmailField);\n","import {\n  createStyleMixin,\n  draggableMixin,\n  createProxy,\n  proxyInputMixin,\n  componentNameValidationMixin,\n  externalInputMixin,\n} from '../../mixins';\nimport textFieldMappings from '../descope-text-field/textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n  inputFloatingLabelStyle,\n  resetInputLabelPosition,\n  resetInputOverrides,\n  useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('email-field');\n\nconst defaultPattern = \"^[\\\\w\\\\.\\\\%\\\\+\\\\-']+@[\\\\w\\\\.\\\\-]+\\\\.[A-Za-z]{2,}$\";\nconst defaultAutocomplete = 'username';\n\nconst customMixin = (superclass) =>\n  class EmailFieldMixinClass extends superclass {\n    init() {\n      super.init?.();\n\n      // we need to set the pattern on the base element because vaadin-email-field is overriding it\n      this.baseElement.setAttribute('pattern', defaultPattern);\n\n      if (!this.getAttribute('autocomplete')) {\n        this.setAttribute('autocomplete', defaultAutocomplete);\n      }\n\n      this.createExternalInput();\n    }\n  };\n\nexport const EmailFieldClass = compose(\n  createStyleMixin({\n    mappings: textFieldMappings,\n  }),\n  draggableMixin,\n  externalInputMixin({\n    inputType: 'email',\n    inputName: 'email',\n    autocompleteType: 'username',\n    includeAttrs: ['disabled', 'readonly', 'pattern'],\n  }),\n  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n  componentNameValidationMixin,\n  customMixin\n)(\n  createProxy({\n    slots: ['', 'suffix'],\n    wrappedEleName: 'vaadin-email-field',\n    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(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${\n          EmailFieldClass.cssVarList.inputOutlineOffset\n        }));\n        box-sizing: border-box;\n\t\t\t}\n      ${resetInputLabelPosition('vaadin-email-field')}\n\t\t\t${useHostExternalPadding(EmailFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}\n      ${inputFloatingLabelStyle()}\n\n      vaadin-email-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-email-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n      :host ::slotted(*) {\n        -webkit-mask-image: none;\n      }\n\n      vaadin-email-field[external-input=\"true\"] > input:not(:placeholder-shown) {\n        opacity: 0;\n      }\n\t\t`,\n    excludeAttrsSync: ['tabindex'],\n    componentName,\n  })\n);\n","import '@vaadin/email-field';\nimport { componentName, EmailFieldClass } from './EmailFieldClass';\n\ncustomElements.define(componentName, EmailFieldClass);\n\nexport { EmailFieldClass, componentName };\n","const NUMERIC_RE = /^\\d+$/;\n\nexport const isNumericValue = (val) => NUMERIC_RE.test(val.replaceAll('+', '').replaceAll('-', ''));\n\nexport const sanitizeCountryCodePrefix = (val) => val.replace(/\\+\\d+-/, '');\n","import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';\nimport { isNumericValue, sanitizeCountryCodePrefix as sanitizeValue } from './helpers';\nimport { PhoneFieldClass } from '../phone-fields/descope-phone-field/PhoneFieldClass';\nimport { PhoneFieldInputBoxClass } from '../phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('hybrid-field');\n\nconst attrs = {\n  shared: [\n    'bordered',\n    'full-width',\n    'label-type',\n    'size',\n    'disabled',\n    'readonly',\n    'required',\n    'st-host-direction',\n    'st-error-message-icon',\n    'st-error-message-icon-size',\n    'st-error-message-icon-padding',\n  ],\n  email: [\n    'label',\n    'placeholder',\n    'data-errormessage-value-missing-email',\n    'data-errormessage-pattern-mismatch-email',\n    'external-input',\n  ],\n  phone: {\n    countryCode: [\n      'phone-input-label',\n      'country-input-label',\n      'country-input-placeholder',\n      'restrict-countries',\n      'default-code',\n      'phone-minlength',\n      'data-errormessage-value-missing-phone',\n    ],\n    inputBox: [\n      'label',\n      'restrict-countries',\n      'default-code',\n      'phone-minlength',\n      'data-errormessage-value-missing-phone',\n    ],\n  },\n};\n\nconst attrMap = {\n  email: {\n    'data-errormessage-value-missing-email': 'data-errormessage-value-missing',\n    'data-errormessage-pattern-mismatch-email': 'data-errormessage-pattern-mismatch',\n  },\n  phone: {\n    'phone-input-label': 'label',\n    'phone-minlength': 'minlength',\n    'data-errormessage-value-missing-phone': 'data-errormessage-value-missing',\n  },\n};\n\nconst EMAIL_FIELD = 'descope-email-field';\nconst PHONE_FIELD = 'descope-phone-field';\nconst PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';\n\nconst BaseClass = createBaseClass({\n  componentName,\n  baseSelector: 'div',\n});\n\nclass RawHybridField extends BaseClass {\n  #isReportedValidity = false;\n\n  #selectionStart;\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n    <div class=\"wrapper\">\n      <descope-email-field external-input=\"${this.isExternalInput}\"></descope-email-field>\n      <descope-phone-field allow-alphanumeric-input=\"true\"></descope-phone-field>\n      <descope-phone-input-box-field allow-alphanumeric-input=\"true\"></descope-phone-input-box-field>\n    </div>\n\t\t`;\n\n    injectStyle(\n      `\n      :host {\n        display: inline-flex;\n        box-sizing: border-box;\n        padding: 0;\n        gap: 0;\n      }\n      .wrapper {\n        display: grid;\n        width: 100%;\n      }\n      descope-email-field,\n      descope-phone-field,\n      descope-phone-input-box-field {\n        grid-area: 1/1;\n        width: 100%;\n        height: 100%;\n      }\n      .hidden {\n        visibility: hidden;\n      }\n      `,\n      this\n    );\n  }\n\n  get isExternalInput() {\n    return this.getAttribute('external-input') === 'true';\n  }\n\n  get emailInputEle() {\n    return this.isExternalInput ? this.emailInput.externalInput : this.emailInput.inputElement;\n  }\n\n  get phoneVariant() {\n    const isInputBox = this.getAttribute('phone-variant') === 'inputBox';\n    return isInputBox ? this.phoneInputBoxInput : this.phoneCountryCodeInput;\n  }\n\n  get defaultCode() {\n    const firstItem = this.phoneCountryCodeInput.countryCodes?.[0] || '';\n    return this.getAttribute('default-code') || firstItem;\n  }\n\n  get activeInputEle() {\n    if (this.activeInput === this.emailInput) {\n      return this.emailInputEle;\n    }\n    return this.phoneVariant.phoneNumberInputEle;\n  }\n\n  get value() {\n    return this.activeInput?.value || '';\n  }\n\n  set value(val) {\n    this.handleActiveInput(val);\n    this.activeInput.value = val;\n  }\n\n  async init() {\n    super.init?.();\n\n    this.initInputs();\n    this.updateAttrs();\n    this.toggleInputVisibility();\n\n    await this.waitForInputs();\n\n    this.initInputEles();\n    this.overrideEmailInputType();\n    this.overrideEmailSetAttribute();\n  }\n\n  waitForInputs() {\n    return new Promise((resolve) => {\n      const check = setInterval(() => {\n        if (this.emailInputEle) {\n          clearInterval(check);\n          resolve();\n        }\n      });\n    });\n  }\n\n  initInputs() {\n    this.emailInput = this.shadowRoot.querySelector(EMAIL_FIELD);\n    this.phoneCountryCodeInput = this.shadowRoot.querySelector(PHONE_FIELD);\n    this.phoneInputBoxInput = this.shadowRoot.querySelector(PHONE_INPUT_BOX_FIELD);\n\n    this.inputs = [this.emailInput, this.phoneCountryCodeInput, this.phoneInputBoxInput];\n\n    this.activeInput = this.emailInput;\n  }\n\n  // we need to listen on the inner `input` element itself, otherwise we don't always get an `input` event\n  initInputEles() {\n    const inputEles = [\n      this.emailInputEle,\n      this.phoneCountryCodeInput.phoneNumberInputEle,\n      this.phoneInputBoxInput.phoneNumberInputEle,\n    ];\n\n    inputEles.forEach((ele) => {\n      ele.addEventListener('input', this.onValueChange.bind(this));\n    });\n  }\n\n  overrideEmailInputType() {\n    this.emailInputEle.addEventListener('focus', () => {\n      this.emailInputEle.setAttribute('type', 'text');\n    });\n    this.emailInputEle.addEventListener('blur', () => {\n      setTimeout(() => {\n        this.emailInputEle.setAttribute('type', 'email');\n      });\n    });\n  }\n\n  // We want to prevent Vaadin from changing the input type to `email`\n  // otherwise, we cannot get the selectionStart from the input.\n  overrideEmailSetAttribute() {\n    const origEmailSetAttr = this.emailInput.setAttribute.bind(this.emailInputEle);\n    this.emailInputEle.setAttribute = (name, value) => {\n      if (name !== 'type' || value !== 'email' || !this.emailInput.hasAttribute('focused')) {\n        return origEmailSetAttr(name, value);\n      }\n      return false;\n    };\n  }\n\n  updateAttrs() {\n    forwardAttrs(this, this.emailInput, { includeAttrs: attrs.email, mapAttrs: attrMap.email });\n\n    forwardAttrs(this, this.phoneCountryCodeInput, {\n      includeAttrs: attrs.phone.countryCode,\n      mapAttrs: attrMap.phone,\n    });\n\n    forwardAttrs(this, this.phoneInputBoxInput, {\n      includeAttrs: attrs.phone.inputBox,\n      mapAttrs: attrMap.phone,\n    });\n\n    this.inputs.forEach((input) => forwardAttrs(this, input, { includeAttrs: attrs.shared }));\n\n    setTimeout(() => this.phoneCountryCodeInput.setAttribute('default-code', this.defaultCode));\n  }\n\n  onValueChange() {\n    this.#selectionStart = this.activeInputEle.selectionStart;\n    this.handleActiveInput(this.activeInput.value);\n  }\n\n  handleActiveInput(val) {\n    const expectedActiveInput = isNumericValue(val) ? this.phoneVariant : this.emailInput;\n\n    if (this.activeInput !== expectedActiveInput) {\n      this.setActiveInput(expectedActiveInput);\n    }\n  }\n\n  setActiveInput(expectedActiveInput) {\n    const val = this.activeInput.value;\n    this.activeInput = expectedActiveInput;\n    this.setActiveInputValue(val);\n    if (this.#isReportedValidity) this.activeInput.reportValidity();\n    this.setActiveInputSelectionStart();\n    this.toggleInputVisibility();\n  }\n\n  setActiveInputSelectionStart() {\n    setTimeout(() => {\n      this.activeInputEle.focus();\n      this.activeInputEle.setSelectionRange?.(this.#selectionStart, this.#selectionStart);\n    });\n  }\n\n  setActiveInputValue(val) {\n    const sanitizedVal = sanitizeValue(val);\n    const isPhoneField = this.activeInput.localName === PHONE_FIELD;\n    const value = isPhoneField\n      ? `${this.phoneCountryCodeInput.countryCodeItems}-${sanitizedVal}`\n      : sanitizedVal;\n    this.activeInput.value = value;\n  }\n\n  toggleInputVisibility() {\n    this.inputs.forEach((input) => {\n      input !== this.activeInput ? input.classList.add('hidden') : input.classList.remove('hidden');\n    });\n  }\n\n  reportValidity() {\n    this.#isReportedValidity = true;\n\n    const ele = this.activeInputEle;\n\n    // On reportValidity we want to set the caret at the end of the input value.\n    // Since checkValidity triggers `focus` on the input, it sets the caret at the start of the input,\n    // regardless the existing value.\n    setTimeout(() => {\n      ele.setSelectionRange?.(ele.value.length, ele.value.length);\n    });\n\n    return this.activeInput.reportValidity();\n  }\n\n  checkValidity() {\n    return this.activeInput.checkValidity();\n  }\n}\n\nexport const HybridFieldClass = compose(\n  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),\n  createStyleMixin({\n    mappings: {\n      hostWidth: { selector: () => ':host', property: 'width' },\n      hostDirection: [\n        { selector: () => 'descope-email-field', property: 'direction' },\n        { selector: () => 'descope-phone-field', property: 'direction' },\n        { selector: () => 'descope-phone-input-box-field', property: 'direction' },\n      ],\n      errorMessageIcon: [\n        {\n          selector: () => PhoneFieldClass.componentName,\n          property: PhoneFieldClass.cssVarList.errorMessageIcon,\n        },\n        {\n          selector: () => PhoneFieldInputBoxClass.componentName,\n          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIcon,\n        },\n      ],\n      errorMessageIconSize: [\n        {\n          selector: () => PhoneFieldClass.componentName,\n          property: PhoneFieldClass.cssVarList.errorMessageIconSize,\n        },\n        {\n          selector: () => PhoneFieldInputBoxClass.componentName,\n          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconSize,\n        },\n      ],\n      errorMessageIconPadding: [\n        {\n          selector: () => PhoneFieldClass.componentName,\n          property: PhoneFieldClass.cssVarList.errorMessageIconPadding,\n        },\n        {\n          selector: () => PhoneFieldInputBoxClass.componentName,\n          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPadding,\n        },\n      ],\n      errorMessageIconRepeat: [\n        {\n          selector: () => PhoneFieldClass.componentName,\n          property: PhoneFieldClass.cssVarList.errorMessageIconRepeat,\n        },\n        {\n          selector: () => PhoneFieldInputBoxClass.componentName,\n          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconRepeat,\n        },\n      ],\n      errorMessageIconPosition: [\n        {\n          selector: () => PhoneFieldClass.componentName,\n          property: PhoneFieldClass.cssVarList.errorMessageIconPosition,\n        },\n        {\n          selector: () => PhoneFieldInputBoxClass.componentName,\n          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPosition,\n        },\n      ],\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawHybridField);\n","import '../descope-email-field';\nimport '../phone-fields/descope-phone-field';\nimport '../phone-fields/descope-phone-input-box-field';\n\nimport { componentName, HybridFieldClass } from './HybridFieldClass';\n\ncustomElements.define(componentName, HybridFieldClass);\n\nexport { HybridFieldClass, componentName };\n","import { componentName as descopeInternalComponentName } from './descope-phone-input-box-internal/PhoneFieldInternalInputBox';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport { createProxy, createStyleMixin, draggableMixin, proxyInputMixin } from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport CountryCodes from '../CountryCodes';\nimport {\n  resetInputLabelPosition,\n  resetInputCursor,\n  resetInputFieldDefaultWidth,\n  resetInputFieldInvalidBackgroundColor,\n  useHostExternalPadding,\n  inputFloatingLabelStyle,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\n\nexport const componentName = getComponentName('phone-input-box-field');\n\nconst customMixin = (superclass) =>\n  class PhoneInputBoxFieldMixinClass extends superclass {\n    static get CountryCodes() {\n      return CountryCodes;\n    }\n\n    init() {\n      super.init?.();\n\n      const template = document.createElement('template');\n\n      template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t></${descopeInternalComponentName}>\n      `;\n\n      this.baseElement.appendChild(template.content.cloneNode(true));\n\n      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n      forwardAttrs(this.shadowRoot.host, this.inputElement, {\n        includeAttrs: [\n          'size',\n          'bordered',\n          'invalid',\n          'minlength',\n          'maxlength',\n          'default-code',\n          'disabled',\n          'phone-input-placeholder',\n          'label',\n          'label-type',\n          'allow-alphanumeric-input',\n        ],\n      });\n    }\n\n    get phoneNumberInputEle() {\n      return this.inputElement?.phoneNumberInputEle;\n    }\n  };\n\nconst {\n  host,\n  label,\n  inputElement,\n  requiredIndicator,\n  inputField,\n  inputFieldInternal,\n  phoneInput,\n  errorMessage,\n  helperText,\n} = {\n  host: { selector: () => ':host' },\n  label: { selector: '::part(label)' },\n  placeholder: { selector: '> input:placeholder-shown' },\n  inputElement: { selector: 'input' },\n  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n  inputField: { selector: () => 'vaadin-text-field::part(input-field)' },\n  inputFieldInternal: {\n    selector: () => 'descope-phone-field-internal-input-box vaadin-text-field::part(input-field)',\n  },\n  phoneInput: { selector: () => 'descope-text-field' },\n  helperText: { selector: '::part(helper-text)' },\n  errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldInputBoxClass = compose(\n  createStyleMixin({\n    mappings: {\n      fontSize: [\n        host,\n        inputField,\n        {\n          selector: TextFieldClass.componentName,\n          property: TextFieldClass.cssVarList.fontSize,\n        },\n      ],\n      fontFamily: [label, errorMessage, helperText],\n      hostWidth: { ...host, property: 'width' },\n      hostMinWidth: { ...host, property: 'min-width' },\n      hostDirection: { ...host, property: 'direction' },\n\n      inputBorderStyle: { ...inputFieldInternal, property: 'border-style' },\n      inputBorderWidth: { ...inputFieldInternal, property: 'border-width' },\n      inputBorderColor: { ...inputFieldInternal, property: 'border-color' },\n      inputBorderRadius: [\n        { ...inputField, property: 'border-radius' },\n        { ...inputFieldInternal, property: 'border-radius' },\n      ],\n\n      inputHorizontalPadding: [\n        { ...phoneInput, property: 'padding-left' },\n        { ...phoneInput, property: 'padding-right' },\n      ],\n\n      labelFontSize: { ...label, property: 'font-size' },\n      labelFontWeight: { ...label, property: 'font-weight' },\n      labelTextColor: [\n        { ...label, property: 'color' },\n        { ...requiredIndicator, property: 'color' },\n      ],\n      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n      errorMessageTextColor: { ...errorMessage, property: 'color' },\n\n      errorMessageIcon: { ...errorMessage, property: 'background-image' },\n      errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n\n      inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },\n\n      inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n      inputOutlineStyle: { ...inputField, property: 'outline-style' },\n      inputOutlineColor: { ...inputField, property: 'outline-color' },\n      inputOutlineWidth: { ...inputField, property: 'outline-width' },\n      inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n      labelPosition: { ...label, property: 'position' },\n      labelTopPosition: { ...label, property: 'top' },\n      labelHorizontalPosition: [\n        { ...label, property: 'left' },\n        { ...label, property: 'right' },\n      ],\n      inputTransformY: { ...label, property: 'transform' },\n      inputTransition: { ...label, property: 'transition' },\n      marginInlineStart: { ...label, property: 'margin-inline-start' },\n      valueInputHeight: { ...inputElement, property: 'height' },\n      valueInputMarginBottom: {\n        selector: TextFieldClass.componentName,\n        property: textVars.valueInputMarginBottom,\n      },\n    },\n  }),\n  draggableMixin,\n  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n  customMixin\n)(\n  createProxy({\n    slots: [],\n    wrappedEleName: 'vaadin-text-field',\n    style: () => `\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    ${useHostExternalPadding(PhoneFieldInputBoxClass.cssVarList)}\n    ${resetInputCursor('vaadin-text-field')}\n    ${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n    ${resetInputFieldDefaultWidth()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      overflow: hidden;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box .separator {\n      flex: 0;\n      border: none;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${textVars.inputOutlineWidth}: 0;\n      ${textVars.inputOutlineOffset}: 0;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\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\n    ${resetInputLabelPosition('vaadin-text-field')}\n    ${inputFloatingLabelStyle()}\n\t\t`,\n    excludeAttrsSync: ['tabindex'],\n    componentName,\n  })\n);\n\nexport default PhoneFieldInputBoxClass;\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { getComponentName } from '../../../../helpers/componentHelpers';\nimport { getCountryByCodeId } from '../../helpers';\n\nexport const componentName = getComponentName('phone-field-internal-input-box');\n\nconst observedAttributes = [\n  'disabled',\n  'size',\n  'bordered',\n  'invalid',\n  'readonly',\n  'phone-input-placeholder',\n  'name',\n  'autocomplete',\n  'label-type',\n  'allow-alphanumeric-input',\n];\nconst mapAttrs = {\n  'phone-input-placeholder': 'placeholder',\n};\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n  static get observedAttributes() {\n    return [].concat(BaseInputClass.observedAttributes || [], observedAttributes);\n  }\n\n  constructor() {\n    super();\n\n    this.innerHTML = `\n      <div>\n        <descope-text-field tabindex=\"1\"></descope-text-field>\n      </div>\n      `;\n\n    this.phoneNumberInput = this.querySelector('descope-text-field');\n  }\n\n  get defaultCountryCode() {\n    return getCountryByCodeId(this.getAttribute('default-code'));\n  }\n\n  get hasDefaultCode() {\n    return !!this.getAttribute('default-code');\n  }\n\n  get allowAlphanumericInput() {\n    return this.getAttribute('allow-alphanumeric-input') === 'true';\n  }\n\n  get value() {\n    if (!this.phoneNumberValue) {\n      return '';\n    }\n\n    if (this.hasDefaultCode) {\n      // we want to transform phone numbers to a valid {dialCode}-{phoneNumber} format\n      // e.g.:\n      // +972-12345 => +972-12345\n      // 972-12345 => +972-12345\n      // 12345 => +972-12345\n      //\n      // we also want to handle any extra dash if added in the start of the phone number\n      // e.g.:\n      // +972--12345 => +972-12345\n      const pattern = new RegExp(`\\\\+?${parseInt(this.defaultCountryCode, 10)}--?`);\n      return `${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(pattern, '')}`;\n    }\n\n    return this.phoneNumberInput.value;\n  }\n\n  set value(val) {\n    this.phoneNumberInput.value = val;\n  }\n\n  get phoneNumberValue() {\n    return this.phoneNumberInput.value;\n  }\n\n  get phoneNumberInputEle() {\n    return this.phoneNumberInput.shadowRoot.querySelector('input');\n  }\n\n  get minLength() {\n    return parseInt(this.getAttribute('minlength'), 10) || 0;\n  }\n\n  get maxLength() {\n    return parseInt(this.getAttribute('maxlength'), 10) || 50;\n  }\n\n  getValidity() {\n    const validPhonePattern = /^\\+?\\d{1,4}-?(?:\\d-?){1,15}$/;\n    const stripValue = this.value.replace(/\\D/g, '');\n\n    if (this.isRequired && !this.value) {\n      return { valueMissing: true };\n    }\n\n    if (stripValue.length < this.minLength) {\n      return { tooShort: true };\n    }\n\n    if (stripValue.length > this.maxLength) {\n      return { tooLong: true };\n    }\n\n    if (this.value && !validPhonePattern.test(this.value)) {\n      return { patternMismatch: true };\n    }\n\n    return {};\n  }\n\n  init() {\n    this.addEventListener('focus', (e) => {\n      // we want to ignore focus events we are dispatching\n      if (e.isTrusted) this.phoneNumberInput.focus();\n    });\n\n    super.init?.();\n    this.initInputs();\n  }\n\n  getCountryByDialCode(countryDialCode) {\n    return this.countryCodeInput.items?.find(\n      (c) => c.getAttribute('data-country-code') === countryDialCode\n    );\n  }\n\n  initInputs() {\n    // Sanitize phone input value to filter everything but digits\n    this.phoneNumberInput.addEventListener('input', (e) => {\n      if (e.target.value.length === 1 && e.target.value === '-') {\n        e.target.value = '';\n      }\n\n      e.target.value = e.target.value\n        .replace(/(?!^)\\+/g, '')\n        .replace('--', '-')\n        .replace('+-', '+');\n\n      let sanitizedInput = e.target.value;\n      if (!this.allowAlphanumericInput) {\n        const telDigitsRegExp = /^[+\\d-]+$/;\n        sanitizedInput = e.target.value\n          .split('')\n          .filter((char) => telDigitsRegExp.test(char))\n          .join('');\n      }\n\n      e.target.value = sanitizedInput;\n    });\n\n    this.handleFocusEventsDispatching([this.phoneNumberInput]);\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback(attrName, oldValue, newValue);\n\n    if (oldValue !== newValue && observedAttributes.includes(attrName)) {\n      const attr = mapAttrs[attrName] || attrName;\n      this.phoneNumberInput.setAttribute(attr, newValue);\n    }\n  }\n}\n\nexport default PhoneFieldInternal;\n","import '../../../descope-text-field';\n\nimport PhoneFieldInternalInputBox, { componentName } from './PhoneFieldInternalInputBox';\n\ncustomElements.define(componentName, PhoneFieldInternalInputBox);\n","import './descope-phone-input-box-internal';\nimport '@descope-ui/descope-combo-box';\nimport '../../descope-text-field';\n\nimport { componentName, PhoneFieldInputBoxClass } from './PhoneFieldInputBoxClass';\n\ncustomElements.define(componentName, PhoneFieldInputBoxClass);\n\nexport { PhoneFieldInputBoxClass, componentName };\n","import CountryCodes from './CountryCodes';\n\nexport const getCountryByCodeId = (countryCode) => {\n  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;\n};\n"],"names":["emailField","moduleId","emailFieldStyles","EmailField","is","constructor","super","this","_setType","pattern","ready","inputElement","autocapitalize","componentName","EmailFieldClass","mappings","textFieldMappings","inputType","inputName","autocompleteType","includeAttrs","proxyProps","useProxyTargets","superclass","init","baseElement","setAttribute","getAttribute","createExternalInput","slots","wrappedEleName","style","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","NUMERIC_RE","attrs","shared","email","phone","countryCode","inputBox","attrMap","PHONE_FIELD","BaseClass","createBaseClass","baseSelector","HybridFieldClass","componentNameOverride","hostWidth","selector","property","hostDirection","errorMessageIcon","PhoneFieldClass","PhoneFieldInputBoxClass","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","attachShadow","mode","innerHTML","isExternalInput","emailInputEle","emailInput","externalInput","phoneVariant","phoneInputBoxInput","phoneCountryCodeInput","defaultCode","firstItem","countryCodes","activeInputEle","activeInput","phoneNumberInputEle","value","val","handleActiveInput","initInputs","updateAttrs","toggleInputVisibility","waitForInputs","initInputEles","overrideEmailInputType","overrideEmailSetAttribute","Promise","resolve","check","setInterval","clearInterval","shadowRoot","querySelector","inputs","forEach","ele","addEventListener","onValueChange","bind","setTimeout","origEmailSetAttr","name","hasAttribute","mapAttrs","input","selectionStart","expectedActiveInput","test","replaceAll","isNumericValue","setActiveInput","setActiveInputValue","reportValidity","setActiveInputSelectionStart","focus","setSelectionRange","sanitizedVal","replace","localName","countryCodeItems","classList","add","remove","length","checkValidity","textVars","host","label","requiredIndicator","inputField","inputFieldInternal","phoneInput","errorMessage","helperText","placeholder","fontSize","fontFamily","hostMinWidth","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","inputHorizontalPadding","labelFontSize","labelFontWeight","labelTextColor","labelRequiredIndicator","errorMessageTextColor","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","inputOutlineStyle","inputOutlineColor","labelPosition","labelTopPosition","labelHorizontalPosition","inputTransformY","inputTransition","marginInlineStart","valueInputHeight","valueInputMarginBottom","CountryCodes","template","document","createElement","appendChild","content","cloneNode","observedAttributes","BaseInputClass","concat","phoneNumberInput","defaultCountryCode","hasDefaultCode","allowAlphanumericInput","phoneNumberValue","RegExp","parseInt","minLength","maxLength","getValidity","stripValue","isRequired","valueMissing","tooShort","tooLong","patternMismatch","e","isTrusted","getCountryByDialCode","countryDialCode","countryCodeInput","items","find","c","target","sanitizedInput","telDigitsRegExp","split","filter","char","join","handleFocusEventsDispatching","attributeChangedCallback","attrName","oldValue","newValue","includes","attr","getCountryByCodeId","code","dialCode"],"sourceRoot":""}
+{"version":3,"file":"descope-hybrid-field-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../../../node_modules/@vaadin/email-field/theme/lumo/vaadin-email-field-styles.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/email-field/src/vaadin-email-field-styles.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/email-field/src/vaadin-email-field.js","webpack://@descope/web-components-ui/./src/components/descope-email-field/EmailFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-email-field/index.js","webpack://@descope/web-components-ui/./src/components/descope-hybrid-field/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-hybrid-field/HybridFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-hybrid-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/helpers.js"],"sourcesContent":["/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';\nimport { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\n\nconst emailField = css`\n  :host([dir='rtl']) [part='input-field'] ::slotted(input) {\n    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);\n  }\n\n  :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {\n    --_lumo-text-field-overflow-mask-image: none;\n  }\n`;\n\nregisterStyles('vaadin-email-field', [inputFieldShared, emailField], {\n  moduleId: 'lumo-email-field',\n});\n","/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { css } from 'lit';\n\n// See https://github.com/vaadin/vaadin-text-field/issues/466\nexport const emailFieldStyles = css`\n  :host([dir='rtl']) [part='input-field'] {\n    direction: ltr;\n  }\n\n  :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {\n    direction: rtl;\n    text-align: left;\n  }\n`;\n","/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { defineCustomElement } from '@vaadin/component-base/src/define.js';\nimport { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { emailFieldStyles } from './vaadin-email-field-styles.js';\n\nregisterStyles('vaadin-email-field', emailFieldStyles, { moduleId: 'vaadin-email-field-styles' });\n\n/**\n * `<vaadin-email-field>` is a Web Component for email field control in forms.\n *\n * ```html\n * <vaadin-email-field label=\"Email\"></vaadin-email-field>\n * ```\n *\n * ### Styling\n *\n * `<vaadin-email-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\n * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.\n *\n * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n *\n * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.\n * @fires {Event} change - Fired when the user commits a value change.\n * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.\n * @fires {CustomEvent} value-changed - Fired when the `value` property changes.\n * @fires {CustomEvent} validated - Fired whenever the field is validated.\n *\n * @customElement\n * @extends TextField\n */\nexport class EmailField extends TextField {\n  static get is() {\n    return 'vaadin-email-field';\n  }\n\n  constructor() {\n    super();\n    this._setType('email');\n    this.pattern = '^([a-zA-Z0-9_\\\\.\\\\-+])+@[a-zA-Z0-9\\\\-.]+\\\\.[a-zA-Z0-9\\\\-]{2,}$';\n  }\n\n  /** @protected */\n  ready() {\n    super.ready();\n\n    if (this.inputElement) {\n      this.inputElement.autocapitalize = 'off';\n    }\n  }\n}\n\ndefineCustomElement(EmailField);\n","import {\n  createStyleMixin,\n  draggableMixin,\n  createProxy,\n  proxyInputMixin,\n  componentNameValidationMixin,\n  externalInputMixin,\n} from '../../mixins';\nimport textFieldMappings from '../descope-text-field/textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n  inputFloatingLabelStyle,\n  resetInputLabelPosition,\n  resetInputOverrides,\n  useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('email-field');\n\nconst defaultPattern = \"^[\\\\w\\\\.\\\\%\\\\+\\\\-']+@[\\\\w\\\\.\\\\-]+\\\\.[A-Za-z]{2,}$\";\nconst defaultAutocomplete = 'username';\n\nconst customMixin = (superclass) =>\n  class EmailFieldMixinClass extends superclass {\n    init() {\n      super.init?.();\n\n      // we need to set the pattern on the base element because vaadin-email-field is overriding it\n      this.baseElement.setAttribute('pattern', defaultPattern);\n\n      if (!this.getAttribute('autocomplete')) {\n        this.setAttribute('autocomplete', defaultAutocomplete);\n      }\n\n      this.createExternalInput();\n    }\n  };\n\nexport const EmailFieldClass = compose(\n  createStyleMixin({\n    mappings: textFieldMappings,\n  }),\n  draggableMixin,\n  externalInputMixin({\n    inputType: 'email',\n    inputName: 'email',\n    autocompleteType: 'username',\n    includeAttrs: ['disabled', 'readonly', 'pattern'],\n  }),\n  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n  componentNameValidationMixin,\n  customMixin\n)(\n  createProxy({\n    slots: ['', 'suffix'],\n    wrappedEleName: 'vaadin-email-field',\n    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(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${\n          EmailFieldClass.cssVarList.inputOutlineOffset\n        }));\n        box-sizing: border-box;\n\t\t\t}\n      ${resetInputLabelPosition('vaadin-email-field')}\n\t\t\t${useHostExternalPadding(EmailFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}\n      ${inputFloatingLabelStyle()}\n\n      vaadin-email-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-email-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n      :host ::slotted(*) {\n        -webkit-mask-image: none;\n      }\n\n      vaadin-email-field[external-input=\"true\"] > input:not(:placeholder-shown) {\n        opacity: 0;\n      }\n\t\t`,\n    excludeAttrsSync: ['tabindex'],\n    componentName,\n  })\n);\n","import '@vaadin/email-field';\nimport { componentName, EmailFieldClass } from './EmailFieldClass';\n\ncustomElements.define(componentName, EmailFieldClass);\n\nexport { EmailFieldClass, componentName };\n","const NUMERIC_RE = /^\\d+$/;\n\nexport const isNumericValue = (val) => NUMERIC_RE.test(val.replaceAll('+', '').replaceAll('-', ''));\n\nexport const sanitizeCountryCodePrefix = (val) => val.replace(/\\+\\d+-/, '');\n","import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';\nimport { isNumericValue, sanitizeCountryCodePrefix as sanitizeValue } from './helpers';\nimport { PhoneFieldClass } from '../phone-fields/descope-phone-field/PhoneFieldClass';\nimport { PhoneFieldInputBoxClass } from '../phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('hybrid-field');\n\nconst attrs = {\n  shared: [\n    'bordered',\n    'full-width',\n    'label-type',\n    'size',\n    'disabled',\n    'readonly',\n    'required',\n    'st-host-direction',\n    'st-error-message-icon',\n    'st-error-message-icon-size',\n    'st-error-message-icon-padding',\n  ],\n  email: [\n    'label',\n    'placeholder',\n    'data-errormessage-value-missing-email',\n    'data-errormessage-pattern-mismatch-email',\n    'external-input',\n  ],\n  phone: {\n    countryCode: [\n      'phone-input-label',\n      'country-input-label',\n      'country-input-placeholder',\n      'restrict-countries',\n      'default-code',\n      'phone-minlength',\n      'phone-format-value',\n      'phone-strict-validation',\n      'data-errormessage-value-missing-phone',\n    ],\n    inputBox: [\n      'label',\n      'restrict-countries',\n      'default-code',\n      'phone-minlength',\n      'phone-format-value',\n      'phone-strict-validation',\n      'data-errormessage-value-missing-phone',\n    ],\n  },\n};\n\nconst attrMap = {\n  email: {\n    'data-errormessage-value-missing-email': 'data-errormessage-value-missing',\n    'data-errormessage-pattern-mismatch-email': 'data-errormessage-pattern-mismatch',\n  },\n  phone: {\n    'phone-input-label': 'label',\n    'phone-minlength': 'minlength',\n    'phone-format-value': 'format-value',\n    'phone-strict-validation': 'strict-validation',\n    'data-errormessage-value-missing-phone': 'data-errormessage-value-missing',\n  },\n};\n\nconst EMAIL_FIELD = 'descope-email-field';\nconst PHONE_FIELD = 'descope-phone-field';\nconst PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';\n\nconst BaseClass = createBaseClass({\n  componentName,\n  baseSelector: 'div',\n});\n\nclass RawHybridField extends BaseClass {\n  #isReportedValidity = false;\n\n  #selectionStart;\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n    <div class=\"wrapper\">\n      <descope-email-field external-input=\"${this.isExternalInput}\"></descope-email-field>\n      <descope-phone-field allow-alphanumeric-input=\"true\"></descope-phone-field>\n      <descope-phone-input-box-field allow-alphanumeric-input=\"true\"></descope-phone-input-box-field>\n    </div>\n\t\t`;\n\n    injectStyle(\n      `\n      :host {\n        display: inline-flex;\n        box-sizing: border-box;\n        padding: 0;\n        gap: 0;\n      }\n      .wrapper {\n        display: grid;\n        width: 100%;\n      }\n      descope-email-field,\n      descope-phone-field,\n      descope-phone-input-box-field {\n        grid-area: 1/1;\n        width: 100%;\n        height: 100%;\n      }\n      .hidden {\n        visibility: hidden;\n      }\n      `,\n      this\n    );\n  }\n\n  get isExternalInput() {\n    return this.getAttribute('external-input') === 'true';\n  }\n\n  get emailInputEle() {\n    return this.isExternalInput ? this.emailInput.externalInput : this.emailInput.inputElement;\n  }\n\n  get phoneVariant() {\n    const isInputBox = this.getAttribute('phone-variant') === 'inputBox';\n    return isInputBox ? this.phoneInputBoxInput : this.phoneCountryCodeInput;\n  }\n\n  get defaultCode() {\n    const firstItem = this.phoneCountryCodeInput.countryCodes?.[0] || '';\n    return this.getAttribute('default-code') || firstItem;\n  }\n\n  get activeInputEle() {\n    if (this.activeInput === this.emailInput) {\n      return this.emailInputEle;\n    }\n    return this.phoneVariant.phoneNumberInputEle;\n  }\n\n  get value() {\n    return this.activeInput?.value || '';\n  }\n\n  set value(val) {\n    this.handleActiveInput(val);\n    this.activeInput.value = val;\n  }\n\n  async init() {\n    super.init?.();\n\n    this.initInputs();\n    this.updateAttrs();\n    this.toggleInputVisibility();\n\n    await this.waitForInputs();\n\n    this.initInputEles();\n    this.overrideEmailInputType();\n    this.overrideEmailSetAttribute();\n  }\n\n  waitForInputs() {\n    return new Promise((resolve) => {\n      const check = setInterval(() => {\n        if (this.emailInputEle) {\n          clearInterval(check);\n          resolve();\n        }\n      });\n    });\n  }\n\n  initInputs() {\n    this.emailInput = this.shadowRoot.querySelector(EMAIL_FIELD);\n    this.phoneCountryCodeInput = this.shadowRoot.querySelector(PHONE_FIELD);\n    this.phoneInputBoxInput = this.shadowRoot.querySelector(PHONE_INPUT_BOX_FIELD);\n\n    this.inputs = [this.emailInput, this.phoneCountryCodeInput, this.phoneInputBoxInput];\n\n    this.activeInput = this.emailInput;\n  }\n\n  // we need to listen on the inner `input` element itself, otherwise we don't always get an `input` event\n  initInputEles() {\n    const inputEles = [\n      this.emailInputEle,\n      this.phoneCountryCodeInput.phoneNumberInputEle,\n      this.phoneInputBoxInput.phoneNumberInputEle,\n    ];\n\n    inputEles.forEach((ele) => {\n      ele.addEventListener('input', this.onValueChange.bind(this));\n    });\n  }\n\n  overrideEmailInputType() {\n    this.emailInputEle.addEventListener('focus', () => {\n      this.emailInputEle.setAttribute('type', 'text');\n    });\n    this.emailInputEle.addEventListener('blur', () => {\n      setTimeout(() => {\n        this.emailInputEle.setAttribute('type', 'email');\n      });\n    });\n  }\n\n  // We want to prevent Vaadin from changing the input type to `email`\n  // otherwise, we cannot get the selectionStart from the input.\n  overrideEmailSetAttribute() {\n    const origEmailSetAttr = this.emailInput.setAttribute.bind(this.emailInputEle);\n    this.emailInputEle.setAttribute = (name, value) => {\n      if (name !== 'type' || value !== 'email' || !this.emailInput.hasAttribute('focused')) {\n        return origEmailSetAttr(name, value);\n      }\n      return false;\n    };\n  }\n\n  updateAttrs() {\n    forwardAttrs(this, this.emailInput, { includeAttrs: attrs.email, mapAttrs: attrMap.email });\n\n    forwardAttrs(this, this.phoneCountryCodeInput, {\n      includeAttrs: attrs.phone.countryCode,\n      mapAttrs: attrMap.phone,\n    });\n\n    forwardAttrs(this, this.phoneInputBoxInput, {\n      includeAttrs: attrs.phone.inputBox,\n      mapAttrs: attrMap.phone,\n    });\n\n    this.inputs.forEach((input) => forwardAttrs(this, input, { includeAttrs: attrs.shared }));\n\n    setTimeout(() => this.phoneCountryCodeInput.setAttribute('default-code', this.defaultCode));\n  }\n\n  onValueChange() {\n    this.#selectionStart = this.activeInputEle.selectionStart;\n    this.handleActiveInput(this.activeInput.value);\n  }\n\n  handleActiveInput(val) {\n    const expectedActiveInput = isNumericValue(val) ? this.phoneVariant : this.emailInput;\n\n    if (this.activeInput !== expectedActiveInput) {\n      this.setActiveInput(expectedActiveInput);\n    }\n  }\n\n  setActiveInput(expectedActiveInput) {\n    const val = this.activeInput.value;\n    this.activeInput = expectedActiveInput;\n    this.setActiveInputValue(val);\n    if (this.#isReportedValidity) this.activeInput.reportValidity();\n    this.setActiveInputSelectionStart();\n    this.toggleInputVisibility();\n  }\n\n  setActiveInputSelectionStart() {\n    setTimeout(() => {\n      this.activeInputEle.focus();\n      this.activeInputEle.setSelectionRange?.(this.#selectionStart, this.#selectionStart);\n    });\n  }\n\n  setActiveInputValue(val) {\n    const sanitizedVal = sanitizeValue(val);\n    const isPhoneField = this.activeInput.localName === PHONE_FIELD;\n    const value = isPhoneField\n      ? `${this.phoneCountryCodeInput.countryCodeItems}-${sanitizedVal}`\n      : sanitizedVal;\n    this.activeInput.value = value;\n  }\n\n  toggleInputVisibility() {\n    this.inputs.forEach((input) => {\n      input !== this.activeInput ? input.classList.add('hidden') : input.classList.remove('hidden');\n    });\n  }\n\n  reportValidity() {\n    this.#isReportedValidity = true;\n\n    const ele = this.activeInputEle;\n\n    // On reportValidity we want to set the caret at the end of the input value.\n    // Since checkValidity triggers `focus` on the input, it sets the caret at the start of the input,\n    // regardless the existing value.\n    setTimeout(() => {\n      ele.setSelectionRange?.(ele.value.length, ele.value.length);\n    });\n\n    return this.activeInput.reportValidity();\n  }\n\n  checkValidity() {\n    return this.activeInput.checkValidity();\n  }\n}\n\nexport const HybridFieldClass = compose(\n  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),\n  createStyleMixin({\n    mappings: {\n      hostWidth: { selector: () => ':host', property: 'width' },\n      hostDirection: [\n        { selector: () => 'descope-email-field', property: 'direction' },\n        { selector: () => 'descope-phone-field', property: 'direction' },\n        { selector: () => 'descope-phone-input-box-field', property: 'direction' },\n      ],\n      errorMessageIcon: [\n        {\n          selector: () => PhoneFieldClass.componentName,\n          property: PhoneFieldClass.cssVarList.errorMessageIcon,\n        },\n        {\n          selector: () => PhoneFieldInputBoxClass.componentName,\n          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIcon,\n        },\n      ],\n      errorMessageIconSize: [\n        {\n          selector: () => PhoneFieldClass.componentName,\n          property: PhoneFieldClass.cssVarList.errorMessageIconSize,\n        },\n        {\n          selector: () => PhoneFieldInputBoxClass.componentName,\n          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconSize,\n        },\n      ],\n      errorMessageIconPadding: [\n        {\n          selector: () => PhoneFieldClass.componentName,\n          property: PhoneFieldClass.cssVarList.errorMessageIconPadding,\n        },\n        {\n          selector: () => PhoneFieldInputBoxClass.componentName,\n          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPadding,\n        },\n      ],\n      errorMessageIconRepeat: [\n        {\n          selector: () => PhoneFieldClass.componentName,\n          property: PhoneFieldClass.cssVarList.errorMessageIconRepeat,\n        },\n        {\n          selector: () => PhoneFieldInputBoxClass.componentName,\n          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconRepeat,\n        },\n      ],\n      errorMessageIconPosition: [\n        {\n          selector: () => PhoneFieldClass.componentName,\n          property: PhoneFieldClass.cssVarList.errorMessageIconPosition,\n        },\n        {\n          selector: () => PhoneFieldInputBoxClass.componentName,\n          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPosition,\n        },\n      ],\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawHybridField);\n","import '../descope-email-field';\nimport '../phone-fields/descope-phone-field';\nimport '../phone-fields/descope-phone-input-box-field';\n\nimport { componentName, HybridFieldClass } from './HybridFieldClass';\n\ncustomElements.define(componentName, HybridFieldClass);\n\nexport { HybridFieldClass, componentName };\n","import { componentName as descopeInternalComponentName } from './descope-phone-input-box-internal/PhoneFieldInternalInputBox';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n  createProxy,\n  createStyleMixin,\n  draggableMixin,\n  inputOverrideValidConstraintsMixin,\n  proxyInputMixin,\n} from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport CountryCodes from '../CountryCodes';\nimport {\n  resetInputLabelPosition,\n  resetInputCursor,\n  resetInputFieldDefaultWidth,\n  resetInputFieldInvalidBackgroundColor,\n  useHostExternalPadding,\n  inputFloatingLabelStyle,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\n\nexport const componentName = getComponentName('phone-input-box-field');\n\nconst customMixin = (superclass) =>\n  class PhoneFieldInputBoxMixinClass extends superclass {\n    static get CountryCodes() {\n      return CountryCodes;\n    }\n\n    init() {\n      super.init?.();\n\n      const template = document.createElement('template');\n\n      template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t></${descopeInternalComponentName}>\n      `;\n\n      this.baseElement.appendChild(template.content.cloneNode(true));\n\n      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n      forwardAttrs(this.shadowRoot.host, this.inputElement, {\n        includeAttrs: [\n          'size',\n          'minlength',\n          'maxlength',\n          'default-code',\n          'disabled',\n          'phone-input-placeholder',\n          'label',\n          'label-type',\n          'allow-alphanumeric-input',\n          'restrict-countries',\n          'format-value',\n          'strict-validation',\n          'data-errormessage-type-mismatch',\n        ],\n      });\n    }\n\n    get phoneNumberInputEle() {\n      return this.inputElement?.phoneNumberInputEle;\n    }\n  };\n\nconst {\n  host,\n  label,\n  inputElement,\n  requiredIndicator,\n  inputField,\n  internalComponent,\n  internalComponentAfter,\n  phoneInput,\n  errorMessage,\n  helperText,\n} = {\n  host: { selector: () => ':host' },\n  label: { selector: '::part(label)' },\n  placeholder: { selector: '> input:placeholder-shown' },\n  inputElement: { selector: 'input' },\n  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n  inputField: { selector: () => 'vaadin-text-field::part(input-field)' },\n  internalComponent: {\n    selector: 'descope-phone-field-internal-input-box',\n  },\n  internalComponentAfter: {\n    selector: 'descope-phone-field-internal-input-box::after',\n  },\n  phoneInput: { selector: () => 'descope-text-field' },\n  helperText: { selector: '::part(helper-text)' },\n  errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldInputBoxClass = compose(\n  createStyleMixin({\n    mappings: {\n      fontSize: [\n        host,\n        inputField,\n        {\n          selector: TextFieldClass.componentName,\n          property: TextFieldClass.cssVarList.fontSize,\n        },\n      ],\n      fontFamily: [label, errorMessage, helperText],\n      hostWidth: { ...host, property: 'width' },\n      hostMinWidth: { ...host, property: 'min-width' },\n      hostDirection: { ...host, property: 'direction' },\n\n      inputHorizontalPadding: [\n        { ...phoneInput, property: 'padding-left' },\n        { ...phoneInput, property: 'padding-right' },\n      ],\n\n      labelFontSize: { ...label, property: 'font-size' },\n      labelFontWeight: { ...label, property: 'font-weight' },\n      labelTextColor: [\n        { ...label, property: 'color' },\n        { ...requiredIndicator, property: 'color' },\n      ],\n      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n      errorMessageTextColor: { ...errorMessage, property: 'color' },\n\n      errorMessageIcon: { ...errorMessage, property: 'background-image' },\n      errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n\n      inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },\n\n      inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n      inputBorderStyle: { ...internalComponentAfter, property: 'border-style' },\n      inputBorderWidth: { ...internalComponentAfter, property: 'border-width' },\n      inputBorderColor: { ...internalComponentAfter, property: 'border-color' },\n      inputBorderRadius: [\n        { ...internalComponent, property: 'border-radius' },\n        { ...internalComponentAfter, property: 'border-radius' },\n      ],\n\n      inputOutlineStyle: { ...internalComponent, property: 'outline-style' },\n      inputOutlineColor: { ...internalComponent, property: 'outline-color' },\n      inputOutlineWidth: { ...internalComponent, property: 'outline-width' },\n      inputOutlineOffset: { ...internalComponent, property: 'outline-offset' },\n\n      labelPosition: { ...label, property: 'position' },\n      labelTopPosition: { ...label, property: 'top' },\n      labelHorizontalPosition: [\n        { ...label, property: 'left' },\n        { ...label, property: 'right' },\n      ],\n      inputTransformY: { ...label, property: 'transform' },\n      inputTransition: { ...label, property: 'transition' },\n      marginInlineStart: { ...label, property: 'margin-inline-start' },\n      valueInputHeight: { ...inputElement, property: 'height' },\n      valueInputMarginBottom: {\n        selector: TextFieldClass.componentName,\n        property: textVars.valueInputMarginBottom,\n      },\n    },\n  }),\n  draggableMixin,\n  inputOverrideValidConstraintsMixin,\n  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n  customMixin\n)(\n  createProxy({\n    slots: [],\n    wrappedEleName: 'vaadin-text-field',\n    style: () => `\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    ${useHostExternalPadding(PhoneFieldInputBoxClass.cssVarList)}\n    ${resetInputCursor('vaadin-text-field')}\n    ${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n    ${resetInputFieldDefaultWidth()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${textVars.inputOutlineWidth}: 0;\n      ${textVars.inputOutlineOffset}: 0;\n    }\n    descope-phone-field-internal-input-box::after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      box-sizing: border-box;\n      pointer-events: none;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\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\n    ${resetInputLabelPosition('vaadin-text-field')}\n    ${inputFloatingLabelStyle()}\n\t\t`,\n    excludeAttrsSync: ['tabindex'],\n    componentName,\n  })\n);\n\nexport default PhoneFieldInputBoxClass;\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { getComponentName } from '../../../../helpers/componentHelpers';\nimport { getCountryByCodeId, matchingParenthesis } from '../../helpers';\nimport parsePhoneNumberFromString, { AsYouType } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal-input-box');\n\nconst observedAttributes = [\n  'disabled',\n  'size',\n  'readonly',\n  'phone-input-placeholder',\n  'name',\n  'autocomplete',\n  'label-type',\n];\nconst mapAttrs = {\n  'phone-input-placeholder': 'placeholder',\n};\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n  static get observedAttributes() {\n    return [].concat(BaseInputClass.observedAttributes || [], observedAttributes);\n  }\n\n  #ayt;\n\n  constructor() {\n    super();\n\n    this.innerHTML = `\n      <div>\n        <descope-text-field tabindex=\"1\" type=\"tel\" bordered=\"false\"></descope-text-field>\n      </div>\n      `;\n\n    this.textField = this.querySelector('descope-text-field');\n  }\n\n  // notice: this function is exposed in parent component\n  get phoneNumberInputEle() {\n    return this.textField.shadowRoot.querySelector('input');\n  }\n\n  get defaultDialCode() {\n    return getCountryByCodeId(this.getAttribute('default-code'));\n  }\n\n  get defaultCode() {\n    return this.getAttribute('default-code');\n  }\n\n  get allowAlphanumericInput() {\n    return this.getAttribute('allow-alphanumeric-input') === 'true';\n  }\n\n  get minLength() {\n    return parseInt(this.getAttribute('minlength'), 10) || 0;\n  }\n\n  get maxLength() {\n    return parseInt(this.getAttribute('maxlength'), 10) || 50;\n  }\n\n  get restrictCountries() {\n    return this.getAttribute('restrict-countries')?.split(',').filter(Boolean) || [];\n  }\n\n  get isFormatValue() {\n    return this.getAttribute('format-value') === 'true';\n  }\n\n  get isStrictValidation() {\n    return this.getAttribute('strict-validation') === 'true';\n  }\n\n  get value() {\n    if (!this.textField.value) return '';\n\n    if (!this.isStrictValidation) {\n      return this.#nonParsedValue();\n    }\n\n    const parsedVal = this.#parseWithCountryCode();\n\n    if (parsedVal?.country && parsedVal?.countryCallingCode && parsedVal?.nationalNumber) {\n      return `+${[parsedVal?.countryCallingCode, parsedVal?.nationalNumber].join('-')}`;\n    }\n\n    // if failed to parse or to find country code return text field value\n    return this.textField.value;\n  }\n\n  set value(val) {\n    this.textField.value = val;\n  }\n\n  init() {\n    this.addEventListener('focus', (e) => {\n      // We want to ignore focus events we are dispatching\n      if (e.isTrusted) this.textField.focus();\n    });\n\n    super.init?.();\n\n    this.textField.addEventListener('input', this.#onInput.bind(this));\n    this.handleFocusEventsDispatching([this.textField]);\n  }\n\n  getValidity() {\n    const validPhonePattern = /^\\+?\\d{1,4}-?(?:\\d-?){1,15}$/;\n    const stripValue = this.#sanitizeVal(this.textField.value);\n\n    if (this.isRequired && !this.textField.value) {\n      return { valueMissing: true };\n    }\n\n    if (stripValue.length < this.minLength) {\n      return { tooShort: true };\n    }\n\n    if (stripValue.length > this.maxLength) {\n      return { tooLong: true };\n    }\n\n    if (\n      // has `strict-validation` and not properly parsed\n      (this.isStrictValidation && this.textField.value && !this.#isValidParsedValue()) ||\n      // if no `strict-validation` then conform with naive pattern\n      (!this.isStrictValidation && this.textField.value && !validPhonePattern.test(this.value))\n    ) {\n      return { patternMismatch: true };\n    }\n\n    return {};\n  }\n\n  setSelectionRange(...args) {\n    this.textField.setSelectionRange(...args);\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback(attrName, oldValue, newValue);\n\n    if (oldValue !== newValue && observedAttributes.includes(attrName)) {\n      const attr = mapAttrs[attrName] || attrName;\n      this.textField.setAttribute(attr, newValue);\n    }\n  }\n\n  #onInput(e) {\n    let sanitizedInput = this.#sanitizeInput(e.target.value);\n\n    if (this.isFormatValue && this.#canFormat(sanitizedInput)) {\n      sanitizedInput = this.#formatPhoneNumber(sanitizedInput);\n    }\n\n    e.target.value = sanitizedInput;\n  }\n\n  #nonParsedValue() {\n    if (!this.defaultDialCode) {\n      return this.textField.value;\n    }\n\n    const nationalNumber = this.#trimDuplicateCountryCode(this.textField.value);\n    const sanitizedVal = this.#sanitizeVal(nationalNumber);\n\n    return [this.defaultDialCode, sanitizedVal].join('-');\n  }\n\n  #parseWithCountryCode() {\n    if (this.defaultDialCode) {\n      return parsePhoneNumberFromString(\n        [this.defaultDialCode, this.#sanitizeVal(this.textField.value)].filter(Boolean).join('')\n      );\n    }\n\n    // if default-code or not parsed - try to extract country code from value\n    return parsePhoneNumberFromString(this.textField.value);\n  }\n\n  #sanitizeVal(val) {\n    return val.replace(/\\D/g, '');\n  }\n\n  #trimDuplicateCountryCode(val) {\n    if (this.textField.value?.[0] === '+') {\n      const dialCodePrefixPattern = new RegExp(`^\\\\${this.defaultDialCode}`);\n      const trimmed = val.replace(dialCodePrefixPattern, '');\n      return trimmed;\n    }\n    return val;\n  }\n\n  #isValidParsedValue() {\n    const parsed = parsePhoneNumberFromString(this.value);\n    return (\n      parsed && // parsed successfully (not undefined)\n      parsed.isValid?.() && // Parsed object is valid\n      parsed.country && // Parsed object with a country code\n      this.#isAllowedCountry(parsed.country) && // Parsed with allowed country code\n      (this.defaultCode ? this.defaultCode === parsed.country : true) // In case default country code is set validate parsed country matches it\n    );\n  }\n\n  #isAllowedCountry(countryCode) {\n    if (!this.restrictCountries) {\n      return true;\n    }\n\n    return this.restrictCountries.includes(countryCode);\n  }\n\n  #sanitizeInput(val) {\n    val = val\n      .replace(/^-+/, '') // dash as first char\n      .replace(/(?!^)\\+/g, '') // multiple plus symbols\n      .replace('--', '-') // consecutive dashes\n      .replace('+-', '+'); // dash following plus symbol\n\n    if (!this.allowAlphanumericInput) {\n      const telDigitsRegExp = /^[+\\d-\\(\\)]+$/;\n      val = val\n        .split('')\n        .filter((char) => telDigitsRegExp.test(char))\n        .join('');\n    }\n\n    return val;\n  }\n\n  #formatPhoneNumber(phoneNumber = '') {\n    // Get country code from `default-code or` from phone number\n    const countryCode = this.defaultCode || this.#getCountryCodeFromValue(phoneNumber);\n\n    // Skip formatting if no country code is available\n    if (!countryCode) {\n      return phoneNumber;\n    }\n\n    // Update AsYouType country code if needed\n    if (!this.#ayt || this.#ayt.country !== countryCode) {\n      this.#ayt = new AsYouType(countryCode);\n    }\n\n    // We need to reset AsYouType instance before setting new input\n    this.#ayt.reset();\n\n    // Set AsYouType input\n    const formattedVal = this.#ayt.input(phoneNumber) || phoneNumber;\n\n    return formattedVal;\n  }\n\n  #getCountryCodeFromValue(val) {\n    const parsed = parsePhoneNumberFromString(val);\n    return parsed?.country || '';\n  }\n\n  #canFormat(val) {\n    if (!matchingParenthesis(val)) return false;\n    return true;\n  }\n}\n\nexport default PhoneFieldInternal;\n","import '../../../descope-text-field';\n\nimport PhoneFieldInternalInputBox, { componentName } from './PhoneFieldInternalInputBox';\n\ncustomElements.define(componentName, PhoneFieldInternalInputBox);\n","import './descope-phone-input-box-internal';\nimport '../../descope-text-field';\n\nimport { componentName, PhoneFieldInputBoxClass } from './PhoneFieldInputBoxClass';\n\ncustomElements.define(componentName, PhoneFieldInputBoxClass);\n\nexport { PhoneFieldInputBoxClass, componentName };\n","import parsePhoneNumberFromString from 'libphonenumber-js/min';\nimport CountryCodes from './CountryCodes';\n\nexport const getCountryByCodeId = (countryCode) => {\n  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;\n};\n\nexport const matchingParenthesis = (val) => {\n  const openParenMatches = val.match(/\\(/g);\n  const closeParenMatches = val.match(/\\)/g);\n  return openParenMatches?.length === closeParenMatches?.length;\n};\n"],"names":["emailField","moduleId","emailFieldStyles","EmailField","is","constructor","super","this","_setType","pattern","ready","inputElement","autocapitalize","componentName","EmailFieldClass","mappings","textFieldMappings","inputType","inputName","autocompleteType","includeAttrs","proxyProps","useProxyTargets","superclass","init","baseElement","setAttribute","getAttribute","createExternalInput","slots","wrappedEleName","style","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","NUMERIC_RE","attrs","shared","email","phone","countryCode","inputBox","attrMap","PHONE_FIELD","BaseClass","createBaseClass","baseSelector","HybridFieldClass","componentNameOverride","hostWidth","selector","property","hostDirection","errorMessageIcon","PhoneFieldClass","PhoneFieldInputBoxClass","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","attachShadow","mode","innerHTML","isExternalInput","emailInputEle","emailInput","externalInput","phoneVariant","phoneInputBoxInput","phoneCountryCodeInput","defaultCode","firstItem","countryCodes","activeInputEle","activeInput","phoneNumberInputEle","value","val","handleActiveInput","initInputs","updateAttrs","toggleInputVisibility","waitForInputs","initInputEles","overrideEmailInputType","overrideEmailSetAttribute","Promise","resolve","check","setInterval","clearInterval","shadowRoot","querySelector","inputs","forEach","ele","addEventListener","onValueChange","bind","setTimeout","origEmailSetAttr","name","hasAttribute","mapAttrs","input","selectionStart","expectedActiveInput","test","replaceAll","isNumericValue","setActiveInput","setActiveInputValue","reportValidity","setActiveInputSelectionStart","focus","setSelectionRange","sanitizedVal","replace","localName","countryCodeItems","classList","add","remove","length","checkValidity","textVars","host","label","requiredIndicator","inputField","internalComponent","internalComponentAfter","phoneInput","errorMessage","helperText","placeholder","fontSize","fontFamily","hostMinWidth","inputHorizontalPadding","labelFontSize","labelFontWeight","labelTextColor","labelRequiredIndicator","errorMessageTextColor","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","inputOutlineStyle","inputOutlineColor","labelPosition","labelTopPosition","labelHorizontalPosition","inputTransformY","inputTransition","marginInlineStart","valueInputHeight","valueInputMarginBottom","CountryCodes","template","document","createElement","appendChild","content","cloneNode","observedAttributes","BaseInputClass","concat","textField","defaultDialCode","allowAlphanumericInput","minLength","parseInt","maxLength","restrictCountries","split","filter","Boolean","isFormatValue","isStrictValidation","parsedVal","country","countryCallingCode","nationalNumber","join","e","isTrusted","handleFocusEventsDispatching","getValidity","stripValue","isRequired","valueMissing","tooShort","tooLong","patternMismatch","args","attributeChangedCallback","attrName","oldValue","newValue","includes","attr","sanitizedInput","target","dialCodePrefixPattern","RegExp","parsed","isValid","telDigitsRegExp","char","phoneNumber","reset","getCountryByCodeId","find","c","code","dialCode","matchingParenthesis","openParenMatches","match","closeParenMatches"],"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([[3359,5166,7163,8884],{3393:(t,e,n)=>{n.d(e,{y:()=>a});var i=n(9696),r=n(79365),o=n(81365);const a=(...t)=>(0,i.Zz)(r.XX,r._$,r.yF,r.jd)((0,o.q)(...t))},74713:(t,e,n)=>{n.d(e,{T:()=>s,l:()=>d});var i=n(79365),r=n(81365),o=n(9696),a=n(97810),l=n(25964);const s=(0,a.xE)("loader-radial");class p extends((0,r.q)({componentName:s,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div></div>\n\t",(0,l.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 d=(0,o.Zz)((0,i.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:{}}}),i.VO,i.tQ)(p)},54249:(t,e,n)=>{n.r(e),n.d(e,{LoaderRadialClass:()=>i.l,componentName:()=>i.T});var i=n(74713);customElements.define(i.T,i.l)},47168:(t,e,n)=>{n.d(e,{A:()=>h,T:()=>p});var i=n(68049),r=n.n(i),o=n(3393),a=n(97810),l=n(18280),s=n(25964);const p=(0,a.xE)("passcode-internal"),d=["digits","loading"],c=["disabled","bordered","size","invalid","readonly","aria-labelledby"],u=(0,o.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),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,s.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=r()((e=>{this.parseInputValue(t,e),(0,l.Z)(t)}),20,{trailing:!0});t.addEventListener("input",(n=>{t.value=(0,l.zj)(t.value),t.value&&(0,l.Z)(t,t.value[0]),setTimeout((()=>{"deleteContentBackward"===n?.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,a.EA)(this,t,{includeAttrs:c}),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:()=>s,_B:()=>i,n6:()=>r,pW:()=>a,vz:()=>o,zj:()=>l});const i="--descope-input-mask-content",r="--descope-input-mask-display",o="--descope-input-mask-fallback",a=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},l=t=>t.replace(/\D/g,"")||"",s=(t,e)=>{e?(t.style.setProperty(i,`"${e}"`),t.style.setProperty(r,"flex")):(t.style.removeProperty(i),t.style.removeProperty(r))}},59053:(t,e,n)=>{n.r(e);var i=n(47168);customElements.define(i.T,i.A)},54690:(t,e,n)=>{n.r(e),n.d(e,{PasscodeClass:()=>C,componentName:()=>c});var i=n(79365),r=n(47168),o=n(79275),a=n(74713),l=n(9696),s=n(97810),p=n(73551),d=n(25964);const c=(0,s.xE)("passcode"),u=["digits"],{host:h,digitField:g,label:y,requiredIndicator:b,internalWrapper:f,focusedDigitField:m,errorMessage:v}={host:{selector:()=>":host"},focusedDigitField:{selector:()=>`${o.w.componentName}[focused="true"]`},digitField:{selector:()=>o.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=o.w.cssVarList,w=a.l.cssVarList,C=(0,l.Zz)((0,i.RF)({mappings:{fontSize:[{...g,property:x.fontSize},h],hostWidth:{property:"width"},hostDirection:{...h,property:"direction"},fontFamily:[h,{...y}],labelTextColor:[{...y,property:"color"},{...b,property:"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"},digitValueTextColor:{selector:o.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:{...f,property:"gap"},digitOutlineColor:{...g,property:x.inputOutlineColor},digitOutlineWidth:{...g,property:x.inputOutlineWidth},focusedDigitFieldOutlineColor:{...m,property:x.inputOutlineColor},overlayOpacity:{...f,property:"opacity"},spinnerSize:{selector:a.l.componentName,property:w.spinnerSize}}}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"]}),i.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,d.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      <${r.T}\n        bordered="true"\n        name="code"\n        tabindex="-1"\n        slot="input"\n        role="textbox"\n      ><slot></slot></${r.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(r.T),(0,s.EA)(this,this.inputElement,{includeAttrs:["digits","size","loading"]})}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"digits"===t&&(this.style["--passcode-digits-count"]=n)}}))((0,i.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,p.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,p.$J)("vaadin-text-field")}\n\t\t\t${(0,p.I4)("vaadin-text-field")}\n    \t`,excludeAttrsSync:["tabindex"],componentName:c}));n(21374),n(54249),n(59053),customElements.define(c,C)},79275:(t,e,n)=>{n.d(e,{T:()=>s,w:()=>d});var i=n(79365),r=n(6424),o=n(9696),a=n(97810),l=n(73551);const s=(0,a.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,o.Zz)((0,i.RF)({mappings:r.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],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"},n={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,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((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,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(d.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:s}))},21374:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),n(11284),n(37182),n(95260);var i=n(79275);customElements.define(i.T,i.w)},6424:(t,e,n)=>{n.d(e,{A:()=>v});const{host:i,label:r,placeholder:o,requiredIndicator:a,inputField:l,input:s,inputMask:p,helperText:d,errorMessage:c,disabledPlaceholder:u,inputDisabled:h,inputIcon:g,externalInput:y,externalInputDisabled:b,externalPlaceholder:f,externalDisabledPlaceholder:m}={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:[r,l,d,c],labelFontSize:{...r,property:"font-size"},labelFontWeight:{...r,property:"font-weight"},labelTextColor:[{...r,property:"color"},{...a,property:"color"},{...r,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:{...s,property:"direction"},inputBackgroundColor:[{...l,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"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...l,property:"color"},{...h,property:"-webkit-text-fill-color"},{...b,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...s,property:"caret-color"},{...y,property:"caret-color"}],labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},inputHeight:{...l,property:"height"},inputHorizontalPadding:[{...s,property:"padding-left"},{...s,property:"padding-right"},{...y,property:"padding-left"},{...y,property:"padding-right"}],inputOutlineColor:{...l,property:"outline-color"},inputOutlineStyle:{...l,property:"outline-style"},inputOutlineWidth:{...l,property:"outline-width"},inputOutlineOffset:{...l,property:"outline-offset"},textAlign:{},inputTextAlign:[{...s,property:"text-align"},{...y,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...f,property:"color"},{...o,property:"color"},{...u,property:"-webkit-text-fill-color"},{...m,property:"-webkit-text-fill-color"}],labelPosition:{...r,property:"position"},labelTopPosition:{...r,property:"top"},labelHorizontalPosition:[{...r,property:"left"},{...r,property:"right"}],inputTransformY:{...r,property:"transform"},inputTransition:{...r,property:"transition"},marginInlineStart:{...r,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...f,property:"opacity"}],inputVerticalAlignment:[{...l,property:"align-items"},{...y,property:"align-items"}],valueInputHeight:[{...s,property:"height"},{...y,property:"height"}],valueInputMarginBottom:[{...s,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"}}},73551:(t,e,n)=>{n.d(e,{$J:()=>u,I4:()=>a,Kl:()=>h,LJ:()=>c,Qv:()=>o,X6:()=>s,cy:()=>i,fu:()=>p,kG:()=>d,lS:()=>l,zm:()=>r});const i=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,r=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,a=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,l=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,s=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,c=(t,e)=>`\n    ${r(t)}\n    ${a(t)}\n    ${l(t)}\n    ${o(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${d(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,u=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '},18330:(t,e,n)=>{n.d(e,{f:()=>r});var i=n(44099);class r extends i.r{constructor(t,e){super(t,"input","input",{initializer:(t,n)=>{n.value&&(t.value=n.value),n.type&&t.setAttribute("type",n.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},37436:(t,e,n)=>{n.d(e,{a:()=>r});var i=n(44218);const r=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,n)=>{n.d(e,{A:()=>h}),n(86689);var i=n(13256),r=n(82901),o=n(90676),a=n(81488),l=n(86314),s=n(87550),p=n(18330),d=n(37436),c=n(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,s.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class h extends(u((0,s.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([[3359,5166,7163,8884],{3393:(t,e,n)=>{n.d(e,{y:()=>a});var i=n(9696),r=n(79365),o=n(81365);const a=(...t)=>(0,i.Zz)(r.XX,r._$,r.yF,r.jd)((0,o.q)(...t))},74713:(t,e,n)=>{n.d(e,{T:()=>s,l:()=>d});var i=n(79365),r=n(81365),o=n(9696),a=n(97810),l=n(25964);const s=(0,a.xE)("loader-radial");class p extends((0,r.q)({componentName:s,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div></div>\n\t",(0,l.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 d=(0,o.Zz)((0,i.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:{}}}),i.VO,i.tQ)(p)},54249:(t,e,n)=>{n.r(e),n.d(e,{LoaderRadialClass:()=>i.l,componentName:()=>i.T});var i=n(74713);customElements.define(i.T,i.l)},47168:(t,e,n)=>{n.d(e,{A:()=>h,T:()=>p});var i=n(68049),r=n.n(i),o=n(3393),a=n(97810),l=n(18280),s=n(25964);const p=(0,a.xE)("passcode-internal"),d=["digits","loading"],c=["disabled","bordered","size","invalid","readonly","aria-labelledby"],u=(0,o.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),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,s.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=r()((e=>{this.parseInputValue(t,e),(0,l.Z)(t)}),20,{trailing:!0});t.addEventListener("input",(n=>{t.value=(0,l.zj)(t.value),t.value&&(0,l.Z)(t,t.value[0]),setTimeout((()=>{"deleteContentBackward"===n?.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,a.EA)(this,t,{includeAttrs:c}),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:()=>s,_B:()=>i,n6:()=>r,pW:()=>a,vz:()=>o,zj:()=>l});const i="--descope-input-mask-content",r="--descope-input-mask-display",o="--descope-input-mask-fallback",a=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},l=t=>t.replace(/\D/g,"")||"",s=(t,e)=>{e?(t.style.setProperty(i,`"${e}"`),t.style.setProperty(r,"flex")):(t.style.removeProperty(i),t.style.removeProperty(r))}},59053:(t,e,n)=>{n.r(e);var i=n(47168);customElements.define(i.T,i.A)},54690:(t,e,n)=>{n.r(e),n.d(e,{PasscodeClass:()=>C,componentName:()=>c});var i=n(79365),r=n(47168),o=n(79275),a=n(74713),l=n(9696),s=n(97810),p=n(73551),d=n(25964);const c=(0,s.xE)("passcode"),u=["digits"],{host:h,digitField:g,label:y,requiredIndicator:b,internalWrapper:f,focusedDigitField:m,errorMessage:v}={host:{selector:()=>":host"},focusedDigitField:{selector:()=>`${o.w.componentName}[focused="true"]`},digitField:{selector:()=>o.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=o.w.cssVarList,w=a.l.cssVarList,C=(0,l.Zz)((0,i.RF)({mappings:{fontSize:[{...g,property:x.fontSize},h],hostWidth:{property:"width"},hostDirection:{...h,property:"direction"},fontFamily:[h,{...y}],labelTextColor:[{...y,property:"color"},{...b,property:"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"},digitValueTextColor:{selector:o.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:{...f,property:"gap"},digitOutlineColor:{...g,property:x.inputOutlineColor},digitOutlineWidth:{...g,property:x.inputOutlineWidth},focusedDigitFieldOutlineColor:{...m,property:x.inputOutlineColor},overlayOpacity:{...f,property:"opacity"},spinnerSize:{selector:a.l.componentName,property:w.spinnerSize}}}),i.VO,i.Yg,(0,i.OZ)({proxyProps:["value","selectionStart"]}),i.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,d.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      <${r.T}\n        bordered="true"\n        name="code"\n        tabindex="-1"\n        slot="input"\n        role="textbox"\n      ><slot></slot></${r.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(r.T),(0,s.EA)(this,this.inputElement,{includeAttrs:["digits","size","loading"]})}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"digits"===t&&(this.style["--passcode-digits-count"]=n)}}))((0,i.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,p.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,p.$J)("vaadin-text-field")}\n\t\t\t${(0,p.I4)("vaadin-text-field")}\n    \t`,excludeAttrsSync:["tabindex"],componentName:c}));n(21374),n(54249),n(59053),customElements.define(c,C)},79275:(t,e,n)=>{n.d(e,{T:()=>s,w:()=>d});var i=n(79365),r=n(6424),o=n(9696),a=n(97810),l=n(73551);const s=(0,a.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,o.Zz)((0,i.RF)({mappings:r.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],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"},n={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,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((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,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(d.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:s}))},21374:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),n(11284),n(37182),n(95260);var i=n(79275);customElements.define(i.T,i.w)},6424:(t,e,n)=>{n.d(e,{A:()=>v});const{host:i,label:r,placeholder:o,requiredIndicator:a,inputField:l,input:s,inputMask:p,helperText:d,errorMessage:c,disabledPlaceholder:u,inputDisabled:h,inputIcon:g,externalInput:y,externalInputDisabled:b,externalPlaceholder:f,externalDisabledPlaceholder:m}={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:[r,l,d,c],labelFontSize:{...r,property:"font-size"},labelFontWeight:{...r,property:"font-weight"},labelTextColor:[{...r,property:"color"},{...a,property:"color"},{...r,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:{...s,property:"direction"},inputBackgroundColor:[{...l,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"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...l,property:"color"},{...h,property:"-webkit-text-fill-color"},{...b,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...s,property:"caret-color"},{...y,property:"caret-color"}],labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},inputHeight:{...l,property:"height"},inputHorizontalPadding:[{...s,property:"padding-left"},{...s,property:"padding-right"},{...y,property:"padding-left"},{...y,property:"padding-right"}],inputOutlineColor:{...l,property:"outline-color"},inputOutlineStyle:{...l,property:"outline-style"},inputOutlineWidth:{...l,property:"outline-width"},inputOutlineOffset:{...l,property:"outline-offset"},textAlign:{},inputTextAlign:[{...s,property:"text-align"},{...y,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...f,property:"color"},{...o,property:"color"},{...u,property:"-webkit-text-fill-color"},{...m,property:"-webkit-text-fill-color"}],labelPosition:{...r,property:"position"},labelTopPosition:{...r,property:"top"},labelHorizontalPosition:[{...r,property:"left"},{...r,property:"right"}],inputTransformY:{...r,property:"transform"},inputTransition:{...r,property:"transition"},marginInlineStart:{...r,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...f,property:"opacity"}],inputVerticalAlignment:[{...l,property:"align-items"},{...y,property:"align-items"}],valueInputHeight:[{...s,property:"height"},{...y,property:"height"}],valueInputMarginBottom:[{...s,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"}}},73551:(t,e,n)=>{n.d(e,{$J:()=>u,I4:()=>a,Kl:()=>h,LJ:()=>c,Qv:()=>o,X6:()=>s,cy:()=>i,fu:()=>p,kG:()=>d,lS:()=>l,zm:()=>r});const i=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,r=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,a=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,l=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,s=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,c=(t,e)=>`\n    ${r(t)}\n    ${a(t)}\n    ${l(t)}\n    ${o(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${d(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,u=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '},18330:(t,e,n)=>{n.d(e,{f:()=>r});var i=n(44099);class r extends i.r{constructor(t,e){super(t,"input","input",{initializer:(t,n)=>{n.value&&(t.value=n.value),n.type&&t.setAttribute("type",n.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},37436:(t,e,n)=>{n.d(e,{a:()=>r});var i=n(44218);const r=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,n)=>{n.d(e,{A:()=>h}),n(86689);var i=n(13256),r=n(82901),o=n(90676),a=n(81488),l=n(86314),s=n(87550),p=n(18330),d=n(37436),c=n(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,s.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class h extends(u((0,s.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;