@descope/web-components-ui 1.0.114 → 1.0.116
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1299 -1305
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +1384 -1390
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/201.js +1 -0
- package/dist/umd/241.js +1 -1
- package/dist/umd/447.js +1 -1
- package/dist/umd/65.js +1 -1
- package/dist/umd/803.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/boolean-fields/commonStyles.js +13 -5
- package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +40 -37
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +43 -37
- package/src/components/descope-button/ButtonClass.js +22 -6
- package/src/components/descope-combo-box/ComboBoxClass.js +49 -36
- package/src/components/descope-container/ContainerClass.js +4 -4
- package/src/components/descope-divider/DividerClass.js +74 -55
- package/src/components/descope-email-field/EmailFieldClass.js +11 -47
- package/src/components/descope-link/LinkClass.js +8 -5
- package/src/components/descope-loader-linear/LoaderLinearClass.js +16 -12
- package/src/components/descope-loader-radial/LoaderRadialClass.js +12 -11
- package/src/components/descope-new-password/NewPasswordClass.js +65 -51
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +1 -1
- package/src/components/descope-number-field/NumberFieldClass.js +11 -43
- package/src/components/descope-passcode/PasscodeClass.js +36 -29
- package/src/components/descope-password-field/PasswordFieldClass.js +52 -41
- package/src/components/descope-phone-field/PhoneFieldClass.js +61 -41
- package/src/components/descope-text/TextClass.js +8 -8
- package/src/components/descope-text-area/TextAreaClass.js +50 -48
- package/src/components/descope-text-field/TextFieldClass.js +11 -53
- package/src/components/descope-text-field/textFieldMappings.js +66 -38
- package/src/helpers/themeHelpers/index.js +10 -8
- package/src/helpers/themeHelpers/resetHelpers.js +76 -0
- package/src/index.d.ts +2 -1
- package/src/mixins/createStyleMixin/index.js +38 -27
- package/src/mixins/inputValidationMixin.js +4 -1
- package/src/mixins/proxyInputMixin.js +11 -3
- package/src/theme/components/button.js +31 -16
- package/src/theme/components/checkbox.js +18 -47
- package/src/theme/components/comboBox.js +24 -36
- package/src/theme/components/container.js +34 -47
- package/src/theme/components/divider.js +31 -20
- package/src/theme/components/emailField.js +21 -3
- package/src/theme/components/image.js +1 -1
- package/src/theme/components/index.js +4 -3
- package/src/theme/components/inputWrapper.js +72 -0
- package/src/theme/components/link.js +15 -22
- package/src/theme/components/loader/loaderLinear.js +19 -24
- package/src/theme/components/loader/loaderRadial.js +32 -47
- package/src/theme/components/logo.js +1 -1
- package/src/theme/components/newPassword.js +11 -26
- package/src/theme/components/numberField.js +21 -3
- package/src/theme/components/passcode.js +17 -28
- package/src/theme/components/passwordField.js +19 -65
- package/src/theme/components/phoneField.js +18 -57
- package/src/theme/components/switchToggle.js +20 -34
- package/src/theme/components/text.js +14 -9
- package/src/theme/components/textArea.js +20 -37
- package/src/theme/components/textField.js +21 -68
@@ -19,63 +19,68 @@ const {
|
|
19
19
|
checkboxSurface,
|
20
20
|
checkboxHiddenLabel,
|
21
21
|
label,
|
22
|
-
requiredIndicator
|
22
|
+
requiredIndicator,
|
23
|
+
helperText,
|
24
|
+
errorMessage
|
23
25
|
} = {
|
24
26
|
host: { selector: () => ':host' },
|
25
27
|
label: { selector: '::part(label)' },
|
26
|
-
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
28
|
+
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
27
29
|
component: { selector: 'vaadin-checkbox' },
|
28
30
|
checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
|
29
31
|
checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
|
30
32
|
checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
|
33
|
+
helperText: { selector: '::part(helper-text)' },
|
34
|
+
errorMessage: { selector: '::part(error-message)' },
|
31
35
|
};
|
32
36
|
|
33
37
|
export const CheckboxClass = compose(
|
34
38
|
createStyleMixin({
|
35
39
|
mappings: {
|
36
|
-
|
37
|
-
cursor: component,
|
40
|
+
hostWidth: { ...host, property: 'width' },
|
38
41
|
|
39
|
-
|
40
|
-
checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
41
|
-
checkboxRadius: { ...checkboxElement, property: 'border-radius' },
|
42
|
-
|
43
|
-
checkboxSize: [
|
44
|
-
{ ...checkboxElement, property: 'width' },
|
45
|
-
{ ...label, property: 'margin-left' },
|
46
|
-
{ ...checkboxElement, property: 'height' },
|
47
|
-
{ ...checkboxSurface, property: 'font-size' },
|
48
|
-
{ ...component, property: 'font-size' },
|
49
|
-
{ ...label, property: 'line-height' },
|
50
|
-
{ ...checkboxHiddenLabel, property: 'line-height' }
|
51
|
-
],
|
52
|
-
|
53
|
-
checkboxOutlineWidth: { ...checkboxElement, property: 'outline-width' },
|
54
|
-
checkboxOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
|
55
|
-
checkboxOutlineColor: { ...checkboxElement, property: 'outline-color' },
|
56
|
-
checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
|
57
|
-
|
58
|
-
// Checkmark
|
59
|
-
checkmarkTextColor: { ...checkboxSurface, property: 'color' },
|
60
|
-
|
61
|
-
// Label
|
62
|
-
labelFontSize: [
|
42
|
+
fontSize: [
|
63
43
|
{ ...host, property: 'font-size' },
|
64
44
|
{ ...checkboxElement, property: 'font-size' },
|
65
45
|
{ ...label, property: 'font-size' },
|
66
46
|
{ ...checkboxHiddenLabel, property: 'font-size' }
|
67
47
|
],
|
48
|
+
fontFamily: [
|
49
|
+
{ ...label, property: 'font-family' },
|
50
|
+
{ ...checkboxHiddenLabel, property: 'font-family' },
|
51
|
+
{ ...helperText, property: 'font-family' },
|
52
|
+
{ ...errorMessage, property: 'font-family' }
|
53
|
+
],
|
54
|
+
|
55
|
+
labelTextColor: [
|
56
|
+
{ ...label, property: 'color' },
|
57
|
+
{ ...requiredIndicator, property: 'color' },
|
58
|
+
],
|
59
|
+
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
60
|
+
|
68
61
|
labelFontWeight: [
|
69
62
|
{ ...label, property: 'font-weight' },
|
70
63
|
{ ...checkboxHiddenLabel, property: 'font-weight' }
|
71
64
|
],
|
72
|
-
|
65
|
+
labelSpacing: [
|
73
66
|
{ ...label, property: 'left' },
|
74
67
|
{ ...checkboxHiddenLabel, property: 'padding-left' }
|
75
68
|
],
|
76
|
-
|
77
|
-
|
78
|
-
|
69
|
+
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
70
|
+
inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
71
|
+
inputBorderRadius: { ...checkboxElement, property: 'border-radius' },
|
72
|
+
inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
|
73
|
+
inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
|
74
|
+
inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
|
75
|
+
inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
|
76
|
+
inputSize: [
|
77
|
+
{ ...checkboxElement, property: 'width' },
|
78
|
+
{ ...label, property: 'margin-left' },
|
79
|
+
{ ...checkboxElement, property: 'height' },
|
80
|
+
{ ...checkboxSurface, property: 'font-size' },
|
81
|
+
{ ...component, property: 'font-size' },
|
82
|
+
{ ...label, property: 'line-height' },
|
83
|
+
{ ...checkboxHiddenLabel, property: 'line-height' }
|
79
84
|
],
|
80
85
|
},
|
81
86
|
}),
|
@@ -87,12 +92,10 @@ export const CheckboxClass = compose(
|
|
87
92
|
createProxy({
|
88
93
|
slots: [],
|
89
94
|
wrappedEleName: 'vaadin-text-field',
|
90
|
-
style: `
|
95
|
+
style: () => `
|
91
96
|
${commonStyles}
|
92
|
-
|
93
|
-
|
94
|
-
height: 100%;
|
95
|
-
cursor: pointer;
|
97
|
+
vaadin-text-field {
|
98
|
+
padding: calc(var(${CheckboxClass.cssVarList.inputOutlineWidth}) + var(${CheckboxClass.cssVarList.inputOutlineOffset}));
|
96
99
|
}
|
97
100
|
`,
|
98
101
|
excludeAttrsSync: ['tabindex'],
|
@@ -20,32 +20,39 @@ const {
|
|
20
20
|
checkboxHiddenLabel,
|
21
21
|
label,
|
22
22
|
requiredIndicator,
|
23
|
+
helperText,
|
24
|
+
errorMessage
|
23
25
|
} = {
|
24
26
|
host: { selector: () => ':host' },
|
25
27
|
label: { selector: '::part(label)' },
|
26
|
-
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
28
|
+
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
27
29
|
component: { selector: 'vaadin-checkbox' },
|
28
30
|
checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
|
29
31
|
checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
|
30
32
|
checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
|
33
|
+
helperText: { selector: '::part(helper-text)' },
|
34
|
+
errorMessage: { selector: '::part(error-message)' },
|
31
35
|
};
|
32
36
|
|
33
37
|
export const SwitchToggleClass = compose(
|
34
38
|
createStyleMixin({
|
35
39
|
mappings: {
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
40
|
+
hostWidth: { ...host, property: 'width' },
|
41
|
+
fontSize: [
|
42
|
+
{ ...component, property: 'font-size' },
|
43
|
+
{ ...label, property: 'font-size' },
|
44
|
+
{ ...checkboxHiddenLabel, property: 'font-size' },
|
45
|
+
],
|
46
|
+
fontFamily: [
|
47
|
+
{ ...label, property: 'font-family' },
|
48
|
+
{ ...helperText, property: 'font-family' },
|
49
|
+
{ ...errorMessage, property: 'font-family' }
|
50
|
+
],
|
41
51
|
trackBorderWidth: { ...track, property: 'border-width' },
|
42
52
|
trackBorderStyle: { ...track, property: 'border-style' },
|
43
53
|
trackBorderColor: { ...track, property: 'border-color' },
|
44
|
-
|
45
|
-
// Checkbox
|
46
54
|
trackBackgroundColor: { ...track, property: 'background-color' },
|
47
|
-
|
48
|
-
|
55
|
+
trackBorderRadius: { ...track, property: 'border-radius' },
|
49
56
|
trackWidth: [
|
50
57
|
{ ...track, property: 'width' },
|
51
58
|
],
|
@@ -53,25 +60,19 @@ export const SwitchToggleClass = compose(
|
|
53
60
|
{ ...knob, property: 'font-size' },
|
54
61
|
{ ...track, property: 'height' }
|
55
62
|
],
|
56
|
-
switchOutlineWidth: { ...track, property: 'outline-width' },
|
57
|
-
switchOutlineOffset: { ...track, property: 'outline-offset' },
|
58
|
-
switchOutlineColor: { ...track, property: 'outline-color' },
|
59
|
-
switchOutlineStyle: { ...track, property: 'outline-style' },
|
60
63
|
|
61
|
-
// Knob
|
62
64
|
knobSize: [
|
63
65
|
{ ...knob, property: 'width' },
|
64
66
|
{ ...knob, property: 'height' },
|
65
67
|
],
|
66
68
|
knobTextColor: { ...knob, property: 'color' },
|
67
69
|
knobRadius: { ...knob, property: 'border-radius' },
|
68
|
-
|
70
|
+
knobTransitionDuration: { ...knob, property: 'transition' },
|
69
71
|
knobColor: { ...knob, property: 'background-color' },
|
70
72
|
knobTopOffset: { ...knob, property: 'top' },
|
71
|
-
|
73
|
+
knobLeftOffset: { ...knob, property: 'left' },
|
72
74
|
|
73
|
-
|
74
|
-
labelMargin: [
|
75
|
+
labelSpacing: [
|
75
76
|
{ ...label, property: 'padding-left' },
|
76
77
|
{ ...checkboxHiddenLabel, property: 'padding-left' }
|
77
78
|
],
|
@@ -87,6 +88,11 @@ export const SwitchToggleClass = compose(
|
|
87
88
|
{ ...label, property: 'color' },
|
88
89
|
{ ...requiredIndicator, property: 'color' },
|
89
90
|
],
|
91
|
+
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
92
|
+
inputOutlineWidth: { ...track, property: 'outline-width' },
|
93
|
+
inputOutlineOffset: { ...track, property: 'outline-offset' },
|
94
|
+
inputOutlineColor: { ...track, property: 'outline-color' },
|
95
|
+
inputOutlineStyle: { ...track, property: 'outline-style' },
|
90
96
|
},
|
91
97
|
}),
|
92
98
|
draggableMixin,
|
@@ -98,26 +104,26 @@ export const SwitchToggleClass = compose(
|
|
98
104
|
slots: [],
|
99
105
|
wrappedEleName: 'vaadin-text-field',
|
100
106
|
style: () => `
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
107
|
+
${commonStyles}
|
108
|
+
:host {
|
109
|
+
padding: calc(var(${SwitchToggleClass.cssVarList.inputOutlineWidth}) + var(${SwitchToggleClass.cssVarList.inputOutlineOffset}));
|
110
|
+
}
|
111
|
+
vaadin-text-field::part(label) {
|
112
|
+
left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
|
113
|
+
}
|
114
|
+
vaadin-checkbox[active]::part(checkbox) {
|
115
|
+
transform: none;
|
116
|
+
}
|
117
|
+
vaadin-checkbox[checked]::part(checkbox) {
|
118
|
+
background: none;
|
119
|
+
}
|
120
|
+
vaadin-checkbox::part(checkbox)::after {
|
121
|
+
position: absolute;
|
122
|
+
opacity: 1;
|
123
|
+
content: '';
|
124
|
+
}
|
118
125
|
`,
|
119
126
|
excludeAttrsSync: ['tabindex'],
|
120
127
|
componentName
|
121
128
|
})
|
122
129
|
);
|
123
|
-
|
@@ -12,12 +12,14 @@ export const componentName = getComponentName('button');
|
|
12
12
|
const resetStyles = `
|
13
13
|
:host {
|
14
14
|
display: inline-block;
|
15
|
+
box-sizing: border-box;
|
15
16
|
}
|
16
17
|
vaadin-button {
|
17
18
|
margin: 0;
|
18
19
|
min-width: 0;
|
19
20
|
width: 100%;
|
20
21
|
height: auto;
|
22
|
+
box-shadow: none;
|
21
23
|
}
|
22
24
|
vaadin-button::part(label) {
|
23
25
|
padding: 0;
|
@@ -47,17 +49,23 @@ const { host, label } = {
|
|
47
49
|
export const ButtonClass = compose(
|
48
50
|
createStyleMixin({
|
49
51
|
mappings: {
|
50
|
-
|
51
|
-
|
52
|
-
|
52
|
+
hostWidth: { ...host, property: 'width' },
|
53
|
+
fontSize: { property: 'font-size' },
|
54
|
+
fontFamily: { property: 'font-family' },
|
55
|
+
|
53
56
|
cursor: {},
|
54
57
|
backgroundColor: {},
|
58
|
+
|
59
|
+
outlineOffset: {},
|
60
|
+
outlineColor: {},
|
61
|
+
outlineStyle: {},
|
62
|
+
outlineWidth: {},
|
63
|
+
|
55
64
|
borderRadius: {},
|
56
65
|
borderColor: {},
|
57
66
|
borderStyle: {},
|
58
67
|
borderWidth: {},
|
59
|
-
|
60
|
-
gap: label,
|
68
|
+
|
61
69
|
verticalPadding: [
|
62
70
|
{ property: 'padding-top' },
|
63
71
|
{ property: 'padding-bottom' },
|
@@ -65,7 +73,12 @@ export const ButtonClass = compose(
|
|
65
73
|
horizontalPadding: [
|
66
74
|
{ property: 'padding-left' },
|
67
75
|
{ property: 'padding-right' },
|
68
|
-
]
|
76
|
+
],
|
77
|
+
|
78
|
+
labelTextColor: { property: 'color' },
|
79
|
+
labelTextDecoration: { ...label, property: 'text-decoration' },
|
80
|
+
labelSpacing: { ...label, property: 'gap' },
|
81
|
+
|
69
82
|
}
|
70
83
|
}),
|
71
84
|
draggableMixin,
|
@@ -79,6 +92,9 @@ export const ButtonClass = compose(
|
|
79
92
|
${iconStyles}
|
80
93
|
${loadingIndicatorStyles}
|
81
94
|
${editorOverrides}
|
95
|
+
:host {
|
96
|
+
padding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}))
|
97
|
+
}
|
82
98
|
`,
|
83
99
|
excludeAttrsSync: ['tabindex'],
|
84
100
|
componentName
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { compose } from '../../helpers';
|
2
2
|
import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
|
3
|
+
import { resetInputCursor, resetInputPlaceholder, resetInputReadonlyStyle } from '../../helpers/themeHelpers/resetHelpers';
|
3
4
|
import {
|
4
5
|
createStyleMixin,
|
5
6
|
draggableMixin,
|
@@ -11,7 +12,6 @@ import {
|
|
11
12
|
|
12
13
|
export const componentName = getComponentName('combo-box');
|
13
14
|
|
14
|
-
|
15
15
|
const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
|
16
16
|
constructor() {
|
17
17
|
super();
|
@@ -64,16 +64,22 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
|
|
64
64
|
|
65
65
|
const {
|
66
66
|
host,
|
67
|
-
|
67
|
+
inputField,
|
68
68
|
placeholder,
|
69
69
|
toggle,
|
70
|
-
label
|
70
|
+
label,
|
71
|
+
requiredIndicator,
|
72
|
+
helperText,
|
73
|
+
errorMessage
|
71
74
|
} = {
|
72
75
|
host: { selector: () => ':host' },
|
73
|
-
|
76
|
+
inputField: { selector: '::part(input-field)' },
|
74
77
|
placeholder: { selector: '> input:placeholder-shown' },
|
75
78
|
toggle: { selector: '::part(toggle-button)' },
|
76
|
-
label: { selector: '::part(label)' }
|
79
|
+
label: { selector: '::part(label)' },
|
80
|
+
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
81
|
+
helperText: { selector: '::part(helper-text)' },
|
82
|
+
errorMessage: { selector: '::part(error-message)' }
|
77
83
|
}
|
78
84
|
|
79
85
|
// const { slotted, selected } = {
|
@@ -84,27 +90,38 @@ const {
|
|
84
90
|
export const ComboBoxClass = compose(
|
85
91
|
createStyleMixin({
|
86
92
|
mappings: {
|
87
|
-
|
88
|
-
height: input,
|
89
|
-
padding: input,
|
90
|
-
|
91
|
-
inputBackgroundColor: { ...input, property: 'background-color' },
|
92
|
-
boxShadow: input,
|
93
|
-
|
94
|
-
borderColor: input,
|
95
|
-
borderWidth: input,
|
96
|
-
borderStyle: input,
|
97
|
-
borderRadius: input,
|
98
|
-
|
99
|
-
color: [label, input],
|
100
|
-
|
93
|
+
hostWidth: { ...host, property: 'width' },
|
101
94
|
// we apply font-size also on the host so we can set its width with em
|
102
|
-
fontSize: [
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
95
|
+
fontSize: [
|
96
|
+
{ property: 'font-size' },
|
97
|
+
{ ...host, property: 'font-size' }
|
98
|
+
],
|
99
|
+
fontFamily: [
|
100
|
+
label,
|
101
|
+
placeholder,
|
102
|
+
inputField,
|
103
|
+
helperText,
|
104
|
+
errorMessage
|
105
|
+
],
|
106
|
+
labelTextColor: [
|
107
|
+
{ ...label, property: 'color' },
|
108
|
+
{ ...requiredIndicator, property: 'color' }
|
109
|
+
],
|
110
|
+
inputHeight: { ...inputField, property: 'height' },
|
111
|
+
inputBackgroundColor: { ...inputField, property: 'background-color' },
|
112
|
+
inputBorderColor: { ...inputField, property: 'border-color' },
|
113
|
+
inputBorderWidth: { ...inputField, property: 'border-width' },
|
114
|
+
inputBorderStyle: { ...inputField, property: 'border-style' },
|
115
|
+
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
116
|
+
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
117
|
+
inputValueTextColor: { ...inputField, property: 'color' },
|
118
|
+
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
119
|
+
inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
|
120
|
+
inputDropdownButtonColor: { ...toggle, property: 'color' },
|
121
|
+
inputOutlineColor: { ...inputField, property: 'outline-color' },
|
122
|
+
inputOutlineWidth: { ...inputField, property: 'outline-width' },
|
123
|
+
inputOutlineStyle: { ...inputField, property: 'outline-style' },
|
124
|
+
inputOutlineOffset: { ...inputField, property: 'outline-offset' },
|
108
125
|
|
109
126
|
// we need to use the variables from the portal mixin
|
110
127
|
// so we need to use an arrow function on the selector
|
@@ -140,28 +157,24 @@ export const ComboBoxClass = compose(
|
|
140
157
|
display: inline-flex;
|
141
158
|
box-sizing: border-box;
|
142
159
|
-webkit-mask-image: none;
|
160
|
+
padding: calc(var(${ComboBoxClass.cssVarList.inputOutlineWidth}) + var(${ComboBoxClass.cssVarList.inputOutlineOffset}))
|
143
161
|
}
|
144
162
|
vaadin-combo-box {
|
145
163
|
padding: 0;
|
164
|
+
width: 100%;
|
146
165
|
}
|
147
166
|
vaadin-combo-box [slot="input"] {
|
148
167
|
-webkit-mask-image: none;
|
149
168
|
min-height: 0;
|
150
169
|
}
|
170
|
+
|
151
171
|
vaadin-combo-box::part(input-field) {
|
152
|
-
-webkit-mask-image: none;
|
153
|
-
border-radius: 0;
|
154
172
|
padding: 0;
|
155
173
|
}
|
156
|
-
|
157
|
-
|
158
|
-
}
|
159
|
-
vaadin-combo-box
|
160
|
-
border: none;
|
161
|
-
}
|
162
|
-
vaadin-combo-box[readonly] > input:placeholder-shown {
|
163
|
-
opacity: 1;
|
164
|
-
}
|
174
|
+
|
175
|
+
${resetInputReadonlyStyle('vaadin-combo-box')}
|
176
|
+
${resetInputPlaceholder('vaadin-combo-box')}
|
177
|
+
${resetInputCursor('vaadin-combo-box')}
|
165
178
|
`,
|
166
179
|
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
167
180
|
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
@@ -20,11 +20,11 @@ class RawContainer extends createBaseClass({ componentName, baseSelector: ':host
|
|
20
20
|
width: 100%;
|
21
21
|
height: 100%;
|
22
22
|
display: flex;
|
23
|
-
overflow:
|
23
|
+
overflow: auto;
|
24
24
|
}
|
25
25
|
:host {
|
26
26
|
display: inline-block;
|
27
|
-
overflow:
|
27
|
+
overflow: hidden;
|
28
28
|
}
|
29
29
|
</style>
|
30
30
|
<slot></slot>
|
@@ -35,8 +35,8 @@ class RawContainer extends createBaseClass({ componentName, baseSelector: ':host
|
|
35
35
|
export const ContainerClass = compose(
|
36
36
|
createStyleMixin({
|
37
37
|
mappings: {
|
38
|
-
|
39
|
-
|
38
|
+
hostHeight: { selector: () => ':host', property: 'height' },
|
39
|
+
hostWidth: { selector: () => ':host', property: 'width' },
|
40
40
|
|
41
41
|
verticalPadding: [
|
42
42
|
{ property: 'padding-top' },
|
@@ -13,77 +13,96 @@ class RawDivider extends createBaseClass({ componentName, baseSelector: ':host >
|
|
13
13
|
super();
|
14
14
|
|
15
15
|
this.attachShadow({ mode: 'open' }).innerHTML = `
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
<descope-text>
|
48
|
-
<slot></slot>
|
49
|
-
</descope-text>
|
50
|
-
</div>
|
51
|
-
`;
|
16
|
+
<style>
|
17
|
+
:host {
|
18
|
+
display: inline-block;
|
19
|
+
}
|
20
|
+
:host > div {
|
21
|
+
display: flex;
|
22
|
+
height: 100%;
|
23
|
+
width: 100%;
|
24
|
+
}
|
25
|
+
:host > div::before,
|
26
|
+
:host > div::after {
|
27
|
+
content: '';
|
28
|
+
flex-grow: 1;
|
29
|
+
}
|
30
|
+
descope-text {
|
31
|
+
flex-grow: 0;
|
32
|
+
flex-shrink: 0;
|
33
|
+
}
|
34
|
+
:host(:empty) descope-text {
|
35
|
+
display: none;
|
36
|
+
}
|
37
|
+
:host([vertical="true"]) div {
|
38
|
+
width: fit-content;
|
39
|
+
}
|
40
|
+
</style>
|
41
|
+
<div>
|
42
|
+
<descope-text>
|
43
|
+
<slot></slot>
|
44
|
+
</descope-text>
|
45
|
+
</div>
|
46
|
+
`;
|
52
47
|
|
53
48
|
this.textComponent = this.shadowRoot.querySelector('descope-text');
|
54
49
|
|
55
50
|
forwardAttrs(this, this.textComponent, {
|
56
51
|
includeAttrs: ['mode', 'variant', 'italic']
|
57
|
-
})
|
52
|
+
});
|
58
53
|
}
|
59
54
|
}
|
60
55
|
|
61
|
-
const
|
62
|
-
|
56
|
+
const {
|
57
|
+
host,
|
58
|
+
before,
|
59
|
+
after,
|
60
|
+
text,
|
61
|
+
} = {
|
62
|
+
host: { selector: () => ':host' },
|
63
63
|
before: { selector: '::before' },
|
64
64
|
after: { selector: '::after' },
|
65
65
|
text: { selector: 'descope-text' },
|
66
|
-
host: { selector: () => ':host' },
|
67
66
|
};
|
68
67
|
|
69
|
-
const { root, before, after, text, host } = selectors;
|
70
|
-
|
71
68
|
export const DividerClass = compose(
|
72
69
|
createStyleMixin({
|
73
70
|
mappings: {
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
71
|
+
hostWidth: { ...host, property: 'width' },
|
72
|
+
hostPadding: { ...host, property: 'padding' },
|
73
|
+
|
74
|
+
minHeight: {},
|
75
|
+
alignItems: {},
|
76
|
+
alignSelf: {},
|
77
|
+
flexDirection: {},
|
78
|
+
|
79
|
+
labelTextWidth: { ...text, property: 'width' },
|
80
|
+
labelTextMaxWidth: { ...text, property: 'max-width' },
|
81
|
+
labelTextVerticalSpacing: [
|
82
|
+
{ ...text, property: 'padding-top' },
|
83
|
+
{ ...text, property: 'padding-bottom' }
|
84
|
+
],
|
85
|
+
labelTextHorizontalSpacing: [
|
86
|
+
{ ...text, property: 'padding-right' },
|
87
|
+
{ ...text, property: 'padding-left' }
|
88
|
+
],
|
89
|
+
|
90
|
+
stripeColor: [
|
91
|
+
{ ...before, property: 'background-color' },
|
92
|
+
{ ...after, property: 'background-color' }
|
93
|
+
],
|
94
|
+
stripeHorizontalThickness: [
|
95
|
+
{ ...before, property: 'height' },
|
96
|
+
{ ...after, property: 'height' }
|
97
|
+
],
|
98
|
+
stripeVerticalThickness: [
|
99
|
+
{ ...before, property: 'width' },
|
100
|
+
{ ...after, property: 'width' }
|
101
|
+
],
|
102
|
+
stripeColorOpacity: [
|
103
|
+
{ ...before, property: 'opacity' },
|
104
|
+
{ ...after, property: 'opacity' }
|
105
|
+
],
|
87
106
|
},
|
88
107
|
}),
|
89
108
|
draggableMixin,
|