@descope/web-components-ui 2.2.34 → 2.2.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +14 -100
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/DescopeDev.js.map +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js.map +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js.map +1 -1
- package/package.json +30 -30
- package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +14 -74
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878],{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)},49157:(t,e,i)=>{i.d(e,{$B:()=>
|
|
1
|
+
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878],{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)},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`},79275:(t,e,i)=>{i.d(e,{T:()=>r,w:()=>u});var n=i(79365),s=i(6424),o=i(9696),a=i(97810),l=i(73551);const r=(0,a.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,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}))},84015:(t,e,i)=>{i.d(e,{A:()=>v,T:()=>c});var n=i(3393),s=i(97810),o=i(51680),a=i(49157),l=i(10473),r=i(23530);const c=(0,s.xE)("phone-field-internal"),u=["disabled","size","bordered","readonly"],d=["country-input-placeholder","default-code","restrict-countries"],h=["phone-input-placeholder","maxlength","autocomplete","name"],p=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},m=[].concat(u,d,h,p),y=(0,n.y)({componentName:c,baseSelector:"div"}),v=class extends y{static get observedAttributes(){return[].concat(y.observedAttributes||[],m)}#t;constructor(){super(),this.innerHTML=`\n <div class="wrapper">\n <descope-combo-box\n item-label-path="data-name"\n item-value-path="data-id"\n >\n ${o.A.map(t=>(0,a.$B)(t)).join("")}\n </descope-combo-box>\n <div class="separator"></div>\n <descope-text-field type="tel"></descope-text-field>\n </div>\n `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,s.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,s.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){return this.comboBox.value&&this.textField.value?this.allowAlphanumericInput?`${this.comboBox.value}-${this.textField.value}`:`${this.comboBox.value}-${this.textField.value.replace(/\D+/g,"")}`:""}set value(t){const e=t.replace(new RegExp(`^\\+?${this.comboBox.value.replace("+","")}-?`),"");this.isFormatValue?this.textField.value=this.#e(e):this.textField.value=e}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,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.#n())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.#s(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.#o(t,i),"restrict-countries"===t&&this.#a(this.restrictCountries)}}#i(){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()}#e(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new r.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#n(){const t=(0,l.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#l(t.country))}#l(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#r(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#a(t){const e=t.length?o.A.filter(e=>t.includes(e.code)):o.A;this.querySelector("descope-combo-box").innerHTML=e.map(t=>(0,a.$B)(t)).join("")}#s(t){if(!this.comboBox.value){const e=this.#r(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#o(t,e){const i=b[t]||t;"label-type"===t?this.#c(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(i,e):"label"===t&&this.textField.setAttribute(i,e))}#c(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)}}]);
|
|
2
2
|
//# sourceMappingURL=phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js.map
|
package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js","mappings":"gPAMAA,eAAeC,OAAO,IAAe,I,4DCF9B,MAGMC,EAAe,EAAGC,OAAMC,WAAUC,KAAMC,KAAc,0BAEtDF,sBACED,KAAQC,KAAYE,8BACZH,uDAPO,CAACA,GAC7B,+DAA+DA,EAAKI,oBAUtDC,CAAeL,gDAEpBG,gDAGAH,yBACAC,mCAKEK,EAAoBC,IAC/B,MAAMC,EAAQD,GAAO,GACrB,IAAIE,EAAc,GACdC,EAAc,GAGlB,MAAMC,GAAS,OAA2BH,GAE1C,GAAIG,EACEA,EAAOC,qBACTH,EAAc,IAAIE,EAAOC,sBAGvBD,EAAOE,iBACTH,EAAcC,EAAOE,oBAElB,CAEL,MAAOV,EAASW,GAASN,EAAMO,MAAM,KACrCN,EAAcN,GAAW,GACzBO,EAAcI,GAAS,EACzB,CAEA,MAAO,CAACL,EAAaC,G,oGChChB,MAAMM,GAAgB,QAAiB,cAExCC,EAAgB,CAAC,OAAQ,aAAc,qBA+EhCC,GAAiB,SAC5B,QAAiB,CACfC,SAAU,MAEZ,MACA,QAAgB,CAAEC,WAAY,CAAC,QAAS,kBAAmBC,iBAAiB,IAC5E,KAnFmBC,GACnB,cAA6BA,EAC3B,6BAAWC,GACT,OAAON,EAAcO,OAAOF,EAAWC,oBAAsB,GAC/D,CAEAE,KAEA,IAAAC,GACEC,MAAMD,QACR,CAEA,qBAAAE,CAAsBC,GACpB,IAAKA,EAEH,YADAC,KAAKL,MAAMM,SAIb,MAAMC,EAAiB,CACrBP,KAAM,gBACNQ,MAAO,OACPC,MAAO,mBAGHC,EAAmB,CACvBV,KAAM,wBACNQ,MAAO,SACPC,MAAO,mBAGTJ,KAAKL,KAAOW,OAAOC,OAAOC,SAASC,cAAc,eAAgB,CAC/DC,KAAM,YACHR,IAGLF,KAAKW,YAAYC,YAAYZ,KAAKL,MAClCK,KAAKL,KAAKkB,iBAAiB,QAAS,KAClCC,UAAUC,UAAUC,UAAUhB,KAAKtB,OACnC4B,OAAOC,OAAOP,KAAKL,KAAMU,GAGzBY,WAAW,KACTX,OAAOC,OAAOP,KAAKL,KAAMO,IACxB,MAEP,CAEA,YAAAgB,GACElB,KAAKmB,OACP,CAEA,wBAAAC,CAAyBC,EAAUC,EAAQC,GACzC1B,MAAM2B,0BAA0BH,EAAUC,EAAQC,GAOjC,SAAbF,GACFrB,KAAKW,YAAYc,SAASF,GAGxBD,IAAWC,IACI,eAAbF,EACa,aAAXE,EACFvB,KAAKa,iBAAiB,QAASb,KAAKkB,cAEpClB,KAAK0B,oBAAoB,QAAS1B,KAAKkB,cAEnB,sBAAbG,GACTrB,KAAKF,sBAAiC,SAAXyB,GAGjC,GAG0B,EAS5B,QAAY,CACVI,MAAO,CAAC,SAAU,UAClBC,eAAgB,oBAChBxB,MAAO,IAAM,wGAIOhB,EAAeyC,WAAWC,4BACxC1C,EAAeyC,WAAWE,+cAc5B,QAAwB,gCAC3B,QAAuB3C,EAAeyC,uBACtC,QAAoB,oBAAqBzC,EAAeyC,uBACrD,iGAMJG,iBAAkB,CAAC,WAAY,SAC/B9C,kB,gHCrIG,MAAMA,GAAgB,QAAiB,wBAExC+C,EAAc,CAAC,WAAY,OAAQ,WAAY,YAC/CC,EAAe,CAAC,4BAA6B,eAAgB,sBAC7DC,EAAa,CAAC,0BAA2B,YAAa,eAAgB,QACtEC,EAAiB,CAAC,aAAc,sBAAuB,SACvDC,EAAW,CACf,sBAAuB,QACvB,4BAA6B,cAC7B,0BAA2B,eAGvBC,EAAoB,GAAG5C,OAAOuC,EAAaC,EAAcC,EAAYC,GAErEG,GAAiB,OAAqB,CAAErD,gBAAesD,aAAc,QAyW3E,EAvWA,cAAiCD,EAC/B,6BAAW9C,GACT,MAAO,GAAGC,OAAO6C,EAAe9C,oBAAsB,GAAI6C,EAC5D,CAEA,GAEA,WAAAG,GACE5C,QAEAG,KAAK0C,UAAY,iJAMb,IAAaC,IAAKC,IAAS,QAAaA,IAAOC,KAAK,qJAOxD7C,KAAK8C,SAAW9C,KAAK+C,cAAc,qBACnC/C,KAAKgD,UAAYhD,KAAK+C,cAAc,sBAEpC/C,KAAKiD,OAAS,CAACjD,KAAK8C,SAAU9C,KAAKgD,YAEnC,QAAahD,KAAMA,KAAK8C,SAAU,CAAEI,aAAc,CAAC,iBACnD,QAAalD,KAAMA,KAAKgD,UAAW,CAAEE,aAAc,CAAC,aAAc,cAGlElD,KAAK8C,SAASK,uBAA0B1E,IACtC,MAAO,CAAEN,GAAYM,GAAKQ,QAAQ,MAAQ,GAC1C,OAAOd,EAEX,CAGA,wBAAIiF,GACF,OAAOpD,KAAK8C,SAASO,KACvB,CAGA,oBAAIC,GACF,OAAOtD,KAAK8C,SAASS,WAAWR,cAAc,SAASrE,KACzD,CAGA,uBAAI8E,GACF,OAAOxD,KAAKgD,UAAUO,WAAWR,cAAc,QACjD,CAEA,0BAAIU,GACF,MAAyD,SAAlDzD,KAAK0D,aAAa,2BAC3B,CAEA,eAAIC,GACF,OAAO3D,KAAK0D,aAAa,eAC3B,CAEA,kBAAIE,GACF,OAAO5D,KAAKgD,UAAUY,cACxB,CAEA,aAAIC,GACF,OAAOC,SAAS9D,KAAK0D,aAAa,aAAc,KAAO,CACzD,CAEA,uBAAIK,GACF,OAAO/D,KAAK8C,UAAUkB,cAAcN,aAAa,oBACnD,CAEA,qBAAIO,GACF,MAAMC,EAAOlE,KAAK0D,aAAa,sBAC/B,OAAOQ,GAAMjF,MAAM,KAAKkF,OAAOC,UAAY,EAC7C,CAEA,iBAAIC,GACF,MAA6C,SAAtCrE,KAAK0D,aAAa,eAC3B,CAGA,sBAAIY,GACF,MAAkD,SAA3CtE,KAAK0D,aAAa,oBAC3B,CAEA,SAAIhF,GACF,IAAKsB,KAAK8C,SAASpE,QAAUsB,KAAKgD,UAAUtE,MAC1C,MAAO,GAGT,MAAOC,EAAaC,IAAe,QACjC,GAAGoB,KAAK8C,SAASpE,SAASsB,KAAKgD,UAAUtE,SAG3C,MAAO,GAAGC,GAAeqB,KAAK8C,SAASpE,SAASE,GAAeoB,KAAKgD,UAAUtE,OAChF,CAEA,SAAIA,CAAMD,GACR,MAAOE,EAAaI,IAAkB,QAAiBN,GAEvDuB,MAAK,EAAgBrB,GACrBqB,MAAK,EAAmBjB,EAC1B,CAEA,IAAAa,GACEI,KAAKa,iBAAiB,QAAU0D,IAE1BA,EAAEC,WAAWxE,KAAKiD,OAAO,GAAG9B,UAGlCtB,MAAMD,SAENI,MAAK,GACP,CAEA,WAAAyE,GACE,MAAM9F,EAAcqB,KAAK8C,SAASpE,MAC5BgG,EAAgB1E,KAAKgD,UAAUtE,MAE/BiG,GAAWhG,IAAgB+F,EAC3BE,EAAgBF,GAAiBA,EAAcG,QAAU7E,KAAK6D,UAEpE,GAAI7D,KAAK8E,YAAcH,EACrB,MAAO,CAAEI,cAAc,GAGzB,GAAI/E,KAAKtB,MAAO,CACd,IAAKkG,EACH,MAAO,CAAEI,UAAU,GAGrB,GAAIhF,KAAKsE,qBAAuBtE,MAAK,IACnC,MAAO,CAAEiF,iBAAiB,EAE9B,CAEA,MAAO,CAAC,CACV,CAEA,iBAAAC,IAAqBC,GACnBnF,KAAKgD,UAAUkC,qBAAqBC,EACtC,CAEA,wBAAA/D,CAAyBC,EAAU+D,EAAUC,GAG3C,GAFAxF,MAAMuB,yBAAyBC,EAAU+D,EAAUC,GAE/CD,IAAaC,EAAU,CACzB,GAAiB,iBAAbhE,GAA+BgE,EACjCrF,MAAK,EAA0BqF,QAC1B,GAAI/C,EAAkBgD,SAASjE,GAAW,CAC/C,MAAM6C,EAAO7B,EAAShB,IAAaA,EAE/BY,EAAYqD,SAASjE,GAClBgE,EAGHrF,KAAKiD,OAAOsC,QAASC,GAAUA,EAAMC,aAAavB,EAAMmB,IAFxDrF,KAAKiD,OAAOsC,QAASC,GAAUA,EAAME,gBAAgBxB,IAI9ChC,EAAaoD,SAASjE,GAC/BrB,KAAK8C,SAAS2C,aAAavB,EAAMmB,GACxBlD,EAAWmD,SAASjE,IAC7BrB,KAAKgD,UAAUyC,aAAavB,EAAMmB,EAEtC,CAEIjD,EAAekD,SAASjE,IAC1BrB,MAAK,EAAsBqB,EAAUgE,GAGtB,uBAAbhE,GACFrB,MAAK,EAAqBA,KAAKiE,kBAEnC,CACF,CAEA,KAEEjE,KAAKgD,UAAUnC,iBAAiB,QAAU0D,IACxC,IAAKvE,KAAKyD,uBAAwB,CAChC,MAAMkC,EAAkB,OAClBC,EAAiBrB,EAAEsB,OAAOnH,MAC7BO,MAAM,IACNkF,OAAQ2B,GAASH,EAAgBI,KAAKD,IACtCjD,KAAK,IACR0B,EAAEsB,OAAOnH,MAAQkH,CACnB,IAGF5F,KAAKgG,6BAA6BhG,KAAKiD,QACvCjD,KAAKiG,8BAILjG,KAAKa,iBAAiB,QAASb,MAAK,EAAwBkG,KAAKlG,MACnE,CAEA,GAAgBvB,GACd,IAAKA,GAAOA,IAAQuB,KAAK+D,oBAAqB,OAE9C,IAAIoC,EAEJ,GAAInG,KAAKtB,MAAO,CAEd,MAAMR,EAAO8B,MAAK,EAA6B,GAAGvB,KAAOuB,KAAKgD,UAAUtE,SACxEyH,EAAkBnG,MAAK,EAAoB9B,EAC7C,CAIKiI,IACHA,EAAkBnG,MAAK,EAAsBvB,IAI/CuB,KAAK8C,SAASkB,aAAemC,CAC/B,CAEA,GAAmB1H,GACbuB,KAAKqE,gBACP5F,EAAMuB,MAAK,EAAsBvB,IAG/BuB,KAAKgD,UAAUtE,QAAUD,IAC3BuB,KAAKgD,UAAUtE,MAAQD,EAE3B,CAEA,GAAsBM,EAAiB,IAWrC,OATKiB,MAAK,GAAQA,MAAK,EAAK3B,UAAY2B,KAAK+D,sBAC3C/D,MAAK,EAAO,IAAI,IAAUA,KAAK+D,sBAIjC/D,MAAK,EAAKoG,QAEWpG,MAAK,EAAKwF,MAAMzG,IAEdA,CACzB,CAEA,KACE,MAAMF,GAAS,OAA2BmB,KAAKtB,OAE/C,SACIG,GACAA,EAAOwH,aACPxH,EAAOR,SACP2B,MAAK,EAAkBnB,EAAOR,SAEpC,CAEA,GAAkBM,GAChB,OAAKqB,KAAKiE,kBAAkBY,QAIrB7E,KAAKiE,kBAAkBqB,SAAS3G,EACzC,CAGA,GAAsBR,GACpB,OAAO6B,KAAK8C,SAASO,OAAOiD,KAAMC,GAAMA,EAAE7C,aAAa,aAAevF,SAAaqI,CACrF,CAGA,GAAoB7H,GAClB,OAAOqB,KAAK8C,SAASO,OAAOiD,KAAMC,GAAMA,EAAE7C,aAAa,uBAAyB/E,EAClF,CAEA,GAA6BF,GAC3B,IAAKA,EAAK,OACV,MAAMI,GAAS,OAA2BJ,GAC1C,IAAKI,GAAQR,QAAS,OACtB,MAAMoI,EAAmBzG,MAAK,EAAoBnB,EAAOR,SACzD,OAAOoI,GAAkB/C,aAAa,oBACxC,CAEA,GAAqBO,GACnB,MAAMZ,EAAQY,EAAkBY,OAC5B,IAAaV,OAAQoC,GAAMtC,EAAkBqB,SAASiB,EAAErI,OACxD,IAEJ8B,KAAK+C,cAAc,qBAAqBL,UAAYW,EACjDV,IAAKC,IAAS,QAAaA,IAC3BC,KAAK,GACV,CAEA,GAA0BlE,GACxB,IAAKqB,KAAK8C,SAASpE,MAAO,CACxB,MAAMyH,EAAkBnG,MAAK,EAAoBrB,GAI7CwH,GACFlF,WAAW,KACTjB,KAAK8C,SAASkB,aAAemC,GAGnC,CACF,CAEA,KACE,IAAKnG,KAAKtB,MAAO,OAEjB,MAAML,EAAU2B,MAAK,EAA6BA,KAAKtB,OAEvD,GAAKL,GAGD2B,KAAK+D,sBAAwB1F,EAAS,CACxC,MAAMoI,EAAmBzG,MAAK,EAAoB3B,GAE9CoI,IACFzG,KAAK8C,SAASkB,aAAeyC,EAEjC,CACF,CAEA,GAAsBpF,EAAUgE,GAE9B,MAAMnB,EAAO7B,EAAShB,IAAaA,EAElB,eAAbA,EACFrB,MAAK,EAAuBqF,GAIe,aAApCrF,KAAK0D,aAAa,gBACR,wBAAbrC,EACFrB,KAAK8C,SAAS2C,aAAavB,EAAMmB,GACX,UAAbhE,GACTrB,KAAKgD,UAAUyC,aAAavB,EAAMmB,GAGxC,CAEA,GAAuBA,GACJ,aAAbA,GAEFrF,KAAK8C,SAAS2C,aAAa,QAASzF,KAAK0D,aAAa,wBAA0B,IAChF1D,KAAK8C,SAAS2C,aACZ,cACAzF,KAAK0D,aAAa,8BAAgC,IAEpD1D,KAAKgD,UAAUyC,aAAa,QAASzF,KAAK0D,aAAa,UAAY,IACnE1D,KAAKgD,UAAUyC,aACb,cACAzF,KAAK0D,aAAa,4BAA8B,KAIlD1D,KAAKiD,OAAOsC,QAASC,GAAUA,EAAME,gBAAgB,SAEzD,E,0DCrXF3H,eAAeC,OAAO,IAAe,I","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.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"],"sourcesContent":["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 { 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 {\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 { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem, parsePhoneNumber } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') || [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) || 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) || [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value || !this.textField.value) {\n return '';\n }\n\n const [countryCode, phoneNumber] = parsePhoneNumber(\n `${this.comboBox.value}-${this.textField.value}`\n );\n\n return `${countryCode || this.comboBox.value}-${phoneNumber || this.textField.value}`;\n }\n\n set value(val) {\n const [countryCode, nationalNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setNationalNumber(nationalNumber);\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode || !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] || attrName;\n\n if (commonAttrs.includes(attrName)) {\n 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 // verify country code item against phone number pattern and replace if needed and country is allowed\n // (e.g. +1 can be US or CA, depending on the pattern)\n this.addEventListener('input', this.#handleSameCountryCodes.bind(this));\n }\n\n #setCountryCode(val) {\n if (!val || val === this.selectedCountryCode) return;\n\n let countryCodeItem = undefined;\n\n if (this.value) {\n // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)\n const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);\n countryCodeItem = this.#getCountryByCodeId(code);\n }\n\n // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)\n // then use the first option with same dial code (e.g. in that case - `US` for +1)\n if (!countryCodeItem) {\n countryCodeItem = this.#getCountryByDialCode(val);\n }\n\n // set country code item; in it doesn't exist in list - set `undefined`\n this.comboBox.selectedItem = countryCodeItem;\n }\n\n #setNationalNumber(val) {\n if (this.isFormatValue) {\n val = this.#formatNationalNumber(val);\n }\n\n if (this.textField.value !== val) {\n this.textField.value = val;\n }\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n\n return formattedVal || nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by dial code `data-id` (e.g. `+1`)\n #getCountryByDialCode(dialCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) || undefined;\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #getCountryCodeByPhoneNumber(val) {\n if (!val) return undefined;\n const parsed = parsePhoneNumberFromString(val);\n if (!parsed?.country) return undefined;\n const foundCountryItem = this.#getCountryByCodeId(parsed.country);\n return foundCountryItem?.getAttribute('data-country-code');\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleSameCountryCodes() {\n if (!this.value) return;\n\n const country = this.#getCountryCodeByPhoneNumber(this.value);\n\n if (!country) return;\n\n // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)\n if (this.selectedCountryCode !== country) {\n const foundCountryItem = this.#getCountryByCodeId(country);\n // if found country is defined in country list then set it, otherwise - clear phone number\n if (foundCountryItem) {\n this.comboBox.selectedItem = foundCountryItem;\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] || attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') || ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') || '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') || ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n"],"names":["customElements","define","comboBoxItem","code","dialCode","name","country","toLowerCase","getCountryFlag","parsePhoneNumber","val","value","countryCode","phoneNumber","parsed","countryCallingCode","nationalNumber","phone","split","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","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","innerHTML","map","item","join","comboBox","querySelector","textField","inputs","includeAttrs","customValueTransformFn","countryCodeInputData","items","countryCodeValue","shadowRoot","phoneNumberInputEle","allowAlphanumericInput","getAttribute","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","length","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","bind","countryCodeItem","reset","isValid","find","c","undefined","foundCountryItem"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.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"],"sourcesContent":["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 { 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 {\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 { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') || [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) || 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) || [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value || !this.textField.value) {\n return '';\n }\n\n if (this.allowAlphanumericInput) {\n return `${this.comboBox.value}-${this.textField.value}`;\n }\n\n return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n }\n\n set value(val) {\n const nationalNumber = val.replace(\n new RegExp(`^\\\\+?${this.comboBox.value.replace('+', '')}-?`),\n ''\n );\n\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) {\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 #getCountryByCodeId(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.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #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"],"names":["customElements","define","comboBoxItem","code","dialCode","name","country","toLowerCase","getCountryFlag","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","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","innerHTML","map","item","join","comboBox","querySelector","textField","inputs","includeAttrs","customValueTransformFn","val","split","countryCodeInputData","items","countryCodeValue","shadowRoot","phoneNumberInputEle","allowAlphanumericInput","getAttribute","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","replace","nationalNumber","RegExp","e","isTrusted","getValidity","countryCode","nationalNumer","isEmpty","isValidLength","length","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","reset","parsed","isValid","find","c","countryCodeItem"],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878,9894],{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)},49157:(t,e,n)=>{n.d(e,{$B:()=>o,lq:()=>r});var i=n(10473);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=t=>{const e=t||"";let n="",o="";const r=(0,i.l)(e);if(r)r.countryCallingCode&&(n=`+${r.countryCallingCode}`),r.nationalNumber&&(o=r.nationalNumber);else{const[t,i]=e.split("-");n=t||"",o=i||""}return[n,o]}},79275:(t,e,n)=>{n.d(e,{T:()=>l,w:()=>u});var i=n(79365),o=n(6424),r=n(9696),s=n(97810),a=n(73551);const l=(0,s.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],u=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout(()=>{Object.assign(this.icon,e)},5e3)})}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}})((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${u.cssVarList.inputOutlineWidth}) + var(${u.cssVarList.inputOutlineOffset}));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(u.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",u.cssVarList)}\n ${(0,a.Kl)()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},81808:(t,e,n)=>{n.d(e,{NF:()=>B,TQ:()=>h});var i=n(84015),o=n(97810),r=n(9696),s=n(79365),a=n(79275),l=n(86365),d=n(51680),u=n(73551);const p=a.w.cssVarList,c=l.C.cssVarList,h=(0,o.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:x,phoneInput:v,separator:C,errorMessage:A,helperText:w}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},B=(0,r.Zz)((0,s.RF)({mappings:{fontSize:[b,g,{selector:a.w.componentName,property:a.w.cssVarList.fontSize},{selector:l.C.componentName,property:l.C.cssVarList.fontSize}],fontFamily:[y,A,w,{...x,property:l.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...v,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...C,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...C,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...C,property:"border-left-color"}],inputBorderRadius:[{...g,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...x,property:c.hostWidth},countryCodeDropdownWidth:{...x,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...v,property:"width"},horizontalPadding:[{...v,property:"padding-left"},{...v,property:"padding-right"},{...x,property:"padding-left"},{...x,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...y,property:"-webkit-text-fill-color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...A,property:"color"},errorMessageIcon:{...A,property:"background-image"},errorMessageIconSize:{...A,property:"background-size"},errorMessageIconPadding:{...A,property:"padding-inline-start"},errorMessageIconRepeat:{...A,property:"background-repeat"},errorMessageIconPosition:{...A,property:"background-position"},errorMessageFontSize:{...A,property:"font-size"},inputValueTextColor:[{...v,property:p.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...v,property:p.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},valueInputHeight:[{...x,property:c.valueInputHeight}],valueInputMarginBottom:[{...v,property:p.valueInputMarginBottom}],marginInlineStart:[{...v,property:p.marginInlineStart},{...x,property:c.marginInlineStart}]}}),s.VO,s.Yg,(0,s.OZ)({proxyProps:["value","selectionStart"]}),t=>class extends t{static get CountryCodes(){return d.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input","format-value","strict-validation"]})}get countryCodeItems(){return this.inputElement?.countryCodeValue}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}get countryCodeInputData(){return this.inputElement?.countryCodeInputData}get countryCodes(){return Array.from(this.inputElement.countryCodeInputData).map(t=>t.getAttribute("data-country-code"))}})((0,s.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,u.cy)(B.cssVarList)}\n\t\t\t${(0,u.I4)("vaadin-text-field")}\n\t\t\t${(0,u.kG)("vaadin-text-field")}\n\t\t\t${(0,u.X6)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n margin-left: 0;\n margin-right: 0;\n }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n direction: ltr;\n position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${B.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${p.inputOutlineWidth}: 0;\n\t\t\t\t${p.inputOutlineOffset}: 0;\n\t\t\t\t${p.inputBorderWidth}: 0;\n\t\t\t\t${p.inputBorderRadius}: 0;\n }\n\n :host([label-type="floating"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${(0,u.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:h}))},84015:(t,e,n)=>{n.d(e,{A:()=>g,T:()=>d});var i=n(3393),o=n(97810),r=n(51680),s=n(49157),a=n(10473),l=n(23530);const d=(0,o.xE)("phone-field-internal"),u=["disabled","size","bordered","readonly"],p=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength","autocomplete","name"],h=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},y=[].concat(u,p,c,h),m=(0,i.y)({componentName:d,baseSelector:"div"}),g=class extends m{static get observedAttributes(){return[].concat(m.observedAttributes||[],y)}#t;constructor(){super(),this.innerHTML=`\n <div class="wrapper">\n <descope-combo-box\n item-label-path="data-name"\n item-value-path="data-id"\n >\n ${r.A.map(t=>(0,s.$B)(t)).join("")}\n </descope-combo-box>\n <div class="separator"></div>\n <descope-text-field type="tel"></descope-text-field>\n </div>\n `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,o.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,o.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.comboBox.value||!this.textField.value)return"";const[t,e]=(0,s.lq)(`${this.comboBox.value}-${this.textField.value}`);return`${t||this.comboBox.value}-${e||this.textField.value}`}set value(t){const[e,n]=(0,s.lq)(t);this.#e(e),this.#n(n)}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.inputs[1].focus()}),super.init?.(),this.#i()}getValidity(){const t=this.comboBox.value,e=this.textField.value,n=!t||!e,i=e&&e.length>=this.minLength;if(this.isRequired&&n)return{valueMissing:!0};if(this.value){if(!i)return{tooShort:!0};if(this.isStrictValidation&&!this.#o())return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.#r(n);else if(y.includes(t)){const e=b[t]||t;u.includes(t)?n?this.inputs.forEach(t=>t.setAttribute(e,n)):this.inputs.forEach(t=>t.removeAttribute(e)):p.includes(t)?this.comboBox.setAttribute(e,n):c.includes(t)&&this.textField.setAttribute(e,n)}h.includes(t)&&this.#s(t,n),"restrict-countries"===t&&this.#a(this.restrictCountries)}}#i(){this.textField.addEventListener("input",t=>{if(!this.allowAlphanumericInput){const e=/^\d$/,n=t.target.value.split("").filter(t=>e.test(t)).join("");t.target.value=n}}),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching(),this.addEventListener("input",this.#l.bind(this))}#e(t){if(!t||t===this.selectedCountryCode)return;let e;if(this.value){const n=this.#d(`${t}-${this.textField.value}`);e=this.#u(n)}e||(e=this.#p(t)),this.comboBox.selectedItem=e}#n(t){this.isFormatValue&&(t=this.#c(t)),this.textField.value!==t&&(this.textField.value=t)}#c(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new l.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#o(){const t=(0,a.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#h(t.country))}#h(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#p(t){return this.comboBox.items?.find(e=>e.getAttribute("data-id")===t)||void 0}#u(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#d(t){if(!t)return;const e=(0,a.l)(t);if(!e?.country)return;const n=this.#u(e.country);return n?.getAttribute("data-country-code")}#a(t){const e=t.length?r.A.filter(e=>t.includes(e.code)):r.A;this.querySelector("descope-combo-box").innerHTML=e.map(t=>(0,s.$B)(t)).join("")}#r(t){if(!this.comboBox.value){const e=this.#u(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#l(){if(!this.value)return;const t=this.#d(this.value);if(t&&this.selectedCountryCode!==t){const e=this.#u(t);e&&(this.comboBox.selectedItem=e)}}#s(t,e){const n=b[t]||t;"label-type"===t?this.#b(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#b(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach(t=>t.removeAttribute("label"))}}},92132:(t,e,n)=>{n.r(e),n(27092),n(21374);var i=n(84015);customElements.define(i.T,i.A)},98136:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>i.NF,componentName:()=>i.TQ}),n(92132),n(27092),n(21374);var i=n(81808);customElements.define(i.TQ,i.NF)}}]);
|
|
1
|
+
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878,9894],{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)},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`},79275:(t,e,n)=>{n.d(e,{T:()=>l,w:()=>p});var i=n(79365),o=n(6424),r=n(9696),a=n(97810),s=n(73551);const l=(0,a.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],p=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout(()=>{Object.assign(this.icon,e)},5e3)})}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}})((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${(0,s.$J)("vaadin-text-field")}\n\t\t\t${(0,s.cy)(p.cssVarList)}\n\t\t\t${(0,s.LJ)("vaadin-text-field",p.cssVarList)}\n ${(0,s.Kl)()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},81808:(t,e,n)=>{n.d(e,{NF:()=>I,TQ:()=>h});var i=n(84015),o=n(97810),r=n(9696),a=n(79365),s=n(79275),l=n(86365),d=n(51680),p=n(73551);const u=s.w.cssVarList,c=l.C.cssVarList,h=(0,o.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:x,phoneInput:v,separator:C,errorMessage:w,helperText:A}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},I=(0,r.Zz)((0,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,w,A,{...x,property:l.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...v,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...C,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...C,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...C,property:"border-left-color"}],inputBorderRadius:[{...g,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...x,property:c.hostWidth},countryCodeDropdownWidth:{...x,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...v,property:"width"},horizontalPadding:[{...v,property:"padding-left"},{...v,property:"padding-right"},{...x,property:"padding-left"},{...x,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...y,property:"-webkit-text-fill-color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...w,property:"color"},errorMessageIcon:{...w,property:"background-image"},errorMessageIconSize:{...w,property:"background-size"},errorMessageIconPadding:{...w,property:"padding-inline-start"},errorMessageIconRepeat:{...w,property:"background-repeat"},errorMessageIconPosition:{...w,property:"background-position"},errorMessageFontSize:{...w,property:"font-size"},inputValueTextColor:[{...v,property:u.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...v,property:u.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},valueInputHeight:[{...x,property:c.valueInputHeight}],valueInputMarginBottom:[{...v,property:u.valueInputMarginBottom}],marginInlineStart:[{...v,property:u.marginInlineStart},{...x,property:c.marginInlineStart}]}}),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<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input","format-value","strict-validation"]})}get countryCodeItems(){return this.inputElement?.countryCodeValue}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}get countryCodeInputData(){return this.inputElement?.countryCodeInputData}get countryCodes(){return Array.from(this.inputElement.countryCodeInputData).map(t=>t.getAttribute("data-country-code"))}})((0,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:()=>g,T:()=>d});var i=n(3393),o=n(97810),r=n(51680),a=n(49157),s=n(10473),l=n(23530);const d=(0,o.xE)("phone-field-internal"),p=["disabled","size","bordered","readonly"],u=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength","autocomplete","name"],h=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},y=[].concat(p,u,c,h),m=(0,i.y)({componentName:d,baseSelector:"div"}),g=class extends m{static get observedAttributes(){return[].concat(m.observedAttributes||[],y)}#t;constructor(){super(),this.innerHTML=`\n <div class="wrapper">\n <descope-combo-box\n item-label-path="data-name"\n item-value-path="data-id"\n >\n ${r.A.map(t=>(0,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,o.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,o.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){return this.comboBox.value&&this.textField.value?this.allowAlphanumericInput?`${this.comboBox.value}-${this.textField.value}`:`${this.comboBox.value}-${this.textField.value.replace(/\D+/g,"")}`:""}set value(t){const e=t.replace(new RegExp(`^\\+?${this.comboBox.value.replace("+","")}-?`),"");this.isFormatValue?this.textField.value=this.#e(e):this.textField.value=e}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,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.#i())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.#o(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.#r(t,n),"restrict-countries"===t&&this.#a(this.restrictCountries)}}#n(){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()}#e(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new l.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#i(){const t=(0,s.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#s(t.country))}#s(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#l(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#a(t){const e=t.length?r.A.filter(e=>t.includes(e.code)):r.A;this.querySelector("descope-combo-box").innerHTML=e.map(t=>(0,a.$B)(t)).join("")}#o(t){if(!this.comboBox.value){const e=this.#l(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#r(t,e){const n=b[t]||t;"label-type"===t?this.#d(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#d(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)},98136:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>i.NF,componentName:()=>i.TQ}),n(92132),n(27092),n(21374);var i=n(81808);customElements.define(i.TQ,i.NF)}}]);
|
|
2
2
|
//# sourceMappingURL=phone-fields-descope-phone-field-index-js.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"phone-fields-descope-phone-field-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.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/index.js"],"sourcesContent":["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 { 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 {\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 { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n createProxy,\n createStyleMixin,\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin,\n} from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport CountryCodes from '../CountryCodes';\nimport {\n resetInputCursor,\n resetInputLabelPosition,\n resetInputFieldDefaultWidth,\n resetInputFieldInvalidBackgroundColor,\n useHostExternalPadding,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\nconst comboVars = ComboBoxClass.cssVarList;\n\nexport const componentName = getComponentName('phone-field');\n\nconst customMixin = (superclass) =>\n class PhoneFieldMixinClass extends superclass {\n static get CountryCodes() {\n return CountryCodes;\n }\n\n init() {\n super.init?.();\n\n const template = document.createElement('template');\n\n template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t></${descopeInternalComponentName}>\n \t\t`;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n forwardAttrs(this.shadowRoot.host, this.inputElement, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'minlength',\n 'maxlength',\n 'default-code',\n 'country-input-placeholder',\n 'phone-input-placeholder',\n 'disabled',\n 'restrict-countries',\n 'country-input-label',\n 'readonly',\n 'label',\n 'label-type',\n 'allow-alphanumeric-input',\n 'format-value',\n 'strict-validation',\n ],\n });\n }\n\n get countryCodeItems() {\n return this.inputElement?.countryCodeValue;\n }\n\n get phoneNumberInputEle() {\n return this.inputElement?.phoneNumberInputEle;\n }\n\n get countryCodeInputData() {\n return this.inputElement?.countryCodeInputData;\n }\n\n get countryCodes() {\n return Array.from(this.inputElement.countryCodeInputData).map((ele) =>\n ele.getAttribute('data-country-code')\n );\n }\n };\n\nconst {\n host,\n label,\n requiredIndicator,\n inputField,\n internalAfter,\n countryCodeInput,\n phoneInput,\n separator,\n errorMessage,\n helperText,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n inputField: { selector: '::part(input-field)' },\n internalAfter: { selector: 'descope-phone-field-internal::after' },\n phoneInput: { selector: () => 'descope-text-field' },\n countryCodeInput: { selector: () => 'descope-combo-box' },\n separator: { selector: 'descope-phone-field-internal .separator' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: [\n host,\n inputField,\n {\n selector: TextFieldClass.componentName,\n property: TextFieldClass.cssVarList.fontSize,\n },\n {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.fontSize,\n },\n ],\n fontFamily: [\n label,\n errorMessage,\n helperText,\n {\n ...countryCodeInput,\n property: ComboBoxClass.cssVarList.overlay.fontFamily,\n },\n ],\n hostWidth: [\n { ...host, property: 'width' },\n { ...phoneInput, property: 'width' },\n { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },\n ],\n hostDirection: { ...host, property: 'direction' },\n\n inputBorderStyle: [\n { ...internalAfter, property: 'border-style' },\n { ...separator, property: 'border-left-style' },\n ],\n inputBorderWidth: [\n { ...internalAfter, property: 'border-width' },\n { ...separator, property: 'border-left-width' },\n ],\n inputBorderColor: [\n { ...internalAfter, property: 'border-color' },\n { ...separator, property: 'border-left-color' },\n ],\n inputBorderRadius: [\n { ...inputField, property: 'border-radius' },\n { ...internalAfter, property: 'border-radius' },\n ],\n\n countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },\n countryCodeDropdownWidth: {\n ...countryCodeInput,\n property: '--vaadin-combo-box-overlay-width',\n },\n phoneInputWidth: { ...phoneInput, property: 'width' },\n\n horizontalPadding: [\n { ...phoneInput, property: 'padding-left' },\n { ...phoneInput, property: 'padding-right' },\n { ...countryCodeInput, property: 'padding-left' },\n { ...countryCodeInput, property: 'padding-right' },\n ],\n\n labelTextColor: [\n { ...label, property: 'color' },\n { ...label, property: '-webkit-text-fill-color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n errorMessageFontSize: { ...errorMessage, property: 'font-size' },\n\n inputValueTextColor: [\n { ...phoneInput, property: textVars.inputValueTextColor },\n { ...countryCodeInput, property: comboVars.inputValueTextColor },\n ],\n\n inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n overlayItemBackgroundColor: {\n selector: 'descope-combo-box',\n property: comboVars.overlayItemBackgroundColor,\n },\n\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],\n valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],\n marginInlineStart: [\n { ...phoneInput, property: textVars.marginInlineStart },\n { ...countryCodeInput, property: comboVars.marginInlineStart },\n ],\n },\n }),\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n customMixin\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${useHostExternalPadding(PhoneFieldClass.cssVarList)}\n\t\t\t${resetInputCursor('vaadin-text-field')}\n\t\t\t${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n\t\t\t${resetInputFieldDefaultWidth()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n margin-left: 0;\n margin-right: 0;\n }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n direction: ltr;\n position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-width: 5.75em;\n\t\t\t\t${comboVars.inputOutlineWidth}: 0;\n\t\t\t\t${comboVars.inputOutlineOffset}: 0;\n\t\t\t\t${comboVars.inputBorderWidth}: 0;\n\t\t\t\t${comboVars.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${textVars.inputOutlineWidth}: 0;\n\t\t\t\t${textVars.inputOutlineOffset}: 0;\n\t\t\t\t${textVars.inputBorderWidth}: 0;\n\t\t\t\t${textVars.inputBorderRadius}: 0;\n }\n\n :host([label-type=\"floating\"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n\nexport default PhoneFieldClass;\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem, parsePhoneNumber } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') || [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) || 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) || [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value || !this.textField.value) {\n return '';\n }\n\n const [countryCode, phoneNumber] = parsePhoneNumber(\n `${this.comboBox.value}-${this.textField.value}`\n );\n\n return `${countryCode || this.comboBox.value}-${phoneNumber || this.textField.value}`;\n }\n\n set value(val) {\n const [countryCode, nationalNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setNationalNumber(nationalNumber);\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode || !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] || attrName;\n\n if (commonAttrs.includes(attrName)) {\n 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 // verify country code item against phone number pattern and replace if needed and country is allowed\n // (e.g. +1 can be US or CA, depending on the pattern)\n this.addEventListener('input', this.#handleSameCountryCodes.bind(this));\n }\n\n #setCountryCode(val) {\n if (!val || val === this.selectedCountryCode) return;\n\n let countryCodeItem = undefined;\n\n if (this.value) {\n // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)\n const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);\n countryCodeItem = this.#getCountryByCodeId(code);\n }\n\n // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)\n // then use the first option with same dial code (e.g. in that case - `US` for +1)\n if (!countryCodeItem) {\n countryCodeItem = this.#getCountryByDialCode(val);\n }\n\n // set country code item; in it doesn't exist in list - set `undefined`\n this.comboBox.selectedItem = countryCodeItem;\n }\n\n #setNationalNumber(val) {\n if (this.isFormatValue) {\n val = this.#formatNationalNumber(val);\n }\n\n if (this.textField.value !== val) {\n this.textField.value = val;\n }\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n\n return formattedVal || nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by dial code `data-id` (e.g. `+1`)\n #getCountryByDialCode(dialCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) || undefined;\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #getCountryCodeByPhoneNumber(val) {\n if (!val) return undefined;\n const parsed = parsePhoneNumberFromString(val);\n if (!parsed?.country) return undefined;\n const foundCountryItem = this.#getCountryByCodeId(parsed.country);\n return foundCountryItem?.getAttribute('data-country-code');\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleSameCountryCodes() {\n if (!this.value) return;\n\n const country = this.#getCountryCodeByPhoneNumber(this.value);\n\n if (!country) return;\n\n // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)\n if (this.selectedCountryCode !== country) {\n const foundCountryItem = this.#getCountryByCodeId(country);\n // if found country is defined in country list then set it, otherwise - clear phone number\n if (foundCountryItem) {\n this.comboBox.selectedItem = foundCountryItem;\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] || attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') || ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') || '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') || ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import './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":["customElements","define","comboBoxItem","code","dialCode","name","country","toLowerCase","getCountryFlag","parsePhoneNumber","val","value","countryCode","phoneNumber","parsed","countryCallingCode","nationalNumber","phone","split","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","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","textVars","comboVars","C","host","label","requiredIndicator","inputField","internalAfter","countryCodeInput","phoneInput","separator","errorMessage","helperText","selector","PhoneFieldClass","fontSize","property","fontFamily","overlay","hostWidth","hostDirection","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","countryCodeInputWidth","countryCodeDropdownWidth","phoneInputWidth","horizontalPadding","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","overlayItemBackgroundColor","inputOutlineStyle","inputOutlineColor","valueInputHeight","valueInputMarginBottom","marginInlineStart","CountryCodes","template","innerHTML","content","cloneNode","inputElement","shadowRoot","querySelector","includeAttrs","countryCodeItems","countryCodeValue","phoneNumberInputEle","countryCodeInputData","countryCodes","Array","from","map","ele","getAttribute","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","item","join","comboBox","textField","inputs","customValueTransformFn","items","allowAlphanumericInput","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","length","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","bind","countryCodeItem","reset","isValid","find","c","undefined","foundCountryItem"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"phone-fields-descope-phone-field-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.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/index.js"],"sourcesContent":["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 { 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 {\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 { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n createProxy,\n createStyleMixin,\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin,\n} from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport CountryCodes from '../CountryCodes';\nimport {\n resetInputCursor,\n resetInputLabelPosition,\n resetInputFieldDefaultWidth,\n resetInputFieldInvalidBackgroundColor,\n useHostExternalPadding,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\nconst comboVars = ComboBoxClass.cssVarList;\n\nexport const componentName = getComponentName('phone-field');\n\nconst customMixin = (superclass) =>\n class PhoneFieldMixinClass extends superclass {\n static get CountryCodes() {\n return CountryCodes;\n }\n\n init() {\n super.init?.();\n\n const template = document.createElement('template');\n\n template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t></${descopeInternalComponentName}>\n \t\t`;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n forwardAttrs(this.shadowRoot.host, this.inputElement, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'minlength',\n 'maxlength',\n 'default-code',\n 'country-input-placeholder',\n 'phone-input-placeholder',\n 'disabled',\n 'restrict-countries',\n 'country-input-label',\n 'readonly',\n 'label',\n 'label-type',\n 'allow-alphanumeric-input',\n 'format-value',\n 'strict-validation',\n ],\n });\n }\n\n get countryCodeItems() {\n return this.inputElement?.countryCodeValue;\n }\n\n get phoneNumberInputEle() {\n return this.inputElement?.phoneNumberInputEle;\n }\n\n get countryCodeInputData() {\n return this.inputElement?.countryCodeInputData;\n }\n\n get countryCodes() {\n return Array.from(this.inputElement.countryCodeInputData).map((ele) =>\n ele.getAttribute('data-country-code')\n );\n }\n };\n\nconst {\n host,\n label,\n requiredIndicator,\n inputField,\n internalAfter,\n countryCodeInput,\n phoneInput,\n separator,\n errorMessage,\n helperText,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n inputField: { selector: '::part(input-field)' },\n internalAfter: { selector: 'descope-phone-field-internal::after' },\n phoneInput: { selector: () => 'descope-text-field' },\n countryCodeInput: { selector: () => 'descope-combo-box' },\n separator: { selector: 'descope-phone-field-internal .separator' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: [\n host,\n inputField,\n {\n selector: TextFieldClass.componentName,\n property: TextFieldClass.cssVarList.fontSize,\n },\n {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.fontSize,\n },\n ],\n fontFamily: [\n label,\n errorMessage,\n helperText,\n {\n ...countryCodeInput,\n property: ComboBoxClass.cssVarList.overlay.fontFamily,\n },\n ],\n hostWidth: [\n { ...host, property: 'width' },\n { ...phoneInput, property: 'width' },\n { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },\n ],\n hostDirection: { ...host, property: 'direction' },\n\n inputBorderStyle: [\n { ...internalAfter, property: 'border-style' },\n { ...separator, property: 'border-left-style' },\n ],\n inputBorderWidth: [\n { ...internalAfter, property: 'border-width' },\n { ...separator, property: 'border-left-width' },\n ],\n inputBorderColor: [\n { ...internalAfter, property: 'border-color' },\n { ...separator, property: 'border-left-color' },\n ],\n inputBorderRadius: [\n { ...inputField, property: 'border-radius' },\n { ...internalAfter, property: 'border-radius' },\n ],\n\n countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },\n countryCodeDropdownWidth: {\n ...countryCodeInput,\n property: '--vaadin-combo-box-overlay-width',\n },\n phoneInputWidth: { ...phoneInput, property: 'width' },\n\n horizontalPadding: [\n { ...phoneInput, property: 'padding-left' },\n { ...phoneInput, property: 'padding-right' },\n { ...countryCodeInput, property: 'padding-left' },\n { ...countryCodeInput, property: 'padding-right' },\n ],\n\n labelTextColor: [\n { ...label, property: 'color' },\n { ...label, property: '-webkit-text-fill-color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n errorMessageFontSize: { ...errorMessage, property: 'font-size' },\n\n inputValueTextColor: [\n { ...phoneInput, property: textVars.inputValueTextColor },\n { ...countryCodeInput, property: comboVars.inputValueTextColor },\n ],\n\n inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n overlayItemBackgroundColor: {\n selector: 'descope-combo-box',\n property: comboVars.overlayItemBackgroundColor,\n },\n\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],\n valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],\n marginInlineStart: [\n { ...phoneInput, property: textVars.marginInlineStart },\n { ...countryCodeInput, property: comboVars.marginInlineStart },\n ],\n },\n }),\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n customMixin\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${useHostExternalPadding(PhoneFieldClass.cssVarList)}\n\t\t\t${resetInputCursor('vaadin-text-field')}\n\t\t\t${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n\t\t\t${resetInputFieldDefaultWidth()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n margin-left: 0;\n margin-right: 0;\n }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n direction: ltr;\n position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-width: 5.75em;\n\t\t\t\t${comboVars.inputOutlineWidth}: 0;\n\t\t\t\t${comboVars.inputOutlineOffset}: 0;\n\t\t\t\t${comboVars.inputBorderWidth}: 0;\n\t\t\t\t${comboVars.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${textVars.inputOutlineWidth}: 0;\n\t\t\t\t${textVars.inputOutlineOffset}: 0;\n\t\t\t\t${textVars.inputBorderWidth}: 0;\n\t\t\t\t${textVars.inputBorderRadius}: 0;\n }\n\n :host([label-type=\"floating\"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n\nexport default PhoneFieldClass;\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') || [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) || 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) || [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value || !this.textField.value) {\n return '';\n }\n\n if (this.allowAlphanumericInput) {\n return `${this.comboBox.value}-${this.textField.value}`;\n }\n\n return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n }\n\n set value(val) {\n const nationalNumber = val.replace(\n new RegExp(`^\\\\+?${this.comboBox.value.replace('+', '')}-?`),\n ''\n );\n\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) {\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 #getCountryByCodeId(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.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #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 './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":["customElements","define","comboBoxItem","code","dialCode","name","country","toLowerCase","getCountryFlag","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","textVars","comboVars","C","host","label","requiredIndicator","inputField","internalAfter","countryCodeInput","phoneInput","separator","errorMessage","helperText","selector","PhoneFieldClass","fontSize","property","fontFamily","overlay","hostWidth","hostDirection","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","countryCodeInputWidth","countryCodeDropdownWidth","phoneInputWidth","horizontalPadding","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","overlayItemBackgroundColor","inputOutlineStyle","inputOutlineColor","valueInputHeight","valueInputMarginBottom","marginInlineStart","CountryCodes","template","innerHTML","content","cloneNode","inputElement","shadowRoot","querySelector","includeAttrs","countryCodeItems","countryCodeValue","phoneNumberInputEle","countryCodeInputData","countryCodes","Array","from","map","ele","getAttribute","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","item","join","comboBox","textField","inputs","customValueTransformFn","val","split","items","allowAlphanumericInput","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","replace","nationalNumber","RegExp","e","isTrusted","getValidity","countryCode","nationalNumer","isEmpty","isValidLength","length","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","reset","parsed","isValid","find","c","countryCodeItem"],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@descope/web-components-ui",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.35",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -50,10 +50,10 @@
|
|
|
50
50
|
"webpack": "^5.79.0",
|
|
51
51
|
"webpack-cli": "^6.0.0",
|
|
52
52
|
"webpack-dev-server": "^5.0.0",
|
|
53
|
-
"rollup-replace-plugin": "2.2.
|
|
54
|
-
"test-drivers": "2.2.
|
|
55
|
-
"webpack-extract-font-loader": "2.2.
|
|
56
|
-
"webpack-replace-plugin": "2.2.
|
|
53
|
+
"rollup-replace-plugin": "2.2.35",
|
|
54
|
+
"test-drivers": "2.2.35",
|
|
55
|
+
"webpack-extract-font-loader": "2.2.35",
|
|
56
|
+
"webpack-replace-plugin": "2.2.35"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
59
|
"@vaadin/checkbox": "24.3.4",
|
|
@@ -77,31 +77,31 @@
|
|
|
77
77
|
"libphonenumber-js": "^1.11.12",
|
|
78
78
|
"lodash.debounce": "4.0.8",
|
|
79
79
|
"lodash.merge": "4.6.2",
|
|
80
|
-
"@descope-ui/common": "2.2.
|
|
81
|
-
"@descope-ui/descope-
|
|
82
|
-
"@descope-ui/descope-
|
|
83
|
-
"@descope-ui/descope-
|
|
84
|
-
"@descope-ui/descope-
|
|
85
|
-
"@descope-ui/descope-
|
|
86
|
-
"@descope-ui/descope-
|
|
87
|
-
"@descope-ui/descope-
|
|
88
|
-
"@descope-ui/descope-
|
|
89
|
-
"@descope-ui/descope-
|
|
90
|
-
"@descope-ui/descope-icon": "2.2.
|
|
91
|
-
"@descope-ui/descope-image": "2.2.
|
|
92
|
-
"@descope-ui/descope-link": "2.2.
|
|
93
|
-
"@descope-ui/descope-list": "2.2.
|
|
94
|
-
"@descope-ui/descope-list-item": "2.2.
|
|
95
|
-
"@descope-ui/descope-outbound-app-button": "2.2.
|
|
96
|
-
"@descope-ui/descope-outbound-apps": "2.2.
|
|
97
|
-
"@descope-ui/descope-password-strength": "2.2.
|
|
98
|
-
"@descope-ui/descope-recovery-codes": "2.2.
|
|
99
|
-
"@descope-ui/descope-text": "2.2.
|
|
100
|
-
"@descope-ui/descope-timer": "2.2.
|
|
101
|
-
"@descope-ui/descope-timer-button": "2.2.
|
|
102
|
-
"@descope-ui/descope-trusted-devices": "2.2.
|
|
103
|
-
"@descope-ui/descope-tooltip": "2.2.
|
|
104
|
-
"@descope-ui/descope-honeypot": "2.2.
|
|
80
|
+
"@descope-ui/common": "2.2.35",
|
|
81
|
+
"@descope-ui/descope-apps-list": "2.2.35",
|
|
82
|
+
"@descope-ui/descope-autocomplete-field": "2.2.35",
|
|
83
|
+
"@descope-ui/descope-avatar": "2.2.35",
|
|
84
|
+
"@descope-ui/descope-badge": "2.2.35",
|
|
85
|
+
"@descope-ui/descope-button": "2.2.35",
|
|
86
|
+
"@descope-ui/descope-collapsible-container": "2.2.35",
|
|
87
|
+
"@descope-ui/descope-combo-box": "2.2.35",
|
|
88
|
+
"@descope-ui/descope-enriched-text": "2.2.35",
|
|
89
|
+
"@descope-ui/descope-address-field": "2.2.35",
|
|
90
|
+
"@descope-ui/descope-icon": "2.2.35",
|
|
91
|
+
"@descope-ui/descope-image": "2.2.35",
|
|
92
|
+
"@descope-ui/descope-link": "2.2.35",
|
|
93
|
+
"@descope-ui/descope-list": "2.2.35",
|
|
94
|
+
"@descope-ui/descope-list-item": "2.2.35",
|
|
95
|
+
"@descope-ui/descope-outbound-app-button": "2.2.35",
|
|
96
|
+
"@descope-ui/descope-outbound-apps": "2.2.35",
|
|
97
|
+
"@descope-ui/descope-password-strength": "2.2.35",
|
|
98
|
+
"@descope-ui/descope-recovery-codes": "2.2.35",
|
|
99
|
+
"@descope-ui/descope-text": "2.2.35",
|
|
100
|
+
"@descope-ui/descope-timer": "2.2.35",
|
|
101
|
+
"@descope-ui/descope-timer-button": "2.2.35",
|
|
102
|
+
"@descope-ui/descope-trusted-devices": "2.2.35",
|
|
103
|
+
"@descope-ui/descope-tooltip": "2.2.35",
|
|
104
|
+
"@descope-ui/descope-honeypot": "2.2.35"
|
|
105
105
|
},
|
|
106
106
|
"overrides": {
|
|
107
107
|
"@vaadin/avatar": "24.3.4",
|