@descope/web-components-ui 1.46.0 → 1.47.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/cjs/index.cjs.js.map +1 -1
  2. package/dist/index.esm.js +10 -10
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/umd/DescopeDev.js.map +1 -1
  5. package/dist/umd/descope-hybrid-field-index-js.js +1 -1
  6. package/dist/umd/descope-hybrid-field-index-js.js.map +1 -1
  7. package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
  8. package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js.map +1 -1
  9. package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
  10. package/dist/umd/phone-fields-descope-phone-field-index-js.js.map +1 -1
  11. package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -1
  12. package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js.map +1 -1
  13. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
  14. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +5 -5
  17. package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +5 -5
package/dist/umd/phone-fields-descope-phone-field-index-js.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878,9894],{79275:(t,e,n)=>{n.d(e,{T:()=>l,w:()=>u});var i=n(79365),o=n(6424),r=n(9696),s=n(97810),a=n(73551);const l=(0,s.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],u=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${u.cssVarList.inputOutlineWidth}) + var(${u.cssVarList.inputOutlineOffset}));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(u.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",u.cssVarList)}\n ${(0,a.Kl)()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},21374:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),n(11284),n(37182),n(95260);var i=n(79275);customElements.define(i.T,i.w)},81808:(t,e,n)=>{n.d(e,{NF:()=>B,TQ:()=>h});var i=n(84015),o=n(97810),r=n(9696),s=n(79365),a=n(79275),l=n(86365),d=n(51680),u=n(73551);const p=a.w.cssVarList,c=l.C.cssVarList,h=(0,o.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:x,phoneInput:C,separator:v,errorMessage:A,helperText:w}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},B=(0,r.Zz)((0,s.RF)({mappings:{fontSize:[b,g,{selector:a.w.componentName,property:a.w.cssVarList.fontSize},{selector:l.C.componentName,property:l.C.cssVarList.fontSize}],fontFamily:[y,A,w,{...x,property:l.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...C,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...v,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...v,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...v,property:"border-left-color"}],inputBorderRadius:[{...g,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...x,property:c.hostWidth},countryCodeDropdownWidth:{...x,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...C,property:"width"},horizontalPadding:[{...C,property:"padding-left"},{...C,property:"padding-right"},{...x,property:"padding-left"},{...x,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...A,property:"color"},errorMessageIcon:{...A,property:"background-image"},errorMessageIconSize:{...A,property:"background-size"},errorMessageIconPadding:{...A,property:"padding-inline-start"},errorMessageIconRepeat:{...A,property:"background-repeat"},errorMessageIconPosition:{...A,property:"background-position"},inputValueTextColor:[{...C,property:p.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...C,property:p.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},valueInputHeight:[{...x,property:c.valueInputHeight}],valueInputMarginBottom:[{...C,property:p.valueInputMarginBottom}],marginInlineStart:[{...C,property:p.marginInlineStart},{...x,property:c.marginInlineStart}]}}),s.VO,s.Yg,(0,s.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return d.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input","format-value","strict-validation"]})}get countryCodeItems(){return this.inputElement?.countryCodeValue}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}get countryCodeInputData(){return this.inputElement?.countryCodeInputData}get countryCodes(){return Array.from(this.inputElement.countryCodeInputData).map((t=>t.getAttribute("data-country-code")))}}))((0,s.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,u.cy)(B.cssVarList)}\n\t\t\t${(0,u.I4)("vaadin-text-field")}\n\t\t\t${(0,u.kG)("vaadin-text-field")}\n\t\t\t${(0,u.X6)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n margin-left: 0;\n margin-right: 0;\n }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n direction: ltr;\n position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${B.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n \n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${p.inputOutlineWidth}: 0;\n\t\t\t\t${p.inputOutlineOffset}: 0;\n\t\t\t\t${p.inputBorderWidth}: 0;\n\t\t\t\t${p.inputBorderRadius}: 0;\n }\n\n :host([label-type="floating"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${(0,u.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}))},84015:(t,e,n)=>{n.d(e,{A:()=>g,T:()=>d});var i=n(3393),o=n(97810),r=n(51680),s=n(49157),a=n(23530),l=n(10473);const d=(0,o.xE)("phone-field-internal"),u=["disabled","size","bordered","readonly"],p=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength","autocomplete","name"],h=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},y=[].concat(u,p,c,h),m=(0,i.y)({componentName:d,baseSelector:"div"}),g=class extends m{static get observedAttributes(){return[].concat(m.observedAttributes||[],y)}#t;constructor(){super(),this.innerHTML=`\n <div class="wrapper">\n <descope-combo-box\n item-label-path="data-name"\n item-value-path="data-id"\n >\n ${r.A.map((t=>(0,s.$B)(t))).join("")}\n </descope-combo-box>\n <div class="separator"></div>\n <descope-text-field type="tel"></descope-text-field>\n </div>\n `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,o.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,o.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.comboBox.value||!this.textField.value)return"";const[t,e]=(0,s.lq)(`${this.comboBox.value}-${this.textField.value}`);return`${t||this.comboBox.value}-${e||this.textField.value}`}set value(t){const[e,n]=(0,s.lq)(t);this.#e(e),this.#n(n)}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.#i()}getValidity(){const t=this.comboBox.value,e=this.textField.value,n=!t||!e,i=e&&e.length>=this.minLength;if(this.isRequired&&n)return{valueMissing:!0};if(this.value){if(!i)return{tooShort:!0};if(this.isStrictValidation&&!this.#o())return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.#r(n);else if(y.includes(t)){const e=b[t]||t;u.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):p.includes(t)?this.comboBox.setAttribute(e,n):c.includes(t)&&this.textField.setAttribute(e,n)}h.includes(t)&&this.#s(t,n),"restrict-countries"===t&&this.#a(this.restrictCountries)}}#i(){this.textField.addEventListener("input",(t=>{if(!this.allowAlphanumericInput){const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n}})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching(),this.addEventListener("input",this.#l.bind(this))}#e(t){if(!t||t===this.selectedCountryCode)return;let e;if(this.value){const n=this.#d(`${t}-${this.textField.value}`);e=this.#u(n)}e||(e=this.#p(t)),this.comboBox.selectedItem=e}#n(t){this.isFormatValue&&(t=this.#c(t)),this.textField.value!==t&&(this.textField.value=t)}#c(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new a.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#o(){const t=(0,l.l)(this.value);return t&&t.isValid?.()&&t.country&&this.#h(t.country)}#h(t){return!this.restrictCountries||this.restrictCountries.includes(t)}#p(t){return this.comboBox.items?.find((e=>e.getAttribute("data-id")===t))||void 0}#u(t){return this.comboBox.items?.find((e=>e.getAttribute("data-country-code")===t))}#d(t){if(!t)return;const e=(0,l.l)(t);if(!e?.country)return;const n=this.#u(e.country);return n?.getAttribute("data-country-code")}#a(t){const e=t.length?r.A.filter((e=>t.includes(e.code))):r.A;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,s.$B)(t))).join("")}#r(t){if(!this.comboBox.value){const e=this.#u(t);e&&setTimeout((()=>{this.comboBox.selectedItem=e}))}}#l(){if(!this.value)return;const t=this.#d(this.value);if(t&&this.selectedCountryCode!==t){const e=this.#u(t);e&&(this.comboBox.selectedItem=e)}}#s(t,e){const n=b[t]||t;"label-type"===t?this.#b(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#b(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach((t=>t.removeAttribute("label")))}}},92132:(t,e,n)=>{n.r(e),n(27092),n(21374);var i=n(84015);customElements.define(i.T,i.A)},49157:(t,e,n)=>{n.d(e,{$B:()=>o,lq:()=>r});var i=n(10473);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=t=>{const e=t||"";let n="",o="";const r=(0,i.l)(e);if(r)r.countryCallingCode&&(n=`+${r.countryCallingCode}`),r.nationalNumber&&(o=r.nationalNumber);else{const[t,i]=e.split("-");n=t||"",o=i||""}return[n,o]}},98136:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>i.NF,componentName:()=>i.TQ}),n(92132),n(27092),n(21374);var i=n(81808);customElements.define(i.TQ,i.NF)}}]);
1
+ "use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878,9894],{79275:(t,e,n)=>{n.d(e,{T:()=>l,w:()=>u});var i=n(79365),o=n(6424),r=n(9696),s=n(97810),a=n(73551);const l=(0,s.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],u=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${u.cssVarList.inputOutlineWidth}) + var(${u.cssVarList.inputOutlineOffset}));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(u.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",u.cssVarList)}\n ${(0,a.Kl)()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},21374:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),n(11284),n(37182),n(95260);var i=n(79275);customElements.define(i.T,i.w)},81808:(t,e,n)=>{n.d(e,{NF:()=>B,TQ:()=>h});var i=n(84015),o=n(97810),r=n(9696),s=n(79365),a=n(79275),l=n(86365),d=n(51680),u=n(73551);const p=a.w.cssVarList,c=l.C.cssVarList,h=(0,o.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:x,phoneInput:C,separator:v,errorMessage:A,helperText:w}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},B=(0,r.Zz)((0,s.RF)({mappings:{fontSize:[b,g,{selector:a.w.componentName,property:a.w.cssVarList.fontSize},{selector:l.C.componentName,property:l.C.cssVarList.fontSize}],fontFamily:[y,A,w,{...x,property:l.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...C,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...v,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...v,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...v,property:"border-left-color"}],inputBorderRadius:[{...g,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...x,property:c.hostWidth},countryCodeDropdownWidth:{...x,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...C,property:"width"},horizontalPadding:[{...C,property:"padding-left"},{...C,property:"padding-right"},{...x,property:"padding-left"},{...x,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...A,property:"color"},errorMessageIcon:{...A,property:"background-image"},errorMessageIconSize:{...A,property:"background-size"},errorMessageIconPadding:{...A,property:"padding-inline-start"},errorMessageIconRepeat:{...A,property:"background-repeat"},errorMessageIconPosition:{...A,property:"background-position"},inputValueTextColor:[{...C,property:p.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...C,property:p.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},valueInputHeight:[{...x,property:c.valueInputHeight}],valueInputMarginBottom:[{...C,property:p.valueInputMarginBottom}],marginInlineStart:[{...C,property:p.marginInlineStart},{...x,property:c.marginInlineStart}]}}),s.VO,s.Yg,(0,s.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return d.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input","format-value","strict-validation"]})}get countryCodeItems(){return this.inputElement?.countryCodeValue}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}get countryCodeInputData(){return this.inputElement?.countryCodeInputData}get countryCodes(){return Array.from(this.inputElement.countryCodeInputData).map((t=>t.getAttribute("data-country-code")))}}))((0,s.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,u.cy)(B.cssVarList)}\n\t\t\t${(0,u.I4)("vaadin-text-field")}\n\t\t\t${(0,u.kG)("vaadin-text-field")}\n\t\t\t${(0,u.X6)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n margin-left: 0;\n margin-right: 0;\n }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n direction: ltr;\n position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${B.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n \n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${p.inputOutlineWidth}: 0;\n\t\t\t\t${p.inputOutlineOffset}: 0;\n\t\t\t\t${p.inputBorderWidth}: 0;\n\t\t\t\t${p.inputBorderRadius}: 0;\n }\n\n :host([label-type="floating"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${(0,u.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}))},84015:(t,e,n)=>{n.d(e,{A:()=>g,T:()=>d});var i=n(3393),o=n(97810),r=n(51680),s=n(49157),a=n(23530),l=n(10473);const d=(0,o.xE)("phone-field-internal"),u=["disabled","size","bordered","readonly"],p=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength","autocomplete","name"],h=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},y=[].concat(u,p,c,h),m=(0,i.y)({componentName:d,baseSelector:"div"}),g=class extends m{static get observedAttributes(){return[].concat(m.observedAttributes||[],y)}#t;constructor(){super(),this.innerHTML=`\n <div class="wrapper">\n <descope-combo-box\n item-label-path="data-name"\n item-value-path="data-id"\n >\n ${r.A.map((t=>(0,s.$B)(t))).join("")}\n </descope-combo-box>\n <div class="separator"></div>\n <descope-text-field type="tel"></descope-text-field>\n </div>\n `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,o.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,o.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.comboBox.value||!this.textField.value)return"";const[t,e]=(0,s.lq)(`${this.comboBox.value}-${this.textField.value}`);return`${t||this.comboBox.value}-${e||this.textField.value}`}set value(t){const[e,n]=(0,s.lq)(t);this.#e(e),this.#n(n)}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.#i()}getValidity(){const t=this.comboBox.value,e=this.textField.value,n=!t||!e,i=e&&e.length>=this.minLength;if(this.isRequired&&n)return{valueMissing:!0};if(this.value){if(!i)return{tooShort:!0};if(this.isStrictValidation&&!this.#o())return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.#r(n);else if(y.includes(t)){const e=b[t]||t;u.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):p.includes(t)?this.comboBox.setAttribute(e,n):c.includes(t)&&this.textField.setAttribute(e,n)}h.includes(t)&&this.#s(t,n),"restrict-countries"===t&&this.#a(this.restrictCountries)}}#i(){this.textField.addEventListener("input",(t=>{if(!this.allowAlphanumericInput){const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n}})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching(),this.addEventListener("input",this.#l.bind(this))}#e(t){if(!t||t===this.selectedCountryCode)return;let e;if(this.value){const n=this.#d(`${t}-${this.textField.value}`);e=this.#u(n)}e||(e=this.#p(t)),this.comboBox.selectedItem=e}#n(t){this.isFormatValue&&(t=this.#c(t)),this.textField.value!==t&&(this.textField.value=t)}#c(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new a.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#o(){const t=(0,l.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#h(t.country))}#h(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#p(t){return this.comboBox.items?.find((e=>e.getAttribute("data-id")===t))||void 0}#u(t){return this.comboBox.items?.find((e=>e.getAttribute("data-country-code")===t))}#d(t){if(!t)return;const e=(0,l.l)(t);if(!e?.country)return;const n=this.#u(e.country);return n?.getAttribute("data-country-code")}#a(t){const e=t.length?r.A.filter((e=>t.includes(e.code))):r.A;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,s.$B)(t))).join("")}#r(t){if(!this.comboBox.value){const e=this.#u(t);e&&setTimeout((()=>{this.comboBox.selectedItem=e}))}}#l(){if(!this.value)return;const t=this.#d(this.value);if(t&&this.selectedCountryCode!==t){const e=this.#u(t);e&&(this.comboBox.selectedItem=e)}}#s(t,e){const n=b[t]||t;"label-type"===t?this.#b(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#b(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach((t=>t.removeAttribute("label")))}}},92132:(t,e,n)=>{n.r(e),n(27092),n(21374);var i=n(84015);customElements.define(i.T,i.A)},49157:(t,e,n)=>{n.d(e,{$B:()=>o,lq:()=>r});var i=n(10473);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=t=>{const e=t||"";let n="",o="";const r=(0,i.l)(e);if(r)r.countryCallingCode&&(n=`+${r.countryCallingCode}`),r.nationalNumber&&(o=r.nationalNumber);else{const[t,i]=e.split("-");n=t||"",o=i||""}return[n,o]}},98136:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>i.NF,componentName:()=>i.TQ}),n(92132),n(27092),n(21374);var i=n(81808);customElements.define(i.TQ,i.NF)}}]);
2
2
  //# sourceMappingURL=phone-fields-descope-phone-field-index-js.js.map
package/dist/umd/phone-fields-descope-phone-field-index-js.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"phone-fields-descope-phone-field-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/PhoneFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/index.js"],"sourcesContent":["import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes || []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';\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 { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport CountryCodes from '../CountryCodes';\nimport {\n resetInputCursor,\n resetInputLabelPosition,\n resetInputFieldDefaultWidth,\n resetInputFieldInvalidBackgroundColor,\n useHostExternalPadding,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\nconst comboVars = ComboBoxClass.cssVarList;\n\nexport const componentName = getComponentName('phone-field');\n\nconst customMixin = (superclass) =>\n class PhoneFieldMixinClass 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 \t\t`;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n forwardAttrs(this.shadowRoot.host, this.inputElement, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'minlength',\n 'maxlength',\n 'default-code',\n 'country-input-placeholder',\n 'phone-input-placeholder',\n 'disabled',\n 'restrict-countries',\n 'country-input-label',\n 'readonly',\n 'label',\n 'label-type',\n 'allow-alphanumeric-input',\n 'format-value',\n 'strict-validation',\n ],\n });\n }\n\n get countryCodeItems() {\n return this.inputElement?.countryCodeValue;\n }\n\n get phoneNumberInputEle() {\n return this.inputElement?.phoneNumberInputEle;\n }\n\n get countryCodeInputData() {\n return this.inputElement?.countryCodeInputData;\n }\n\n get countryCodes() {\n return Array.from(this.inputElement.countryCodeInputData).map((ele) =>\n ele.getAttribute('data-country-code')\n );\n }\n };\n\nconst {\n host,\n label,\n requiredIndicator,\n inputField,\n internalAfter,\n countryCodeInput,\n phoneInput,\n separator,\n errorMessage,\n helperText,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n inputField: { selector: '::part(input-field)' },\n internalAfter: { selector: 'descope-phone-field-internal::after' },\n phoneInput: { selector: () => 'descope-text-field' },\n countryCodeInput: { selector: () => 'descope-combo-box' },\n separator: { selector: 'descope-phone-field-internal .separator' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: [\n host,\n inputField,\n {\n selector: TextFieldClass.componentName,\n property: TextFieldClass.cssVarList.fontSize,\n },\n {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.fontSize,\n },\n ],\n fontFamily: [\n label,\n errorMessage,\n helperText,\n {\n ...countryCodeInput,\n property: ComboBoxClass.cssVarList.overlay.fontFamily,\n },\n ],\n hostWidth: [\n { ...host, property: 'width' },\n { ...phoneInput, property: 'width' },\n { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },\n ],\n hostDirection: { ...host, property: 'direction' },\n\n inputBorderStyle: [\n { ...internalAfter, property: 'border-style' },\n { ...separator, property: 'border-left-style' },\n ],\n inputBorderWidth: [\n { ...internalAfter, property: 'border-width' },\n { ...separator, property: 'border-left-width' },\n ],\n inputBorderColor: [\n { ...internalAfter, property: 'border-color' },\n { ...separator, property: 'border-left-color' },\n ],\n inputBorderRadius: [\n { ...inputField, property: 'border-radius' },\n { ...internalAfter, property: 'border-radius' },\n ],\n\n countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },\n countryCodeDropdownWidth: {\n ...countryCodeInput,\n property: '--vaadin-combo-box-overlay-width',\n },\n phoneInputWidth: { ...phoneInput, property: 'width' },\n\n horizontalPadding: [\n { ...phoneInput, property: 'padding-left' },\n { ...phoneInput, property: 'padding-right' },\n { ...countryCodeInput, property: 'padding-left' },\n { ...countryCodeInput, property: 'padding-right' },\n ],\n\n labelTextColor: [\n { ...label, property: 'color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n\n inputValueTextColor: [\n { ...phoneInput, property: textVars.inputValueTextColor },\n { ...countryCodeInput, property: comboVars.inputValueTextColor },\n ],\n\n inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n overlayItemBackgroundColor: {\n selector: 'descope-combo-box',\n property: comboVars.overlayItemBackgroundColor,\n },\n\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],\n valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],\n marginInlineStart: [\n { ...phoneInput, property: textVars.marginInlineStart },\n { ...countryCodeInput, property: comboVars.marginInlineStart },\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\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${useHostExternalPadding(PhoneFieldClass.cssVarList)}\n\t\t\t${resetInputCursor('vaadin-text-field')}\n\t\t\t${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n\t\t\t${resetInputFieldDefaultWidth()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n margin-left: 0;\n margin-right: 0;\n }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n direction: ltr;\n position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n \n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-width: 5.75em;\n\t\t\t\t${comboVars.inputOutlineWidth}: 0;\n\t\t\t\t${comboVars.inputOutlineOffset}: 0;\n\t\t\t\t${comboVars.inputBorderWidth}: 0;\n\t\t\t\t${comboVars.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${textVars.inputOutlineWidth}: 0;\n\t\t\t\t${textVars.inputOutlineOffset}: 0;\n\t\t\t\t${textVars.inputBorderWidth}: 0;\n\t\t\t\t${textVars.inputBorderRadius}: 0;\n }\n\n :host([label-type=\"floating\"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t`,\n excludeAttrsSync: ['tabindex'],\n componentName,\n })\n);\n\nexport default PhoneFieldClass;\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem, parsePhoneNumber } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') || [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) || 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) || [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value || !this.textField.value) {\n return '';\n }\n\n const [countryCode, phoneNumber] = parsePhoneNumber(\n `${this.comboBox.value}-${this.textField.value}`\n );\n\n return `${countryCode || this.comboBox.value}-${phoneNumber || this.textField.value}`;\n }\n\n set value(val) {\n const [countryCode, nationalNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setNationalNumber(nationalNumber);\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode || !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] || attrName;\n\n if (commonAttrs.includes(attrName)) {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n\n // verify country code item against phone number pattern and replace if needed and country is allowed\n // (e.g. +1 can be US or CA, depending on the pattern)\n this.addEventListener('input', this.#handleSameCountryCodes.bind(this));\n }\n\n #setCountryCode(val) {\n if (!val || val === this.selectedCountryCode) return;\n\n let countryCodeItem = undefined;\n\n if (this.value) {\n // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)\n const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);\n countryCodeItem = this.#getCountryByCodeId(code);\n }\n\n // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)\n // then use the first option with same dial code (e.g. in that case - `US` for +1)\n if (!countryCodeItem) {\n countryCodeItem = this.#getCountryByDialCode(val);\n }\n\n // set country code item; in it doesn't exist in list - set `undefined`\n this.comboBox.selectedItem = countryCodeItem;\n }\n\n #setNationalNumber(val) {\n if (this.isFormatValue) {\n val = this.#formatNationalNumber(val);\n }\n\n if (this.textField.value !== val) {\n this.textField.value = val;\n }\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n\n return formattedVal || nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n parsed && // Parsed successfully (not undefined)\n parsed.isValid?.() && // Parsed object is valid\n parsed.country && // Parsed object with a country code\n this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by dial code `data-id` (e.g. `+1`)\n #getCountryByDialCode(dialCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) || undefined;\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #getCountryCodeByPhoneNumber(val) {\n if (!val) return undefined;\n const parsed = parsePhoneNumberFromString(val);\n if (!parsed?.country) return undefined;\n const foundCountryItem = this.#getCountryByCodeId(parsed.country);\n return foundCountryItem?.getAttribute('data-country-code');\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleSameCountryCodes() {\n if (!this.value) return;\n\n const country = this.#getCountryCodeByPhoneNumber(this.value);\n\n if (!country) return;\n\n // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)\n if (this.selectedCountryCode !== country) {\n const foundCountryItem = this.#getCountryByCodeId(country);\n // if found country is defined in country list then set it, otherwise - clear phone number\n if (foundCountryItem) {\n this.comboBox.selectedItem = foundCountryItem;\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] || attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') || ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') || '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') || ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val || '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country || '';\n phoneNumber = phone || '';\n }\n\n return [countryCode, phoneNumber];\n};\n","import './descope-phone-field-internal';\nimport '@descope-ui/descope-combo-box';\nimport '../../descope-text-field';\n\nimport { componentName, PhoneFieldClass } from './PhoneFieldClass';\n\ncustomElements.define(componentName, PhoneFieldClass);\n\nexport { PhoneFieldClass, componentName };\n"],"names":["componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","textVars","comboVars","C","host","label","requiredIndicator","inputField","internalAfter","countryCodeInput","phoneInput","separator","errorMessage","helperText","selector","PhoneFieldClass","fontSize","property","fontFamily","overlay","hostWidth","hostDirection","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","countryCodeInputWidth","countryCodeDropdownWidth","phoneInputWidth","horizontalPadding","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","overlayItemBackgroundColor","inputOutlineStyle","inputOutlineColor","valueInputHeight","valueInputMarginBottom","marginInlineStart","CountryCodes","template","innerHTML","content","cloneNode","inputElement","shadowRoot","querySelector","includeAttrs","countryCodeItems","countryCodeValue","phoneNumberInputEle","countryCodeInputData","countryCodes","Array","from","map","ele","getAttribute","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","item","join","comboBox","textField","inputs","customValueTransformFn","val","dialCode","split","items","allowAlphanumericInput","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","countryCode","phoneNumber","nationalNumber","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","length","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","bind","countryCodeItem","code","country","reset","parsed","isValid","find","c","undefined","foundCountryItem","removeAttribute","comboBoxItem","name","toLowerCase","getCountryFlag","parsePhoneNumber","countryCallingCode","phone"],"sourceRoot":""}
1
+ {"version":3,"file":"phone-fields-descope-phone-field-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/PhoneFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/index.js"],"sourcesContent":["import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes || []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';\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 { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport CountryCodes from '../CountryCodes';\nimport {\n resetInputCursor,\n resetInputLabelPosition,\n resetInputFieldDefaultWidth,\n resetInputFieldInvalidBackgroundColor,\n useHostExternalPadding,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\nconst comboVars = ComboBoxClass.cssVarList;\n\nexport const componentName = getComponentName('phone-field');\n\nconst customMixin = (superclass) =>\n class PhoneFieldMixinClass 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 \t\t`;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n forwardAttrs(this.shadowRoot.host, this.inputElement, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'minlength',\n 'maxlength',\n 'default-code',\n 'country-input-placeholder',\n 'phone-input-placeholder',\n 'disabled',\n 'restrict-countries',\n 'country-input-label',\n 'readonly',\n 'label',\n 'label-type',\n 'allow-alphanumeric-input',\n 'format-value',\n 'strict-validation',\n ],\n });\n }\n\n get countryCodeItems() {\n return this.inputElement?.countryCodeValue;\n }\n\n get phoneNumberInputEle() {\n return this.inputElement?.phoneNumberInputEle;\n }\n\n get countryCodeInputData() {\n return this.inputElement?.countryCodeInputData;\n }\n\n get countryCodes() {\n return Array.from(this.inputElement.countryCodeInputData).map((ele) =>\n ele.getAttribute('data-country-code')\n );\n }\n };\n\nconst {\n host,\n label,\n requiredIndicator,\n inputField,\n internalAfter,\n countryCodeInput,\n phoneInput,\n separator,\n errorMessage,\n helperText,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n inputField: { selector: '::part(input-field)' },\n internalAfter: { selector: 'descope-phone-field-internal::after' },\n phoneInput: { selector: () => 'descope-text-field' },\n countryCodeInput: { selector: () => 'descope-combo-box' },\n separator: { selector: 'descope-phone-field-internal .separator' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: [\n host,\n inputField,\n {\n selector: TextFieldClass.componentName,\n property: TextFieldClass.cssVarList.fontSize,\n },\n {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.fontSize,\n },\n ],\n fontFamily: [\n label,\n errorMessage,\n helperText,\n {\n ...countryCodeInput,\n property: ComboBoxClass.cssVarList.overlay.fontFamily,\n },\n ],\n hostWidth: [\n { ...host, property: 'width' },\n { ...phoneInput, property: 'width' },\n { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },\n ],\n hostDirection: { ...host, property: 'direction' },\n\n inputBorderStyle: [\n { ...internalAfter, property: 'border-style' },\n { ...separator, property: 'border-left-style' },\n ],\n inputBorderWidth: [\n { ...internalAfter, property: 'border-width' },\n { ...separator, property: 'border-left-width' },\n ],\n inputBorderColor: [\n { ...internalAfter, property: 'border-color' },\n { ...separator, property: 'border-left-color' },\n ],\n inputBorderRadius: [\n { ...inputField, property: 'border-radius' },\n { ...internalAfter, property: 'border-radius' },\n ],\n\n countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },\n countryCodeDropdownWidth: {\n ...countryCodeInput,\n property: '--vaadin-combo-box-overlay-width',\n },\n phoneInputWidth: { ...phoneInput, property: 'width' },\n\n horizontalPadding: [\n { ...phoneInput, property: 'padding-left' },\n { ...phoneInput, property: 'padding-right' },\n { ...countryCodeInput, property: 'padding-left' },\n { ...countryCodeInput, property: 'padding-right' },\n ],\n\n labelTextColor: [\n { ...label, property: 'color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n\n inputValueTextColor: [\n { ...phoneInput, property: textVars.inputValueTextColor },\n { ...countryCodeInput, property: comboVars.inputValueTextColor },\n ],\n\n inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n overlayItemBackgroundColor: {\n selector: 'descope-combo-box',\n property: comboVars.overlayItemBackgroundColor,\n },\n\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],\n valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],\n marginInlineStart: [\n { ...phoneInput, property: textVars.marginInlineStart },\n { ...countryCodeInput, property: comboVars.marginInlineStart },\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\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${useHostExternalPadding(PhoneFieldClass.cssVarList)}\n\t\t\t${resetInputCursor('vaadin-text-field')}\n\t\t\t${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n\t\t\t${resetInputFieldDefaultWidth()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n margin-left: 0;\n margin-right: 0;\n }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n direction: ltr;\n position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n \n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-width: 5.75em;\n\t\t\t\t${comboVars.inputOutlineWidth}: 0;\n\t\t\t\t${comboVars.inputOutlineOffset}: 0;\n\t\t\t\t${comboVars.inputBorderWidth}: 0;\n\t\t\t\t${comboVars.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${textVars.inputOutlineWidth}: 0;\n\t\t\t\t${textVars.inputOutlineOffset}: 0;\n\t\t\t\t${textVars.inputBorderWidth}: 0;\n\t\t\t\t${textVars.inputBorderRadius}: 0;\n }\n\n :host([label-type=\"floating\"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t`,\n excludeAttrsSync: ['tabindex'],\n componentName,\n })\n);\n\nexport default PhoneFieldClass;\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem, parsePhoneNumber } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') || [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) || 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) || [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value || !this.textField.value) {\n return '';\n }\n\n const [countryCode, phoneNumber] = parsePhoneNumber(\n `${this.comboBox.value}-${this.textField.value}`\n );\n\n return `${countryCode || this.comboBox.value}-${phoneNumber || this.textField.value}`;\n }\n\n set value(val) {\n const [countryCode, nationalNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setNationalNumber(nationalNumber);\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode || !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] || attrName;\n\n if (commonAttrs.includes(attrName)) {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n\n // verify country code item against phone number pattern and replace if needed and country is allowed\n // (e.g. +1 can be US or CA, depending on the pattern)\n this.addEventListener('input', this.#handleSameCountryCodes.bind(this));\n }\n\n #setCountryCode(val) {\n if (!val || val === this.selectedCountryCode) return;\n\n let countryCodeItem = undefined;\n\n if (this.value) {\n // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)\n const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);\n countryCodeItem = this.#getCountryByCodeId(code);\n }\n\n // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)\n // then use the first option with same dial code (e.g. in that case - `US` for +1)\n if (!countryCodeItem) {\n countryCodeItem = this.#getCountryByDialCode(val);\n }\n\n // set country code item; in it doesn't exist in list - set `undefined`\n this.comboBox.selectedItem = countryCodeItem;\n }\n\n #setNationalNumber(val) {\n if (this.isFormatValue) {\n val = this.#formatNationalNumber(val);\n }\n\n if (this.textField.value !== val) {\n this.textField.value = val;\n }\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n\n return formattedVal || nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by dial code `data-id` (e.g. `+1`)\n #getCountryByDialCode(dialCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) || undefined;\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #getCountryCodeByPhoneNumber(val) {\n if (!val) return undefined;\n const parsed = parsePhoneNumberFromString(val);\n if (!parsed?.country) return undefined;\n const foundCountryItem = this.#getCountryByCodeId(parsed.country);\n return foundCountryItem?.getAttribute('data-country-code');\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleSameCountryCodes() {\n if (!this.value) return;\n\n const country = this.#getCountryCodeByPhoneNumber(this.value);\n\n if (!country) return;\n\n // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)\n if (this.selectedCountryCode !== country) {\n const foundCountryItem = this.#getCountryByCodeId(country);\n // if found country is defined in country list then set it, otherwise - clear phone number\n if (foundCountryItem) {\n this.comboBox.selectedItem = foundCountryItem;\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] || attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') || ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') || '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') || ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val || '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country || '';\n phoneNumber = phone || '';\n }\n\n return [countryCode, phoneNumber];\n};\n","import './descope-phone-field-internal';\nimport '@descope-ui/descope-combo-box';\nimport '../../descope-text-field';\n\nimport { componentName, PhoneFieldClass } from './PhoneFieldClass';\n\ncustomElements.define(componentName, PhoneFieldClass);\n\nexport { PhoneFieldClass, componentName };\n"],"names":["componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","textVars","comboVars","C","host","label","requiredIndicator","inputField","internalAfter","countryCodeInput","phoneInput","separator","errorMessage","helperText","selector","PhoneFieldClass","fontSize","property","fontFamily","overlay","hostWidth","hostDirection","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","countryCodeInputWidth","countryCodeDropdownWidth","phoneInputWidth","horizontalPadding","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","overlayItemBackgroundColor","inputOutlineStyle","inputOutlineColor","valueInputHeight","valueInputMarginBottom","marginInlineStart","CountryCodes","template","innerHTML","content","cloneNode","inputElement","shadowRoot","querySelector","includeAttrs","countryCodeItems","countryCodeValue","phoneNumberInputEle","countryCodeInputData","countryCodes","Array","from","map","ele","getAttribute","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","item","join","comboBox","textField","inputs","customValueTransformFn","val","dialCode","split","items","allowAlphanumericInput","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","countryCode","phoneNumber","nationalNumber","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","length","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","bind","countryCodeItem","code","country","reset","parsed","isValid","find","c","undefined","foundCountryItem","removeAttribute","comboBoxItem","name","toLowerCase","getCountryFlag","parsePhoneNumber","countryCallingCode","phone"],"sourceRoot":""}
package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*! For license information please see phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js.LICENSE.txt */
2
- "use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[8657],{79275:(t,e,i)=>{i.d(e,{T:()=>o,w:()=>d});var n=i(79365),a=i(6424),s=i(9696),r=i(97810),l=i(73551);const o=(0,r.xE)("text-field"),u=["type","label-type","copy-to-clipboard"],d=(0,s.Zz)((0,n.RF)({mappings:a.A}),n.VO,(0,n.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),n.tQ,(t=>class extends t{static get observedAttributes(){return u.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},i={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,i),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,i){super.attributeChangeCallback?.(t,e,i),"type"===t&&this.baseElement._setType(i),e!==i&&("label-type"===t?"floating"===i?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===i))}}))((0,n.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${(0,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(d.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",d.cssVarList)}\n ${(0,l.Kl)()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:o}))},21374:(t,e,i)=>{i.r(e),i.d(e,{TextFieldClass:()=>n.w,componentName:()=>n.T}),i(11284),i(37182),i(95260);var n=i(79275);customElements.define(n.T,n.w)},9035:(t,e,i)=>{i.d(e,{A:()=>h,T:()=>o});var n=i(3393),a=i(97810),s=i(92259),r=i(10473),l=i(23530);const o=(0,a.xE)("phone-field-internal-input-box"),u=["disabled","size","readonly","phone-input-placeholder","name","maxlength","autocomplete","label-type"],d={"phone-input-placeholder":"placeholder"},c=(0,n.y)({componentName:o,baseSelector:"div"}),h=class extends c{static get observedAttributes(){return[].concat(c.observedAttributes||[],u)}#t;constructor(){super(),this.innerHTML='\n <div>\n <descope-text-field tabindex="1" type="tel" bordered="false"></descope-text-field>\n </div>\n ',this.textField=this.querySelector("descope-text-field")}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get defaultDialCode(){return(0,s.Q)(this.getAttribute("default-code"))}get defaultCode(){return this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}get restrictCountries(){return this.getAttribute("restrict-countries")?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.textField.value)return"";if(!this.isStrictValidation)return this.#e();const t=this.#i();return t?.country&&t?.countryCallingCode&&t?.nationalNumber?`+${[t?.countryCallingCode,t?.nationalNumber].join("-")}`:this.textField.value}set value(t){this.textField.value=t}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.textField.focus()})),super.init?.(),this.textField.addEventListener("input",this.#n.bind(this)),this.handleFocusEventsDispatching([this.textField])}getValidity(){const t=/^\+?\d{1,4}-?(?:\d-?){1,15}$/,e=this.#a(this.textField.value);if(this.isRequired&&!this.textField.value)return{valueMissing:!0};if(this.textField.value){if(e.length<this.minLength)return{tooShort:!0};if(this.isStrictValidation&&this.textField.value&&!this.#s()||!this.isStrictValidation&&this.textField.value&&!t.test(this.value))return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,i){if(super.attributeChangedCallback(t,e,i),e!==i&&u.includes(t)){const e=d[t]||t;this.textField.setAttribute(e,i)}}#n(t){let e=this.#r(t.target.value);this.isFormatValue&&this.#l(e)&&(e=this.#o(e)),t.target.value=e}#e(){if(!this.defaultDialCode)return this.textField.value;const t=this.#u(this.textField.value),e=this.#a(t);return[this.defaultDialCode,e].join("-")}#i(){return this.defaultDialCode?(0,r.l)([this.defaultDialCode,this.#a(this.textField.value)].filter(Boolean).join("")):(0,r.l)(this.textField.value)}#a(t){return t.replace(/\D/g,"")}#u(t){if("+"===this.textField.value?.[0]){const e=new RegExp(`^\\${this.defaultDialCode}`);return t.replace(e,"")}return t}#s(){const t=(0,r.l)(this.value);return t&&t.isValid?.()&&t.country&&this.#d(t.country)&&(!this.defaultCode||this.defaultCode===t.country)}#d(t){return!this.restrictCountries||this.restrictCountries.includes(t)}#r(t){if(t=t.replace(/^-+/,"").replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+"),!this.allowAlphanumericInput){const e=/^[+\d-\(\)]+$/;t=t.split("").filter((t=>e.test(t))).join("")}return t}#o(t=""){const e=this.defaultCode||this.#c(t);return e?(this.#t&&this.#t.country===e||(this.#t=new l.Q(e)),this.#t.reset(),this.#t.input(t)||t):t}#c(t){const e=(0,r.l)(t);return e?.country||""}#l(t){return!!(0,s.W)(t)}}},78343:(t,e,i)=>{i.r(e),i(21374);var n=i(9035);customElements.define(n.T,n.A)},92259:(t,e,i)=>{i.d(e,{Q:()=>a,W:()=>s});var n=i(51680);const a=t=>n.A.find((e=>e.code===t))?.dialCode,s=t=>{const e=t.match(/\(/g),i=t.match(/\)/g);return e?.length===i?.length}},18330:(t,e,i)=>{i.d(e,{f:()=>a});var n=i(44099);class a extends n.r{constructor(t,e){super(t,"input","input",{initializer:(t,i)=>{i.value&&(t.value=i.value),i.type&&t.setAttribute("type",i.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},37436:(t,e,i)=>{i.d(e,{a:()=>a});var n=i(44218);const a=t=>class extends((0,n.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},27136:(t,e,i)=>{i.d(e,{A:()=>p}),i(86689);var n=i(13256),a=i(82901),s=i(90676),r=i(81488),l=i(86314),o=i(87550),u=i(18330),d=i(37436),c=i(37720);const h=t=>class extends((0,d.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new u.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new c.q(this.inputElement,this._labelController))}};(0,o.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class p extends(h((0,o.cp)((0,s.q)(n.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return n.qy`
2
+ "use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[8657],{79275:(t,e,i)=>{i.d(e,{T:()=>o,w:()=>d});var n=i(79365),a=i(6424),s=i(9696),r=i(97810),l=i(73551);const o=(0,r.xE)("text-field"),u=["type","label-type","copy-to-clipboard"],d=(0,s.Zz)((0,n.RF)({mappings:a.A}),n.VO,(0,n.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),n.tQ,(t=>class extends t{static get observedAttributes(){return u.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},i={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,i),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,i){super.attributeChangeCallback?.(t,e,i),"type"===t&&this.baseElement._setType(i),e!==i&&("label-type"===t?"floating"===i?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===i))}}))((0,n.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${(0,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(d.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",d.cssVarList)}\n ${(0,l.Kl)()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:o}))},21374:(t,e,i)=>{i.r(e),i.d(e,{TextFieldClass:()=>n.w,componentName:()=>n.T}),i(11284),i(37182),i(95260);var n=i(79275);customElements.define(n.T,n.w)},9035:(t,e,i)=>{i.d(e,{A:()=>h,T:()=>o});var n=i(3393),a=i(97810),s=i(92259),r=i(10473),l=i(23530);const o=(0,a.xE)("phone-field-internal-input-box"),u=["disabled","size","readonly","phone-input-placeholder","name","maxlength","autocomplete","label-type"],d={"phone-input-placeholder":"placeholder"},c=(0,n.y)({componentName:o,baseSelector:"div"}),h=class extends c{static get observedAttributes(){return[].concat(c.observedAttributes||[],u)}#t;constructor(){super(),this.innerHTML='\n <div>\n <descope-text-field tabindex="1" type="tel" bordered="false"></descope-text-field>\n </div>\n ',this.textField=this.querySelector("descope-text-field")}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get defaultDialCode(){return(0,s.Q)(this.getAttribute("default-code"))}get defaultCode(){return this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}get restrictCountries(){return this.getAttribute("restrict-countries")?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.textField.value)return"";if(!this.isStrictValidation)return this.#e();const t=this.#i();return t?.country&&t?.countryCallingCode&&t?.nationalNumber?`+${[t?.countryCallingCode,t?.nationalNumber].join("-")}`:this.textField.value}set value(t){this.textField.value=t}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.textField.focus()})),super.init?.(),this.textField.addEventListener("input",this.#n.bind(this)),this.handleFocusEventsDispatching([this.textField])}getValidity(){const t=/^\+?\d{1,4}-?(?:\d-?){1,15}$/,e=this.#a(this.textField.value);if(this.isRequired&&!this.textField.value)return{valueMissing:!0};if(this.textField.value){if(e.length<this.minLength)return{tooShort:!0};if(this.isStrictValidation&&this.textField.value&&!this.#s()||!this.isStrictValidation&&this.textField.value&&!t.test(this.value))return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,i){if(super.attributeChangedCallback(t,e,i),e!==i&&u.includes(t)){const e=d[t]||t;this.textField.setAttribute(e,i)}}#n(t){let e=this.#r(t.target.value);this.isFormatValue&&this.#l(e)&&(e=this.#o(e)),t.target.value=e}#e(){if(!this.defaultDialCode)return this.textField.value;const t=this.#u(this.textField.value),e=this.#a(t);return[this.defaultDialCode,e].join("-")}#i(){return this.defaultDialCode?(0,r.l)([this.defaultDialCode,this.#a(this.textField.value)].filter(Boolean).join("")):(0,r.l)(this.textField.value)}#a(t){return t.replace(/\D/g,"")}#u(t){if("+"===this.textField.value?.[0]){const e=new RegExp(`^\\${this.defaultDialCode}`);return t.replace(e,"")}return t}#s(){const t=(0,r.l)(this.value);return!(!t||!t.isValid?.()||!t.country||!this.#d(t.country)||this.defaultCode&&this.defaultCode!==t.country)}#d(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#r(t){if(t=t.replace(/^-+/,"").replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+"),!this.allowAlphanumericInput){const e=/^[+\d-\(\)]+$/;t=t.split("").filter((t=>e.test(t))).join("")}return t}#o(t=""){const e=this.defaultCode||this.#c(t);return e?(this.#t&&this.#t.country===e||(this.#t=new l.Q(e)),this.#t.reset(),this.#t.input(t)||t):t}#c(t){const e=(0,r.l)(t);return e?.country||""}#l(t){return!!(0,s.W)(t)}}},78343:(t,e,i)=>{i.r(e),i(21374);var n=i(9035);customElements.define(n.T,n.A)},92259:(t,e,i)=>{i.d(e,{Q:()=>a,W:()=>s});var n=i(51680);const a=t=>n.A.find((e=>e.code===t))?.dialCode,s=t=>{const e=t.match(/\(/g),i=t.match(/\)/g);return e?.length===i?.length}},18330:(t,e,i)=>{i.d(e,{f:()=>a});var n=i(44099);class a extends n.r{constructor(t,e){super(t,"input","input",{initializer:(t,i)=>{i.value&&(t.value=i.value),i.type&&t.setAttribute("type",i.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},37436:(t,e,i)=>{i.d(e,{a:()=>a});var n=i(44218);const a=t=>class extends((0,n.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},27136:(t,e,i)=>{i.d(e,{A:()=>p}),i(86689);var n=i(13256),a=i(82901),s=i(90676),r=i(81488),l=i(86314),o=i(87550),u=i(18330),d=i(37436),c=i(37720);const h=t=>class extends((0,d.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new u.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new c.q(this.inputElement,this._labelController))}};(0,o.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class p extends(h((0,o.cp)((0,s.q)(n.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return n.qy`
3
3
  <style>
4
4
  [part='input-field'] {
5
5
  flex-grow: 0;
package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/helpers.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/field-base/src/input-controller.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/field-base/src/input-field-mixin.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/text-field/src/vaadin-text-field-mixin.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/text-field/src/vaadin-text-field.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js"],"sourcesContent":["import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes || []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { 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) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n #sanitizeInput(val) {\n val = val\n .replace(/^-+/, '') // dash as first char\n .replace(/(?!^)\\+/g, '') // multiple plus symbols\n .replace('--', '-') // consecutive dashes\n .replace('+-', '+'); // dash following plus symbol\n\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^[+\\d-\\(\\)]+$/;\n val = val\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n }\n\n return val;\n }\n\n #formatPhoneNumber(phoneNumber = '') {\n // Get country code from `default-code or` from phone number\n const countryCode = this.defaultCode || this.#getCountryCodeFromValue(phoneNumber);\n\n // Skip formatting if no country code is available\n if (!countryCode) {\n return phoneNumber;\n }\n\n // Update AsYouType country code if needed\n if (!this.#ayt || this.#ayt.country !== countryCode) {\n this.#ayt = new AsYouType(countryCode);\n }\n\n // We need to reset AsYouType instance before setting new input\n this.#ayt.reset();\n\n // Set AsYouType input\n const formattedVal = this.#ayt.input(phoneNumber) || phoneNumber;\n\n return formattedVal;\n }\n\n #getCountryCodeFromValue(val) {\n const parsed = parsePhoneNumberFromString(val);\n return parsed?.country || '';\n }\n\n #canFormat(val) {\n if (!matchingParenthesis(val)) return false;\n return true;\n }\n}\n\nexport default PhoneFieldInternal;\n","import '../../../descope-text-field';\n\nimport PhoneFieldInternalInputBox, { componentName } from './PhoneFieldInternalInputBox';\n\ncustomElements.define(componentName, PhoneFieldInternalInputBox);\n","import 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","/**\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 { SlotController } from '@vaadin/component-base/src/slot-controller.js';\n\n/**\n * A controller to create and initialize slotted `<input>` element.\n */\nexport class InputController extends SlotController {\n constructor(host, callback) {\n super(host, 'input', 'input', {\n initializer: (node, host) => {\n if (host.value) {\n node.value = host.value;\n }\n if (host.type) {\n node.setAttribute('type', host.type);\n }\n\n // Ensure every instance has unique ID\n node.id = this.defaultId;\n\n if (typeof callback === 'function') {\n callback(node);\n }\n },\n useUniqueId: true,\n });\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 { InputControlMixin } from './input-control-mixin.js';\n\n/**\n * A mixin to provide logic for vaadin-text-field and related components.\n *\n * @polymerMixin\n * @mixes InputControlMixin\n */\nexport const InputFieldMixin = (superclass) =>\n class InputFieldMixinClass extends InputControlMixin(superclass) {\n static get properties() {\n return {\n /**\n * Whether the value of the control can be automatically completed by the browser.\n * List of available options at:\n * https://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete\n */\n autocomplete: {\n type: String,\n },\n\n /**\n * This is a property supported by Safari that is used to control whether\n * autocorrection should be enabled when the user is entering/editing the text.\n * Possible values are:\n * on: Enable autocorrection.\n * off: Disable autocorrection.\n */\n autocorrect: {\n type: String,\n },\n\n /**\n * This is a property supported by Safari and Chrome that is used to control whether\n * autocapitalization should be enabled when the user is entering/editing the text.\n * Possible values are:\n * characters: Characters capitalization.\n * words: Words capitalization.\n * sentences: Sentences capitalization.\n * none: No capitalization.\n */\n autocapitalize: {\n type: String,\n reflectToAttribute: true,\n },\n };\n }\n\n static get delegateAttrs() {\n return [...super.delegateAttrs, 'autocapitalize', 'autocomplete', 'autocorrect'];\n }\n\n // Workaround for https://github.com/Polymer/polymer/issues/5259\n get __data() {\n return this.__dataValue || {};\n }\n\n set __data(value) {\n this.__dataValue = value;\n }\n\n /**\n * @param {HTMLElement} input\n * @protected\n * @override\n */\n _inputElementChanged(input) {\n super._inputElementChanged(input);\n\n if (input) {\n // Discard value set on the custom slotted input.\n if (input.value && input.value !== this.value) {\n console.warn(`Please define value on the <${this.localName}> component!`);\n input.value = '';\n }\n\n if (this.value) {\n input.value = this.value;\n }\n }\n }\n\n /**\n * Override an event listener from `FocusMixin`.\n * @param {boolean} focused\n * @protected\n * @override\n */\n _setFocused(focused) {\n super._setFocused(focused);\n\n // Do not validate when focusout is caused by document\n // losing focus, which happens on browser tab switch.\n if (!focused && document.hasFocus()) {\n this.validate();\n }\n }\n\n /**\n * Override an event listener from `InputMixin`\n * to mark as valid after user started typing.\n * @param {Event} event\n * @protected\n * @override\n */\n _onInput(event) {\n super._onInput(event);\n\n if (this.invalid) {\n this.validate();\n }\n }\n\n /**\n * Override an observer from `InputMixin` to validate the field\n * when a new value is set programmatically.\n *\n * @param {string | undefined} newValue\n * @param {string | undefined} oldValue\n * @protected\n * @override\n */\n _valueChanged(newValue, oldValue) {\n super._valueChanged(newValue, oldValue);\n\n if (oldValue === undefined) {\n return;\n }\n\n if (this.invalid) {\n this.validate();\n }\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 { InputController } from '@vaadin/field-base/src/input-controller.js';\nimport { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';\nimport { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';\n\n/**\n * A mixin providing common text field functionality.\n *\n * @polymerMixin\n * @mixes InputFieldMixin\n */\nexport const TextFieldMixin = (superClass) =>\n class TextFieldMixinClass extends InputFieldMixin(superClass) {\n static get properties() {\n return {\n /**\n * Maximum number of characters (in Unicode code points) that the user can enter.\n */\n maxlength: {\n type: Number,\n },\n\n /**\n * Minimum number of characters (in Unicode code points) that the user can enter.\n */\n minlength: {\n type: Number,\n },\n\n /**\n * A regular expression that the value is checked against.\n * The pattern must match the entire value, not just some subset.\n */\n pattern: {\n type: String,\n },\n };\n }\n\n static get delegateAttrs() {\n return [...super.delegateAttrs, 'maxlength', 'minlength', 'pattern'];\n }\n\n static get constraints() {\n return [...super.constraints, 'maxlength', 'minlength', 'pattern'];\n }\n\n constructor() {\n super();\n this._setType('text');\n }\n\n /** @protected */\n get clearElement() {\n return this.$.clearButton;\n }\n\n /** @protected */\n ready() {\n super.ready();\n\n this.addController(\n new InputController(this, (input) => {\n this._setInputElement(input);\n this._setFocusElement(input);\n this.stateTarget = input;\n this.ariaTarget = input;\n }),\n );\n this.addController(new LabelledInputController(this.inputElement, this._labelController));\n }\n };\n","/**\n * @license\n * Copyright (c) 2017 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport '@vaadin/input-container/src/vaadin-input-container.js';\nimport { html, PolymerElement } from '@polymer/polymer';\nimport { defineCustomElement } from '@vaadin/component-base/src/define.js';\nimport { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';\nimport { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';\nimport { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';\nimport { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { TextFieldMixin } from './vaadin-text-field-mixin.js';\n\nregisterStyles('vaadin-text-field', inputFieldShared, { moduleId: 'vaadin-text-field-styles' });\n\n/**\n * `<vaadin-text-field>` is a web component that allows the user to input and edit text.\n *\n * ```html\n * <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n * ```\n *\n * ### Prefixes and suffixes\n *\n * These are child elements of a `<vaadin-text-field>` that are displayed\n * inline with the input, before or after.\n * In order for an element to be considered as a prefix, it must have the slot\n * attribute set to `prefix` (and similarly for `suffix`).\n *\n * ```html\n * <vaadin-text-field label=\"Email address\">\n * <div slot=\"prefix\">Sent to:</div>\n * <div slot=\"suffix\">@vaadin.com</div>\n * </vaadin-text-field>\n * ```\n *\n * ### Styling\n *\n * The following custom properties are available for styling:\n *\n * Custom property | Description | Default\n * -------------------------------|----------------------------|---------\n * `--vaadin-field-default-width` | Default width of the field | `12em`\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ---------------------|----------------\n * `label` | The label element\n * `input-field` | The element that wraps prefix, value and suffix\n * `clear-button` | The clear button\n * `error-message` | The error message element\n * `helper-text` | The helper text element wrapper\n * `required-indicator` | The `required` state indicator element\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * --------------------|-------------|------------\n * `disabled` | Set to a disabled text field | :host\n * `has-value` | Set when the element has a value | :host\n * `has-label` | Set when the element has a label | :host\n * `has-helper` | Set when the element has helper text or slot | :host\n * `has-error-message` | Set when the element has an error message | :host\n * `invalid` | Set when the element is invalid | :host\n * `input-prevented` | Temporarily set when invalid input is prevented | :host\n * `focused` | Set when the element is focused | :host\n * `focus-ring` | Set when the element is keyboard focused | :host\n * `readonly` | Set to a readonly text field | :host\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 HTMLElement\n * @mixes ElementMixin\n * @mixes ThemableMixin\n * @mixes TextFieldMixin\n */\nexport class TextField extends TextFieldMixin(ThemableMixin(ElementMixin(PolymerElement))) {\n static get is() {\n return 'vaadin-text-field';\n }\n\n static get template() {\n return html`\n <style>\n [part='input-field'] {\n flex-grow: 0;\n }\n </style>\n\n <div class=\"vaadin-field-container\">\n <div part=\"label\">\n <slot name=\"label\"></slot>\n <span part=\"required-indicator\" aria-hidden=\"true\" on-click=\"focus\"></span>\n </div>\n\n <vaadin-input-container\n part=\"input-field\"\n readonly=\"[[readonly]]\"\n disabled=\"[[disabled]]\"\n invalid=\"[[invalid]]\"\n theme$=\"[[_theme]]\"\n >\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n <slot name=\"input\"></slot>\n <slot name=\"suffix\" slot=\"suffix\"></slot>\n <div id=\"clearButton\" part=\"clear-button\" slot=\"suffix\" aria-hidden=\"true\"></div>\n </vaadin-input-container>\n\n <div part=\"helper-text\">\n <slot name=\"helper\"></slot>\n </div>\n\n <div part=\"error-message\">\n <slot name=\"error-message\"></slot>\n </div>\n </div>\n <slot name=\"tooltip\"></slot>\n `;\n }\n\n static get properties() {\n return {\n /**\n * Maximum number of characters (in Unicode code points) that the user can enter.\n */\n maxlength: {\n type: Number,\n },\n\n /**\n * Minimum number of characters (in Unicode code points) that the user can enter.\n */\n minlength: {\n type: Number,\n },\n };\n }\n\n /** @protected */\n ready() {\n super.ready();\n\n this._tooltipController = new TooltipController(this);\n this._tooltipController.setPosition('top');\n this._tooltipController.setAriaTarget(this.inputElement);\n this.addController(this._tooltipController);\n }\n}\n\ndefineCustomElement(TextField);\n","/**\n * @license\n * Copyright (c) 2017 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';\nimport { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\n\nregisterStyles('vaadin-text-field', inputFieldShared, {\n moduleId: 'lumo-text-field-styles',\n});\n"],"names":["componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","mapAttrs","BaseInputClass","baseSelector","constructor","innerHTML","textField","querySelector","phoneNumberInputEle","shadowRoot","defaultDialCode","getAttribute","defaultCode","allowAlphanumericInput","minLength","parseInt","maxLength","restrictCountries","split","filter","Boolean","isFormatValue","isStrictValidation","parsedVal","country","countryCallingCode","nationalNumber","join","val","e","isTrusted","bind","handleFocusEventsDispatching","getValidity","validPhonePattern","stripValue","isRequired","valueMissing","length","tooShort","test","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","attr","setAttribute","sanitizedInput","target","sanitizedVal","replace","dialCodePrefixPattern","RegExp","parsed","isValid","countryCode","telDigitsRegExp","char","phoneNumber","reset","input","getCountryByCodeId","find","c","code","dialCode","matchingParenthesis","openParenMatches","match","closeParenMatches","InputController","host","callback","initializer","node","type","id","defaultId","useUniqueId","InputFieldMixin","properties","autocomplete","String","autocorrect","autocapitalize","reflectToAttribute","delegateAttrs","__data","__dataValue","_inputElementChanged","console","warn","localName","_setFocused","focused","hasFocus","validate","_onInput","event","invalid","_valueChanged","undefined","TextFieldMixin","superClass","maxlength","Number","minlength","pattern","constraints","clearElement","$","clearButton","ready","addController","_setInputElement","_setFocusElement","stateTarget","ariaTarget","inputElement","_labelController","moduleId","TextField","is","template","_tooltipController","setPosition","setAriaTarget"],"sourceRoot":""}
1
+ {"version":3,"file":"phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/helpers.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/field-base/src/input-controller.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/field-base/src/input-field-mixin.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/text-field/src/vaadin-text-field-mixin.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/text-field/src/vaadin-text-field.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js"],"sourcesContent":["import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes || []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { 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 '../../../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","/**\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 { SlotController } from '@vaadin/component-base/src/slot-controller.js';\n\n/**\n * A controller to create and initialize slotted `<input>` element.\n */\nexport class InputController extends SlotController {\n constructor(host, callback) {\n super(host, 'input', 'input', {\n initializer: (node, host) => {\n if (host.value) {\n node.value = host.value;\n }\n if (host.type) {\n node.setAttribute('type', host.type);\n }\n\n // Ensure every instance has unique ID\n node.id = this.defaultId;\n\n if (typeof callback === 'function') {\n callback(node);\n }\n },\n useUniqueId: true,\n });\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 { InputControlMixin } from './input-control-mixin.js';\n\n/**\n * A mixin to provide logic for vaadin-text-field and related components.\n *\n * @polymerMixin\n * @mixes InputControlMixin\n */\nexport const InputFieldMixin = (superclass) =>\n class InputFieldMixinClass extends InputControlMixin(superclass) {\n static get properties() {\n return {\n /**\n * Whether the value of the control can be automatically completed by the browser.\n * List of available options at:\n * https://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete\n */\n autocomplete: {\n type: String,\n },\n\n /**\n * This is a property supported by Safari that is used to control whether\n * autocorrection should be enabled when the user is entering/editing the text.\n * Possible values are:\n * on: Enable autocorrection.\n * off: Disable autocorrection.\n */\n autocorrect: {\n type: String,\n },\n\n /**\n * This is a property supported by Safari and Chrome that is used to control whether\n * autocapitalization should be enabled when the user is entering/editing the text.\n * Possible values are:\n * characters: Characters capitalization.\n * words: Words capitalization.\n * sentences: Sentences capitalization.\n * none: No capitalization.\n */\n autocapitalize: {\n type: String,\n reflectToAttribute: true,\n },\n };\n }\n\n static get delegateAttrs() {\n return [...super.delegateAttrs, 'autocapitalize', 'autocomplete', 'autocorrect'];\n }\n\n // Workaround for https://github.com/Polymer/polymer/issues/5259\n get __data() {\n return this.__dataValue || {};\n }\n\n set __data(value) {\n this.__dataValue = value;\n }\n\n /**\n * @param {HTMLElement} input\n * @protected\n * @override\n */\n _inputElementChanged(input) {\n super._inputElementChanged(input);\n\n if (input) {\n // Discard value set on the custom slotted input.\n if (input.value && input.value !== this.value) {\n console.warn(`Please define value on the <${this.localName}> component!`);\n input.value = '';\n }\n\n if (this.value) {\n input.value = this.value;\n }\n }\n }\n\n /**\n * Override an event listener from `FocusMixin`.\n * @param {boolean} focused\n * @protected\n * @override\n */\n _setFocused(focused) {\n super._setFocused(focused);\n\n // Do not validate when focusout is caused by document\n // losing focus, which happens on browser tab switch.\n if (!focused && document.hasFocus()) {\n this.validate();\n }\n }\n\n /**\n * Override an event listener from `InputMixin`\n * to mark as valid after user started typing.\n * @param {Event} event\n * @protected\n * @override\n */\n _onInput(event) {\n super._onInput(event);\n\n if (this.invalid) {\n this.validate();\n }\n }\n\n /**\n * Override an observer from `InputMixin` to validate the field\n * when a new value is set programmatically.\n *\n * @param {string | undefined} newValue\n * @param {string | undefined} oldValue\n * @protected\n * @override\n */\n _valueChanged(newValue, oldValue) {\n super._valueChanged(newValue, oldValue);\n\n if (oldValue === undefined) {\n return;\n }\n\n if (this.invalid) {\n this.validate();\n }\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 { InputController } from '@vaadin/field-base/src/input-controller.js';\nimport { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';\nimport { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';\n\n/**\n * A mixin providing common text field functionality.\n *\n * @polymerMixin\n * @mixes InputFieldMixin\n */\nexport const TextFieldMixin = (superClass) =>\n class TextFieldMixinClass extends InputFieldMixin(superClass) {\n static get properties() {\n return {\n /**\n * Maximum number of characters (in Unicode code points) that the user can enter.\n */\n maxlength: {\n type: Number,\n },\n\n /**\n * Minimum number of characters (in Unicode code points) that the user can enter.\n */\n minlength: {\n type: Number,\n },\n\n /**\n * A regular expression that the value is checked against.\n * The pattern must match the entire value, not just some subset.\n */\n pattern: {\n type: String,\n },\n };\n }\n\n static get delegateAttrs() {\n return [...super.delegateAttrs, 'maxlength', 'minlength', 'pattern'];\n }\n\n static get constraints() {\n return [...super.constraints, 'maxlength', 'minlength', 'pattern'];\n }\n\n constructor() {\n super();\n this._setType('text');\n }\n\n /** @protected */\n get clearElement() {\n return this.$.clearButton;\n }\n\n /** @protected */\n ready() {\n super.ready();\n\n this.addController(\n new InputController(this, (input) => {\n this._setInputElement(input);\n this._setFocusElement(input);\n this.stateTarget = input;\n this.ariaTarget = input;\n }),\n );\n this.addController(new LabelledInputController(this.inputElement, this._labelController));\n }\n };\n","/**\n * @license\n * Copyright (c) 2017 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport '@vaadin/input-container/src/vaadin-input-container.js';\nimport { html, PolymerElement } from '@polymer/polymer';\nimport { defineCustomElement } from '@vaadin/component-base/src/define.js';\nimport { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';\nimport { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';\nimport { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';\nimport { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { TextFieldMixin } from './vaadin-text-field-mixin.js';\n\nregisterStyles('vaadin-text-field', inputFieldShared, { moduleId: 'vaadin-text-field-styles' });\n\n/**\n * `<vaadin-text-field>` is a web component that allows the user to input and edit text.\n *\n * ```html\n * <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n * ```\n *\n * ### Prefixes and suffixes\n *\n * These are child elements of a `<vaadin-text-field>` that are displayed\n * inline with the input, before or after.\n * In order for an element to be considered as a prefix, it must have the slot\n * attribute set to `prefix` (and similarly for `suffix`).\n *\n * ```html\n * <vaadin-text-field label=\"Email address\">\n * <div slot=\"prefix\">Sent to:</div>\n * <div slot=\"suffix\">@vaadin.com</div>\n * </vaadin-text-field>\n * ```\n *\n * ### Styling\n *\n * The following custom properties are available for styling:\n *\n * Custom property | Description | Default\n * -------------------------------|----------------------------|---------\n * `--vaadin-field-default-width` | Default width of the field | `12em`\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ---------------------|----------------\n * `label` | The label element\n * `input-field` | The element that wraps prefix, value and suffix\n * `clear-button` | The clear button\n * `error-message` | The error message element\n * `helper-text` | The helper text element wrapper\n * `required-indicator` | The `required` state indicator element\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * --------------------|-------------|------------\n * `disabled` | Set to a disabled text field | :host\n * `has-value` | Set when the element has a value | :host\n * `has-label` | Set when the element has a label | :host\n * `has-helper` | Set when the element has helper text or slot | :host\n * `has-error-message` | Set when the element has an error message | :host\n * `invalid` | Set when the element is invalid | :host\n * `input-prevented` | Temporarily set when invalid input is prevented | :host\n * `focused` | Set when the element is focused | :host\n * `focus-ring` | Set when the element is keyboard focused | :host\n * `readonly` | Set to a readonly text field | :host\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 HTMLElement\n * @mixes ElementMixin\n * @mixes ThemableMixin\n * @mixes TextFieldMixin\n */\nexport class TextField extends TextFieldMixin(ThemableMixin(ElementMixin(PolymerElement))) {\n static get is() {\n return 'vaadin-text-field';\n }\n\n static get template() {\n return html`\n <style>\n [part='input-field'] {\n flex-grow: 0;\n }\n </style>\n\n <div class=\"vaadin-field-container\">\n <div part=\"label\">\n <slot name=\"label\"></slot>\n <span part=\"required-indicator\" aria-hidden=\"true\" on-click=\"focus\"></span>\n </div>\n\n <vaadin-input-container\n part=\"input-field\"\n readonly=\"[[readonly]]\"\n disabled=\"[[disabled]]\"\n invalid=\"[[invalid]]\"\n theme$=\"[[_theme]]\"\n >\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n <slot name=\"input\"></slot>\n <slot name=\"suffix\" slot=\"suffix\"></slot>\n <div id=\"clearButton\" part=\"clear-button\" slot=\"suffix\" aria-hidden=\"true\"></div>\n </vaadin-input-container>\n\n <div part=\"helper-text\">\n <slot name=\"helper\"></slot>\n </div>\n\n <div part=\"error-message\">\n <slot name=\"error-message\"></slot>\n </div>\n </div>\n <slot name=\"tooltip\"></slot>\n `;\n }\n\n static get properties() {\n return {\n /**\n * Maximum number of characters (in Unicode code points) that the user can enter.\n */\n maxlength: {\n type: Number,\n },\n\n /**\n * Minimum number of characters (in Unicode code points) that the user can enter.\n */\n minlength: {\n type: Number,\n },\n };\n }\n\n /** @protected */\n ready() {\n super.ready();\n\n this._tooltipController = new TooltipController(this);\n this._tooltipController.setPosition('top');\n this._tooltipController.setAriaTarget(this.inputElement);\n this.addController(this._tooltipController);\n }\n}\n\ndefineCustomElement(TextField);\n","/**\n * @license\n * Copyright (c) 2017 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';\nimport { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\n\nregisterStyles('vaadin-text-field', inputFieldShared, {\n moduleId: 'lumo-text-field-styles',\n});\n"],"names":["componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","mapAttrs","BaseInputClass","baseSelector","constructor","innerHTML","textField","querySelector","phoneNumberInputEle","shadowRoot","defaultDialCode","getAttribute","defaultCode","allowAlphanumericInput","minLength","parseInt","maxLength","restrictCountries","split","filter","Boolean","isFormatValue","isStrictValidation","parsedVal","country","countryCallingCode","nationalNumber","join","val","e","isTrusted","bind","handleFocusEventsDispatching","getValidity","validPhonePattern","stripValue","isRequired","valueMissing","length","tooShort","test","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","attr","setAttribute","sanitizedInput","target","sanitizedVal","replace","dialCodePrefixPattern","RegExp","parsed","isValid","countryCode","telDigitsRegExp","char","phoneNumber","reset","input","getCountryByCodeId","find","c","code","dialCode","matchingParenthesis","openParenMatches","match","closeParenMatches","InputController","host","callback","initializer","node","type","id","defaultId","useUniqueId","InputFieldMixin","properties","autocomplete","String","autocorrect","autocapitalize","reflectToAttribute","delegateAttrs","__data","__dataValue","_inputElementChanged","console","warn","localName","_setFocused","focused","hasFocus","validate","_onInput","event","invalid","_valueChanged","undefined","TextFieldMixin","superClass","maxlength","Number","minlength","pattern","constraints","clearElement","$","clearButton","ready","addController","_setInputElement","_setFocusElement","stateTarget","ariaTarget","inputElement","_labelController","moduleId","TextField","is","template","_tooltipController","setPosition","setAriaTarget"],"sourceRoot":""}