@descope/web-components-ui 1.0.114 → 1.0.115
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1282 -1290
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +1372 -1380
- 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/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 +32 -45
- 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
@@ -6,14 +6,15 @@ import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './
|
|
6
6
|
|
7
7
|
const STYLE_OVERRIDE_ATTR_PREFIX = 'st'
|
8
8
|
|
9
|
-
|
10
9
|
export const createStyleMixin =
|
11
|
-
({ mappings = {} }) => (superclass) =>
|
12
|
-
|
10
|
+
({ mappings = {}, componentNameOverride = '' }) => (superclass) => {
|
11
|
+
const componentName = componentNameOverride || superclass.componentName;
|
12
|
+
|
13
|
+
return class CustomStyleMixinClass extends superclass {
|
13
14
|
static get cssVarList() {
|
14
15
|
return {
|
15
16
|
...superclass.cssVarList,
|
16
|
-
...createCssVarsList(
|
17
|
+
...createCssVarsList(componentName, {
|
17
18
|
...mappings,
|
18
19
|
})
|
19
20
|
};
|
@@ -52,30 +53,32 @@ export const createStyleMixin =
|
|
52
53
|
this.#createOverridesStyle();
|
53
54
|
}
|
54
55
|
|
55
|
-
get componentTheme() {
|
56
|
-
return componentsThemeManager.currentTheme?.[
|
56
|
+
get #componentTheme() {
|
57
|
+
return componentsThemeManager.currentTheme?.[componentName] || ''
|
57
58
|
}
|
58
59
|
|
59
60
|
#onComponentThemeChange() {
|
60
|
-
this.#themeStyleEle.innerHTML = this
|
61
|
+
this.#themeStyleEle.innerHTML = this.#componentTheme[this.#themeSection]
|
61
62
|
}
|
62
63
|
|
63
64
|
#createComponentTheme() {
|
64
65
|
this.#themeStyleEle = document.createElement('style');
|
65
|
-
this.#themeStyleEle.id =
|
66
|
+
this.#themeStyleEle.id = `style-mixin-theme__${componentName}`;
|
66
67
|
this.#rootElement.prepend(this.#themeStyleEle);
|
67
68
|
this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.#onComponentThemeChange.bind(this))
|
68
69
|
this.#onComponentThemeChange()
|
69
70
|
}
|
70
71
|
|
71
72
|
#createOverridesStyle() {
|
72
|
-
this.#
|
73
|
-
|
73
|
+
if (this.#styleAttributes.length) {
|
74
|
+
this.#overrideStyleEle = document.createElement('style');
|
75
|
+
this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
|
74
76
|
|
75
|
-
|
77
|
+
const classSpecifier = createClassSelectorSpecifier(componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
|
76
78
|
|
77
|
-
|
78
|
-
|
79
|
+
this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
|
80
|
+
this.#rootElement.append(this.#overrideStyleEle);
|
81
|
+
}
|
79
82
|
}
|
80
83
|
|
81
84
|
#setAttrOverride(attrName, value) {
|
@@ -83,37 +86,44 @@ export const createStyleMixin =
|
|
83
86
|
if (!style) return;
|
84
87
|
|
85
88
|
const varName = getCssVarName(
|
86
|
-
|
89
|
+
componentName,
|
87
90
|
attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
|
88
91
|
);
|
89
92
|
|
90
93
|
if (value) style?.setProperty(varName, value);
|
91
|
-
else {
|
94
|
+
else {
|
92
95
|
style?.removeProperty(varName);
|
93
96
|
this.removeAttribute(attrName)
|
94
97
|
}
|
95
98
|
}
|
96
99
|
|
97
100
|
#updateOverridesStyle(attrs = []) {
|
101
|
+
let shouldUpdate = false;
|
102
|
+
|
98
103
|
for (const attr of attrs) {
|
99
104
|
if (this.#styleAttributes.includes(attr)) {
|
100
105
|
this.#setAttrOverride(attr, this.getAttribute(attr));
|
106
|
+
shouldUpdate = true;
|
101
107
|
}
|
102
108
|
}
|
103
109
|
|
104
|
-
|
105
|
-
|
110
|
+
if (shouldUpdate) {
|
111
|
+
// we are rewriting the style back to the style tag
|
112
|
+
this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText
|
113
|
+
}
|
106
114
|
}
|
107
115
|
|
108
116
|
#createMappingStyle() {
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
+
if (Object.keys(mappings).length) {
|
118
|
+
const themeStyle = document.createElement('style');
|
119
|
+
themeStyle.id = `style-mixin-mappings__${componentName}`
|
120
|
+
themeStyle.innerHTML = createStyle(
|
121
|
+
kebabCaseJoin(componentName, this.#componentNameSuffix),
|
122
|
+
this.#baseSelector,
|
123
|
+
mappings
|
124
|
+
);
|
125
|
+
this.#rootElement.prepend(themeStyle);
|
126
|
+
}
|
117
127
|
}
|
118
128
|
|
119
129
|
#addClassName(className) {
|
@@ -123,7 +133,7 @@ export const createStyleMixin =
|
|
123
133
|
init() {
|
124
134
|
super.init?.();
|
125
135
|
if (this.shadowRoot.isConnected) {
|
126
|
-
this.#addClassName(
|
136
|
+
this.#addClassName(componentName)
|
127
137
|
|
128
138
|
// this is instead attributeChangedCallback because we cannot use static methods in this case
|
129
139
|
observeAttributes(this, this.#updateOverridesStyle.bind(this), {})
|
@@ -135,4 +145,5 @@ export const createStyleMixin =
|
|
135
145
|
|
136
146
|
this.#disconnectThemeManager?.();
|
137
147
|
}
|
138
|
-
}
|
148
|
+
}
|
149
|
+
};
|
@@ -53,13 +53,16 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
|
|
53
53
|
stepMismatch,
|
54
54
|
tooShort,
|
55
55
|
tooLong,
|
56
|
+
rangeOverflow,
|
57
|
+
rangeUnderflow,
|
58
|
+
badInput,
|
56
59
|
customError
|
57
60
|
} = flags;
|
58
61
|
switch (true) {
|
59
62
|
case valueMissing:
|
60
63
|
return this.getAttribute(errorAttributes.valueMissing) ||
|
61
64
|
this.defaultErrorMsgValueMissing
|
62
|
-
case patternMismatch || typeMismatch || stepMismatch:
|
65
|
+
case patternMismatch || typeMismatch || stepMismatch || rangeOverflow || rangeUnderflow || badInput:
|
63
66
|
return this.getAttribute(errorAttributes.patternMismatch) ||
|
64
67
|
this.defaultErrorMsgPatternMismatch
|
65
68
|
case tooShort:
|
@@ -1,5 +1,7 @@
|
|
1
|
-
import {
|
1
|
+
import { compose } from "../helpers";
|
2
|
+
import { forwardAttrs, getComponentName } from "../helpers/componentHelpers";
|
2
3
|
import { createDispatchEvent } from "../helpers/mixinsHelpers";
|
4
|
+
import { createStyleMixin } from "./createStyleMixin";
|
3
5
|
import { inputValidationMixin } from "./inputValidationMixin";
|
4
6
|
|
5
7
|
const errorAttrs = ['invalid', 'required'];
|
@@ -30,7 +32,7 @@ const getNestedInput = (ele) => {
|
|
30
32
|
}
|
31
33
|
}
|
32
34
|
|
33
|
-
|
35
|
+
const proxyInputMixin = (superclass) =>
|
34
36
|
class ProxyInputMixinClass extends inputValidationMixin(superclass) {
|
35
37
|
static get observedAttributes() {
|
36
38
|
return [...superclass.observedAttributes || [], ...errorAttrs];
|
@@ -131,6 +133,12 @@ export const proxyInputMixin = (superclass) =>
|
|
131
133
|
propertyObserver(this, this.inputElement, 'selectionStart');
|
132
134
|
this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
|
133
135
|
|
134
|
-
forwardAttrs(this, this.inputElement, {includeAttrs: ['inputmode']})
|
136
|
+
forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] })
|
135
137
|
}
|
136
138
|
};
|
139
|
+
|
140
|
+
const composedProxyInputMixin = compose(
|
141
|
+
proxyInputMixin,
|
142
|
+
createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }))
|
143
|
+
|
144
|
+
export { composedProxyInputMixin as proxyInputMixin }
|
@@ -21,6 +21,8 @@ const horizontalPaddingRatio = 2;
|
|
21
21
|
const button = {
|
22
22
|
...helperTheme,
|
23
23
|
|
24
|
+
[compVars.fontFamily]: globalRefs.fonts.font1.family,
|
25
|
+
|
24
26
|
[compVars.cursor]: 'pointer',
|
25
27
|
|
26
28
|
[compVars.borderRadius]: globalRefs.radius.sm,
|
@@ -28,21 +30,26 @@ const button = {
|
|
28
30
|
[compVars.borderStyle]: 'solid',
|
29
31
|
[compVars.borderColor]: 'transparent',
|
30
32
|
|
31
|
-
[compVars.
|
33
|
+
[compVars.labelSpacing]: '0.25em',
|
32
34
|
|
33
35
|
[compVars.verticalPadding]: `calc(var(${compVars.fontSize}) / ${verticalPaddingRatio})`,
|
34
36
|
[compVars.horizontalPadding]: `calc(var(${compVars.fontSize}) / ${horizontalPaddingRatio})`,
|
35
37
|
|
38
|
+
[compVars.outlineWidth]: globals.border.sm,
|
39
|
+
[compVars.outlineOffset]: '1px',
|
40
|
+
[compVars.outlineStyle]: 'solid',
|
41
|
+
[compVars.outlineColor]: 'transparent',
|
42
|
+
|
36
43
|
size: {
|
37
|
-
xs: { [compVars.fontSize]: '
|
38
|
-
sm: { [compVars.fontSize]: '
|
39
|
-
md: { [compVars.fontSize]: '
|
40
|
-
lg: { [compVars.fontSize]: '
|
41
|
-
xl: { [compVars.fontSize]: '
|
44
|
+
xs: { [compVars.fontSize]: '8px' },
|
45
|
+
sm: { [compVars.fontSize]: '10px' },
|
46
|
+
md: { [compVars.fontSize]: '14px' },
|
47
|
+
lg: { [compVars.fontSize]: '20px' },
|
48
|
+
xl: { [compVars.fontSize]: '25px' }
|
42
49
|
},
|
43
50
|
|
44
51
|
_fullWidth: {
|
45
|
-
[compVars.
|
52
|
+
[compVars.hostWidth]: '100%'
|
46
53
|
},
|
47
54
|
|
48
55
|
_loading: {
|
@@ -51,7 +58,7 @@ const button = {
|
|
51
58
|
|
52
59
|
variant: {
|
53
60
|
contained: {
|
54
|
-
[compVars.
|
61
|
+
[compVars.labelTextColor]: helperRefs.contrast,
|
55
62
|
[compVars.backgroundColor]: helperRefs.main,
|
56
63
|
_hover: {
|
57
64
|
[compVars.backgroundColor]: helperRefs.dark
|
@@ -62,28 +69,36 @@ const button = {
|
|
62
69
|
},
|
63
70
|
|
64
71
|
outline: {
|
65
|
-
[compVars.
|
72
|
+
[compVars.labelTextColor]: helperRefs.main,
|
66
73
|
[compVars.borderColor]: 'currentColor',
|
67
74
|
_hover: {
|
68
|
-
[compVars.
|
75
|
+
[compVars.labelTextColor]: helperRefs.dark,
|
69
76
|
},
|
70
77
|
_active: {
|
71
|
-
[compVars.
|
78
|
+
[compVars.labelTextColor]: helperRefs.light,
|
72
79
|
}
|
73
80
|
},
|
74
81
|
|
75
82
|
link: {
|
76
|
-
[compVars.
|
83
|
+
[compVars.labelTextColor]: helperRefs.main,
|
77
84
|
_hover: {
|
78
|
-
[compVars.
|
79
|
-
[compVars.
|
85
|
+
[compVars.labelTextColor]: helperRefs.main,
|
86
|
+
[compVars.labelTextDecoration]: 'underline'
|
80
87
|
},
|
81
88
|
_active: {
|
82
|
-
[compVars.
|
89
|
+
[compVars.labelTextColor]: helperRefs.dark
|
83
90
|
}
|
84
91
|
}
|
92
|
+
},
|
93
|
+
|
94
|
+
_focused: {
|
95
|
+
[compVars.outlineColor]: globals.colors.surface.main,
|
85
96
|
}
|
86
97
|
};
|
87
98
|
|
88
99
|
export default button;
|
89
|
-
|
100
|
+
|
101
|
+
export const vars = {
|
102
|
+
...compVars,
|
103
|
+
...helperVars
|
104
|
+
};
|
@@ -1,65 +1,36 @@
|
|
1
1
|
import globals from '../globals';
|
2
2
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
3
3
|
import { CheckboxClass } from '../../components/boolean-fields/descope-checkbox/CheckboxClass';
|
4
|
+
import { refs } from './inputWrapper';
|
4
5
|
|
5
6
|
const globalRefs = getThemeRefs(globals);
|
6
7
|
const vars = CheckboxClass.cssVarList;
|
7
8
|
|
8
9
|
const checkbox = {
|
9
|
-
[vars.
|
10
|
-
[vars.
|
11
|
-
|
12
|
-
[vars.
|
13
|
-
[vars.
|
14
|
-
|
15
|
-
[vars.labelTextColor]: globalRefs.colors.surface.contrast,
|
16
|
-
[vars.labelMargin]: '0.5em',
|
10
|
+
[vars.hostWidth]: refs.width,
|
11
|
+
[vars.fontSize]: refs.fontSize,
|
12
|
+
[vars.fontFamily]: refs.fontFamily,
|
13
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
14
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
17
15
|
[vars.labelFontWeight]: '400',
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
md: {
|
27
|
-
[vars.labelFontSize]: '14px',
|
28
|
-
},
|
29
|
-
lg: {
|
30
|
-
[vars.labelFontSize]: '20px',
|
31
|
-
},
|
32
|
-
xl: {
|
33
|
-
[vars.labelFontSize]: '25px',
|
34
|
-
}
|
35
|
-
},
|
36
|
-
|
37
|
-
_fullWidth: {
|
38
|
-
[vars.width]: '100%',
|
39
|
-
},
|
16
|
+
[vars.labelSpacing]: '0.5em',
|
17
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
18
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
19
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
20
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
21
|
+
[vars.inputBorderRadius]: refs.borderRadius,
|
22
|
+
[vars.inputBackgroundColor]: globalRefs.colors.surface.main,
|
23
|
+
[vars.inputSize]: '2em',
|
40
24
|
|
41
25
|
_checked: {
|
42
|
-
[vars.
|
43
|
-
[vars.
|
26
|
+
[vars.inputBackgroundColor]: globalRefs.colors.primary.main,
|
27
|
+
[vars.inputValueTextColor]: globalRefs.colors.primary.contrast,
|
44
28
|
},
|
45
29
|
|
46
30
|
_disabled: {
|
47
|
-
[vars.
|
31
|
+
[vars.inputBackgroundColor]: globalRefs.colors.surface.main,
|
48
32
|
},
|
49
|
-
|
50
|
-
_focused: {
|
51
|
-
[vars.checkboxOutlineWidth]: '2px',
|
52
|
-
[vars.checkboxOutlineOffset]: '1px',
|
53
|
-
[vars.checkboxOutlineColor]: globalRefs.colors.primary.main,
|
54
|
-
[vars.checkboxOutlineStyle]: 'solid'
|
55
|
-
},
|
56
|
-
|
57
|
-
_invalid: {
|
58
|
-
[vars.checkboxOutlineColor]: globalRefs.colors.error.main,
|
59
|
-
[vars.labelTextColor]: globalRefs.colors.error.main
|
60
|
-
},
|
61
|
-
|
62
33
|
};
|
63
34
|
|
64
35
|
export default checkbox;
|
65
|
-
export { vars }
|
36
|
+
export { vars }
|
@@ -1,56 +1,44 @@
|
|
1
1
|
import globals from '../globals';
|
2
2
|
import { ComboBoxClass } from '../../components/descope-combo-box/ComboBoxClass';
|
3
3
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
4
|
+
import { refs } from './inputWrapper';
|
4
5
|
|
5
6
|
const globalRefs = getThemeRefs(globals);
|
6
|
-
|
7
7
|
const vars = ComboBoxClass.cssVarList;
|
8
8
|
|
9
9
|
export const comboBox = {
|
10
|
-
[vars.
|
11
|
-
[vars.
|
12
|
-
[vars.
|
13
|
-
[vars.
|
14
|
-
[vars.
|
15
|
-
[vars.
|
16
|
-
[vars.
|
17
|
-
[vars.
|
18
|
-
[vars.
|
19
|
-
[vars.
|
20
|
-
|
21
|
-
[vars.
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
},
|
30
|
-
md: {
|
31
|
-
[vars.fontSize]: '14px',
|
32
|
-
},
|
33
|
-
lg: {
|
34
|
-
[vars.fontSize]: '20px',
|
35
|
-
},
|
36
|
-
xl: {
|
37
|
-
[vars.fontSize]: '25px',
|
38
|
-
}
|
39
|
-
},
|
10
|
+
[vars.hostWidth]: refs.width,
|
11
|
+
[vars.fontSize]: refs.fontSize,
|
12
|
+
[vars.fontFamily]: refs.fontFamily,
|
13
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
14
|
+
[vars.inputBorderColor]: refs.borderColor,
|
15
|
+
[vars.inputBorderWidth]: refs.borderWidth,
|
16
|
+
[vars.inputBorderStyle]: refs.borderStyle,
|
17
|
+
[vars.inputBorderRadius]: refs.borderRadius,
|
18
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
19
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
20
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
21
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
22
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
23
|
+
[vars.inputValueTextColor]: refs.valueTextColor,
|
24
|
+
[vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
25
|
+
[vars.inputBackgroundColor]: refs.backgroundColor,
|
26
|
+
[vars.inputHeight]: refs.inputHeight,
|
27
|
+
[vars.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
|
28
|
+
[vars.inputDropdownButtonCursor]: 'pointer',
|
40
29
|
|
41
30
|
_readonly: {
|
42
|
-
[vars.
|
31
|
+
[vars.inputDropdownButtonCursor]: 'default'
|
43
32
|
},
|
44
33
|
|
45
34
|
_invalid: {
|
46
|
-
[vars.
|
47
|
-
[vars.placeholderColor]: globalRefs.colors.error.light,
|
48
|
-
[vars.toggleColor]: globalRefs.colors.error.main,
|
35
|
+
[vars.inputDropdownButtonColor]: globalRefs.colors.error.main
|
49
36
|
},
|
37
|
+
|
50
38
|
// [vars.overlayCursor]: 'pointer',
|
51
39
|
// [vars.overlayBackground]: globalRefs.colors.surface.light,
|
52
40
|
// [vars.overlayBorder]: `2px solid red`,
|
53
41
|
};
|
54
42
|
|
55
43
|
export default comboBox;
|
56
|
-
export { vars }
|
44
|
+
export { vars }
|
@@ -25,22 +25,28 @@ const [helperTheme, helperRefs, helperVars] =
|
|
25
25
|
shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
|
26
26
|
}, componentName)
|
27
27
|
|
28
|
+
const { shadowColor } = helperRefs;
|
29
|
+
|
28
30
|
const container = {
|
29
31
|
...helperTheme,
|
30
|
-
|
32
|
+
|
33
|
+
[compVars.hostWidth]: '100%',
|
31
34
|
[compVars.boxShadow]: 'none',
|
32
35
|
[compVars.backgroundColor]: globalRefs.colors.surface.light,
|
33
36
|
[compVars.color]: globalRefs.colors.surface.contrast,
|
37
|
+
|
34
38
|
verticalPadding: {
|
35
39
|
sm: { [compVars.verticalPadding]: '5px' },
|
36
40
|
md: { [compVars.verticalPadding]: '10px' },
|
37
41
|
lg: { [compVars.verticalPadding]: '20px' },
|
38
42
|
},
|
43
|
+
|
39
44
|
horizontalPadding: {
|
40
45
|
sm: { [compVars.horizontalPadding]: '5px' },
|
41
46
|
md: { [compVars.horizontalPadding]: '10px' },
|
42
47
|
lg: { [compVars.horizontalPadding]: '20px' },
|
43
48
|
},
|
49
|
+
|
44
50
|
direction: {
|
45
51
|
row: {
|
46
52
|
[compVars.flexDirection]: 'row',
|
@@ -48,72 +54,53 @@ const container = {
|
|
48
54
|
[compVars.justifyContent]: helperRefs.horizontalAlignment,
|
49
55
|
[compVars.flexWrap]: 'wrap',
|
50
56
|
horizontalAlignment: {
|
51
|
-
spaceBetween: {
|
57
|
+
spaceBetween: {
|
58
|
+
[helperVars.horizontalAlignment]: 'space-between'
|
59
|
+
},
|
52
60
|
}
|
53
61
|
},
|
54
|
-
|
55
62
|
column: {
|
56
63
|
[compVars.flexDirection]: 'column',
|
57
64
|
[compVars.alignItems]: helperRefs.horizontalAlignment,
|
58
65
|
[compVars.justifyContent]: helperRefs.verticalAlignment,
|
59
66
|
verticalAlignment: {
|
60
|
-
spaceBetween: {
|
67
|
+
spaceBetween: {
|
68
|
+
[helperVars.verticalAlignment]: 'space-between'
|
69
|
+
}
|
61
70
|
}
|
62
71
|
},
|
63
72
|
},
|
64
73
|
|
65
74
|
spaceBetween: {
|
66
|
-
sm: {
|
67
|
-
|
68
|
-
}
|
69
|
-
md: {
|
70
|
-
[compVars.gap]: '20px'
|
71
|
-
},
|
72
|
-
lg: {
|
73
|
-
[compVars.gap]: '30px'
|
74
|
-
}
|
75
|
+
sm: { [compVars.gap]: '10px' },
|
76
|
+
md: { [compVars.gap]: '20px' },
|
77
|
+
lg: { [compVars.gap]: '30px' }
|
75
78
|
},
|
76
79
|
|
77
80
|
shadow: {
|
78
|
-
sm: {
|
79
|
-
|
80
|
-
},
|
81
|
-
|
82
|
-
[compVars.boxShadow]: `${globalRefs.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.md} ${helperRefs.shadowColor}`
|
83
|
-
},
|
84
|
-
lg: {
|
85
|
-
[compVars.boxShadow]: `${globalRefs.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.lg} ${helperRefs.shadowColor}`
|
86
|
-
},
|
87
|
-
xl: {
|
88
|
-
[compVars.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
|
89
|
-
},
|
81
|
+
sm: { [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}` },
|
82
|
+
md: { [compVars.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}` },
|
83
|
+
lg: { [compVars.boxShadow]: `${globalRefs.shadow.wide.lg} ${shadowColor}, ${globalRefs.shadow.narrow.lg} ${shadowColor}` },
|
84
|
+
xl: { [compVars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}` },
|
90
85
|
'2xl': {
|
91
86
|
[helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
92
|
-
[compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${
|
87
|
+
[compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${shadowColor}`
|
93
88
|
},
|
94
89
|
},
|
95
90
|
|
96
91
|
borderRadius: {
|
97
|
-
sm: {
|
98
|
-
|
99
|
-
},
|
100
|
-
|
101
|
-
|
102
|
-
},
|
103
|
-
lg: {
|
104
|
-
[compVars.borderRadius]: globalRefs.radius.lg
|
105
|
-
},
|
106
|
-
xl: {
|
107
|
-
[compVars.borderRadius]: globalRefs.radius.xl
|
108
|
-
},
|
109
|
-
'2xl': {
|
110
|
-
[compVars.borderRadius]: globalRefs.radius['2xl']
|
111
|
-
},
|
112
|
-
'3xl': {
|
113
|
-
[compVars.borderRadius]: globalRefs.radius['3xl']
|
114
|
-
},
|
92
|
+
sm: { [compVars.borderRadius]: globalRefs.radius.sm },
|
93
|
+
md: { [compVars.borderRadius]: globalRefs.radius.md },
|
94
|
+
lg: { [compVars.borderRadius]: globalRefs.radius.lg },
|
95
|
+
xl: { [compVars.borderRadius]: globalRefs.radius.xl },
|
96
|
+
'2xl': { [compVars.borderRadius]: globalRefs.radius['2xl'] },
|
97
|
+
'3xl': { [compVars.borderRadius]: globalRefs.radius['3xl'] },
|
115
98
|
}
|
116
99
|
};
|
117
100
|
|
118
101
|
export default container;
|
119
|
-
|
102
|
+
|
103
|
+
export const vars = {
|
104
|
+
...compVars,
|
105
|
+
...helperVars
|
106
|
+
};
|
@@ -1,37 +1,48 @@
|
|
1
|
+
import globals from '../globals';
|
1
2
|
import { componentName, DividerClass } from '../../components/descope-divider/DividerClass';
|
2
3
|
import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
|
3
|
-
import globals from '../globals';
|
4
4
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
6
|
-
|
7
6
|
const compVars = DividerClass.cssVarList;
|
8
7
|
|
9
|
-
const
|
10
|
-
|
11
|
-
|
8
|
+
const [
|
9
|
+
helperTheme,
|
10
|
+
helperRefs,
|
11
|
+
helperVars
|
12
|
+
] = createHelperVars({
|
13
|
+
thickness: '2px',
|
14
|
+
spacing: '10px'
|
15
|
+
}, componentName);
|
12
16
|
|
13
17
|
const divider = {
|
14
18
|
...helperTheme,
|
19
|
+
|
15
20
|
[compVars.alignItems]: 'center',
|
16
|
-
[compVars.dividerHeight]: helperRefs.thickness,
|
17
|
-
[compVars.backgroundColor]: globalRefs.colors.surface.main,
|
18
|
-
[compVars.textPadding]: `0 ${helperRefs.textPaddingSize}`,
|
19
|
-
[compVars.width]: '100%',
|
20
21
|
[compVars.flexDirection]: 'row',
|
21
|
-
[compVars.alignSelf]: '
|
22
|
-
[compVars.
|
23
|
-
[compVars.
|
22
|
+
[compVars.alignSelf]: 'stretch',
|
23
|
+
[compVars.hostWidth]: '100%',
|
24
|
+
[compVars.stripeColor]: globalRefs.colors.surface.main,
|
25
|
+
[compVars.stripeColorOpacity]: '0.5',
|
26
|
+
[compVars.stripeHorizontalThickness]: helperRefs.thickness,
|
27
|
+
[compVars.labelTextWidth]: 'fit-content',
|
28
|
+
[compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
|
29
|
+
[compVars.labelTextHorizontalSpacing]: helperRefs.spacing,
|
30
|
+
|
24
31
|
_vertical: {
|
25
|
-
[compVars.padding]: `0 calc(${thickness} * 3)`,
|
26
|
-
[compVars.width]: 'fit-content',
|
27
|
-
[compVars.textPadding]: `${helperRefs.textPaddingSize} 0`,
|
28
|
-
[compVars.flexDirection]: 'column',
|
29
32
|
[compVars.minHeight]: '200px',
|
30
|
-
[compVars.
|
31
|
-
[compVars.
|
32
|
-
[compVars.
|
33
|
+
[compVars.flexDirection]: 'column',
|
34
|
+
[compVars.hostWidth]: 'fit-content',
|
35
|
+
[compVars.hostPadding]: `0 calc(${helperRefs.thickness} * 3)`,
|
36
|
+
[compVars.stripeVerticalThickness]: helperRefs.thickness,
|
37
|
+
[compVars.labelTextWidth]: 'fit-content',
|
38
|
+
[compVars.labelTextMaxWidth]: '100%',
|
39
|
+
[compVars.labelTextVerticalSpacing]: helperRefs.spacing,
|
33
40
|
}
|
34
41
|
};
|
35
42
|
|
36
43
|
export default divider;
|
37
|
-
|
44
|
+
|
45
|
+
export const vars = {
|
46
|
+
...compVars,
|
47
|
+
...helperVars
|
48
|
+
};
|
@@ -1,9 +1,27 @@
|
|
1
1
|
import { EmailFieldClass } from '../../components/descope-email-field/EmailFieldClass';
|
2
|
-
import {
|
2
|
+
import { refs } from './inputWrapper';
|
3
|
+
|
4
|
+
const vars = EmailFieldClass.cssVarList;
|
3
5
|
|
4
6
|
const emailField = {
|
5
|
-
|
7
|
+
[vars.hostWidth]: refs.width,
|
8
|
+
[vars.fontSize]: refs.fontSize,
|
9
|
+
[vars.fontFamily]: refs.fontFamily,
|
10
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
11
|
+
[vars.inputValueTextColor]: refs.valueTextColor,
|
12
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
13
|
+
[vars.inputPlaceholderColor]: refs.placeholderTextColor,
|
14
|
+
[vars.inputBorderWidth]: refs.borderWidth,
|
15
|
+
[vars.inputBorderStyle]: refs.borderStyle,
|
16
|
+
[vars.inputBorderColor]: refs.borderColor,
|
17
|
+
[vars.inputBorderRadius]: refs.borderRadius,
|
18
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
19
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
20
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
21
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
22
|
+
[vars.inputBackgroundColor]: refs.backgroundColor,
|
23
|
+
[vars.inputHeight]: refs.inputHeight
|
6
24
|
};
|
7
25
|
|
8
26
|
export default emailField;
|
9
|
-
export
|
27
|
+
export { vars };
|