npm - @descope/web-components-ui - Versions diffs - 2.3.3 → 3.0.1 - Mend

@descope/web-components-ui 2.3.3 → 3.0.1

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 (145) hide show

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js"],"sourcesContent":["import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes \|\| []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes \|\| [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') \|\| [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) \|\| 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) \|\| [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value \|\| !this.textField.value) {\n return '';\n }\n\n if (this.allowAlphanumericInput) {\n return `${this.comboBox.value}-${this.textField.value}`;\n }\n\n return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n }\n\n #clearValue() {\n this.comboBox.selectedItem = undefined;\n this.textField.value = '';\n }\n\n set value(val) {\n // reject empty or digit-free values\n if (!val \|\| !/\\d/.test(val)) {\n this.#clearValue();\n return;\n }\n\n // ensure plus prefix\n if (!val.startsWith('+')) {\n val = `+${val}`;\n }\n\n let dialCode = '';\n let nationalNumber = '';\n\n if (val.includes('-')) {\n // dash explicitly marks where the dial code ends — no parsing needed\n const dashIdx = val.indexOf('-');\n dialCode = val.slice(0, dashIdx);\n nationalNumber = val.slice(dashIdx + 1).replace(/\\D+/g, '');\n } else {\n // parse only to get dial code length,\n const parsed = parsePhoneNumberFromString(val);\n if (parsed?.countryCallingCode) {\n dialCode = `+${parsed.countryCallingCode}`;\n // slice the raw value to avoid parser transformations\n nationalNumber = val.slice(dialCode.length).replace(/\\D+/g, '');\n }\n }\n\n // dial code must contain digits (e.g. '+1', not just '+')\n if (!/\\d/.test(dialCode)) {\n this.#clearValue();\n return;\n }\n\n // resolve country code from dial code\n const countryCode = CountryCodes.find((c) => c.dialCode === dialCode)?.code;\n\n // sync combo box when country changes\n if (countryCode && countryCode !== this.selectedCountryCode) {\n this.comboBox.selectedItem = this.#getCountryItemByCodeId(countryCode);\n }\n\n // set formatted or raw national number on the text field\n if (this.isFormatValue) {\n this.textField.value = this.#formatNationalNumber(nationalNumber);\n } else {\n this.textField.value = nationalNumber;\n }\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode \|\| !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue && !this.selectedCountryCode) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (commonAttrs.includes(attrName)) {\n if (!newValue) {\n this.inputs.forEach((input) => input.removeAttribute(attr));\n } else {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n }\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt \|\| this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n return formattedVal \|\| nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryItemByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryItemByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') \|\| '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') \|\| ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') \|\| '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') \|\| ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val \|\| '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country \|\| '';\n phoneNumber = phone \|\| '';\n }\n\n return [countryCode, phoneNumber];\n};\n"],"names":["componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","innerHTML","map","item","join","comboBox","querySelector","textField","inputs","includeAttrs","customValueTransformFn","val","dialCode","split","countryCodeInputData","items","countryCodeValue","shadowRoot","phoneNumberInputEle","allowAlphanumericInput","getAttribute","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","replace","undefined","test","startsWith","nationalNumber","includes","dashIdx","indexOf","slice","parsed","countryCallingCode","length","countryCode","find","c","code","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","handleFocusEventsDispatching","handleInputEventDispatching","country","reset","isValid","countryCodeItem","comboBoxItem","name","toLowerCase","getCountryFlag"],"sourceRoot":""}
1	+ {"version":3,"file":"phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js"],"sourcesContent":["import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes \|\| []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\nimport { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem } from '../helpers';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes \|\| [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') \|\| [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) \|\| 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) \|\| [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value \|\| !this.textField.value) {\n return '';\n }\n\n if (this.allowAlphanumericInput) {\n return `${this.comboBox.value}-${this.textField.value}`;\n }\n\n return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n }\n\n #clearValue() {\n this.comboBox.selectedItem = undefined;\n this.textField.value = '';\n }\n\n set value(val) {\n // reject empty or digit-free values\n if (!val \|\| !/\\d/.test(val)) {\n this.#clearValue();\n return;\n }\n\n // ensure plus prefix\n if (!val.startsWith('+')) {\n val = `+${val}`;\n }\n\n let dialCode = '';\n let nationalNumber = '';\n\n if (val.includes('-')) {\n // dash explicitly marks where the dial code ends — no parsing needed\n const dashIdx = val.indexOf('-');\n dialCode = val.slice(0, dashIdx);\n nationalNumber = val.slice(dashIdx + 1).replace(/\\D+/g, '');\n } else {\n // parse only to get dial code length,\n const parsed = parsePhoneNumberFromString(val);\n if (parsed?.countryCallingCode) {\n dialCode = `+${parsed.countryCallingCode}`;\n // slice the raw value to avoid parser transformations\n nationalNumber = val.slice(dialCode.length).replace(/\\D+/g, '');\n }\n }\n\n // dial code must contain digits (e.g. '+1', not just '+')\n if (!/\\d/.test(dialCode)) {\n this.#clearValue();\n return;\n }\n\n // resolve country code from dial code\n const countryCode = CountryCodes.find((c) => c.dialCode === dialCode)?.code;\n\n // sync combo box when country changes\n if (countryCode && countryCode !== this.selectedCountryCode) {\n this.comboBox.selectedItem = this.#getCountryItemByCodeId(countryCode);\n }\n\n // set formatted or raw national number on the text field\n if (this.isFormatValue) {\n this.textField.value = this.#formatNationalNumber(nationalNumber);\n } else {\n this.textField.value = nationalNumber;\n }\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode \|\| !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue && !this.selectedCountryCode) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (commonAttrs.includes(attrName)) {\n if (!newValue) {\n this.inputs.forEach((input) => input.removeAttribute(attr));\n } else {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n }\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt \|\| this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n return formattedVal \|\| nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryItemByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryItemByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') \|\| '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') \|\| ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') \|\| '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') \|\| ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val \|\| '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country \|\| '';\n phoneNumber = phone \|\| '';\n }\n\n return [countryCode, phoneNumber];\n};\n"],"names":["componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","innerHTML","map","item","join","comboBox","querySelector","textField","inputs","includeAttrs","customValueTransformFn","val","dialCode","split","countryCodeInputData","items","countryCodeValue","shadowRoot","phoneNumberInputEle","allowAlphanumericInput","getAttribute","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","replace","undefined","test","startsWith","nationalNumber","includes","dashIdx","indexOf","slice","parsed","countryCallingCode","length","countryCode","find","c","code","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","handleFocusEventsDispatching","handleInputEventDispatching","country","reset","isValid","countryCodeItem","comboBoxItem","name","toLowerCase","getCountryFlag"],"sourceRoot":""}

package/dist/umd/phone-fields-descope-phone-field-index-js.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"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:()=>a,w:()=>p});var i=n(79365),o=n(6424),r=n(9696),l=n(97810),s=n(73551);const a=(0,l.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],p=(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(${p.cssVarList.inputOutlineWidth}) + var(${p.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,s.$J)("vaadin-text-field")}\n\t\t\t${(0,s.cy)(p.cssVarList)}\n\t\t\t${(0,s.LJ)("vaadin-text-field",p.cssVarList)}\n      ${(0,s.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:a}))},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:()=>I,TQ:()=>h});var i=n(84015),o=n(97810),r=n(9696),l=n(79365),s=n(79275),a=n(86365),d=n(51680),p=n(73551);const u=s.w.cssVarList,c=a.C.cssVarList,h=(0,o.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:x,phoneInput:v,separator:C,errorMessage:w,helperText:A}={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)"}},I=(0,r.Zz)((0,l.RF)({mappings:{fontSize:[b,g,{selector:s.w.componentName,property:s.w.cssVarList.fontSize},{selector:a.C.componentName,property:a.C.cssVarList.fontSize}],fontFamily:[y,w,A,{...x,property:a.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...v,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...C,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...C,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...C,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:{...v,property:"width"},horizontalPadding:[{...v,property:"padding-left"},{...v,property:"padding-right"},{...x,property:"padding-left"},{...x,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...y,property:"-webkit-text-fill-color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...w,property:"color"},errorMessageIcon:{...w,property:"background-image"},errorMessageIconSize:{...w,property:"background-size"},errorMessageIconPadding:{...w,property:"padding-inline-start"},errorMessageIconRepeat:{...w,property:"background-repeat"},errorMessageIconPosition:{...w,property:"background-position"},errorMessageFontSize:{...w,property:"font-size"},inputValueTextColor:[{...v,property:u.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...v,property:u.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:[{...v,property:u.valueInputMarginBottom}],marginInlineStart:[{...v,property:u.marginInlineStart},{...x,property:c.marginInlineStart}]}}),l.VO,l.Yg,(0,l.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,l.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,p.cy)(I.cssVarList)}\n\t\t\t${(0,p.I4)("vaadin-text-field")}\n\t\t\t${(0,p.kG)("vaadin-text-field")}\n\t\t\t${(0,p.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(${I.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${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputOutlineOffset}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.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,p.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:h}))},84015(t,e,n){n.d(e,{A:()=>g,T:()=>d});var i=n(3393),o=n(97810),r=n(51680),l=n(49157),s=n(10473),a=n(23530);const d=(0,o.xE)("phone-field-internal"),p=["disabled","size","bordered","readonly"],u=["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(p,u,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,l.$B)(t)).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,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(){return this.comboBox.value&&this.textField.value?this.allowAlphanumericInput?`${this.comboBox.value}-${this.textField.value}`:`${this.comboBox.value}-${this.textField.value.replace(/\D+/g,"")}`:""}#e(){this.comboBox.selectedItem=void 0,this.textField.value=""}set value(t){if(!t||!/\d/.test(t))return void this.#e();t.startsWith("+")||(t=`+${t}`);let e="",n="";if(t.includes("-")){const i=t.indexOf("-");e=t.slice(0,i),n=t.slice(i+1).replace(/\D+/g,"")}else{const i=(0,s.l)(t);i?.countryCallingCode&&(e=`+${i.countryCallingCode}`,n=t.slice(e.length).replace(/\D+/g,""))}if(!/\d/.test(e))return void this.#e();const i=r.A.find(t=>t.dialCode===e)?.code;i&&i!==this.selectedCountryCode&&(this.comboBox.selectedItem=this.#n(i)),this.isFormatValue?this.textField.value=this.#i(n):this.textField.value=n}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.inputs[1].focus()}),super.init?.(),this.#o()}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.#r())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.selectedCountryCode)this.#l(n);else if(y.includes(t)){const e=b[t]||t;p.includes(t)?n?this.inputs.forEach(t=>t.setAttribute(e,n)):this.inputs.forEach(t=>t.removeAttribute(e)):u.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)}}#o(){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()}#i(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new a.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#r(){const t=(0,s.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#d(t.country))}#d(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#n(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#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,l.$B)(t)).join("")}#l(t){if(!this.comboBox.value){const e=this.#n(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#s(t,e){const n=b[t]||t;"label-type"===t?this.#p(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#p(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:()=>i});const i=({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`},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)}}]);
+"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:()=>a,w:()=>p});var i=n(79365),o=n(6424),r=n(9696),l=n(97810),s=n(73551);const a=(0,l.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],p=(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(${p.cssVarList.inputOutlineWidth}) + var(${p.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,s.$J)("vaadin-text-field")}\n\t\t\t${(0,s.cy)(p.cssVarList)}\n\t\t\t${(0,s.LJ)("vaadin-text-field",p.cssVarList)}\n      ${(0,s.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:a}))},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:()=>I,TQ:()=>h});var i=n(86365),o=n(84015),r=n(97810),l=n(9696),s=n(79365),a=n(79275),d=n(51680),p=n(73551);const u=a.w.cssVarList,c=i.C.cssVarList,h=(0,r.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:x,phoneInput:v,separator:C,errorMessage:w,helperText:A}={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)"}},I=(0,l.Zz)((0,s.RF)({mappings:{fontSize:[b,g,{selector:a.w.componentName,property:a.w.cssVarList.fontSize},{selector:i.C.componentName,property:i.C.cssVarList.fontSize}],fontFamily:[y,w,A,{...x,property:i.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...v,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...C,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...C,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...C,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:{...v,property:"width"},horizontalPadding:[{...v,property:"padding-left"},{...v,property:"padding-right"},{...x,property:"padding-left"},{...x,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...y,property:"-webkit-text-fill-color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...w,property:"color"},errorMessageIcon:{...w,property:"background-image"},errorMessageIconSize:{...w,property:"background-size"},errorMessageIconPadding:{...w,property:"padding-inline-start"},errorMessageIconRepeat:{...w,property:"background-repeat"},errorMessageIconPosition:{...w,property:"background-position"},errorMessageFontSize:{...w,property:"font-size"},inputValueTextColor:[{...v,property:u.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...v,property:u.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:[{...v,property:u.valueInputMarginBottom}],marginInlineStart:[{...v,property:u.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<${o.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.T}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.T),(0,r.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,p.cy)(I.cssVarList)}\n\t\t\t${(0,p.I4)("vaadin-text-field")}\n\t\t\t${(0,p.kG)("vaadin-text-field")}\n\t\t\t${(0,p.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(${I.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${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputOutlineOffset}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.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,p.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:h}))},84015(t,e,n){n.d(e,{A:()=>g,T:()=>d});var i=n(10473),o=n(23530),r=n(3393),l=n(97810),s=n(51680),a=n(49157);const d=(0,l.xE)("phone-field-internal"),p=["disabled","size","bordered","readonly"],u=["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(p,u,c,h),m=(0,r.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      ${s.A.map(t=>(0,a.$B)(t)).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,l.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,l.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){return this.comboBox.value&&this.textField.value?this.allowAlphanumericInput?`${this.comboBox.value}-${this.textField.value}`:`${this.comboBox.value}-${this.textField.value.replace(/\D+/g,"")}`:""}#e(){this.comboBox.selectedItem=void 0,this.textField.value=""}set value(t){if(!t||!/\d/.test(t))return void this.#e();t.startsWith("+")||(t=`+${t}`);let e="",n="";if(t.includes("-")){const i=t.indexOf("-");e=t.slice(0,i),n=t.slice(i+1).replace(/\D+/g,"")}else{const o=(0,i.l)(t);o?.countryCallingCode&&(e=`+${o.countryCallingCode}`,n=t.slice(e.length).replace(/\D+/g,""))}if(!/\d/.test(e))return void this.#e();const o=s.A.find(t=>t.dialCode===e)?.code;o&&o!==this.selectedCountryCode&&(this.comboBox.selectedItem=this.#n(o)),this.isFormatValue?this.textField.value=this.#i(n):this.textField.value=n}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.inputs[1].focus()}),super.init?.(),this.#o()}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.#r())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.selectedCountryCode)this.#l(n);else if(y.includes(t)){const e=b[t]||t;p.includes(t)?n?this.inputs.forEach(t=>t.setAttribute(e,n)):this.inputs.forEach(t=>t.removeAttribute(e)):u.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)}}#o(){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()}#i(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new o.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#r(){const t=(0,i.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#d(t.country))}#d(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#n(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#a(t){const e=t.length?s.A.filter(e=>t.includes(e.code)):s.A;this.querySelector("descope-combo-box").innerHTML=e.map(t=>(0,a.$B)(t)).join("")}#l(t){if(!this.comboBox.value){const e=this.#n(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#s(t,e){const n=b[t]||t;"label-type"===t?this.#p(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#p(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:()=>i});const i=({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`},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)}}]);
 //# sourceMappingURL=phone-fields-descope-phone-field-index-js.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"phone-fields-descope-phone-field-index-js.js","mappings":"6NAiBO,MAAMA,GAAgB,QAAiB,cAExCC,EAAgB,CAAC,OAAQ,aAAc,qBA+EhCC,GAAiB,SAC5B,QAAiB,CACfC,SAAU,MAEZ,MACA,QAAgB,CAAEC,WAAY,CAAC,QAAS,kBAAmBC,iBAAiB,IAC5E,KAnFmBC,GACnB,cAA6BA,EAC3B,6BAAWC,GACT,OAAON,EAAcO,OAAOF,EAAWC,oBAAsB,GAC/D,CAEAE,KAEA,IAAAC,GACEC,MAAMD,QACR,CAEA,qBAAAE,CAAsBC,GACpB,IAAKA,EAEH,YADAC,KAAKL,MAAMM,SAIb,MAAMC,EAAiB,CACrBP,KAAM,gBACNQ,MAAO,OACPC,MAAO,mBAGHC,EAAmB,CACvBV,KAAM,wBACNQ,MAAO,SACPC,MAAO,mBAGTJ,KAAKL,KAAOW,OAAOC,OAAOC,SAASC,cAAc,eAAgB,CAC/DC,KAAM,YACHR,IAGLF,KAAKW,YAAYC,YAAYZ,KAAKL,MAClCK,KAAKL,KAAKkB,iBAAiB,QAAS,KAClCC,UAAUC,UAAUC,UAAUhB,KAAKiB,OACnCX,OAAOC,OAAOP,KAAKL,KAAMU,GAGzBa,WAAW,KACTZ,OAAOC,OAAOP,KAAKL,KAAMO,IACxB,MAEP,CAEA,YAAAiB,GACEnB,KAAKoB,OACP,CAEA,wBAAAC,CAAyBC,EAAUC,EAAQC,GACzC3B,MAAM4B,0BAA0BH,EAAUC,EAAQC,GAOjC,SAAbF,GACFtB,KAAKW,YAAYe,SAASF,GAGxBD,IAAWC,IACI,eAAbF,EACa,aAAXE,EACFxB,KAAKa,iBAAiB,QAASb,KAAKmB,cAEpCnB,KAAK2B,oBAAoB,QAAS3B,KAAKmB,cAEnB,sBAAbG,GACTtB,KAAKF,sBAAiC,SAAX0B,GAGjC,GAG0B,EAS5B,QAAY,CACVI,MAAO,CAAC,SAAU,UAClBC,eAAgB,oBAChBzB,MAAO,IAAM,wGAIOhB,EAAe0C,WAAWC,4BACxC3C,EAAe0C,WAAWE,+cAc5B,QAAwB,gCAC3B,QAAuB5C,EAAe0C,uBACtC,QAAoB,oBAAqB1C,EAAe0C,uBACrD,iGAMJG,iBAAkB,CAAC,WAAY,SAC/B/C,kB,sHCrIJgD,eAAeC,OAAO,IAAe,I,qICerC,MAAMC,EAAW,IAAeN,WAC1BO,EAAY,EAAAC,EAAcR,WAEnB5C,GAAgB,QAAiB,gBAiExC,KACJqD,EAAI,MACJC,EAAK,kBACLC,EAAiB,WACjBC,EAAU,cACVC,EAAa,iBACbC,EAAgB,WAChBC,EAAU,UACVC,EAAS,aACTC,EAAY,WACZC,GACE,CACFT,KAAM,CAAEU,SAAU,IAAM,SACxBT,MAAO,CAAES,SAAU,iBACnBR,kBAAmB,CAAEQ,SAAU,+CAC/BP,WAAY,CAAEO,SAAU,uBACxBN,cAAe,CAAEM,SAAU,uCAC3BJ,WAAY,CAAEI,SAAU,IAAM,sBAC9BL,iBAAkB,CAAEK,SAAU,IAAM,qBACpCH,UAAW,CAAEG,SAAU,2CACvBD,WAAY,CAAEC,SAAU,uBACxBF,aAAc,CAAEE,SAAU,0BAGfC,GAAkB,SAC7B,QAAiB,CACf7D,SAAU,CACR8D,SAAU,CACRZ,EACAG,EACA,CACEO,SAAU,IAAe/D,cACzBkE,SAAU,IAAetB,WAAWqB,UAEtC,CACEF,SAAU,EAAAX,EAAcpD,cACxBkE,SAAU,EAAAd,EAAcR,WAAWqB,WAGvCE,WAAY,CACVb,EACAO,EACAC,EACA,IACKJ,EACHQ,SAAU,EAAAd,EAAcR,WAAWwB,QAAQD,aAG/CE,UAAW,CACT,IAAKhB,EAAMa,SAAU,SACrB,IAAKP,EAAYO,SAAU,SAC3B,IAAKR,EAAkBQ,SAAU,qCAEnCI,cAAe,IAAKjB,EAAMa,SAAU,aAEpCK,iBAAkB,CAChB,IAAKd,EAAeS,SAAU,gBAC9B,IAAKN,EAAWM,SAAU,sBAE5BM,iBAAkB,CAChB,IAAKf,EAAeS,SAAU,gBAC9B,IAAKN,EAAWM,SAAU,sBAE5BO,iBAAkB,CAChB,IAAKhB,EAAeS,SAAU,gBAC9B,IAAKN,EAAWM,SAAU,sBAE5BQ,kBAAmB,CACjB,IAAKlB,EAAYU,SAAU,iBAC3B,IAAKT,EAAeS,SAAU,kBAGhCS,sBAAuB,IAAKjB,EAAkBQ,SAAUf,EAAUkB,WAClEO,yBAA0B,IACrBlB,EACHQ,SAAU,oCAEZW,gBAAiB,IAAKlB,EAAYO,SAAU,SAE5CY,kBAAmB,CACjB,IAAKnB,EAAYO,SAAU,gBAC3B,IAAKP,EAAYO,SAAU,iBAC3B,IAAKR,EAAkBQ,SAAU,gBACjC,IAAKR,EAAkBQ,SAAU,kBAGnCa,eAAgB,CACd,IAAKzB,EAAOY,SAAU,SACtB,IAAKZ,EAAOY,SAAU,2BACtB,IAAKX,EAAmBW,SAAU,UAEpCc,uBAAwB,IAAKzB,EAAmBW,SAAU,WAE1De,sBAAuB,IAAKpB,EAAcK,SAAU,SACpDgB,iBAAkB,IAAKrB,EAAcK,SAAU,oBAC/CiB,qBAAsB,IAAKtB,EAAcK,SAAU,mBACnDkB,wBAAyB,IAAKvB,EAAcK,SAAU,wBACtDmB,uBAAwB,IAAKxB,EAAcK,SAAU,qBACrDoB,yBAA0B,IAAKzB,EAAcK,SAAU,uBACvDqB,qBAAsB,IAAK1B,EAAcK,SAAU,aAEnDsB,oBAAqB,CACnB,IAAK7B,EAAYO,SAAUhB,EAASsC,qBACpC,IAAK9B,EAAkBQ,SAAUf,EAAUqC,sBAG7CC,0BAA2B,IAAK9B,EAAYO,SAAUhB,EAASwC,uBAE/DC,2BAA4B,CAC1B5B,SAAU,oBACVG,SAAUf,EAAUwC,4BAGtBC,kBAAmB,IAAKpC,EAAYU,SAAU,iBAC9C2B,kBAAmB,IAAKrC,EAAYU,SAAU,iBAC9CrB,kBAAmB,IAAKW,EAAYU,SAAU,iBAC9CpB,mBAAoB,IAAKU,EAAYU,SAAU,kBAE/C4B,iBAAkB,CAAC,IAAKpC,EAAkBQ,SAAUf,EAAU2C,mBAC9DC,uBAAwB,CAAC,IAAKpC,EAAYO,SAAUhB,EAAS6C,yBAC7DC,kBAAmB,CACjB,IAAKrC,EAAYO,SAAUhB,EAAS8C,mBACpC,IAAKtC,EAAkBQ,SAAUf,EAAU6C,uBAIjD,KACA,MACA,QAAgB,CAAE5F,WAAY,CAAC,QAAS,oBA/LrBE,GACnB,cAAmCA,EACjC,uBAAW2F,GACT,OAAO,GACT,CAEA,IAAAvF,GACEC,MAAMD,SAEN,MAAMwF,EAAW5E,SAASC,cAAc,YAExC2E,EAASC,UAAY,cACpB,oEAGE,mBAGHrF,KAAKW,YAAYC,YAAYwE,EAASE,QAAQC,WAAU,IAExDvF,KAAKwF,aAAexF,KAAKyF,WAAWC,cAAc,MAElD,QAAa1F,KAAKyF,WAAWlD,KAAMvC,KAAKwF,aAAc,CACpDG,aAAc,CACZ,OACA,WACA,YACA,YACA,eACA,4BACA,0BACA,WACA,qBACA,sBACA,WACA,QACA,aACA,2BACA,eACA,sBAGN,CAEA,oBAAIC,GACF,OAAO5F,KAAKwF,cAAcK,gBAC5B,CAEA,uBAAIC,GACF,OAAO9F,KAAKwF,cAAcM,mBAC5B,CAEA,wBAAIC,GACF,OAAO/F,KAAKwF,cAAcO,oBAC5B,CAEA,gBAAIC,GACF,OAAOC,MAAMC,KAAKlG,KAAKwF,aAAaO,sBAAsBI,IAAKC,GAC7DA,EAAIC,aAAa,qBAErB,GA2B2B,EA2G7B,QAAY,CACVzE,MAAO,GACPC,eAAgB,oBAChBzB,MAAO,IAAM,wJAOZ,QAAuB8C,EAAgBpB,uBACvC,QAAiB,gCACjB,QAAsC,gCACtC,mhCA0C8BoB,EAAgBpB,WAAW4B,oWAexDrB,EAAUN,kCACVM,EAAUL,mCACVK,EAAUqB,iCACVrB,EAAUuB,8FAIVxB,EAASL,kCACTK,EAASJ,mCACTI,EAASsB,iCACTtB,EAASwB,mfAgBP,QAAwB,6BAE5B3B,iBAAkB,CAAC,WAAY,SAC/B/C,kB,6GCzTG,MAAMA,GAAgB,QAAiB,wBAExCoH,EAAc,CAAC,WAAY,OAAQ,WAAY,YAC/CC,EAAe,CAAC,4BAA6B,eAAgB,sBAC7DC,EAAa,CAAC,0BAA2B,YAAa,eAAgB,QACtEC,EAAiB,CAAC,aAAc,sBAAuB,SACvDC,EAAW,CACf,sBAAuB,QACvB,4BAA6B,cAC7B,0BAA2B,eAGvBC,EAAoB,GAAGjH,OAAO4G,EAAaC,EAAcC,EAAYC,GAErEG,GAAiB,OAAqB,CAAE1H,gBAAe2H,aAAc,QAyV3E,EAvVA,cAAiCD,EAC/B,6BAAWnH,GACT,MAAO,GAAGC,OAAOkH,EAAenH,oBAAsB,GAAIkH,EAC5D,CAEA,GAEA,WAAAG,GACEjH,QAEAG,KAAKqF,UAAY,iJAMb,IAAac,IAAKY,IAAS,QAAaA,IAAOC,KAAK,qJAOxDhH,KAAKiH,SAAWjH,KAAK0F,cAAc,qBACnC1F,KAAKkH,UAAYlH,KAAK0F,cAAc,sBAEpC1F,KAAKmH,OAAS,CAACnH,KAAKiH,SAAUjH,KAAKkH,YAEnC,QAAalH,KAAMA,KAAKiH,SAAU,CAAEtB,aAAc,CAAC,iBACnD,QAAa3F,KAAMA,KAAKkH,UAAW,CAAEvB,aAAc,CAAC,aAAc,cAGlE3F,KAAKiH,SAASG,uBAA0BC,IACtC,MAAO,CAAEC,GAAYD,GAAKE,QAAQ,MAAQ,GAC1C,OAAOD,EAEX,CAGA,wBAAIvB,GACF,OAAO/F,KAAKiH,SAASO,KACvB,CAGA,oBAAI3B,GACF,OAAO7F,KAAKiH,SAASxB,WAAWC,cAAc,SAASzE,KACzD,CAGA,uBAAI6E,GACF,OAAO9F,KAAKkH,UAAUzB,WAAWC,cAAc,QACjD,CAEA,0BAAI+B,GACF,MAAyD,SAAlDzH,KAAKqG,aAAa,2BAC3B,CAEA,eAAIqB,GACF,OAAO1H,KAAKqG,aAAa,eAC3B,CAEA,kBAAIsB,GACF,OAAO3H,KAAKkH,UAAUS,cACxB,CAEA,aAAIC,GACF,OAAOC,SAAS7H,KAAKqG,aAAa,aAAc,KAAO,CACzD,CAEA,uBAAIyB,GACF,OAAO9H,KAAKiH,UAAUc,cAAc1B,aAAa,oBACnD,CAEA,qBAAI2B,GACF,MAAMC,EAAOjI,KAAKqG,aAAa,sBAC/B,OAAO4B,GAAMV,MAAM,KAAKW,OAAOC,UAAY,EAC7C,CAEA,iBAAIC,GACF,MAA6C,SAAtCpI,KAAKqG,aAAa,eAC3B,CAGA,sBAAIgC,GACF,MAAkD,SAA3CrI,KAAKqG,aAAa,oBAC3B,CAEA,SAAIpF,GACF,OAAKjB,KAAKiH,SAAShG,OAAUjB,KAAKkH,UAAUjG,MAIxCjB,KAAKyH,uBACA,GAAGzH,KAAKiH,SAAShG,SAASjB,KAAKkH,UAAUjG,QAG3C,GAAGjB,KAAKiH,SAAShG,SAASjB,KAAKkH,UAAUjG,MAAMqH,QAAQ,OAAQ,MAP7D,EAQX,CAEA,KACEtI,KAAKiH,SAASc,kBAAeQ,EAC7BvI,KAAKkH,UAAUjG,MAAQ,EACzB,CAEA,SAAIA,CAAMoG,GAER,IAAKA,IAAQ,KAAKmB,KAAKnB,GAErB,YADArH,MAAK,IAKFqH,EAAIoB,WAAW,OAClBpB,EAAM,IAAIA,KAGZ,IAAIC,EAAW,GACXoB,EAAiB,GAErB,GAAIrB,EAAIsB,SAAS,KAAM,CAErB,MAAMC,EAAUvB,EAAIwB,QAAQ,KAC5BvB,EAAWD,EAAIyB,MAAM,EAAGF,GACxBF,EAAiBrB,EAAIyB,MAAMF,EAAU,GAAGN,QAAQ,OAAQ,GAC1D,KAAO,CAEL,MAAMS,GAAS,OAA2B1B,GACtC0B,GAAQC,qBACV1B,EAAW,IAAIyB,EAAOC,qBAEtBN,EAAiBrB,EAAIyB,MAAMxB,EAAS2B,QAAQX,QAAQ,OAAQ,IAEhE,CAGA,IAAK,KAAKE,KAAKlB,GAEb,YADAtH,MAAK,IAKP,MAAMkJ,EAAc,IAAaC,KAAMC,GAAMA,EAAE9B,WAAaA,IAAW+B,KAGnEH,GAAeA,IAAgBlJ,KAAK8H,sBACtC9H,KAAKiH,SAASc,aAAe/H,MAAK,EAAwBkJ,IAIxDlJ,KAAKoI,cACPpI,KAAKkH,UAAUjG,MAAQjB,MAAK,EAAsB0I,GAElD1I,KAAKkH,UAAUjG,MAAQyH,CAE3B,CAEA,IAAA9I,GACEI,KAAKa,iBAAiB,QAAUyI,IAE1BA,EAAEC,WAAWvJ,KAAKmH,OAAO,GAAG/F,UAGlCvB,MAAMD,SAENI,MAAK,GACP,CAEA,WAAAwJ,GACE,MAAMN,EAAclJ,KAAKiH,SAAShG,MAC5BwI,EAAgBzJ,KAAKkH,UAAUjG,MAE/ByI,GAAWR,IAAgBO,EAC3BE,EAAgBF,GAAiBA,EAAcR,QAAUjJ,KAAK4H,UAEpE,GAAI5H,KAAK4J,YAAcF,EACrB,MAAO,CAAEG,cAAc,GAGzB,GAAI7J,KAAKiB,MAAO,CACd,IAAK0I,EACH,MAAO,CAAEG,UAAU,GAGrB,GAAI9J,KAAKqI,qBAAuBrI,MAAK,IACnC,MAAO,CAAE+J,iBAAiB,EAE9B,CAEA,MAAO,CAAC,CACV,CAEA,iBAAAC,IAAqBC,GACnBjK,KAAKkH,UAAU8C,qBAAqBC,EACtC,CAEA,wBAAA5I,CAAyBC,EAAU4I,EAAUC,GAG3C,GAFAtK,MAAMwB,yBAAyBC,EAAU4I,EAAUC,GAE/CD,IAAaC,EAAU,CACzB,GAAiB,iBAAb7I,GAA+B6I,IAAanK,KAAK8H,oBACnD9H,MAAK,EAA0BmK,QAC1B,GAAIxD,EAAkBgC,SAASrH,GAAW,CAC/C,MAAM2G,EAAOvB,EAASpF,IAAaA,EAE/BgF,EAAYqC,SAASrH,GAClB6I,EAGHnK,KAAKmH,OAAOiD,QAASC,GAAUA,EAAMC,aAAarC,EAAMkC,IAFxDnK,KAAKmH,OAAOiD,QAASC,GAAUA,EAAME,gBAAgBtC,IAI9C1B,EAAaoC,SAASrH,GAC/BtB,KAAKiH,SAASqD,aAAarC,EAAMkC,GACxB3D,EAAWmC,SAASrH,IAC7BtB,KAAKkH,UAAUoD,aAAarC,EAAMkC,EAEtC,CAEI1D,EAAekC,SAASrH,IAC1BtB,MAAK,EAAsBsB,EAAU6I,GAGtB,uBAAb7I,GACFtB,MAAK,EAAqBA,KAAKgI,kBAEnC,CACF,CAEA,KAEEhI,KAAKkH,UAAUrG,iBAAiB,QAAUyI,IACxC,IAAKtJ,KAAKyH,uBAAwB,CAChC,MAAM+C,EAAkB,OAClBC,EAAiBnB,EAAEoB,OAAOzJ,MAC7BsG,MAAM,IACNW,OAAQyC,GAASH,EAAgBhC,KAAKmC,IACtC3D,KAAK,IACRsC,EAAEoB,OAAOzJ,MAAQwJ,CACnB,IAGFzK,KAAK4K,6BAA6B5K,KAAKmH,QACvCnH,KAAK6K,6BACP,CAEA,GAAsBnC,EAAiB,IAUrC,OARK1I,MAAK,GAAQA,MAAK,EAAK8K,UAAY9K,KAAK8H,sBAC3C9H,MAAK,EAAO,IAAI,IAAUA,KAAK8H,sBAIjC9H,MAAK,EAAK+K,QAEW/K,MAAK,EAAKqK,MAAM3B,IACdA,CACzB,CAEA,KACE,MAAMK,GAAS,OAA2B/I,KAAKiB,OAE/C,SACI8H,GACAA,EAAOiC,aACPjC,EAAO+B,SACP9K,MAAK,EAAkB+I,EAAO+B,SAEpC,CAEA,GAAkB5B,GAChB,OAAKlJ,KAAKgI,kBAAkBiB,QAIrBjJ,KAAKgI,kBAAkBW,SAASO,EACzC,CAGA,GAAwBA,GACtB,OAAOlJ,KAAKiH,SAASO,OAAO2B,KAAMC,GAAMA,EAAE/C,aAAa,uBAAyB6C,EAClF,CAEA,GAAqBlB,GACnB,MAAMR,EAAQQ,EAAkBiB,OAC5B,IAAaf,OAAQkB,GAAMpB,EAAkBW,SAASS,EAAEC,OACxD,IAEJrJ,KAAK0F,cAAc,qBAAqBL,UAAYmC,EACjDrB,IAAKY,IAAS,QAAaA,IAC3BC,KAAK,GACV,CAEA,GAA0BkC,GACxB,IAAKlJ,KAAKiH,SAAShG,MAAO,CACxB,MAAMgK,EAAkBjL,MAAK,EAAwBkJ,GAIjD+B,GACF/J,WAAW,KACTlB,KAAKiH,SAASc,aAAekD,GAGnC,CACF,CAEA,GAAsB3J,EAAU6I,GAE9B,MAAMlC,EAAOvB,EAASpF,IAAaA,EAElB,eAAbA,EACFtB,MAAK,EAAuBmK,GAIe,aAApCnK,KAAKqG,aAAa,gBACR,wBAAb/E,EACFtB,KAAKiH,SAASqD,aAAarC,EAAMkC,GACX,UAAb7I,GACTtB,KAAKkH,UAAUoD,aAAarC,EAAMkC,GAGxC,CAEA,GAAuBA,GACJ,aAAbA,GAEFnK,KAAKiH,SAASqD,aAAa,QAAStK,KAAKqG,aAAa,wBAA0B,IAChFrG,KAAKiH,SAASqD,aACZ,cACAtK,KAAKqG,aAAa,8BAAgC,IAEpDrG,KAAKkH,UAAUoD,aAAa,QAAStK,KAAKqG,aAAa,UAAY,IACnErG,KAAKkH,UAAUoD,aACb,cACAtK,KAAKqG,aAAa,4BAA8B,KAIlDrG,KAAKmH,OAAOiD,QAASC,GAAUA,EAAME,gBAAgB,SAEzD,E,uDCrWFrI,eAAeC,OAAO,IAAe,I,iCCD9B,MAGM+I,EAAe,EAAG7B,OAAM/B,WAAU6D,KAAML,KAAc,0BAEtDxD,sBACE+B,KAAQ/B,KAAYwD,8BACZzB,uDAPO,CAACA,GAC7B,+DAA+DA,EAAK+B,oBAUtDC,CAAehC,gDAEpByB,gDAGAzB,yBACA/B,kC,yHCfXpF,eAAeC,OAAO,KAAe,K","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 { ...label, property: '-webkit-text-fill-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 errorMessageFontSize: { ...errorMessage, property: 'font-size' },\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', 'style'],\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 } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes \|\| [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') \|\| [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) \|\| 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) \|\| [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value \|\| !this.textField.value) {\n return '';\n }\n\n if (this.allowAlphanumericInput) {\n return `${this.comboBox.value}-${this.textField.value}`;\n }\n\n return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n }\n\n #clearValue() {\n this.comboBox.selectedItem = undefined;\n this.textField.value = '';\n }\n\n set value(val) {\n // reject empty or digit-free values\n if (!val \|\| !/\\d/.test(val)) {\n this.#clearValue();\n return;\n }\n\n // ensure plus prefix\n if (!val.startsWith('+')) {\n val = `+${val}`;\n }\n\n let dialCode = '';\n let nationalNumber = '';\n\n if (val.includes('-')) {\n // dash explicitly marks where the dial code ends — no parsing needed\n const dashIdx = val.indexOf('-');\n dialCode = val.slice(0, dashIdx);\n nationalNumber = val.slice(dashIdx + 1).replace(/\\D+/g, '');\n } else {\n // parse only to get dial code length,\n const parsed = parsePhoneNumberFromString(val);\n if (parsed?.countryCallingCode) {\n dialCode = `+${parsed.countryCallingCode}`;\n // slice the raw value to avoid parser transformations\n nationalNumber = val.slice(dialCode.length).replace(/\\D+/g, '');\n }\n }\n\n // dial code must contain digits (e.g. '+1', not just '+')\n if (!/\\d/.test(dialCode)) {\n this.#clearValue();\n return;\n }\n\n // resolve country code from dial code\n const countryCode = CountryCodes.find((c) => c.dialCode === dialCode)?.code;\n\n // sync combo box when country changes\n if (countryCode && countryCode !== this.selectedCountryCode) {\n this.comboBox.selectedItem = this.#getCountryItemByCodeId(countryCode);\n }\n\n // set formatted or raw national number on the text field\n if (this.isFormatValue) {\n this.textField.value = this.#formatNationalNumber(nationalNumber);\n } else {\n this.textField.value = nationalNumber;\n }\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode \|\| !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue && !this.selectedCountryCode) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (commonAttrs.includes(attrName)) {\n if (!newValue) {\n this.inputs.forEach((input) => input.removeAttribute(attr));\n } else {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n }\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt \|\| this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n return formattedVal \|\| nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryItemByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryItemByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') \|\| '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') \|\| ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') \|\| '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') \|\| ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val \|\| '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country \|\| '';\n phoneNumber = phone \|\| '';\n }\n\n return [countryCode, phoneNumber];\n};\n","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","errorMessageFontSize","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","replace","undefined","test","startsWith","nationalNumber","includes","dashIdx","indexOf","slice","parsed","countryCallingCode","length","countryCode","find","c","code","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","handleFocusEventsDispatching","handleInputEventDispatching","country","reset","isValid","countryCodeItem","comboBoxItem","name","toLowerCase","getCountryFlag"],"sourceRoot":""}
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 { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport { 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 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 { ...label, property: '-webkit-text-fill-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 errorMessageFontSize: { ...errorMessage, property: 'font-size' },\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', 'style'],\n componentName,\n })\n);\n\nexport default PhoneFieldClass;\n","import { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\nimport { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem } from '../helpers';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes \|\| [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') \|\| [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) \|\| 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) \|\| [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value \|\| !this.textField.value) {\n return '';\n }\n\n if (this.allowAlphanumericInput) {\n return `${this.comboBox.value}-${this.textField.value}`;\n }\n\n return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n }\n\n #clearValue() {\n this.comboBox.selectedItem = undefined;\n this.textField.value = '';\n }\n\n set value(val) {\n // reject empty or digit-free values\n if (!val \|\| !/\\d/.test(val)) {\n this.#clearValue();\n return;\n }\n\n // ensure plus prefix\n if (!val.startsWith('+')) {\n val = `+${val}`;\n }\n\n let dialCode = '';\n let nationalNumber = '';\n\n if (val.includes('-')) {\n // dash explicitly marks where the dial code ends — no parsing needed\n const dashIdx = val.indexOf('-');\n dialCode = val.slice(0, dashIdx);\n nationalNumber = val.slice(dashIdx + 1).replace(/\\D+/g, '');\n } else {\n // parse only to get dial code length,\n const parsed = parsePhoneNumberFromString(val);\n if (parsed?.countryCallingCode) {\n dialCode = `+${parsed.countryCallingCode}`;\n // slice the raw value to avoid parser transformations\n nationalNumber = val.slice(dialCode.length).replace(/\\D+/g, '');\n }\n }\n\n // dial code must contain digits (e.g. '+1', not just '+')\n if (!/\\d/.test(dialCode)) {\n this.#clearValue();\n return;\n }\n\n // resolve country code from dial code\n const countryCode = CountryCodes.find((c) => c.dialCode === dialCode)?.code;\n\n // sync combo box when country changes\n if (countryCode && countryCode !== this.selectedCountryCode) {\n this.comboBox.selectedItem = this.#getCountryItemByCodeId(countryCode);\n }\n\n // set formatted or raw national number on the text field\n if (this.isFormatValue) {\n this.textField.value = this.#formatNationalNumber(nationalNumber);\n } else {\n this.textField.value = nationalNumber;\n }\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode \|\| !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue && !this.selectedCountryCode) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (commonAttrs.includes(attrName)) {\n if (!newValue) {\n this.inputs.forEach((input) => input.removeAttribute(attr));\n } else {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n }\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt \|\| this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n return formattedVal \|\| nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryItemByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryItemByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') \|\| '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') \|\| ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') \|\| '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') \|\| ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val \|\| '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country \|\| '';\n phoneNumber = phone \|\| '';\n }\n\n return [countryCode, phoneNumber];\n};\n","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","errorMessageFontSize","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","replace","undefined","test","startsWith","nationalNumber","includes","dashIdx","indexOf","slice","parsed","countryCallingCode","length","countryCode","find","c","code","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","handleFocusEventsDispatching","handleInputEventDispatching","country","reset","isValid","countryCodeItem","comboBoxItem","name","toLowerCase","getCountryFlag"],"sourceRoot":""}

package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*! For license information please see phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4838,8657],{79275(t,e,i){i.d(e,{T:()=>o,w:()=>d});var n=i(79365),a=i(6424),s=i(9696),l=i(97810),r=i(73551);const o=(0,l.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,r.$J)("vaadin-text-field")}\n\t\t\t${(0,r.cy)(d.cssVarList)}\n\t\t\t${(0,r.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,r.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:()=>p,T:()=>u});var n=i(25964),a=i(3393),s=i(97810),l=i(92259),r=i(10473),o=i(23530);const u=(0,s.xE)("phone-field-internal-input-box"),d=["disabled","size","readonly","phone-input-placeholder","name","maxlength","autocomplete","label-type"],c={"phone-input-placeholder":"placeholder"},h=(0,a.y)({componentName:u,baseSelector:"div"}),p=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],d)}#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,l.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]),(0,n.EA)(this.textField,this,{includeAttrs:["has-value"]})}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&&d.includes(t)){const e=c[t]||t;this.textField.setAttribute(e,i)}}#n(t){let e=this.#l(t.target.value);this.isFormatValue&&this.#r(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)}#l(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 o.Q(e)),this.#t.reset(),this.#t.input(t)||t):t}#c(t){const e=(0,r.l)(t);return e?.country||""}#r(t){return!!(0,l.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(72562),l=i(81488),r=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",r.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`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4838,8657],{79275(t,e,i){i.d(e,{T:()=>o,w:()=>d});var n=i(79365),a=i(6424),s=i(9696),l=i(97810),r=i(73551);const o=(0,l.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,r.$J)("vaadin-text-field")}\n\t\t\t${(0,r.cy)(d.cssVarList)}\n\t\t\t${(0,r.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,r.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:()=>p,T:()=>u});var n=i(25964),a=i(10473),s=i(23530),l=i(3393),r=i(97810),o=i(92259);const u=(0,r.xE)("phone-field-internal-input-box"),d=["disabled","size","readonly","phone-input-placeholder","name","maxlength","autocomplete","label-type"],c={"phone-input-placeholder":"placeholder"},h=(0,l.y)({componentName:u,baseSelector:"div"}),p=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],d)}#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,o.Q)(this.getAttribute("default-code"))}get defaultCode(){return this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}get restrictCountries(){return this.getAttribute("restrict-countries")?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.textField.value)return"";if(!this.isStrictValidation)return this.#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]),(0,n.EA)(this.textField,this,{includeAttrs:["has-value"]})}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&&d.includes(t)){const e=c[t]||t;this.textField.setAttribute(e,i)}}#n(t){let e=this.#l(t.target.value);this.isFormatValue&&this.#r(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,a.l)([this.defaultDialCode,this.#a(this.textField.value)].filter(Boolean).join("")):(0,a.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,a.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)}#l(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 s.Q(e)),this.#t.reset(),this.#t.input(t)||t):t}#c(t){const e=(0,a.l)(t);return e?.country||""}#r(t){return!!(0,o.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(72562),l=i(81488),r=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",r.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`
       <style>
         [part='input-field'] {
           flex-grow: 0;