@descope/web-components-ui 1.0.195 → 1.0.197
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +4 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/3585.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/package.json +1 -1
- package/src/baseClasses/createCssVarImageClass.js +2 -2
- package/src/components/phone-fields/descope-phone-field/helpers.js +2 -2
package/dist/umd/3585.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[3585],{3585:(t,e,n)=>{n.d(e,{D:()=>
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[3585],{3585:(t,e,n)=>{n.d(e,{D:()=>i});var s=n(2061),o=n(1e3),a=n(3874);const i=({componentName:t,varName:e,fallbackVarName:n})=>{let i;class c extends((0,a.s)({componentName:t,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t\t<style>\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\t\t\t\t:host([draggable="true"]) > div {\n\t\t\t\t\tpointer-events: none\n\t\t\t\t}\t\t\n\t\t\t\t:host > div {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\tmax-height: 100%;\n\t\t\t\t\tobject-fit: contain;\n\t\t\t\t\tmargin: auto;\n\t\t\t\t\t${i}\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div></div>\n\t\t\t`}}const r=(0,s.qC)((0,o.yk)({mappings:{height:{selector:()=>":host > div"},width:{selector:()=>":host > div"},[e]:{property:"content"},[n]:{property:"content"}}}),o.e4,o.Ae)(c);return i=`content: var(${r.cssVarList[e]}, var(${r.cssVarList[n]}));`,r}}}]);
|
@@ -1 +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://
|
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)}}]);
|
package/package.json
CHANGED
@@ -37,8 +37,8 @@ export const createCssVarImageClass = ({ componentName, varName, fallbackVarName
|
|
37
37
|
const CssVarImageClass = compose(
|
38
38
|
createStyleMixin({
|
39
39
|
mappings: {
|
40
|
-
height: { selector: () => ':host' },
|
41
|
-
width: { selector: () => ':host' },
|
40
|
+
height: { selector: () => ':host > div' },
|
41
|
+
width: { selector: () => ':host > div' },
|
42
42
|
[varName]: { property: 'content' },
|
43
43
|
[fallbackVarName]: { property: 'content' },
|
44
44
|
},
|
@@ -1,7 +1,7 @@
|
|
1
|
-
// We use JSDelivr in order to fetch the images as image file from this library (svg-country-flags)
|
1
|
+
// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)
|
2
2
|
// This reduces our bundle size, and we use it as a static remote resource.
|
3
3
|
export const getCountryFlag = (code) =>
|
4
|
-
`https://
|
4
|
+
`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;
|
5
5
|
|
6
6
|
export const comboBoxItem = ({ code, dialCode, name: country }) => `
|
7
7
|
<div
|