@descope/web-components-ui 1.0.175 → 1.0.176
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +16 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js +1 -0
- package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +13 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4981],{2565:(e,t,n)=>{n.d(t,{f:()=>s,Z:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4981],{2565:(e,t,n)=>{n.d(t,{f:()=>s,Z:()=>o});var i=n(3878),u=n(4567),r=n(7262);const s=(0,u.iY)("phone-field-internal-input-box"),a=["disabled","size","bordered","invalid","readonly","phone-input-placeholder"],h={"phone-input-placeholder":"placeholder"},l=(0,i.P)({componentName:s,baseSelector:"div"}),o=class extends l{static get observedAttributes(){return[].concat(l.observedAttributes||[],a)}constructor(){super(),this.innerHTML='\n <div>\n <descope-text-field tabindex="1"></descope-text-field>\n </div>\n ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return e=this.getAttribute("default-code"),r.Z.find((t=>t.code===e))?.dialCode;var e}get hasDefaultCode(){return!!this.getAttribute("default-code")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const e=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(e,"")}`}return this.phoneNumberInput.value}set value(e){this.phoneNumberInput.value=e}get phoneNumberValue(){return this.phoneNumberInput.value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const e=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:e.length<this.minLength?{tooShort:!0}:e.length>this.maxLength?{tooLong:!0}:/^\+\d{1,4}-(?:\d-?){1,15}$/.test(this.value)?{}:{patternMismatch:!0}}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(e){return this.countryCodeInput.items?.find((t=>t.getAttribute("data-dial-code")===e))}initInputs(){this.phoneNumberInput.addEventListener("input",(e=>{1===e.target.value.length&&"-"===e.target.value&&(e.target.value=""),e.target.value=e.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");const t=/^[+\d-]+$/,n=e.target.value.split("").filter((e=>t.test(e))).join("");e.target.value=n})),this.handleFocusEventsDispatching([this.phoneNumberInput]),this.handleInputEventDispatching()}attributeChangedCallback(e,t,n){if(super.attributeChangedCallback(e,t,n),t!==n&&a.includes(e)){const t=h[e]||e;this.phoneNumberInput.setAttribute(t,n)}}}},3067:(e,t,n)=>{n.r(t),n(9357);var i=n(2565);customElements.define(i.f,i.Z)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[5119],{9423:(e,t,n)=>{n.r(t),n.d(t,{PhoneFieldInputBoxClass:()=>g}),n(3067),n(1294),n(9357);var i=n(2565),o=n(4567),r=n(2061),d=n(1e3),l=n(6417),p=n(7262),a=n(4201);const s=l.z.cssVarList,u=(0,o.iY)("phone-input-box-field"),{host:h,label:c,requiredIndicator:f,inputField:x,phoneInput:b,errorMessage:y,helperText:m}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,r.qC)((0,d.yk)({mappings:{fontSize:[h,x,{selector:l.z.componentName,property:l.z.cssVarList.fontSize}],fontFamily:[c,y,m],hostWidth:{...h,property:"width"},hostMinWidth:{...h,property:"min-width"},inputBorderStyle:{...x,property:"border-style"},inputBorderWidth:{...x,property:"border-width"},inputBorderColor:{...x,property:"border-color"},inputBorderRadius:{...x,property:"border-radius"},labelTextColor:[{...c,property:"color"},{...f,property:"color"}],labelRequiredIndicator:{...f,property:"content"},errorMessageTextColor:{...y,property:"color"},inputValueTextColor:{...b,property:s.inputValueTextColor},inputPlaceholderTextColor:{...b,property:s.inputPlaceholderColor},inputOutlineStyle:{...x,property:"outline-style"},inputOutlineColor:{...x,property:"outline-color"},inputOutlineWidth:{...x,property:"outline-width"},inputOutlineOffset:{...x,property:"outline-offset"}}}),d.e4,d.dj,(e=>class extends e{static get CountryCodes(){return p.Z}init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${i.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.f}>\n `,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.f),(0,o.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","disabled"]})}}))((0,d.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n :host {\n display: inline-flex;\n max-width: 100%;\n box-sizing: border-box;\n }\n ${(0,a.bi)(g.cssVarList)}\n ${(0,a.Pd)("vaadin-text-field")}\n ${(0,a.B)("vaadin-text-field")}\n ${(0,a.DY)()}\n\n vaadin-text-field {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n padding: 0;\n }\n vaadin-text-field[focus-ring]::part(input-field) {\n box-shadow: none;\n }\n vaadin-text-field::before {\n height: 0;\n }\n vaadin-text-field::part(input-field) {\n padding: 0;\n min-height: 0;\n background: transparent;\n overflow: hidden;\n -webkit-mask-image: none;\n }\n descope-phone-field-internal-input-box {\n -webkit-mask-image: none;\n padding: 0;\n min-height: 0;\n width: 100%;\n height: 100%;\n }\n descope-phone-field-internal-input-box > div {\n width: 100%;\n height: 100%;\n }\n descope-phone-field-internal-input-box .separator {\n flex: 0;\n border: none;\n }\n descope-text-field {\n flex-grow: 1;\n width: 100%;\n ${s.inputOutlineWidth}: 0;\n ${s.inputOutlineOffset}: 0;\n ${s.inputBorderWidth}: 0;\n ${s.inputBorderRadius}: 0;\n }\n vaadin-text-field[readonly] > input:placeholder-shown {\n opacity: 1;\n }\n vaadin-text-field::part(input-field)::after {\n border: none;\n }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}));customElements.define(u,g)}}]);
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[5119],{9423:(e,t,n)=>{n.r(t),n.d(t,{PhoneFieldInputBoxClass:()=>g}),n(3067),n(1294),n(9357);var i=n(2565),o=n(4567),r=n(2061),d=n(1e3),l=n(6417),p=n(7262),a=n(4201);const s=l.z.cssVarList,u=(0,o.iY)("phone-input-box-field"),{host:h,label:c,requiredIndicator:f,inputField:x,phoneInput:b,errorMessage:y,helperText:m}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,r.qC)((0,d.yk)({mappings:{fontSize:[h,x,{selector:l.z.componentName,property:l.z.cssVarList.fontSize}],fontFamily:[c,y,m],hostWidth:{...h,property:"width"},hostMinWidth:{...h,property:"min-width"},inputBorderStyle:{...x,property:"border-style"},inputBorderWidth:{...x,property:"border-width"},inputBorderColor:{...x,property:"border-color"},inputBorderRadius:{...x,property:"border-radius"},labelTextColor:[{...c,property:"color"},{...f,property:"color"}],labelRequiredIndicator:{...f,property:"content"},errorMessageTextColor:{...y,property:"color"},inputValueTextColor:{...b,property:s.inputValueTextColor},inputPlaceholderTextColor:{...b,property:s.inputPlaceholderColor},inputOutlineStyle:{...x,property:"outline-style"},inputOutlineColor:{...x,property:"outline-color"},inputOutlineWidth:{...x,property:"outline-width"},inputOutlineOffset:{...x,property:"outline-offset"}}}),d.e4,d.dj,(e=>class extends e{static get CountryCodes(){return p.Z}init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${i.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.f}>\n `,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.f),(0,o.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","disabled","phone-input-placeholder"]})}}))((0,d.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n :host {\n display: inline-flex;\n max-width: 100%;\n box-sizing: border-box;\n }\n ${(0,a.bi)(g.cssVarList)}\n ${(0,a.Pd)("vaadin-text-field")}\n ${(0,a.B)("vaadin-text-field")}\n ${(0,a.DY)()}\n\n vaadin-text-field {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n padding: 0;\n }\n vaadin-text-field[focus-ring]::part(input-field) {\n box-shadow: none;\n }\n vaadin-text-field::before {\n height: 0;\n }\n vaadin-text-field::part(input-field) {\n padding: 0;\n min-height: 0;\n background: transparent;\n overflow: hidden;\n -webkit-mask-image: none;\n }\n descope-phone-field-internal-input-box {\n -webkit-mask-image: none;\n padding: 0;\n min-height: 0;\n width: 100%;\n height: 100%;\n }\n descope-phone-field-internal-input-box > div {\n width: 100%;\n height: 100%;\n }\n descope-phone-field-internal-input-box .separator {\n flex: 0;\n border: none;\n }\n descope-text-field {\n flex-grow: 1;\n width: 100%;\n ${s.inputOutlineWidth}: 0;\n ${s.inputOutlineOffset}: 0;\n ${s.inputBorderWidth}: 0;\n ${s.inputBorderRadius}: 0;\n }\n vaadin-text-field[readonly] > input:placeholder-shown {\n opacity: 1;\n }\n vaadin-text-field::part(input-field)::after {\n border: none;\n }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}));customElements.define(u,g)}}]);
|
package/package.json
CHANGED
|
@@ -4,7 +4,17 @@ import { getCountryByCodeId } from '../../helpers';
|
|
|
4
4
|
|
|
5
5
|
export const componentName = getComponentName('phone-field-internal-input-box');
|
|
6
6
|
|
|
7
|
-
const observedAttributes = [
|
|
7
|
+
const observedAttributes = [
|
|
8
|
+
'disabled',
|
|
9
|
+
'size',
|
|
10
|
+
'bordered',
|
|
11
|
+
'invalid',
|
|
12
|
+
'readonly',
|
|
13
|
+
'phone-input-placeholder',
|
|
14
|
+
];
|
|
15
|
+
const mapAttrs = {
|
|
16
|
+
'phone-input-placeholder': 'placeholder',
|
|
17
|
+
};
|
|
8
18
|
|
|
9
19
|
const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
|
|
10
20
|
|
|
@@ -139,7 +149,8 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
|
139
149
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
140
150
|
|
|
141
151
|
if (oldValue !== newValue && observedAttributes.includes(attrName)) {
|
|
142
|
-
|
|
152
|
+
const attr = mapAttrs[attrName] || attrName;
|
|
153
|
+
this.phoneNumberInput.setAttribute(attr, newValue);
|
|
143
154
|
}
|
|
144
155
|
}
|
|
145
156
|
}
|