@descope/web-components-ui 1.20.0 → 1.22.0

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

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878,9894],{69473:(t,e,n)=>{n.d(e,{T:()=>l,w:()=>u});var o=n(94619),i=n(93826),r=n(7138),a=n(14944),s=n(33177);const l=(0,a.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],u=(0,r.Zz)((0,o.RF)({mappings:i.A}),o.VO,(0,o.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),o.tQ,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,o.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${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,s.$J)("vaadin-text-field")}\n\t\t\t${(0,s.cy)(u.cssVarList)}\n\t\t\t${(0,s.LJ)("vaadin-text-field",u.cssVarList)}\n      ${(0,s.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},89348:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>o.w,componentName:()=>o.T}),n(63970),n(23638),n(80201);var o=n(69473);customElements.define(o.T,o.w)},23758:(t,e,n)=>{n.d(e,{NF:()=>A,TQ:()=>h});var o=n(32413),i=n(14944),r=n(7138),a=n(94619),s=n(69473),l=n(44976),p=n(44066),u=n(33177);const d=s.w.cssVarList,c=l.C.cssVarList,h=(0,i.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:v,phoneInput:C,separator:x,errorMessage:I,helperText:w}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},A=(0,r.Zz)((0,a.RF)({mappings:{fontSize:[b,g,{selector:s.w.componentName,property:s.w.cssVarList.fontSize},{selector:l.C.componentName,property:l.C.cssVarList.fontSize}],fontFamily:[y,I,w,{...v,property:l.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...C,property:"width"},{...v,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"outline-style"},{...x,property:"border-left-style"}],inputBorderWidth:[{...f,property:"outline-width"},{...x,property:"border-left-width"}],inputBorderColor:[{...f,property:"outline-color"},{...x,property:"border-left-color"}],inputBorderRadius:[{...g,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...v,property:c.hostWidth},countryCodeDropdownWidth:{...v,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...C,property:"width"},horizontalPadding:[{...C,property:"padding-left"},{...C,property:"padding-right"},{...v,property:"padding-left"},{...v,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...I,property:"color"},errorMessageIcon:{...I,property:"background-image"},errorMessageIconSize:{...I,property:"background-size"},errorMessageIconPadding:{...I,property:"padding-inline-start"},errorMessageIconRepeat:{...I,property:"background-repeat"},errorMessageIconPosition:{...I,property:"background-position"},inputValueTextColor:[{...C,property:d.inputValueTextColor},{...v,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...C,property:d.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},valueInputHeight:[{...v,property:c.valueInputHeight}],valueInputMarginBottom:[{...C,property:d.valueInputMarginBottom}],marginInlineStart:[{...C,property:d.marginInlineStart},{...v,property:c.marginInlineStart}]}}),a.VO,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return p.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${o.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.T}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.T),(0,i.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input"]})}get countryCodeItems(){return this.inputElement?.countryCodeValue}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}get countryCodeInputData(){return this.inputElement?.countryCodeInputData}get countryCodes(){return Array.from(this.inputElement.countryCodeInputData).map((t=>t.getAttribute("data-country-code")))}}))((0,a.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,u.cy)(A.cssVarList)}\n\t\t\t${(0,u.I4)("vaadin-text-field")}\n\t\t\t${(0,u.kG)("vaadin-text-field")}\n\t\t\t${(0,u.X6)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        direction: ltr;\n        position: relative;\n\t\t\t}\n      descope-phone-field-internal::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        outline-offset: calc(var(${A.cssVarList.inputBorderWidth}) * -1);\n        pointer-events: none;\n      }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\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${d.inputOutlineWidth}: 0;\n\t\t\t\t${d.inputOutlineOffset}: 0;\n\t\t\t\t${d.inputBorderWidth}: 0;\n\t\t\t\t${d.inputBorderRadius}: 0;\n      }\n\n      :host([label-type="floating"]) vaadin-text-field::part(label) {\n        display: none;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n      ${(0,u.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}))},32413:(t,e,n)=>{n.d(e,{A:()=>y,T:()=>s});var o=n(25827),i=n(14944),r=n(44066),a=n(41611);const s=(0,i.xE)("phone-field-internal"),l=["disabled","size","bordered","readonly","allow-alphanumeric-input"],p=["country-input-placeholder","default-code","restrict-countries"],u=["phone-input-placeholder","maxlength","autocomplete","name"],d=["label-type","country-input-label","label"],c={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},h=[].concat(l,p,u,d),b=(0,o.y)({componentName:s,baseSelector:"div"}),y=class extends b{static get observedAttributes(){return[].concat(b.observedAttributes||[],h)}constructor(){super(),this.innerHTML=`\n    <div class="wrapper">\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${r.A.map((t=>(0,a.$B)(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],(0,i.EA)(this,this.countryCodeInput,{includeAttrs:["label-type"]}),(0,i.EA)(this,this.phoneNumberInput,{includeAttrs:["label-type","required"]}),this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.countryCodeInput.items}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e,n]=(0,a.lq)(t);this.#t(e),this.#e(n)}setSelectionRange(...t){this.phoneNumberInput.setSelectionRange(...t)}get selectionStart(){return this.phoneNumberInput.selectionStart}#t(t){if(t){const e=this.getCountryByDialCode(t);e&&(this.countryCodeInput.selectedItem=e)}else this.countryCodeInput.selectedItem=void 0}#e(t){this.phoneNumberInput.value!==t&&(this.phoneNumberInput.value=t)}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,n=!t||!e,o=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&n?{valueMissing:!0}:o?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){const t=this.getAttribute("restrict-countries");return t?t.split(","):[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-id")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(t){const e=t.length?r.A.filter((e=>t.includes(e.code))):r.A;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,a.$B)(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{if(t.stopPropagation(),!this.allowAlphanumericInput){const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n}})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}handleLabelTypeAttrs(t,e){const n=c[t]||t;"label-type"===t?this.onLabelTypeChange(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.countryCodeInput.setAttribute(n,e):"label"===t&&this.phoneNumberInput.setAttribute(n,e))}onLabelTypeChange(t){"floating"===t?(this.countryCodeInput.setAttribute("label",this.getAttribute("country-input-label")||""),this.countryCodeInput.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.phoneNumberInput.setAttribute("label",this.getAttribute("label")||""),this.phoneNumberInput.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach((t=>t.removeAttribute("label")))}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.handleDefaultCountryCode(n);else if(h.includes(t)){const e=c[t]||t;l.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):p.includes(t)?this.countryCodeInput.setAttribute(e,n):u.includes(t)&&this.phoneNumberInput.setAttribute(e,n)}d.includes(t)&&this.handleLabelTypeAttrs(t,n),"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},54930:(t,e,n)=>{n.r(e),n(11738),n(89348);var o=n(32413);customElements.define(o.T,o.A)},41611:(t,e,n)=>{n.d(e,{$B:()=>i,lq:()=>r});var o=n(94327);const i=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=t=>{const e=t||"";let n="",i="";const r=(0,o.l)(e);if(r)r.countryCallingCode&&(n=`+${r.countryCallingCode}`),r.nationalNumber&&(i=r.nationalNumber);else{const[t,o]=e.split("-");n=t||"",i=o||""}return[n,i]}},96442:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>o.NF,componentName:()=>o.TQ}),n(54930),n(11738),n(89348);var o=n(23758);customElements.define(o.TQ,o.NF)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878,9894],{69473:(t,e,n)=>{n.d(e,{T:()=>l,w:()=>d});var o=n(94619),i=n(93826),r=n(7138),a=n(14944),s=n(33177);const l=(0,a.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,r.Zz)((0,o.RF)({mappings:i.A}),o.VO,(0,o.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),o.tQ,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,o.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,s.$J)("vaadin-text-field")}\n\t\t\t${(0,s.cy)(d.cssVarList)}\n\t\t\t${(0,s.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,s.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},89348:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>o.w,componentName:()=>o.T}),n(63970),n(23638),n(80201);var o=n(69473);customElements.define(o.T,o.w)},23758:(t,e,n)=>{n.d(e,{NF:()=>A,TQ:()=>h});var o=n(32413),i=n(14944),r=n(7138),a=n(94619),s=n(69473),l=n(44976),p=n(44066),d=n(33177);const u=s.w.cssVarList,c=l.C.cssVarList,h=(0,i.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:v,phoneInput:C,separator:x,errorMessage:I,helperText:w}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},A=(0,r.Zz)((0,a.RF)({mappings:{fontSize:[b,g,{selector:s.w.componentName,property:s.w.cssVarList.fontSize},{selector:l.C.componentName,property:l.C.cssVarList.fontSize}],fontFamily:[y,I,w,{...v,property:l.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...C,property:"width"},{...v,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...x,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...x,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...x,property:"border-left-color"}],inputBorderRadius:[{...g,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...v,property:c.hostWidth},countryCodeDropdownWidth:{...v,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...C,property:"width"},horizontalPadding:[{...C,property:"padding-left"},{...C,property:"padding-right"},{...v,property:"padding-left"},{...v,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...I,property:"color"},errorMessageIcon:{...I,property:"background-image"},errorMessageIconSize:{...I,property:"background-size"},errorMessageIconPadding:{...I,property:"padding-inline-start"},errorMessageIconRepeat:{...I,property:"background-repeat"},errorMessageIconPosition:{...I,property:"background-position"},inputValueTextColor:[{...C,property:u.inputValueTextColor},{...v,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...C,property:u.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},valueInputHeight:[{...v,property:c.valueInputHeight}],valueInputMarginBottom:[{...C,property:u.valueInputMarginBottom}],marginInlineStart:[{...C,property:u.marginInlineStart},{...v,property:c.marginInlineStart}]}}),a.VO,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return p.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${o.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.T}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.T),(0,i.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input"]})}get countryCodeItems(){return this.inputElement?.countryCodeValue}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}get countryCodeInputData(){return this.inputElement?.countryCodeInputData}get countryCodes(){return Array.from(this.inputElement.countryCodeInputData).map((t=>t.getAttribute("data-country-code")))}}))((0,a.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,d.cy)(A.cssVarList)}\n\t\t\t${(0,d.I4)("vaadin-text-field")}\n\t\t\t${(0,d.kG)("vaadin-text-field")}\n\t\t\t${(0,d.X6)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        direction: ltr;\n        position: relative;\n\t\t\t}\n      descope-phone-field-internal::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        outline-offset: calc(var(${A.cssVarList.inputBorderWidth}) * -1);\n        pointer-events: none;\n      }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n        min-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputOutlineOffset}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.inputBorderRadius}: 0;\n      }\n\n      :host([label-type="floating"]) vaadin-text-field::part(label) {\n        display: none;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n      ${(0,d.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}))},32413:(t,e,n)=>{n.d(e,{A:()=>y,T:()=>s});var o=n(25827),i=n(14944),r=n(44066),a=n(41611);const s=(0,i.xE)("phone-field-internal"),l=["disabled","size","bordered","readonly","allow-alphanumeric-input"],p=["country-input-placeholder","default-code","restrict-countries"],d=["phone-input-placeholder","maxlength","autocomplete","name"],u=["label-type","country-input-label","label"],c={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},h=[].concat(l,p,d,u),b=(0,o.y)({componentName:s,baseSelector:"div"}),y=class extends b{static get observedAttributes(){return[].concat(b.observedAttributes||[],h)}constructor(){super(),this.innerHTML=`\n    <div class="wrapper">\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${r.A.map((t=>(0,a.$B)(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],(0,i.EA)(this,this.countryCodeInput,{includeAttrs:["label-type"]}),(0,i.EA)(this,this.phoneNumberInput,{includeAttrs:["label-type","required"]}),this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.countryCodeInput.items}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e,n]=(0,a.lq)(t);this.#t(e),this.#e(n)}setSelectionRange(...t){this.phoneNumberInput.setSelectionRange(...t)}get selectionStart(){return this.phoneNumberInput.selectionStart}#t(t){if(t){const e=this.getCountryByDialCode(t);e&&(this.countryCodeInput.selectedItem=e)}else this.countryCodeInput.selectedItem=void 0}#e(t){this.phoneNumberInput.value!==t&&(this.phoneNumberInput.value=t)}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,n=!t||!e,o=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&n?{valueMissing:!0}:o?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){const t=this.getAttribute("restrict-countries");return t?t.split(","):[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-id")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(t){const e=t.length?r.A.filter((e=>t.includes(e.code))):r.A;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,a.$B)(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{if(t.stopPropagation(),!this.allowAlphanumericInput){const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n}})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}handleLabelTypeAttrs(t,e){const n=c[t]||t;"label-type"===t?this.onLabelTypeChange(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.countryCodeInput.setAttribute(n,e):"label"===t&&this.phoneNumberInput.setAttribute(n,e))}onLabelTypeChange(t){"floating"===t?(this.countryCodeInput.setAttribute("label",this.getAttribute("country-input-label")||""),this.countryCodeInput.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.phoneNumberInput.setAttribute("label",this.getAttribute("label")||""),this.phoneNumberInput.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach((t=>t.removeAttribute("label")))}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.handleDefaultCountryCode(n);else if(h.includes(t)){const e=c[t]||t;l.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):p.includes(t)?this.countryCodeInput.setAttribute(e,n):d.includes(t)&&this.phoneNumberInput.setAttribute(e,n)}u.includes(t)&&this.handleLabelTypeAttrs(t,n),"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},54930:(t,e,n)=>{n.r(e),n(11738),n(89348);var o=n(32413);customElements.define(o.T,o.A)},41611:(t,e,n)=>{n.d(e,{$B:()=>i,lq:()=>r});var o=n(94327);const i=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=t=>{const e=t||"";let n="",i="";const r=(0,o.l)(e);if(r)r.countryCallingCode&&(n=`+${r.countryCallingCode}`),r.nationalNumber&&(i=r.nationalNumber);else{const[t,o]=e.split("-");n=t||"",i=o||""}return[n,i]}},96442:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>o.NF,componentName:()=>o.TQ}),n(54930),n(11738),n(89348);var o=n(23758);customElements.define(o.TQ,o.NF)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.20.0",
+  "version": "1.22.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js

@@ -136,15 +136,15 @@ export const PhoneFieldClass = compose(
       hostDirection: { ...host, property: 'direction' },
 
       inputBorderStyle: [
-        { ...internalAfter, property: 'outline-style' },
+        { ...internalAfter, property: 'border-style' },
         { ...separator, property: 'border-left-style' },
       ],
       inputBorderWidth: [
-        { ...internalAfter, property: 'outline-width' },
+        { ...internalAfter, property: 'border-width' },
         { ...separator, property: 'border-left-width' },
       ],
       inputBorderColor: [
-        { ...internalAfter, property: 'outline-color' },
+        { ...internalAfter, property: 'border-color' },
         { ...separator, property: 'border-left-color' },
       ],
       inputBorderRadius: [