@descope/web-components-ui 1.0.198 → 1.0.199

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

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9288],{2246:(t,e,n)=>{n.d(e,{f:()=>r,Z:()=>m});var i=n(3878),s=n(4567),u=n(7262);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=(0,s.iY)("phone-field-internal"),d=["disabled","size","bordered","invalid","readonly"],a=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength"],p={"country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},l=[].concat(d,a,c),h=(0,i.P)({componentName:r,baseSelector:"div"}),m=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],l)}constructor(){super(),this.innerHTML=`\n    <div>\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${u.Z.map((t=>o(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t.split(" ");return e}}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e="",n=""]=t.split("-"),i=this.getCountryByDialCode(e);i&&(this.countryCodeInput.selectedItem=i),this.phoneNumberInput.value=n}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,n=!t||!e,i=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&n?{valueMissing:!0}:i?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[0].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){return this.getAttribute("restrict-countries")?.split(",")||[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(t){const e=t.length?u.Z.filter((e=>t.includes(e.code))):u.Z;this.querySelector("descope-combo-box").innerHTML=e.map((t=>o(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.handleDefaultCountryCode(n);else if(l.includes(t)){const e=p[t]||t;d.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):a.includes(t)?this.countryCodeInput.setAttribute(e,n):c.includes(t)&&this.phoneNumberInput.setAttribute(e,n)}"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},9240:(t,e,n)=>{n.r(e),n(1294),n(9357);var i=n(2246);customElements.define(i.f,i.Z)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9288],{2246:(t,e,n)=>{n.d(e,{f:()=>r,Z:()=>m});var i=n(3878),s=n(4567),u=n(7262);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=(0,s.iY)("phone-field-internal"),d=["disabled","size","bordered","invalid","readonly"],a=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength"],p={"country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},l=[].concat(d,a,c),h=(0,i.P)({componentName:r,baseSelector:"div"}),m=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],l)}constructor(){super(),this.innerHTML=`\n    <div>\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${u.Z.map((t=>o(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t.split(" ");return e}}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e="",n=""]=t.split("-"),i=this.getCountryByDialCode(e);i&&(this.countryCodeInput.selectedItem=i),this.phoneNumberInput.value=n}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,n=!t||!e,i=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&n?{valueMissing:!0}:i?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){return this.getAttribute("restrict-countries")?.split(",")||[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(t){const e=t.length?u.Z.filter((e=>t.includes(e.code))):u.Z;this.querySelector("descope-combo-box").innerHTML=e.map((t=>o(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.handleDefaultCountryCode(n);else if(l.includes(t)){const e=p[t]||t;d.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):a.includes(t)?this.countryCodeInput.setAttribute(e,n):c.includes(t)&&this.phoneNumberInput.setAttribute(e,n)}"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},9240:(t,e,n)=>{n.r(e),n(1294),n(9357);var i=n(2246);customElements.define(i.f,i.Z)}}]);

package/package.json

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

package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -99,7 +99,7 @@ class PhoneFieldInternal extends BaseInputClass {
   init() {
     this.addEventListener('focus', (e) => {
       // we want to ignore focus events we are dispatching
-      if (e.isTrusted) this.inputs[0].focus();
+      if (e.isTrusted) this.inputs[1].focus();
     });
 
     super.init?.();