@descope/web-components-ui 1.0.122 → 1.0.123
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +105 -109
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +105 -109
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/201.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-phone-field/PhoneFieldClass.js +3 -1
- package/src/helpers/themeHelpers/resetHelpers.js +7 -0
- package/src/theme/components/comboBox.js +0 -4
- package/src/theme/components/inputWrapper.js +2 -7
- package/src/theme/components/passcode.js +2 -6
package/dist/umd/201.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[201],{4201:(n,t,i)=>{i.d(t,{DY:()=>u,PH:()=>d,Pd:()=>l,TX:()=>o,jI:()=>r,jl:()=>a,wm:()=>e});const e=(n,t)=>`\n ${o(n)}\n ${l(n)}\n ${r(n)}\n ${a(n)}\n ${p(n,t)}\n\n ${n}::before {\n\t\theight: unset;\n\t}\n\n ${n} > input {\n\t\t-webkit-mask-image: none;\n\t\tmin-height: 0;\n\t}\n\n ${n}::part(input-field)::after {\n\t\topacity: 0 !important;\n }\n`,o=n=>`\n ${n} {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n`,a=n=>`\n ${n}::part(input-field) {\n overflow: hidden;\n padding: 0;\n box-shadow: none;\n }\n`,l=n=>`\n ${n} > label,\n ${n}::part(label),\n ${n}::part(required-indicator) {\n cursor: pointer;\n }\n`,r=(n,t="input")=>`\n ${n}[disabled] > ${t}:placeholder-shown,\n\t${n}[readonly] > ${t}:placeholder-shown {\n\t\topacity: 1;\n\t} \n`,p=(n,t)=>`\n ${n} input:-webkit-autofill,\n ${n} input:-webkit-autofill::first-line,\n ${n} input:-webkit-autofill:hover,\n ${n} input:-webkit-autofill:active,\n ${n} input:-webkit-autofill:focus {\n -webkit-text-fill-color: var(${t.inputValueTextColor});\n box-shadow: 0 0 0 var(${t.inputHeight}) var(${t.inputBackgroundColor}) inset;\n } \n`,u=()=>"\n :host {\n --vaadin-field-default-width: auto;\n box-sizing: border-box;\n }\n",d=n=>`\n ${n}::part(input-field)::after {\n opacity: 0;\n }\n`}}]);
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[201],{4201:(n,t,i)=>{i.d(t,{B:()=>$,DY:()=>u,PH:()=>d,Pd:()=>l,TX:()=>o,jI:()=>r,jl:()=>a,wm:()=>e});const e=(n,t)=>`\n ${o(n)}\n ${l(n)}\n ${r(n)}\n ${a(n)}\n ${p(n,t)}\n ${$(n)}\n\n ${n}::before {\n\t\theight: unset;\n\t}\n\n ${n} > input {\n\t\t-webkit-mask-image: none;\n\t\tmin-height: 0;\n\t}\n\n ${n}::part(input-field)::after {\n\t\topacity: 0 !important;\n }\n`,o=n=>`\n ${n} {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n`,a=n=>`\n ${n}::part(input-field) {\n overflow: hidden;\n padding: 0;\n box-shadow: none;\n }\n`,l=n=>`\n ${n} > label,\n ${n}::part(label),\n ${n}::part(required-indicator) {\n cursor: pointer;\n }\n`,r=(n,t="input")=>`\n ${n}[disabled] > ${t}:placeholder-shown,\n\t${n}[readonly] > ${t}:placeholder-shown {\n\t\topacity: 1;\n\t} \n`,p=(n,t)=>`\n ${n} input:-webkit-autofill,\n ${n} input:-webkit-autofill::first-line,\n ${n} input:-webkit-autofill:hover,\n ${n} input:-webkit-autofill:active,\n ${n} input:-webkit-autofill:focus {\n -webkit-text-fill-color: var(${t.inputValueTextColor});\n box-shadow: 0 0 0 var(${t.inputHeight}) var(${t.inputBackgroundColor}) inset;\n } \n`,u=()=>"\n :host {\n --vaadin-field-default-width: auto;\n box-sizing: border-box;\n }\n",d=n=>`\n ${n}::part(input-field)::after {\n opacity: 0;\n }\n`,$=n=>`\n ${n}::part(input-field)::after {\n background: none;\n }\n`}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[414],{3721:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[414],{3721:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>$}),n(4772),n(1294),n(9357);var o=n(5076),r=n(4567),i=n(2061),p=n(9241),d=n(6417),l=n(4049),a=n(6094),s=n(4201);const u=d.z.cssVarList,h=l.H.cssVarList,c=(0,r.iY)("phone-field"),{host:y,label:f,requiredIndicator:b,inputField:x,countryCodeInput:m,phoneInput:g,separator:w,errorMessage:v,helperText:C}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},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)"}},$=(0,i.qC)((0,p.yk)({mappings:{fontSize:[{...y,property:"font-size"},{...x,property:"font-size"},{selector:d.z.componentName,property:d.z.cssVarList.fontSize},{selector:l.H.componentName,property:l.H.cssVarList.fontSize}],fontFamily:[f,v,C,{...m,property:l.H.cssVarList.overlay.fontFamily}],hostWidth:[{...y,property:"width"},{...g,property:"width"},{...m,property:"--vaadin-combo-box-overlay-width"}],inputBorderStyle:[{...x,property:"border-style"},{...w,property:"border-left-style"}],inputBorderWidth:[{...x,property:"border-width"},{...w,property:"border-left-width"}],inputBorderColor:[{...x,property:"border-color"},{...w,property:"border-left-color"}],inputBorderRadius:{...x,property:"border-radius"},inputHeight:{...x,property:"height"},countryCodeInputWidth:{...m,property:h.hostWidth},countryCodeDropdownWidth:{...m,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...g,property:"width"},labelTextColor:[{...f,property:"color"},{...b,property:"color"}],labelRequiredIndicator:{...b,property:"content"},inputValueTextColor:[{...g,property:u.inputValueTextColor},{...m,property:h.inputValueTextColor}],inputPlaceholderTextColor:{...g,property:u.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:h.overlayItemBackgroundColor},inputOutlineStyle:{...x,property:"outline-style"},inputOutlineColor:{...x,property:"outline-color"},inputOutlineWidth:{...x,property:"outline-width"},inputOutlineOffset:{...x,property:"outline-offset"}}}),p.e4,p.dj,(t=>class extends t{static get CountryCodes(){return a.Z}constructor(){super()}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${o.f} \n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.f}>\n \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,r.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder"]})}}))((0,p.DM)({slots:[],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\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: calc(var(${$.cssVarList.inputOutlineWidth}) + var(${$.cssVarList.inputOutlineOffset}))\n\t\t\t}\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(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tmin-height: 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\tmin-height: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\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\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n\t\t\t\theight: 100%;\n\t\t\t\t${h.inputOutlineWidth}: 0;\n\t\t\t\t${h.inputOutlineOffset}: 0;\n\t\t\t\t${h.inputBorderWidth}: 0;\n\t\t\t\t${h.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\tmin-height: 0;\n\t\t\t\theight: 100%;\n\t\t\t\t${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n\n\t\t\t${(0,s.DY)()}\n\t\t\t${(0,s.Pd)("vaadin-text-field")}\n\t\t\t${(0,s.B)("vaadin-text-field")}\n\t\t\n\t\t`,excludeAttrsSync:["tabindex"],componentName:c}));customElements.define(c,$)}}]);
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
import { TextFieldClass } from '../descope-text-field/TextFieldClass';
|
|
11
11
|
import { ComboBoxClass } from '../descope-combo-box/ComboBoxClass';
|
|
12
12
|
import CountryCodes from './CountryCodes';
|
|
13
|
-
import { resetInputCursor, resetInputFieldDefaultWidth } from '../../helpers/themeHelpers/resetHelpers';
|
|
13
|
+
import { resetInputCursor, resetInputFieldInvalidBackgroundColor, resetInputFieldDefaultWidth } from '../../helpers/themeHelpers/resetHelpers';
|
|
14
14
|
|
|
15
15
|
const textVars = TextFieldClass.cssVarList;
|
|
16
16
|
const comboVars = ComboBoxClass.cssVarList;
|
|
@@ -233,6 +233,8 @@ export const PhoneFieldClass = compose(
|
|
|
233
233
|
|
|
234
234
|
${resetInputFieldDefaultWidth()}
|
|
235
235
|
${resetInputCursor('vaadin-text-field')}
|
|
236
|
+
${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
|
|
237
|
+
|
|
236
238
|
`,
|
|
237
239
|
excludeAttrsSync: ['tabindex'],
|
|
238
240
|
componentName
|
|
@@ -4,6 +4,7 @@ export const resetInputOverrides = (name, cssVarList) => `
|
|
|
4
4
|
${resetInputPlaceholder(name)}
|
|
5
5
|
${resetInputField(name)}
|
|
6
6
|
${resetInputAutoFill(name, cssVarList)}
|
|
7
|
+
${resetInputFieldInvalidBackgroundColor(name)}
|
|
7
8
|
|
|
8
9
|
${name}::before {
|
|
9
10
|
height: unset;
|
|
@@ -75,3 +76,9 @@ export const resetInputReadonlyStyle = (name) => `
|
|
|
75
76
|
opacity: 0;
|
|
76
77
|
}
|
|
77
78
|
`;
|
|
79
|
+
|
|
80
|
+
export const resetInputFieldInvalidBackgroundColor = (name) => `
|
|
81
|
+
${name}::part(input-field)::after {
|
|
82
|
+
background: none;
|
|
83
|
+
}
|
|
84
|
+
`;
|
|
@@ -31,10 +31,6 @@ export const comboBox = {
|
|
|
31
31
|
[vars.inputDropdownButtonCursor]: 'default'
|
|
32
32
|
},
|
|
33
33
|
|
|
34
|
-
_invalid: {
|
|
35
|
-
[vars.inputDropdownButtonColor]: globalRefs.colors.error.main
|
|
36
|
-
},
|
|
37
|
-
|
|
38
34
|
// [vars.overlayCursor]: 'pointer',
|
|
39
35
|
// [vars.overlayBackground]: globalRefs.colors.surface.light,
|
|
40
36
|
// [vars.overlayBorder]: `2px solid red`,
|
|
@@ -42,11 +42,12 @@ const [theme, refs, vars] = createHelperVars({
|
|
|
42
42
|
_focused: {
|
|
43
43
|
outlineColor: globalRefs.colors.surface.main,
|
|
44
44
|
_invalid: {
|
|
45
|
-
outlineColor: globalRefs.colors.error.
|
|
45
|
+
outlineColor: globalRefs.colors.error.main,
|
|
46
46
|
}
|
|
47
47
|
},
|
|
48
48
|
|
|
49
49
|
_bordered: {
|
|
50
|
+
outlineWidth: globalRefs.border.xs,
|
|
50
51
|
borderColor: globalRefs.colors.surface.main,
|
|
51
52
|
borderStyle: 'solid',
|
|
52
53
|
_invalid: {
|
|
@@ -59,12 +60,6 @@ const [theme, refs, vars] = createHelperVars({
|
|
|
59
60
|
valueTextColor: globalRefs.colors.surface.dark,
|
|
60
61
|
placeholderTextColor: globalRefs.colors.surface.dark,
|
|
61
62
|
backgroundColor: globalRefs.colors.surface.main
|
|
62
|
-
},
|
|
63
|
-
|
|
64
|
-
_invalid: {
|
|
65
|
-
labelTextColor: globalRefs.colors.error.main,
|
|
66
|
-
valueTextColor: globalRefs.colors.error.main,
|
|
67
|
-
placeholderTextColor: globalRefs.colors.error.light,
|
|
68
63
|
}
|
|
69
64
|
}, componentName);
|
|
70
65
|
|
|
@@ -17,15 +17,11 @@ const passcode = {
|
|
|
17
17
|
[vars.digitSpacing]: '0',
|
|
18
18
|
[vars.hostWidth]: refs.width,
|
|
19
19
|
[vars.digitOutlineColor]: 'transparent',
|
|
20
|
-
[vars.digitOutlineWidth]:
|
|
21
|
-
[vars.focusedDigitFieldOutlineColor]:
|
|
20
|
+
[vars.digitOutlineWidth]: refs.outlineWidth,
|
|
21
|
+
[vars.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
|
22
22
|
|
|
23
23
|
_hideCursor: {
|
|
24
24
|
[vars.digitCaretTextColor]: 'transparent',
|
|
25
|
-
},
|
|
26
|
-
|
|
27
|
-
_invalid: {
|
|
28
|
-
[vars.focusedDigitFieldOutlineColor]: globalRefs.colors.error.light,
|
|
29
25
|
}
|
|
30
26
|
}
|
|
31
27
|
|