@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.
Files changed (43) hide show
  1. package/dist/cjs/index.cjs.js +86 -509
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +88 -514
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/4392.js +1 -1
  6. package/dist/umd/4978.js +1 -1
  7. package/dist/umd/DescopeDev.js +1 -1
  8. package/dist/umd/descope-email-field-index-js.js +4 -4
  9. package/dist/umd/descope-grid-index-js.js +1 -1
  10. package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
  11. package/dist/umd/descope-new-password-index-js.js +1 -1
  12. package/dist/umd/descope-number-field-index-js.js +1 -1
  13. package/dist/umd/descope-passcode-index-js.js +1 -1
  14. package/dist/umd/descope-password-index-js.js +1 -1
  15. package/dist/umd/descope-radio-group-index-js.js +1 -1
  16. package/dist/umd/descope-text-field-index-js.js +2 -2
  17. package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
  18. package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
  19. package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
  20. package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +2 -2
  21. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
  22. package/package.json +1 -1
  23. package/src/components/descope-email-field/EmailFieldClass.js +3 -103
  24. package/src/components/descope-grid/GridClass.js +1 -0
  25. package/src/components/descope-new-password/NewPasswordClass.js +0 -24
  26. package/src/components/descope-password/PasswordClass.js +1 -126
  27. package/src/components/descope-text-field/TextFieldClass.js +1 -26
  28. package/src/components/descope-text-field/textFieldMappings.js +6 -37
  29. package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js +2 -11
  30. package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +2 -5
  31. package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +1 -1
  32. package/src/mixins/proxyInputMixin.js +2 -5
  33. package/src/theme/components/comboBox.js +10 -15
  34. package/src/theme/components/emailField.js +10 -15
  35. package/src/theme/components/grid.js +1 -0
  36. package/src/theme/components/multiSelectComboBox.js +9 -10
  37. package/src/theme/components/newPassword.js +1 -6
  38. package/src/theme/components/numberField.js +10 -15
  39. package/src/theme/components/password.js +9 -14
  40. package/src/theme/components/phoneField.js +3 -8
  41. package/src/theme/components/phoneInputBoxField.js +9 -14
  42. package/src/theme/components/textField.js +10 -15
  43. 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`. It's to be used within `external-input` components,
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 externalInput = this.querySelector('input[slot="external-input"]') || null;
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
- labelType: {
40
- floating: {
41
- [vars.labelPosition]: refs.labelPosition,
42
- [vars.labelTopPosition]: refs.labelTopPosition,
43
- [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
44
- [vars.inputTransformY]: refs.inputTransformY,
45
- [vars.inputTransition]: refs.inputTransition,
46
- [vars.marginInlineStart]: refs.marginInlineStart,
47
- [vars.placeholderOpacity]: refs.placeholderOpacity,
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
- labelType: {
32
- floating: {
33
- [vars.labelPosition]: refs.labelPosition,
34
- [vars.labelTopPosition]: refs.labelTopPosition,
35
- [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
36
- [vars.inputTransformY]: refs.inputTransformY,
37
- [vars.inputTransition]: refs.inputTransition,
38
- [vars.marginInlineStart]: refs.marginInlineStart,
39
- [vars.placeholderOpacity]: refs.placeholderOpacity,
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
- labelType: {
32
- floating: {
33
- [vars.labelPosition]: refs.labelPosition,
34
- [vars.labelTopPosition]: refs.labelTopPosition,
35
- [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
36
- [vars.inputTransformY]: refs.inputTransformY,
37
- [vars.inputTransition]: refs.inputTransition,
38
- [vars.marginInlineStart]: refs.marginInlineStart,
39
- [vars.placeholderOpacity]: refs.placeholderOpacity,
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
- labelType: {
38
- floating: {
39
- [vars.labelPosition]: refs.labelPosition,
40
- [vars.labelTopPosition]: refs.labelTopPosition,
41
- [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
42
- [vars.inputTransformY]: refs.inputTransformY,
43
- [vars.inputTransition]: refs.inputTransition,
44
- [vars.marginInlineStart]: refs.marginInlineStart,
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
- labelType: {
29
- floating: {
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
- labelType: {
29
- floating: {
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.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
- labelType: {
38
- floating: {
39
- [vars.labelPosition]: refs.labelPosition,
40
- [vars.labelTopPosition]: refs.labelTopPosition,
41
- [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
42
- [vars.inputTransformY]: refs.inputTransformY,
43
- [vars.inputTransition]: refs.inputTransition,
44
- [vars.marginInlineStart]: refs.marginInlineStart,
45
- [vars.placeholderOpacity]: refs.placeholderOpacity,
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
- };