@descope/web-components-ui 1.0.333 → 1.0.335

Sign up to get free protection for your applications and to get access to all the features.
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
- };