@descope/web-components-ui 1.100.0 → 1.102.0

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

@@ -1,5 +1,5 @@
 /*! For license information please see descope-hybrid-field-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[7299],{9035:(e,t,i)=>{i.d(t,{A:()=>c,T:()=>l});var n=i(3393),r=i(97810),o=i(92259),s=i(10473),a=i(23530);const l=(0,r.xE)("phone-field-internal-input-box"),p=["disabled","size","readonly","phone-input-placeholder","name","maxlength","autocomplete","label-type"],u={"phone-input-placeholder":"placeholder"},d=(0,n.y)({componentName:l,baseSelector:"div"}),c=class extends d{static get observedAttributes(){return[].concat(d.observedAttributes||[],p)}#e;constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1" type="tel" bordered="false"></descope-text-field>\n      </div>\n      ',this.textField=this.querySelector("descope-text-field")}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get defaultDialCode(){return(0,o.Q)(this.getAttribute("default-code"))}get defaultCode(){return this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}get restrictCountries(){return this.getAttribute("restrict-countries")?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.textField.value)return"";if(!this.isStrictValidation)return this.#t();const e=this.#i();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.#n.bind(this)),this.handleFocusEventsDispatching([this.textField])}getValidity(){const e=/^\+?\d{1,4}-?(?:\d-?){1,15}$/,t=this.#r(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.#o()||!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&&p.includes(e)){const t=u[e]||e;this.textField.setAttribute(t,i)}}#n(e){let t=this.#s(e.target.value);this.isFormatValue&&this.#a(t)&&(t=this.#l(t)),e.target.value=t}#t(){if(!this.defaultDialCode)return this.textField.value;const e=this.#p(this.textField.value),t=this.#r(e);return[this.defaultDialCode,t].join("-")}#i(){return this.defaultDialCode?(0,s.l)([this.defaultDialCode,this.#r(this.textField.value)].filter(Boolean).join("")):(0,s.l)(this.textField.value)}#r(e){return e.replace(/\D/g,"")}#p(e){if("+"===this.textField.value?.[0]){const t=new RegExp(`^\\${this.defaultDialCode}`);return e.replace(t,"")}return e}#o(){const e=(0,s.l)(this.value);return!(!e||!e.isValid?.()||!e.country||!this.#u(e.country)||this.defaultCode&&this.defaultCode!==e.country)}#u(e){return!this.restrictCountries.length||this.restrictCountries.includes(e)}#s(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}#l(e=""){const t=this.defaultCode||this.#d(e);return t?(this.#e&&this.#e.country===t||(this.#e=new a.Q(t)),this.#e.reset(),this.#e.input(e)||e):e}#d(e){const t=(0,s.l)(e);return t?.country||""}#a(e){return!!(0,o.W)(e)}}},16306:(e,t,i)=>{i.d(t,{TQ:()=>d,Ul:()=>C});var n=i(9035),r=i(97810),o=i(9696),s=i(79365),a=i(79275),l=i(51680),p=i(73551);const u=a.w.cssVarList,d=(0,r.xE)("phone-input-box-field"),{host:c,label:h,inputElement:m,requiredIndicator:g,inputField:f,internalComponent:y,internalComponentAfter:v,phoneInput:b,errorMessage:I,helperText:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:()=>"vaadin-text-field::part(input-field)"},internalComponent:{selector:"descope-phone-field-internal-input-box"},internalComponentAfter:{selector:"descope-phone-field-internal-input-box::after"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},C=(0,o.Zz)((0,s.RF)({mappings:{fontSize:[c,f,{selector:a.w.componentName,property:a.w.cssVarList.fontSize}],fontFamily:[h,I,x],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputHorizontalPadding:[{...b,property:"padding-left"},{...b,property:"padding-right"}],labelFontSize:{...h,property:"font-size"},labelFontWeight:{...h,property:"font-weight"},labelTextColor:[{...h,property:"color"},{...g,property:"color"}],labelRequiredIndicator:{...g,property:"content"},errorMessageTextColor:{...I,property:"color"},errorMessageIcon:{...I,property:"background-image"},errorMessageIconSize:{...I,property:"background-size"},errorMessageIconPadding:{...I,property:"padding-inline-start"},errorMessageIconRepeat:{...I,property:"background-repeat"},errorMessageIconPosition:{...I,property:"background-position"},errorMessageFontSize:{...I,property:"font-size"},inputValueTextColor:{...b,property:u.inputValueTextColor},inputPlaceholderTextColor:{...b,property:u.inputPlaceholderColor},inputBorderStyle:{...v,property:"border-style"},inputBorderWidth:{...v,property:"border-width"},inputBorderColor:{...v,property:"border-color"},inputBorderRadius:[{...y,property:"border-radius"},{...v,property:"border-radius"}],inputOutlineStyle:{...y,property:"outline-style"},inputOutlineColor:{...y,property:"outline-color"},inputOutlineWidth:{...y,property:"outline-width"},inputOutlineOffset:{...y,property:"outline-offset"},labelPosition:{...h,property:"position"},labelTopPosition:{...h,property:"top"},labelHorizontalPosition:[{...h,property:"left"},{...h,property:"right"}],inputTransformY:{...h,property:"transform"},inputTransition:{...h,property:"transition"},marginInlineStart:{...h,property:"margin-inline-start"},valueInputHeight:{...m,property:"height"},valueInputMarginBottom:{selector:a.w.componentName,property:u.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,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)(C.cssVarList)}\n    ${(0,p.I4)("vaadin-text-field")}\n    ${(0,p.kG)("vaadin-text-field")}\n    ${(0,p.X6)()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${u.inputOutlineWidth}: 0;\n      ${u.inputOutlineOffset}: 0;\n    }\n    descope-phone-field-internal-input-box::after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      box-sizing: border-box;\n      pointer-events: none;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\n    }\n\n    vaadin-text-field[label-type="floating"]:not([focused])[readonly] input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-text-field[label-type="floating"]:not([focused])[disabled] input:placeholder-shown {\n      opacity: 0;\n    }\n\n    ${(0,p.$J)("vaadin-text-field")}\n    ${(0,p.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:d}))},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)},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+$/;var l=i(81808),p=i(16306),u=i(25964);const d=(0,s.xE)("hybrid-field"),c={shared:["bordered","full-width","label-type","size","disabled","readonly","required","st-host-direction","st-error-message-icon","st-error-message-icon-size","st-error-message-icon-padding"],email:["label","placeholder","data-errormessage-value-missing-email","data-errormessage-pattern-mismatch-email","external-input"],phone:{countryCode:["phone-input-label","country-input-label","country-input-placeholder","restrict-countries","default-code","phone-minlength","phone-format-value","phone-strict-validation","data-errormessage-value-missing-phone"],inputBox:["label","restrict-countries","default-code","phone-minlength","phone-format-value","phone-strict-validation","data-errormessage-value-missing-phone"]}},h={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{#c=!1;#h;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:c.email,mapAttrs:h.email}),(0,s.EA)(this,this.phoneCountryCodeInput,{includeAttrs:c.phone.countryCode,mapAttrs:h.phone}),(0,s.EA)(this,this.phoneInputBoxInput,{includeAttrs:c.phone.inputBox,mapAttrs:h.phone}),this.inputs.forEach((e=>(0,s.EA)(this,e,{includeAttrs:c.shared}))),setTimeout((()=>this.phoneCountryCodeInput.setAttribute("default-code",this.defaultCode)))}onValueChange(){this.#h=this.activeInputEle.selectionStart,this.handleActiveInput(this.activeInput.value)}handleActiveInput(e){const t=(e=>a.test(e.replaceAll("+","").replaceAll("-","")))(e)?this.phoneVariant:this.emailInput;this.activeInput!==t&&this.setActiveInput(t)}setActiveInput(e){const t=this.activeInput.value;this.activeInput=e,this.setActiveInputValue(t),this.#c&&this.activeInput.reportValidity(),this.setActiveInputSelectionStart(),this.toggleInputVisibility()}setActiveInputSelectionStart(){setTimeout((()=>{this.activeInputEle.focus(),this.activeInputEle.setSelectionRange?.(this.#h,this.#h)}))}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.#c=!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)},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`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[7299],{9035:(e,t,i)=>{i.d(t,{A:()=>c,T:()=>l});var n=i(3393),r=i(97810),o=i(92259),s=i(10473),a=i(23530);const l=(0,r.xE)("phone-field-internal-input-box"),p=["disabled","size","readonly","phone-input-placeholder","name","maxlength","autocomplete","label-type"],u={"phone-input-placeholder":"placeholder"},d=(0,n.y)({componentName:l,baseSelector:"div"}),c=class extends d{static get observedAttributes(){return[].concat(d.observedAttributes||[],p)}#e;constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1" type="tel" bordered="false"></descope-text-field>\n      </div>\n      ',this.textField=this.querySelector("descope-text-field")}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get defaultDialCode(){return(0,o.Q)(this.getAttribute("default-code"))}get defaultCode(){return this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}get restrictCountries(){return this.getAttribute("restrict-countries")?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.textField.value)return"";if(!this.isStrictValidation)return this.#t();const e=this.#i();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.#n.bind(this)),this.handleFocusEventsDispatching([this.textField])}getValidity(){const e=/^\+?\d{1,4}-?(?:\d-?){1,15}$/,t=this.#r(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.#o()||!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&&p.includes(e)){const t=u[e]||e;this.textField.setAttribute(t,i)}}#n(e){let t=this.#s(e.target.value);this.isFormatValue&&this.#a(t)&&(t=this.#l(t)),e.target.value=t}#t(){if(!this.defaultDialCode)return this.textField.value;const e=this.#p(this.textField.value),t=this.#r(e);return[this.defaultDialCode,t].join("-")}#i(){return this.defaultDialCode?(0,s.l)([this.defaultDialCode,this.#r(this.textField.value)].filter(Boolean).join("")):(0,s.l)(this.textField.value)}#r(e){return e.replace(/\D/g,"")}#p(e){if("+"===this.textField.value?.[0]){const t=new RegExp(`^\\${this.defaultDialCode}`);return e.replace(t,"")}return e}#o(){const e=(0,s.l)(this.value);return!(!e||!e.isValid?.()||!e.country||!this.#u(e.country)||this.defaultCode&&this.defaultCode!==e.country)}#u(e){return!this.restrictCountries.length||this.restrictCountries.includes(e)}#s(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}#l(e=""){const t=this.defaultCode||this.#d(e);return t?(this.#e&&this.#e.country===t||(this.#e=new a.Q(t)),this.#e.reset(),this.#e.input(e)||e):e}#d(e){const t=(0,s.l)(e);return t?.country||""}#a(e){return!!(0,o.W)(e)}}},16306:(e,t,i)=>{i.d(t,{TQ:()=>d,Ul:()=>C});var n=i(9035),r=i(97810),o=i(9696),s=i(79365),a=i(79275),l=i(51680),p=i(73551);const u=a.w.cssVarList,d=(0,r.xE)("phone-input-box-field"),{host:c,label:h,inputElement:m,requiredIndicator:g,inputField:f,internalComponent:y,internalComponentAfter:v,phoneInput:b,errorMessage:I,helperText:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:()=>"vaadin-text-field::part(input-field)"},internalComponent:{selector:"descope-phone-field-internal-input-box"},internalComponentAfter:{selector:"descope-phone-field-internal-input-box::after"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},C=(0,o.Zz)((0,s.RF)({mappings:{fontSize:[c,f,{selector:a.w.componentName,property:a.w.cssVarList.fontSize}],fontFamily:[h,I,x],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputHorizontalPadding:[{...b,property:"padding-left"},{...b,property:"padding-right"}],labelFontSize:{...h,property:"font-size"},labelFontWeight:{...h,property:"font-weight"},labelTextColor:[{...h,property:"color"},{...g,property:"color"}],labelRequiredIndicator:{...g,property:"content"},errorMessageTextColor:{...I,property:"color"},errorMessageIcon:{...I,property:"background-image"},errorMessageIconSize:{...I,property:"background-size"},errorMessageIconPadding:{...I,property:"padding-inline-start"},errorMessageIconRepeat:{...I,property:"background-repeat"},errorMessageIconPosition:{...I,property:"background-position"},errorMessageFontSize:{...I,property:"font-size"},inputValueTextColor:{...b,property:u.inputValueTextColor},inputPlaceholderTextColor:{...b,property:u.inputPlaceholderColor},inputBorderStyle:{...v,property:"border-style"},inputBorderWidth:{...v,property:"border-width"},inputBorderColor:{...v,property:"border-color"},inputBorderRadius:[{...y,property:"border-radius"},{...v,property:"border-radius"}],inputOutlineStyle:{...y,property:"outline-style"},inputOutlineColor:{...y,property:"outline-color"},inputOutlineWidth:{...y,property:"outline-width"},inputOutlineOffset:{...y,property:"outline-offset"},labelPosition:{...h,property:"position"},labelTopPosition:{...h,property:"top"},labelHorizontalPosition:[{...h,property:"left"},{...h,property:"right"}],inputTransformY:{...h,property:"transform"},inputTransition:{...h,property:"transition"},marginInlineStart:{...h,property:"margin-inline-start"},valueInputHeight:{...m,property:"height"},valueInputMarginBottom:{selector:a.w.componentName,property:u.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,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)(C.cssVarList)}\n    ${(0,p.I4)("vaadin-text-field")}\n    ${(0,p.kG)("vaadin-text-field")}\n    ${(0,p.X6)()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${u.inputOutlineWidth}: 0;\n      ${u.inputOutlineOffset}: 0;\n    }\n    descope-phone-field-internal-input-box::after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      box-sizing: border-box;\n      pointer-events: none;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\n    }\n\n    vaadin-text-field[label-type="floating"]:not([focused])[readonly] input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-text-field[label-type="floating"]:not([focused])[disabled] input:placeholder-shown {\n      opacity: 0;\n    }\n\n    ${(0,p.$J)("vaadin-text-field")}\n    ${(0,p.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:d}))},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)},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+$/;var l=i(81808),p=i(16306),u=i(25964);const d=(0,s.xE)("hybrid-field"),c={shared:["bordered","full-width","label-type","size","disabled","readonly","required","st-host-direction","st-error-message-icon","st-error-message-icon-size","st-error-message-icon-padding"],email:["label","placeholder","data-errormessage-value-missing-email","data-errormessage-pattern-mismatch-email","external-input"],phone:{countryCode:["phone-input-label","country-input-label","country-input-placeholder","restrict-countries","default-code","phone-minlength","phone-format-value","phone-strict-validation","data-errormessage-value-missing-phone"],inputBox:["label","restrict-countries","default-code","phone-minlength","phone-format-value","phone-strict-validation","data-errormessage-value-missing-phone"]}},h={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{#c=!1;#h;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:c.email,mapAttrs:h.email}),(0,s.EA)(this,this.phoneCountryCodeInput,{includeAttrs:c.phone.countryCode,mapAttrs:h.phone}),(0,s.EA)(this,this.phoneInputBoxInput,{includeAttrs:c.phone.inputBox,mapAttrs:h.phone}),this.inputs.forEach((e=>(0,s.EA)(this,e,{includeAttrs:c.shared}))),setTimeout((()=>this.phoneCountryCodeInput.setAttribute("default-code",this.defaultCode)))}onValueChange(){this.#h=this.activeInputEle.selectionStart,this.handleActiveInput(this.activeInput.value)}handleActiveInput(e){const t=(e=>a.test(e.replaceAll("+","").replaceAll("-","")))(e)?this.phoneVariant:this.emailInput;this.activeInput!==t&&this.setActiveInput(t)}setActiveInput(e){const t=this.activeInput.value;this.activeInput=e,this.setActiveInputValue(t),this.#c&&this.activeInput.reportValidity(),this.setActiveInputSelectionStart(),this.toggleInputVisibility()}setActiveInputSelectionStart(){setTimeout((()=>{this.activeInputEle.focus(),this.activeInputEle.setSelectionRange?.(this.#h,this.#h)}))}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.#c=!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)},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);
   }

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/./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/PhoneFieldInputBoxClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-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/../../../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/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/helpers.js"],"sourcesContent":["import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { getComponentName } from '../../../../helpers/componentHelpers';\nimport { getCountryByCodeId, matchingParenthesis } from '../../helpers';\nimport parsePhoneNumberFromString, { AsYouType } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal-input-box');\n\nconst observedAttributes = [\n  'disabled',\n  'size',\n  'readonly',\n  'phone-input-placeholder',\n  'name',\n  '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\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 { componentName as descopeInternalComponentName } from './descope-phone-input-box-internal/PhoneFieldInternalInputBox';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n  createProxy,\n  createStyleMixin,\n  draggableMixin,\n  inputOverrideValidConstraintsMixin,\n  proxyInputMixin,\n} from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport CountryCodes from '../CountryCodes';\nimport {\n  resetInputLabelPosition,\n  resetInputCursor,\n  resetInputFieldDefaultWidth,\n  resetInputFieldInvalidBackgroundColor,\n  useHostExternalPadding,\n  inputFloatingLabelStyle,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\n\nexport const componentName = getComponentName('phone-input-box-field');\n\nconst customMixin = (superclass) =>\n  class PhoneFieldInputBoxMixinClass extends superclass {\n    static get CountryCodes() {\n      return CountryCodes;\n    }\n\n    init() {\n      super.init?.();\n\n      const template = document.createElement('template');\n\n      template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t></${descopeInternalComponentName}>\n      `;\n\n      this.baseElement.appendChild(template.content.cloneNode(true));\n\n      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n      forwardAttrs(this.shadowRoot.host, this.inputElement, {\n        includeAttrs: [\n          'size',\n          'minlength',\n          'maxlength',\n          'default-code',\n          'disabled',\n          'phone-input-placeholder',\n          'label',\n          'label-type',\n          'allow-alphanumeric-input',\n          'restrict-countries',\n          'format-value',\n          'strict-validation',\n          'data-errormessage-type-mismatch',\n        ],\n      });\n    }\n\n    get phoneNumberInputEle() {\n      return this.inputElement?.phoneNumberInputEle;\n    }\n  };\n\nconst {\n  host,\n  label,\n  inputElement,\n  requiredIndicator,\n  inputField,\n  internalComponent,\n  internalComponentAfter,\n  phoneInput,\n  errorMessage,\n  helperText,\n} = {\n  host: { selector: () => ':host' },\n  label: { selector: '::part(label)' },\n  placeholder: { selector: '> input:placeholder-shown' },\n  inputElement: { selector: 'input' },\n  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n  inputField: { selector: () => 'vaadin-text-field::part(input-field)' },\n  internalComponent: {\n    selector: 'descope-phone-field-internal-input-box',\n  },\n  internalComponentAfter: {\n    selector: 'descope-phone-field-internal-input-box::after',\n  },\n  phoneInput: { selector: () => 'descope-text-field' },\n  helperText: { selector: '::part(helper-text)' },\n  errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldInputBoxClass = compose(\n  createStyleMixin({\n    mappings: {\n      fontSize: [\n        host,\n        inputField,\n        {\n          selector: TextFieldClass.componentName,\n          property: TextFieldClass.cssVarList.fontSize,\n        },\n      ],\n      fontFamily: [label, errorMessage, helperText],\n      hostWidth: { ...host, property: 'width' },\n      hostMinWidth: { ...host, property: 'min-width' },\n      hostDirection: { ...host, property: 'direction' },\n\n      inputHorizontalPadding: [\n        { ...phoneInput, property: 'padding-left' },\n        { ...phoneInput, property: 'padding-right' },\n      ],\n\n      labelFontSize: { ...label, property: 'font-size' },\n      labelFontWeight: { ...label, property: 'font-weight' },\n      labelTextColor: [\n        { ...label, property: 'color' },\n        { ...requiredIndicator, property: 'color' },\n      ],\n      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n      errorMessageTextColor: { ...errorMessage, property: 'color' },\n\n      errorMessageIcon: { ...errorMessage, property: 'background-image' },\n      errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n      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'],\n    componentName,\n  })\n);\n\nexport default PhoneFieldInputBoxClass;\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","const NUMERIC_RE = /^\\d+$/;\n\nexport const isNumericValue = (val) => NUMERIC_RE.test(val.replaceAll('+', '').replaceAll('-', ''));\n\nexport const sanitizeCountryCodePrefix = (val) => val.replace(/\\+\\d+-/, '');\n","import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';\nimport { isNumericValue, sanitizeCountryCodePrefix as sanitizeValue } from './helpers';\nimport { PhoneFieldClass } from '../phone-fields/descope-phone-field/PhoneFieldClass';\nimport { PhoneFieldInputBoxClass } from '../phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('hybrid-field');\n\nconst attrs = {\n  shared: [\n    'bordered',\n    'full-width',\n    'label-type',\n    'size',\n    'disabled',\n    'readonly',\n    'required',\n    'st-host-direction',\n    'st-error-message-icon',\n    'st-error-message-icon-size',\n    'st-error-message-icon-padding',\n  ],\n  email: [\n    'label',\n    'placeholder',\n    'data-errormessage-value-missing-email',\n    'data-errormessage-pattern-mismatch-email',\n    'external-input',\n  ],\n  phone: {\n    countryCode: [\n      'phone-input-label',\n      'country-input-label',\n      'country-input-placeholder',\n      'restrict-countries',\n      'default-code',\n      'phone-minlength',\n      'phone-format-value',\n      'phone-strict-validation',\n      'data-errormessage-value-missing-phone',\n    ],\n    inputBox: [\n      'label',\n      'restrict-countries',\n      'default-code',\n      'phone-minlength',\n      'phone-format-value',\n      'phone-strict-validation',\n      'data-errormessage-value-missing-phone',\n    ],\n  },\n};\n\nconst attrMap = {\n  email: {\n    'data-errormessage-value-missing-email': 'data-errormessage-value-missing',\n    'data-errormessage-pattern-mismatch-email': 'data-errormessage-pattern-mismatch',\n  },\n  phone: {\n    'phone-input-label': 'label',\n    'phone-minlength': 'minlength',\n    'phone-format-value': 'format-value',\n    'phone-strict-validation': 'strict-validation',\n    'data-errormessage-value-missing-phone': 'data-errormessage-value-missing',\n  },\n};\n\nconst EMAIL_FIELD = 'descope-email-field';\nconst PHONE_FIELD = 'descope-phone-field';\nconst PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';\n\nconst BaseClass = createBaseClass({\n  componentName,\n  baseSelector: 'div',\n});\n\nclass RawHybridField extends BaseClass {\n  #isReportedValidity = false;\n\n  #selectionStart;\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n    <div class=\"wrapper\">\n      <descope-email-field external-input=\"${this.isExternalInput}\"></descope-email-field>\n      <descope-phone-field allow-alphanumeric-input=\"true\"></descope-phone-field>\n      <descope-phone-input-box-field allow-alphanumeric-input=\"true\"></descope-phone-input-box-field>\n    </div>\n\t\t`;\n\n    injectStyle(\n      `\n      :host {\n        display: inline-flex;\n        box-sizing: border-box;\n        padding: 0;\n        gap: 0;\n      }\n      .wrapper {\n        display: grid;\n        width: 100%;\n      }\n      descope-email-field,\n      descope-phone-field,\n      descope-phone-input-box-field {\n        grid-area: 1/1;\n        width: 100%;\n        height: 100%;\n      }\n      .hidden {\n        visibility: hidden;\n      }\n      `,\n      this\n    );\n  }\n\n  get isExternalInput() {\n    return this.getAttribute('external-input') === 'true';\n  }\n\n  get emailInputEle() {\n    return this.isExternalInput ? this.emailInput.externalInput : this.emailInput.inputElement;\n  }\n\n  get phoneVariant() {\n    const isInputBox = this.getAttribute('phone-variant') === 'inputBox';\n    return isInputBox ? this.phoneInputBoxInput : this.phoneCountryCodeInput;\n  }\n\n  get defaultCode() {\n    const firstItem = this.phoneCountryCodeInput.countryCodes?.[0] || '';\n    return this.getAttribute('default-code') || firstItem;\n  }\n\n  get activeInputEle() {\n    if (this.activeInput === this.emailInput) {\n      return this.emailInputEle;\n    }\n    return this.phoneVariant.phoneNumberInputEle;\n  }\n\n  get value() {\n    return this.activeInput?.value || '';\n  }\n\n  set value(val) {\n    this.handleActiveInput(val);\n    this.activeInput.value = val;\n  }\n\n  async init() {\n    super.init?.();\n\n    this.initInputs();\n    this.updateAttrs();\n    this.toggleInputVisibility();\n\n    await this.waitForInputs();\n\n    this.initInputEles();\n    this.overrideEmailInputType();\n    this.overrideEmailSetAttribute();\n  }\n\n  waitForInputs() {\n    return new Promise((resolve) => {\n      const check = setInterval(() => {\n        if (this.emailInputEle) {\n          clearInterval(check);\n          resolve();\n        }\n      });\n    });\n  }\n\n  initInputs() {\n    this.emailInput = this.shadowRoot.querySelector(EMAIL_FIELD);\n    this.phoneCountryCodeInput = this.shadowRoot.querySelector(PHONE_FIELD);\n    this.phoneInputBoxInput = this.shadowRoot.querySelector(PHONE_INPUT_BOX_FIELD);\n\n    this.inputs = [this.emailInput, this.phoneCountryCodeInput, this.phoneInputBoxInput];\n\n    this.activeInput = this.emailInput;\n  }\n\n  // we need to listen on the inner `input` element itself, otherwise we don't always get an `input` event\n  initInputEles() {\n    const inputEles = [\n      this.emailInputEle,\n      this.phoneCountryCodeInput.phoneNumberInputEle,\n      this.phoneInputBoxInput.phoneNumberInputEle,\n    ];\n\n    inputEles.forEach((ele) => {\n      ele.addEventListener('input', this.onValueChange.bind(this));\n    });\n  }\n\n  overrideEmailInputType() {\n    this.emailInputEle.addEventListener('focus', () => {\n      this.emailInputEle.setAttribute('type', 'text');\n    });\n    this.emailInputEle.addEventListener('blur', () => {\n      setTimeout(() => {\n        this.emailInputEle.setAttribute('type', 'email');\n      });\n    });\n  }\n\n  // We want to prevent Vaadin from changing the input type to `email`\n  // otherwise, we cannot get the selectionStart from the input.\n  overrideEmailSetAttribute() {\n    const origEmailSetAttr = this.emailInput.setAttribute.bind(this.emailInputEle);\n    this.emailInputEle.setAttribute = (name, value) => {\n      if (name !== 'type' || value !== 'email' || !this.emailInput.hasAttribute('focused')) {\n        return origEmailSetAttr(name, value);\n      }\n      return false;\n    };\n  }\n\n  updateAttrs() {\n    forwardAttrs(this, this.emailInput, { includeAttrs: attrs.email, mapAttrs: attrMap.email });\n\n    forwardAttrs(this, this.phoneCountryCodeInput, {\n      includeAttrs: attrs.phone.countryCode,\n      mapAttrs: attrMap.phone,\n    });\n\n    forwardAttrs(this, this.phoneInputBoxInput, {\n      includeAttrs: attrs.phone.inputBox,\n      mapAttrs: attrMap.phone,\n    });\n\n    this.inputs.forEach((input) => forwardAttrs(this, input, { includeAttrs: attrs.shared }));\n\n    setTimeout(() => this.phoneCountryCodeInput.setAttribute('default-code', this.defaultCode));\n  }\n\n  onValueChange() {\n    this.#selectionStart = this.activeInputEle.selectionStart;\n    this.handleActiveInput(this.activeInput.value);\n  }\n\n  handleActiveInput(val) {\n    const expectedActiveInput = isNumericValue(val) ? this.phoneVariant : this.emailInput;\n\n    if (this.activeInput !== expectedActiveInput) {\n      this.setActiveInput(expectedActiveInput);\n    }\n  }\n\n  setActiveInput(expectedActiveInput) {\n    const val = this.activeInput.value;\n    this.activeInput = expectedActiveInput;\n    this.setActiveInputValue(val);\n    if (this.#isReportedValidity) this.activeInput.reportValidity();\n    this.setActiveInputSelectionStart();\n    this.toggleInputVisibility();\n  }\n\n  setActiveInputSelectionStart() {\n    setTimeout(() => {\n      this.activeInputEle.focus();\n      this.activeInputEle.setSelectionRange?.(this.#selectionStart, this.#selectionStart);\n    });\n  }\n\n  setActiveInputValue(val) {\n    const sanitizedVal = sanitizeValue(val);\n    const isPhoneField = this.activeInput.localName === PHONE_FIELD;\n    const value = isPhoneField\n      ? `${this.phoneCountryCodeInput.countryCodeItems}-${sanitizedVal}`\n      : sanitizedVal;\n    this.activeInput.value = value;\n  }\n\n  toggleInputVisibility() {\n    this.inputs.forEach((input) => {\n      input !== this.activeInput ? input.classList.add('hidden') : input.classList.remove('hidden');\n    });\n  }\n\n  reportValidity() {\n    this.#isReportedValidity = true;\n\n    const ele = this.activeInputEle;\n\n    // On reportValidity we want to set the caret at the end of the input value.\n    // Since checkValidity triggers `focus` on the input, it sets the caret at the start of the input,\n    // regardless the existing value.\n    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","/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';\nimport { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\n\nconst emailField = css`\n  :host([dir='rtl']) [part='input-field'] ::slotted(input) {\n    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);\n  }\n\n  :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {\n    --_lumo-text-field-overflow-mask-image: none;\n  }\n`;\n\nregisterStyles('vaadin-email-field', [inputFieldShared, emailField], {\n  moduleId: 'lumo-email-field',\n});\n","/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { css } from 'lit';\n\n// See https://github.com/vaadin/vaadin-text-field/issues/466\nexport const emailFieldStyles = css`\n  :host([dir='rtl']) [part='input-field'] {\n    direction: ltr;\n  }\n\n  :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {\n    direction: rtl;\n    text-align: left;\n  }\n`;\n","/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { defineCustomElement } from '@vaadin/component-base/src/define.js';\nimport { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { emailFieldStyles } from './vaadin-email-field-styles.js';\n\nregisterStyles('vaadin-email-field', emailFieldStyles, { moduleId: 'vaadin-email-field-styles' });\n\n/**\n * `<vaadin-email-field>` is a Web Component for email field control in forms.\n *\n * ```html\n * <vaadin-email-field label=\"Email\"></vaadin-email-field>\n * ```\n *\n * ### Styling\n *\n * `<vaadin-email-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\n * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.\n *\n * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n *\n * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.\n * @fires {Event} change - Fired when the user commits a value change.\n * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.\n * @fires {CustomEvent} value-changed - Fired when the `value` property changes.\n * @fires {CustomEvent} validated - Fired whenever the field is validated.\n *\n * @customElement\n * @extends TextField\n */\nexport class EmailField extends TextField {\n  static get is() {\n    return 'vaadin-email-field';\n  }\n\n  constructor() {\n    super();\n    this._setType('email');\n    this.pattern = '^([a-zA-Z0-9_\\\\.\\\\-+])+@[a-zA-Z0-9\\\\-.]+\\\\.[a-zA-Z0-9\\\\-]{2,}$';\n  }\n\n  /** @protected */\n  ready() {\n    super.ready();\n\n    if (this.inputElement) {\n      this.inputElement.autocapitalize = 'off';\n    }\n  }\n}\n\ndefineCustomElement(EmailField);\n","import {\n  createStyleMixin,\n  draggableMixin,\n  createProxy,\n  proxyInputMixin,\n  componentNameValidationMixin,\n  externalInputMixin,\n} from '../../mixins';\nimport textFieldMappings from '../descope-text-field/textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n  inputFloatingLabelStyle,\n  resetInputLabelPosition,\n  resetInputOverrides,\n  useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('email-field');\n\nconst defaultPattern = \"^[\\\\w\\\\.\\\\%\\\\+\\\\-']+@[\\\\w\\\\.\\\\-]+\\\\.[A-Za-z]{2,}$\";\nconst defaultAutocomplete = 'username';\n\nconst customMixin = (superclass) =>\n  class EmailFieldMixinClass extends superclass {\n    init() {\n      super.init?.();\n\n      // we need to set the pattern on the base element because vaadin-email-field is overriding it\n      this.baseElement.setAttribute('pattern', defaultPattern);\n\n      if (!this.getAttribute('autocomplete')) {\n        this.setAttribute('autocomplete', defaultAutocomplete);\n      }\n\n      this.createExternalInput();\n    }\n  };\n\nexport const EmailFieldClass = compose(\n  createStyleMixin({\n    mappings: textFieldMappings,\n  }),\n  draggableMixin,\n  externalInputMixin({\n    inputType: 'email',\n    inputName: 'email',\n    autocompleteType: 'username',\n    includeAttrs: ['disabled', 'readonly', 'pattern'],\n  }),\n  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n  componentNameValidationMixin,\n  customMixin\n)(\n  createProxy({\n    slots: ['', 'suffix'],\n    wrappedEleName: 'vaadin-email-field',\n    style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${\n          EmailFieldClass.cssVarList.inputOutlineOffset\n        }));\n        box-sizing: border-box;\n\t\t\t}\n      ${resetInputLabelPosition('vaadin-email-field')}\n\t\t\t${useHostExternalPadding(EmailFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}\n      ${inputFloatingLabelStyle()}\n\n      vaadin-email-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-email-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n      :host ::slotted(*) {\n        -webkit-mask-image: none;\n      }\n\n      vaadin-email-field[external-input=\"true\"] > input:not(:placeholder-shown) {\n        opacity: 0;\n      }\n\t\t`,\n    excludeAttrsSync: ['tabindex'],\n    componentName,\n  })\n);\n","import '@vaadin/email-field';\nimport { componentName, EmailFieldClass } from './EmailFieldClass';\n\ncustomElements.define(componentName, EmailFieldClass);\n\nexport { EmailFieldClass, componentName };\n","import '../../../descope-text-field';\n\nimport PhoneFieldInternalInputBox, { componentName } from './PhoneFieldInternalInputBox';\n\ncustomElements.define(componentName, PhoneFieldInternalInputBox);\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":["componentName","observedAttributes","mapAttrs","BaseInputClass","baseSelector","concat","constructor","super","this","innerHTML","textField","querySelector","phoneNumberInputEle","shadowRoot","defaultDialCode","getAttribute","defaultCode","allowAlphanumericInput","minLength","parseInt","maxLength","restrictCountries","split","filter","Boolean","isFormatValue","isStrictValidation","value","parsedVal","country","countryCallingCode","nationalNumber","join","val","init","addEventListener","e","isTrusted","focus","bind","handleFocusEventsDispatching","getValidity","validPhonePattern","stripValue","isRequired","valueMissing","length","tooShort","test","patternMismatch","setSelectionRange","args","attributeChangedCallback","attrName","oldValue","newValue","includes","attr","setAttribute","sanitizedInput","target","sanitizedVal","replace","dialCodePrefixPattern","RegExp","parsed","isValid","countryCode","telDigitsRegExp","char","phoneNumber","reset","input","textVars","cssVarList","host","label","inputElement","requiredIndicator","inputField","internalComponent","internalComponentAfter","phoneInput","errorMessage","helperText","selector","placeholder","PhoneFieldInputBoxClass","mappings","fontSize","property","fontFamily","hostWidth","hostMinWidth","hostDirection","inputHorizontalPadding","labelFontSize","labelFontWeight","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","inputOutlineStyle","inputOutlineColor","inputOutlineWidth","inputOutlineOffset","labelPosition","labelTopPosition","labelHorizontalPosition","inputTransformY","inputTransition","marginInlineStart","valueInputHeight","valueInputMarginBottom","proxyProps","superclass","CountryCodes","template","document","createElement","baseElement","appendChild","content","cloneNode","includeAttrs","slots","wrappedEleName","style","excludeAttrsSync","customElements","define","NUMERIC_RE","attrs","shared","email","phone","inputBox","attrMap","PHONE_FIELD","BaseClass","createBaseClass","HybridFieldClass","componentNameOverride","PhoneFieldClass","attachShadow","mode","isExternalInput","emailInputEle","emailInput","externalInput","phoneVariant","phoneInputBoxInput","phoneCountryCodeInput","firstItem","countryCodes","activeInputEle","activeInput","handleActiveInput","initInputs","updateAttrs","toggleInputVisibility","waitForInputs","initInputEles","overrideEmailInputType","overrideEmailSetAttribute","Promise","resolve","check","setInterval","clearInterval","inputs","forEach","ele","onValueChange","setTimeout","origEmailSetAttr","name","hasAttribute","selectionStart","expectedActiveInput","replaceAll","isNumericValue","setActiveInput","setActiveInputValue","reportValidity","setActiveInputSelectionStart","localName","countryCodeItems","classList","add","remove","origInputType","type","checkValidity","emailField","moduleId","emailFieldStyles","EmailField","is","_setType","pattern","ready","autocapitalize","EmailFieldClass","textFieldMappings","inputType","inputName","autocompleteType","useProxyTargets","createExternalInput","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/./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/PhoneFieldInputBoxClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-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/../../../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/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/helpers.js"],"sourcesContent":["import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { getComponentName } from '../../../../helpers/componentHelpers';\nimport { getCountryByCodeId, matchingParenthesis } from '../../helpers';\nimport parsePhoneNumberFromString, { AsYouType } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal-input-box');\n\nconst observedAttributes = [\n  'disabled',\n  'size',\n  'readonly',\n  'phone-input-placeholder',\n  'name',\n  '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\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 { componentName as descopeInternalComponentName } from './descope-phone-input-box-internal/PhoneFieldInternalInputBox';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n  createProxy,\n  createStyleMixin,\n  draggableMixin,\n  inputOverrideValidConstraintsMixin,\n  proxyInputMixin,\n} from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport CountryCodes from '../CountryCodes';\nimport {\n  resetInputLabelPosition,\n  resetInputCursor,\n  resetInputFieldDefaultWidth,\n  resetInputFieldInvalidBackgroundColor,\n  useHostExternalPadding,\n  inputFloatingLabelStyle,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\n\nexport const componentName = getComponentName('phone-input-box-field');\n\nconst customMixin = (superclass) =>\n  class PhoneFieldInputBoxMixinClass extends superclass {\n    static get CountryCodes() {\n      return CountryCodes;\n    }\n\n    init() {\n      super.init?.();\n\n      const template = document.createElement('template');\n\n      template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t></${descopeInternalComponentName}>\n      `;\n\n      this.baseElement.appendChild(template.content.cloneNode(true));\n\n      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n      forwardAttrs(this.shadowRoot.host, this.inputElement, {\n        includeAttrs: [\n          'size',\n          'minlength',\n          'maxlength',\n          'default-code',\n          'disabled',\n          'phone-input-placeholder',\n          'label',\n          'label-type',\n          'allow-alphanumeric-input',\n          'restrict-countries',\n          'format-value',\n          'strict-validation',\n          'data-errormessage-type-mismatch',\n        ],\n      });\n    }\n\n    get phoneNumberInputEle() {\n      return this.inputElement?.phoneNumberInputEle;\n    }\n  };\n\nconst {\n  host,\n  label,\n  inputElement,\n  requiredIndicator,\n  inputField,\n  internalComponent,\n  internalComponentAfter,\n  phoneInput,\n  errorMessage,\n  helperText,\n} = {\n  host: { selector: () => ':host' },\n  label: { selector: '::part(label)' },\n  placeholder: { selector: '> input:placeholder-shown' },\n  inputElement: { selector: 'input' },\n  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n  inputField: { selector: () => 'vaadin-text-field::part(input-field)' },\n  internalComponent: {\n    selector: 'descope-phone-field-internal-input-box',\n  },\n  internalComponentAfter: {\n    selector: 'descope-phone-field-internal-input-box::after',\n  },\n  phoneInput: { selector: () => 'descope-text-field' },\n  helperText: { selector: '::part(helper-text)' },\n  errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldInputBoxClass = compose(\n  createStyleMixin({\n    mappings: {\n      fontSize: [\n        host,\n        inputField,\n        {\n          selector: TextFieldClass.componentName,\n          property: TextFieldClass.cssVarList.fontSize,\n        },\n      ],\n      fontFamily: [label, errorMessage, helperText],\n      hostWidth: { ...host, property: 'width' },\n      hostMinWidth: { ...host, property: 'min-width' },\n      hostDirection: { ...host, property: 'direction' },\n\n      inputHorizontalPadding: [\n        { ...phoneInput, property: 'padding-left' },\n        { ...phoneInput, property: 'padding-right' },\n      ],\n\n      labelFontSize: { ...label, property: 'font-size' },\n      labelFontWeight: { ...label, property: 'font-weight' },\n      labelTextColor: [\n        { ...label, property: 'color' },\n        { ...requiredIndicator, property: 'color' },\n      ],\n      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n      errorMessageTextColor: { ...errorMessage, property: 'color' },\n\n      errorMessageIcon: { ...errorMessage, property: 'background-image' },\n      errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n      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'],\n    componentName,\n  })\n);\n\nexport default PhoneFieldInputBoxClass;\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","const NUMERIC_RE = /^\\d+$/;\n\nexport const isNumericValue = (val) => NUMERIC_RE.test(val.replaceAll('+', '').replaceAll('-', ''));\n\nexport const sanitizeCountryCodePrefix = (val) => val.replace(/\\+\\d+-/, '');\n","import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';\nimport { isNumericValue, sanitizeCountryCodePrefix as sanitizeValue } from './helpers';\nimport { PhoneFieldClass } from '../phone-fields/descope-phone-field/PhoneFieldClass';\nimport { PhoneFieldInputBoxClass } from '../phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('hybrid-field');\n\nconst attrs = {\n  shared: [\n    'bordered',\n    'full-width',\n    'label-type',\n    'size',\n    'disabled',\n    'readonly',\n    'required',\n    'st-host-direction',\n    'st-error-message-icon',\n    'st-error-message-icon-size',\n    'st-error-message-icon-padding',\n  ],\n  email: [\n    'label',\n    'placeholder',\n    'data-errormessage-value-missing-email',\n    'data-errormessage-pattern-mismatch-email',\n    'external-input',\n  ],\n  phone: {\n    countryCode: [\n      'phone-input-label',\n      'country-input-label',\n      'country-input-placeholder',\n      'restrict-countries',\n      'default-code',\n      'phone-minlength',\n      'phone-format-value',\n      'phone-strict-validation',\n      'data-errormessage-value-missing-phone',\n    ],\n    inputBox: [\n      'label',\n      'restrict-countries',\n      'default-code',\n      'phone-minlength',\n      'phone-format-value',\n      'phone-strict-validation',\n      'data-errormessage-value-missing-phone',\n    ],\n  },\n};\n\nconst attrMap = {\n  email: {\n    'data-errormessage-value-missing-email': 'data-errormessage-value-missing',\n    'data-errormessage-pattern-mismatch-email': 'data-errormessage-pattern-mismatch',\n  },\n  phone: {\n    'phone-input-label': 'label',\n    'phone-minlength': 'minlength',\n    'phone-format-value': 'format-value',\n    'phone-strict-validation': 'strict-validation',\n    'data-errormessage-value-missing-phone': 'data-errormessage-value-missing',\n  },\n};\n\nconst EMAIL_FIELD = 'descope-email-field';\nconst PHONE_FIELD = 'descope-phone-field';\nconst PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';\n\nconst BaseClass = createBaseClass({\n  componentName,\n  baseSelector: 'div',\n});\n\nclass RawHybridField extends BaseClass {\n  #isReportedValidity = false;\n\n  #selectionStart;\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n    <div class=\"wrapper\">\n      <descope-email-field external-input=\"${this.isExternalInput}\"></descope-email-field>\n      <descope-phone-field allow-alphanumeric-input=\"true\"></descope-phone-field>\n      <descope-phone-input-box-field allow-alphanumeric-input=\"true\"></descope-phone-input-box-field>\n    </div>\n\t\t`;\n\n    injectStyle(\n      `\n      :host {\n        display: inline-flex;\n        box-sizing: border-box;\n        padding: 0;\n        gap: 0;\n      }\n      .wrapper {\n        display: grid;\n        width: 100%;\n      }\n      descope-email-field,\n      descope-phone-field,\n      descope-phone-input-box-field {\n        grid-area: 1/1;\n        width: 100%;\n        height: 100%;\n      }\n      .hidden {\n        visibility: hidden;\n      }\n      `,\n      this\n    );\n  }\n\n  get isExternalInput() {\n    return this.getAttribute('external-input') === 'true';\n  }\n\n  get emailInputEle() {\n    return this.isExternalInput ? this.emailInput.externalInput : this.emailInput.inputElement;\n  }\n\n  get phoneVariant() {\n    const isInputBox = this.getAttribute('phone-variant') === 'inputBox';\n    return isInputBox ? this.phoneInputBoxInput : this.phoneCountryCodeInput;\n  }\n\n  get defaultCode() {\n    const firstItem = this.phoneCountryCodeInput.countryCodes?.[0] || '';\n    return this.getAttribute('default-code') || firstItem;\n  }\n\n  get activeInputEle() {\n    if (this.activeInput === this.emailInput) {\n      return this.emailInputEle;\n    }\n    return this.phoneVariant.phoneNumberInputEle;\n  }\n\n  get value() {\n    return this.activeInput?.value || '';\n  }\n\n  set value(val) {\n    this.handleActiveInput(val);\n    this.activeInput.value = val;\n  }\n\n  async init() {\n    super.init?.();\n\n    this.initInputs();\n    this.updateAttrs();\n    this.toggleInputVisibility();\n\n    await this.waitForInputs();\n\n    this.initInputEles();\n    this.overrideEmailInputType();\n    this.overrideEmailSetAttribute();\n  }\n\n  waitForInputs() {\n    return new Promise((resolve) => {\n      const check = setInterval(() => {\n        if (this.emailInputEle) {\n          clearInterval(check);\n          resolve();\n        }\n      });\n    });\n  }\n\n  initInputs() {\n    this.emailInput = this.shadowRoot.querySelector(EMAIL_FIELD);\n    this.phoneCountryCodeInput = this.shadowRoot.querySelector(PHONE_FIELD);\n    this.phoneInputBoxInput = this.shadowRoot.querySelector(PHONE_INPUT_BOX_FIELD);\n\n    this.inputs = [this.emailInput, this.phoneCountryCodeInput, this.phoneInputBoxInput];\n\n    this.activeInput = this.emailInput;\n  }\n\n  // we need to listen on the inner `input` element itself, otherwise we don't always get an `input` event\n  initInputEles() {\n    const inputEles = [\n      this.emailInputEle,\n      this.phoneCountryCodeInput.phoneNumberInputEle,\n      this.phoneInputBoxInput.phoneNumberInputEle,\n    ];\n\n    inputEles.forEach((ele) => {\n      ele.addEventListener('input', this.onValueChange.bind(this));\n    });\n  }\n\n  overrideEmailInputType() {\n    this.emailInputEle.addEventListener('focus', () => {\n      this.emailInputEle.setAttribute('type', 'text');\n    });\n    this.emailInputEle.addEventListener('blur', () => {\n      setTimeout(() => {\n        this.emailInputEle.setAttribute('type', 'email');\n      });\n    });\n  }\n\n  // We want to prevent Vaadin from changing the input type to `email`\n  // otherwise, we cannot get the selectionStart from the input.\n  overrideEmailSetAttribute() {\n    const origEmailSetAttr = this.emailInput.setAttribute.bind(this.emailInputEle);\n    this.emailInputEle.setAttribute = (name, value) => {\n      if (name !== 'type' || value !== 'email' || !this.emailInput.hasAttribute('focused')) {\n        return origEmailSetAttr(name, value);\n      }\n      return false;\n    };\n  }\n\n  updateAttrs() {\n    forwardAttrs(this, this.emailInput, { includeAttrs: attrs.email, mapAttrs: attrMap.email });\n\n    forwardAttrs(this, this.phoneCountryCodeInput, {\n      includeAttrs: attrs.phone.countryCode,\n      mapAttrs: attrMap.phone,\n    });\n\n    forwardAttrs(this, this.phoneInputBoxInput, {\n      includeAttrs: attrs.phone.inputBox,\n      mapAttrs: attrMap.phone,\n    });\n\n    this.inputs.forEach((input) => forwardAttrs(this, input, { includeAttrs: attrs.shared }));\n\n    setTimeout(() => this.phoneCountryCodeInput.setAttribute('default-code', this.defaultCode));\n  }\n\n  onValueChange() {\n    this.#selectionStart = this.activeInputEle.selectionStart;\n    this.handleActiveInput(this.activeInput.value);\n  }\n\n  handleActiveInput(val) {\n    const expectedActiveInput = isNumericValue(val) ? this.phoneVariant : this.emailInput;\n\n    if (this.activeInput !== expectedActiveInput) {\n      this.setActiveInput(expectedActiveInput);\n    }\n  }\n\n  setActiveInput(expectedActiveInput) {\n    const val = this.activeInput.value;\n    this.activeInput = expectedActiveInput;\n    this.setActiveInputValue(val);\n    if (this.#isReportedValidity) this.activeInput.reportValidity();\n    this.setActiveInputSelectionStart();\n    this.toggleInputVisibility();\n  }\n\n  setActiveInputSelectionStart() {\n    setTimeout(() => {\n      this.activeInputEle.focus();\n      this.activeInputEle.setSelectionRange?.(this.#selectionStart, this.#selectionStart);\n    });\n  }\n\n  setActiveInputValue(val) {\n    const sanitizedVal = sanitizeValue(val);\n    const isPhoneField = this.activeInput.localName === PHONE_FIELD;\n    const value = isPhoneField\n      ? `${this.phoneCountryCodeInput.countryCodeItems}-${sanitizedVal}`\n      : sanitizedVal;\n    this.activeInput.value = value;\n  }\n\n  toggleInputVisibility() {\n    this.inputs.forEach((input) => {\n      input !== this.activeInput ? input.classList.add('hidden') : input.classList.remove('hidden');\n    });\n  }\n\n  reportValidity() {\n    this.#isReportedValidity = true;\n\n    const ele = this.activeInputEle;\n\n    // On reportValidity we want to set the caret at the end of the input value.\n    // Since checkValidity triggers `focus` on the input, it sets the caret at the start of the input,\n    // regardless the existing value.\n    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","/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';\nimport { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\n\nconst emailField = css`\n  :host([dir='rtl']) [part='input-field'] ::slotted(input) {\n    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);\n  }\n\n  :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {\n    --_lumo-text-field-overflow-mask-image: none;\n  }\n`;\n\nregisterStyles('vaadin-email-field', [inputFieldShared, emailField], {\n  moduleId: 'lumo-email-field',\n});\n","/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { css } from 'lit';\n\n// See https://github.com/vaadin/vaadin-text-field/issues/466\nexport const emailFieldStyles = css`\n  :host([dir='rtl']) [part='input-field'] {\n    direction: ltr;\n  }\n\n  :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {\n    direction: rtl;\n    text-align: left;\n  }\n`;\n","/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { defineCustomElement } from '@vaadin/component-base/src/define.js';\nimport { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { emailFieldStyles } from './vaadin-email-field-styles.js';\n\nregisterStyles('vaadin-email-field', emailFieldStyles, { moduleId: 'vaadin-email-field-styles' });\n\n/**\n * `<vaadin-email-field>` is a Web Component for email field control in forms.\n *\n * ```html\n * <vaadin-email-field label=\"Email\"></vaadin-email-field>\n * ```\n *\n * ### Styling\n *\n * `<vaadin-email-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\n * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.\n *\n * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n *\n * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.\n * @fires {Event} change - Fired when the user commits a value change.\n * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.\n * @fires {CustomEvent} value-changed - Fired when the `value` property changes.\n * @fires {CustomEvent} validated - Fired whenever the field is validated.\n *\n * @customElement\n * @extends TextField\n */\nexport class EmailField extends TextField {\n  static get is() {\n    return 'vaadin-email-field';\n  }\n\n  constructor() {\n    super();\n    this._setType('email');\n    this.pattern = '^([a-zA-Z0-9_\\\\.\\\\-+])+@[a-zA-Z0-9\\\\-.]+\\\\.[a-zA-Z0-9\\\\-]{2,}$';\n  }\n\n  /** @protected */\n  ready() {\n    super.ready();\n\n    if (this.inputElement) {\n      this.inputElement.autocapitalize = 'off';\n    }\n  }\n}\n\ndefineCustomElement(EmailField);\n","import {\n  createStyleMixin,\n  draggableMixin,\n  createProxy,\n  proxyInputMixin,\n  componentNameValidationMixin,\n  externalInputMixin,\n} from '../../mixins';\nimport textFieldMappings from '../descope-text-field/textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n  inputFloatingLabelStyle,\n  resetInputLabelPosition,\n  resetInputOverrides,\n  useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('email-field');\n\nconst defaultPattern = \"^[\\\\w\\\\.\\\\%\\\\+\\\\-']+@[\\\\w\\\\.\\\\-]+\\\\.[A-Za-z]{2,}$\";\nconst defaultAutocomplete = 'username';\n\nconst customMixin = (superclass) =>\n  class EmailFieldMixinClass extends superclass {\n    init() {\n      super.init?.();\n\n      // we need to set the pattern on the base element because vaadin-email-field is overriding it\n      this.baseElement.setAttribute('pattern', defaultPattern);\n\n      if (!this.getAttribute('autocomplete')) {\n        this.setAttribute('autocomplete', defaultAutocomplete);\n      }\n\n      this.createExternalInput();\n    }\n  };\n\nexport const EmailFieldClass = compose(\n  createStyleMixin({\n    mappings: textFieldMappings,\n  }),\n  draggableMixin,\n  externalInputMixin({\n    inputType: 'email',\n    inputName: 'email',\n    autocompleteType: 'username',\n    includeAttrs: ['disabled', 'readonly', 'pattern'],\n  }),\n  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n  componentNameValidationMixin,\n  customMixin\n)(\n  createProxy({\n    slots: ['', 'suffix'],\n    wrappedEleName: 'vaadin-email-field',\n    style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${\n          EmailFieldClass.cssVarList.inputOutlineOffset\n        }));\n        box-sizing: border-box;\n\t\t\t}\n      ${resetInputLabelPosition('vaadin-email-field')}\n\t\t\t${useHostExternalPadding(EmailFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}\n      ${inputFloatingLabelStyle()}\n\n      vaadin-email-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-email-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n      :host ::slotted(*) {\n        -webkit-mask-image: none;\n      }\n\n      vaadin-email-field[external-input=\"true\"] > input:not(:placeholder-shown) {\n        opacity: 0;\n      }\n\t\t`,\n    excludeAttrsSync: ['tabindex'],\n    componentName,\n  })\n);\n","import '@vaadin/email-field';\nimport { componentName, EmailFieldClass } from './EmailFieldClass';\n\ncustomElements.define(componentName, EmailFieldClass);\n\nexport { EmailFieldClass, componentName };\n","import '../../../descope-text-field';\n\nimport PhoneFieldInternalInputBox, { componentName } from './PhoneFieldInternalInputBox';\n\ncustomElements.define(componentName, PhoneFieldInternalInputBox);\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":["componentName","observedAttributes","mapAttrs","BaseInputClass","baseSelector","concat","constructor","super","this","innerHTML","textField","querySelector","phoneNumberInputEle","shadowRoot","defaultDialCode","getAttribute","defaultCode","allowAlphanumericInput","minLength","parseInt","maxLength","restrictCountries","split","filter","Boolean","isFormatValue","isStrictValidation","value","parsedVal","country","countryCallingCode","nationalNumber","join","val","init","addEventListener","e","isTrusted","focus","bind","handleFocusEventsDispatching","getValidity","validPhonePattern","stripValue","isRequired","valueMissing","length","tooShort","test","patternMismatch","setSelectionRange","args","attributeChangedCallback","attrName","oldValue","newValue","includes","attr","setAttribute","sanitizedInput","target","sanitizedVal","replace","dialCodePrefixPattern","RegExp","parsed","isValid","countryCode","telDigitsRegExp","char","phoneNumber","reset","input","textVars","cssVarList","host","label","inputElement","requiredIndicator","inputField","internalComponent","internalComponentAfter","phoneInput","errorMessage","helperText","selector","placeholder","PhoneFieldInputBoxClass","mappings","fontSize","property","fontFamily","hostWidth","hostMinWidth","hostDirection","inputHorizontalPadding","labelFontSize","labelFontWeight","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","inputOutlineStyle","inputOutlineColor","inputOutlineWidth","inputOutlineOffset","labelPosition","labelTopPosition","labelHorizontalPosition","inputTransformY","inputTransition","marginInlineStart","valueInputHeight","valueInputMarginBottom","proxyProps","superclass","CountryCodes","template","document","createElement","baseElement","appendChild","content","cloneNode","includeAttrs","slots","wrappedEleName","style","excludeAttrsSync","customElements","define","NUMERIC_RE","attrs","shared","email","phone","inputBox","attrMap","PHONE_FIELD","BaseClass","createBaseClass","HybridFieldClass","componentNameOverride","PhoneFieldClass","attachShadow","mode","isExternalInput","emailInputEle","emailInput","externalInput","phoneVariant","phoneInputBoxInput","phoneCountryCodeInput","firstItem","countryCodes","activeInputEle","activeInput","handleActiveInput","initInputs","updateAttrs","toggleInputVisibility","waitForInputs","initInputEles","overrideEmailInputType","overrideEmailSetAttribute","Promise","resolve","check","setInterval","clearInterval","inputs","forEach","ele","onValueChange","setTimeout","origEmailSetAttr","name","hasAttribute","selectionStart","expectedActiveInput","replaceAll","isNumericValue","setActiveInput","setActiveInputValue","reportValidity","setActiveInputSelectionStart","localName","countryCodeItems","classList","add","remove","origInputType","type","checkValidity","emailField","moduleId","emailFieldStyles","EmailField","is","_setType","pattern","ready","autocapitalize","EmailFieldClass","textFieldMappings","inputType","inputName","autocompleteType","useProxyTargets","createExternalInput","getCountryByCodeId","find","c","code","dialCode","matchingParenthesis","openParenMatches","match","closeParenMatches"],"sourceRoot":""}

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

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2294,7792],{63595:(t,e,o)=>{o.r(e),o.d(e,{TextClass:()=>n.s,componentName:()=>n.T});var n=o(66434);customElements.define(n.T,n.s)},66434:(t,e,o)=>{o.d(e,{T:()=>h,s:()=>p});var n=o(88961),s=o(63200),r=o(25964),i=o(72270);const h=(0,r.xE)("text");class l extends((0,i.qu)({componentName:h,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <slot part="text-wrapper"></slot>\n    ',(0,r.fz)("\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    ",this)}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,r.Ge)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}const p=(0,s.Zz)((0,n.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:{property:"color"},textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),n.VO,n.tQ)(l)},83002:(t,e,o)=>{o.r(e),o.d(e,{LinkClass:()=>w,componentName:()=>p});var n=o(79365),s=o(81365),r=o(66434),i=o(9696),h=o(97810),l=o(25964);const p=(0,h.xE)("link");class c extends((0,s.q)({componentName:p,baseSelector:":host a"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div>\n\t\t\t<descope-text>\n\t\t\t\t<a>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</a>\n\t\t\t</descope-text>\n\t\t</div>\n\t\t",(0,l.fz)("\n    :host {\n\t\t\tdisplay: inline-block;\n      line-height: 1em;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline;\n\t\t}\n      ",this),(0,h.EA)(this,this.shadowRoot.querySelector("a"),{includeAttrs:["href","target","tooltip"],mapAttrs:{tooltip:"title"}}),(0,h.EA)(this,this.shadowRoot.querySelector("descope-text"),{includeAttrs:["mode","variant"]})}}const a={host:{selector:()=>":host"},link:{selector:()=>":host a"},anchor:{},wrapper:{selector:()=>":host > div"},text:{selector:()=>r.s.componentName}},{anchor:d,text:m,host:y,wrapper:x,link:u}=a,w=(0,i.Zz)((0,n.RF)({mappings:{hostWidth:{...y,property:"width"},hostDirection:{...m,property:"direction"},textAlign:x,textDecoration:{...u,property:"text-decoration",fallback:"none"},textColor:[{...d,property:"color"},{...m,property:r.s.cssVarList.textColor}],cursor:d}}),n.VO,n.tQ)(c);o(63595),customElements.define(p,w)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2294,7792],{63595:(t,e,o)=>{o.r(e),o.d(e,{TextClass:()=>n.s,componentName:()=>n.T});var n=o(66434);customElements.define(n.T,n.s)},66434:(t,e,o)=>{o.d(e,{T:()=>h,s:()=>c});var n=o(88961),s=o(63200),r=o(25964),i=o(72270);const h=(0,r.xE)("text");class l extends((0,i.qu)({componentName:h,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <slot part="text-wrapper"></slot>\n    ',(0,r.fz)("\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    ",this)}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,r.Ge)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}const{host:p}={host:{selector:()=>":host"}},c=(0,s.Zz)((0,n.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:[{property:"color"}],textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),n.VO,n.tQ)(l)},83002:(t,e,o)=>{o.r(e),o.d(e,{LinkClass:()=>w,componentName:()=>p});var n=o(79365),s=o(81365),r=o(66434),i=o(9696),h=o(97810),l=o(25964);const p=(0,h.xE)("link");class c extends((0,s.q)({componentName:p,baseSelector:":host a"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div>\n\t\t\t<descope-text>\n\t\t\t\t<a>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</a>\n\t\t\t</descope-text>\n\t\t</div>\n\t\t",(0,l.fz)("\n    :host {\n\t\t\tdisplay: inline-block;\n      line-height: 1em;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline;\n\t\t}\n      ",this),(0,h.EA)(this,this.shadowRoot.querySelector("a"),{includeAttrs:["href","target","tooltip"],mapAttrs:{tooltip:"title"}}),(0,h.EA)(this,this.shadowRoot.querySelector("descope-text"),{includeAttrs:["mode","variant"]})}}const a={host:{selector:()=>":host"},link:{selector:()=>":host a"},anchor:{},wrapper:{selector:()=>":host > div"},text:{selector:()=>r.s.componentName}},{anchor:d,text:m,host:y,wrapper:x,link:u}=a,w=(0,i.Zz)((0,n.RF)({mappings:{hostWidth:{...y,property:"width"},hostDirection:{...m,property:"direction"},textAlign:x,textDecoration:{...u,property:"text-decoration",fallback:"none"},textColor:[{...d,property:"color"},{...m,property:r.s.cssVarList.textColor}],cursor:d}}),n.VO,n.tQ)(c);o(63595),customElements.define(p,w)}}]);
 //# sourceMappingURL=descope-link-index-js.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"descope-link-index-js.js","mappings":"qNAEAA,eAAeC,OAAO,IAAe,I,2FCW9B,MAAMC,GAAgB,QAAiB,QAE9C,MAAMC,WAAgB,QAAgB,CACpCD,gBACAE,aAAc,kBAEd,WAAAC,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,iDAIhD,QAAY,iLASTH,KACL,CAEA,iBAAII,GACF,MAAgD,SAAzCJ,KAAKK,aAAa,kBAC3B,CAEA,IAAAC,GACEP,MAAMO,QAEN,QAAgBN,MAAM,KACpB,MAAMO,IAAgBP,KAAKQ,WAAWC,OACtCT,KAAKU,MAAMC,SAAWJ,GAAeP,KAAKI,cAAgB,OAAS,EAAE,GAEzE,EAGK,MAAMQ,GAAY,SACvB,QAAiB,CACfC,SAAU,CACRC,UAAW,CAAEC,SAAU,IAAM,QAASC,SAAU,SAChDC,cAAe,CAAEF,SAAU,IAAM,QAASC,SAAU,aACpDE,SAAU,CAAC,EACXC,UAAW,CAAEH,SAAU,SACvBI,eAAgB,CAAEJ,SAAU,eAC5BK,kBAAmB,CAAEL,SAAU,kBAC/BM,WAAY,CAAC,EACbC,UAAW,CAAC,EACZC,cAAe,CAAC,EAChBC,WAAY,CAAC,EACbC,UAAW,CAAC,EACZC,WAAY,CAAC,EACbC,YAAa,CAAC,EACdC,YAAa,CAAC,EACdC,YAAa,CAAC,KAGlB,KACA,KArBuB,CAsBvBlC,E,2ICnEK,MAAMD,GAAgB,QAAiB,QAE9C,MAAMoC,WAAgB,EAAAC,EAAA,GAAgB,CAAErC,gBAAeE,aAAc,aACnE,WAAAC,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,kIAUhD,QACE,oIASAH,OAGF,QAAaA,KAAMA,KAAKiC,WAAWC,cAAc,KAAM,CACrDC,aAAc,CAAC,OAAQ,SAAU,WACjCC,SAAU,CACRC,QAAS,YAIb,QAAarC,KAAMA,KAAKiC,WAAWC,cAAc,gBAAiB,CAChEC,aAAc,CAAC,OAAQ,YAE3B,EAGF,MAAMG,EAAY,CAChBC,KAAM,CAAExB,SAAU,IAAM,SACxByB,KAAM,CAAEzB,SAAU,IAAM,WACxB0B,OAAQ,CAAC,EACTC,QAAS,CAAE3B,SAAU,IAAM,eAC3B4B,KAAM,CAAE5B,SAAU,IAAMH,EAAA,EAAUjB,iBAG5B8C,OAAM,OAAM,wBAAqB,GAAKH,EAEjCM,GAAY,SACvB,QAAiB,CACf/B,SAAU,CACRC,UAAW,IAAKyB,EAAMvB,SAAU,SAChCC,cAAe,IAAK,EAAMD,SAAU,aACpCO,UAAWmB,EACXG,eAAgB,IAAK,EAAM7B,SAAU,kBAAmB8B,SAAU,QAClE3B,UAAW,CACT,IAAK,EAAQH,SAAU,SACvB,IAAK,EAAMA,SAAUJ,EAAA,EAAUmC,WAAW5B,YAE5C6B,OAAQ,KAGZ,KACA,KAfuB,CAgBvBjB,G,SCxEFtC,eAAeC,OAAOC,EAAeiD,E","sources":["webpack://@descope/web-components-ui/../components/descope-text/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-text/src/component/TextClass.js","webpack://@descope/web-components-ui/./src/components/descope-link/LinkClass.js","webpack://@descope/web-components-ui/./src/components/descope-link/index.js"],"sourcesContent":["import { componentName, TextClass } from './TextClass';\n\ncustomElements.define(componentName, TextClass);\n\nexport { TextClass, componentName };\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  getComponentName,\n  injectStyle,\n  observeChildren,\n} from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\n\nexport const componentName = getComponentName('text');\n\nclass RawText extends createBaseClass({\n  componentName,\n  baseSelector: ':host > slot',\n}) {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n    <slot part=\"text-wrapper\"></slot>\n    `;\n\n    injectStyle(`\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    `, this);\n  }\n\n  get hideWhenEmpty() {\n    return this.getAttribute('hide-when-empty') === 'true';\n  }\n\n  init() {\n    super.init();\n\n    observeChildren(this, () => {\n      const hasChildren = !!this.childNodes.length;\n      this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';\n    });\n  }\n}\n\nexport const TextClass = compose(\n  createStyleMixin({\n    mappings: {\n      hostWidth: { selector: () => ':host', property: 'width' },\n      hostDirection: { selector: () => ':host', property: 'direction' },\n      fontSize: {},\n      textColor: { property: 'color' },\n      textLineHeight: { property: 'line-height' },\n      textLetterSpacing: { property: 'letter-spacing' },\n      textShadow: {},\n      textAlign: {},\n      textTransform: {},\n      fontFamily: {},\n      fontStyle: {},\n      fontWeight: {},\n      borderWidth: {},\n      borderStyle: {},\n      borderColor: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawText);\n","import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { TextClass } from '@descope-ui/descope-text/class';\nimport { compose } from '../../helpers';\nimport { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('link');\n\nclass RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }) {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<div>\n\t\t\t<descope-text>\n\t\t\t\t<a>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</a>\n\t\t\t</descope-text>\n\t\t</div>\n\t\t`;\n\n    injectStyle(\n      `\n    :host {\n\t\t\tdisplay: inline-block;\n      line-height: 1em;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline;\n\t\t}\n      `,\n      this\n    );\n\n    forwardAttrs(this, this.shadowRoot.querySelector('a'), {\n      includeAttrs: ['href', 'target', 'tooltip'],\n      mapAttrs: {\n        tooltip: 'title',\n      },\n    });\n\n    forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {\n      includeAttrs: ['mode', 'variant'],\n    });\n  }\n}\n\nconst selectors = {\n  host: { selector: () => ':host' },\n  link: { selector: () => ':host a' },\n  anchor: {},\n  wrapper: { selector: () => ':host > div' },\n  text: { selector: () => TextClass.componentName },\n};\n\nconst { anchor, text, host, wrapper, link } = selectors;\n\nexport const LinkClass = compose(\n  createStyleMixin({\n    mappings: {\n      hostWidth: { ...host, property: 'width' },\n      hostDirection: { ...text, property: 'direction' },\n      textAlign: wrapper,\n      textDecoration: { ...link, property: 'text-decoration', fallback: 'none' },\n      textColor: [\n        { ...anchor, property: 'color' },\n        { ...text, property: TextClass.cssVarList.textColor },\n      ],\n      cursor: anchor,\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawLink);\n","import { componentName, LinkClass } from './LinkClass';\nimport '@descope-ui/descope-text';\n\ncustomElements.define(componentName, LinkClass);\n\nexport { LinkClass, componentName };\n"],"names":["customElements","define","componentName","RawText","baseSelector","constructor","super","this","attachShadow","mode","innerHTML","hideWhenEmpty","getAttribute","init","hasChildren","childNodes","length","style","display","TextClass","mappings","hostWidth","selector","property","hostDirection","fontSize","textColor","textLineHeight","textLetterSpacing","textShadow","textAlign","textTransform","fontFamily","fontStyle","fontWeight","borderWidth","borderStyle","borderColor","RawLink","createBaseClass","shadowRoot","querySelector","includeAttrs","mapAttrs","tooltip","selectors","host","link","anchor","wrapper","text","LinkClass","textDecoration","fallback","cssVarList","cursor"],"sourceRoot":""}
+{"version":3,"file":"descope-link-index-js.js","mappings":"qNAEAA,eAAeC,OAAO,IAAe,I,2FCW9B,MAAMC,GAAgB,QAAiB,QAE9C,MAAMC,WAAgB,QAAgB,CACpCD,gBACAE,aAAc,kBAEd,WAAAC,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,iDAIhD,QAAY,iLASTH,KACL,CAEA,iBAAII,GACF,MAAgD,SAAzCJ,KAAKK,aAAa,kBAC3B,CAEA,IAAAC,GACEP,MAAMO,QAEN,QAAgBN,MAAM,KACpB,MAAMO,IAAgBP,KAAKQ,WAAWC,OACtCT,KAAKU,MAAMC,SAAWJ,GAAeP,KAAKI,cAAgB,OAAS,EAAE,GAEzE,EAGF,MAAM,KAAEQ,GAAS,CACfA,KAAM,CAAEC,SAAU,IAAM,UAGbC,GAAY,SACvB,QAAiB,CACfC,SAAU,CACRC,UAAW,CAAEH,SAAU,IAAM,QAASI,SAAU,SAChDC,cAAe,CAAEL,SAAU,IAAM,QAASI,SAAU,aACpDE,SAAU,CAAC,EACXC,UAAW,CACT,CAAEH,SAAU,UAEdI,eAAgB,CAAEJ,SAAU,eAC5BK,kBAAmB,CAAEL,SAAU,kBAC/BM,WAAY,CAAC,EACbC,UAAW,CAAC,EACZC,cAAe,CAAC,EAChBC,WAAY,CAAC,EACbC,UAAW,CAAC,EACZC,WAAY,CAAC,EACbC,YAAa,CAAC,EACdC,YAAa,CAAC,EACdC,YAAa,CAAC,KAGlB,KACA,KAvBuB,CAwBvBnC,E,2ICzEK,MAAMD,GAAgB,QAAiB,QAE9C,MAAMqC,WAAgB,EAAAC,EAAA,GAAgB,CAAEtC,gBAAeE,aAAc,aACnE,WAAAC,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,kIAUhD,QACE,oIASAH,OAGF,QAAaA,KAAMA,KAAKkC,WAAWC,cAAc,KAAM,CACrDC,aAAc,CAAC,OAAQ,SAAU,WACjCC,SAAU,CACRC,QAAS,YAIb,QAAatC,KAAMA,KAAKkC,WAAWC,cAAc,gBAAiB,CAChEC,aAAc,CAAC,OAAQ,YAE3B,EAGF,MAAMG,EAAY,CAChB3B,KAAM,CAAEC,SAAU,IAAM,SACxB2B,KAAM,CAAE3B,SAAU,IAAM,WACxB4B,OAAQ,CAAC,EACTC,QAAS,CAAE7B,SAAU,IAAM,eAC3B8B,KAAM,CAAE9B,SAAU,IAAMC,EAAA,EAAUnB,iBAG5B8C,OAAM,OAAM,wBAAqB,GAAKF,EAEjCK,GAAY,SACvB,QAAiB,CACf7B,SAAU,CACRC,UAAW,IAAKJ,EAAMK,SAAU,SAChCC,cAAe,IAAK,EAAMD,SAAU,aACpCO,UAAWkB,EACXG,eAAgB,IAAK,EAAM5B,SAAU,kBAAmB6B,SAAU,QAClE1B,UAAW,CACT,IAAK,EAAQH,SAAU,SACvB,IAAK,EAAMA,SAAUH,EAAA,EAAUiC,WAAW3B,YAE5C4B,OAAQ,KAGZ,KACA,KAfuB,CAgBvBhB,G,SCxEFvC,eAAeC,OAAOC,EAAeiD,E","sources":["webpack://@descope/web-components-ui/../components/descope-text/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-text/src/component/TextClass.js","webpack://@descope/web-components-ui/./src/components/descope-link/LinkClass.js","webpack://@descope/web-components-ui/./src/components/descope-link/index.js"],"sourcesContent":["import { componentName, TextClass } from './TextClass';\n\ncustomElements.define(componentName, TextClass);\n\nexport { TextClass, componentName };\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  getComponentName,\n  injectStyle,\n  observeChildren,\n} from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\n\nexport const componentName = getComponentName('text');\n\nclass RawText extends createBaseClass({\n  componentName,\n  baseSelector: ':host > slot',\n}) {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n    <slot part=\"text-wrapper\"></slot>\n    `;\n\n    injectStyle(`\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    `, this);\n  }\n\n  get hideWhenEmpty() {\n    return this.getAttribute('hide-when-empty') === 'true';\n  }\n\n  init() {\n    super.init();\n\n    observeChildren(this, () => {\n      const hasChildren = !!this.childNodes.length;\n      this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';\n    });\n  }\n}\n\nconst { host } = {\n  host: { selector: () => ':host' }\n}\n\nexport const TextClass = compose(\n  createStyleMixin({\n    mappings: {\n      hostWidth: { selector: () => ':host', property: 'width' },\n      hostDirection: { selector: () => ':host', property: 'direction' },\n      fontSize: {},\n      textColor: [\n        { property: 'color' }\n      ],\n      textLineHeight: { property: 'line-height' },\n      textLetterSpacing: { property: 'letter-spacing' },\n      textShadow: {},\n      textAlign: {},\n      textTransform: {},\n      fontFamily: {},\n      fontStyle: {},\n      fontWeight: {},\n      borderWidth: {},\n      borderStyle: {},\n      borderColor: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawText);\n","import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { TextClass } from '@descope-ui/descope-text/class';\nimport { compose } from '../../helpers';\nimport { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('link');\n\nclass RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }) {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<div>\n\t\t\t<descope-text>\n\t\t\t\t<a>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</a>\n\t\t\t</descope-text>\n\t\t</div>\n\t\t`;\n\n    injectStyle(\n      `\n    :host {\n\t\t\tdisplay: inline-block;\n      line-height: 1em;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline;\n\t\t}\n      `,\n      this\n    );\n\n    forwardAttrs(this, this.shadowRoot.querySelector('a'), {\n      includeAttrs: ['href', 'target', 'tooltip'],\n      mapAttrs: {\n        tooltip: 'title',\n      },\n    });\n\n    forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {\n      includeAttrs: ['mode', 'variant'],\n    });\n  }\n}\n\nconst selectors = {\n  host: { selector: () => ':host' },\n  link: { selector: () => ':host a' },\n  anchor: {},\n  wrapper: { selector: () => ':host > div' },\n  text: { selector: () => TextClass.componentName },\n};\n\nconst { anchor, text, host, wrapper, link } = selectors;\n\nexport const LinkClass = compose(\n  createStyleMixin({\n    mappings: {\n      hostWidth: { ...host, property: 'width' },\n      hostDirection: { ...text, property: 'direction' },\n      textAlign: wrapper,\n      textDecoration: { ...link, property: 'text-decoration', fallback: 'none' },\n      textColor: [\n        { ...anchor, property: 'color' },\n        { ...text, property: TextClass.cssVarList.textColor },\n      ],\n      cursor: anchor,\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawLink);\n","import { componentName, LinkClass } from './LinkClass';\nimport '@descope-ui/descope-text';\n\ncustomElements.define(componentName, LinkClass);\n\nexport { LinkClass, componentName };\n"],"names":["customElements","define","componentName","RawText","baseSelector","constructor","super","this","attachShadow","mode","innerHTML","hideWhenEmpty","getAttribute","init","hasChildren","childNodes","length","style","display","host","selector","TextClass","mappings","hostWidth","property","hostDirection","fontSize","textColor","textLineHeight","textLetterSpacing","textShadow","textAlign","textTransform","fontFamily","fontStyle","fontWeight","borderWidth","borderStyle","borderColor","RawLink","createBaseClass","shadowRoot","querySelector","includeAttrs","mapAttrs","tooltip","selectors","link","anchor","wrapper","text","LinkClass","textDecoration","fallback","cssVarList","cursor"],"sourceRoot":""}

package/dist/umd/descope-recovery-codes.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2294,9175],{63595:(t,e,n)=>{n.r(e),n.d(e,{TextClass:()=>o.s,componentName:()=>o.T});var o=n(66434);customElements.define(o.T,o.s)},66434:(t,e,n)=>{n.d(e,{T:()=>c,s:()=>l});var o=n(88961),i=n(63200),s=n(25964),r=n(72270);const c=(0,s.xE)("text");class a extends((0,r.qu)({componentName:c,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <slot part="text-wrapper"></slot>\n    ',(0,s.fz)("\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    ",this)}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,s.Ge)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}const{host:p}={host:{selector:()=>":host"}},l=(0,i.Zz)((0,o.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:[{property:"color"}],textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),o.VO,o.tQ)(a)},75226:(t,e,n)=>{n.r(e),n.d(e,{RecoveryCodesClass:()=>l,componentName:()=>a}),n(63595),n(37182),n(95260);var o=n(88961),i=n(63200),s=n(25964),r=n(72270),c=n(66434);const a=(0,s.xE)("recovery-codes");class p extends((0,r.qu)({componentName:a,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n      <div class="wrapper">\n        <div class="list"></div>\n        <descope-text class="icon-wrapper">\n          <vaadin-icon class="icon" icon="vaadin:copy-o" title="Copy"></vaadin-icon>\n        </descope-text>\n      </div>\n    ',(0,s.fz)("\n      :host {\n        display: inline-block;\n        position: relative;\n      }\n      .wrapper {\n        display: flex;\n        justify-content: space-between;\n      }\n      .list {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n      }\n      descope-text span {\n        display: inline-flex;\n        align-items: center;\n        width: fit-content;\n      }\n      descope-text span::before {\n        content: '\\02022';\n        transform: translateY(-0.06em);\n      }\n      vaadin-icon {\n        cursor: pointer;\n      }\n      .copied {\n        cursor: initial;\n      }\n      .icon-wrapper {\n        align-self: flex-start;\n      }\n    ",this)}get variant(){return this.getAttribute("variant")}get mode(){return this.getAttribute("mode")}init(){super.init(),this.list=this.shadowRoot.querySelector(".list"),this.icon=this.shadowRoot.querySelector(".icon"),this.iconWrapper=this.shadowRoot.querySelector(".icon-wrapper"),this.icon.addEventListener("click",this.onCopy.bind(this)),(0,s.EA)(this,this.iconWrapper,{includeAttrs:["variant","mode"]})}onCopy(){navigator.clipboard.writeText(String(this.data.map((t=>t.value)).join("\n"))),this.icon.setAttribute("icon","vaadin:check-circle-o"),this.icon.setAttribute("title","Copied"),this.icon.classList.add("copied"),setTimeout((()=>{this.icon.setAttribute("icon","vaadin:copy-o"),this.icon.setAttribute("title","Copy"),this.icon.classList.remove("copied")}),5e3)}}const l=(0,i.Zz)((0,o.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostMinWidth:{selector:()=>":host",property:"min-width"},hostDirection:[{selector:()=>":host",property:"direction"},{selector:()=>c.s.componentName,property:c.s.cssVarList.hostDirection}],textAlign:{selector:()=>".list",property:"align-items"},iconColor:{selector:()=>"vaadin-icon",property:"color"},iconSize:{selector:()=>"vaadin-icon",property:"font-size"},iconGap:{selector:()=>".wrapper",property:"gap"},bulletGap:{selector:()=>"descope-text span",property:"gap"}}}),(0,o.t$)({itemRenderer:({value:t},e,n)=>`\n    <descope-text variant="${n.variant}" mode="${n.mode}">\n      <span>${t}</span>\n    </descope-text>\n  `,rerenderAttrsList:["variant","mode"],targetSelector:".list",sortFn:(t,e)=>t.value.localeCompare(e.value)}),o.VO,o.tQ)(p);customElements.define(a,l)}}]);
+//# sourceMappingURL=descope-recovery-codes.js.map

package/dist/umd/descope-recovery-codes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"descope-recovery-codes.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-text/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-text/src/component/TextClass.js","webpack://@descope/web-components-ui/../components/descope-recovery-codes/src/component/RecoveryCodesClass.js","webpack://@descope/web-components-ui/../components/descope-recovery-codes/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-recovery-codes/src/component/index.js"],"sourcesContent":["import { componentName, TextClass } from './TextClass';\n\ncustomElements.define(componentName, TextClass);\n\nexport { TextClass, componentName };\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  getComponentName,\n  injectStyle,\n  observeChildren,\n} from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\n\nexport const componentName = getComponentName('text');\n\nclass RawText extends createBaseClass({\n  componentName,\n  baseSelector: ':host > slot',\n}) {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n    <slot part=\"text-wrapper\"></slot>\n    `;\n\n    injectStyle(`\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    `, this);\n  }\n\n  get hideWhenEmpty() {\n    return this.getAttribute('hide-when-empty') === 'true';\n  }\n\n  init() {\n    super.init();\n\n    observeChildren(this, () => {\n      const hasChildren = !!this.childNodes.length;\n      this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';\n    });\n  }\n}\n\nconst { host } = {\n  host: { selector: () => ':host' }\n}\n\nexport const TextClass = compose(\n  createStyleMixin({\n    mappings: {\n      hostWidth: { selector: () => ':host', property: 'width' },\n      hostDirection: { selector: () => ':host', property: 'direction' },\n      fontSize: {},\n      textColor: [\n        { property: 'color' }\n      ],\n      textLineHeight: { property: 'line-height' },\n      textLetterSpacing: { property: 'letter-spacing' },\n      textShadow: {},\n      textAlign: {},\n      textTransform: {},\n      fontFamily: {},\n      fontStyle: {},\n      fontWeight: {},\n      borderWidth: {},\n      borderStyle: {},\n      borderColor: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawText);\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n  createDynamicDataMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  forwardAttrs,\n  getComponentName,\n  injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { sortData } from './helpers';\nimport { TextClass } from '@descope-ui/descope-text/class';\n\nexport const componentName = getComponentName('recovery-codes');\n\nconst itemRenderer = ({ value }, _, ref) => {\n  return `\n    <descope-text variant=\"${ref.variant}\" mode=\"${ref.mode}\">\n      <span>${value}</span>\n    </descope-text>\n  `;\n};\n\nclass RawRecoveryCodes extends createBaseClass({\n  componentName,\n  baseSelector: ':host > div',\n}) {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n      <div class=\"wrapper\">\n        <div class=\"list\"></div>\n        <descope-text class=\"icon-wrapper\">\n          <vaadin-icon class=\"icon\" icon=\"vaadin:copy-o\" title=\"Copy\"></vaadin-icon>\n        </descope-text>\n      </div>\n    `;\n\n    injectStyle(\n      `\n      :host {\n        display: inline-block;\n        position: relative;\n      }\n      .wrapper {\n        display: flex;\n        justify-content: space-between;\n      }\n      .list {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n      }\n      descope-text span {\n        display: inline-flex;\n        align-items: center;\n        width: fit-content;\n      }\n      descope-text span::before {\n        content: '\\\\02022';\n        transform: translateY(-0.06em);\n      }\n      vaadin-icon {\n        cursor: pointer;\n      }\n      .copied {\n        cursor: initial;\n      }\n      .icon-wrapper {\n        align-self: flex-start;\n      }\n    `,\n      this,\n    );\n  }\n\n  get variant() {\n    return this.getAttribute('variant');\n  }\n\n  get mode() {\n    return this.getAttribute('mode');\n  }\n\n  init() {\n    super.init();\n\n    this.list = this.shadowRoot.querySelector('.list');\n    this.icon = this.shadowRoot.querySelector('.icon')\n    this.iconWrapper = this.shadowRoot.querySelector('.icon-wrapper')\n\n    this.icon.addEventListener('click', this.onCopy.bind(this));\n\n    forwardAttrs(this, this.iconWrapper, { includeAttrs: ['variant', 'mode'] });\n  }\n\n  onCopy() {\n    navigator.clipboard.writeText(\n      String(this.data.map((rc) => rc.value).join('\\n')),\n    );\n\n    this.icon.setAttribute('icon', 'vaadin:check-circle-o');\n    this.icon.setAttribute('title', 'Copied');\n    this.icon.classList.add('copied');\n\n    setTimeout(() => {\n      this.icon.setAttribute('icon', 'vaadin:copy-o');\n      this.icon.setAttribute('title', 'Copy');\n      this.icon.classList.remove('copied');\n    }, 5000);\n  }\n}\n\nexport const RecoveryCodesClass = compose(\n  createStyleMixin({\n    mappings: {\n      hostWidth: { selector: () => ':host', property: 'width' },\n      hostMinWidth: { selector: () => ':host', property: 'min-width' },\n      hostDirection: [\n        { selector: () => ':host', property: 'direction' },\n        {\n          selector: () => TextClass.componentName,\n          property: TextClass.cssVarList.hostDirection\n        },\n      ],\n      textAlign: { selector: () => '.list', property: 'align-items' },\n      iconColor: { selector: () => 'vaadin-icon', property: 'color' },\n      iconSize: { selector: () => 'vaadin-icon', property: 'font-size' },\n      iconGap: { selector: () => '.wrapper', property: 'gap' },\n      bulletGap: { selector: () => 'descope-text span', property: 'gap' }\n    },\n  }),\n  createDynamicDataMixin({\n    itemRenderer,\n    rerenderAttrsList: ['variant', 'mode'],\n    targetSelector: '.list',\n    sortFn: sortData\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawRecoveryCodes);\n","export const sortData = (a, b) => a.value.localeCompare(b.value)\n","import '@descope-ui/descope-text';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, RecoveryCodesClass } from './RecoveryCodesClass';\n\ncustomElements.define(componentName, RecoveryCodesClass);\n\nexport { RecoveryCodesClass, componentName };\n"],"names":["customElements","define","componentName","RawText","baseSelector","constructor","super","this","attachShadow","mode","innerHTML","hideWhenEmpty","getAttribute","init","hasChildren","childNodes","length","style","display","host","selector","TextClass","mappings","hostWidth","property","hostDirection","fontSize","textColor","textLineHeight","textLetterSpacing","textShadow","textAlign","textTransform","fontFamily","fontStyle","fontWeight","borderWidth","borderStyle","borderColor","RawRecoveryCodes","variant","list","shadowRoot","querySelector","icon","iconWrapper","addEventListener","onCopy","bind","includeAttrs","navigator","clipboard","writeText","String","data","map","rc","value","join","setAttribute","classList","add","setTimeout","remove","RecoveryCodesClass","hostMinWidth","cssVarList","iconColor","iconSize","iconGap","bulletGap","itemRenderer","_","ref","rerenderAttrsList","targetSelector","sortFn","a","b","localeCompare"],"sourceRoot":""}

package/dist/umd/descope-security-questions-verify-index-js.js

@@ -34,5 +34,5 @@
         </div>
       </div>
       <slot name="tooltip"></slot>
-    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new s.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,i.X)(h)},37436:(e,t,r)=>{r.d(t,{a:()=>i});var n=r(44218);const i=e=>class extends((0,n.R)(e)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(e){this.__dataValue=e}_inputElementChanged(e){super._inputElementChanged(e),e&&(e.value&&e.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),e.value=""),this.value&&(e.value=this.value))}_setFocused(e){super._setFocused(e),!e&&document.hasFocus()&&this.validate()}_onInput(e){super._onInput(e),this.invalid&&this.validate()}_valueChanged(e,t){super._valueChanged(e,t),void 0!==t&&this.invalid&&this.validate()}}},38479:(e,t,r)=>{r.r(t),r.d(t,{SecurityQuestionsVerifyClass:()=>b,componentName:()=>d});var n=r(81365),i=r(9696),o=r(97810),s=r(79365),a=r(66434),l=r(79275),p=r(25964);const d=(0,o.xE)("security-questions-verify"),c=["full-width","readonly","size","answer-placeholder","answer-data-errormessage-value-missing","st-error-message-icon","st-error-message-icon-size","st-error-message-icon-padding"],u=["question-mode"],h={"answer-placeholder":"placeholder","answer-data-errormessage-value-missing":"data-errormessage-value-missing","question-mode":"mode"},y=[...c,...u],g=["questions"];class m extends((0,n.q)({componentName:d,baseSelector:"div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n    <div></div>\n\t\t",(0,p.fz)("\n      :host {\n        display: inline-flex;\n      }\n\n      div {\n        display: flex;\n        flex-direction: column;\n      }\n        ",this)}#e(){const e=this.questions.map((({id:e,text:t})=>`\n      <div class="question-wrapper">\n      <descope-text\n        data-id="${e}"\n      >${t}</descope-text>\n\n      <descope-text-field\n        data-id="${e}"\n        required="true"\n        bordered="true"\n      ></descope-text-field>\n    </div>\n      `));this.baseElement.innerHTML=e.join("<spacer></spacer><descope-divider></descope-divider><spacer></spacer>"),this.#t(y),this.texts.forEach((e=>{const t=this.textFields.find((t=>t.getAttribute("data-id")===e.getAttribute("data-id")));t&&(e.onclick=t.focus.bind(t))}))}reportValidity(){return this.textFields.reverse().forEach((e=>e.reportValidity())),this.checkValidity()}checkValidity(){return this.textFields.every((e=>e.checkValidity()))}get questions(){try{return JSON.parse(this.getAttribute("questions"))||[]}catch(e){return console.error(d,"Error parsing questions attribute",e),[]}}get texts(){return Array.from(this.baseElement.querySelectorAll("descope-text"))}get textFields(){return Array.from(this.baseElement.querySelectorAll("descope-text-field"))}get elements(){return Array.from(this.baseElement.querySelectorAll("descope-text, descope-text-field"))}get value(){return this.textFields.map((e=>({id:e.getAttribute("data-id"),answer:e.value})))}set value(e=[]){e.forEach((({id:e,answer:t})=>{const r=this.textFields.find((t=>t.getAttribute("data-id")===e));r&&(r.value=t)}))}#r(e,t,r){null===r?e.removeAttribute(t):e.setAttribute(t,r)}#n(e){switch(!0){case c.includes(e):return this.textFields;case u.includes(e):return this.texts;default:return[]}}#t(e){e.forEach((e=>{this.#n(e).forEach((t=>{this.#r(t,h[e]||e,this.getAttribute(e))}))}))}init(){super.init?.(),(0,o.mx)(this,(()=>{this.#e()}),{includeAttrs:g}),(0,o.mx)(this,this.#t.bind(this),{includeAttrs:y})}}const b=(0,i.Zz)((0,s.RF)({componentNameOverride:(0,o.xE)("input-wrapper")}),(0,s.RF)({mappings:{hostWidth:[{selector:()=>":host",property:"width"},{property:"width"}],hostDirection:[{selector:()=>":host",property:"direction"},{selector:()=>a.s.componentName,property:a.s.cssVarList.hostDirection},{selector:()=>l.w.componentName,property:l.w.cssVarList.hostDirection}],gap:{selector:()=>"div",property:"gap"},questionTextAlign:{selector:()=>a.s.componentName,property:a.s.cssVarList.textAlign},questionFontSize:{selector:()=>a.s.componentName,property:a.s.cssVarList.fontSize},questionFontFamily:{selector:()=>a.s.componentName,property:a.s.cssVarList.fontFamily},questionCursor:{selector:()=>a.s.componentName,property:"cursor"},errorMessageIcon:{selector:()=>a.s.componentName,property:a.s.cssVarList.errorMessageIcon},errorMessageIconSize:{selector:()=>a.s.componentName,property:a.s.cssVarList.errorMessageSize},errorMessageIconPadding:{selector:()=>a.s.componentName,property:a.s.cssVarList.errorMessagePadding},errorMessageIconRepeat:{selector:()=>a.s.componentName,property:a.s.cssVarList.errorMessageRepeat},errorMessageIconPosition:{selector:()=>a.s.componentName,property:a.s.cssVarList.errorMessagePosition},errorMessageFontSize:{selector:()=>a.s.componentName,property:a.s.cssVarList.errorMessageFontSize}}}),s.VO,s.tQ)(m);r(63595),r(21374),customElements.define(d,b)},52733:(e,t,r)=>{r(27397);var n=r(47642);(0,r(87550).SF)("vaadin-text-field",n.k,{moduleId:"lumo-text-field-styles"}),r(27136)},63595:(e,t,r)=>{r.r(t),r.d(t,{TextClass:()=>n.s,componentName:()=>n.T});var n=r(66434);customElements.define(n.T,n.s)},66434:(e,t,r)=>{r.d(t,{T:()=>a,s:()=>p});var n=r(88961),i=r(63200),o=r(25964),s=r(72270);const a=(0,o.xE)("text");class l extends((0,s.qu)({componentName:a,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <slot part="text-wrapper"></slot>\n    ',(0,o.fz)("\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    ",this)}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,o.Ge)(this,(()=>{const e=!!this.childNodes.length;this.style.display=!e&&this.hideWhenEmpty?"none":""}))}}const p=(0,i.Zz)((0,n.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:{property:"color"},textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),n.VO,n.tQ)(l)},73551:(e,t,r)=>{r.d(t,{$J:()=>u,I4:()=>s,Kl:()=>h,LJ:()=>c,Qv:()=>o,X6:()=>l,cy:()=>n,fu:()=>p,kG:()=>d,lS:()=>a,zm:()=>i});const n=e=>`\n    :host {\n        padding: calc(var(${e.inputOutlineWidth}) + var(${e.inputOutlineOffset}))\n    }\n`,i=e=>`\n    ${e} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=e=>`\n    ${e}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,s=e=>`\n    ${e} > label,\n    ${e}::part(label),\n    ${e}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,a=(e,t="input")=>`\n    ${e}[disabled] > ${t}:placeholder-shown,\n\t${e}[readonly] > ${t}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,l=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=e=>`\n    ${e}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=e=>`\n    ${e}::part(input-field)::after {\n        background: none;\n    }\n`,c=(e,t)=>`\n    ${i(e)}\n    ${s(e)}\n    ${a(e)}\n    ${o(e)}\n    ${((e,t)=>`\n    ${e} input:-webkit-autofill,\n    ${e} input:-webkit-autofill::first-line,\n    ${e} input:-webkit-autofill:hover,\n    ${e} input:-webkit-autofill:active,\n    ${e} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${t.inputValueTextColor});\n        box-shadow: 0 0 0 var(${t.inputHeight}) var(${t.inputBackgroundColor}) inset;\n    }\n`)(e,t)}\n    ${d(e)}\n    ${(e=>`\n    ${e}::before {\n\t\theight: unset;\n\t}\n`)(e)}\n    ${(e=>`\n    ${e} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(e)}\n    ${(e=>`\n    ${e}::part(input-field)::after {\n        border: none;\n    }\n`)(e)}\n`,u=e=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${e} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '},79275:(e,t,r)=>{r.d(t,{T:()=>l,w:()=>d});var n=r(79365),i=r(6424),o=r(9696),s=r(97810),a=r(73551);const l=(0,s.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,o.Zz)((0,n.RF)({mappings:i.A}),n.VO,(0,n.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),n.tQ,(e=>class extends e{static get observedAttributes(){return p.concat(e.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(e){if(!e)return void this.icon?.remove();const t={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},r={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...t}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,r),setTimeout((()=>{Object.assign(this.icon,t)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(e,t,r){super.attributeChangeCallback?.(e,t,r),"type"===e&&this.baseElement._setType(r),t!==r&&("label-type"===e?"floating"===r?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===e&&this.renderCopyToClipboard("true"===r))}}))((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(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(d.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,a.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))}}]);
+    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new s.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,i.X)(h)},37436:(e,t,r)=>{r.d(t,{a:()=>i});var n=r(44218);const i=e=>class extends((0,n.R)(e)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(e){this.__dataValue=e}_inputElementChanged(e){super._inputElementChanged(e),e&&(e.value&&e.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),e.value=""),this.value&&(e.value=this.value))}_setFocused(e){super._setFocused(e),!e&&document.hasFocus()&&this.validate()}_onInput(e){super._onInput(e),this.invalid&&this.validate()}_valueChanged(e,t){super._valueChanged(e,t),void 0!==t&&this.invalid&&this.validate()}}},38479:(e,t,r)=>{r.r(t),r.d(t,{SecurityQuestionsVerifyClass:()=>b,componentName:()=>d});var n=r(81365),i=r(9696),o=r(97810),s=r(79365),a=r(66434),l=r(79275),p=r(25964);const d=(0,o.xE)("security-questions-verify"),c=["full-width","readonly","size","answer-placeholder","answer-data-errormessage-value-missing","st-error-message-icon","st-error-message-icon-size","st-error-message-icon-padding"],u=["question-mode"],h={"answer-placeholder":"placeholder","answer-data-errormessage-value-missing":"data-errormessage-value-missing","question-mode":"mode"},y=[...c,...u],g=["questions"];class m extends((0,n.q)({componentName:d,baseSelector:"div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n    <div></div>\n\t\t",(0,p.fz)("\n      :host {\n        display: inline-flex;\n      }\n\n      div {\n        display: flex;\n        flex-direction: column;\n      }\n        ",this)}#e(){const e=this.questions.map((({id:e,text:t})=>`\n      <div class="question-wrapper">\n      <descope-text\n        data-id="${e}"\n      >${t}</descope-text>\n\n      <descope-text-field\n        data-id="${e}"\n        required="true"\n        bordered="true"\n      ></descope-text-field>\n    </div>\n      `));this.baseElement.innerHTML=e.join("<spacer></spacer><descope-divider></descope-divider><spacer></spacer>"),this.#t(y),this.texts.forEach((e=>{const t=this.textFields.find((t=>t.getAttribute("data-id")===e.getAttribute("data-id")));t&&(e.onclick=t.focus.bind(t))}))}reportValidity(){return this.textFields.reverse().forEach((e=>e.reportValidity())),this.checkValidity()}checkValidity(){return this.textFields.every((e=>e.checkValidity()))}get questions(){try{return JSON.parse(this.getAttribute("questions"))||[]}catch(e){return console.error(d,"Error parsing questions attribute",e),[]}}get texts(){return Array.from(this.baseElement.querySelectorAll("descope-text"))}get textFields(){return Array.from(this.baseElement.querySelectorAll("descope-text-field"))}get elements(){return Array.from(this.baseElement.querySelectorAll("descope-text, descope-text-field"))}get value(){return this.textFields.map((e=>({id:e.getAttribute("data-id"),answer:e.value})))}set value(e=[]){e.forEach((({id:e,answer:t})=>{const r=this.textFields.find((t=>t.getAttribute("data-id")===e));r&&(r.value=t)}))}#r(e,t,r){null===r?e.removeAttribute(t):e.setAttribute(t,r)}#n(e){switch(!0){case c.includes(e):return this.textFields;case u.includes(e):return this.texts;default:return[]}}#t(e){e.forEach((e=>{this.#n(e).forEach((t=>{this.#r(t,h[e]||e,this.getAttribute(e))}))}))}init(){super.init?.(),(0,o.mx)(this,(()=>{this.#e()}),{includeAttrs:g}),(0,o.mx)(this,this.#t.bind(this),{includeAttrs:y})}}const b=(0,i.Zz)((0,s.RF)({componentNameOverride:(0,o.xE)("input-wrapper")}),(0,s.RF)({mappings:{hostWidth:[{selector:()=>":host",property:"width"},{property:"width"}],hostDirection:[{selector:()=>":host",property:"direction"},{selector:()=>a.s.componentName,property:a.s.cssVarList.hostDirection},{selector:()=>l.w.componentName,property:l.w.cssVarList.hostDirection}],gap:{selector:()=>"div",property:"gap"},questionTextAlign:{selector:()=>a.s.componentName,property:a.s.cssVarList.textAlign},questionFontSize:{selector:()=>a.s.componentName,property:a.s.cssVarList.fontSize},questionFontFamily:{selector:()=>a.s.componentName,property:a.s.cssVarList.fontFamily},questionCursor:{selector:()=>a.s.componentName,property:"cursor"},errorMessageIcon:{selector:()=>a.s.componentName,property:a.s.cssVarList.errorMessageIcon},errorMessageIconSize:{selector:()=>a.s.componentName,property:a.s.cssVarList.errorMessageSize},errorMessageIconPadding:{selector:()=>a.s.componentName,property:a.s.cssVarList.errorMessagePadding},errorMessageIconRepeat:{selector:()=>a.s.componentName,property:a.s.cssVarList.errorMessageRepeat},errorMessageIconPosition:{selector:()=>a.s.componentName,property:a.s.cssVarList.errorMessagePosition},errorMessageFontSize:{selector:()=>a.s.componentName,property:a.s.cssVarList.errorMessageFontSize}}}),s.VO,s.tQ)(m);r(63595),r(21374),customElements.define(d,b)},52733:(e,t,r)=>{r(27397);var n=r(47642);(0,r(87550).SF)("vaadin-text-field",n.k,{moduleId:"lumo-text-field-styles"}),r(27136)},63595:(e,t,r)=>{r.r(t),r.d(t,{TextClass:()=>n.s,componentName:()=>n.T});var n=r(66434);customElements.define(n.T,n.s)},66434:(e,t,r)=>{r.d(t,{T:()=>a,s:()=>d});var n=r(88961),i=r(63200),o=r(25964),s=r(72270);const a=(0,o.xE)("text");class l extends((0,s.qu)({componentName:a,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <slot part="text-wrapper"></slot>\n    ',(0,o.fz)("\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    ",this)}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,o.Ge)(this,(()=>{const e=!!this.childNodes.length;this.style.display=!e&&this.hideWhenEmpty?"none":""}))}}const{host:p}={host:{selector:()=>":host"}},d=(0,i.Zz)((0,n.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:[{property:"color"}],textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),n.VO,n.tQ)(l)},73551:(e,t,r)=>{r.d(t,{$J:()=>u,I4:()=>s,Kl:()=>h,LJ:()=>c,Qv:()=>o,X6:()=>l,cy:()=>n,fu:()=>p,kG:()=>d,lS:()=>a,zm:()=>i});const n=e=>`\n    :host {\n        padding: calc(var(${e.inputOutlineWidth}) + var(${e.inputOutlineOffset}))\n    }\n`,i=e=>`\n    ${e} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=e=>`\n    ${e}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,s=e=>`\n    ${e} > label,\n    ${e}::part(label),\n    ${e}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,a=(e,t="input")=>`\n    ${e}[disabled] > ${t}:placeholder-shown,\n\t${e}[readonly] > ${t}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,l=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=e=>`\n    ${e}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=e=>`\n    ${e}::part(input-field)::after {\n        background: none;\n    }\n`,c=(e,t)=>`\n    ${i(e)}\n    ${s(e)}\n    ${a(e)}\n    ${o(e)}\n    ${((e,t)=>`\n    ${e} input:-webkit-autofill,\n    ${e} input:-webkit-autofill::first-line,\n    ${e} input:-webkit-autofill:hover,\n    ${e} input:-webkit-autofill:active,\n    ${e} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${t.inputValueTextColor});\n        box-shadow: 0 0 0 var(${t.inputHeight}) var(${t.inputBackgroundColor}) inset;\n    }\n`)(e,t)}\n    ${d(e)}\n    ${(e=>`\n    ${e}::before {\n\t\theight: unset;\n\t}\n`)(e)}\n    ${(e=>`\n    ${e} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(e)}\n    ${(e=>`\n    ${e}::part(input-field)::after {\n        border: none;\n    }\n`)(e)}\n`,u=e=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${e} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '},79275:(e,t,r)=>{r.d(t,{T:()=>l,w:()=>d});var n=r(79365),i=r(6424),o=r(9696),s=r(97810),a=r(73551);const l=(0,s.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,o.Zz)((0,n.RF)({mappings:i.A}),n.VO,(0,n.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),n.tQ,(e=>class extends e{static get observedAttributes(){return p.concat(e.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(e){if(!e)return void this.icon?.remove();const t={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},r={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...t}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,r),setTimeout((()=>{Object.assign(this.icon,t)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(e,t,r){super.attributeChangeCallback?.(e,t,r),"type"===e&&this.baseElement._setType(r),t!==r&&("label-type"===e?"floating"===r?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===e&&this.renderCopyToClipboard("true"===r))}}))((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(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(d.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,a.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))}}]);
 //# sourceMappingURL=descope-security-questions-verify-index-js.js.map