@descope/web-components-ui 1.0.175 → 1.0.177
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +13 -6
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.esm.js +28 -10
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-button-index-js.js +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/descope-button/ButtonClass.js +4 -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
- package/src/index.d.ts +0 -1
- package/src/theme/components/button.js +8 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9662],{5545:(t,n,e)=>{e.r(n),e.d(n,{ButtonClass:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9662],{5545:(t,n,e)=>{e.r(n),e.d(n,{ButtonClass:()=>c}),e(729);var o=e(2061),r=e(4567),i=e(1e3);const a=(0,r.iY)("button"),{host:s,label:l}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let d;const c=(0,o.qC)((0,i.yk)({mappings:{hostWidth:{...s,property:"width"},hostHeight:{property:"height"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},labelTextDecoration:{...l,property:"text-decoration"},labelSpacing:{...l,property:"gap"}}}),(t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}),i.e4,i.Ae)((0,i.DM)({slots:["prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t\t\t${d}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${c.cssVarList.outlineWidth}) + var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${c.cssVarList.hostHeight}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${c.cssVarList.hostWidth}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:a})),{color:p,fontSize:b}=c.cssVarList;d=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${p});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`,customElements.define(a,c)}}]);
|
|
@@ -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
|
@@ -75,7 +75,6 @@ export const ButtonClass = compose(
|
|
|
75
75
|
borderWidth: {},
|
|
76
76
|
|
|
77
77
|
verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
|
|
78
|
-
horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
|
|
79
78
|
|
|
80
79
|
labelTextColor: { property: 'color' },
|
|
81
80
|
labelTextDecoration: { ...label, property: 'text-decoration' },
|
|
@@ -100,6 +99,10 @@ export const ButtonClass = compose(
|
|
|
100
99
|
vaadin-button {
|
|
101
100
|
height: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
|
|
102
101
|
}
|
|
102
|
+
[square="true"]:not([full-width="true"]) {
|
|
103
|
+
width: calc(var(${ButtonClass.cssVarList.hostWidth}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
|
|
104
|
+
padding: 0;
|
|
105
|
+
}
|
|
103
106
|
`,
|
|
104
107
|
excludeAttrsSync: ['tabindex'],
|
|
105
108
|
componentName,
|
|
@@ -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
|
}
|
package/src/index.d.ts
CHANGED
|
@@ -15,9 +15,6 @@ const mode = {
|
|
|
15
15
|
|
|
16
16
|
const [helperTheme, helperRefs, helperVars] = createHelperVars({ mode }, componentName);
|
|
17
17
|
|
|
18
|
-
const verticalPaddingRatio = 3;
|
|
19
|
-
const horizontalPaddingRatio = 2;
|
|
20
|
-
|
|
21
18
|
const button = {
|
|
22
19
|
...helperTheme,
|
|
23
20
|
|
|
@@ -25,6 +22,7 @@ const button = {
|
|
|
25
22
|
|
|
26
23
|
[compVars.cursor]: 'pointer',
|
|
27
24
|
[compVars.hostHeight]: '3em',
|
|
25
|
+
[compVars.hostWidth]: 'auto',
|
|
28
26
|
|
|
29
27
|
[compVars.borderRadius]: globalRefs.radius.sm,
|
|
30
28
|
[compVars.borderWidth]: globalRefs.border.xs,
|
|
@@ -33,8 +31,7 @@ const button = {
|
|
|
33
31
|
|
|
34
32
|
[compVars.labelSpacing]: '0.25em',
|
|
35
33
|
|
|
36
|
-
[compVars.verticalPadding]:
|
|
37
|
-
[compVars.horizontalPadding]: `calc(var(${compVars.fontSize}) / ${horizontalPaddingRatio})`,
|
|
34
|
+
[compVars.verticalPadding]: '1em',
|
|
38
35
|
|
|
39
36
|
[compVars.outlineWidth]: globals.border.sm,
|
|
40
37
|
[compVars.outlineOffset]: '0px', // keep `px` unit for external calc
|
|
@@ -48,6 +45,12 @@ const button = {
|
|
|
48
45
|
lg: { [compVars.fontSize]: '18px' },
|
|
49
46
|
},
|
|
50
47
|
|
|
48
|
+
_square: {
|
|
49
|
+
[compVars.hostHeight]: '3em',
|
|
50
|
+
[compVars.hostWidth]: '3em',
|
|
51
|
+
[compVars.verticalPadding]: '0',
|
|
52
|
+
},
|
|
53
|
+
|
|
51
54
|
_fullWidth: {
|
|
52
55
|
[compVars.hostWidth]: '100%',
|
|
53
56
|
},
|