@descope/web-components-ui 1.0.39 → 1.0.40
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +815 -223
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/101.js +148 -0
- package/dist/umd/208.js +2 -0
- package/dist/umd/208.js.LICENSE.txt +5 -0
- package/dist/umd/211.js +312 -0
- package/dist/umd/211.js.LICENSE.txt +5 -0
- package/dist/umd/233.js +573 -0
- package/dist/umd/{511.js.LICENSE.txt → 233.js.LICENSE.txt} +0 -6
- package/dist/umd/422.js +2 -0
- package/dist/umd/422.js.LICENSE.txt +5 -0
- package/dist/umd/437.js +19 -0
- package/dist/umd/437.js.LICENSE.txt +5 -0
- package/dist/umd/513.js +1 -0
- package/dist/umd/515.js +202 -0
- package/dist/umd/515.js.LICENSE.txt +11 -0
- package/dist/umd/54.js +4 -4
- package/dist/umd/56.js +48 -0
- package/dist/umd/56.js.LICENSE.txt +5 -0
- package/dist/umd/599.js +1 -1
- package/dist/umd/63.js +1 -0
- package/dist/umd/725.js +37 -0
- package/dist/umd/725.js.LICENSE.txt +11 -0
- package/dist/umd/729.js +1 -1
- package/dist/umd/767.js +2 -0
- package/dist/umd/{9.js.LICENSE.txt → 767.js.LICENSE.txt} +0 -6
- package/dist/umd/786.js +2 -0
- package/dist/umd/786.js.LICENSE.txt +17 -0
- package/dist/umd/789.js +1 -0
- package/dist/umd/806.js +109 -0
- package/dist/umd/806.js.LICENSE.txt +5 -0
- package/dist/umd/938.js +1 -0
- package/dist/umd/97.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-checkbox-index-js.js +1 -0
- package/dist/umd/descope-combo-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -0
- package/dist/umd/descope-number-field-index-js.js +1 -0
- package/dist/umd/descope-password-field-index-js.js +1 -0
- package/dist/umd/descope-switch-toggle-index-js.js +1 -0
- package/dist/umd/descope-text-area-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 +9 -2
- package/src/components/descope-button/Button.js +90 -30
- package/src/components/descope-checkbox/Checkbox.js +33 -0
- package/src/components/descope-checkbox/index.js +6 -0
- package/src/components/descope-email-field/EmailField.js +72 -0
- package/src/components/descope-email-field/index.js +6 -0
- package/src/components/descope-number-field/NumberField.js +72 -0
- package/src/components/descope-number-field/index.js +6 -0
- package/src/components/descope-password-field/PasswordField.js +79 -0
- package/src/components/descope-password-field/index.js +6 -0
- package/src/components/descope-switch-toggle/SwitchToggle.js +81 -0
- package/src/components/descope-switch-toggle/index.js +6 -0
- package/src/components/descope-text-area/TextArea.js +66 -0
- package/src/components/descope-text-area/index.js +6 -0
- package/src/components/descope-text-field/TextField.js +98 -28
- package/src/componentsHelpers/createProxy/index.js +27 -17
- package/src/componentsHelpers/index.js +12 -9
- package/src/componentsHelpers/inputMixin.js +38 -37
- package/src/index.js +11 -3
- package/src/theme/components/button.js +45 -34
- package/src/theme/components/checkbox.js +9 -0
- package/src/theme/components/container.js +32 -27
- package/src/theme/components/emailField.js +8 -0
- package/src/theme/components/index.js +19 -7
- package/src/theme/components/input.js +106 -0
- package/src/theme/components/numberField.js +8 -0
- package/src/theme/components/passwordField.js +11 -0
- package/src/theme/components/switchToggle.js +10 -0
- package/src/theme/components/textArea.js +44 -0
- package/src/theme/components/textField.js +69 -45
- package/src/theme/globals.js +8 -7
- package/dist/umd/221.js +0 -37
- package/dist/umd/511.js +0 -573
- package/dist/umd/9.js +0 -312
- /package/dist/umd/{221.js.LICENSE.txt → 101.js.LICENSE.txt} +0 -0
@@ -3,58 +3,60 @@ import { getThemeRefs, createHelperVars } from "../../themeHelpers";
|
|
3
3
|
import Button, { componentName } from "../../components/descope-button/Button";
|
4
4
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
6
|
-
const vars = Button.cssVarList
|
6
|
+
const vars = Button.cssVarList;
|
7
7
|
|
8
8
|
const mode = {
|
9
|
-
primary:
|
10
|
-
main: globalRefs.colors.primary.main,
|
11
|
-
dark: 'darkblue',
|
12
|
-
light: 'lightblue',
|
13
|
-
contrast: 'white'
|
14
|
-
},
|
9
|
+
primary: globalRefs.colors.primary,
|
15
10
|
secondary: globalRefs.colors.secondary,
|
16
11
|
success: globalRefs.colors.success,
|
17
12
|
error: globalRefs.colors.error,
|
18
13
|
surface: globalRefs.colors.surface,
|
19
|
-
}
|
14
|
+
};
|
20
15
|
|
21
|
-
const [helperTheme, helperRefs] = createHelperVars({ mode }, componentName)
|
16
|
+
const [helperTheme, helperRefs] = createHelperVars({ mode }, componentName);
|
22
17
|
|
23
18
|
const button = {
|
24
19
|
...helperTheme,
|
25
|
-
[vars.borderRadius]: globalRefs.radius.lg,
|
26
|
-
[vars.cursor]: 'pointer',
|
27
20
|
|
28
21
|
size: {
|
29
22
|
xs: {
|
30
|
-
[vars.height]:
|
31
|
-
[vars.fontSize]:
|
32
|
-
[vars.padding]: `0 ${globalRefs.spacing.xs}
|
23
|
+
[vars.height]: "10px",
|
24
|
+
[vars.fontSize]: "10px",
|
25
|
+
[vars.padding]: `0 ${globalRefs.spacing.xs}`,
|
33
26
|
},
|
34
27
|
sm: {
|
35
|
-
[vars.height]:
|
36
|
-
[vars.fontSize]:
|
37
|
-
[vars.padding]: `0 ${globalRefs.spacing.sm}
|
28
|
+
[vars.height]: "20px",
|
29
|
+
[vars.fontSize]: "10px",
|
30
|
+
[vars.padding]: `0 ${globalRefs.spacing.sm}`,
|
38
31
|
},
|
39
32
|
md: {
|
40
|
-
[vars.height]:
|
41
|
-
[vars.fontSize]:
|
42
|
-
[vars.padding]: `0 ${globalRefs.spacing.md}
|
33
|
+
[vars.height]: "30px",
|
34
|
+
[vars.fontSize]: "14px",
|
35
|
+
[vars.padding]: `0 ${globalRefs.spacing.md}`,
|
43
36
|
},
|
44
37
|
lg: {
|
45
|
-
[vars.height]:
|
46
|
-
[vars.fontSize]:
|
47
|
-
[vars.padding]: `0 ${globalRefs.spacing.lg}
|
38
|
+
[vars.height]: "40px",
|
39
|
+
[vars.fontSize]: "20px",
|
40
|
+
[vars.padding]: `0 ${globalRefs.spacing.lg}`,
|
48
41
|
},
|
49
42
|
xl: {
|
50
|
-
[vars.height]:
|
51
|
-
[vars.fontSize]:
|
52
|
-
[vars.padding]: `0 ${globalRefs.spacing.xl}
|
43
|
+
[vars.height]: "50px",
|
44
|
+
[vars.fontSize]: "25px",
|
45
|
+
[vars.padding]: `0 ${globalRefs.spacing.xl}`,
|
53
46
|
},
|
54
47
|
},
|
55
48
|
|
56
|
-
|
57
|
-
|
49
|
+
[vars.borderRadius]: globalRefs.radius.lg,
|
50
|
+
[vars.cursor]: "pointer",
|
51
|
+
[vars.borderWidth]: "2px",
|
52
|
+
[vars.borderStyle]: "solid",
|
53
|
+
[vars.borderColor]: "transparent",
|
54
|
+
|
55
|
+
_fullwidth: {
|
56
|
+
[vars.width]: "100%",
|
57
|
+
},
|
58
|
+
_loading: {
|
59
|
+
[vars.cursor]: "wait",
|
58
60
|
},
|
59
61
|
|
60
62
|
variant: {
|
@@ -64,24 +66,33 @@ const button = {
|
|
64
66
|
_hover: {
|
65
67
|
[vars.backgroundColor]: helperRefs.dark,
|
66
68
|
},
|
69
|
+
_loading: {
|
70
|
+
[vars.backgroundColor]: helperRefs.main,
|
71
|
+
},
|
67
72
|
},
|
68
73
|
outline: {
|
69
74
|
[vars.color]: helperRefs.main,
|
70
75
|
[vars.borderColor]: helperRefs.main,
|
71
|
-
[vars.borderWidth]: '2px',
|
72
|
-
[vars.borderStyle]: 'solid',
|
73
76
|
_hover: {
|
74
77
|
[vars.color]: helperRefs.dark,
|
75
78
|
[vars.borderColor]: helperRefs.dark,
|
76
79
|
_error: {
|
77
|
-
[vars.color]:
|
78
|
-
}
|
79
|
-
}
|
80
|
+
[vars.color]: helperRefs.error,
|
81
|
+
},
|
82
|
+
},
|
80
83
|
},
|
81
84
|
link: {
|
82
85
|
[vars.color]: helperRefs.main,
|
86
|
+
[vars.padding]: 0,
|
87
|
+
[vars.margin]: 0,
|
88
|
+
[vars.lineHeight]: helperRefs.height,
|
89
|
+
[vars.borderRadius]: 0,
|
90
|
+
_hover: {
|
91
|
+
[vars.color]: helperRefs.main,
|
92
|
+
[vars.textDecoration]: "underline",
|
93
|
+
},
|
83
94
|
},
|
84
|
-
}
|
95
|
+
},
|
85
96
|
};
|
86
97
|
|
87
98
|
export default button;
|
@@ -1,38 +1,41 @@
|
|
1
|
-
import globals from
|
2
|
-
import { getThemeRefs, createHelperVars } from
|
3
|
-
import Container from
|
1
|
+
import globals from '../globals';
|
2
|
+
import { getThemeRefs, createHelperVars } from '../../themeHelpers';
|
3
|
+
import Container from '../../components/descope-container/Container';
|
4
4
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
6
6
|
|
7
|
-
const vars = Container.cssVarList
|
7
|
+
const vars = Container.cssVarList;
|
8
8
|
|
9
9
|
const verticalAlignment = {
|
10
10
|
start: { verticalAlignment: 'start' },
|
11
11
|
center: { verticalAlignment: 'center' },
|
12
|
-
end: { verticalAlignment: 'end' }
|
13
|
-
}
|
12
|
+
end: { verticalAlignment: 'end' }
|
13
|
+
};
|
14
14
|
|
15
15
|
const horizontalAlignment = {
|
16
16
|
start: { horizontalAlignment: 'start' },
|
17
17
|
center: { horizontalAlignment: 'center' },
|
18
|
-
end: { horizontalAlignment: 'end' }
|
19
|
-
}
|
18
|
+
end: { horizontalAlignment: 'end' }
|
19
|
+
};
|
20
20
|
|
21
|
-
const [helperTheme,
|
22
|
-
|
21
|
+
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
22
|
+
{ verticalAlignment, horizontalAlignment },
|
23
|
+
'container'
|
24
|
+
);
|
23
25
|
|
24
26
|
const container = {
|
25
27
|
...helperTheme,
|
26
28
|
[vars.display]: 'flex',
|
29
|
+
[vars.backgroundColor]: globalRefs.colors.surface.main,
|
27
30
|
verticalPadding: {
|
28
31
|
sm: { [vars.verticalPadding]: '5px' },
|
29
32
|
md: { [vars.verticalPadding]: '10px' },
|
30
|
-
lg: { [vars.verticalPadding]: '20px' }
|
33
|
+
lg: { [vars.verticalPadding]: '20px' }
|
31
34
|
},
|
32
35
|
horizontalPadding: {
|
33
36
|
sm: { [vars.horizontalPadding]: '5px' },
|
34
37
|
md: { [vars.horizontalPadding]: '10px' },
|
35
|
-
lg: { [vars.horizontalPadding]: '20px' }
|
38
|
+
lg: { [vars.horizontalPadding]: '20px' }
|
36
39
|
},
|
37
40
|
direction: {
|
38
41
|
row: {
|
@@ -40,7 +43,7 @@ const container = {
|
|
40
43
|
[vars.alignItems]: helperRefs.verticalAlignment,
|
41
44
|
[vars.justifyContent]: helperRefs.horizontalAlignment,
|
42
45
|
horizontalAlignment: {
|
43
|
-
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' }
|
46
|
+
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' }
|
44
47
|
}
|
45
48
|
},
|
46
49
|
|
@@ -49,9 +52,11 @@ const container = {
|
|
49
52
|
[vars.alignItems]: helperRefs.horizontalAlignment,
|
50
53
|
[vars.justifyContent]: helperRefs.verticalAlignment,
|
51
54
|
verticalAlignment: {
|
52
|
-
spaceBetween: {
|
55
|
+
spaceBetween: {
|
56
|
+
[helperVars.verticalAlignment]: 'space-between'
|
57
|
+
}
|
53
58
|
}
|
54
|
-
}
|
59
|
+
}
|
55
60
|
},
|
56
61
|
|
57
62
|
spaceBetween: {
|
@@ -67,27 +72,27 @@ const container = {
|
|
67
72
|
},
|
68
73
|
|
69
74
|
shadow: {
|
70
|
-
sm: {
|
71
|
-
[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
|
72
|
-
},
|
73
|
-
md: {
|
74
|
-
[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
|
75
|
-
},
|
76
|
-
lg: {
|
77
|
-
[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
|
75
|
+
sm: {
|
76
|
+
[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
|
77
|
+
},
|
78
|
+
md: {
|
79
|
+
[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
|
78
80
|
},
|
81
|
+
lg: {
|
82
|
+
[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
|
83
|
+
}
|
79
84
|
},
|
80
85
|
|
81
86
|
borderRadius: {
|
82
|
-
sm: {
|
87
|
+
sm: {
|
83
88
|
[vars.borderRadius]: globalRefs.radius.sm
|
84
89
|
},
|
85
|
-
md: {
|
90
|
+
md: {
|
86
91
|
[vars.borderRadius]: globalRefs.radius.md
|
87
92
|
},
|
88
|
-
lg: {
|
93
|
+
lg: {
|
89
94
|
[vars.borderRadius]: globalRefs.radius.lg
|
90
|
-
}
|
95
|
+
}
|
91
96
|
}
|
92
97
|
};
|
93
98
|
|
@@ -1,9 +1,21 @@
|
|
1
|
-
import button
|
2
|
-
import textField
|
3
|
-
import
|
1
|
+
import button from './button';
|
2
|
+
import textField from './textField';
|
3
|
+
import passwordField from './passwordField';
|
4
|
+
import numberField from './numberField';
|
5
|
+
import emailField from './emailField';
|
6
|
+
import textArea from './textArea';
|
7
|
+
import checkbox from './checkbox';
|
8
|
+
import switchToggle from './switchToggle';
|
9
|
+
import container from './container';
|
4
10
|
|
5
11
|
export default {
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
12
|
+
button,
|
13
|
+
textField,
|
14
|
+
passwordField,
|
15
|
+
numberField,
|
16
|
+
emailField,
|
17
|
+
textArea,
|
18
|
+
checkbox,
|
19
|
+
switchToggle,
|
20
|
+
container
|
21
|
+
};
|
@@ -0,0 +1,106 @@
|
|
1
|
+
import {
|
2
|
+
getComponentName,
|
3
|
+
createStyleMixin,
|
4
|
+
draggableMixin,
|
5
|
+
createProxy,
|
6
|
+
inputMixin,
|
7
|
+
compose,
|
8
|
+
componentNameValidationMixin
|
9
|
+
} from '../../componentsHelpers';
|
10
|
+
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
11
|
+
|
12
|
+
export const componentName = getComponentName('text-field');
|
13
|
+
|
14
|
+
const selectors = {
|
15
|
+
label: '::part(label)',
|
16
|
+
input: '::part(input-field)',
|
17
|
+
readOnlyInput: '[readonly]::part(input-field)::after',
|
18
|
+
placeholder: '> input:placeholder-shown'
|
19
|
+
};
|
20
|
+
|
21
|
+
let overrides = ``;
|
22
|
+
|
23
|
+
export const textFieldMappings = {
|
24
|
+
color: { selector: selectors.input },
|
25
|
+
backgroundColor: { selector: selectors.input },
|
26
|
+
width: [matchHostStyle()],
|
27
|
+
color: { selector: selectors.input },
|
28
|
+
borderColor: [
|
29
|
+
{ selector: selectors.input },
|
30
|
+
{ selector: selectors.readOnlyInput }
|
31
|
+
],
|
32
|
+
borderWidth: [
|
33
|
+
{ selector: selectors.input },
|
34
|
+
{ selector: selectors.readOnlyInput }
|
35
|
+
],
|
36
|
+
borderStyle: [
|
37
|
+
{ selector: selectors.input },
|
38
|
+
{ selector: selectors.readOnlyInput }
|
39
|
+
],
|
40
|
+
borderRadius: { selector: selectors.input },
|
41
|
+
boxShadow: { selector: selectors.input },
|
42
|
+
fontSize: {},
|
43
|
+
height: { selector: selectors.input },
|
44
|
+
padding: { selector: selectors.input },
|
45
|
+
outline: { selector: selectors.input },
|
46
|
+
outlineOffset: { selector: selectors.input },
|
47
|
+
|
48
|
+
placeholderColor: { selector: selectors.placeholder, property: 'color' }
|
49
|
+
// borderWidthReadOnly: [borderWidth('[readonly]::part(input-field)::after')]
|
50
|
+
};
|
51
|
+
|
52
|
+
const TextField = compose(
|
53
|
+
createStyleMixin({
|
54
|
+
mappings: textFieldMappings
|
55
|
+
}),
|
56
|
+
draggableMixin,
|
57
|
+
inputMixin,
|
58
|
+
componentNameValidationMixin
|
59
|
+
)(
|
60
|
+
createProxy({
|
61
|
+
slots: ['prefix', 'suffix'],
|
62
|
+
wrappedEleName: 'vaadin-text-field',
|
63
|
+
style: () => overrides,
|
64
|
+
excludeAttrsSync: ['tabindex'],
|
65
|
+
componentName
|
66
|
+
})
|
67
|
+
);
|
68
|
+
|
69
|
+
overrides = `
|
70
|
+
vaadin-text-field {
|
71
|
+
margin: 0;
|
72
|
+
padding: 0;
|
73
|
+
}
|
74
|
+
vaadin-text-field::part(input-field) {
|
75
|
+
overflow: hidden;
|
76
|
+
}
|
77
|
+
vaadin-text-field[readonly] > input:placeholder-shown {
|
78
|
+
opacity: 1;
|
79
|
+
}
|
80
|
+
vaadin-text-field input:-webkit-autofill,
|
81
|
+
vaadin-text-field input:-webkit-autofill::first-line,
|
82
|
+
vaadin-text-field input:-webkit-autofill:hover,
|
83
|
+
vaadin-text-field input:-webkit-autofill:active,
|
84
|
+
vaadin-text-field input:-webkit-autofill:focus {
|
85
|
+
-webkit-text-fill-color: var(${TextField.cssVarList.color});
|
86
|
+
box-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;
|
87
|
+
}
|
88
|
+
vaadin-text-field > label,
|
89
|
+
vaadin-text-field::part(input-field) {
|
90
|
+
cursor: pointer;
|
91
|
+
color: var(${TextField.cssVarList.color});
|
92
|
+
}
|
93
|
+
vaadin-text-field::part(input-field):focus {
|
94
|
+
cursor: text;
|
95
|
+
}
|
96
|
+
vaadin-text-field[required]::part(required-indicator)::after {
|
97
|
+
font-size: "12px";
|
98
|
+
content: "*";
|
99
|
+
color: var(${TextField.cssVarList.color});
|
100
|
+
}
|
101
|
+
vaadin-text-field[readonly]::part(input-field)::after {
|
102
|
+
border: 0 solid;
|
103
|
+
}
|
104
|
+
`;
|
105
|
+
|
106
|
+
export default TextField;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import PasswordField from '../../components/descope-password-field/PasswordField';
|
2
|
+
import { textField } from './textField';
|
3
|
+
|
4
|
+
const vars = PasswordField.cssVarList;
|
5
|
+
|
6
|
+
const passwordField = {
|
7
|
+
...textField(vars),
|
8
|
+
[vars.revealCursor]: 'pointer'
|
9
|
+
};
|
10
|
+
|
11
|
+
export default passwordField;
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import globals from '../globals';
|
2
|
+
import { getThemeRefs } from '../../themeHelpers';
|
3
|
+
import TextArea from '../../components/descope-text-area/TextArea';
|
4
|
+
|
5
|
+
const globalRefs = getThemeRefs(globals);
|
6
|
+
const vars = TextArea.cssVarList;
|
7
|
+
|
8
|
+
const textArea = {
|
9
|
+
[vars.color]: globalRefs.colors.primary.main,
|
10
|
+
[vars.backgroundColor]: globalRefs.colors.surface.light,
|
11
|
+
[vars.resize]: 'vertical',
|
12
|
+
|
13
|
+
[vars.borderRadius]: globalRefs.radius.sm,
|
14
|
+
[vars.borderWidth]: '1px',
|
15
|
+
[vars.borderStyle]: 'solid',
|
16
|
+
[vars.borderColor]: 'transparent',
|
17
|
+
|
18
|
+
_borderoffset: {
|
19
|
+
[vars.outlineOffset]: '2px'
|
20
|
+
},
|
21
|
+
|
22
|
+
_bordered: {
|
23
|
+
[vars.inputBorderColor]: globalRefs.colors.surface.main
|
24
|
+
},
|
25
|
+
|
26
|
+
_focused: {
|
27
|
+
[vars.focusInputCursor]: 'text',
|
28
|
+
[vars.outline]: `2px solid ${globalRefs.colors.surface.main}`
|
29
|
+
},
|
30
|
+
|
31
|
+
_fullwidth: {
|
32
|
+
[vars.width]: '100%'
|
33
|
+
},
|
34
|
+
|
35
|
+
_disabled: {
|
36
|
+
[vars.cursor]: 'not-allowed'
|
37
|
+
},
|
38
|
+
|
39
|
+
_invalid: {
|
40
|
+
[vars.outline]: `2px solid ${globalRefs.colors.error.main}`
|
41
|
+
}
|
42
|
+
};
|
43
|
+
|
44
|
+
export default textArea;
|
@@ -1,53 +1,77 @@
|
|
1
|
-
import globals from
|
2
|
-
import { getThemeRefs } from
|
1
|
+
import globals from '../globals';
|
2
|
+
import { getThemeRefs } from '../../themeHelpers';
|
3
3
|
import TextField from '../../components/descope-text-field/TextField';
|
4
4
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
6
6
|
|
7
7
|
const vars = TextField.cssVarList;
|
8
8
|
|
9
|
-
const textField = {
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
[vars.padding]: `0 ${globalRefs.spacing.sm}`
|
38
|
-
},
|
39
|
-
xl: {
|
40
|
-
[vars.height]: '50px',
|
41
|
-
[vars.fontSize]: '25px',
|
42
|
-
[vars.padding]: `0 ${globalRefs.spacing.md}`
|
43
|
-
},
|
44
|
-
},
|
45
|
-
|
46
|
-
_fullWidth: {
|
47
|
-
[vars.width]: '100%'
|
48
|
-
},
|
49
|
-
};
|
50
|
-
|
51
|
-
export default textField
|
9
|
+
export const textField = (vars) => ({
|
10
|
+
size: {
|
11
|
+
xs: {
|
12
|
+
[vars.height]: '14px',
|
13
|
+
[vars.fontSize]: '8px',
|
14
|
+
[vars.padding]: `0 ${globalRefs.spacing.xs}`
|
15
|
+
},
|
16
|
+
sm: {
|
17
|
+
[vars.height]: '20px',
|
18
|
+
[vars.fontSize]: '10px',
|
19
|
+
[vars.padding]: `0 ${globalRefs.spacing.sm}`
|
20
|
+
},
|
21
|
+
md: {
|
22
|
+
[vars.height]: '30px',
|
23
|
+
[vars.fontSize]: '14px',
|
24
|
+
[vars.padding]: `0 ${globalRefs.spacing.md}`
|
25
|
+
},
|
26
|
+
lg: {
|
27
|
+
[vars.height]: '40px',
|
28
|
+
[vars.fontSize]: '16px',
|
29
|
+
[vars.padding]: `0 ${globalRefs.spacing.lg}`
|
30
|
+
},
|
31
|
+
xl: {
|
32
|
+
[vars.height]: '50px',
|
33
|
+
[vars.fontSize]: '25px',
|
34
|
+
[vars.padding]: `0 ${globalRefs.spacing.xl}`
|
35
|
+
}
|
36
|
+
},
|
52
37
|
|
38
|
+
[vars.color]: globalRefs.colors.surface.contrast,
|
39
|
+
[vars.placeholderColor]: globalRefs.colors.surface.contrast,
|
53
40
|
|
41
|
+
[vars.backgroundColor]: globalRefs.colors.surface.light,
|
42
|
+
|
43
|
+
[vars.borderWidth]: '1px',
|
44
|
+
[vars.borderStyle]: 'solid',
|
45
|
+
[vars.borderColor]: 'transparent',
|
46
|
+
[vars.borderWidthReadOnly]: '0',
|
47
|
+
[vars.borderRadius]: globalRefs.radius.sm,
|
48
|
+
|
49
|
+
_borderoffset: {
|
50
|
+
[vars.outlineOffset]: '2px'
|
51
|
+
},
|
52
|
+
|
53
|
+
_invalid: {
|
54
|
+
[vars.borderColor]: globalRefs.colors.error.main,
|
55
|
+
[vars.color]: globalRefs.colors.error.main
|
56
|
+
},
|
57
|
+
|
58
|
+
_disabled: {
|
59
|
+
[vars.color]: globalRefs.colors.surface.dark,
|
60
|
+
[vars.placeholderColor]: globalRefs.colors.surface.light,
|
61
|
+
[vars.backgroundColor]: globalRefs.colors.surface.main
|
62
|
+
},
|
63
|
+
|
64
|
+
_fullwidth: {
|
65
|
+
[vars.width]: '100%'
|
66
|
+
},
|
67
|
+
|
68
|
+
_focused: {
|
69
|
+
[vars.outline]: `2px solid ${globalRefs.colors.surface.main}`
|
70
|
+
},
|
71
|
+
|
72
|
+
_bordered: {
|
73
|
+
[vars.borderColor]: globalRefs.colors.surface.main
|
74
|
+
}
|
75
|
+
});
|
76
|
+
|
77
|
+
export default textField(vars);
|
package/src/theme/globals.js
CHANGED
@@ -2,8 +2,9 @@ import { genColors } from "../themeHelpers/processColors";
|
|
2
2
|
|
3
3
|
export const colors = genColors({
|
4
4
|
surface: {
|
5
|
-
main:
|
6
|
-
light:
|
5
|
+
main: "lightgray",
|
6
|
+
light: "#fff",
|
7
|
+
dark: "#000",
|
7
8
|
},
|
8
9
|
primary: "#0082B5",
|
9
10
|
secondary: "#7D14EB",
|
@@ -30,11 +31,11 @@ const typography = {
|
|
30
31
|
};
|
31
32
|
|
32
33
|
const spacing = {
|
33
|
-
xs:
|
34
|
-
sm:
|
35
|
-
md:
|
36
|
-
lg:
|
37
|
-
xl:
|
34
|
+
xs: "2px",
|
35
|
+
sm: "4px",
|
36
|
+
md: "8px",
|
37
|
+
lg: "16px",
|
38
|
+
xl: "32px",
|
38
39
|
};
|
39
40
|
|
40
41
|
const border = {
|
package/dist/umd/221.js
DELETED
@@ -1,37 +0,0 @@
|
|
1
|
-
/*! For license information please see 221.js.LICENSE.txt */
|
2
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[221],{6221:(t,e,a)=>{a(3787);var s=a(692),i=a(5128);(0,i.hC)("vaadin-text-field",s.J,{moduleId:"lumo-text-field-styles"}),a(3130);var l=a(4241),r=a(1402),n=a(4463),o=a(2743),d=a(3208),u=a(3690);const p=t=>class extends((0,u.L)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),t||this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}};var h=a(6729);const c=t=>class extends(p(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new d.b(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new h.v(this.inputElement,this._labelController))}};(0,i.hC)("vaadin-text-field",o.J,{moduleId:"vaadin-text-field-styles"});class m extends(c((0,i.Tb)((0,r.S)(l.H3)))){static get is(){return"vaadin-text-field"}static get template(){return l.dy`
|
3
|
-
<style>
|
4
|
-
[part='input-field'] {
|
5
|
-
flex-grow: 0;
|
6
|
-
}
|
7
|
-
</style>
|
8
|
-
|
9
|
-
<div class="vaadin-field-container">
|
10
|
-
<div part="label">
|
11
|
-
<slot name="label"></slot>
|
12
|
-
<span part="required-indicator" aria-hidden="true" on-click="focus"></span>
|
13
|
-
</div>
|
14
|
-
|
15
|
-
<vaadin-input-container
|
16
|
-
part="input-field"
|
17
|
-
readonly="[[readonly]]"
|
18
|
-
disabled="[[disabled]]"
|
19
|
-
invalid="[[invalid]]"
|
20
|
-
theme$="[[_theme]]"
|
21
|
-
>
|
22
|
-
<slot name="prefix" slot="prefix"></slot>
|
23
|
-
<slot name="input"></slot>
|
24
|
-
<slot name="suffix" slot="suffix"></slot>
|
25
|
-
<div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
|
26
|
-
</vaadin-input-container>
|
27
|
-
|
28
|
-
<div part="helper-text">
|
29
|
-
<slot name="helper"></slot>
|
30
|
-
</div>
|
31
|
-
|
32
|
-
<div part="error-message">
|
33
|
-
<slot name="error-message"></slot>
|
34
|
-
</div>
|
35
|
-
</div>
|
36
|
-
<slot name="tooltip"></slot>
|
37
|
-
`}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new n.f(this),this._tooltipController.setPosition("top"),this.addController(this._tooltipController)}}customElements.define(m.is,m)}}]);
|