/*! For license information please see descope-hybrid-field-index-js.js.LICENSE.txt */
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[7299],{54316(e,t,i){i.r(t),i.d(t,{EmailFieldClass:()=>f,componentName:()=>g}),i(52733);var n=i(47642),r=i(87550);const o=r.AH`
  :host([dir='rtl']) [part='input-field'] ::slotted(input) {
    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
  }

  :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {
    --_lumo-text-field-overflow-mask-image: none;
  }
`;(0,r.SF)("vaadin-email-field",[n.k,o],{moduleId:"lumo-email-field"});var s=i(82901),a=i(27136);const l=i(51450).AH`
  :host([dir='rtl']) [part='input-field'] {
    direction: ltr;
  }

  :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
    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}}}]);
//# sourceMappingURL=descope-hybrid-field-index-js.js.map