npm - @descope/web-components-ui - Versions diffs - 1.43.0 → 1.45.0 - Mend

@descope/web-components-ui 1.43.0 → 1.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) 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,n)=>{n.d(e,{T:()=>a,w:()=>c});var i=n(79365),s=n(6424),o=n(9696),r=n(97810),u=n(73551);const a=(0,r.xE)("text-field"),l=["type","label-type","copy-to-clipboard"],c=(0,o.Zz)((0,i.RF)({mappings:s.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(t=>class extends t{static get observedAttributes(){return l.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(${c.cssVarList.inputOutlineWidth}) + var(${c.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,u.$J)("vaadin-text-field")}\n\t\t\t${(0,u.cy)(c.cssVarList)}\n\t\t\t${(0,u.LJ)("vaadin-text-field",c.cssVarList)}\n      ${(0,u.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)},84015:(t,e,n)=>{n.d(e,{A:()=>y,T:()=>u});var i=n(3393),s=n(97810),o=n(51680),r=n(49157);const u=(0,s.xE)("phone-field-internal"),a=["disabled","size","bordered","readonly","allow-alphanumeric-input"],l=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength","autocomplete","name"],p=["label-type","country-input-label","label"],d={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},h=[].concat(a,l,c,p),b=(0,i.y)({componentName:u,baseSelector:"div"}),y=class extends b{static get observedAttributes(){return[].concat(b.observedAttributes||[],h)}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,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.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],(0,s.EA)(this,this.countryCodeInput,{includeAttrs:["label-type"]}),(0,s.EA)(this,this.phoneNumberInput,{includeAttrs:["label-type","required"]}),this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.countryCodeInput.items}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e,n]=(0,r.lq)(t);this.#t(e),this.#e(n)}setSelectionRange(...t){this.phoneNumberInput.setSelectionRange(...t)}get selectionStart(){return this.phoneNumberInput.selectionStart}#t(t){if(t){const e=this.getCountryByDialCode(t);e&&(this.countryCodeInput.selectedItem=e)}else this.countryCodeInput.selectedItem=void 0}#e(t){this.phoneNumberInput.value!==t&&(this.phoneNumberInput.value=t)}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,n=!t||!e,i=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&n?{valueMissing:!0}:i?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){const t=this.getAttribute("restrict-countries");return t?t.split(","):[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-id")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(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,r.$B)(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{if(t.stopPropagation(),!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()}handleLabelTypeAttrs(t,e){const n=d[t]||t;"label-type"===t?this.onLabelTypeChange(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.countryCodeInput.setAttribute(n,e):"label"===t&&this.phoneNumberInput.setAttribute(n,e))}onLabelTypeChange(t){"floating"===t?(this.countryCodeInput.setAttribute("label",this.getAttribute("country-input-label")||""),this.countryCodeInput.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.phoneNumberInput.setAttribute("label",this.getAttribute("label")||""),this.phoneNumberInput.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach((t=>t.removeAttribute("label")))}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.handleDefaultCountryCode(n);else if(h.includes(t)){const e=d[t]||t;a.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):l.includes(t)?this.countryCodeInput.setAttribute(e,n):c.includes(t)&&this.phoneNumberInput.setAttribute(e,n)}p.includes(t)&&this.handleLabelTypeAttrs(t,n),"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},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:()=>s,lq:()=>o});var i=n(10473);const s=({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`,o=t=>{const e=t||"";let n="",s="";const o=(0,i.l)(e);if(o)o.countryCallingCode&&(n=`+${o.countryCallingCode}`),o.nationalNumber&&(s=o.nationalNumber);else{const[t,i]=e.split("-");n=t||"",s=i||""}return[n,s]}}}]);
+"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:()=>d});var n=i(79365),s=i(6424),o=i(9696),a=i(97810),l=i(73551);const r=(0,a.xE)("text-field"),u=["type","label-type","copy-to-clipboard"],d=(0,o.Zz)((0,n.RF)({mappings:s.A}),n.VO,(0,n.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),n.tQ,(t=>class extends t{static get observedAttributes(){return u.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},i={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,i),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,i){super.attributeChangeCallback?.(t,e,i),"type"===t&&this.baseElement._setType(i),e!==i&&("label-type"===t?"floating"===i?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===i))}}))((0,n.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(d.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:r}))},21374:(t,e,i)=>{i.r(e),i.d(e,{TextFieldClass:()=>n.w,componentName:()=>n.T}),i(11284),i(37182),i(95260);var n=i(79275);customElements.define(n.T,n.w)},84015:(t,e,i)=>{i.d(e,{A:()=>g,T:()=>u});var n=i(3393),s=i(97810),o=i(51680),a=i(49157),l=i(23530),r=i(10473);const u=(0,s.xE)("phone-field-internal"),d=["disabled","size","bordered","readonly"],c=["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"},y=[].concat(d,c,h,p),m=(0,n.y)({componentName:u,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      ${o.A.map((t=>(0,a.$B)(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,s.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,s.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.comboBox.value||!this.textField.value)return"";const[t,e]=(0,a.lq)(`${this.comboBox.value}-${this.textField.value}`);return`${t||this.comboBox.value}-${e||this.textField.value}`}set value(t){const[e,i]=(0,a.lq)(t);this.#e(e),this.#i(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.length,n=!!e.length,s=!i||!n,o=n&&e.length>=this.minLength;return this.isRequired&&s?{valueMissing:!0}:o?this.value&&this.isStrictValidation&&!this.#s()?{patternMismatch:!0}:{}:{tooShort:!0}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,i){if(super.attributeChangedCallback(t,e,i),e!==i){if("default-code"===t&&i)this.#o(i);else if(y.includes(t)){const e=b[t]||t;d.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,i))):c.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.#l(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(),this.addEventListener("input",this.#r.bind(this))}#e(t){if(!t||t===this.selectedCountryCode)return;let e;if(this.value){const i=this.#u(`${t}-${this.textField.value}`);e=this.#d(i)}e||(e=this.#c(t)),this.comboBox.selectedItem=e}#i(t){this.isFormatValue&&(t=this.#h(t)),this.textField.value!==t&&(this.textField.value=t)}#h(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new l.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#s(){const t=(0,r.l)(this.value);return t&&t.isValid?.()&&t.country&&this.#p(t.country)}#p(t){return!this.restrictCountries||this.restrictCountries.includes(t)}#c(t){return this.comboBox.items?.find((e=>e.getAttribute("data-id")===t))||void 0}#d(t){return this.comboBox.items?.find((e=>e.getAttribute("data-country-code")===t))}#u(t){if(!t)return;const e=(0,r.l)(t);if(!e?.country)return;const i=this.#d(e.country);return i?.getAttribute("data-country-code")}#l(t){const e=t.length?o.A.filter((e=>t.includes(e.code))):o.A;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,a.$B)(t))).join("")}#o(t){if(!this.comboBox.value){const e=this.#d(t);e&&setTimeout((()=>{this.comboBox.selectedItem=e}))}}#r(){if(!this.value)return;const t=this.#u(this.value);if(t&&this.selectedCountryCode!==t){const e=this.#d(t);e&&(this.comboBox.selectedItem=e)}}#a(t,e){const i=b[t]||t;"label-type"===t?this.#b(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(i,e):"label"===t&&this.textField.setAttribute(i,e))}#b(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach((t=>t.removeAttribute("label")))}}},92132:(t,e,i)=>{i.r(e),i(27092),i(21374);var n=i(84015);customElements.define(n.T,n.A)},49157:(t,e,i)=>{i.d(e,{$B:()=>s,lq:()=>o});var n=i(10473);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`,o=t=>{const e=t||"";let i="",s="";const o=(0,n.l)(e);if(o)o.countryCallingCode&&(i=`+${o.countryCallingCode}`),o.nationalNumber&&(s=o.nationalNumber);else{const[t,n]=e.split("-");i=t||"",s=n||""}return[i,s]}}}]);
 //# 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, parsePhoneNumber } from '../helpers';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly', 'allow-alphanumeric-input'];\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 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.countryCodeInput = this.querySelector('descope-combo-box');\n this.phoneNumberInput = this.querySelector('descope-text-field');\n this.inputs = [this.countryCodeInput, this.phoneNumberInput];\n\n forwardAttrs(this, this.countryCodeInput, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.phoneNumberInput, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.countryCodeInput.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') \|\| [];\n return dialCode;\n };\n }\n\n get countryCodeInputData() {\n return this.countryCodeInput.items;\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get value() {\n if (!this.phoneNumberValue) {\n return '';\n }\n return `${this.countryCodeInput.value}-${this.phoneNumberInput.value}`;\n }\n\n set value(val) {\n const [countryCode, phoneNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setPhoneNumber(phoneNumber);\n }\n\n setSelectionRange(...args) {\n this.phoneNumberInput.setSelectionRange(...args);\n }\n\n get selectionStart() {\n return this.phoneNumberInput.selectionStart;\n }\n\n #setCountryCode(val) {\n if (val) {\n const countryCodeItem = this.getCountryByDialCode(val);\n if (countryCodeItem) {\n this.countryCodeInput.selectedItem = countryCodeItem;\n }\n } else {\n this.countryCodeInput.selectedItem = undefined;\n }\n }\n\n #setPhoneNumber(val) {\n if (this.phoneNumberInput.value === val) {\n return;\n }\n\n this.phoneNumberInput.value = val;\n }\n\n get phoneNumberValue() {\n return this.phoneNumberInput.value;\n }\n\n get countryCodeValue() {\n return this.countryCodeInput.shadowRoot.querySelector('input').value;\n }\n\n get phoneNumberInputEle() {\n return this.phoneNumberInput.shadowRoot.querySelector('input');\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) \|\| 0;\n }\n\n getValidity() {\n const hasCode = this.countryCodeInput.value;\n const hasPhone = this.phoneNumberInput.value;\n const emptyValue = !hasCode \|\| !hasPhone;\n const hasMinPhoneLength =\n this.phoneNumberInput.value?.length && this.phoneNumberInput.value.length < this.minLength;\n\n if (this.isRequired && emptyValue) {\n return { valueMissing: true };\n }\n if (hasMinPhoneLength) {\n return { tooShort: true };\n }\n if (hasPhone && !hasCode) {\n return { valueMissing: true };\n }\n return {};\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 this.initInputs();\n }\n\n getRestrictedCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr ? attr.split(',') : [];\n }\n\n getCountryByDialCode(countryDialCode) {\n return this.countryCodeInput.items?.find((c) => c.getAttribute('data-id') === countryDialCode);\n }\n\n getCountryByCodeId(countryCode) {\n return this.countryCodeInput.items?.find(\n (c) => c.getAttribute('data-country-code') === countryCode\n );\n }\n\n updateCountryCodeItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n handleDefaultCountryCode(countryCode) {\n if (!this.countryCodeInput.value) {\n const countryCodeItem = this.getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.countryCodeInput.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.phoneNumberInput.addEventListener('input', (e) => {\n // we want to update only phoneNumberInput, and avoid triggering `set value`\n e.stopPropagation();\n\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 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.onLabelTypeChange(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.countryCodeInput.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.phoneNumberInput.setAttribute(attr, newValue);\n }\n }\n }\n\n onLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.countryCodeInput.setAttribute('label', this.getAttribute('country-input-label') \|\| '');\n this.countryCodeInput.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') \|\| ''\n );\n this.phoneNumberInput.setAttribute('label', this.getAttribute('label') \|\| '');\n this.phoneNumberInput.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 attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (commonAttrs.includes(attrName)) {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n } else if (countryAttrs.includes(attrName)) {\n this.countryCodeInput.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.phoneNumberInput.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.updateCountryCodeItems(this.getRestrictedCountries());\n }\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","countryCodeInput","querySelector","phoneNumberInput","inputs","includeAttrs","customValueTransformFn","val","dialCode","split","countryCodeInputData","items","allowAlphanumericInput","getAttribute","phoneNumberValue","countryCode","phoneNumber","setSelectionRange","args","selectionStart","countryCodeItem","getCountryByDialCode","selectedItem","undefined","countryCodeValue","shadowRoot","phoneNumberInputEle","minLength","parseInt","getValidity","hasCode","hasPhone","emptyValue","hasMinPhoneLength","length","isRequired","valueMissing","tooShort","e","isTrusted","initInputs","getRestrictedCountries","attr","countryDialCode","find","c","getCountryByCodeId","updateCountryCodeItems","restrictCountries","filter","includes","code","handleDefaultCountryCode","stopPropagation","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","handleLabelTypeAttrs","newValue","onLabelTypeChange","setAttribute","forEach","input","removeAttribute","oldValue","comboBoxItem","name","country","toLowerCase","getCountryFlag","parsePhoneNumber","parsed","countryCallingCode","nationalNumber","phone"],"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 { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem, parsePhoneNumber } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes \|\| [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') \|\| [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) \|\| 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) \|\| [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value \|\| !this.textField.value) {\n return '';\n }\n\n const [countryCode, phoneNumber] = parsePhoneNumber(\n `${this.comboBox.value}-${this.textField.value}`\n );\n\n return `${countryCode \|\| this.comboBox.value}-${phoneNumber \|\| this.textField.value}`;\n }\n\n set value(val) {\n const [countryCode, nationalNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setNationalNumber(nationalNumber);\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const hasCountryCode = !!countryCode.length;\n const hasNationalNumber = !!nationalNumer.length;\n\n const isEmpty = !hasCountryCode \|\| !hasNationalNumber;\n const isValidLength = hasNationalNumber && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.value && this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (commonAttrs.includes(attrName)) {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n\n // verify country code item against phone number pattern and replace if needed and country is allowed\n // (e.g. +1 can be US or CA, depending on the pattern)\n this.addEventListener('input', this.#handleSameCountryCodes.bind(this));\n }\n\n #setCountryCode(val) {\n if (!val \|\| val === this.selectedCountryCode) return;\n\n let countryCodeItem = undefined;\n\n if (this.value) {\n // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)\n const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);\n countryCodeItem = this.#getCountryByCodeId(code);\n }\n\n // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)\n // then use the first option with same dial code (e.g. in that case - `US` for +1)\n if (!countryCodeItem) {\n countryCodeItem = this.#getCountryByDialCode(val);\n }\n\n // set country code item; in it doesn't exist in list - set `undefined`\n this.comboBox.selectedItem = countryCodeItem;\n }\n\n #setNationalNumber(val) {\n if (this.isFormatValue) {\n val = this.#formatNationalNumber(val);\n }\n\n if (this.textField.value !== val) {\n this.textField.value = val;\n }\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt \|\| this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n\n return formattedVal \|\| nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n parsed && // Parsed successfully (not undefined)\n parsed.isValid?.() && // Parsed object is valid\n parsed.country && // Parsed object with a country code\n this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by dial code `data-id` (e.g. `+1`)\n #getCountryByDialCode(dialCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) \|\| undefined;\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #getCountryCodeByPhoneNumber(val) {\n if (!val) return undefined;\n const parsed = parsePhoneNumberFromString(val);\n if (!parsed?.country) return undefined;\n const foundCountryItem = this.#getCountryByCodeId(parsed.country);\n return foundCountryItem?.getAttribute('data-country-code');\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleSameCountryCodes() {\n if (!this.value) return;\n\n const country = this.#getCountryCodeByPhoneNumber(this.value);\n\n if (!country) return;\n\n // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)\n if (this.selectedCountryCode !== country) {\n const foundCountryItem = this.#getCountryByCodeId(country);\n // if found country is defined in country list then set it, otherwise - clear phone number\n if (foundCountryItem) {\n this.comboBox.selectedItem = foundCountryItem;\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') \|\| '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') \|\| ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') \|\| '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') \|\| ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val \|\| '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country \|\| '';\n phoneNumber = phone \|\| '';\n }\n\n return [countryCode, phoneNumber];\n};\n"],"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","countryCode","phoneNumber","nationalNumber","e","isTrusted","getValidity","nationalNumer","hasCountryCode","length","hasNationalNumber","isEmpty","isValidLength","isRequired","valueMissing","patternMismatch","tooShort","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","bind","countryCodeItem","code","country","reset","parsed","isValid","find","c","undefined","foundCountryItem","removeAttribute","comboBoxItem","name","toLowerCase","getCountryFlag","parsePhoneNumber","countryCallingCode","phone"],"sourceRoot":""}

package/dist/umd/phone-fields-descope-phone-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:()=>l,w:()=>d});var o=n(79365),i=n(6424),r=n(9696),a=n(97810),s=n(73551);const l=(0,a.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,r.Zz)((0,o.RF)({mappings:i.A}),o.VO,(0,o.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),o.tQ,(t=>class extends t{static get observedAttributes(){return p.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,o.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,s.$J)("vaadin-text-field")}\n\t\t\t${(0,s.cy)(d.cssVarList)}\n\t\t\t${(0,s.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,s.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},21374:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>o.w,componentName:()=>o.T}),n(11284),n(37182),n(95260);var o=n(79275);customElements.define(o.T,o.w)},81808:(t,e,n)=>{n.d(e,{NF:()=>A,TQ:()=>h});var o=n(84015),i=n(97810),r=n(9696),a=n(79365),s=n(79275),l=n(86365),p=n(51680),d=n(73551);const u=s.w.cssVarList,c=l.C.cssVarList,h=(0,i.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:v,phoneInput:C,separator:x,errorMessage:I,helperText:w}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},A=(0,r.Zz)((0,a.RF)({mappings:{fontSize:[b,g,{selector:s.w.componentName,property:s.w.cssVarList.fontSize},{selector:l.C.componentName,property:l.C.cssVarList.fontSize}],fontFamily:[y,I,w,{...v,property:l.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...C,property:"width"},{...v,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...x,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...x,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...x,property:"border-left-color"}],inputBorderRadius:[{...g,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...v,property:c.hostWidth},countryCodeDropdownWidth:{...v,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...C,property:"width"},horizontalPadding:[{...C,property:"padding-left"},{...C,property:"padding-right"},{...v,property:"padding-left"},{...v,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...I,property:"color"},errorMessageIcon:{...I,property:"background-image"},errorMessageIconSize:{...I,property:"background-size"},errorMessageIconPadding:{...I,property:"padding-inline-start"},errorMessageIconRepeat:{...I,property:"background-repeat"},errorMessageIconPosition:{...I,property:"background-position"},inputValueTextColor:[{...C,property:u.inputValueTextColor},{...v,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...C,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:[{...v,property:c.valueInputHeight}],valueInputMarginBottom:[{...C,property:u.valueInputMarginBottom}],marginInlineStart:[{...C,property:u.marginInlineStart},{...v,property:c.marginInlineStart}]}}),a.VO,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return p.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,i.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input"]})}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,a.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,d.cy)(A.cssVarList)}\n\t\t\t${(0,d.I4)("vaadin-text-field")}\n\t\t\t${(0,d.kG)("vaadin-text-field")}\n\t\t\t${(0,d.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(${A.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,d.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}))},84015:(t,e,n)=>{n.d(e,{A:()=>y,T:()=>s});var o=n(3393),i=n(97810),r=n(51680),a=n(49157);const s=(0,i.xE)("phone-field-internal"),l=["disabled","size","bordered","readonly","allow-alphanumeric-input"],p=["country-input-placeholder","default-code","restrict-countries"],d=["phone-input-placeholder","maxlength","autocomplete","name"],u=["label-type","country-input-label","label"],c={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},h=[].concat(l,p,d,u),b=(0,o.y)({componentName:s,baseSelector:"div"}),y=class extends b{static get observedAttributes(){return[].concat(b.observedAttributes||[],h)}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,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.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],(0,i.EA)(this,this.countryCodeInput,{includeAttrs:["label-type"]}),(0,i.EA)(this,this.phoneNumberInput,{includeAttrs:["label-type","required"]}),this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.countryCodeInput.items}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e,n]=(0,a.lq)(t);this.#t(e),this.#e(n)}setSelectionRange(...t){this.phoneNumberInput.setSelectionRange(...t)}get selectionStart(){return this.phoneNumberInput.selectionStart}#t(t){if(t){const e=this.getCountryByDialCode(t);e&&(this.countryCodeInput.selectedItem=e)}else this.countryCodeInput.selectedItem=void 0}#e(t){this.phoneNumberInput.value!==t&&(this.phoneNumberInput.value=t)}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,n=!t||!e,o=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&n?{valueMissing:!0}:o?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){const t=this.getAttribute("restrict-countries");return t?t.split(","):[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-id")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(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,a.$B)(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{if(t.stopPropagation(),!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()}handleLabelTypeAttrs(t,e){const n=c[t]||t;"label-type"===t?this.onLabelTypeChange(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.countryCodeInput.setAttribute(n,e):"label"===t&&this.phoneNumberInput.setAttribute(n,e))}onLabelTypeChange(t){"floating"===t?(this.countryCodeInput.setAttribute("label",this.getAttribute("country-input-label")||""),this.countryCodeInput.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.phoneNumberInput.setAttribute("label",this.getAttribute("label")||""),this.phoneNumberInput.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach((t=>t.removeAttribute("label")))}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.handleDefaultCountryCode(n);else if(h.includes(t)){const e=c[t]||t;l.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):p.includes(t)?this.countryCodeInput.setAttribute(e,n):d.includes(t)&&this.phoneNumberInput.setAttribute(e,n)}u.includes(t)&&this.handleLabelTypeAttrs(t,n),"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},92132:(t,e,n)=>{n.r(e),n(27092),n(21374);var o=n(84015);customElements.define(o.T,o.A)},49157:(t,e,n)=>{n.d(e,{$B:()=>i,lq:()=>r});var o=n(10473);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`,r=t=>{const e=t||"";let n="",i="";const r=(0,o.l)(e);if(r)r.countryCallingCode&&(n=`+${r.countryCallingCode}`),r.nationalNumber&&(i=r.nationalNumber);else{const[t,o]=e.split("-");n=t||"",i=o||""}return[n,i]}},98136:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>o.NF,componentName:()=>o.TQ}),n(92132),n(27092),n(21374);var o=n(81808);customElements.define(o.TQ,o.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:()=>l,w:()=>u});var i=n(79365),o=n(6424),r=n(9696),s=n(97810),a=n(73551);const l=(0,s.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],u=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${u.cssVarList.inputOutlineWidth}) + var(${u.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(u.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",u.cssVarList)}\n      ${(0,a.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},21374:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),n(11284),n(37182),n(95260);var i=n(79275);customElements.define(i.T,i.w)},81808:(t,e,n)=>{n.d(e,{NF:()=>B,TQ:()=>h});var i=n(84015),o=n(97810),r=n(9696),s=n(79365),a=n(79275),l=n(86365),d=n(51680),u=n(73551);const p=a.w.cssVarList,c=l.C.cssVarList,h=(0,o.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:x,phoneInput:C,separator:v,errorMessage:A,helperText:w}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},B=(0,r.Zz)((0,s.RF)({mappings:{fontSize:[b,g,{selector:a.w.componentName,property:a.w.cssVarList.fontSize},{selector:l.C.componentName,property:l.C.cssVarList.fontSize}],fontFamily:[y,A,w,{...x,property:l.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...C,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...v,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...v,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...v,property:"border-left-color"}],inputBorderRadius:[{...g,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...x,property:c.hostWidth},countryCodeDropdownWidth:{...x,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...C,property:"width"},horizontalPadding:[{...C,property:"padding-left"},{...C,property:"padding-right"},{...x,property:"padding-left"},{...x,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...A,property:"color"},errorMessageIcon:{...A,property:"background-image"},errorMessageIconSize:{...A,property:"background-size"},errorMessageIconPadding:{...A,property:"padding-inline-start"},errorMessageIconRepeat:{...A,property:"background-repeat"},errorMessageIconPosition:{...A,property:"background-position"},inputValueTextColor:[{...C,property:p.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...C,property:p.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},valueInputHeight:[{...x,property:c.valueInputHeight}],valueInputMarginBottom:[{...C,property:p.valueInputMarginBottom}],marginInlineStart:[{...C,property:p.marginInlineStart},{...x,property:c.marginInlineStart}]}}),s.VO,s.Yg,(0,s.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return d.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input","format-value","strict-validation"]})}get countryCodeItems(){return this.inputElement?.countryCodeValue}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}get countryCodeInputData(){return this.inputElement?.countryCodeInputData}get countryCodes(){return Array.from(this.inputElement.countryCodeInputData).map((t=>t.getAttribute("data-country-code")))}}))((0,s.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,u.cy)(B.cssVarList)}\n\t\t\t${(0,u.I4)("vaadin-text-field")}\n\t\t\t${(0,u.kG)("vaadin-text-field")}\n\t\t\t${(0,u.X6)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        direction: ltr;\n        position: relative;\n\t\t\t}\n      descope-phone-field-internal::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        outline-offset: calc(var(${B.cssVarList.inputBorderWidth}) * -1);\n        pointer-events: none;\n      }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n  \n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n        min-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${p.inputOutlineWidth}: 0;\n\t\t\t\t${p.inputOutlineOffset}: 0;\n\t\t\t\t${p.inputBorderWidth}: 0;\n\t\t\t\t${p.inputBorderRadius}: 0;\n      }\n\n      :host([label-type="floating"]) vaadin-text-field::part(label) {\n        display: none;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n      ${(0,u.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}))},84015:(t,e,n)=>{n.d(e,{A:()=>g,T:()=>d});var i=n(3393),o=n(97810),r=n(51680),s=n(49157),a=n(23530),l=n(10473);const d=(0,o.xE)("phone-field-internal"),u=["disabled","size","bordered","readonly"],p=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength","autocomplete","name"],h=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},y=[].concat(u,p,c,h),m=(0,i.y)({componentName:d,baseSelector:"div"}),g=class extends m{static get observedAttributes(){return[].concat(m.observedAttributes||[],y)}#t;constructor(){super(),this.innerHTML=`\n    <div class="wrapper">\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${r.A.map((t=>(0,s.$B)(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,o.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,o.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.comboBox.value||!this.textField.value)return"";const[t,e]=(0,s.lq)(`${this.comboBox.value}-${this.textField.value}`);return`${t||this.comboBox.value}-${e||this.textField.value}`}set value(t){const[e,n]=(0,s.lq)(t);this.#e(e),this.#n(n)}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.#i()}getValidity(){const t=this.comboBox.value,e=this.textField.value,n=!!t.length,i=!!e.length,o=!n||!i,r=i&&e.length>=this.minLength;return this.isRequired&&o?{valueMissing:!0}:r?this.value&&this.isStrictValidation&&!this.#o()?{patternMismatch:!0}:{}:{tooShort:!0}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.#r(n);else if(y.includes(t)){const e=b[t]||t;u.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):p.includes(t)?this.comboBox.setAttribute(e,n):c.includes(t)&&this.textField.setAttribute(e,n)}h.includes(t)&&this.#s(t,n),"restrict-countries"===t&&this.#a(this.restrictCountries)}}#i(){this.textField.addEventListener("input",(t=>{if(!this.allowAlphanumericInput){const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n}})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching(),this.addEventListener("input",this.#l.bind(this))}#e(t){if(!t||t===this.selectedCountryCode)return;let e;if(this.value){const n=this.#d(`${t}-${this.textField.value}`);e=this.#u(n)}e||(e=this.#p(t)),this.comboBox.selectedItem=e}#n(t){this.isFormatValue&&(t=this.#c(t)),this.textField.value!==t&&(this.textField.value=t)}#c(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new a.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#o(){const t=(0,l.l)(this.value);return t&&t.isValid?.()&&t.country&&this.#h(t.country)}#h(t){return!this.restrictCountries||this.restrictCountries.includes(t)}#p(t){return this.comboBox.items?.find((e=>e.getAttribute("data-id")===t))||void 0}#u(t){return this.comboBox.items?.find((e=>e.getAttribute("data-country-code")===t))}#d(t){if(!t)return;const e=(0,l.l)(t);if(!e?.country)return;const n=this.#u(e.country);return n?.getAttribute("data-country-code")}#a(t){const e=t.length?r.A.filter((e=>t.includes(e.code))):r.A;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,s.$B)(t))).join("")}#r(t){if(!this.comboBox.value){const e=this.#u(t);e&&setTimeout((()=>{this.comboBox.selectedItem=e}))}}#l(){if(!this.value)return;const t=this.#d(this.value);if(t&&this.selectedCountryCode!==t){const e=this.#u(t);e&&(this.comboBox.selectedItem=e)}}#s(t,e){const n=b[t]||t;"label-type"===t?this.#b(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#b(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach((t=>t.removeAttribute("label")))}}},92132:(t,e,n)=>{n.r(e),n(27092),n(21374);var i=n(84015);customElements.define(i.T,i.A)},49157:(t,e,n)=>{n.d(e,{$B:()=>o,lq:()=>r});var i=n(10473);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=t=>{const e=t||"";let n="",o="";const r=(0,i.l)(e);if(r)r.countryCallingCode&&(n=`+${r.countryCallingCode}`),r.nationalNumber&&(o=r.nationalNumber);else{const[t,i]=e.split("-");n=t||"",o=i||""}return[n,o]}},98136:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>i.NF,componentName:()=>i.TQ}),n(92132),n(27092),n(21374);var i=n(81808);customElements.define(i.TQ,i.NF)}}]);
 //# 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":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/PhoneFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/index.js"],"sourcesContent":["import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes \|\| []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport { createProxy, createStyleMixin, draggableMixin, proxyInputMixin } 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 'invalid',\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 ],\n });\n }\n\n get countryCodeItems() {\n return this.inputElement?.countryCodeValue;\n }\n\n get phoneNumberInputEle() {\n return this.inputElement?.phoneNumberInputEle;\n }\n\n get countryCodeInputData() {\n return this.inputElement?.countryCodeInputData;\n }\n\n get countryCodes() {\n return Array.from(this.inputElement.countryCodeInputData).map((ele) =>\n ele.getAttribute('data-country-code')\n );\n }\n };\n\nconst {\n host,\n label,\n requiredIndicator,\n inputField,\n internalAfter,\n countryCodeInput,\n phoneInput,\n separator,\n errorMessage,\n helperText,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n inputField: { selector: '::part(input-field)' },\n internalAfter: { selector: 'descope-phone-field-internal::after' },\n phoneInput: { selector: () => 'descope-text-field' },\n countryCodeInput: { selector: () => 'descope-combo-box' },\n separator: { selector: 'descope-phone-field-internal .separator' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: [\n host,\n inputField,\n {\n selector: TextFieldClass.componentName,\n property: TextFieldClass.cssVarList.fontSize,\n },\n {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.fontSize,\n },\n ],\n fontFamily: [\n label,\n errorMessage,\n helperText,\n {\n ...countryCodeInput,\n property: ComboBoxClass.cssVarList.overlay.fontFamily,\n },\n ],\n hostWidth: [\n { ...host, property: 'width' },\n { ...phoneInput, property: 'width' },\n { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },\n ],\n hostDirection: { ...host, property: 'direction' },\n\n inputBorderStyle: [\n { ...internalAfter, property: 'border-style' },\n { ...separator, property: 'border-left-style' },\n ],\n inputBorderWidth: [\n { ...internalAfter, property: 'border-width' },\n { ...separator, property: 'border-left-width' },\n ],\n inputBorderColor: [\n { ...internalAfter, property: 'border-color' },\n { ...separator, property: 'border-left-color' },\n ],\n inputBorderRadius: [\n { ...inputField, property: 'border-radius' },\n { ...internalAfter, property: 'border-radius' },\n ],\n\n countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },\n countryCodeDropdownWidth: {\n ...countryCodeInput,\n property: '--vaadin-combo-box-overlay-width',\n },\n phoneInputWidth: { ...phoneInput, property: 'width' },\n\n horizontalPadding: [\n { ...phoneInput, property: 'padding-left' },\n { ...phoneInput, property: 'padding-right' },\n { ...countryCodeInput, property: 'padding-left' },\n { ...countryCodeInput, property: 'padding-right' },\n ],\n\n labelTextColor: [\n { ...label, property: 'color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n\n inputValueTextColor: [\n { ...phoneInput, property: textVars.inputValueTextColor },\n { ...countryCodeInput, property: comboVars.inputValueTextColor },\n ],\n\n inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n overlayItemBackgroundColor: {\n selector: 'descope-combo-box',\n property: comboVars.overlayItemBackgroundColor,\n },\n\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],\n valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],\n marginInlineStart: [\n { ...phoneInput, property: textVars.marginInlineStart },\n { ...countryCodeInput, property: comboVars.marginInlineStart },\n ],\n },\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n customMixin\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${useHostExternalPadding(PhoneFieldClass.cssVarList)}\n\t\t\t${resetInputCursor('vaadin-text-field')}\n\t\t\t${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n\t\t\t${resetInputFieldDefaultWidth()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n margin-left: 0;\n margin-right: 0;\n }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n direction: ltr;\n position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n \n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-width: 5.75em;\n\t\t\t\t${comboVars.inputOutlineWidth}: 0;\n\t\t\t\t${comboVars.inputOutlineOffset}: 0;\n\t\t\t\t${comboVars.inputBorderWidth}: 0;\n\t\t\t\t${comboVars.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${textVars.inputOutlineWidth}: 0;\n\t\t\t\t${textVars.inputOutlineOffset}: 0;\n\t\t\t\t${textVars.inputBorderWidth}: 0;\n\t\t\t\t${textVars.inputBorderRadius}: 0;\n }\n\n :host([label-type=\"floating\"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t`,\n excludeAttrsSync: ['tabindex'],\n componentName,\n })\n);\n\nexport default PhoneFieldClass;\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem, parsePhoneNumber } from '../helpers';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly', 'allow-alphanumeric-input'];\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 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.countryCodeInput = this.querySelector('descope-combo-box');\n this.phoneNumberInput = this.querySelector('descope-text-field');\n this.inputs = [this.countryCodeInput, this.phoneNumberInput];\n\n forwardAttrs(this, this.countryCodeInput, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.phoneNumberInput, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.countryCodeInput.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') \|\| [];\n return dialCode;\n };\n }\n\n get countryCodeInputData() {\n return this.countryCodeInput.items;\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get value() {\n if (!this.phoneNumberValue) {\n return '';\n }\n return `${this.countryCodeInput.value}-${this.phoneNumberInput.value}`;\n }\n\n set value(val) {\n const [countryCode, phoneNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setPhoneNumber(phoneNumber);\n }\n\n setSelectionRange(...args) {\n this.phoneNumberInput.setSelectionRange(...args);\n }\n\n get selectionStart() {\n return this.phoneNumberInput.selectionStart;\n }\n\n #setCountryCode(val) {\n if (val) {\n const countryCodeItem = this.getCountryByDialCode(val);\n if (countryCodeItem) {\n this.countryCodeInput.selectedItem = countryCodeItem;\n }\n } else {\n this.countryCodeInput.selectedItem = undefined;\n }\n }\n\n #setPhoneNumber(val) {\n if (this.phoneNumberInput.value === val) {\n return;\n }\n\n this.phoneNumberInput.value = val;\n }\n\n get phoneNumberValue() {\n return this.phoneNumberInput.value;\n }\n\n get countryCodeValue() {\n return this.countryCodeInput.shadowRoot.querySelector('input').value;\n }\n\n get phoneNumberInputEle() {\n return this.phoneNumberInput.shadowRoot.querySelector('input');\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) \|\| 0;\n }\n\n getValidity() {\n const hasCode = this.countryCodeInput.value;\n const hasPhone = this.phoneNumberInput.value;\n const emptyValue = !hasCode \|\| !hasPhone;\n const hasMinPhoneLength =\n this.phoneNumberInput.value?.length && this.phoneNumberInput.value.length < this.minLength;\n\n if (this.isRequired && emptyValue) {\n return { valueMissing: true };\n }\n if (hasMinPhoneLength) {\n return { tooShort: true };\n }\n if (hasPhone && !hasCode) {\n return { valueMissing: true };\n }\n return {};\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 this.initInputs();\n }\n\n getRestrictedCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr ? attr.split(',') : [];\n }\n\n getCountryByDialCode(countryDialCode) {\n return this.countryCodeInput.items?.find((c) => c.getAttribute('data-id') === countryDialCode);\n }\n\n getCountryByCodeId(countryCode) {\n return this.countryCodeInput.items?.find(\n (c) => c.getAttribute('data-country-code') === countryCode\n );\n }\n\n updateCountryCodeItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n handleDefaultCountryCode(countryCode) {\n if (!this.countryCodeInput.value) {\n const countryCodeItem = this.getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.countryCodeInput.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.phoneNumberInput.addEventListener('input', (e) => {\n // we want to update only phoneNumberInput, and avoid triggering `set value`\n e.stopPropagation();\n\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 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.onLabelTypeChange(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.countryCodeInput.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.phoneNumberInput.setAttribute(attr, newValue);\n }\n }\n }\n\n onLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.countryCodeInput.setAttribute('label', this.getAttribute('country-input-label') \|\| '');\n this.countryCodeInput.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') \|\| ''\n );\n this.phoneNumberInput.setAttribute('label', this.getAttribute('label') \|\| '');\n this.phoneNumberInput.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 attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (commonAttrs.includes(attrName)) {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n } else if (countryAttrs.includes(attrName)) {\n this.countryCodeInput.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.phoneNumberInput.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.updateCountryCodeItems(this.getRestrictedCountries());\n }\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val \|\| '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country \|\| '';\n phoneNumber = phone \|\| '';\n }\n\n return [countryCode, phoneNumber];\n};\n","import './descope-phone-field-internal';\nimport '@descope-ui/descope-combo-box';\nimport '../../descope-text-field';\n\nimport { componentName, PhoneFieldClass } from './PhoneFieldClass';\n\ncustomElements.define(componentName, PhoneFieldClass);\n\nexport { PhoneFieldClass, componentName };\n"],"names":["componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","textVars","comboVars","C","host","label","requiredIndicator","inputField","internalAfter","countryCodeInput","phoneInput","separator","errorMessage","helperText","selector","PhoneFieldClass","fontSize","property","fontFamily","overlay","hostWidth","hostDirection","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","countryCodeInputWidth","countryCodeDropdownWidth","phoneInputWidth","horizontalPadding","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","overlayItemBackgroundColor","inputOutlineStyle","inputOutlineColor","valueInputHeight","valueInputMarginBottom","marginInlineStart","CountryCodes","template","innerHTML","content","cloneNode","inputElement","shadowRoot","querySelector","includeAttrs","countryCodeItems","countryCodeValue","phoneNumberInputEle","countryCodeInputData","countryCodes","Array","from","map","ele","getAttribute","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","item","join","phoneNumberInput","inputs","customValueTransformFn","val","dialCode","split","items","allowAlphanumericInput","phoneNumberValue","countryCode","phoneNumber","setSelectionRange","args","selectionStart","countryCodeItem","getCountryByDialCode","selectedItem","undefined","minLength","parseInt","getValidity","hasCode","hasPhone","emptyValue","hasMinPhoneLength","length","isRequired","valueMissing","tooShort","e","isTrusted","initInputs","getRestrictedCountries","attr","countryDialCode","find","c","getCountryByCodeId","updateCountryCodeItems","restrictCountries","filter","includes","code","handleDefaultCountryCode","stopPropagation","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","handleLabelTypeAttrs","newValue","onLabelTypeChange","setAttribute","forEach","input","removeAttribute","oldValue","comboBoxItem","name","country","toLowerCase","getCountryFlag","parsePhoneNumber","parsed","countryCallingCode","nationalNumber","phone"],"sourceRoot":""}
1	+ {"version":3,"file":"phone-fields-descope-phone-field-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/PhoneFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/index.js"],"sourcesContent":["import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes \|\| []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n createProxy,\n createStyleMixin,\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin,\n} from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport CountryCodes from '../CountryCodes';\nimport {\n resetInputCursor,\n resetInputLabelPosition,\n resetInputFieldDefaultWidth,\n resetInputFieldInvalidBackgroundColor,\n useHostExternalPadding,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\nconst comboVars = ComboBoxClass.cssVarList;\n\nexport const componentName = getComponentName('phone-field');\n\nconst customMixin = (superclass) =>\n class PhoneFieldMixinClass extends superclass {\n static get CountryCodes() {\n return CountryCodes;\n }\n\n init() {\n super.init?.();\n\n const template = document.createElement('template');\n\n template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t></${descopeInternalComponentName}>\n \t\t`;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n forwardAttrs(this.shadowRoot.host, this.inputElement, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'minlength',\n 'maxlength',\n 'default-code',\n 'country-input-placeholder',\n 'phone-input-placeholder',\n 'disabled',\n 'restrict-countries',\n 'country-input-label',\n 'readonly',\n 'label',\n 'label-type',\n 'allow-alphanumeric-input',\n 'format-value',\n 'strict-validation',\n ],\n });\n }\n\n get countryCodeItems() {\n return this.inputElement?.countryCodeValue;\n }\n\n get phoneNumberInputEle() {\n return this.inputElement?.phoneNumberInputEle;\n }\n\n get countryCodeInputData() {\n return this.inputElement?.countryCodeInputData;\n }\n\n get countryCodes() {\n return Array.from(this.inputElement.countryCodeInputData).map((ele) =>\n ele.getAttribute('data-country-code')\n );\n }\n };\n\nconst {\n host,\n label,\n requiredIndicator,\n inputField,\n internalAfter,\n countryCodeInput,\n phoneInput,\n separator,\n errorMessage,\n helperText,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n inputField: { selector: '::part(input-field)' },\n internalAfter: { selector: 'descope-phone-field-internal::after' },\n phoneInput: { selector: () => 'descope-text-field' },\n countryCodeInput: { selector: () => 'descope-combo-box' },\n separator: { selector: 'descope-phone-field-internal .separator' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: [\n host,\n inputField,\n {\n selector: TextFieldClass.componentName,\n property: TextFieldClass.cssVarList.fontSize,\n },\n {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.fontSize,\n },\n ],\n fontFamily: [\n label,\n errorMessage,\n helperText,\n {\n ...countryCodeInput,\n property: ComboBoxClass.cssVarList.overlay.fontFamily,\n },\n ],\n hostWidth: [\n { ...host, property: 'width' },\n { ...phoneInput, property: 'width' },\n { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },\n ],\n hostDirection: { ...host, property: 'direction' },\n\n inputBorderStyle: [\n { ...internalAfter, property: 'border-style' },\n { ...separator, property: 'border-left-style' },\n ],\n inputBorderWidth: [\n { ...internalAfter, property: 'border-width' },\n { ...separator, property: 'border-left-width' },\n ],\n inputBorderColor: [\n { ...internalAfter, property: 'border-color' },\n { ...separator, property: 'border-left-color' },\n ],\n inputBorderRadius: [\n { ...inputField, property: 'border-radius' },\n { ...internalAfter, property: 'border-radius' },\n ],\n\n countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },\n countryCodeDropdownWidth: {\n ...countryCodeInput,\n property: '--vaadin-combo-box-overlay-width',\n },\n phoneInputWidth: { ...phoneInput, property: 'width' },\n\n horizontalPadding: [\n { ...phoneInput, property: 'padding-left' },\n { ...phoneInput, property: 'padding-right' },\n { ...countryCodeInput, property: 'padding-left' },\n { ...countryCodeInput, property: 'padding-right' },\n ],\n\n labelTextColor: [\n { ...label, property: 'color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n\n inputValueTextColor: [\n { ...phoneInput, property: textVars.inputValueTextColor },\n { ...countryCodeInput, property: comboVars.inputValueTextColor },\n ],\n\n inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n overlayItemBackgroundColor: {\n selector: 'descope-combo-box',\n property: comboVars.overlayItemBackgroundColor,\n },\n\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],\n valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],\n marginInlineStart: [\n { ...phoneInput, property: textVars.marginInlineStart },\n { ...countryCodeInput, property: comboVars.marginInlineStart },\n ],\n },\n }),\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n customMixin\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${useHostExternalPadding(PhoneFieldClass.cssVarList)}\n\t\t\t${resetInputCursor('vaadin-text-field')}\n\t\t\t${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n\t\t\t${resetInputFieldDefaultWidth()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n margin-left: 0;\n margin-right: 0;\n }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n direction: ltr;\n position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n \n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-width: 5.75em;\n\t\t\t\t${comboVars.inputOutlineWidth}: 0;\n\t\t\t\t${comboVars.inputOutlineOffset}: 0;\n\t\t\t\t${comboVars.inputBorderWidth}: 0;\n\t\t\t\t${comboVars.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${textVars.inputOutlineWidth}: 0;\n\t\t\t\t${textVars.inputOutlineOffset}: 0;\n\t\t\t\t${textVars.inputBorderWidth}: 0;\n\t\t\t\t${textVars.inputBorderRadius}: 0;\n }\n\n :host([label-type=\"floating\"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t`,\n excludeAttrsSync: ['tabindex'],\n componentName,\n })\n);\n\nexport default PhoneFieldClass;\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem, parsePhoneNumber } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes \|\| [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') \|\| [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) \|\| 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) \|\| [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value \|\| !this.textField.value) {\n return '';\n }\n\n const [countryCode, phoneNumber] = parsePhoneNumber(\n `${this.comboBox.value}-${this.textField.value}`\n );\n\n return `${countryCode \|\| this.comboBox.value}-${phoneNumber \|\| this.textField.value}`;\n }\n\n set value(val) {\n const [countryCode, nationalNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setNationalNumber(nationalNumber);\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const hasCountryCode = !!countryCode.length;\n const hasNationalNumber = !!nationalNumer.length;\n\n const isEmpty = !hasCountryCode \|\| !hasNationalNumber;\n const isValidLength = hasNationalNumber && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.value && this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (commonAttrs.includes(attrName)) {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n\n // verify country code item against phone number pattern and replace if needed and country is allowed\n // (e.g. +1 can be US or CA, depending on the pattern)\n this.addEventListener('input', this.#handleSameCountryCodes.bind(this));\n }\n\n #setCountryCode(val) {\n if (!val \|\| val === this.selectedCountryCode) return;\n\n let countryCodeItem = undefined;\n\n if (this.value) {\n // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)\n const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);\n countryCodeItem = this.#getCountryByCodeId(code);\n }\n\n // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)\n // then use the first option with same dial code (e.g. in that case - `US` for +1)\n if (!countryCodeItem) {\n countryCodeItem = this.#getCountryByDialCode(val);\n }\n\n // set country code item; in it doesn't exist in list - set `undefined`\n this.comboBox.selectedItem = countryCodeItem;\n }\n\n #setNationalNumber(val) {\n if (this.isFormatValue) {\n val = this.#formatNationalNumber(val);\n }\n\n if (this.textField.value !== val) {\n this.textField.value = val;\n }\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt \|\| this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n\n return formattedVal \|\| nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n parsed && // Parsed successfully (not undefined)\n parsed.isValid?.() && // Parsed object is valid\n parsed.country && // Parsed object with a country code\n this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by dial code `data-id` (e.g. `+1`)\n #getCountryByDialCode(dialCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) \|\| undefined;\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #getCountryCodeByPhoneNumber(val) {\n if (!val) return undefined;\n const parsed = parsePhoneNumberFromString(val);\n if (!parsed?.country) return undefined;\n const foundCountryItem = this.#getCountryByCodeId(parsed.country);\n return foundCountryItem?.getAttribute('data-country-code');\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleSameCountryCodes() {\n if (!this.value) return;\n\n const country = this.#getCountryCodeByPhoneNumber(this.value);\n\n if (!country) return;\n\n // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)\n if (this.selectedCountryCode !== country) {\n const foundCountryItem = this.#getCountryByCodeId(country);\n // if found country is defined in country list then set it, otherwise - clear phone number\n if (foundCountryItem) {\n this.comboBox.selectedItem = foundCountryItem;\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') \|\| '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') \|\| ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') \|\| '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') \|\| ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val \|\| '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country \|\| '';\n phoneNumber = phone \|\| '';\n }\n\n return [countryCode, phoneNumber];\n};\n","import './descope-phone-field-internal';\nimport '@descope-ui/descope-combo-box';\nimport '../../descope-text-field';\n\nimport { componentName, PhoneFieldClass } from './PhoneFieldClass';\n\ncustomElements.define(componentName, PhoneFieldClass);\n\nexport { PhoneFieldClass, componentName };\n"],"names":["componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","textVars","comboVars","C","host","label","requiredIndicator","inputField","internalAfter","countryCodeInput","phoneInput","separator","errorMessage","helperText","selector","PhoneFieldClass","fontSize","property","fontFamily","overlay","hostWidth","hostDirection","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","countryCodeInputWidth","countryCodeDropdownWidth","phoneInputWidth","horizontalPadding","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","overlayItemBackgroundColor","inputOutlineStyle","inputOutlineColor","valueInputHeight","valueInputMarginBottom","marginInlineStart","CountryCodes","template","innerHTML","content","cloneNode","inputElement","shadowRoot","querySelector","includeAttrs","countryCodeItems","countryCodeValue","phoneNumberInputEle","countryCodeInputData","countryCodes","Array","from","map","ele","getAttribute","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","item","join","comboBox","textField","inputs","customValueTransformFn","val","dialCode","split","items","allowAlphanumericInput","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","countryCode","phoneNumber","nationalNumber","e","isTrusted","getValidity","nationalNumer","hasCountryCode","length","hasNationalNumber","isEmpty","isValidLength","isRequired","valueMissing","patternMismatch","tooShort","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","bind","countryCodeItem","code","country","reset","parsed","isValid","find","c","undefined","foundCountryItem","removeAttribute","comboBoxItem","name","toLowerCase","getCountryFlag","parsePhoneNumber","countryCallingCode","phone"],"sourceRoot":""}

package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js CHANGED 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([[8657],{79275:(t,e,i)=>{i.d(e,{T:()=>o,w:()=>d});var n=i(79365),a=i(6424),s=i(9696),r=i(97810),l=i(73551);const o=(0,r.xE)("text-field"),u=["type","label-type","copy-to-clipboard"],d=(0,s.Zz)((0,n.RF)({mappings:a.A}),n.VO,(0,n.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),n.tQ,(t=>class extends t{static get observedAttributes(){return u.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},i={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,i),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,i){super.attributeChangeCallback?.(t,e,i),"type"===t&&this.baseElement._setType(i),e!==i&&("label-type"===t?"floating"===i?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===i))}}))((0,n.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(d.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:o}))},21374:(t,e,i)=>{i.r(e),i.d(e,{TextFieldClass:()=>n.w,componentName:()=>n.T}),i(11284),i(37182),i(95260);var n=i(79275);customElements.define(n.T,n.w)},9035:(t,e,i)=>{i.d(e,{A:()=>d,T:()=>r});var n=i(3393),a=i(97810),s=i(92259);const r=(0,a.xE)("phone-field-internal-input-box"),l=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type","allow-alphanumeric-input"],o={"phone-input-placeholder":"placeholder"},u=(0,n.y)({componentName:r,baseSelector:"div"}),d=class extends u{static get observedAttributes(){return[].concat(u.observedAttributes||[],l)}constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1"></descope-text-field>\n      </div>\n      ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return(0,s.Q)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const t=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(t,"")}`}return this.phoneNumberInput.value}set value(t){this.phoneNumberInput.value=t}get phoneNumberValue(){return this.phoneNumberInput.value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const t=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:t.length<this.minLength?{tooShort:!0}:t.length>this.maxLength?{tooLong:!0}:this.value&&!/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{patternMismatch:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{1===t.target.value.length&&"-"===t.target.value&&(t.target.value=""),t.target.value=t.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");let e=t.target.value;if(!this.allowAlphanumericInput){const i=/^[+\d-]+$/;e=t.target.value.split("").filter((t=>i.test(t))).join("")}t.target.value=e})),this.handleFocusEventsDispatching([this.phoneNumberInput])}attributeChangedCallback(t,e,i){if(super.attributeChangedCallback(t,e,i),e!==i&&l.includes(t)){const e=o[t]||t;this.phoneNumberInput.setAttribute(e,i)}}}},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});var n=i(51680);const a=t=>n.A.find((e=>e.code===t))?.dialCode},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:()=>h}),i(86689);var n=i(13256),a=i(82901),s=i(90676),r=i(81488),l=i(86314),o=i(87550),u=i(18330),d=i(37436),p=i(37720);const c=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 p.q(this.inputElement,this._labelController))}};(0,o.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class h extends(c((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([[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:()=>h,T:()=>o});var n=i(3393),a=i(97810),s=i(92259),l=i(10473),r=i(23530);const o=(0,a.xE)("phone-field-internal-input-box"),u=["disabled","size","readonly","phone-input-placeholder","name","autocomplete","label-type"],d={"phone-input-placeholder":"placeholder"},c=(0,n.y)({componentName:o,baseSelector:"div"}),h=class extends c{static get observedAttributes(){return[].concat(c.observedAttributes||[],u)}#t;constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1" type="tel" bordered="false"></descope-text-field>\n      </div>\n      ',this.textField=this.querySelector("descope-text-field")}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get defaultDialCode(){return(0,s.Q)(this.getAttribute("default-code"))}get defaultCode(){return this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}get restrictCountries(){return this.getAttribute("restrict-countries")?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.textField.value)return"";if(!this.isStrictValidation)return this.#e();const t=this.#i();return t?.country&&t?.countryCallingCode&&t?.nationalNumber?`+${[t?.countryCallingCode,t?.nationalNumber].join("-")}`:this.textField.value}set value(t){this.textField.value=t}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.textField.focus()})),super.init?.(),this.textField.addEventListener("input",this.#n.bind(this)),this.handleFocusEventsDispatching([this.textField])}getValidity(){const t=this.#a(this.textField.value);return this.isRequired&&!this.textField.value?{valueMissing:!0}:t.length<this.minLength?{tooShort:!0}:t.length>this.maxLength?{tooLong:!0}:this.isStrictValidation&&this.textField.value&&!this.#s()||!this.isStrictValidation&&this.textField.value&&!/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{patternMismatch:!0}:{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,i){if(super.attributeChangedCallback(t,e,i),e!==i&&u.includes(t)){const e=d[t]||t;this.textField.setAttribute(e,i)}}#n(t){let e=this.#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,l.l)([this.defaultDialCode,this.#a(this.textField.value)].filter(Boolean).join("")):(0,l.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,l.l)(this.value);return t&&t.isValid?.()&&t.country&&this.#d(t.country)&&(!this.defaultCode||this.defaultCode===t.country)}#d(t){return!this.restrictCountries||this.restrictCountries.includes(t)}#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 r.Q(e)),this.#t.reset(),this.#t.input(t)||t):t}#c(t){const e=(0,l.l)(t);return e?.country||""}#r(t){return!!(0,s.W)(t)}}},78343:(t,e,i)=>{i.r(e),i(21374);var n=i(9035);customElements.define(n.T,n.A)},92259:(t,e,i)=>{i.d(e,{Q:()=>a,W:()=>s});var n=i(51680);const a=t=>n.A.find((e=>e.code===t))?.dialCode,s=t=>{const e=t.match(/\(/g),i=t.match(/\)/g);return e?.length===i?.length}},18330:(t,e,i)=>{i.d(e,{f:()=>a});var n=i(44099);class a extends n.r{constructor(t,e){super(t,"input","input",{initializer:(t,i)=>{i.value&&(t.value=i.value),i.type&&t.setAttribute("type",i.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},37436:(t,e,i)=>{i.d(e,{a:()=>a});var n=i(44218);const a=t=>class extends((0,n.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},27136:(t,e,i)=>{i.d(e,{A:()=>p}),i(86689);var n=i(13256),a=i(82901),s=i(90676),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;
@@ -34,5 +34,5 @@
         </div>
       </div>
       <slot name="tooltip"></slot>
-    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new r.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,a.X)(h)},52733:(t,e,i)=>{i(27397);var n=i(47642);(0,i(87550).SF)("vaadin-text-field",n.k,{moduleId:"lumo-text-field-styles"}),i(27136)},11284:(t,e,i)=>{i(52733),i(27136)}}]);
+    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new l.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,a.X)(p)},52733:(t,e,i)=>{i(27397);var n=i(47642);(0,i(87550).SF)("vaadin-text-field",n.k,{moduleId:"lumo-text-field-styles"}),i(27136)},11284:(t,e,i)=>{i(52733),i(27136)}}]);
 //# sourceMappingURL=phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js.map