@descope/web-components-ui 1.77.0 → 1.79.0

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 (92) hide show
  1. package/dist/cjs/index.cjs.js +49 -2
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +49 -2
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/2739.js +1 -1
  6. package/dist/umd/2739.js.map +1 -1
  7. package/dist/umd/7092.js +1 -1
  8. package/dist/umd/7092.js.map +1 -1
  9. package/dist/umd/DescopeDev.js +1 -1
  10. package/dist/umd/DescopeDev.js.map +1 -1
  11. package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
  12. package/dist/umd/boolean-fields-descope-checkbox-index-js.js.map +1 -1
  13. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
  14. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js.map +1 -1
  15. package/dist/umd/button-selection-group-fields-descope-button-multi-selection-group-index-js.js +1 -1
  16. package/dist/umd/button-selection-group-fields-descope-button-multi-selection-group-index-js.js.map +1 -1
  17. package/dist/umd/button-selection-group-fields-descope-button-selection-group-index-js.js +1 -1
  18. package/dist/umd/button-selection-group-fields-descope-button-selection-group-index-js.js.map +1 -1
  19. package/dist/umd/descope-date-field-index-js.js +1 -1
  20. package/dist/umd/descope-date-field-index-js.js.map +1 -1
  21. package/dist/umd/descope-email-field-index-js.js +1 -1
  22. package/dist/umd/descope-email-field-index-js.js.map +1 -1
  23. package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
  24. package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js.map +1 -1
  25. package/dist/umd/descope-grid-index-js.js +1 -1
  26. package/dist/umd/descope-grid-index-js.js.map +1 -1
  27. package/dist/umd/descope-hybrid-field-index-js.js +2 -2
  28. package/dist/umd/descope-hybrid-field-index-js.js.map +1 -1
  29. package/dist/umd/descope-multi-select-combo-box-index-js.js +1 -1
  30. package/dist/umd/descope-multi-select-combo-box-index-js.js.map +1 -1
  31. package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
  32. package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js.map +1 -1
  33. package/dist/umd/descope-new-password-index-js.js +1 -1
  34. package/dist/umd/descope-new-password-index-js.js.map +1 -1
  35. package/dist/umd/descope-number-field-index-js.js +1 -1
  36. package/dist/umd/descope-number-field-index-js.js.map +1 -1
  37. package/dist/umd/descope-passcode-index-js.js +2 -2
  38. package/dist/umd/descope-passcode-index-js.js.map +1 -1
  39. package/dist/umd/descope-password-index-js.js +1 -1
  40. package/dist/umd/descope-password-index-js.js.map +1 -1
  41. package/dist/umd/descope-radio-group-index-js.js +1 -1
  42. package/dist/umd/descope-radio-group-index-js.js.map +1 -1
  43. package/dist/umd/descope-scopes-list-index-js.js +1 -1
  44. package/dist/umd/descope-scopes-list-index-js.js.map +1 -1
  45. package/dist/umd/descope-security-questions-setup-index-js.js +1 -1
  46. package/dist/umd/descope-security-questions-setup-index-js.js.map +1 -1
  47. package/dist/umd/descope-security-questions-verify-index-js.js +2 -2
  48. package/dist/umd/descope-security-questions-verify-index-js.js.map +1 -1
  49. package/dist/umd/descope-text-area-index-js.js +1 -1
  50. package/dist/umd/descope-text-area-index-js.js.map +1 -1
  51. package/dist/umd/descope-text-field-index-js.js +2 -2
  52. package/dist/umd/descope-text-field-index-js.js.map +1 -1
  53. package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
  54. package/dist/umd/mapping-fields-descope-mappings-field-index-js.js.map +1 -1
  55. package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js +1 -1
  56. package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js.map +1 -1
  57. package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
  58. package/dist/umd/phone-fields-descope-phone-field-index-js.js.map +1 -1
  59. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
  60. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js.map +1 -1
  61. package/package.json +5 -5
  62. package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +1 -0
  63. package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +1 -0
  64. package/src/components/button-selection-group-fields/baseButtonSelectionGroup.js +1 -0
  65. package/src/components/descope-hybrid-field/HybridFieldClass.js +10 -0
  66. package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js +1 -0
  67. package/src/components/descope-new-password/NewPasswordClass.js +1 -0
  68. package/src/components/descope-passcode/PasscodeClass.js +1 -0
  69. package/src/components/descope-password/PasswordClass.js +2 -1
  70. package/src/components/descope-security-questions-verify/SecurityQuestionsVerifyClass.js +4 -0
  71. package/src/components/descope-text-area/TextAreaClass.js +1 -0
  72. package/src/components/descope-text-field/textFieldMappings.js +1 -0
  73. package/src/components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass.js +1 -0
  74. package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js +2 -1
  75. package/src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js +1 -0
  76. package/src/theme/components/buttonSelectionGroup/baseButtonSelectionGroup.js +1 -0
  77. package/src/theme/components/checkbox.js +1 -0
  78. package/src/theme/components/emailField.js +1 -0
  79. package/src/theme/components/hybridField.js +1 -0
  80. package/src/theme/components/inputWrapper.js +1 -0
  81. package/src/theme/components/multiSelectComboBox.js +1 -0
  82. package/src/theme/components/newPassword.js +1 -0
  83. package/src/theme/components/numberField.js +1 -0
  84. package/src/theme/components/passcode.js +1 -0
  85. package/src/theme/components/password.js +1 -0
  86. package/src/theme/components/phoneField.js +1 -0
  87. package/src/theme/components/phoneInputBoxField.js +1 -0
  88. package/src/theme/components/radioGroup/radioGroup.js +1 -0
  89. package/src/theme/components/samlGroupMappings.js +1 -0
  90. package/src/theme/components/switchToggle.js +1 -0
  91. package/src/theme/components/textArea.js +1 -0
  92. package/src/theme/components/textField.js +1 -0
@@ -112,6 +112,7 @@ export const buttonSelectionGroupMappings = {
112
112
  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
113
113
  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
114
114
  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
115
+ errorMessageFontSize: { ...errorMessage, property: 'font-size' },
115
116
  itemsSpacing: { ...internalWrapper, property: 'gap' },
116
117
  };
117
118
 
@@ -367,6 +367,16 @@ export const HybridFieldClass = compose(
367
367
  property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPosition,
368
368
  },
369
369
  ],
370
+ errorMessageFontSize: [
371
+ {
372
+ selector: () => PhoneFieldClass.componentName,
373
+ property: PhoneFieldClass.cssVarList.errorMessageFontSize,
374
+ },
375
+ {
376
+ selector: () => PhoneFieldInputBoxClass.componentName,
377
+ property: PhoneFieldInputBoxClass.cssVarList.errorMessageFontSize,
378
+ },
379
+ ],
370
380
  },
371
381
  }),
372
382
  draggableMixin,
@@ -480,6 +480,7 @@ export const MultiSelectComboBoxClass = compose(
480
480
  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
481
481
  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
482
482
  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
483
+ errorMessageFontSize: { ...errorMessage, property: 'font-size' },
483
484
  inputHeight: { ...inputField, property: 'min-height' },
484
485
  inputBackgroundColor: { ...inputField, property: 'background-color' },
485
486
  inputBorderColor: { ...inputField, property: 'border-color' },
@@ -132,6 +132,7 @@ export const NewPasswordClass = compose(
132
132
  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
133
133
  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
134
134
  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
135
+ errorMessageFontSize: { ...errorMessage, property: 'font-size' },
135
136
  hostWidth: { ...host, property: 'width' },
136
137
  hostMinWidth: { ...host, property: 'min-width' },
137
138
  hostDirection: [
@@ -127,6 +127,7 @@ export const PasscodeClass = compose(
127
127
  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
128
128
  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
129
129
  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
130
+ errorMessageFontSize: { ...errorMessage, property: 'font-size' },
130
131
  digitValueTextColor: {
131
132
  selector: TextFieldClass.componentName,
132
133
  property: textVars.inputValueTextColor,
@@ -186,6 +186,7 @@ export const PasswordClass = compose(
186
186
  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
187
187
  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
188
188
  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
189
+ errorMessageFontSize: { ...errorMessage, property: 'font-size' },
189
190
 
190
191
  inputPlaceholderTextColor: [
191
192
  { ...inputElementPlaceholder, property: 'color' },
@@ -287,7 +288,7 @@ export const PasswordClass = compose(
287
288
  }
288
289
 
289
290
  ${inputFloatingLabelStyle()}
290
-
291
+
291
292
  ::part(reveal-button) {
292
293
  align-self: center;
293
294
  }
@@ -229,6 +229,10 @@ export const SecurityQuestionsVerifyClass = compose(
229
229
  selector: () => TextClass.componentName,
230
230
  property: TextClass.cssVarList.errorMessagePosition,
231
231
  },
232
+ errorMessageFontSize: {
233
+ selector: () => TextClass.componentName,
234
+ property: TextClass.cssVarList.errorMessageFontSize,
235
+ },
232
236
  },
233
237
  }),
234
238
  draggableMixin,
@@ -57,6 +57,7 @@ export const TextAreaClass = compose(
57
57
  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
58
58
  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
59
59
  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
60
+ errorMessageFontSize: { ...errorMessage, property: 'font-size' },
60
61
  inputBackgroundColor: { ...inputField, property: 'background-color' },
61
62
  inputValueTextColor: { ...textArea, property: 'color' },
62
63
  inputPlaceholderTextColor: { ...placeholder, property: 'color' },
@@ -68,6 +68,7 @@ export default {
68
68
  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
69
69
  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
70
70
  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
71
+ errorMessageFontSize: { ...errorMessage, property: 'font-size' },
71
72
 
72
73
  helperTextColor: { ...helperText, property: '-webkit-text-fill-color' },
73
74
 
@@ -64,6 +64,7 @@ export const SamlGroupMappingsClass = compose(
64
64
  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
65
65
  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
66
66
  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
67
+ errorMessageFontSize: { ...errorMessage, property: 'font-size' },
67
68
  },
68
69
  }),
69
70
  draggableMixin,
@@ -185,6 +185,7 @@ export const PhoneFieldClass = compose(
185
185
  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
186
186
  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
187
187
  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
188
+ errorMessageFontSize: { ...errorMessage, property: 'font-size' },
188
189
 
189
190
  inputValueTextColor: [
190
191
  { ...phoneInput, property: textVars.inputValueTextColor },
@@ -282,7 +283,7 @@ export const PhoneFieldClass = compose(
282
283
  flex: 0;
283
284
  border: none;
284
285
  }
285
-
286
+
286
287
  descope-combo-box {
287
288
  flex-shrink: 0;
288
289
  min-width: 5.75em;
@@ -133,6 +133,7 @@ export const PhoneFieldInputBoxClass = compose(
133
133
  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
134
134
  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
135
135
  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
136
+ errorMessageFontSize: { ...errorMessage, property: 'font-size' },
136
137
 
137
138
  inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
138
139
 
@@ -20,4 +20,5 @@ export const createBaseButtonSelectionGroupMappings = (vars) => ({
20
20
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
21
21
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
22
22
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
23
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
23
24
  });
@@ -33,6 +33,7 @@ const checkbox = {
33
33
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
34
34
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
35
35
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
36
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
36
37
  };
37
38
 
38
39
  export default checkbox;
@@ -44,6 +44,7 @@ const emailField = {
44
44
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
45
45
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
46
46
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
47
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
47
48
  };
48
49
 
49
50
  export default emailField;
@@ -12,6 +12,7 @@ const hybridField = {
12
12
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
13
13
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
14
14
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
15
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
15
16
 
16
17
  _fullWidth: {
17
18
  [vars.hostWidth]: '100%',
@@ -47,6 +47,7 @@ const [theme, refs, vars] = createHelperVars(
47
47
  errorMessageIconSize: '0',
48
48
  errorMessageIconPadding: '0',
49
49
  errorMessageIconPosition: '0 0.4em',
50
+ errorMessageFontSize: '0.8125rem',
50
51
  errorMessageIconRepeat: 'no-repeat',
51
52
 
52
53
  size: {
@@ -55,6 +55,7 @@ export const multiSelectComboBox = {
55
55
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
56
56
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
57
57
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
58
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
58
59
 
59
60
  labelType: {
60
61
  floating: {
@@ -27,6 +27,7 @@ const newPassword = {
27
27
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
28
28
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
29
29
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
30
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
30
31
 
31
32
  _required: {
32
33
  // NewPassword doesn't pass `required` attribute to its Password components.
@@ -44,6 +44,7 @@ const numberField = {
44
44
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
45
45
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
46
46
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
47
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
47
48
  };
48
49
 
49
50
  export default numberField;
@@ -26,6 +26,7 @@ const passcode = {
26
26
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
27
27
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
28
28
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
29
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
29
30
 
30
31
  size: {
31
32
  xs: { [vars.spinnerSize]: '15px' },
@@ -49,6 +49,7 @@ const password = {
49
49
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
50
50
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
51
51
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
52
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
52
53
  };
53
54
 
54
55
  export default password;
@@ -34,6 +34,7 @@ const phoneField = {
34
34
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
35
35
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
36
36
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
37
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
37
38
 
38
39
  // '@overlay': {
39
40
  // overlayItemBackgroundColor: 'red'
@@ -40,6 +40,7 @@ const phoneInputBoxField = {
40
40
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
41
41
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
42
42
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
43
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
43
44
 
44
45
  _fullWidth: {
45
46
  [vars.hostWidth]: refs.width,
@@ -20,6 +20,7 @@ export const radioGroup = {
20
20
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
21
21
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
22
22
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
23
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
23
24
  [vars.helperTextColor]: refs.helperTextColor,
24
25
  [vars.itemsLabelColor]: globalRefs.colors.surface.contrast,
25
26
 
@@ -14,6 +14,7 @@ export const samlGroupMappings = {
14
14
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
15
15
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
16
16
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
17
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
17
18
  };
18
19
 
19
20
  export default samlGroupMappings;
@@ -48,6 +48,7 @@ const switchToggle = {
48
48
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
49
49
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
50
50
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
51
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
51
52
 
52
53
  _checked: {
53
54
  [vars.trackBorderColor]: refs.borderColor,
@@ -32,6 +32,7 @@ const textArea = {
32
32
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
33
33
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
34
34
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
35
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
35
36
 
36
37
  textAlign: {
37
38
  right: { [vars.inputTextAlign]: 'right' },
@@ -57,6 +57,7 @@ export const textField = {
57
57
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
58
58
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
59
59
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
60
+ [vars.errorMessageFontSize]: refs.errorMessageFontSize,
60
61
  };
61
62
 
62
63
  export default textField;