@descope/web-components-ui 1.0.73 → 1.0.75
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +2425 -622
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/447.js +1 -1
- package/dist/umd/744.js +1 -1
- package/dist/umd/878.js +1 -0
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-phone-field-descope-phone-field-internal-index-js.js +1 -0
- package/dist/umd/descope-phone-field-index-js.js +1 -0
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-combo-box/ComboBox.js +85 -50
- package/src/components/descope-logo/Logo.js +1 -1
- package/src/components/descope-passcode/Passcode.js +2 -5
- package/src/components/descope-phone-field/CountryCodes.js +1212 -0
- package/src/components/descope-phone-field/PhoneField.js +179 -0
- package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +213 -0
- package/src/components/descope-phone-field/descope-phone-field-internal/index.js +6 -0
- package/src/components/descope-phone-field/helpers.js +23 -0
- package/src/components/descope-phone-field/index.js +9 -0
- package/src/components/descope-text-field/TextField.js +31 -3
- package/src/components/descope-text-field/textFieldMappings.js +4 -1
- package/src/index.js +1 -0
- package/src/mixins/inputValidationMixin.js +21 -2
- package/src/mixins/portalMixin.js +8 -3
- package/src/theme/components/comboBox.js +39 -9
- package/src/theme/components/index.js +3 -1
- package/src/theme/components/phoneField.js +74 -0
- package/src/theme/components/textField.js +2 -2
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import globals from '../globals';
|
|
2
|
+
import PhoneField from '../../components/descope-phone-field/PhoneField';
|
|
3
|
+
import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
4
|
+
|
|
5
|
+
const globalRefs = getThemeRefs(globals);
|
|
6
|
+
const vars = PhoneField.cssVarList;
|
|
7
|
+
|
|
8
|
+
const phoneField = {
|
|
9
|
+
[vars.wrapperBorderStyle]: 'solid',
|
|
10
|
+
[vars.wrapperBorderWidth]: '1px',
|
|
11
|
+
[vars.wrapperBorderColor]: 'transparent',
|
|
12
|
+
[vars.wrapperBorderRadius]: globalRefs.radius.sm,
|
|
13
|
+
[vars.placeholderColor]: globalRefs.colors.surface.main,
|
|
14
|
+
|
|
15
|
+
[vars.padding]: '0',
|
|
16
|
+
|
|
17
|
+
[vars.phoneInputWidth]: '15em',
|
|
18
|
+
[vars.countryCodeInputWidth]: '7em',
|
|
19
|
+
|
|
20
|
+
size: {
|
|
21
|
+
xs: {
|
|
22
|
+
[vars.inputHeight]: '14px',
|
|
23
|
+
[vars.fontSize]: '8px',
|
|
24
|
+
[vars.padding]: `0 ${globalRefs.spacing.xs}`,
|
|
25
|
+
[vars.countryCodeDropdownWidth]: '200px',
|
|
26
|
+
},
|
|
27
|
+
sm: {
|
|
28
|
+
[vars.inputHeight]: '20px',
|
|
29
|
+
[vars.fontSize]: '10px',
|
|
30
|
+
[vars.padding]: `0 ${globalRefs.spacing.sm}`,
|
|
31
|
+
[vars.countryCodeDropdownWidth]: '240px',
|
|
32
|
+
},
|
|
33
|
+
md: {
|
|
34
|
+
[vars.inputHeight]: '30px',
|
|
35
|
+
[vars.fontSize]: '14px',
|
|
36
|
+
[vars.padding]: `0 ${globalRefs.spacing.md}`,
|
|
37
|
+
[vars.countryCodeDropdownWidth]: '250px',
|
|
38
|
+
},
|
|
39
|
+
lg: {
|
|
40
|
+
[vars.inputHeight]: '40px',
|
|
41
|
+
[vars.fontSize]: '46px',
|
|
42
|
+
[vars.padding]: `0 ${globalRefs.spacing.lg}`,
|
|
43
|
+
[vars.countryCodeDropdownWidth]: '250px',
|
|
44
|
+
},
|
|
45
|
+
xl: {
|
|
46
|
+
[vars.inputHeight]: '50px',
|
|
47
|
+
[vars.fontSize]: '25px',
|
|
48
|
+
[vars.padding]: `0 ${globalRefs.spacing.xl}`,
|
|
49
|
+
[vars.countryCodeDropdownWidth]: '400px',
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
|
|
53
|
+
_fullWidth: {
|
|
54
|
+
[vars.componentWidth]: '100%',
|
|
55
|
+
[vars.phoneInputWidth]: '100%',
|
|
56
|
+
[vars.countryCodeDropdownWidth]: '100%',
|
|
57
|
+
},
|
|
58
|
+
|
|
59
|
+
_bordered: {
|
|
60
|
+
[vars.wrapperBorderColor]: globalRefs.colors.surface.main
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
_invalid: {
|
|
64
|
+
[vars.color]: globalRefs.colors.error.main,
|
|
65
|
+
[vars.placeholderColor]: globalRefs.colors.error.light,
|
|
66
|
+
[vars.wrapperBorderColor]: globalRefs.colors.error.main
|
|
67
|
+
},
|
|
68
|
+
|
|
69
|
+
// '@overlay': {
|
|
70
|
+
// overlayItemBackgroundColor: 'red'
|
|
71
|
+
// }
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export default phoneField;
|
|
@@ -25,7 +25,7 @@ export const textField = (vars) => ({
|
|
|
25
25
|
},
|
|
26
26
|
lg: {
|
|
27
27
|
[vars.height]: '40px',
|
|
28
|
-
[vars.fontSize]: '
|
|
28
|
+
[vars.fontSize]: '20px',
|
|
29
29
|
[vars.padding]: `0 ${globalRefs.spacing.lg}`
|
|
30
30
|
},
|
|
31
31
|
xl: {
|
|
@@ -36,7 +36,7 @@ export const textField = (vars) => ({
|
|
|
36
36
|
},
|
|
37
37
|
|
|
38
38
|
[vars.color]: globalRefs.colors.surface.contrast,
|
|
39
|
-
[vars.placeholderColor]: globalRefs.colors.surface.
|
|
39
|
+
[vars.placeholderColor]: globalRefs.colors.surface.main,
|
|
40
40
|
|
|
41
41
|
[vars.backgroundColor]: globalRefs.colors.surface.light,
|
|
42
42
|
|