@descope/web-components-ui 3.12.0 → 3.13.0

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

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

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

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

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

@@ -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:()=>s,w:()=>p});var i=n(79365),o=n(6424),r=n(9696),l=n(97810),a=n(73551);const s=(0,l.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],p=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout(()=>{Object.assign(this.icon,e)},5e3)})}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}})((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(p.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",p.cssVarList)}\n      ${(0,a.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:s}))},21374(t,e,n){n.r(e),n.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),n(11284),n(37182),n(95260);var i=n(79275);customElements.define(i.T,i.w)},81808(t,e,n){n.d(e,{NF:()=>I,TQ:()=>h});var i=n(86365),o=n(84015),r=n(97810),l=n(9696),a=n(79365),s=n(79275),d=n(51680),p=n(73551);const u=s.w.cssVarList,c=i.C.cssVarList,h=(0,r.xE)("phone-field"),{host:b,label:y,requiredIndicator:g,inputField:m,internalAfter:f,countryCodeInput:x,phoneInput:v,separator:C,errorMessage:w,helperText:A}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},I=(0,l.Zz)((0,a.RF)({mappings:{fontSize:[b,m,{selector:s.w.componentName,property:s.w.cssVarList.fontSize},{selector:i.C.componentName,property:i.C.cssVarList.fontSize}],fontFamily:[y,w,A,{...x,property:i.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...v,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...C,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...C,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...C,property:"border-left-color"}],inputBorderRadius:[{...m,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...x,property:c.hostWidth},countryCodeDropdownWidth:{...x,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...v,property:"width"},horizontalPadding:[{...v,property:"padding-left"},{...v,property:"padding-right"},{...x,property:"padding-left"},{...x,property:"padding-right"}],labelFontSize:{...y,property:"font-size"},labelFontWeight:{...y,property:"font-weight"},inputValueFontWeight:[{...v,property:u.inputValueFontWeight},{...x,property:c.inputValueFontWeight}],inputPlaceholderFontWeight:{...v,property:u.inputPlaceholderFontWeight},helperTextFontWeight:{...A,property:"font-weight"},errorMessageFontWeight:{...w,property:"font-weight"},labelTextColor:[{...y,property:"color"},{...y,property:"-webkit-text-fill-color"},{...g,property:"color"}],labelRequiredIndicator:{...g,property:"content"},errorMessageTextColor:{...w,property:"color"},errorMessageIcon:{...w,property:"background-image"},errorMessageIconSize:{...w,property:"background-size"},errorMessageIconPadding:{...w,property:"padding-inline-start"},errorMessageIconRepeat:{...w,property:"background-repeat"},errorMessageIconPosition:{...w,property:"background-position"},errorMessageFontSize:{...w,property:"font-size"},inputValueTextColor:[{...v,property:u.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...v,property:u.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...m,property:"outline-style"},inputOutlineColor:{...m,property:"outline-color"},inputOutlineWidth:{...m,property:"outline-width"},inputOutlineOffset:{...m,property:"outline-offset"},valueInputHeight:[{...x,property:c.valueInputHeight}],valueInputMarginBottom:[{...v,property:u.valueInputMarginBottom}],marginInlineStart:[{...v,property:u.marginInlineStart},{...x,property:c.marginInlineStart}]}}),a.VO,a.Yg,(0,a.OZ)({proxyProps:["value","selectionStart"]}),t=>class extends t{static get CountryCodes(){return d.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${o.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.T}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.T),(0,r.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input","format-value","strict-validation","phone-input-type"]})}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,p.cy)(I.cssVarList)}\n\t\t\t${(0,p.I4)("vaadin-text-field")}\n\t\t\t${(0,p.kG)("vaadin-text-field")}\n\t\t\t${(0,p.X6)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        direction: ltr;\n        position: relative;\n\t\t\t}\n      descope-phone-field-internal::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        outline-offset: calc(var(${I.cssVarList.inputBorderWidth}) * -1);\n        pointer-events: none;\n      }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n        min-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputOutlineOffset}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.inputBorderRadius}: 0;\n      }\n\n      :host([label-type="floating"]) vaadin-text-field::part(label) {\n        display: none;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n      ${(0,p.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:h}))},84015(t,e,n){n.d(e,{A:()=>m,T:()=>d});var i=n(10473),o=n(23530),r=n(3393),l=n(97810),a=n(51680),s=n(49157);const d=(0,l.xE)("phone-field-internal"),p=["disabled","size","bordered","readonly"],u=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength","autocomplete","name","phone-input-type"],h=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder","phone-input-type":"type"},y=[].concat(p,u,c,h),g=(0,r.y)({componentName:d,baseSelector:"div"}),m=class extends g{static get observedAttributes(){return[].concat(g.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      ${a.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,l.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,l.EA)(this,this.textField,{includeAttrs:["label-type","required","phone-input-type"],mapAttrs:{"phone-input-type":"type"}}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){return this.comboBox.value&&this.textField.value?this.allowAlphanumericInput?`${this.comboBox.value}-${this.textField.value}`:`${this.comboBox.value}-${this.textField.value.replace(/\D+/g,"")}`:""}#e(){this.comboBox.selectedItem=void 0,this.textField.value=""}set value(t){if(!t||!/\d/.test(t))return void this.#e();t.startsWith("+")||(t=`+${t}`);let e="",n="";if(t.includes("-")){const i=t.indexOf("-");e=t.slice(0,i),n=t.slice(i+1).replace(/\D+/g,"")}else{const o=(0,i.l)(t);o?.countryCallingCode&&(e=`+${o.countryCallingCode}`,n=t.slice(e.length).replace(/\D+/g,""))}if(!/\d/.test(e))return void this.#e();const o=a.A.filter(t=>t.dialCode===e).map(t=>t.code),r=this.selectedCountryCode;if(!o.includes(r)){const t=this.comboBox.items?.find(t=>o.includes(t.getAttribute("data-country-code")));t&&(this.comboBox.selectedItem=t)}this.isFormatValue?this.textField.value=this.#n(n):this.textField.value=n}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.inputs[1].focus()}),super.init?.(),this.#i()}getValidity(){const t=this.comboBox.value,e=this.textField.value,n=!t||!e,i=e&&e.length>=this.minLength;if(this.isRequired&&n)return{valueMissing:!0};if(this.value){if(!i)return{tooShort:!0};if(this.isStrictValidation&&!this.#o())return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n&&!this.selectedCountryCode)this.#r(n);else if(y.includes(t)){const e=b[t]||t;p.includes(t)?n?this.inputs.forEach(t=>t.setAttribute(e,n)):this.inputs.forEach(t=>t.removeAttribute(e)):u.includes(t)?this.comboBox.setAttribute(e,n):c.includes(t)&&this.textField.setAttribute(e,n)}h.includes(t)&&this.#l(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()}#n(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new o.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#o(){const t=(0,i.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#s(t.country))}#s(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#d(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#a(t){const e=t.length?a.A.filter(e=>t.includes(e.code)):a.A;this.querySelector("descope-combo-box").innerHTML=e.map(t=>(0,s.$B)(t)).join("")}#r(t){if(!this.comboBox.value){const e=this.#d(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#l(t,e){const n=b[t]||t;"label-type"===t?this.#p(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#p(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach(t=>t.removeAttribute("label"))}}},92132(t,e,n){n.r(e),n(27092),n(21374);var i=n(84015);customElements.define(i.T,i.A)},49157(t,e,n){n.d(e,{$B:()=>i});const i=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`},98136(t,e,n){n.r(e),n.d(e,{PhoneFieldClass:()=>i.NF,componentName:()=>i.TQ}),n(92132),n(27092),n(21374);var i=n(81808);customElements.define(i.TQ,i.NF)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878,9894],{28027(t,e,n){n.d(e,{T:()=>a,w:()=>p});var i=n(88961),o=n(63200),r=n(25964),l=n(79673),s=n(47656);const a=(0,r.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],p=(0,o.Zz)((0,i.RF)({mappings:s.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart","selectionEnd"],useProxyTargets:!0}),i.tQ,t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout(()=>{Object.assign(this.icon,e)},5e3)})}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}})((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(p.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",p.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:a}))},64014(t,e,n){n.r(e),n.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),n(11284),n(37182),n(95260);var i=n(28027);customElements.define(i.T,i.w)},81808(t,e,n){n.d(e,{NF:()=>I,TQ:()=>h});var i=n(86365),o=n(28027),r=n(84015),l=n(97810),s=n(9696),a=n(79365),d=n(51680),p=n(73551);const u=o.w.cssVarList,c=i.C.cssVarList,h=(0,l.xE)("phone-field"),{host:b,label:y,requiredIndicator:g,inputField:m,internalAfter:f,countryCodeInput:x,phoneInput:v,separator:C,errorMessage:w,helperText:A}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},I=(0,s.Zz)((0,a.RF)({mappings:{fontSize:[b,m,{selector:o.w.componentName,property:o.w.cssVarList.fontSize},{selector:i.C.componentName,property:i.C.cssVarList.fontSize}],fontFamily:[y,w,A,{...x,property:i.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...v,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...C,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...C,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...C,property:"border-left-color"}],inputBorderRadius:[{...m,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...x,property:c.hostWidth},countryCodeDropdownWidth:{...x,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...v,property:"width"},horizontalPadding:[{...v,property:"padding-left"},{...v,property:"padding-right"},{...x,property:"padding-left"},{...x,property:"padding-right"}],labelFontSize:{...y,property:"font-size"},labelFontWeight:{...y,property:"font-weight"},inputValueFontWeight:[{...v,property:u.inputValueFontWeight},{...x,property:c.inputValueFontWeight}],inputPlaceholderFontWeight:{...v,property:u.inputPlaceholderFontWeight},helperTextFontWeight:{...A,property:"font-weight"},errorMessageFontWeight:{...w,property:"font-weight"},labelTextColor:[{...y,property:"color"},{...y,property:"-webkit-text-fill-color"},{...g,property:"color"}],labelRequiredIndicator:{...g,property:"content"},errorMessageTextColor:{...w,property:"color"},errorMessageIcon:{...w,property:"background-image"},errorMessageIconSize:{...w,property:"background-size"},errorMessageIconPadding:{...w,property:"padding-inline-start"},errorMessageIconRepeat:{...w,property:"background-repeat"},errorMessageIconPosition:{...w,property:"background-position"},errorMessageFontSize:{...w,property:"font-size"},inputValueTextColor:[{...v,property:u.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...v,property:u.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...m,property:"outline-style"},inputOutlineColor:{...m,property:"outline-color"},inputOutlineWidth:{...m,property:"outline-width"},inputOutlineOffset:{...m,property:"outline-offset"},valueInputHeight:[{...x,property:c.valueInputHeight}],valueInputMarginBottom:[{...v,property:u.valueInputMarginBottom}],marginInlineStart:[{...v,property:u.marginInlineStart},{...x,property:c.marginInlineStart}]}}),a.VO,a.Yg,(0,a.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<${r.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${r.T}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(r.T),(0,l.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","phone-input-type"]})}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,p.cy)(I.cssVarList)}\n\t\t\t${(0,p.I4)("vaadin-text-field")}\n\t\t\t${(0,p.kG)("vaadin-text-field")}\n\t\t\t${(0,p.X6)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        direction: ltr;\n        position: relative;\n\t\t\t}\n      descope-phone-field-internal::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        outline-offset: calc(var(${I.cssVarList.inputBorderWidth}) * -1);\n        pointer-events: none;\n      }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n        min-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputOutlineOffset}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.inputBorderRadius}: 0;\n      }\n\n      :host([label-type="floating"]) vaadin-text-field::part(label) {\n        display: none;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n      ${(0,p.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:h}))},84015(t,e,n){n.d(e,{A:()=>m,T:()=>d});var i=n(10473),o=n(23530),r=n(3393),l=n(97810),s=n(51680),a=n(49157);const d=(0,l.xE)("phone-field-internal"),p=["disabled","size","bordered","readonly"],u=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength","autocomplete","name","phone-input-type"],h=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder","phone-input-type":"type"},y=[].concat(p,u,c,h),g=(0,r.y)({componentName:d,baseSelector:"div"}),m=class extends g{static get observedAttributes(){return[].concat(g.observedAttributes||[],y)}#t;constructor(){super(),this.innerHTML=`\n    <div class="wrapper">\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${s.A.map(t=>(0,a.$B)(t)).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,l.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,l.EA)(this,this.textField,{includeAttrs:["label-type","required","phone-input-type"],mapAttrs:{"phone-input-type":"type"}}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){return this.comboBox.value&&this.textField.value?this.allowAlphanumericInput?`${this.comboBox.value}-${this.textField.value}`:`${this.comboBox.value}-${this.textField.value.replace(/\D+/g,"")}`:""}#e(){this.comboBox.selectedItem=void 0,this.textField.value=""}set value(t){if(!t||!/\d/.test(t))return void this.#e();t.startsWith("+")||(t=`+${t}`);let e="",n="";if(t.includes("-")){const i=t.indexOf("-");e=t.slice(0,i),n=t.slice(i+1).replace(/\D+/g,"")}else{const o=(0,i.l)(t);o?.countryCallingCode&&(e=`+${o.countryCallingCode}`,n=t.slice(e.length).replace(/\D+/g,""))}if(!/\d/.test(e))return void this.#e();const o=s.A.filter(t=>t.dialCode===e).map(t=>t.code),r=this.selectedCountryCode;if(!o.includes(r)){const t=this.comboBox.items?.find(t=>o.includes(t.getAttribute("data-country-code")));t&&(this.comboBox.selectedItem=t)}this.isFormatValue?this.textField.value=this.#n(n):this.textField.value=n}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.inputs[1].focus()}),super.init?.(),this.#i()}getValidity(){const t=this.comboBox.value,e=this.textField.value,n=!t||!e,i=e&&e.length>=this.minLength;if(this.isRequired&&n)return{valueMissing:!0};if(this.value){if(!i)return{tooShort:!0};if(this.isStrictValidation&&!this.#o())return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n&&!this.selectedCountryCode)this.#r(n);else if(y.includes(t)){const e=b[t]||t;p.includes(t)?n?this.inputs.forEach(t=>t.setAttribute(e,n)):this.inputs.forEach(t=>t.removeAttribute(e)):u.includes(t)?this.comboBox.setAttribute(e,n):c.includes(t)&&this.textField.setAttribute(e,n)}h.includes(t)&&this.#l(t,n),"restrict-countries"===t&&this.#s(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()}#n(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new o.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#o(){const t=(0,i.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#a(t.country))}#a(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#d(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#s(t){const e=t.length?s.A.filter(e=>t.includes(e.code)):s.A;this.querySelector("descope-combo-box").innerHTML=e.map(t=>(0,a.$B)(t)).join("")}#r(t){if(!this.comboBox.value){const e=this.#d(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#l(t,e){const n=b[t]||t;"label-type"===t?this.#p(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#p(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach(t=>t.removeAttribute("label"))}}},92132(t,e,n){n.r(e),n(27092),n(64014);var i=n(84015);customElements.define(i.T,i.A)},49157(t,e,n){n.d(e,{$B:()=>i});const i=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`},98136(t,e,n){n.r(e),n.d(e,{PhoneFieldClass:()=>i.NF,componentName:()=>i.TQ}),n(92132),n(27092),n(64014);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

@@ -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 { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n  createProxy,\n  createStyleMixin,\n  draggableMixin,\n  inputOverrideValidConstraintsMixin,\n  proxyInputMixin,\n} from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport CountryCodes from '../CountryCodes';\nimport {\n  resetInputCursor,\n  resetInputLabelPosition,\n  resetInputFieldDefaultWidth,\n  resetInputFieldInvalidBackgroundColor,\n  useHostExternalPadding,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\nconst comboVars = ComboBoxClass.cssVarList;\n\nexport const componentName = getComponentName('phone-field');\n\nconst customMixin = (superclass) =>\n  class PhoneFieldMixinClass extends superclass {\n    static get CountryCodes() {\n      return CountryCodes;\n    }\n\n    init() {\n      super.init?.();\n\n      const template = document.createElement('template');\n\n      template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t></${descopeInternalComponentName}>\n      \t\t`;\n\n      this.baseElement.appendChild(template.content.cloneNode(true));\n\n      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n      forwardAttrs(this.shadowRoot.host, this.inputElement, {\n        includeAttrs: [\n          'size',\n          'bordered',\n          'minlength',\n          'maxlength',\n          'default-code',\n          'country-input-placeholder',\n          'phone-input-placeholder',\n          'disabled',\n          'restrict-countries',\n          'country-input-label',\n          'readonly',\n          'label',\n          'label-type',\n          'allow-alphanumeric-input',\n          'format-value',\n          'strict-validation',\n          'phone-input-type',\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      labelFontSize: { ...label, property: 'font-size' },\n      labelFontWeight: { ...label, property: 'font-weight' },\n      inputValueFontWeight: [\n        { ...phoneInput, property: textVars.inputValueFontWeight },\n        { ...countryCodeInput, property: comboVars.inputValueFontWeight },\n      ],\n      inputPlaceholderFontWeight: { ...phoneInput, property: textVars.inputPlaceholderFontWeight },\n      helperTextFontWeight: { ...helperText, property: 'font-weight' },\n      errorMessageFontWeight: { ...errorMessage, property: 'font-weight' },\n      labelTextColor: [\n        { ...label, property: 'color' },\n        { ...label, property: '-webkit-text-fill-color' },\n        { ...requiredIndicator, property: 'color' },\n      ],\n      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n\n      errorMessageTextColor: { ...errorMessage, property: 'color' },\n      errorMessageIcon: { ...errorMessage, property: 'background-image' },\n      errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n      errorMessageFontSize: { ...errorMessage, property: 'font-size' },\n\n      inputValueTextColor: [\n        { ...phoneInput, property: textVars.inputValueTextColor },\n        { ...countryCodeInput, property: comboVars.inputValueTextColor },\n      ],\n\n      inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n      overlayItemBackgroundColor: {\n        selector: 'descope-combo-box',\n        property: comboVars.overlayItemBackgroundColor,\n      },\n\n      inputOutlineStyle: { ...inputField, property: 'outline-style' },\n      inputOutlineColor: { ...inputField, property: 'outline-color' },\n      inputOutlineWidth: { ...inputField, property: 'outline-width' },\n      inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n      valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],\n      valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],\n      marginInlineStart: [\n        { ...phoneInput, property: textVars.marginInlineStart },\n        { ...countryCodeInput, property: comboVars.marginInlineStart },\n      ],\n    },\n  }),\n  draggableMixin,\n  inputOverrideValidConstraintsMixin,\n  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n  customMixin\n)(\n  createProxy({\n    slots: [],\n    wrappedEleName: 'vaadin-text-field',\n    style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${useHostExternalPadding(PhoneFieldClass.cssVarList)}\n\t\t\t${resetInputCursor('vaadin-text-field')}\n\t\t\t${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n\t\t\t${resetInputFieldDefaultWidth()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        direction: ltr;\n        position: relative;\n\t\t\t}\n      descope-phone-field-internal::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);\n        pointer-events: none;\n      }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n        min-width: 5.75em;\n\t\t\t\t${comboVars.inputOutlineWidth}: 0;\n\t\t\t\t${comboVars.inputOutlineOffset}: 0;\n\t\t\t\t${comboVars.inputBorderWidth}: 0;\n\t\t\t\t${comboVars.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${textVars.inputOutlineWidth}: 0;\n\t\t\t\t${textVars.inputOutlineOffset}: 0;\n\t\t\t\t${textVars.inputBorderWidth}: 0;\n\t\t\t\t${textVars.inputBorderRadius}: 0;\n      }\n\n      :host([label-type=\"floating\"]) vaadin-text-field::part(label) {\n        display: none;\n      }\n      descope-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      descope-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n      ${resetInputLabelPosition('vaadin-text-field')}\n\t\t`,\n    excludeAttrsSync: ['tabindex', 'style'],\n    componentName,\n  })\n);\n\nexport default PhoneFieldClass;\n","import { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\nimport { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem } from '../helpers';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = [\n  'phone-input-placeholder',\n  'maxlength',\n  'autocomplete',\n  'name',\n  'phone-input-type',\n];\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  'phone-input-type': 'type',\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, {\n      includeAttrs: ['label-type', 'required', 'phone-input-type'],\n      mapAttrs: { 'phone-input-type': 'type' },\n    });\n\n    // override combo box setter to display dialCode value in input\n    this.comboBox.customValueTransformFn = (val) => {\n      const [, dialCode] = val?.split?.(' ') || [];\n      return dialCode;\n    };\n  }\n\n  // exposed from main component\n  get countryCodeInputData() {\n    return this.comboBox.items;\n  }\n\n  // exposed from main component\n  get countryCodeValue() {\n    return this.comboBox.shadowRoot.querySelector('input').value;\n  }\n\n  // exposed from main component\n  get phoneNumberInputEle() {\n    return this.textField.shadowRoot.querySelector('input');\n  }\n\n  get allowAlphanumericInput() {\n    return this.getAttribute('allow-alphanumeric-input') === 'true';\n  }\n\n  get defaultCode() {\n    return this.getAttribute('default-code');\n  }\n\n  get selectionStart() {\n    return this.textField.selectionStart;\n  }\n\n  get minLength() {\n    return parseInt(this.getAttribute('minlength'), 10) || 0;\n  }\n\n  get selectedCountryCode() {\n    return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n  }\n\n  get restrictCountries() {\n    const attr = this.getAttribute('restrict-countries');\n    return attr?.split(',').filter(Boolean) || [];\n  }\n\n  get isFormatValue() {\n    return this.getAttribute('format-value') === 'true';\n  }\n\n  // `strict validation` enforces value parsing with libphonenumber-js\n  get isStrictValidation() {\n    return this.getAttribute('strict-validation') === 'true';\n  }\n\n  get value() {\n    if (!this.comboBox.value || !this.textField.value) {\n      return '';\n    }\n\n    if (this.allowAlphanumericInput) {\n      return `${this.comboBox.value}-${this.textField.value}`;\n    }\n\n    return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n  }\n\n  #clearValue() {\n    this.comboBox.selectedItem = undefined;\n    this.textField.value = '';\n  }\n\n  set value(val) {\n    // reject empty or digit-free values\n    if (!val || !/\\d/.test(val)) {\n      this.#clearValue();\n      return;\n    }\n\n    // ensure plus prefix\n    if (!val.startsWith('+')) {\n      val = `+${val}`;\n    }\n\n    let dialCode = '';\n    let nationalNumber = '';\n\n    if (val.includes('-')) {\n      // dash explicitly marks where the dial code ends — no parsing needed\n      const dashIdx = val.indexOf('-');\n      dialCode = val.slice(0, dashIdx);\n      nationalNumber = val.slice(dashIdx + 1).replace(/\\D+/g, '');\n    } else {\n      // parse only to get dial code length,\n      const parsed = parsePhoneNumberFromString(val);\n      if (parsed?.countryCallingCode) {\n        dialCode = `+${parsed.countryCallingCode}`;\n        // slice the raw value to avoid parser transformations\n        nationalNumber = val.slice(dialCode.length).replace(/\\D+/g, '');\n      }\n    }\n\n    // dial code must contain digits (e.g. '+1', not just '+')\n    if (!/\\d/.test(dialCode)) {\n      this.#clearValue();\n      return;\n    }\n\n    // Collect all country codes sharing this dial code from CountryCodes (e.g. US, CA, DO, ... for +1)\n    const matchingCountryCodes = CountryCodes.filter((c) => c.dialCode === dialCode).map(\n      (c) => c.code\n    );\n\n    // Check if the currently selected country's data-country-code is in that set\n    const currentSelectedCountryCode = this.selectedCountryCode;\n    if (!matchingCountryCodes.includes(currentSelectedCountryCode)) {\n      // If not, find the first combo box item (restricted list) whose data-country-code is in the set\n      const matchingItem = this.comboBox.items?.find((c) =>\n        matchingCountryCodes.includes(c.getAttribute('data-country-code'))\n      );\n      if (matchingItem) {\n        this.comboBox.selectedItem = matchingItem;\n      }\n    }\n\n    // set formatted or raw national number on the text field\n    if (this.isFormatValue) {\n      this.textField.value = this.#formatNationalNumber(nationalNumber);\n    } else {\n      this.textField.value = nationalNumber;\n    }\n  }\n\n  init() {\n    this.addEventListener('focus', (e) => {\n      // we want to ignore focus events we are dispatching\n      if (e.isTrusted) this.inputs[1].focus();\n    });\n\n    super.init?.();\n\n    this.#initInputs();\n  }\n\n  getValidity() {\n    const countryCode = this.comboBox.value;\n    const nationalNumer = this.textField.value;\n\n    const isEmpty = !countryCode || !nationalNumer;\n    const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n    if (this.isRequired && isEmpty) {\n      return { valueMissing: true };\n    }\n\n    if (this.value) {\n      if (!isValidLength) {\n        return { tooShort: true };\n      }\n\n      if (this.isStrictValidation && !this.#isValidParsedValue()) {\n        return { patternMismatch: true };\n      }\n    }\n\n    return {};\n  }\n\n  setSelectionRange(...args) {\n    this.textField.setSelectionRange(...args);\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback(attrName, oldValue, newValue);\n\n    if (oldValue !== newValue) {\n      if (attrName === 'default-code' && newValue && !this.selectedCountryCode) {\n        this.#handleDefaultCountryCode(newValue);\n      } else if (inputRelatedAttrs.includes(attrName)) {\n        const attr = mapAttrs[attrName] || attrName;\n\n        if (commonAttrs.includes(attrName)) {\n          if (!newValue) {\n            this.inputs.forEach((input) => input.removeAttribute(attr));\n          } else {\n            this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n          }\n        } else if (countryAttrs.includes(attrName)) {\n          this.comboBox.setAttribute(attr, newValue);\n        } else if (phoneAttrs.includes(attrName)) {\n          this.textField.setAttribute(attr, newValue);\n        }\n      }\n\n      if (labelTypeAttrs.includes(attrName)) {\n        this.#handleLabelTypeAttrs(attrName, newValue);\n      }\n\n      if (attrName === 'restrict-countries') {\n        this.#updateComboBoxItems(this.restrictCountries);\n      }\n    }\n  }\n\n  #initInputs() {\n    // Sanitize phone input value to filter everything but digits\n    this.textField.addEventListener('input', (e) => {\n      if (!this.allowAlphanumericInput) {\n        const telDigitsRegExp = /^\\d$/;\n        const sanitizedInput = e.target.value\n          .split('')\n          .filter((char) => telDigitsRegExp.test(char))\n          .join('');\n        e.target.value = sanitizedInput;\n      }\n    });\n\n    this.handleFocusEventsDispatching(this.inputs);\n    this.handleInputEventDispatching();\n  }\n\n  #formatNationalNumber(nationalNumber = '') {\n    // re-initialize AsYouType if country code is outdated\n    if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {\n      this.#ayt = new AsYouType(this.selectedCountryCode);\n    }\n\n    // reset previous AsYouType input\n    this.#ayt.reset();\n\n    const formattedVal = this.#ayt.input(nationalNumber);\n    return formattedVal || nationalNumber;\n  }\n\n  #isValidParsedValue() {\n    const parsed = parsePhoneNumberFromString(this.value);\n\n    return (\n      !!parsed && // Parsed successfully (not undefined)\n      !!parsed.isValid?.() && // Parsed object is valid\n      !!parsed.country && // Parsed object with a country code\n      !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n    );\n  }\n\n  #isAllowedCountry(countryCode) {\n    if (!this.restrictCountries.length) {\n      return true;\n    }\n\n    return this.restrictCountries.includes(countryCode);\n  }\n\n  // return country item by country code `data-country-code` (e.g. `US`)\n  #getCountryItemByCodeId(countryCode) {\n    return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n  }\n\n  #updateComboBoxItems(restrictCountries) {\n    const items = restrictCountries.length\n      ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n      : CountryCodes;\n\n    this.querySelector('descope-combo-box').innerHTML = items\n      .map((item) => comboBoxItem(item))\n      .join('');\n  }\n\n  #handleDefaultCountryCode(countryCode) {\n    if (!this.comboBox.value) {\n      const countryCodeItem = this.#getCountryItemByCodeId(countryCode);\n      // When replacing the input component (inserting internal component into text-field) -\n      // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n      // after the reset.\n      if (countryCodeItem) {\n        setTimeout(() => {\n          this.comboBox.selectedItem = countryCodeItem;\n        });\n      }\n    }\n  }\n\n  #handleLabelTypeAttrs(attrName, newValue) {\n    // set or remove label attributes from inner text/combo components on `label-type` change\n    const attr = mapAttrs[attrName] || attrName;\n\n    if (attrName === 'label-type') {\n      this.#handleLabelTypeChange(newValue);\n    }\n    // on inner components label attr change - set label attributes for text/combo components\n    // only if label-type is `floating`\n    else if (this.getAttribute('label-type') === 'floating') {\n      if (attrName === 'country-input-label') {\n        this.comboBox.setAttribute(attr, newValue);\n      } else if (attrName === 'label') {\n        this.textField.setAttribute(attr, newValue);\n      }\n    }\n  }\n\n  #handleLabelTypeChange(newValue) {\n    if (newValue === 'floating') {\n      // on change to `floating` label - set inner components `label` and `placeholder`\n      this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');\n      this.comboBox.setAttribute(\n        'placeholder',\n        this.getAttribute('country-input-placeholder') || ''\n      );\n      this.textField.setAttribute('label', this.getAttribute('label') || '');\n      this.textField.setAttribute(\n        'placeholder',\n        this.getAttribute('phone-input-placeholder') || ''\n      );\n    } else {\n      // for other cases - reset inner components label-type and labels\n      this.inputs.forEach((input) => input.removeAttribute('label'));\n    }\n  }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n  `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n  const value = val || '';\n  let countryCode = '';\n  let phoneNumber = '';\n\n  // Attempt to parse the value using libphonenumber-js\n  const parsed = parsePhoneNumberFromString(value);\n\n  if (parsed) {\n    if (parsed.countryCallingCode) {\n      countryCode = `+${parsed.countryCallingCode}`;\n    }\n\n    if (parsed.nationalNumber) {\n      phoneNumber = parsed.nationalNumber;\n    }\n  } else {\n    // Fallback: assume a dash separates country code and phone number\n    const [country, phone] = value.split('-');\n    countryCode = country || '';\n    phoneNumber = phone || '';\n  }\n\n  return [countryCode, phoneNumber];\n};\n","import './descope-phone-field-internal';\nimport '@descope-ui/descope-combo-box';\nimport '../../descope-text-field';\n\nimport { componentName, PhoneFieldClass } from './PhoneFieldClass';\n\ncustomElements.define(componentName, PhoneFieldClass);\n\nexport { PhoneFieldClass, componentName };\n"],"names":["componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","textVars","comboVars","C","host","label","requiredIndicator","inputField","internalAfter","countryCodeInput","phoneInput","separator","errorMessage","helperText","selector","PhoneFieldClass","fontSize","property","fontFamily","overlay","hostWidth","hostDirection","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","countryCodeInputWidth","countryCodeDropdownWidth","phoneInputWidth","horizontalPadding","labelFontSize","labelFontWeight","inputValueFontWeight","inputPlaceholderFontWeight","helperTextFontWeight","errorMessageFontWeight","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","overlayItemBackgroundColor","inputOutlineStyle","inputOutlineColor","valueInputHeight","valueInputMarginBottom","marginInlineStart","CountryCodes","template","innerHTML","content","cloneNode","inputElement","shadowRoot","querySelector","includeAttrs","countryCodeItems","countryCodeValue","phoneNumberInputEle","countryCodeInputData","countryCodes","Array","from","map","ele","getAttribute","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","item","join","comboBox","textField","inputs","customValueTransformFn","val","dialCode","split","items","allowAlphanumericInput","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","replace","undefined","test","startsWith","nationalNumber","includes","dashIdx","indexOf","slice","parsed","countryCallingCode","length","matchingCountryCodes","c","code","currentSelectedCountryCode","matchingItem","find","e","isTrusted","getValidity","countryCode","nationalNumer","isEmpty","isValidLength","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","handleFocusEventsDispatching","handleInputEventDispatching","country","reset","isValid","countryCodeItem","comboBoxItem","name","toLowerCase","getCountryFlag"],"sourceRoot":""}
+{"version":3,"file":"phone-fields-descope-phone-field-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-text-field/src/component/TextFieldClass.js","webpack://@descope/web-components-ui/../components/descope-text-field/src/component/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 '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport {\n  inputFloatingLabelStyle,\n  resetInputLabelPosition,\n  resetInputOverrides,\n  useHostExternalPadding,\n} from '@descope-ui/common/theme-helpers';\nimport textFieldMappings from './textFieldMappings';\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({\n    proxyProps: ['value', 'selectionStart', 'selectionEnd'],\n    useProxyTargets: true,\n  }),\n  componentNameValidationMixin,\n  customMixin,\n)(\n  createProxy({\n    slots: ['prefix', 'suffix'],\n    wrappedEleName: 'vaadin-text-field',\n    style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n          TextFieldClass.cssVarList.inputOutlineOffset\n        }));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n      ${inputFloatingLabelStyle()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,\n    excludeAttrsSync: ['tabindex', 'style'],\n    componentName,\n  }),\n);\n","import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport { TextFieldClass } from '@descope-ui/descope-text-field/class';\nimport { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n  createProxy,\n  createStyleMixin,\n  draggableMixin,\n  inputOverrideValidConstraintsMixin,\n  proxyInputMixin,\n} from '../../../mixins';\nimport 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          'phone-input-type',\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      labelFontSize: { ...label, property: 'font-size' },\n      labelFontWeight: { ...label, property: 'font-weight' },\n      inputValueFontWeight: [\n        { ...phoneInput, property: textVars.inputValueFontWeight },\n        { ...countryCodeInput, property: comboVars.inputValueFontWeight },\n      ],\n      inputPlaceholderFontWeight: { ...phoneInput, property: textVars.inputPlaceholderFontWeight },\n      helperTextFontWeight: { ...helperText, property: 'font-weight' },\n      errorMessageFontWeight: { ...errorMessage, property: 'font-weight' },\n      labelTextColor: [\n        { ...label, property: 'color' },\n        { ...label, property: '-webkit-text-fill-color' },\n        { ...requiredIndicator, property: 'color' },\n      ],\n      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n\n      errorMessageTextColor: { ...errorMessage, property: 'color' },\n      errorMessageIcon: { ...errorMessage, property: 'background-image' },\n      errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n      errorMessageFontSize: { ...errorMessage, property: 'font-size' },\n\n      inputValueTextColor: [\n        { ...phoneInput, property: textVars.inputValueTextColor },\n        { ...countryCodeInput, property: comboVars.inputValueTextColor },\n      ],\n\n      inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n      overlayItemBackgroundColor: {\n        selector: 'descope-combo-box',\n        property: comboVars.overlayItemBackgroundColor,\n      },\n\n      inputOutlineStyle: { ...inputField, property: 'outline-style' },\n      inputOutlineColor: { ...inputField, property: 'outline-color' },\n      inputOutlineWidth: { ...inputField, property: 'outline-width' },\n      inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n      valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],\n      valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],\n      marginInlineStart: [\n        { ...phoneInput, property: textVars.marginInlineStart },\n        { ...countryCodeInput, property: comboVars.marginInlineStart },\n      ],\n    },\n  }),\n  draggableMixin,\n  inputOverrideValidConstraintsMixin,\n  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n  customMixin\n)(\n  createProxy({\n    slots: [],\n    wrappedEleName: 'vaadin-text-field',\n    style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${useHostExternalPadding(PhoneFieldClass.cssVarList)}\n\t\t\t${resetInputCursor('vaadin-text-field')}\n\t\t\t${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n\t\t\t${resetInputFieldDefaultWidth()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        direction: ltr;\n        position: relative;\n\t\t\t}\n      descope-phone-field-internal::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);\n        pointer-events: none;\n      }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n        min-width: 5.75em;\n\t\t\t\t${comboVars.inputOutlineWidth}: 0;\n\t\t\t\t${comboVars.inputOutlineOffset}: 0;\n\t\t\t\t${comboVars.inputBorderWidth}: 0;\n\t\t\t\t${comboVars.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${textVars.inputOutlineWidth}: 0;\n\t\t\t\t${textVars.inputOutlineOffset}: 0;\n\t\t\t\t${textVars.inputBorderWidth}: 0;\n\t\t\t\t${textVars.inputBorderRadius}: 0;\n      }\n\n      :host([label-type=\"floating\"]) vaadin-text-field::part(label) {\n        display: none;\n      }\n      descope-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      descope-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n      ${resetInputLabelPosition('vaadin-text-field')}\n\t\t`,\n    excludeAttrsSync: ['tabindex', 'style'],\n    componentName,\n  })\n);\n\nexport default PhoneFieldClass;\n","import { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\nimport { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem } from '../helpers';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = [\n  'phone-input-placeholder',\n  'maxlength',\n  'autocomplete',\n  'name',\n  'phone-input-type',\n];\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  'phone-input-type': 'type',\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, {\n      includeAttrs: ['label-type', 'required', 'phone-input-type'],\n      mapAttrs: { 'phone-input-type': 'type' },\n    });\n\n    // override combo box setter to display dialCode value in input\n    this.comboBox.customValueTransformFn = (val) => {\n      const [, dialCode] = val?.split?.(' ') || [];\n      return dialCode;\n    };\n  }\n\n  // exposed from main component\n  get countryCodeInputData() {\n    return this.comboBox.items;\n  }\n\n  // exposed from main component\n  get countryCodeValue() {\n    return this.comboBox.shadowRoot.querySelector('input').value;\n  }\n\n  // exposed from main component\n  get phoneNumberInputEle() {\n    return this.textField.shadowRoot.querySelector('input');\n  }\n\n  get allowAlphanumericInput() {\n    return this.getAttribute('allow-alphanumeric-input') === 'true';\n  }\n\n  get defaultCode() {\n    return this.getAttribute('default-code');\n  }\n\n  get selectionStart() {\n    return this.textField.selectionStart;\n  }\n\n  get minLength() {\n    return parseInt(this.getAttribute('minlength'), 10) || 0;\n  }\n\n  get selectedCountryCode() {\n    return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n  }\n\n  get restrictCountries() {\n    const attr = this.getAttribute('restrict-countries');\n    return attr?.split(',').filter(Boolean) || [];\n  }\n\n  get isFormatValue() {\n    return this.getAttribute('format-value') === 'true';\n  }\n\n  // `strict validation` enforces value parsing with libphonenumber-js\n  get isStrictValidation() {\n    return this.getAttribute('strict-validation') === 'true';\n  }\n\n  get value() {\n    if (!this.comboBox.value || !this.textField.value) {\n      return '';\n    }\n\n    if (this.allowAlphanumericInput) {\n      return `${this.comboBox.value}-${this.textField.value}`;\n    }\n\n    return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n  }\n\n  #clearValue() {\n    this.comboBox.selectedItem = undefined;\n    this.textField.value = '';\n  }\n\n  set value(val) {\n    // reject empty or digit-free values\n    if (!val || !/\\d/.test(val)) {\n      this.#clearValue();\n      return;\n    }\n\n    // ensure plus prefix\n    if (!val.startsWith('+')) {\n      val = `+${val}`;\n    }\n\n    let dialCode = '';\n    let nationalNumber = '';\n\n    if (val.includes('-')) {\n      // dash explicitly marks where the dial code ends — no parsing needed\n      const dashIdx = val.indexOf('-');\n      dialCode = val.slice(0, dashIdx);\n      nationalNumber = val.slice(dashIdx + 1).replace(/\\D+/g, '');\n    } else {\n      // parse only to get dial code length,\n      const parsed = parsePhoneNumberFromString(val);\n      if (parsed?.countryCallingCode) {\n        dialCode = `+${parsed.countryCallingCode}`;\n        // slice the raw value to avoid parser transformations\n        nationalNumber = val.slice(dialCode.length).replace(/\\D+/g, '');\n      }\n    }\n\n    // dial code must contain digits (e.g. '+1', not just '+')\n    if (!/\\d/.test(dialCode)) {\n      this.#clearValue();\n      return;\n    }\n\n    // Collect all country codes sharing this dial code from CountryCodes (e.g. US, CA, DO, ... for +1)\n    const matchingCountryCodes = CountryCodes.filter((c) => c.dialCode === dialCode).map(\n      (c) => c.code\n    );\n\n    // Check if the currently selected country's data-country-code is in that set\n    const currentSelectedCountryCode = this.selectedCountryCode;\n    if (!matchingCountryCodes.includes(currentSelectedCountryCode)) {\n      // If not, find the first combo box item (restricted list) whose data-country-code is in the set\n      const matchingItem = this.comboBox.items?.find((c) =>\n        matchingCountryCodes.includes(c.getAttribute('data-country-code'))\n      );\n      if (matchingItem) {\n        this.comboBox.selectedItem = matchingItem;\n      }\n    }\n\n    // set formatted or raw national number on the text field\n    if (this.isFormatValue) {\n      this.textField.value = this.#formatNationalNumber(nationalNumber);\n    } else {\n      this.textField.value = nationalNumber;\n    }\n  }\n\n  init() {\n    this.addEventListener('focus', (e) => {\n      // we want to ignore focus events we are dispatching\n      if (e.isTrusted) this.inputs[1].focus();\n    });\n\n    super.init?.();\n\n    this.#initInputs();\n  }\n\n  getValidity() {\n    const countryCode = this.comboBox.value;\n    const nationalNumer = this.textField.value;\n\n    const isEmpty = !countryCode || !nationalNumer;\n    const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n    if (this.isRequired && isEmpty) {\n      return { valueMissing: true };\n    }\n\n    if (this.value) {\n      if (!isValidLength) {\n        return { tooShort: true };\n      }\n\n      if (this.isStrictValidation && !this.#isValidParsedValue()) {\n        return { patternMismatch: true };\n      }\n    }\n\n    return {};\n  }\n\n  setSelectionRange(...args) {\n    this.textField.setSelectionRange(...args);\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback(attrName, oldValue, newValue);\n\n    if (oldValue !== newValue) {\n      if (attrName === 'default-code' && newValue && !this.selectedCountryCode) {\n        this.#handleDefaultCountryCode(newValue);\n      } else if (inputRelatedAttrs.includes(attrName)) {\n        const attr = mapAttrs[attrName] || attrName;\n\n        if (commonAttrs.includes(attrName)) {\n          if (!newValue) {\n            this.inputs.forEach((input) => input.removeAttribute(attr));\n          } else {\n            this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n          }\n        } else if (countryAttrs.includes(attrName)) {\n          this.comboBox.setAttribute(attr, newValue);\n        } else if (phoneAttrs.includes(attrName)) {\n          this.textField.setAttribute(attr, newValue);\n        }\n      }\n\n      if (labelTypeAttrs.includes(attrName)) {\n        this.#handleLabelTypeAttrs(attrName, newValue);\n      }\n\n      if (attrName === 'restrict-countries') {\n        this.#updateComboBoxItems(this.restrictCountries);\n      }\n    }\n  }\n\n  #initInputs() {\n    // Sanitize phone input value to filter everything but digits\n    this.textField.addEventListener('input', (e) => {\n      if (!this.allowAlphanumericInput) {\n        const telDigitsRegExp = /^\\d$/;\n        const sanitizedInput = e.target.value\n          .split('')\n          .filter((char) => telDigitsRegExp.test(char))\n          .join('');\n        e.target.value = sanitizedInput;\n      }\n    });\n\n    this.handleFocusEventsDispatching(this.inputs);\n    this.handleInputEventDispatching();\n  }\n\n  #formatNationalNumber(nationalNumber = '') {\n    // re-initialize AsYouType if country code is outdated\n    if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {\n      this.#ayt = new AsYouType(this.selectedCountryCode);\n    }\n\n    // reset previous AsYouType input\n    this.#ayt.reset();\n\n    const formattedVal = this.#ayt.input(nationalNumber);\n    return formattedVal || nationalNumber;\n  }\n\n  #isValidParsedValue() {\n    const parsed = parsePhoneNumberFromString(this.value);\n\n    return (\n      !!parsed && // Parsed successfully (not undefined)\n      !!parsed.isValid?.() && // Parsed object is valid\n      !!parsed.country && // Parsed object with a country code\n      !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n    );\n  }\n\n  #isAllowedCountry(countryCode) {\n    if (!this.restrictCountries.length) {\n      return true;\n    }\n\n    return this.restrictCountries.includes(countryCode);\n  }\n\n  // return country item by country code `data-country-code` (e.g. `US`)\n  #getCountryItemByCodeId(countryCode) {\n    return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n  }\n\n  #updateComboBoxItems(restrictCountries) {\n    const items = restrictCountries.length\n      ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n      : CountryCodes;\n\n    this.querySelector('descope-combo-box').innerHTML = items\n      .map((item) => comboBoxItem(item))\n      .join('');\n  }\n\n  #handleDefaultCountryCode(countryCode) {\n    if (!this.comboBox.value) {\n      const countryCodeItem = this.#getCountryItemByCodeId(countryCode);\n      // When replacing the input component (inserting internal component into text-field) -\n      // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n      // after the reset.\n      if (countryCodeItem) {\n        setTimeout(() => {\n          this.comboBox.selectedItem = countryCodeItem;\n        });\n      }\n    }\n  }\n\n  #handleLabelTypeAttrs(attrName, newValue) {\n    // set or remove label attributes from inner text/combo components on `label-type` change\n    const attr = mapAttrs[attrName] || attrName;\n\n    if (attrName === 'label-type') {\n      this.#handleLabelTypeChange(newValue);\n    }\n    // on inner components label attr change - set label attributes for text/combo components\n    // only if label-type is `floating`\n    else if (this.getAttribute('label-type') === 'floating') {\n      if (attrName === 'country-input-label') {\n        this.comboBox.setAttribute(attr, newValue);\n      } else if (attrName === 'label') {\n        this.textField.setAttribute(attr, newValue);\n      }\n    }\n  }\n\n  #handleLabelTypeChange(newValue) {\n    if (newValue === 'floating') {\n      // on change to `floating` label - set inner components `label` and `placeholder`\n      this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');\n      this.comboBox.setAttribute(\n        'placeholder',\n        this.getAttribute('country-input-placeholder') || ''\n      );\n      this.textField.setAttribute('label', this.getAttribute('label') || '');\n      this.textField.setAttribute(\n        'placeholder',\n        this.getAttribute('phone-input-placeholder') || ''\n      );\n    } else {\n      // for other cases - reset inner components label-type and labels\n      this.inputs.forEach((input) => input.removeAttribute('label'));\n    }\n  }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '@descope-ui/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-ui/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","labelFontSize","labelFontWeight","inputValueFontWeight","inputPlaceholderFontWeight","helperTextFontWeight","errorMessageFontWeight","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","overlayItemBackgroundColor","inputOutlineStyle","inputOutlineColor","valueInputHeight","valueInputMarginBottom","marginInlineStart","CountryCodes","template","innerHTML","content","cloneNode","inputElement","shadowRoot","querySelector","includeAttrs","countryCodeItems","countryCodeValue","phoneNumberInputEle","countryCodeInputData","countryCodes","Array","from","map","ele","getAttribute","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","item","join","comboBox","textField","inputs","customValueTransformFn","val","dialCode","split","items","allowAlphanumericInput","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","replace","undefined","test","startsWith","nationalNumber","includes","dashIdx","indexOf","slice","parsed","countryCallingCode","length","matchingCountryCodes","c","code","currentSelectedCountryCode","matchingItem","find","e","isTrusted","getValidity","countryCode","nationalNumer","isEmpty","isValidLength","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","handleFocusEventsDispatching","handleInputEventDispatching","country","reset","isValid","countryCodeItem","comboBoxItem","name","toLowerCase","getCountryFlag"],"sourceRoot":""}

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

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