@descope/web-components-ui 2.3.1 → 2.3.3

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

@@ -16,5 +16,5 @@
     direction: rtl;
     text-align: left;
   }
-`;(0,r.SF)("vaadin-email-field",l,{moduleId:"vaadin-email-field-styles"});class p extends a.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,s.X)(p);var u=i(79365),d=i(6424),h=i(9696),c=i(97810),m=i(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","style"],componentName:g}));customElements.define(g,f)},44966(e,t,i){i.r(t),i.d(t,{HybridFieldClass:()=>f,componentName:()=>d}),i(54316),i(98136),i(30057);var n=i(79365),r=i(81365),o=i(9696),s=i(97810);const a=/[^\d\s+\-()]/;var l=i(81808),p=i(16306),u=i(25964);const d=(0,s.xE)("hybrid-field"),h={shared:["label","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:["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:["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:d,baseSelector:"div"}),f=(0,o.Zz)((0,n.RF)({componentNameOverride:(0,s.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}],errorMessageFontSize:[{selector:()=>l.NF.componentName,property:l.NF.cssVarList.errorMessageFontSize},{selector:()=>p.Ul.componentName,property:p.Ul.cssVarList.errorMessageFontSize}]}}),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,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,i)=>("type"!==t||"email"!==i||!this.emailInput.hasAttribute("focused"))&&e(t,i)}updateAttrs(){(0,s.EA)(this,this.emailInput,{includeAttrs:h.email,mapAttrs:c.email}),(0,s.EA)(this,this.phoneCountryCodeInput,{includeAttrs:h.phone.countryCode,mapAttrs:c.phone}),(0,s.EA)(this,this.phoneInputBoxInput,{includeAttrs:h.phone.inputBox,mapAttrs:c.phone}),this.inputs.forEach(e=>(0,s.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=>!!e&&!a.test(e))(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,t=e.type;return e.setAttribute("type","text"),setTimeout(()=>{e.setSelectionRange?.(e.value.length,e.value.length),e.setAttribute("type",t)}),this.activeInput.reportValidity()}checkValidity(){return this.activeInput.checkValidity()}});customElements.define(d,f)},16306(e,t,i){i.d(t,{TQ:()=>h,Ul:()=>A});var n=i(9035),r=i(97810),o=i(9696),s=i(79365),a=i(79275),l=i(51680),p=i(73551),u=i(25964);const d=a.w.cssVarList,h=(0,r.xE)("phone-input-box-field"),{host:c,label:m,inputElement:g,requiredIndicator:f,inputField:y,internalComponent:v,internalComponentAfter:b,phoneInput:I,errorMessage:x,helperText:C}={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)"}},A=(0,o.Zz)((0,s.RF)({mappings:{fontSize:[c,y,{selector:a.w.componentName,property:a.w.cssVarList.fontSize}],fontFamily:[m,x,C],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputHorizontalPadding:[{...I,property:"padding-left"},{...I,property:"padding-right"}],labelFontSize:{...m,property:"font-size"},labelFontWeight:{...m,property:"font-weight"},labelTextColor:[{...m,property:"color"},{...m,property:"-webkit-text-fill-color"},{...f,property:"color"}],labelRequiredIndicator:{...f,property:"content"},errorMessageTextColor:{...x,property:"color"},errorMessageIcon:{...x,property:"background-image"},errorMessageIconSize:{...x,property:"background-size"},errorMessageIconPadding:{...x,property:"padding-inline-start"},errorMessageIconRepeat:{...x,property:"background-repeat"},errorMessageIconPosition:{...x,property:"background-position"},errorMessageFontSize:{...x,property:"font-size"},inputValueTextColor:{...I,property:d.inputValueTextColor},inputPlaceholderTextColor:{...I,property:d.inputPlaceholderColor},inputBorderStyle:{...b,property:"border-style"},inputBorderWidth:{...b,property:"border-width"},inputBorderColor:{...b,property:"border-color"},inputBorderRadius:[{...v,property:"border-radius"},{...b,property:"border-radius"}],inputOutlineStyle:{...v,property:"outline-style"},inputOutlineColor:{...v,property:"outline-color"},inputOutlineWidth:{...v,property:"outline-width"},inputOutlineOffset:{...v,property:"outline-offset"},labelPosition:{...m,property:"position"},labelTopPosition:{...m,property:"top"},labelHorizontalPosition:[{...m,property:"left"},{...m,property:"right"}],inputTransformY:{...m,property:"transform"},inputTransition:{...m,property:"transition"},marginInlineStart:{...m,property:"margin-inline-start"},valueInputHeight:{...g,property:"height"},valueInputMarginBottom:{selector:a.w.componentName,property:d.valueInputMarginBottom}}}),s.VO,s.Yg,(0,s.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,u.Gh)(this,this.inputElement,{includeAttrs:["has-value"]}),(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,s.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)(A.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","style"],componentName:h}))},9035(e,t,i){i.d(t,{A:()=>c,T:()=>p});var n=i(25964),r=i(3393),o=i(97810),s=i(92259),a=i(10473),l=i(23530);const p=(0,o.xE)("phone-field-internal-input-box"),u=["disabled","size","readonly","phone-input-placeholder","name","maxlength","autocomplete","label-type"],d={"phone-input-placeholder":"placeholder"},h=(0,r.y)({componentName:p,baseSelector:"div"}),c=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],u)}#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,s.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]),(0,n.EA)(this.textField,this,{includeAttrs:["has-value"]})}getValidity(){const e=/^\+?\d{1,4}-?(?:\d-?){1,15}$/,t=this.#s(this.textField.value||"");if(this.isRequired&&!this.textField.value)return{valueMissing:!0};if(this.textField.value){if(t.length<this.minLength)return{tooShort:!0};if(this.isStrictValidation&&this.textField.value&&!this.#a()||!this.isStrictValidation&&this.textField.value&&!e.test(this.value))return{patternMismatch:!0}}return{}}setSelectionRange(...e){this.textField.setSelectionRange(...e)}attributeChangedCallback(e,t,i){if(super.attributeChangedCallback(e,t,i),t!==i&&u.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.#u(t)),e.target.value=t}#n(){if(!this.defaultDialCode)return this.textField.value;const e=this.#d(this.textField.value),t=this.#s(e);return[this.defaultDialCode,t].join("-")}#r(){return this.defaultDialCode?(0,a.l)([this.defaultDialCode,this.#s(this.textField.value)].filter(Boolean).join("")):(0,a.l)(this.textField.value)}#s(e){return e.replace(/\D/g,"")}#d(e){if("+"===this.textField.value?.[0]){const t=new RegExp(`^\\${this.defaultDialCode}`);return e.replace(t,"")}return e}#a(){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.length||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}#u(e=""){const t=this.defaultCode||this.#c(e);return t?(this.#i&&this.#i.country===t||(this.#i=new l.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,s.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}}}]);
+`;(0,r.SF)("vaadin-email-field",l,{moduleId:"vaadin-email-field-styles"});class p extends a.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,s.X)(p);var u=i(79365),d=i(6424),h=i(9696),c=i(97810),m=i(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","style"],componentName:g}));customElements.define(g,f)},44966(e,t,i){i.r(t),i.d(t,{HybridFieldClass:()=>f,componentName:()=>d}),i(54316),i(98136),i(30057);var n=i(79365),r=i(81365),o=i(9696),s=i(97810);const a=/[^\d\s+\-()]/;var l=i(81808),p=i(16306),u=i(25964);const d=(0,s.xE)("hybrid-field"),h={shared:["label","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:["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:["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:d,baseSelector:"div"}),f=(0,o.Zz)((0,n.RF)({componentNameOverride:(0,s.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}],errorMessageFontSize:[{selector:()=>l.NF.componentName,property:l.NF.cssVarList.errorMessageFontSize},{selector:()=>p.Ul.componentName,property:p.Ul.cssVarList.errorMessageFontSize}]}}),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,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),setTimeout(()=>{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,s.EA)(this,this.emailInput,{includeAttrs:h.email,mapAttrs:c.email}),(0,s.EA)(this,this.phoneCountryCodeInput,{includeAttrs:h.phone.countryCode,mapAttrs:c.phone}),(0,s.EA)(this,this.phoneInputBoxInput,{includeAttrs:h.phone.inputBox,mapAttrs:c.phone}),this.inputs.forEach(e=>(0,s.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=>!!e&&!a.test(e))(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,t=e.type;return e.setAttribute("type","text"),setTimeout(()=>{e.setSelectionRange?.(e.value.length,e.value.length),e.setAttribute("type",t)}),this.activeInput.reportValidity()}checkValidity(){return this.activeInput.checkValidity()}});customElements.define(d,f)},16306(e,t,i){i.d(t,{TQ:()=>h,Ul:()=>A});var n=i(9035),r=i(97810),o=i(9696),s=i(79365),a=i(79275),l=i(51680),p=i(73551),u=i(25964);const d=a.w.cssVarList,h=(0,r.xE)("phone-input-box-field"),{host:c,label:m,inputElement:g,requiredIndicator:f,inputField:y,internalComponent:v,internalComponentAfter:b,phoneInput:I,errorMessage:x,helperText:C}={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)"}},A=(0,o.Zz)((0,s.RF)({mappings:{fontSize:[c,y,{selector:a.w.componentName,property:a.w.cssVarList.fontSize}],fontFamily:[m,x,C],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputHorizontalPadding:[{...I,property:"padding-left"},{...I,property:"padding-right"}],labelFontSize:{...m,property:"font-size"},labelFontWeight:{...m,property:"font-weight"},labelTextColor:[{...m,property:"color"},{...m,property:"-webkit-text-fill-color"},{...f,property:"color"}],labelRequiredIndicator:{...f,property:"content"},errorMessageTextColor:{...x,property:"color"},errorMessageIcon:{...x,property:"background-image"},errorMessageIconSize:{...x,property:"background-size"},errorMessageIconPadding:{...x,property:"padding-inline-start"},errorMessageIconRepeat:{...x,property:"background-repeat"},errorMessageIconPosition:{...x,property:"background-position"},errorMessageFontSize:{...x,property:"font-size"},inputValueTextColor:{...I,property:d.inputValueTextColor},inputPlaceholderTextColor:{...I,property:d.inputPlaceholderColor},inputBorderStyle:{...b,property:"border-style"},inputBorderWidth:{...b,property:"border-width"},inputBorderColor:{...b,property:"border-color"},inputBorderRadius:[{...v,property:"border-radius"},{...b,property:"border-radius"}],inputOutlineStyle:{...v,property:"outline-style"},inputOutlineColor:{...v,property:"outline-color"},inputOutlineWidth:{...v,property:"outline-width"},inputOutlineOffset:{...v,property:"outline-offset"},labelPosition:{...m,property:"position"},labelTopPosition:{...m,property:"top"},labelHorizontalPosition:[{...m,property:"left"},{...m,property:"right"}],inputTransformY:{...m,property:"transform"},inputTransition:{...m,property:"transition"},marginInlineStart:{...m,property:"margin-inline-start"},valueInputHeight:{...g,property:"height"},valueInputMarginBottom:{selector:a.w.componentName,property:d.valueInputMarginBottom}}}),s.VO,s.Yg,(0,s.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,u.Gh)(this,this.inputElement,{includeAttrs:["has-value"]}),(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,s.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)(A.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","style"],componentName:h}))},9035(e,t,i){i.d(t,{A:()=>c,T:()=>p});var n=i(25964),r=i(3393),o=i(97810),s=i(92259),a=i(10473),l=i(23530);const p=(0,o.xE)("phone-field-internal-input-box"),u=["disabled","size","readonly","phone-input-placeholder","name","maxlength","autocomplete","label-type"],d={"phone-input-placeholder":"placeholder"},h=(0,r.y)({componentName:p,baseSelector:"div"}),c=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],u)}#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,s.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]),(0,n.EA)(this.textField,this,{includeAttrs:["has-value"]})}getValidity(){const e=/^\+?\d{1,4}-?(?:\d-?){1,15}$/,t=this.#s(this.textField.value||"");if(this.isRequired&&!this.textField.value)return{valueMissing:!0};if(this.textField.value){if(t.length<this.minLength)return{tooShort:!0};if(this.isStrictValidation&&this.textField.value&&!this.#a()||!this.isStrictValidation&&this.textField.value&&!e.test(this.value))return{patternMismatch:!0}}return{}}setSelectionRange(...e){this.textField.setSelectionRange(...e)}attributeChangedCallback(e,t,i){if(super.attributeChangedCallback(e,t,i),t!==i&&u.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.#u(t)),e.target.value=t}#n(){if(!this.defaultDialCode)return this.textField.value;const e=this.#d(this.textField.value),t=this.#s(e);return[this.defaultDialCode,t].join("-")}#r(){return this.defaultDialCode?(0,a.l)([this.defaultDialCode,this.#s(this.textField.value)].filter(Boolean).join("")):(0,a.l)(this.textField.value)}#s(e){return e.replace(/\D/g,"")}#d(e){if("+"===this.textField.value?.[0]){const t=new RegExp(`^\\${this.defaultDialCode}`);return e.replace(t,"")}return e}#a(){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.length||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}#u(e=""){const t=this.defaultCode||this.#c(e);return t?(this.#i&&this.#i.country===t||(this.#i=new l.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,s.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', 'style'],\n    componentName,\n  })\n);\n","import '@vaadin/email-field';\nimport { componentName, EmailFieldClass } from './EmailFieldClass';\n\ncustomElements.define(componentName, EmailFieldClass);\n\nexport { EmailFieldClass, componentName };\n","// Matches any character that is not a digit, whitespace, or phone formatting character (+, -, (, ))\nconst INVALID_PHONE_CHARS_RE = /[^\\d\\s+\\-()]/;\n\nexport const isNumericValue = (val) => !!val && !INVALID_PHONE_CHARS_RE.test(val);\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    'label',\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    '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      '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    const origInputType = ele.type;\n    ele.setAttribute('type', 'text');\n    setTimeout(() => {\n      ele.setSelectionRange?.(ele.value.length, ele.value.length);\n      ele.setAttribute('type', origInputType);\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      errorMessageFontSize: [\n        {\n          selector: () => PhoneFieldClass.componentName,\n          property: PhoneFieldClass.cssVarList.errorMessageFontSize,\n        },\n        {\n          selector: () => PhoneFieldInputBoxClass.componentName,\n          property: PhoneFieldInputBoxClass.cssVarList.errorMessageFontSize,\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';\nimport { syncAttrs } from '@descope-ui/common/components-helpers';\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      syncAttrs(this, this.inputElement, { includeAttrs: ['has-value'] });\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        { ...label, property: '-webkit-text-fill-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      errorMessageFontSize: { ...errorMessage, property: 'font-size' },\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', 'style'],\n    componentName,\n  })\n);\n\nexport default PhoneFieldInputBoxClass;\n","import { forwardAttrs } from '@descope-ui/common/components-helpers';\nimport { 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  'maxlength',\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    forwardAttrs(this.textField, this, { includeAttrs: ['has-value'] });\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 (this.textField.value) {\n      if (stripValue.length < this.minLength) {\n        return { tooShort: 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\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.length) {\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","INVALID_PHONE_CHARS_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","errorMessageFontSize","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","isNumericValue","setActiveInput","setActiveInputValue","reportValidity","setActiveInputSelectionStart","focus","setSelectionRange","sanitizedVal","replace","localName","countryCodeItems","classList","add","remove","origInputType","type","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","validPhonePattern","stripValue","isRequired","valueMissing","tooShort","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":""}
+{"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', 'style'],\n    componentName,\n  })\n);\n","import '@vaadin/email-field';\nimport { componentName, EmailFieldClass } from './EmailFieldClass';\n\ncustomElements.define(componentName, EmailFieldClass);\n\nexport { EmailFieldClass, componentName };\n","// Matches any character that is not a digit, whitespace, or phone formatting character (+, -, (, ))\nconst INVALID_PHONE_CHARS_RE = /[^\\d\\s+\\-()]/;\n\nexport const isNumericValue = (val) => !!val && !INVALID_PHONE_CHARS_RE.test(val);\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    'label',\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    '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      '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    setTimeout(() => {\n      this.activeInput.value = val;\n    });\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    const origInputType = ele.type;\n    ele.setAttribute('type', 'text');\n    setTimeout(() => {\n      ele.setSelectionRange?.(ele.value.length, ele.value.length);\n      ele.setAttribute('type', origInputType);\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      errorMessageFontSize: [\n        {\n          selector: () => PhoneFieldClass.componentName,\n          property: PhoneFieldClass.cssVarList.errorMessageFontSize,\n        },\n        {\n          selector: () => PhoneFieldInputBoxClass.componentName,\n          property: PhoneFieldInputBoxClass.cssVarList.errorMessageFontSize,\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';\nimport { syncAttrs } from '@descope-ui/common/components-helpers';\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      syncAttrs(this, this.inputElement, { includeAttrs: ['has-value'] });\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        { ...label, property: '-webkit-text-fill-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      errorMessageFontSize: { ...errorMessage, property: 'font-size' },\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', 'style'],\n    componentName,\n  })\n);\n\nexport default PhoneFieldInputBoxClass;\n","import { forwardAttrs } from '@descope-ui/common/components-helpers';\nimport { 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  'maxlength',\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    forwardAttrs(this.textField, this, { includeAttrs: ['has-value'] });\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 (this.textField.value) {\n      if (stripValue.length < this.minLength) {\n        return { tooShort: 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\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.length) {\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","INVALID_PHONE_CHARS_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","errorMessageFontSize","attachShadow","mode","innerHTML","isExternalInput","emailInputEle","emailInput","externalInput","phoneVariant","phoneInputBoxInput","phoneCountryCodeInput","defaultCode","firstItem","countryCodes","activeInputEle","activeInput","phoneNumberInputEle","value","val","handleActiveInput","setTimeout","initInputs","updateAttrs","toggleInputVisibility","waitForInputs","initInputEles","overrideEmailInputType","overrideEmailSetAttribute","Promise","resolve","check","setInterval","clearInterval","shadowRoot","querySelector","inputs","forEach","ele","addEventListener","onValueChange","bind","origEmailSetAttr","name","hasAttribute","mapAttrs","input","selectionStart","expectedActiveInput","test","isNumericValue","setActiveInput","setActiveInputValue","reportValidity","setActiveInputSelectionStart","focus","setSelectionRange","sanitizedVal","replace","localName","countryCodeItems","classList","add","remove","origInputType","type","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","validPhonePattern","stripValue","isRequired","valueMissing","tooShort","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/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878],{79275(t,e,i){i.d(e,{T:()=>r,w:()=>u});var n=i(79365),s=i(6424),o=i(9696),a=i(97810),l=i(73551);const r=(0,a.xE)("text-field"),c=["type","label-type","copy-to-clipboard"],u=(0,o.Zz)((0,n.RF)({mappings:s.A}),n.VO,(0,n.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),n.tQ,t=>class extends t{static get observedAttributes(){return c.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"},i={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,i),setTimeout(()=>{Object.assign(this.icon,e)},5e3)})}onLabelClick(){this.focus()}attributeChangedCallback(t,e,i){super.attributeChangeCallback?.(t,e,i),"type"===t&&this.baseElement._setType(i),e!==i&&("label-type"===t?"floating"===i?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===i))}})((0,n.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(${u.cssVarList.inputOutlineWidth}) + var(${u.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)(u.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",u.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:r}))},21374(t,e,i){i.r(e),i.d(e,{TextFieldClass:()=>n.w,componentName:()=>n.T}),i(11284),i(37182),i(95260);var n=i(79275);customElements.define(n.T,n.w)},84015(t,e,i){i.d(e,{A:()=>v,T:()=>c});var n=i(3393),s=i(97810),o=i(51680),a=i(49157),l=i(10473),r=i(23530);const c=(0,s.xE)("phone-field-internal"),u=["disabled","size","bordered","readonly"],d=["country-input-placeholder","default-code","restrict-countries"],h=["phone-input-placeholder","maxlength","autocomplete","name"],p=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},m=[].concat(u,d,h,p),y=(0,n.y)({componentName:c,baseSelector:"div"}),v=class extends y{static get observedAttributes(){return[].concat(y.observedAttributes||[],m)}#t;constructor(){super(),this.innerHTML=`\n    <div class="wrapper">\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${o.A.map(t=>(0,a.$B)(t)).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,s.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,s.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){return this.comboBox.value&&this.textField.value?this.allowAlphanumericInput?`${this.comboBox.value}-${this.textField.value}`:`${this.comboBox.value}-${this.textField.value.replace(/\D+/g,"")}`:""}set value(t){const e=t.replace(new RegExp(`^\\+?${this.comboBox.value.replace("+","")}-?`),"");this.isFormatValue?this.textField.value=this.#e(e):this.textField.value=e}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.inputs[1].focus()}),super.init?.(),this.#i()}getValidity(){const t=this.comboBox.value,e=this.textField.value,i=!t||!e,n=e&&e.length>=this.minLength;if(this.isRequired&&i)return{valueMissing:!0};if(this.value){if(!n)return{tooShort:!0};if(this.isStrictValidation&&!this.#n())return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,i){if(super.attributeChangedCallback(t,e,i),e!==i){if("default-code"===t&&i)this.#s(i);else if(m.includes(t)){const e=b[t]||t;u.includes(t)?i?this.inputs.forEach(t=>t.setAttribute(e,i)):this.inputs.forEach(t=>t.removeAttribute(e)):d.includes(t)?this.comboBox.setAttribute(e,i):h.includes(t)&&this.textField.setAttribute(e,i)}p.includes(t)&&this.#o(t,i),"restrict-countries"===t&&this.#a(this.restrictCountries)}}#i(){this.textField.addEventListener("input",t=>{if(!this.allowAlphanumericInput){const e=/^\d$/,i=t.target.value.split("").filter(t=>e.test(t)).join("");t.target.value=i}}),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}#e(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new r.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#n(){const t=(0,l.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#l(t.country))}#l(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#r(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#a(t){const e=t.length?o.A.filter(e=>t.includes(e.code)):o.A;this.querySelector("descope-combo-box").innerHTML=e.map(t=>(0,a.$B)(t)).join("")}#s(t){if(!this.comboBox.value){const e=this.#r(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#o(t,e){const i=b[t]||t;"label-type"===t?this.#c(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(i,e):"label"===t&&this.textField.setAttribute(i,e))}#c(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach(t=>t.removeAttribute("label"))}}},92132(t,e,i){i.r(e),i(27092),i(21374);var n=i(84015);customElements.define(n.T,n.A)},49157(t,e,i){i.d(e,{$B:()=>n});const n=({code:t,dialCode:e,name:i})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${i}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${i}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878],{79275(t,e,i){i.d(e,{T:()=>r,w:()=>u});var s=i(79365),n=i(6424),o=i(9696),l=i(97810),a=i(73551);const r=(0,l.xE)("text-field"),c=["type","label-type","copy-to-clipboard"],u=(0,o.Zz)((0,s.RF)({mappings:n.A}),s.VO,(0,s.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),s.tQ,t=>class extends t{static get observedAttributes(){return c.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"},i={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,i),setTimeout(()=>{Object.assign(this.icon,e)},5e3)})}onLabelClick(){this.focus()}attributeChangedCallback(t,e,i){super.attributeChangeCallback?.(t,e,i),"type"===t&&this.baseElement._setType(i),e!==i&&("label-type"===t?"floating"===i?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===i))}})((0,s.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(${u.cssVarList.inputOutlineWidth}) + var(${u.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(u.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",u.cssVarList)}\n      ${(0,a.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:r}))},21374(t,e,i){i.r(e),i.d(e,{TextFieldClass:()=>s.w,componentName:()=>s.T}),i(11284),i(37182),i(95260);var s=i(79275);customElements.define(s.T,s.w)},84015(t,e,i){i.d(e,{A:()=>g,T:()=>c});var s=i(3393),n=i(97810),o=i(51680),l=i(49157),a=i(10473),r=i(23530);const c=(0,n.xE)("phone-field-internal"),u=["disabled","size","bordered","readonly"],d=["country-input-placeholder","default-code","restrict-countries"],h=["phone-input-placeholder","maxlength","autocomplete","name"],p=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},m=[].concat(u,d,h,p),y=(0,s.y)({componentName:c,baseSelector:"div"}),g=class extends y{static get observedAttributes(){return[].concat(y.observedAttributes||[],m)}#t;constructor(){super(),this.innerHTML=`\n    <div class="wrapper">\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${o.A.map(t=>(0,l.$B)(t)).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,n.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,n.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){return this.comboBox.value&&this.textField.value?this.allowAlphanumericInput?`${this.comboBox.value}-${this.textField.value}`:`${this.comboBox.value}-${this.textField.value.replace(/\D+/g,"")}`:""}#e(){this.comboBox.selectedItem=void 0,this.textField.value=""}set value(t){if(!t||!/\d/.test(t))return void this.#e();t.startsWith("+")||(t=`+${t}`);let e="",i="";if(t.includes("-")){const s=t.indexOf("-");e=t.slice(0,s),i=t.slice(s+1).replace(/\D+/g,"")}else{const s=(0,a.l)(t);s?.countryCallingCode&&(e=`+${s.countryCallingCode}`,i=t.slice(e.length).replace(/\D+/g,""))}if(!/\d/.test(e))return void this.#e();const s=o.A.find(t=>t.dialCode===e)?.code;s&&s!==this.selectedCountryCode&&(this.comboBox.selectedItem=this.#i(s)),this.isFormatValue?this.textField.value=this.#s(i):this.textField.value=i}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.inputs[1].focus()}),super.init?.(),this.#n()}getValidity(){const t=this.comboBox.value,e=this.textField.value,i=!t||!e,s=e&&e.length>=this.minLength;if(this.isRequired&&i)return{valueMissing:!0};if(this.value){if(!s)return{tooShort:!0};if(this.isStrictValidation&&!this.#o())return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,i){if(super.attributeChangedCallback(t,e,i),e!==i){if("default-code"===t&&i&&!this.selectedCountryCode)this.#l(i);else if(m.includes(t)){const e=b[t]||t;u.includes(t)?i?this.inputs.forEach(t=>t.setAttribute(e,i)):this.inputs.forEach(t=>t.removeAttribute(e)):d.includes(t)?this.comboBox.setAttribute(e,i):h.includes(t)&&this.textField.setAttribute(e,i)}p.includes(t)&&this.#a(t,i),"restrict-countries"===t&&this.#r(this.restrictCountries)}}#n(){this.textField.addEventListener("input",t=>{if(!this.allowAlphanumericInput){const e=/^\d$/,i=t.target.value.split("").filter(t=>e.test(t)).join("");t.target.value=i}}),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}#s(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new r.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#o(){const t=(0,a.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#c(t.country))}#c(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#i(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#r(t){const e=t.length?o.A.filter(e=>t.includes(e.code)):o.A;this.querySelector("descope-combo-box").innerHTML=e.map(t=>(0,l.$B)(t)).join("")}#l(t){if(!this.comboBox.value){const e=this.#i(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#a(t,e){const i=b[t]||t;"label-type"===t?this.#u(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(i,e):"label"===t&&this.textField.setAttribute(i,e))}#u(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach(t=>t.removeAttribute("label"))}}},92132(t,e,i){i.r(e),i(27092),i(21374);var s=i(84015);customElements.define(s.T,s.A)},49157(t,e,i){i.d(e,{$B:()=>s});const s=({code:t,dialCode:e,name:i})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${i}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${i}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`}}]);
 //# sourceMappingURL=phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js.map

package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js"],"sourcesContent":["import {\n  createStyleMixin,\n  draggableMixin,\n  createProxy,\n  proxyInputMixin,\n  componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './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('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n  class TextFieldClass extends superclass {\n    static get observedAttributes() {\n      return observedAttrs.concat(superclass.observedAttributes || []);\n    }\n\n    icon;\n\n    init() {\n      super.init?.();\n    }\n\n    renderCopyToClipboard(shouldRender) {\n      if (!shouldRender) {\n        this.icon?.remove();\n        return;\n      }\n\n      const iconInitConfig = {\n        icon: 'vaadin:copy-o',\n        title: 'Copy',\n        style: 'cursor: pointer',\n      };\n\n      const iconCopiedConfig = {\n        icon: 'vaadin:check-circle-o',\n        title: 'Copied',\n        style: 'cursor: initial',\n      };\n\n      this.icon = Object.assign(document.createElement('vaadin-icon'), {\n        slot: 'suffix',\n        ...iconInitConfig,\n      });\n\n      this.baseElement.appendChild(this.icon);\n      this.icon.addEventListener('click', () => {\n        navigator.clipboard.writeText(this.value);\n        Object.assign(this.icon, iconCopiedConfig);\n\n        // we want the icon to go back to the initial state after 5 seconds\n        setTimeout(() => {\n          Object.assign(this.icon, iconInitConfig);\n        }, 5000);\n      });\n    }\n\n    onLabelClick() {\n      this.focus();\n    }\n\n    attributeChangedCallback(attrName, oldVal, newVal) {\n      super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n      // Vaadin doesn't allow to change the input type attribute.\n      // We need the ability to do that, so we're overriding their\n      // behavior with their private API.\n      // When receiving a `type` attribute, we use their private API\n      // to set it on the input.\n      if (attrName === 'type') {\n        this.baseElement._setType(newVal);\n      }\n\n      if (oldVal !== newVal) {\n        if (attrName === 'label-type') {\n          if (newVal === 'floating') {\n            this.addEventListener('click', this.onLabelClick);\n          } else {\n            this.removeEventListener('click', this.onLabelClick);\n          }\n        } else if (attrName === 'copy-to-clipboard') {\n          this.renderCopyToClipboard(newVal === 'true');\n        }\n      }\n    }\n  };\n\nexport const TextFieldClass = compose(\n  createStyleMixin({\n    mappings: textFieldMappings,\n  }),\n  draggableMixin,\n  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n  componentNameValidationMixin,\n  customMixin\n)(\n  createProxy({\n    slots: ['prefix', 'suffix'],\n    wrappedEleName: 'vaadin-text-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(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n          TextFieldClass.cssVarList.inputOutlineOffset\n        }));\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      ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n      ${inputFloatingLabelStyle()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,\n    excludeAttrsSync: ['tabindex', 'style'],\n    componentName,\n  })\n);\n","import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n  'country-input-label': 'label',\n  'country-input-placeholder': 'placeholder',\n  'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n  static get observedAttributes() {\n    return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);\n  }\n\n  #ayt;\n\n  constructor() {\n    super();\n\n    this.innerHTML = `\n    <div class=\"wrapper\">\n      <descope-combo-box\n        item-label-path=\"data-name\"\n        item-value-path=\"data-id\"\n      >\n      ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n      </descope-combo-box>\n      <div class=\"separator\"></div>\n      <descope-text-field type=\"tel\"></descope-text-field>\n    </div>\n    `;\n\n    this.comboBox = this.querySelector('descope-combo-box');\n    this.textField = this.querySelector('descope-text-field');\n\n    this.inputs = [this.comboBox, this.textField];\n\n    forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n    forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n    // override combo box setter to display dialCode value in input\n    this.comboBox.customValueTransformFn = (val) => {\n      const [, dialCode] = val?.split?.(' ') || [];\n      return dialCode;\n    };\n  }\n\n  // exposed from main component\n  get countryCodeInputData() {\n    return this.comboBox.items;\n  }\n\n  // exposed from main component\n  get countryCodeValue() {\n    return this.comboBox.shadowRoot.querySelector('input').value;\n  }\n\n  // exposed from main component\n  get phoneNumberInputEle() {\n    return this.textField.shadowRoot.querySelector('input');\n  }\n\n  get allowAlphanumericInput() {\n    return this.getAttribute('allow-alphanumeric-input') === 'true';\n  }\n\n  get defaultCode() {\n    return this.getAttribute('default-code');\n  }\n\n  get selectionStart() {\n    return this.textField.selectionStart;\n  }\n\n  get minLength() {\n    return parseInt(this.getAttribute('minlength'), 10) || 0;\n  }\n\n  get selectedCountryCode() {\n    return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n  }\n\n  get restrictCountries() {\n    const attr = this.getAttribute('restrict-countries');\n    return attr?.split(',').filter(Boolean) || [];\n  }\n\n  get isFormatValue() {\n    return this.getAttribute('format-value') === 'true';\n  }\n\n  // `strict validation` enforces value parsing with libphonenumber-js\n  get isStrictValidation() {\n    return this.getAttribute('strict-validation') === 'true';\n  }\n\n  get value() {\n    if (!this.comboBox.value || !this.textField.value) {\n      return '';\n    }\n\n    if (this.allowAlphanumericInput) {\n      return `${this.comboBox.value}-${this.textField.value}`;\n    }\n\n    return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n  }\n\n  set value(val) {\n    const nationalNumber = val.replace(\n      new RegExp(`^\\\\+?${this.comboBox.value.replace('+', '')}-?`),\n      ''\n    );\n\n    if (this.isFormatValue) {\n      this.textField.value = this.#formatNationalNumber(nationalNumber);\n    } else {\n      this.textField.value = nationalNumber;\n    }\n  }\n\n  init() {\n    this.addEventListener('focus', (e) => {\n      // we want to ignore focus events we are dispatching\n      if (e.isTrusted) this.inputs[1].focus();\n    });\n\n    super.init?.();\n\n    this.#initInputs();\n  }\n\n  getValidity() {\n    const countryCode = this.comboBox.value;\n    const nationalNumer = this.textField.value;\n\n    const isEmpty = !countryCode || !nationalNumer;\n    const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n    if (this.isRequired && isEmpty) {\n      return { valueMissing: true };\n    }\n\n    if (this.value) {\n      if (!isValidLength) {\n        return { tooShort: true };\n      }\n\n      if (this.isStrictValidation && !this.#isValidParsedValue()) {\n        return { patternMismatch: true };\n      }\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) {\n      if (attrName === 'default-code' && newValue) {\n        this.#handleDefaultCountryCode(newValue);\n      } else if (inputRelatedAttrs.includes(attrName)) {\n        const attr = mapAttrs[attrName] || attrName;\n\n        if (commonAttrs.includes(attrName)) {\n          if (!newValue) {\n            this.inputs.forEach((input) => input.removeAttribute(attr));\n          } else {\n            this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n          }\n        } else if (countryAttrs.includes(attrName)) {\n          this.comboBox.setAttribute(attr, newValue);\n        } else if (phoneAttrs.includes(attrName)) {\n          this.textField.setAttribute(attr, newValue);\n        }\n      }\n\n      if (labelTypeAttrs.includes(attrName)) {\n        this.#handleLabelTypeAttrs(attrName, newValue);\n      }\n\n      if (attrName === 'restrict-countries') {\n        this.#updateComboBoxItems(this.restrictCountries);\n      }\n    }\n  }\n\n  #initInputs() {\n    // Sanitize phone input value to filter everything but digits\n    this.textField.addEventListener('input', (e) => {\n      if (!this.allowAlphanumericInput) {\n        const telDigitsRegExp = /^\\d$/;\n        const sanitizedInput = e.target.value\n          .split('')\n          .filter((char) => telDigitsRegExp.test(char))\n          .join('');\n        e.target.value = sanitizedInput;\n      }\n    });\n\n    this.handleFocusEventsDispatching(this.inputs);\n    this.handleInputEventDispatching();\n  }\n\n  #formatNationalNumber(nationalNumber = '') {\n    // re-initialize AsYouType if country code is outdated\n    if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {\n      this.#ayt = new AsYouType(this.selectedCountryCode);\n    }\n\n    // reset previous AsYouType input\n    this.#ayt.reset();\n\n    const formattedVal = this.#ayt.input(nationalNumber);\n    return formattedVal || nationalNumber;\n  }\n\n  #isValidParsedValue() {\n    const parsed = parsePhoneNumberFromString(this.value);\n\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    );\n  }\n\n  #isAllowedCountry(countryCode) {\n    if (!this.restrictCountries.length) {\n      return true;\n    }\n\n    return this.restrictCountries.includes(countryCode);\n  }\n\n  // return country item by country code `data-country-code` (e.g. `US`)\n  #getCountryByCodeId(countryCode) {\n    return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n  }\n\n  #updateComboBoxItems(restrictCountries) {\n    const items = restrictCountries.length\n      ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n      : CountryCodes;\n\n    this.querySelector('descope-combo-box').innerHTML = items\n      .map((item) => comboBoxItem(item))\n      .join('');\n  }\n\n  #handleDefaultCountryCode(countryCode) {\n    if (!this.comboBox.value) {\n      const countryCodeItem = this.#getCountryByCodeId(countryCode);\n      // When replacing the input component (inserting internal component into text-field) -\n      // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n      // after the reset.\n      if (countryCodeItem) {\n        setTimeout(() => {\n          this.comboBox.selectedItem = countryCodeItem;\n        });\n      }\n    }\n  }\n\n  #handleLabelTypeAttrs(attrName, newValue) {\n    // set or remove label attributes from inner text/combo components on `label-type` change\n    const attr = mapAttrs[attrName] || attrName;\n\n    if (attrName === 'label-type') {\n      this.#handleLabelTypeChange(newValue);\n    }\n    // on inner components label attr change - set label attributes for text/combo components\n    // only if label-type is `floating`\n    else if (this.getAttribute('label-type') === 'floating') {\n      if (attrName === 'country-input-label') {\n        this.comboBox.setAttribute(attr, newValue);\n      } else if (attrName === 'label') {\n        this.textField.setAttribute(attr, newValue);\n      }\n    }\n  }\n\n  #handleLabelTypeChange(newValue) {\n    if (newValue === 'floating') {\n      // on change to `floating` label - set inner components `label` and `placeholder`\n      this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');\n      this.comboBox.setAttribute(\n        'placeholder',\n        this.getAttribute('country-input-placeholder') || ''\n      );\n      this.textField.setAttribute('label', this.getAttribute('label') || '');\n      this.textField.setAttribute(\n        'placeholder',\n        this.getAttribute('phone-input-placeholder') || ''\n      );\n    } else {\n      // for other cases - reset inner components label-type and labels\n      this.inputs.forEach((input) => input.removeAttribute('label'));\n    }\n  }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n  `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n  const value = val || '';\n  let countryCode = '';\n  let phoneNumber = '';\n\n  // Attempt to parse the value using libphonenumber-js\n  const parsed = parsePhoneNumberFromString(value);\n\n  if (parsed) {\n    if (parsed.countryCallingCode) {\n      countryCode = `+${parsed.countryCallingCode}`;\n    }\n\n    if (parsed.nationalNumber) {\n      phoneNumber = parsed.nationalNumber;\n    }\n  } else {\n    // Fallback: assume a dash separates country code and phone number\n    const [country, phone] = value.split('-');\n    countryCode = country || '';\n    phoneNumber = phone || '';\n  }\n\n  return [countryCode, phoneNumber];\n};\n"],"names":["componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","innerHTML","map","item","join","comboBox","querySelector","textField","inputs","includeAttrs","customValueTransformFn","val","dialCode","split","countryCodeInputData","items","countryCodeValue","shadowRoot","phoneNumberInputEle","allowAlphanumericInput","getAttribute","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","replace","nationalNumber","RegExp","e","isTrusted","getValidity","countryCode","nationalNumer","isEmpty","isValidLength","length","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","country","reset","parsed","isValid","find","c","code","countryCodeItem","comboBoxItem","name","toLowerCase","getCountryFlag"],"sourceRoot":""}
+{"version":3,"file":"phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js","mappings":"wNAiBO,MAAMA,GAAgB,QAAiB,cAExCC,EAAgB,CAAC,OAAQ,aAAc,qBA+EhCC,GAAiB,SAC5B,QAAiB,CACfC,SAAU,MAEZ,MACA,QAAgB,CAAEC,WAAY,CAAC,QAAS,kBAAmBC,iBAAiB,IAC5E,KAnFmBC,GACnB,cAA6BA,EAC3B,6BAAWC,GACT,OAAON,EAAcO,OAAOF,EAAWC,oBAAsB,GAC/D,CAEAE,KAEA,IAAAC,GACEC,MAAMD,QACR,CAEA,qBAAAE,CAAsBC,GACpB,IAAKA,EAEH,YADAC,KAAKL,MAAMM,SAIb,MAAMC,EAAiB,CACrBP,KAAM,gBACNQ,MAAO,OACPC,MAAO,mBAGHC,EAAmB,CACvBV,KAAM,wBACNQ,MAAO,SACPC,MAAO,mBAGTJ,KAAKL,KAAOW,OAAOC,OAAOC,SAASC,cAAc,eAAgB,CAC/DC,KAAM,YACHR,IAGLF,KAAKW,YAAYC,YAAYZ,KAAKL,MAClCK,KAAKL,KAAKkB,iBAAiB,QAAS,KAClCC,UAAUC,UAAUC,UAAUhB,KAAKiB,OACnCX,OAAOC,OAAOP,KAAKL,KAAMU,GAGzBa,WAAW,KACTZ,OAAOC,OAAOP,KAAKL,KAAMO,IACxB,MAEP,CAEA,YAAAiB,GACEnB,KAAKoB,OACP,CAEA,wBAAAC,CAAyBC,EAAUC,EAAQC,GACzC3B,MAAM4B,0BAA0BH,EAAUC,EAAQC,GAOjC,SAAbF,GACFtB,KAAKW,YAAYe,SAASF,GAGxBD,IAAWC,IACI,eAAbF,EACa,aAAXE,EACFxB,KAAKa,iBAAiB,QAASb,KAAKmB,cAEpCnB,KAAK2B,oBAAoB,QAAS3B,KAAKmB,cAEnB,sBAAbG,GACTtB,KAAKF,sBAAiC,SAAX0B,GAGjC,GAG0B,EAS5B,QAAY,CACVI,MAAO,CAAC,SAAU,UAClBC,eAAgB,oBAChBzB,MAAO,IAAM,wGAIOhB,EAAe0C,WAAWC,4BACxC3C,EAAe0C,WAAWE,+cAc5B,QAAwB,gCAC3B,QAAuB5C,EAAe0C,uBACtC,QAAoB,oBAAqB1C,EAAe0C,uBACrD,iGAMJG,iBAAkB,CAAC,WAAY,SAC/B/C,kB,sHCrIJgD,eAAeC,OAAO,IAAe,I,6GCA9B,MAAMjD,GAAgB,QAAiB,wBAExCkD,EAAc,CAAC,WAAY,OAAQ,WAAY,YAC/CC,EAAe,CAAC,4BAA6B,eAAgB,sBAC7DC,EAAa,CAAC,0BAA2B,YAAa,eAAgB,QACtEC,EAAiB,CAAC,aAAc,sBAAuB,SACvDC,EAAW,CACf,sBAAuB,QACvB,4BAA6B,cAC7B,0BAA2B,eAGvBC,EAAoB,GAAG/C,OAAO0C,EAAaC,EAAcC,EAAYC,GAErEG,GAAiB,OAAqB,CAAExD,gBAAeyD,aAAc,QAyV3E,EAvVA,cAAiCD,EAC/B,6BAAWjD,GACT,MAAO,GAAGC,OAAOgD,EAAejD,oBAAsB,GAAIgD,EAC5D,CAEA,GAEA,WAAAG,GACE/C,QAEAG,KAAK6C,UAAY,iJAMb,IAAaC,IAAKC,IAAS,QAAaA,IAAOC,KAAK,qJAOxDhD,KAAKiD,SAAWjD,KAAKkD,cAAc,qBACnClD,KAAKmD,UAAYnD,KAAKkD,cAAc,sBAEpClD,KAAKoD,OAAS,CAACpD,KAAKiD,SAAUjD,KAAKmD,YAEnC,QAAanD,KAAMA,KAAKiD,SAAU,CAAEI,aAAc,CAAC,iBACnD,QAAarD,KAAMA,KAAKmD,UAAW,CAAEE,aAAc,CAAC,aAAc,cAGlErD,KAAKiD,SAASK,uBAA0BC,IACtC,MAAO,CAAEC,GAAYD,GAAKE,QAAQ,MAAQ,GAC1C,OAAOD,EAEX,CAGA,wBAAIE,GACF,OAAO1D,KAAKiD,SAASU,KACvB,CAGA,oBAAIC,GACF,OAAO5D,KAAKiD,SAASY,WAAWX,cAAc,SAASjC,KACzD,CAGA,uBAAI6C,GACF,OAAO9D,KAAKmD,UAAUU,WAAWX,cAAc,QACjD,CAEA,0BAAIa,GACF,MAAyD,SAAlD/D,KAAKgE,aAAa,2BAC3B,CAEA,eAAIC,GACF,OAAOjE,KAAKgE,aAAa,eAC3B,CAEA,kBAAIE,GACF,OAAOlE,KAAKmD,UAAUe,cACxB,CAEA,aAAIC,GACF,OAAOC,SAASpE,KAAKgE,aAAa,aAAc,KAAO,CACzD,CAEA,uBAAIK,GACF,OAAOrE,KAAKiD,UAAUqB,cAAcN,aAAa,oBACnD,CAEA,qBAAIO,GACF,MAAMC,EAAOxE,KAAKgE,aAAa,sBAC/B,OAAOQ,GAAMf,MAAM,KAAKgB,OAAOC,UAAY,EAC7C,CAEA,iBAAIC,GACF,MAA6C,SAAtC3E,KAAKgE,aAAa,eAC3B,CAGA,sBAAIY,GACF,MAAkD,SAA3C5E,KAAKgE,aAAa,oBAC3B,CAEA,SAAI/C,GACF,OAAKjB,KAAKiD,SAAShC,OAAUjB,KAAKmD,UAAUlC,MAIxCjB,KAAK+D,uBACA,GAAG/D,KAAKiD,SAAShC,SAASjB,KAAKmD,UAAUlC,QAG3C,GAAGjB,KAAKiD,SAAShC,SAASjB,KAAKmD,UAAUlC,MAAM4D,QAAQ,OAAQ,MAP7D,EAQX,CAEA,KACE7E,KAAKiD,SAASqB,kBAAeQ,EAC7B9E,KAAKmD,UAAUlC,MAAQ,EACzB,CAEA,SAAIA,CAAMsC,GAER,IAAKA,IAAQ,KAAKwB,KAAKxB,GAErB,YADAvD,MAAK,IAKFuD,EAAIyB,WAAW,OAClBzB,EAAM,IAAIA,KAGZ,IAAIC,EAAW,GACXyB,EAAiB,GAErB,GAAI1B,EAAI2B,SAAS,KAAM,CAErB,MAAMC,EAAU5B,EAAI6B,QAAQ,KAC5B5B,EAAWD,EAAI8B,MAAM,EAAGF,GACxBF,EAAiB1B,EAAI8B,MAAMF,EAAU,GAAGN,QAAQ,OAAQ,GAC1D,KAAO,CAEL,MAAMS,GAAS,OAA2B/B,GACtC+B,GAAQC,qBACV/B,EAAW,IAAI8B,EAAOC,qBAEtBN,EAAiB1B,EAAI8B,MAAM7B,EAASgC,QAAQX,QAAQ,OAAQ,IAEhE,CAGA,IAAK,KAAKE,KAAKvB,GAEb,YADAxD,MAAK,IAKP,MAAMyF,EAAc,IAAaC,KAAMC,GAAMA,EAAEnC,WAAaA,IAAWoC,KAGnEH,GAAeA,IAAgBzF,KAAKqE,sBACtCrE,KAAKiD,SAASqB,aAAetE,MAAK,EAAwByF,IAIxDzF,KAAK2E,cACP3E,KAAKmD,UAAUlC,MAAQjB,MAAK,EAAsBiF,GAElDjF,KAAKmD,UAAUlC,MAAQgE,CAE3B,CAEA,IAAArF,GACEI,KAAKa,iBAAiB,QAAUgF,IAE1BA,EAAEC,WAAW9F,KAAKoD,OAAO,GAAGhC,UAGlCvB,MAAMD,SAENI,MAAK,GACP,CAEA,WAAA+F,GACE,MAAMN,EAAczF,KAAKiD,SAAShC,MAC5B+E,EAAgBhG,KAAKmD,UAAUlC,MAE/BgF,GAAWR,IAAgBO,EAC3BE,EAAgBF,GAAiBA,EAAcR,QAAUxF,KAAKmE,UAEpE,GAAInE,KAAKmG,YAAcF,EACrB,MAAO,CAAEG,cAAc,GAGzB,GAAIpG,KAAKiB,MAAO,CACd,IAAKiF,EACH,MAAO,CAAEG,UAAU,GAGrB,GAAIrG,KAAK4E,qBAAuB5E,MAAK,IACnC,MAAO,CAAEsG,iBAAiB,EAE9B,CAEA,MAAO,CAAC,CACV,CAEA,iBAAAC,IAAqBC,GACnBxG,KAAKmD,UAAUoD,qBAAqBC,EACtC,CAEA,wBAAAnF,CAAyBC,EAAUmF,EAAUC,GAG3C,GAFA7G,MAAMwB,yBAAyBC,EAAUmF,EAAUC,GAE/CD,IAAaC,EAAU,CACzB,GAAiB,iBAAbpF,GAA+BoF,IAAa1G,KAAKqE,oBACnDrE,MAAK,EAA0B0G,QAC1B,GAAIjE,EAAkByC,SAAS5D,GAAW,CAC/C,MAAMkD,EAAOhC,EAASlB,IAAaA,EAE/Bc,EAAY8C,SAAS5D,GAClBoF,EAGH1G,KAAKoD,OAAOuD,QAASC,GAAUA,EAAMC,aAAarC,EAAMkC,IAFxD1G,KAAKoD,OAAOuD,QAASC,GAAUA,EAAME,gBAAgBtC,IAI9CnC,EAAa6C,SAAS5D,GAC/BtB,KAAKiD,SAAS4D,aAAarC,EAAMkC,GACxBpE,EAAW4C,SAAS5D,IAC7BtB,KAAKmD,UAAU0D,aAAarC,EAAMkC,EAEtC,CAEInE,EAAe2C,SAAS5D,IAC1BtB,MAAK,EAAsBsB,EAAUoF,GAGtB,uBAAbpF,GACFtB,MAAK,EAAqBA,KAAKuE,kBAEnC,CACF,CAEA,KAEEvE,KAAKmD,UAAUtC,iBAAiB,QAAUgF,IACxC,IAAK7F,KAAK+D,uBAAwB,CAChC,MAAMgD,EAAkB,OAClBC,EAAiBnB,EAAEoB,OAAOhG,MAC7BwC,MAAM,IACNgB,OAAQyC,GAASH,EAAgBhC,KAAKmC,IACtClE,KAAK,IACR6C,EAAEoB,OAAOhG,MAAQ+F,CACnB,IAGFhH,KAAKmH,6BAA6BnH,KAAKoD,QACvCpD,KAAKoH,6BACP,CAEA,GAAsBnC,EAAiB,IAUrC,OARKjF,MAAK,GAAQA,MAAK,EAAKqH,UAAYrH,KAAKqE,sBAC3CrE,MAAK,EAAO,IAAI,IAAUA,KAAKqE,sBAIjCrE,MAAK,EAAKsH,QAEWtH,MAAK,EAAK4G,MAAM3B,IACdA,CACzB,CAEA,KACE,MAAMK,GAAS,OAA2BtF,KAAKiB,OAE/C,SACIqE,GACAA,EAAOiC,aACPjC,EAAO+B,SACPrH,MAAK,EAAkBsF,EAAO+B,SAEpC,CAEA,GAAkB5B,GAChB,OAAKzF,KAAKuE,kBAAkBiB,QAIrBxF,KAAKuE,kBAAkBW,SAASO,EACzC,CAGA,GAAwBA,GACtB,OAAOzF,KAAKiD,SAASU,OAAO+B,KAAMC,GAAMA,EAAE3B,aAAa,uBAAyByB,EAClF,CAEA,GAAqBlB,GACnB,MAAMZ,EAAQY,EAAkBiB,OAC5B,IAAaf,OAAQkB,GAAMpB,EAAkBW,SAASS,EAAEC,OACxD,IAEJ5F,KAAKkD,cAAc,qBAAqBL,UAAYc,EACjDb,IAAKC,IAAS,QAAaA,IAC3BC,KAAK,GACV,CAEA,GAA0ByC,GACxB,IAAKzF,KAAKiD,SAAShC,MAAO,CACxB,MAAMuG,EAAkBxH,MAAK,EAAwByF,GAIjD+B,GACFtG,WAAW,KACTlB,KAAKiD,SAASqB,aAAekD,GAGnC,CACF,CAEA,GAAsBlG,EAAUoF,GAE9B,MAAMlC,EAAOhC,EAASlB,IAAaA,EAElB,eAAbA,EACFtB,MAAK,EAAuB0G,GAIe,aAApC1G,KAAKgE,aAAa,gBACR,wBAAb1C,EACFtB,KAAKiD,SAAS4D,aAAarC,EAAMkC,GACX,UAAbpF,GACTtB,KAAKmD,UAAU0D,aAAarC,EAAMkC,GAGxC,CAEA,GAAuBA,GACJ,aAAbA,GAEF1G,KAAKiD,SAAS4D,aAAa,QAAS7G,KAAKgE,aAAa,wBAA0B,IAChFhE,KAAKiD,SAAS4D,aACZ,cACA7G,KAAKgE,aAAa,8BAAgC,IAEpDhE,KAAKmD,UAAU0D,aAAa,QAAS7G,KAAKgE,aAAa,UAAY,IACnEhE,KAAKmD,UAAU0D,aACb,cACA7G,KAAKgE,aAAa,4BAA8B,KAIlDhE,KAAKoD,OAAOuD,QAASC,GAAUA,EAAME,gBAAgB,SAEzD,E,uDCrWF5E,eAAeC,OAAO,IAAe,I,iCCD9B,MAGMsF,EAAe,EAAG7B,OAAMpC,WAAUkE,KAAML,KAAc,0BAEtD7D,sBACEoC,KAAQpC,KAAY6D,8BACZzB,uDAPO,CAACA,GAC7B,+DAA+DA,EAAK+B,oBAUtDC,CAAehC,gDAEpByB,gDAGAzB,yBACApC,kC","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js"],"sourcesContent":["import {\n  createStyleMixin,\n  draggableMixin,\n  createProxy,\n  proxyInputMixin,\n  componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './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('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n  class TextFieldClass extends superclass {\n    static get observedAttributes() {\n      return observedAttrs.concat(superclass.observedAttributes || []);\n    }\n\n    icon;\n\n    init() {\n      super.init?.();\n    }\n\n    renderCopyToClipboard(shouldRender) {\n      if (!shouldRender) {\n        this.icon?.remove();\n        return;\n      }\n\n      const iconInitConfig = {\n        icon: 'vaadin:copy-o',\n        title: 'Copy',\n        style: 'cursor: pointer',\n      };\n\n      const iconCopiedConfig = {\n        icon: 'vaadin:check-circle-o',\n        title: 'Copied',\n        style: 'cursor: initial',\n      };\n\n      this.icon = Object.assign(document.createElement('vaadin-icon'), {\n        slot: 'suffix',\n        ...iconInitConfig,\n      });\n\n      this.baseElement.appendChild(this.icon);\n      this.icon.addEventListener('click', () => {\n        navigator.clipboard.writeText(this.value);\n        Object.assign(this.icon, iconCopiedConfig);\n\n        // we want the icon to go back to the initial state after 5 seconds\n        setTimeout(() => {\n          Object.assign(this.icon, iconInitConfig);\n        }, 5000);\n      });\n    }\n\n    onLabelClick() {\n      this.focus();\n    }\n\n    attributeChangedCallback(attrName, oldVal, newVal) {\n      super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n      // Vaadin doesn't allow to change the input type attribute.\n      // We need the ability to do that, so we're overriding their\n      // behavior with their private API.\n      // When receiving a `type` attribute, we use their private API\n      // to set it on the input.\n      if (attrName === 'type') {\n        this.baseElement._setType(newVal);\n      }\n\n      if (oldVal !== newVal) {\n        if (attrName === 'label-type') {\n          if (newVal === 'floating') {\n            this.addEventListener('click', this.onLabelClick);\n          } else {\n            this.removeEventListener('click', this.onLabelClick);\n          }\n        } else if (attrName === 'copy-to-clipboard') {\n          this.renderCopyToClipboard(newVal === 'true');\n        }\n      }\n    }\n  };\n\nexport const TextFieldClass = compose(\n  createStyleMixin({\n    mappings: textFieldMappings,\n  }),\n  draggableMixin,\n  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n  componentNameValidationMixin,\n  customMixin\n)(\n  createProxy({\n    slots: ['prefix', 'suffix'],\n    wrappedEleName: 'vaadin-text-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(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n          TextFieldClass.cssVarList.inputOutlineOffset\n        }));\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      ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n      ${inputFloatingLabelStyle()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,\n    excludeAttrsSync: ['tabindex', 'style'],\n    componentName,\n  })\n);\n","import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n  'country-input-label': 'label',\n  'country-input-placeholder': 'placeholder',\n  'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n  static get observedAttributes() {\n    return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);\n  }\n\n  #ayt;\n\n  constructor() {\n    super();\n\n    this.innerHTML = `\n    <div class=\"wrapper\">\n      <descope-combo-box\n        item-label-path=\"data-name\"\n        item-value-path=\"data-id\"\n      >\n      ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n      </descope-combo-box>\n      <div class=\"separator\"></div>\n      <descope-text-field type=\"tel\"></descope-text-field>\n    </div>\n    `;\n\n    this.comboBox = this.querySelector('descope-combo-box');\n    this.textField = this.querySelector('descope-text-field');\n\n    this.inputs = [this.comboBox, this.textField];\n\n    forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n    forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n    // override combo box setter to display dialCode value in input\n    this.comboBox.customValueTransformFn = (val) => {\n      const [, dialCode] = val?.split?.(' ') || [];\n      return dialCode;\n    };\n  }\n\n  // exposed from main component\n  get countryCodeInputData() {\n    return this.comboBox.items;\n  }\n\n  // exposed from main component\n  get countryCodeValue() {\n    return this.comboBox.shadowRoot.querySelector('input').value;\n  }\n\n  // exposed from main component\n  get phoneNumberInputEle() {\n    return this.textField.shadowRoot.querySelector('input');\n  }\n\n  get allowAlphanumericInput() {\n    return this.getAttribute('allow-alphanumeric-input') === 'true';\n  }\n\n  get defaultCode() {\n    return this.getAttribute('default-code');\n  }\n\n  get selectionStart() {\n    return this.textField.selectionStart;\n  }\n\n  get minLength() {\n    return parseInt(this.getAttribute('minlength'), 10) || 0;\n  }\n\n  get selectedCountryCode() {\n    return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n  }\n\n  get restrictCountries() {\n    const attr = this.getAttribute('restrict-countries');\n    return attr?.split(',').filter(Boolean) || [];\n  }\n\n  get isFormatValue() {\n    return this.getAttribute('format-value') === 'true';\n  }\n\n  // `strict validation` enforces value parsing with libphonenumber-js\n  get isStrictValidation() {\n    return this.getAttribute('strict-validation') === 'true';\n  }\n\n  get value() {\n    if (!this.comboBox.value || !this.textField.value) {\n      return '';\n    }\n\n    if (this.allowAlphanumericInput) {\n      return `${this.comboBox.value}-${this.textField.value}`;\n    }\n\n    return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n  }\n\n  #clearValue() {\n    this.comboBox.selectedItem = undefined;\n    this.textField.value = '';\n  }\n\n  set value(val) {\n    // reject empty or digit-free values\n    if (!val || !/\\d/.test(val)) {\n      this.#clearValue();\n      return;\n    }\n\n    // ensure plus prefix\n    if (!val.startsWith('+')) {\n      val = `+${val}`;\n    }\n\n    let dialCode = '';\n    let nationalNumber = '';\n\n    if (val.includes('-')) {\n      // dash explicitly marks where the dial code ends — no parsing needed\n      const dashIdx = val.indexOf('-');\n      dialCode = val.slice(0, dashIdx);\n      nationalNumber = val.slice(dashIdx + 1).replace(/\\D+/g, '');\n    } else {\n      // parse only to get dial code length,\n      const parsed = parsePhoneNumberFromString(val);\n      if (parsed?.countryCallingCode) {\n        dialCode = `+${parsed.countryCallingCode}`;\n        // slice the raw value to avoid parser transformations\n        nationalNumber = val.slice(dialCode.length).replace(/\\D+/g, '');\n      }\n    }\n\n    // dial code must contain digits (e.g. '+1', not just '+')\n    if (!/\\d/.test(dialCode)) {\n      this.#clearValue();\n      return;\n    }\n\n    // resolve country code from dial code\n    const countryCode = CountryCodes.find((c) => c.dialCode === dialCode)?.code;\n\n    // sync combo box when country changes\n    if (countryCode && countryCode !== this.selectedCountryCode) {\n      this.comboBox.selectedItem = this.#getCountryItemByCodeId(countryCode);\n    }\n\n    // set formatted or raw national number on the text field\n    if (this.isFormatValue) {\n      this.textField.value = this.#formatNationalNumber(nationalNumber);\n    } else {\n      this.textField.value = nationalNumber;\n    }\n  }\n\n  init() {\n    this.addEventListener('focus', (e) => {\n      // we want to ignore focus events we are dispatching\n      if (e.isTrusted) this.inputs[1].focus();\n    });\n\n    super.init?.();\n\n    this.#initInputs();\n  }\n\n  getValidity() {\n    const countryCode = this.comboBox.value;\n    const nationalNumer = this.textField.value;\n\n    const isEmpty = !countryCode || !nationalNumer;\n    const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n    if (this.isRequired && isEmpty) {\n      return { valueMissing: true };\n    }\n\n    if (this.value) {\n      if (!isValidLength) {\n        return { tooShort: true };\n      }\n\n      if (this.isStrictValidation && !this.#isValidParsedValue()) {\n        return { patternMismatch: true };\n      }\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) {\n      if (attrName === 'default-code' && newValue && !this.selectedCountryCode) {\n        this.#handleDefaultCountryCode(newValue);\n      } else if (inputRelatedAttrs.includes(attrName)) {\n        const attr = mapAttrs[attrName] || attrName;\n\n        if (commonAttrs.includes(attrName)) {\n          if (!newValue) {\n            this.inputs.forEach((input) => input.removeAttribute(attr));\n          } else {\n            this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n          }\n        } else if (countryAttrs.includes(attrName)) {\n          this.comboBox.setAttribute(attr, newValue);\n        } else if (phoneAttrs.includes(attrName)) {\n          this.textField.setAttribute(attr, newValue);\n        }\n      }\n\n      if (labelTypeAttrs.includes(attrName)) {\n        this.#handleLabelTypeAttrs(attrName, newValue);\n      }\n\n      if (attrName === 'restrict-countries') {\n        this.#updateComboBoxItems(this.restrictCountries);\n      }\n    }\n  }\n\n  #initInputs() {\n    // Sanitize phone input value to filter everything but digits\n    this.textField.addEventListener('input', (e) => {\n      if (!this.allowAlphanumericInput) {\n        const telDigitsRegExp = /^\\d$/;\n        const sanitizedInput = e.target.value\n          .split('')\n          .filter((char) => telDigitsRegExp.test(char))\n          .join('');\n        e.target.value = sanitizedInput;\n      }\n    });\n\n    this.handleFocusEventsDispatching(this.inputs);\n    this.handleInputEventDispatching();\n  }\n\n  #formatNationalNumber(nationalNumber = '') {\n    // re-initialize AsYouType if country code is outdated\n    if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {\n      this.#ayt = new AsYouType(this.selectedCountryCode);\n    }\n\n    // reset previous AsYouType input\n    this.#ayt.reset();\n\n    const formattedVal = this.#ayt.input(nationalNumber);\n    return formattedVal || nationalNumber;\n  }\n\n  #isValidParsedValue() {\n    const parsed = parsePhoneNumberFromString(this.value);\n\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    );\n  }\n\n  #isAllowedCountry(countryCode) {\n    if (!this.restrictCountries.length) {\n      return true;\n    }\n\n    return this.restrictCountries.includes(countryCode);\n  }\n\n  // return country item by country code `data-country-code` (e.g. `US`)\n  #getCountryItemByCodeId(countryCode) {\n    return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n  }\n\n  #updateComboBoxItems(restrictCountries) {\n    const items = restrictCountries.length\n      ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n      : CountryCodes;\n\n    this.querySelector('descope-combo-box').innerHTML = items\n      .map((item) => comboBoxItem(item))\n      .join('');\n  }\n\n  #handleDefaultCountryCode(countryCode) {\n    if (!this.comboBox.value) {\n      const countryCodeItem = this.#getCountryItemByCodeId(countryCode);\n      // When replacing the input component (inserting internal component into text-field) -\n      // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n      // after the reset.\n      if (countryCodeItem) {\n        setTimeout(() => {\n          this.comboBox.selectedItem = countryCodeItem;\n        });\n      }\n    }\n  }\n\n  #handleLabelTypeAttrs(attrName, newValue) {\n    // set or remove label attributes from inner text/combo components on `label-type` change\n    const attr = mapAttrs[attrName] || attrName;\n\n    if (attrName === 'label-type') {\n      this.#handleLabelTypeChange(newValue);\n    }\n    // on inner components label attr change - set label attributes for text/combo components\n    // only if label-type is `floating`\n    else if (this.getAttribute('label-type') === 'floating') {\n      if (attrName === 'country-input-label') {\n        this.comboBox.setAttribute(attr, newValue);\n      } else if (attrName === 'label') {\n        this.textField.setAttribute(attr, newValue);\n      }\n    }\n  }\n\n  #handleLabelTypeChange(newValue) {\n    if (newValue === 'floating') {\n      // on change to `floating` label - set inner components `label` and `placeholder`\n      this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');\n      this.comboBox.setAttribute(\n        'placeholder',\n        this.getAttribute('country-input-placeholder') || ''\n      );\n      this.textField.setAttribute('label', this.getAttribute('label') || '');\n      this.textField.setAttribute(\n        'placeholder',\n        this.getAttribute('phone-input-placeholder') || ''\n      );\n    } else {\n      // for other cases - reset inner components label-type and labels\n      this.inputs.forEach((input) => input.removeAttribute('label'));\n    }\n  }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n  `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n  const value = val || '';\n  let countryCode = '';\n  let phoneNumber = '';\n\n  // Attempt to parse the value using libphonenumber-js\n  const parsed = parsePhoneNumberFromString(value);\n\n  if (parsed) {\n    if (parsed.countryCallingCode) {\n      countryCode = `+${parsed.countryCallingCode}`;\n    }\n\n    if (parsed.nationalNumber) {\n      phoneNumber = parsed.nationalNumber;\n    }\n  } else {\n    // Fallback: assume a dash separates country code and phone number\n    const [country, phone] = value.split('-');\n    countryCode = country || '';\n    phoneNumber = phone || '';\n  }\n\n  return [countryCode, phoneNumber];\n};\n"],"names":["componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","innerHTML","map","item","join","comboBox","querySelector","textField","inputs","includeAttrs","customValueTransformFn","val","dialCode","split","countryCodeInputData","items","countryCodeValue","shadowRoot","phoneNumberInputEle","allowAlphanumericInput","getAttribute","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","replace","undefined","test","startsWith","nationalNumber","includes","dashIdx","indexOf","slice","parsed","countryCallingCode","length","countryCode","find","c","code","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","handleFocusEventsDispatching","handleInputEventDispatching","country","reset","isValid","countryCodeItem","comboBoxItem","name","toLowerCase","getCountryFlag"],"sourceRoot":""}