@descope/web-components-ui 1.0.333 → 1.0.335
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +86 -509
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +88 -514
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4392.js +1 -1
- package/dist/umd/4978.js +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +4 -4
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-new-password-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-password-index-js.js +1 -1
- package/dist/umd/descope-radio-group-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +2 -2
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +2 -2
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-email-field/EmailFieldClass.js +3 -103
- package/src/components/descope-grid/GridClass.js +1 -0
- package/src/components/descope-new-password/NewPasswordClass.js +0 -24
- package/src/components/descope-password/PasswordClass.js +1 -126
- package/src/components/descope-text-field/TextFieldClass.js +1 -26
- package/src/components/descope-text-field/textFieldMappings.js +6 -37
- package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js +2 -11
- package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +2 -5
- package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +1 -1
- package/src/mixins/proxyInputMixin.js +2 -5
- package/src/theme/components/comboBox.js +10 -15
- package/src/theme/components/emailField.js +10 -15
- package/src/theme/components/grid.js +1 -0
- package/src/theme/components/multiSelectComboBox.js +9 -10
- package/src/theme/components/newPassword.js +1 -6
- package/src/theme/components/numberField.js +10 -15
- package/src/theme/components/password.js +9 -14
- package/src/theme/components/phoneField.js +3 -8
- package/src/theme/components/phoneInputBoxField.js +9 -14
- package/src/theme/components/textField.js +10 -15
- package/src/helpers/externalInputs.js +0 -76
@@ -42,7 +42,7 @@ const proxyInputMixin =
|
|
42
42
|
({
|
43
43
|
proxyProps = [],
|
44
44
|
// useProxyTargets flag allows to forwardProps to other targets, other than
|
45
|
-
// `this.inputElement`.
|
45
|
+
// `this.inputElement`.
|
46
46
|
// if needed
|
47
47
|
useProxyTargets = false,
|
48
48
|
// allows us to set the event that should trigger validation
|
@@ -171,10 +171,7 @@ const proxyInputMixin =
|
|
171
171
|
|
172
172
|
// sync properties
|
173
173
|
proxyProps.forEach((prop) => {
|
174
|
-
const
|
175
|
-
const proxyTargets = useProxyTargets
|
176
|
-
? [this.baseElement, externalInput].filter(Boolean)
|
177
|
-
: [];
|
174
|
+
const proxyTargets = useProxyTargets ? [this.baseElement].filter(Boolean) : [];
|
178
175
|
forwardProps(this, [this.inputElement, ...proxyTargets], prop);
|
179
176
|
});
|
180
177
|
|
@@ -35,21 +35,16 @@ export const comboBox = {
|
|
35
35
|
[vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
|
36
36
|
[vars.overlayItemPaddingInlineStart]: globalRefs.spacing.xs,
|
37
37
|
[vars.overlayItemPaddingInlineEnd]: globalRefs.spacing.lg,
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
[vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
49
|
-
[vars.valueInputHeight]: refs.valueInputHeight,
|
50
|
-
[vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
51
|
-
},
|
52
|
-
},
|
38
|
+
[vars.labelPosition]: refs.labelPosition,
|
39
|
+
[vars.labelTopPosition]: refs.labelTopPosition,
|
40
|
+
[vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
41
|
+
[vars.inputTransformY]: refs.inputTransformY,
|
42
|
+
[vars.inputTransition]: refs.inputTransition,
|
43
|
+
[vars.marginInlineStart]: refs.marginInlineStart,
|
44
|
+
[vars.placeholderOpacity]: refs.placeholderOpacity,
|
45
|
+
[vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
46
|
+
[vars.valueInputHeight]: refs.valueInputHeight,
|
47
|
+
[vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
53
48
|
|
54
49
|
_readonly: {
|
55
50
|
[vars.inputDropdownButtonCursor]: 'default',
|
@@ -27,21 +27,16 @@ const emailField = {
|
|
27
27
|
[vars.inputBackgroundColor]: refs.backgroundColor,
|
28
28
|
[vars.inputHorizontalPadding]: refs.horizontalPadding,
|
29
29
|
[vars.inputHeight]: refs.inputHeight,
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
[vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
41
|
-
[vars.valueInputHeight]: refs.valueInputHeight,
|
42
|
-
[vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
43
|
-
},
|
44
|
-
},
|
30
|
+
[vars.labelPosition]: refs.labelPosition,
|
31
|
+
[vars.labelTopPosition]: refs.labelTopPosition,
|
32
|
+
[vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
33
|
+
[vars.inputTransformY]: refs.inputTransformY,
|
34
|
+
[vars.inputTransition]: refs.inputTransition,
|
35
|
+
[vars.marginInlineStart]: refs.marginInlineStart,
|
36
|
+
[vars.placeholderOpacity]: refs.placeholderOpacity,
|
37
|
+
[vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
38
|
+
[vars.valueInputHeight]: refs.valueInputHeight,
|
39
|
+
[vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
45
40
|
};
|
46
41
|
|
47
42
|
export default emailField;
|
@@ -30,6 +30,7 @@ export const grid = {
|
|
30
30
|
|
31
31
|
[vars.valueTextColor]: globalRefs.colors.surface.contrast,
|
32
32
|
[vars.selectedBackgroundColor]: globalRefs.colors.surface.highlight,
|
33
|
+
[vars.hostDirection]: globalRefs.direction,
|
33
34
|
|
34
35
|
_bordered: {
|
35
36
|
[vars.borderColor]: refs.borderColor,
|
@@ -39,20 +39,19 @@ export const multiSelectComboBox = {
|
|
39
39
|
[vars.chipFontSize]: refs.chipFontSize,
|
40
40
|
[vars.chipTextColor]: globalRefs.colors.surface.contrast,
|
41
41
|
[vars.chipBackgroundColor]: globalRefs.colors.surface.light,
|
42
|
+
[vars.labelPosition]: refs.labelPosition,
|
43
|
+
[vars.labelTopPosition]: refs.labelTopPosition,
|
44
|
+
[vars.labelLeftPosition]: refs.labelLeftPosition,
|
45
|
+
[vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
46
|
+
[vars.inputTransformY]: refs.inputTransformY,
|
47
|
+
[vars.inputTransition]: refs.inputTransition,
|
48
|
+
[vars.marginInlineStart]: refs.marginInlineStart,
|
49
|
+
[vars.placeholderOpacity]: refs.placeholderOpacity,
|
50
|
+
[vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
42
51
|
|
43
52
|
labelType: {
|
44
53
|
floating: {
|
45
|
-
[vars.labelPosition]: refs.labelPosition,
|
46
|
-
[vars.labelTopPosition]: refs.labelTopPosition,
|
47
|
-
[vars.labelLeftPosition]: refs.labelLeftPosition,
|
48
|
-
[vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
49
|
-
[vars.inputTransformY]: refs.inputTransformY,
|
50
|
-
[vars.inputTransition]: refs.inputTransition,
|
51
|
-
[vars.marginInlineStart]: refs.marginInlineStart,
|
52
|
-
[vars.placeholderOpacity]: refs.placeholderOpacity,
|
53
|
-
[vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
54
54
|
[vars.inputHorizontalPadding]: '0.25em',
|
55
|
-
|
56
55
|
_hasValue: {
|
57
56
|
[vars.inputHorizontalPadding]: '0.45em',
|
58
57
|
},
|
@@ -19,12 +19,7 @@ const newPassword = {
|
|
19
19
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
20
20
|
[vars.policyPreviewBackgroundColor]: 'none',
|
21
21
|
[vars.policyPreviewPadding]: globalRefs.spacing.lg,
|
22
|
-
|
23
|
-
labelType: {
|
24
|
-
floating: {
|
25
|
-
[vars.valueInputHeight]: refs.valueInputHeight,
|
26
|
-
},
|
27
|
-
},
|
22
|
+
[vars.valueInputHeight]: refs.valueInputHeight,
|
28
23
|
|
29
24
|
_required: {
|
30
25
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
@@ -27,21 +27,16 @@ const numberField = {
|
|
27
27
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
28
28
|
[vars.inputHorizontalPadding]: refs.horizontalPadding,
|
29
29
|
[vars.inputHeight]: refs.inputHeight,
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
[vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
41
|
-
[vars.valueInputHeight]: refs.valueInputHeight,
|
42
|
-
[vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
43
|
-
},
|
44
|
-
},
|
30
|
+
[vars.labelPosition]: refs.labelPosition,
|
31
|
+
[vars.labelTopPosition]: refs.labelTopPosition,
|
32
|
+
[vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
33
|
+
[vars.inputTransformY]: refs.inputTransformY,
|
34
|
+
[vars.inputTransition]: refs.inputTransition,
|
35
|
+
[vars.marginInlineStart]: refs.marginInlineStart,
|
36
|
+
[vars.placeholderOpacity]: refs.placeholderOpacity,
|
37
|
+
[vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
38
|
+
[vars.valueInputHeight]: refs.valueInputHeight,
|
39
|
+
[vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
45
40
|
};
|
46
41
|
|
47
42
|
export default numberField;
|
@@ -33,20 +33,15 @@ const password = {
|
|
33
33
|
[vars.revealButtonOffset]: globalRefs.spacing.md,
|
34
34
|
[vars.revealButtonSize]: refs.toggleButtonSize,
|
35
35
|
[vars.revealButtonColor]: refs.placeholderTextColor,
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
[vars.placeholderOpacity]: refs.placeholderOpacity,
|
46
|
-
[vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
47
|
-
[vars.valueInputHeight]: refs.valueInputHeight,
|
48
|
-
},
|
49
|
-
},
|
36
|
+
[vars.labelPosition]: refs.labelPosition,
|
37
|
+
[vars.labelTopPosition]: refs.labelTopPosition,
|
38
|
+
[vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
39
|
+
[vars.inputTransformY]: refs.inputTransformY,
|
40
|
+
[vars.inputTransition]: refs.inputTransition,
|
41
|
+
[vars.marginInlineStart]: refs.marginInlineStart,
|
42
|
+
[vars.placeholderOpacity]: refs.placeholderOpacity,
|
43
|
+
[vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
44
|
+
[vars.valueInputHeight]: refs.valueInputHeight,
|
50
45
|
};
|
51
46
|
|
52
47
|
export default password;
|
@@ -24,14 +24,9 @@ const phoneField = {
|
|
24
24
|
[vars.phoneInputWidth]: refs.minWidth,
|
25
25
|
[vars.countryCodeInputWidth]: '5em',
|
26
26
|
[vars.countryCodeDropdownWidth]: '20em',
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
[vars.marginInlineStart]: '-0.25em',
|
31
|
-
[vars.valueInputHeight]: '1.65em',
|
32
|
-
[vars.valueInputMarginBottom]: '0.25em',
|
33
|
-
},
|
34
|
-
},
|
27
|
+
[vars.marginInlineStart]: '-0.25em',
|
28
|
+
[vars.valueInputHeight]: refs.valueInputHeight,
|
29
|
+
[vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
35
30
|
|
36
31
|
// '@overlay': {
|
37
32
|
// overlayItemBackgroundColor: 'red'
|
@@ -24,20 +24,15 @@ const phoneInputBoxField = {
|
|
24
24
|
[vars.inputOutlineWidth]: refs.outlineWidth,
|
25
25
|
[vars.inputOutlineColor]: refs.outlineColor,
|
26
26
|
[vars.inputOutlineOffset]: refs.outlineOffset,
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
[vars.valueInputHeight]: refs.valueInputHeight,
|
37
|
-
[vars.valueInputMarginBottom]: '0.25em',
|
38
|
-
[vars.inputHorizontalPadding]: '0',
|
39
|
-
},
|
40
|
-
},
|
27
|
+
[vars.labelPosition]: refs.labelPosition,
|
28
|
+
[vars.labelTopPosition]: refs.labelTopPosition,
|
29
|
+
[vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
30
|
+
[vars.inputTransformY]: refs.inputTransformY,
|
31
|
+
[vars.inputTransition]: refs.inputTransition,
|
32
|
+
[vars.marginInlineStart]: refs.marginInlineStart,
|
33
|
+
[vars.valueInputHeight]: refs.valueInputHeight,
|
34
|
+
[vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
35
|
+
[vars.inputHorizontalPadding]: '0',
|
41
36
|
|
42
37
|
_fullWidth: {
|
43
38
|
[vars.hostWidth]: refs.width,
|
@@ -33,21 +33,16 @@ export const textField = {
|
|
33
33
|
left: { [vars.inputTextAlign]: 'left' },
|
34
34
|
center: { [vars.inputTextAlign]: 'center' },
|
35
35
|
},
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
[vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
47
|
-
[vars.valueInputHeight]: refs.valueInputHeight,
|
48
|
-
[vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
49
|
-
},
|
50
|
-
},
|
36
|
+
[vars.labelPosition]: refs.labelPosition,
|
37
|
+
[vars.labelTopPosition]: refs.labelTopPosition,
|
38
|
+
[vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
39
|
+
[vars.inputTransformY]: refs.inputTransformY,
|
40
|
+
[vars.inputTransition]: refs.inputTransition,
|
41
|
+
[vars.marginInlineStart]: refs.marginInlineStart,
|
42
|
+
[vars.placeholderOpacity]: refs.placeholderOpacity,
|
43
|
+
[vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
44
|
+
[vars.valueInputHeight]: refs.valueInputHeight,
|
45
|
+
[vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
51
46
|
};
|
52
47
|
|
53
48
|
export default textField;
|
@@ -1,76 +0,0 @@
|
|
1
|
-
// since on load we can only sample the color of the placeholder,
|
2
|
-
// we need to temporarily populate the input in order to sample the value color
|
3
|
-
const getValueColor = (ele, computedStyle) => {
|
4
|
-
// eslint-disable-next-line no-param-reassign
|
5
|
-
ele.value = '_';
|
6
|
-
|
7
|
-
const valueColor = computedStyle.getPropertyValue('color');
|
8
|
-
|
9
|
-
// eslint-disable-next-line no-param-reassign
|
10
|
-
ele.value = '';
|
11
|
-
|
12
|
-
return valueColor;
|
13
|
-
};
|
14
|
-
|
15
|
-
export const createExternalInputSlot = (slotName, targetSlotName) => {
|
16
|
-
const slotEle = document.createElement('slot');
|
17
|
-
|
18
|
-
slotEle.setAttribute('name', slotName);
|
19
|
-
slotEle.setAttribute('slot', targetSlotName);
|
20
|
-
|
21
|
-
return slotEle;
|
22
|
-
};
|
23
|
-
|
24
|
-
export const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
|
25
|
-
const inputEle = document.createElement('input');
|
26
|
-
|
27
|
-
inputEle.setAttribute('slot', targetSlotName);
|
28
|
-
inputEle.setAttribute('type', type);
|
29
|
-
inputEle.setAttribute('data-hidden-input', 'true');
|
30
|
-
inputEle.setAttribute('autocomplete', autocompleteType);
|
31
|
-
|
32
|
-
return inputEle;
|
33
|
-
};
|
34
|
-
|
35
|
-
// We apply the original input's style to the external-input.
|
36
|
-
// Eventually, the user should interact directly with the external input.
|
37
|
-
// We keep the original input
|
38
|
-
export const applyExternalInputStyles = (sourceInputEle, targetInputEle, labelType) => {
|
39
|
-
const computedStyle = getComputedStyle(sourceInputEle);
|
40
|
-
|
41
|
-
// Get minimal set of computed theme properties to set on external input
|
42
|
-
const height = computedStyle.getPropertyValue('height');
|
43
|
-
const paddingLeft = computedStyle.getPropertyValue('padding-left');
|
44
|
-
const paddingRight = computedStyle.getPropertyValue('padding-right');
|
45
|
-
const fontSize = computedStyle.getPropertyValue('font-size');
|
46
|
-
const fontFamily = computedStyle.getPropertyValue('font-family');
|
47
|
-
const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
|
48
|
-
const caretColor = computedStyle.getPropertyValue('caret-color');
|
49
|
-
|
50
|
-
const valueColor = getValueColor(sourceInputEle, computedStyle);
|
51
|
-
|
52
|
-
const commonThemeStyles = [
|
53
|
-
['all', 'unset'],
|
54
|
-
['position', 'absolute'],
|
55
|
-
['background-color', 'transparent'],
|
56
|
-
['height', height],
|
57
|
-
['left', paddingLeft],
|
58
|
-
['right', paddingRight],
|
59
|
-
['font-size', fontSize],
|
60
|
-
['font-family', fontFamily],
|
61
|
-
['letter-spacing', letterSpacing],
|
62
|
-
['width', `calc(100% - ${paddingLeft} - ${paddingRight}`],
|
63
|
-
['caret-color', caretColor], // this is for seeing caret when focusing on external input
|
64
|
-
['color', valueColor],
|
65
|
-
];
|
66
|
-
|
67
|
-
commonThemeStyles.forEach(([key, val]) =>
|
68
|
-
targetInputEle.style.setProperty(key, val, 'important')
|
69
|
-
);
|
70
|
-
|
71
|
-
// Handle floating label theme properties
|
72
|
-
if (labelType === 'floating') {
|
73
|
-
const marginBottom = computedStyle.getPropertyValue('margin-bottom');
|
74
|
-
targetInputEle.style.setProperty('margin-bottom', marginBottom, 'important');
|
75
|
-
}
|
76
|
-
};
|