@descope/web-components-ui 1.0.135 → 1.0.148

Sign up to get free protection for your applications and to get access to all the features.
Files changed (175) hide show
  1. package/package.json +77 -56
  2. package/src/baseClasses/createBaseClass.js +18 -16
  3. package/src/baseClasses/createBaseInputClass.js +14 -8
  4. package/src/baseClasses/createCssVarImageClass.js +27 -23
  5. package/src/components/boolean-fields/booleanFieldMixin.js +18 -29
  6. package/src/components/boolean-fields/commonStyles.js +1 -1
  7. package/src/components/boolean-fields/descope-boolean-field-internal/BooleanFieldInternal.js +46 -51
  8. package/src/components/boolean-fields/descope-boolean-field-internal/index.js +1 -1
  9. package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +80 -85
  10. package/src/components/boolean-fields/descope-checkbox/index.js +2 -2
  11. package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +88 -95
  12. package/src/components/boolean-fields/descope-switch-toggle/index.js +2 -2
  13. package/src/components/descope-button/ButtonClass.js +57 -47
  14. package/src/components/descope-button/clickableMixin.js +10 -0
  15. package/src/components/descope-combo-box/ComboBoxClass.js +156 -160
  16. package/src/components/descope-container/ContainerClass.js +32 -42
  17. package/src/components/descope-date-picker/index.js +9 -14
  18. package/src/components/descope-divider/DividerClass.js +52 -62
  19. package/src/components/descope-email-field/EmailFieldClass.js +25 -20
  20. package/src/components/descope-image/ImageClass.js +21 -24
  21. package/src/components/descope-link/LinkClass.js +31 -35
  22. package/src/components/descope-loader-linear/LoaderLinearClass.js +31 -36
  23. package/src/components/descope-loader-radial/LoaderRadialClass.js +23 -30
  24. package/src/components/descope-logo/LogoClass.js +5 -1
  25. package/src/components/descope-new-password/NewPasswordClass.js +63 -81
  26. package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +157 -162
  27. package/src/components/descope-new-password/descope-new-password-internal/componentName.js +1 -1
  28. package/src/components/descope-new-password/descope-new-password-internal/index.js +3 -3
  29. package/src/components/descope-new-password/index.js +3 -3
  30. package/src/components/descope-number-field/NumberFieldClass.js +25 -20
  31. package/src/components/descope-passcode/PasscodeClass.js +95 -95
  32. package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +151 -157
  33. package/src/components/descope-passcode/descope-passcode-internal/helpers.js +7 -8
  34. package/src/components/descope-passcode/descope-passcode-internal/index.js +2 -2
  35. package/src/components/descope-passcode/index.js +2 -2
  36. package/src/components/descope-password/PasswordClass.js +75 -83
  37. package/src/components/descope-password/passwordDraggableMixin.js +28 -27
  38. package/src/components/descope-phone-field/CountryCodes.js +1210 -1210
  39. package/src/components/descope-phone-field/PhoneFieldClass.js +139 -141
  40. package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +157 -173
  41. package/src/components/descope-phone-field/helpers.js +3 -3
  42. package/src/components/descope-text/TextClass.js +25 -29
  43. package/src/components/descope-text-area/TextAreaClass.js +68 -67
  44. package/src/components/descope-text-field/TextFieldClass.js +42 -37
  45. package/src/components/descope-text-field/textFieldMappings.js +40 -55
  46. package/src/components/descope-totp-image/TotpImageClass.js +5 -1
  47. package/src/components/descope-upload-file/UploadFileClass.js +202 -0
  48. package/src/components/descope-upload-file/helpers.js +11 -0
  49. package/src/components/descope-upload-file/index.js +6 -0
  50. package/src/constants.js +3 -3
  51. package/src/helpers/componentHelpers.js +68 -74
  52. package/src/helpers/index.js +17 -16
  53. package/src/helpers/mixinsHelpers.js +21 -10
  54. package/src/helpers/themeHelpers/colorsHelpers.js +18 -18
  55. package/src/helpers/themeHelpers/componentsThemeManager.js +7 -6
  56. package/src/helpers/themeHelpers/index.js +114 -124
  57. package/src/helpers/themeHelpers/resetHelpers.js +16 -16
  58. package/src/index.cjs.js +3 -3
  59. package/src/index.d.ts +22 -21
  60. package/src/index.js +5 -4
  61. package/src/index.umd.js +14 -13
  62. package/src/mixins/changeMixin.js +18 -17
  63. package/src/mixins/componentNameValidationMixin.js +19 -19
  64. package/src/mixins/createProxy.js +33 -33
  65. package/src/mixins/createStyleMixin/helpers.js +54 -64
  66. package/src/mixins/createStyleMixin/index.js +155 -141
  67. package/src/mixins/draggableMixin.js +61 -61
  68. package/src/mixins/hoverableMixin.js +11 -13
  69. package/src/mixins/index.js +6 -6
  70. package/src/mixins/inputEventsDispatchingMixin.js +61 -60
  71. package/src/mixins/inputValidationMixin.js +153 -148
  72. package/src/mixins/lifecycleEventsMixin.js +17 -15
  73. package/src/mixins/normalizeBooleanAttributesMixin.js +31 -23
  74. package/src/mixins/portalMixin.js +58 -52
  75. package/src/mixins/proxyInputMixin.js +138 -132
  76. package/src/theme/components/button.js +86 -81
  77. package/src/theme/components/checkbox.js +26 -28
  78. package/src/theme/components/comboBox.js +32 -31
  79. package/src/theme/components/container.js +99 -89
  80. package/src/theme/components/divider.js +30 -31
  81. package/src/theme/components/emailField.js +20 -19
  82. package/src/theme/components/image.js +3 -3
  83. package/src/theme/components/index.js +33 -25
  84. package/src/theme/components/inputWrapper.js +28 -25
  85. package/src/theme/components/link.js +29 -36
  86. package/src/theme/components/loader/index.js +3 -3
  87. package/src/theme/components/loader/loaderLinear.js +34 -34
  88. package/src/theme/components/loader/loaderRadial.js +40 -34
  89. package/src/theme/components/logo.js +4 -4
  90. package/src/theme/components/newPassword.js +14 -13
  91. package/src/theme/components/numberField.js +20 -19
  92. package/src/theme/components/passcode.js +20 -22
  93. package/src/theme/components/password.js +22 -21
  94. package/src/theme/components/phoneField.js +23 -23
  95. package/src/theme/components/switchToggle.js +47 -46
  96. package/src/theme/components/text.js +72 -72
  97. package/src/theme/components/textArea.js +27 -25
  98. package/src/theme/components/textField.js +23 -22
  99. package/src/theme/components/totpImage.js +4 -4
  100. package/src/theme/components/uploadFile.js +60 -0
  101. package/src/theme/globals.js +123 -124
  102. package/src/theme/index.js +1 -1
  103. package/dist/cjs/index.cjs.js +0 -5924
  104. package/dist/cjs/index.cjs.js.map +0 -1
  105. package/dist/cjs/package.json +0 -1
  106. package/dist/index.d.ts +0 -51
  107. package/dist/index.esm.js +0 -6606
  108. package/dist/index.esm.js.map +0 -1
  109. package/dist/umd/1018.js +0 -577
  110. package/dist/umd/1018.js.LICENSE.txt +0 -23
  111. package/dist/umd/2481.js +0 -1
  112. package/dist/umd/3208.js +0 -2
  113. package/dist/umd/3208.js.LICENSE.txt +0 -5
  114. package/dist/umd/3585.js +0 -1
  115. package/dist/umd/3878.js +0 -1
  116. package/dist/umd/4201.js +0 -1
  117. package/dist/umd/422.js +0 -2
  118. package/dist/umd/422.js.LICENSE.txt +0 -5
  119. package/dist/umd/4447.js +0 -1
  120. package/dist/umd/4513.js +0 -1
  121. package/dist/umd/4803.js +0 -1
  122. package/dist/umd/541.js +0 -744
  123. package/dist/umd/541.js.LICENSE.txt +0 -21
  124. package/dist/umd/5767.js +0 -2
  125. package/dist/umd/5767.js.LICENSE.txt +0 -15
  126. package/dist/umd/5806.js +0 -109
  127. package/dist/umd/5806.js.LICENSE.txt +0 -5
  128. package/dist/umd/7056.js +0 -48
  129. package/dist/umd/7056.js.LICENSE.txt +0 -5
  130. package/dist/umd/7101.js +0 -148
  131. package/dist/umd/7101.js.LICENSE.txt +0 -11
  132. package/dist/umd/729.js +0 -1
  133. package/dist/umd/7824.js +0 -229
  134. package/dist/umd/7824.js.LICENSE.txt +0 -27
  135. package/dist/umd/7840.js +0 -356
  136. package/dist/umd/7840.js.LICENSE.txt +0 -61
  137. package/dist/umd/8725.js +0 -37
  138. package/dist/umd/8725.js.LICENSE.txt +0 -11
  139. package/dist/umd/9211.js +0 -312
  140. package/dist/umd/9211.js.LICENSE.txt +0 -5
  141. package/dist/umd/9241.js +0 -1
  142. package/dist/umd/9314.js +0 -283
  143. package/dist/umd/9314.js.LICENSE.txt +0 -27
  144. package/dist/umd/9437.js +0 -19
  145. package/dist/umd/9437.js.LICENSE.txt +0 -5
  146. package/dist/umd/9515.js +0 -202
  147. package/dist/umd/9515.js.LICENSE.txt +0 -11
  148. package/dist/umd/9789.js +0 -1
  149. package/dist/umd/boolean-fields-descope-boolean-field-internal-index-js.js +0 -1
  150. package/dist/umd/boolean-fields-descope-checkbox-index-js.js +0 -1
  151. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +0 -1
  152. package/dist/umd/descope-button-index-js.js +0 -1
  153. package/dist/umd/descope-combo-box-index-js.js +0 -1
  154. package/dist/umd/descope-container-index-js.js +0 -1
  155. package/dist/umd/descope-date-picker-index-js.js +0 -1
  156. package/dist/umd/descope-divider-index-js.js +0 -1
  157. package/dist/umd/descope-email-field-index-js.js +0 -1
  158. package/dist/umd/descope-image-index-js.js +0 -1
  159. package/dist/umd/descope-link-index-js.js +0 -1
  160. package/dist/umd/descope-loader-linear-index-js.js +0 -1
  161. package/dist/umd/descope-loader-radial-index-js.js +0 -1
  162. package/dist/umd/descope-logo-index-js.js +0 -1
  163. package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +0 -1
  164. package/dist/umd/descope-new-password-index-js.js +0 -1
  165. package/dist/umd/descope-number-field-index-js.js +0 -1
  166. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +0 -1
  167. package/dist/umd/descope-passcode-index-js.js +0 -1
  168. package/dist/umd/descope-password-index-js.js +0 -1
  169. package/dist/umd/descope-phone-field-descope-phone-field-internal-index-js.js +0 -1
  170. package/dist/umd/descope-phone-field-index-js.js +0 -1
  171. package/dist/umd/descope-text-area-index-js.js +0 -1
  172. package/dist/umd/descope-text-field-index-js.js +0 -1
  173. package/dist/umd/descope-text-index-js.js +0 -1
  174. package/dist/umd/descope-totp-image-index-js.js +0 -1
  175. package/dist/umd/index.js +0 -1
@@ -1,39 +1,37 @@
1
- import globals from '../globals';
2
- import { getThemeRefs } from '../../helpers/themeHelpers';
3
1
  import { CheckboxClass } from '../../components/boolean-fields/descope-checkbox/CheckboxClass';
4
2
  import { refs } from './inputWrapper';
5
3
 
6
- const globalRefs = getThemeRefs(globals);
7
4
  const vars = CheckboxClass.cssVarList;
8
5
 
9
6
  const checkbox = {
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,
15
- [vars.labelFontWeight]: '400',
16
- [vars.labelSpacing]: '0.75em',
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.inputBorderColor]: refs.borderColor,
23
- [vars.inputBorderWidth]: refs.borderWidth,
24
- [vars.inputBorderStyle]: refs.borderStyle,
25
- [vars.inputBackgroundColor]: refs.inputBackgroundColor,
26
- [vars.inputSize]: '2em',
7
+ [vars.hostWidth]: refs.width,
8
+ [vars.fontSize]: refs.fontSize,
9
+ [vars.fontFamily]: refs.fontFamily,
10
+ [vars.labelTextColor]: refs.labelTextColor,
11
+ [vars.labelRequiredIndicator]: refs.requiredIndicator,
12
+ [vars.labelFontWeight]: '400',
13
+ [vars.labelSpacing]: '0.75em',
14
+ [vars.errorMessageTextColor]: refs.errorMessageTextColor,
15
+ [vars.inputOutlineWidth]: refs.outlineWidth,
16
+ [vars.inputOutlineOffset]: refs.outlineOffset,
17
+ [vars.inputOutlineColor]: refs.outlineColor,
18
+ [vars.inputOutlineStyle]: refs.outlineStyle,
19
+ [vars.inputBorderRadius]: refs.borderRadius,
20
+ [vars.inputBorderColor]: refs.borderColor,
21
+ [vars.inputBorderWidth]: refs.borderWidth,
22
+ [vars.inputBorderStyle]: refs.borderStyle,
23
+ [vars.inputBackgroundColor]: refs.inputBackgroundColor,
24
+ [vars.inputSize]: '2em',
27
25
 
28
- _checked: {
29
- [vars.inputBackgroundColor]: refs.backgroundColor,
30
- [vars.inputValueTextColor]: refs.valueTextColor,
31
- },
26
+ _checked: {
27
+ [vars.inputBackgroundColor]: refs.backgroundColor,
28
+ [vars.inputValueTextColor]: refs.valueTextColor,
29
+ },
32
30
 
33
- _disabled: {
34
- [vars.labelTextColor]: refs.labelTextColor,
35
- },
31
+ _disabled: {
32
+ [vars.labelTextColor]: refs.labelTextColor,
33
+ },
36
34
  };
37
35
 
38
36
  export default checkbox;
39
- export { vars }
37
+ export { vars };
@@ -7,40 +7,41 @@ const globalRefs = getThemeRefs(globals);
7
7
  const vars = ComboBoxClass.cssVarList;
8
8
 
9
9
  export const comboBox = {
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.inputHorizontalPadding]: refs.horizontalPadding,
27
- [vars.inputHeight]: refs.inputHeight,
28
- [vars.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
29
- [vars.inputDropdownButtonCursor]: 'pointer',
30
- [vars.inputDropdownButtonSize]: refs.toggleButtonSize,
31
- [vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
10
+ [vars.hostWidth]: refs.width,
11
+ [vars.fontSize]: refs.fontSize,
12
+ [vars.fontFamily]: refs.fontFamily,
13
+ [vars.labelTextColor]: refs.labelTextColor,
14
+ [vars.errorMessageTextColor]: refs.errorMessageTextColor,
15
+ [vars.inputBorderColor]: refs.borderColor,
16
+ [vars.inputBorderWidth]: refs.borderWidth,
17
+ [vars.inputBorderStyle]: refs.borderStyle,
18
+ [vars.inputBorderRadius]: refs.borderRadius,
19
+ [vars.inputOutlineColor]: refs.outlineColor,
20
+ [vars.inputOutlineOffset]: refs.outlineOffset,
21
+ [vars.inputOutlineWidth]: refs.outlineWidth,
22
+ [vars.inputOutlineStyle]: refs.outlineStyle,
23
+ [vars.labelRequiredIndicator]: refs.requiredIndicator,
24
+ [vars.inputValueTextColor]: refs.valueTextColor,
25
+ [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
26
+ [vars.inputBackgroundColor]: refs.backgroundColor,
27
+ [vars.inputHorizontalPadding]: refs.horizontalPadding,
28
+ [vars.inputHeight]: refs.inputHeight,
29
+ [vars.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
30
+ [vars.inputDropdownButtonCursor]: 'pointer',
31
+ [vars.inputDropdownButtonSize]: refs.toggleButtonSize,
32
+ [vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
32
33
 
33
- _readonly: {
34
- [vars.inputDropdownButtonCursor]: 'default'
35
- },
34
+ _readonly: {
35
+ [vars.inputDropdownButtonCursor]: 'default',
36
+ },
36
37
 
37
- [vars.overlay.minHeight]: '400px',
38
- [vars.overlay.margin]: '0 auto'
38
+ [vars.overlay.minHeight]: '400px',
39
+ [vars.overlay.margin]: '0 auto',
39
40
 
40
- // [vars.overlayCursor]: 'pointer',
41
- // [vars.overlayBackground]: globalRefs.colors.surface.light,
42
- // [vars.overlayBorder]: `2px solid red`,
41
+ // [vars.overlayCursor]: 'pointer',
42
+ // [vars.overlayBackground]: globalRefs.colors.surface.light,
43
+ // [vars.overlayBorder]: `2px solid red`,
43
44
  };
44
45
 
45
46
  export default comboBox;
46
- export { vars }
47
+ export { vars };
@@ -1,106 +1,116 @@
1
- import globals from "../globals";
2
- import { getThemeRefs, createHelperVars } from "../../helpers/themeHelpers";
3
- import { ContainerClass, componentName } from "../../components/descope-container/ContainerClass";
1
+ import globals from '../globals';
2
+ import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
3
+ import { ContainerClass, componentName } from '../../components/descope-container/ContainerClass';
4
4
 
5
5
  const globalRefs = getThemeRefs(globals);
6
6
 
7
- const compVars = ContainerClass.cssVarList
7
+ const compVars = ContainerClass.cssVarList;
8
8
 
9
9
  const verticalAlignment = {
10
- start: { verticalAlignment: 'start' },
11
- center: { verticalAlignment: 'safe center' },
12
- end: { verticalAlignment: 'end' },
13
- }
10
+ start: { verticalAlignment: 'start' },
11
+ center: { verticalAlignment: 'safe center' },
12
+ end: { verticalAlignment: 'end' },
13
+ };
14
14
 
15
15
  const horizontalAlignment = {
16
- start: { horizontalAlignment: 'start' },
17
- center: { horizontalAlignment: 'safe center' },
18
- end: { horizontalAlignment: 'end' },
19
- }
20
-
21
- const [helperTheme, helperRefs, helperVars] =
22
- createHelperVars({
23
- verticalAlignment,
24
- horizontalAlignment,
25
- shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
26
- }, componentName)
16
+ start: { horizontalAlignment: 'start' },
17
+ center: { horizontalAlignment: 'safe center' },
18
+ end: { horizontalAlignment: 'end' },
19
+ };
20
+
21
+ const [helperTheme, helperRefs, helperVars] = createHelperVars(
22
+ {
23
+ verticalAlignment,
24
+ horizontalAlignment,
25
+ shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
26
+ },
27
+ componentName
28
+ );
27
29
 
28
30
  const { shadowColor } = helperRefs;
29
31
 
30
32
  const container = {
31
- ...helperTheme,
32
-
33
- [compVars.hostWidth]: '100%',
34
- [compVars.boxShadow]: 'none',
35
- [compVars.backgroundColor]: globalRefs.colors.surface.light,
36
- [compVars.color]: globalRefs.colors.surface.contrast,
37
-
38
- verticalPadding: {
39
- sm: { [compVars.verticalPadding]: '5px' },
40
- md: { [compVars.verticalPadding]: '10px' },
41
- lg: { [compVars.verticalPadding]: '20px' },
42
- },
43
-
44
- horizontalPadding: {
45
- sm: { [compVars.horizontalPadding]: '5px' },
46
- md: { [compVars.horizontalPadding]: '10px' },
47
- lg: { [compVars.horizontalPadding]: '20px' },
48
- },
49
-
50
- direction: {
51
- row: {
52
- [compVars.flexDirection]: 'row',
53
- [compVars.alignItems]: helperRefs.verticalAlignment,
54
- [compVars.justifyContent]: helperRefs.horizontalAlignment,
55
- [compVars.flexWrap]: 'wrap',
56
- horizontalAlignment: {
57
- spaceBetween: {
58
- [helperVars.horizontalAlignment]: 'space-between'
59
- },
60
- }
61
- },
62
- column: {
63
- [compVars.flexDirection]: 'column',
64
- [compVars.alignItems]: helperRefs.horizontalAlignment,
65
- [compVars.justifyContent]: helperRefs.verticalAlignment,
66
- verticalAlignment: {
67
- spaceBetween: {
68
- [helperVars.verticalAlignment]: 'space-between'
69
- }
70
- }
71
- },
72
- },
73
-
74
- spaceBetween: {
75
- sm: { [compVars.gap]: '10px' },
76
- md: { [compVars.gap]: '20px' },
77
- lg: { [compVars.gap]: '30px' }
78
- },
79
-
80
- shadow: {
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}` },
85
- '2xl': {
86
- [helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings
87
- [compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${shadowColor}`
88
- },
89
- },
90
-
91
- borderRadius: {
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'] },
98
- }
33
+ ...helperTheme,
34
+
35
+ [compVars.hostWidth]: '100%',
36
+ [compVars.boxShadow]: 'none',
37
+ [compVars.backgroundColor]: globalRefs.colors.surface.light,
38
+ [compVars.color]: globalRefs.colors.surface.contrast,
39
+
40
+ verticalPadding: {
41
+ sm: { [compVars.verticalPadding]: '5px' },
42
+ md: { [compVars.verticalPadding]: '10px' },
43
+ lg: { [compVars.verticalPadding]: '20px' },
44
+ },
45
+
46
+ horizontalPadding: {
47
+ sm: { [compVars.horizontalPadding]: '5px' },
48
+ md: { [compVars.horizontalPadding]: '10px' },
49
+ lg: { [compVars.horizontalPadding]: '20px' },
50
+ },
51
+
52
+ direction: {
53
+ row: {
54
+ [compVars.flexDirection]: 'row',
55
+ [compVars.alignItems]: helperRefs.verticalAlignment,
56
+ [compVars.justifyContent]: helperRefs.horizontalAlignment,
57
+ [compVars.flexWrap]: 'wrap',
58
+ horizontalAlignment: {
59
+ spaceBetween: {
60
+ [helperVars.horizontalAlignment]: 'space-between',
61
+ },
62
+ },
63
+ },
64
+ column: {
65
+ [compVars.flexDirection]: 'column',
66
+ [compVars.alignItems]: helperRefs.horizontalAlignment,
67
+ [compVars.justifyContent]: helperRefs.verticalAlignment,
68
+ verticalAlignment: {
69
+ spaceBetween: {
70
+ [helperVars.verticalAlignment]: 'space-between',
71
+ },
72
+ },
73
+ },
74
+ },
75
+
76
+ spaceBetween: {
77
+ sm: { [compVars.gap]: '10px' },
78
+ md: { [compVars.gap]: '20px' },
79
+ lg: { [compVars.gap]: '30px' },
80
+ },
81
+
82
+ shadow: {
83
+ sm: {
84
+ [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`,
85
+ },
86
+ md: {
87
+ [compVars.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}`,
88
+ },
89
+ lg: {
90
+ [compVars.boxShadow]: `${globalRefs.shadow.wide.lg} ${shadowColor}, ${globalRefs.shadow.narrow.lg} ${shadowColor}`,
91
+ },
92
+ xl: {
93
+ [compVars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
94
+ },
95
+ '2xl': {
96
+ [helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings
97
+ [compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${shadowColor}`,
98
+ },
99
+ },
100
+
101
+ borderRadius: {
102
+ sm: { [compVars.borderRadius]: globalRefs.radius.sm },
103
+ md: { [compVars.borderRadius]: globalRefs.radius.md },
104
+ lg: { [compVars.borderRadius]: globalRefs.radius.lg },
105
+ xl: { [compVars.borderRadius]: globalRefs.radius.xl },
106
+ '2xl': { [compVars.borderRadius]: globalRefs.radius['2xl'] },
107
+ '3xl': { [compVars.borderRadius]: globalRefs.radius['3xl'] },
108
+ },
99
109
  };
100
110
 
101
111
  export default container;
102
112
 
103
113
  export const vars = {
104
- ...compVars,
105
- ...helperVars
114
+ ...compVars,
115
+ ...helperVars,
106
116
  };
@@ -5,44 +5,43 @@ import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
5
5
  const globalRefs = getThemeRefs(globals);
6
6
  const compVars = DividerClass.cssVarList;
7
7
 
8
- const [
9
- helperTheme,
10
- helperRefs,
11
- helperVars
12
- ] = createHelperVars({
13
- thickness: '2px',
14
- spacing: '10px'
15
- }, componentName);
8
+ const [helperTheme, helperRefs, helperVars] = createHelperVars(
9
+ {
10
+ thickness: '2px',
11
+ spacing: '10px',
12
+ },
13
+ componentName
14
+ );
16
15
 
17
16
  const divider = {
18
- ...helperTheme,
17
+ ...helperTheme,
19
18
 
20
- [compVars.alignItems]: 'center',
21
- [compVars.flexDirection]: 'row',
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,
19
+ [compVars.alignItems]: 'center',
20
+ [compVars.flexDirection]: 'row',
21
+ [compVars.alignSelf]: 'stretch',
22
+ [compVars.hostWidth]: '100%',
23
+ [compVars.stripeColor]: globalRefs.colors.surface.main,
24
+ [compVars.stripeColorOpacity]: '0.5',
25
+ [compVars.stripeHorizontalThickness]: helperRefs.thickness,
26
+ [compVars.labelTextWidth]: 'fit-content',
27
+ [compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
28
+ [compVars.labelTextHorizontalSpacing]: helperRefs.spacing,
30
29
 
31
- _vertical: {
32
- [compVars.minHeight]: '200px',
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,
40
- }
30
+ _vertical: {
31
+ [compVars.minHeight]: '200px',
32
+ [compVars.flexDirection]: 'column',
33
+ [compVars.hostWidth]: 'fit-content',
34
+ [compVars.hostPadding]: `0 calc(${helperRefs.thickness} * 3)`,
35
+ [compVars.stripeVerticalThickness]: helperRefs.thickness,
36
+ [compVars.labelTextWidth]: 'fit-content',
37
+ [compVars.labelTextMaxWidth]: '100%',
38
+ [compVars.labelTextVerticalSpacing]: helperRefs.spacing,
39
+ },
41
40
  };
42
41
 
43
42
  export default divider;
44
43
 
45
44
  export const vars = {
46
- ...compVars,
47
- ...helperVars
45
+ ...compVars,
46
+ ...helperVars,
48
47
  };
@@ -4,25 +4,26 @@ import { refs } from './inputWrapper';
4
4
  const vars = EmailFieldClass.cssVarList;
5
5
 
6
6
  const emailField = {
7
- [vars.hostWidth]: refs.width,
8
- [vars.hostMinWidth]: refs.minWidth,
9
- [vars.fontSize]: refs.fontSize,
10
- [vars.fontFamily]: refs.fontFamily,
11
- [vars.labelTextColor]: refs.labelTextColor,
12
- [vars.inputValueTextColor]: refs.valueTextColor,
13
- [vars.labelRequiredIndicator]: refs.requiredIndicator,
14
- [vars.inputPlaceholderColor]: refs.placeholderTextColor,
15
- [vars.inputBorderWidth]: refs.borderWidth,
16
- [vars.inputBorderStyle]: refs.borderStyle,
17
- [vars.inputBorderColor]: refs.borderColor,
18
- [vars.inputBorderRadius]: refs.borderRadius,
19
- [vars.inputOutlineWidth]: refs.outlineWidth,
20
- [vars.inputOutlineStyle]: refs.outlineStyle,
21
- [vars.inputOutlineColor]: refs.outlineColor,
22
- [vars.inputOutlineOffset]: refs.outlineOffset,
23
- [vars.inputBackgroundColor]: refs.backgroundColor,
24
- [vars.inputHorizontalPadding]: refs.horizontalPadding,
25
- [vars.inputHeight]: refs.inputHeight
7
+ [vars.hostWidth]: refs.width,
8
+ [vars.hostMinWidth]: refs.minWidth,
9
+ [vars.fontSize]: refs.fontSize,
10
+ [vars.fontFamily]: refs.fontFamily,
11
+ [vars.labelTextColor]: refs.labelTextColor,
12
+ [vars.errorMessageTextColor]: refs.errorMessageTextColor,
13
+ [vars.inputValueTextColor]: refs.valueTextColor,
14
+ [vars.labelRequiredIndicator]: refs.requiredIndicator,
15
+ [vars.inputPlaceholderColor]: refs.placeholderTextColor,
16
+ [vars.inputBorderWidth]: refs.borderWidth,
17
+ [vars.inputBorderStyle]: refs.borderStyle,
18
+ [vars.inputBorderColor]: refs.borderColor,
19
+ [vars.inputBorderRadius]: refs.borderRadius,
20
+ [vars.inputOutlineWidth]: refs.outlineWidth,
21
+ [vars.inputOutlineStyle]: refs.outlineStyle,
22
+ [vars.inputOutlineColor]: refs.outlineColor,
23
+ [vars.inputOutlineOffset]: refs.outlineOffset,
24
+ [vars.inputBackgroundColor]: refs.backgroundColor,
25
+ [vars.inputHorizontalPadding]: refs.horizontalPadding,
26
+ [vars.inputHeight]: refs.inputHeight,
26
27
  };
27
28
 
28
29
  export default emailField;
@@ -1,8 +1,8 @@
1
- import { ImageClass } from "../../components/descope-image/ImageClass";
1
+ import { ImageClass } from '../../components/descope-image/ImageClass';
2
2
 
3
- const vars = ImageClass.cssVarList
3
+ const vars = ImageClass.cssVarList;
4
4
 
5
5
  const image = {};
6
6
 
7
7
  export default image;
8
- export { vars }
8
+ export { vars };
@@ -19,34 +19,42 @@ import * as image from './image';
19
19
  import * as phoneField from './phoneField';
20
20
  import * as newPassword from './newPassword';
21
21
  import * as inputWrapper from './inputWrapper';
22
+ import * as uploadFile from './uploadFile';
22
23
 
23
24
  const components = {
24
- button,
25
- textField,
26
- password,
27
- numberField,
28
- emailField,
29
- textArea,
30
- checkbox,
31
- switchToggle,
32
- container,
33
- logo,
34
- totpImage,
35
- text,
36
- link,
37
- divider,
38
- passcode,
39
- loaderRadial,
40
- loaderLinear,
41
- comboBox,
42
- image,
43
- phoneField,
44
- newPassword,
45
- inputWrapper,
25
+ button,
26
+ textField,
27
+ password,
28
+ numberField,
29
+ emailField,
30
+ textArea,
31
+ checkbox,
32
+ switchToggle,
33
+ container,
34
+ logo,
35
+ totpImage,
36
+ text,
37
+ link,
38
+ divider,
39
+ passcode,
40
+ loaderRadial,
41
+ loaderLinear,
42
+ comboBox,
43
+ image,
44
+ phoneField,
45
+ newPassword,
46
+ inputWrapper,
47
+ uploadFile,
46
48
  };
47
49
 
48
- const theme = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].default }), {});
49
- const vars = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].vars }), {});
50
+ const theme = Object.keys(components).reduce(
51
+ (acc, comp) => ({ ...acc, [comp]: components[comp].default }),
52
+ {}
53
+ );
54
+ const vars = Object.keys(components).reduce(
55
+ (acc, comp) => ({ ...acc, [comp]: components[comp].vars }),
56
+ {}
57
+ );
50
58
 
51
59
  export default theme;
52
- export { vars }
60
+ export { vars };
@@ -1,16 +1,17 @@
1
1
  import globals from '../globals';
2
- import { getThemeRefs } from '../../helpers/themeHelpers';
3
- import { createHelperVars } from '../../helpers/themeHelpers';
2
+ import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
4
3
  import { getComponentName } from '../../helpers/componentHelpers';
5
4
 
6
5
  const componentName = getComponentName('input-wrapper');
7
6
  const globalRefs = getThemeRefs(globals);
8
7
 
9
- const [theme, refs, vars] = createHelperVars({
8
+ const [theme, refs, vars] = createHelperVars(
9
+ {
10
10
  labelTextColor: globalRefs.colors.surface.contrast,
11
11
  valueTextColor: globalRefs.colors.surface.contrast,
12
12
  placeholderTextColor: globalRefs.colors.surface.main,
13
13
  requiredIndicator: "'*'",
14
+ errorMessageTextColor: globalRefs.colors.error.main,
14
15
 
15
16
  borderWidth: globalRefs.border.xs,
16
17
  borderRadius: globalRefs.radius.xs,
@@ -32,40 +33,42 @@ const [theme, refs, vars] = createHelperVars({
32
33
  fontFamily: globalRefs.fonts.font1.family,
33
34
 
34
35
  size: {
35
- xs: { fontSize: '12px' },
36
- sm: { fontSize: '14px' },
37
- md: { fontSize: '16px' },
38
- lg: { fontSize: '18px' }
36
+ xs: { fontSize: '12px' },
37
+ sm: { fontSize: '14px' },
38
+ md: { fontSize: '16px' },
39
+ lg: { fontSize: '18px' },
39
40
  },
40
41
 
41
42
  _fullWidth: {
42
- width: '100%',
43
+ width: '100%',
43
44
  },
44
45
 
45
46
  _focused: {
46
- outlineColor: globalRefs.colors.surface.main,
47
- _invalid: {
48
- outlineColor: globalRefs.colors.error.main,
49
- }
47
+ outlineColor: globalRefs.colors.surface.main,
48
+ _invalid: {
49
+ outlineColor: globalRefs.colors.error.main,
50
+ },
50
51
  },
51
52
 
52
53
  _bordered: {
53
- outlineWidth: globalRefs.border.xs,
54
- borderColor: globalRefs.colors.surface.main,
55
- borderStyle: 'solid',
56
- _invalid: {
57
- borderColor: globalRefs.colors.error.main,
58
- }
54
+ outlineWidth: globalRefs.border.xs,
55
+ borderColor: globalRefs.colors.surface.main,
56
+ borderStyle: 'solid',
57
+ _invalid: {
58
+ borderColor: globalRefs.colors.error.main,
59
+ },
59
60
  },
60
61
 
61
62
  _disabled: {
62
- labelTextColor: globalRefs.colors.surface.main,
63
- borderColor: globalRefs.colors.surface.main,
64
- valueTextColor: globalRefs.colors.surface.dark,
65
- placeholderTextColor: globalRefs.colors.surface.dark,
66
- backgroundColor: globalRefs.colors.surface.main
67
- }
68
- }, componentName);
63
+ labelTextColor: globalRefs.colors.surface.main,
64
+ borderColor: globalRefs.colors.surface.main,
65
+ valueTextColor: globalRefs.colors.surface.dark,
66
+ placeholderTextColor: globalRefs.colors.surface.dark,
67
+ backgroundColor: globalRefs.colors.surface.main,
68
+ },
69
+ },
70
+ componentName
71
+ );
69
72
 
70
73
  export { refs, vars };
71
74
  export default theme;