@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
@@ -6,42 +6,35 @@ const globalRefs = getThemeRefs(globals);
6
6
  const vars = LinkClass.cssVarList;
7
7
 
8
8
  const link = {
9
- [vars.cursor]: 'pointer',
10
-
11
- [vars.textUnderlineWidth]: '2px',
12
- [vars.textUnderlineStyle]: 'solid',
13
- [vars.textUnderlineColor]: 'transparent',
14
- [vars.textColor]: globalRefs.colors.primary.main,
15
-
16
- _hover: {
17
- [vars.textUnderlineColor]: globalRefs.colors.primary.main
18
- },
19
-
20
- textAlign: {
21
- right: { [vars.textAlign]: 'right' },
22
- left: { [vars.textAlign]: 'left' },
23
- center: { [vars.textAlign]: 'center' }
24
- },
25
-
26
- _fullWidth: {
27
- [vars.hostWidth]: '100%'
28
- },
29
-
30
- mode: {
31
- primary: {
32
- [vars.textColor]: globalRefs.colors.primary.main,
33
- },
34
- secondary: {
35
- [vars.textColor]: globalRefs.colors.secondary.main,
36
- },
37
- error: {
38
- [vars.textColor]: globalRefs.colors.error.main,
39
- },
40
- success: {
41
- [vars.textColor]: globalRefs.colors.success.main,
42
- }
43
- }
9
+ [vars.cursor]: 'pointer',
10
+
11
+ [vars.textColor]: globalRefs.colors.primary.main,
12
+
13
+ textAlign: {
14
+ right: { [vars.textAlign]: 'right' },
15
+ left: { [vars.textAlign]: 'left' },
16
+ center: { [vars.textAlign]: 'center' },
17
+ },
18
+
19
+ _fullWidth: {
20
+ [vars.hostWidth]: '100%',
21
+ },
22
+
23
+ mode: {
24
+ primary: {
25
+ [vars.textColor]: globalRefs.colors.primary.main,
26
+ },
27
+ secondary: {
28
+ [vars.textColor]: globalRefs.colors.secondary.main,
29
+ },
30
+ error: {
31
+ [vars.textColor]: globalRefs.colors.error.main,
32
+ },
33
+ success: {
34
+ [vars.textColor]: globalRefs.colors.success.main,
35
+ },
36
+ },
44
37
  };
45
38
 
46
39
  export default link;
47
- export { vars }
40
+ export { vars };
@@ -1,4 +1,4 @@
1
- import * as loaderLinear from './loaderLinear'
2
- import * as loaderRadial from './loaderRadial'
1
+ import * as loaderLinear from './loaderLinear';
2
+ import * as loaderRadial from './loaderRadial';
3
3
 
4
- export { loaderLinear, loaderRadial };
4
+ export { loaderLinear, loaderRadial };
@@ -6,40 +6,40 @@ const globalRefs = getThemeRefs(globals);
6
6
  const vars = LoaderLinearClass.cssVarList;
7
7
 
8
8
  const loaderLinear = {
9
- [vars.hostDisplay]: 'inline-block',
10
- [vars.hostWidth]: '100%',
11
-
12
- [vars.barColor]: globalRefs.colors.surface.contrast,
13
- [vars.barWidth]: '20%',
14
-
15
- [vars.barBackgroundColor]: globalRefs.colors.surface.main,
16
- [vars.barBorderRadius]: '4px',
17
-
18
- [vars.animationDuration]: '2s',
19
- [vars.animationTimingFunction]: 'linear',
20
- [vars.animationIterationCount]: 'infinite',
21
-
22
- size: {
23
- xs: { [vars.barHeight]: '8px' },
24
- sm: { [vars.barHeight]: '10px' },
25
- md: { [vars.barHeight]: '14px' },
26
- lg: { [vars.barHeight]: '20px' },
27
- xl: { [vars.barHeight]: '25px' }
28
- },
29
-
30
- mode: {
31
- primary: {
32
- [vars.barColor]: globalRefs.colors.primary.main
33
- },
34
- secondary: {
35
- [vars.barColor]: globalRefs.colors.secondary.main
36
- }
37
- },
38
-
39
- _hidden: {
40
- [vars.hostDisplay]: 'none'
41
- }
9
+ [vars.hostDisplay]: 'inline-block',
10
+ [vars.hostWidth]: '100%',
11
+
12
+ [vars.barColor]: globalRefs.colors.surface.contrast,
13
+ [vars.barWidth]: '20%',
14
+
15
+ [vars.barBackgroundColor]: globalRefs.colors.surface.main,
16
+ [vars.barBorderRadius]: '4px',
17
+
18
+ [vars.animationDuration]: '2s',
19
+ [vars.animationTimingFunction]: 'linear',
20
+ [vars.animationIterationCount]: 'infinite',
21
+ [vars.verticalPadding]: '0.25em',
22
+
23
+ size: {
24
+ xs: { [vars.barHeight]: '2px' },
25
+ sm: { [vars.barHeight]: '4px' },
26
+ md: { [vars.barHeight]: '6px' },
27
+ lg: { [vars.barHeight]: '8px' },
28
+ },
29
+
30
+ mode: {
31
+ primary: {
32
+ [vars.barColor]: globalRefs.colors.primary.main,
33
+ },
34
+ secondary: {
35
+ [vars.barColor]: globalRefs.colors.secondary.main,
36
+ },
37
+ },
38
+
39
+ _hidden: {
40
+ [vars.hostDisplay]: 'none',
41
+ },
42
42
  };
43
43
 
44
44
  export default loaderLinear;
45
- export { vars }
45
+ export { vars };
@@ -1,48 +1,54 @@
1
1
  import globals from '../../globals';
2
- import { LoaderRadialClass, componentName } from '../../../components/descope-loader-radial/LoaderRadialClass';
2
+ import {
3
+ LoaderRadialClass,
4
+ componentName,
5
+ } from '../../../components/descope-loader-radial/LoaderRadialClass';
3
6
  import { createHelperVars, getThemeRefs } from '../../../helpers/themeHelpers';
4
7
 
5
8
  const globalRefs = getThemeRefs(globals);
6
9
  const vars = LoaderRadialClass.cssVarList;
7
10
 
8
- const [helperTheme, helperRefs] = createHelperVars({
9
- spinnerColor: globalRefs.colors.surface.contrast,
10
- mode: {
11
- primary: {
12
- spinnerColor: globalRefs.colors.primary.main
13
- },
14
- secondary: {
15
- spinnerColor: globalRefs.colors.secondary.main
16
- }
17
- }
18
- }, componentName);
11
+ const [helperTheme, helperRefs] = createHelperVars(
12
+ {
13
+ spinnerColor: globalRefs.colors.surface.contrast,
14
+ mode: {
15
+ primary: {
16
+ spinnerColor: globalRefs.colors.primary.main,
17
+ },
18
+ secondary: {
19
+ spinnerColor: globalRefs.colors.secondary.main,
20
+ },
21
+ },
22
+ },
23
+ componentName
24
+ );
19
25
 
20
26
  const loaderRadial = {
21
- ...helperTheme,
27
+ ...helperTheme,
22
28
 
23
- [vars.animationDuration]: '2s',
24
- [vars.animationTimingFunction]: 'linear',
25
- [vars.animationIterationCount]: 'infinite',
26
- [vars.spinnerBorderStyle]: 'solid',
27
- [vars.spinnerBorderWidth]: '0.2em',
28
- [vars.spinnerBorderRadius]: '50%',
29
- [vars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
30
- [vars.spinnerQuadrant2Color]: 'transparent',
31
- [vars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
32
- [vars.spinnerQuadrant4Color]: 'transparent',
29
+ [vars.animationDuration]: '2s',
30
+ [vars.animationTimingFunction]: 'linear',
31
+ [vars.animationIterationCount]: 'infinite',
32
+ [vars.spinnerBorderStyle]: 'solid',
33
+ [vars.spinnerBorderWidth]: '0.2em',
34
+ [vars.spinnerBorderRadius]: '50%',
35
+ [vars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
36
+ [vars.spinnerQuadrant2Color]: 'transparent',
37
+ [vars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
38
+ [vars.spinnerQuadrant4Color]: 'transparent',
33
39
 
34
- size: {
35
- xs: { [vars.spinnerSize]: '20px' },
36
- sm: { [vars.spinnerSize]: '30px' },
37
- md: { [vars.spinnerSize]: '40px' },
38
- lg: { [vars.spinnerSize]: '60px' },
39
- xl: { [vars.spinnerSize]: '80px' }
40
- },
40
+ size: {
41
+ xs: { [vars.spinnerSize]: '20px' },
42
+ sm: { [vars.spinnerSize]: '30px' },
43
+ md: { [vars.spinnerSize]: '40px' },
44
+ lg: { [vars.spinnerSize]: '60px' },
45
+ xl: { [vars.spinnerSize]: '80px' },
46
+ },
41
47
 
42
- _hidden: {
43
- [vars.hostDisplay]: 'none'
44
- }
48
+ _hidden: {
49
+ [vars.hostDisplay]: 'none',
50
+ },
45
51
  };
46
52
 
47
53
  export default loaderRadial;
48
- export { vars }
54
+ export { vars };
@@ -1,10 +1,10 @@
1
- import { LogoClass } from "../../components/descope-logo/LogoClass";
1
+ import { LogoClass } from '../../components/descope-logo/LogoClass';
2
2
 
3
- const vars = LogoClass.cssVarList
3
+ const vars = LogoClass.cssVarList;
4
4
 
5
5
  const logo = {
6
- [vars.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'
6
+ [vars.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
7
7
  };
8
8
 
9
9
  export default logo;
10
- export { vars }
10
+ export { vars };
@@ -1,22 +1,23 @@
1
1
  import { NewPasswordClass } from '../../components/descope-new-password/NewPasswordClass';
2
- import { refs } from "./inputWrapper"
2
+ import { refs } from './inputWrapper';
3
3
 
4
4
  const vars = NewPasswordClass.cssVarList;
5
5
 
6
6
  const newPassword = {
7
- [vars.hostWidth]: refs.width,
8
- [vars.hostMinWidth]: refs.minWidth,
9
- [vars.fontSize]: refs.fontSize,
10
- [vars.fontFamily]: refs.fontFamily,
11
- [vars.spaceBetweenInputs]: '1em',
7
+ [vars.hostWidth]: refs.width,
8
+ [vars.hostMinWidth]: refs.minWidth,
9
+ [vars.fontSize]: refs.fontSize,
10
+ [vars.fontFamily]: refs.fontFamily,
11
+ [vars.spaceBetweenInputs]: '1em',
12
+ [vars.errorMessageTextColor]: refs.errorMessageTextColor,
12
13
 
13
- _required: {
14
- // NewPassword doesn't pass `required` attribute to its Password components.
15
- // That's why we fake the required indicator on each input.
16
- // We do that by injecting `::after` element, and populating it with requiredIndicator content.
17
- [vars.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
18
- }
14
+ _required: {
15
+ // NewPassword doesn't pass `required` attribute to its Password components.
16
+ // That's why we fake the required indicator on each input.
17
+ // We do that by injecting `::after` element, and populating it with requiredIndicator content.
18
+ [vars.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
19
+ },
19
20
  };
20
21
 
21
22
  export default newPassword;
22
- export { vars }
23
+ export { vars };
@@ -4,25 +4,26 @@ import { refs } from './inputWrapper';
4
4
  const vars = NumberFieldClass.cssVarList;
5
5
 
6
6
  const numberField = {
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.inputPlaceholderColor]: refs.placeholderTextColor,
14
- [vars.inputBorderWidth]: refs.borderWidth,
15
- [vars.inputBorderStyle]: refs.borderStyle,
16
- [vars.inputBorderColor]: refs.borderColor,
17
- [vars.inputBorderRadius]: refs.borderRadius,
18
- [vars.inputOutlineWidth]: refs.outlineWidth,
19
- [vars.inputOutlineStyle]: refs.outlineStyle,
20
- [vars.inputOutlineColor]: refs.outlineColor,
21
- [vars.inputOutlineOffset]: refs.outlineOffset,
22
- [vars.inputBackgroundColor]: refs.backgroundColor,
23
- [vars.labelRequiredIndicator]: refs.requiredIndicator,
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.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.labelRequiredIndicator]: refs.requiredIndicator,
25
+ [vars.inputHorizontalPadding]: refs.horizontalPadding,
26
+ [vars.inputHeight]: refs.inputHeight,
26
27
  };
27
28
 
28
29
  export default numberField;
@@ -1,30 +1,28 @@
1
- import globals from '../globals';
2
- import { getThemeRefs } from '../../helpers/themeHelpers';
3
1
  import { PasscodeClass } from '../../components/descope-passcode/PasscodeClass';
4
2
  import { refs } from './inputWrapper';
5
3
 
6
- const globalRefs = getThemeRefs(globals);
7
- const vars = PasscodeClass.cssVarList
4
+ const vars = PasscodeClass.cssVarList;
8
5
 
9
6
  const passcode = {
10
- [vars.fontFamily]: refs.fontFamily,
11
- [vars.fontSize]: refs.fontSize,
12
- [vars.labelTextColor]: refs.labelTextColor,
13
- [vars.labelRequiredIndicator]: refs.requiredIndicator,
14
- [vars.digitValueTextColor]: refs.valueTextColor,
15
- [vars.digitPadding]: '0',
16
- [vars.digitTextAlign]: 'center',
17
- [vars.digitSpacing]: '0',
18
- [vars.hostWidth]: refs.width,
19
- [vars.digitOutlineColor]: 'transparent',
20
- [vars.digitOutlineWidth]: refs.outlineWidth,
21
- [vars.focusedDigitFieldOutlineColor]: refs.outlineColor,
22
- [vars.digitSize]: refs.inputHeight,
7
+ [vars.fontFamily]: refs.fontFamily,
8
+ [vars.fontSize]: refs.fontSize,
9
+ [vars.labelTextColor]: refs.labelTextColor,
10
+ [vars.labelRequiredIndicator]: refs.requiredIndicator,
11
+ [vars.errorMessageTextColor]: refs.errorMessageTextColor,
12
+ [vars.digitValueTextColor]: refs.valueTextColor,
13
+ [vars.digitPadding]: '0',
14
+ [vars.digitTextAlign]: 'center',
15
+ [vars.digitSpacing]: '4px',
16
+ [vars.hostWidth]: refs.width,
17
+ [vars.digitOutlineColor]: 'transparent',
18
+ [vars.digitOutlineWidth]: refs.outlineWidth,
19
+ [vars.focusedDigitFieldOutlineColor]: refs.outlineColor,
20
+ [vars.digitSize]: refs.inputHeight,
23
21
 
24
- _hideCursor: {
25
- [vars.digitCaretTextColor]: 'transparent',
26
- }
27
- }
22
+ _hideCursor: {
23
+ [vars.digitCaretTextColor]: 'transparent',
24
+ },
25
+ };
28
26
 
29
27
  export default passcode;
30
- export { vars }
28
+ export { vars };
@@ -7,27 +7,28 @@ const globalRefs = getThemeRefs(globals);
7
7
  const vars = PasswordClass.cssVarList;
8
8
 
9
9
  const password = {
10
- [vars.hostWidth]: refs.width,
11
- [vars.fontSize]: refs.fontSize,
12
- [vars.fontFamily]: refs.fontFamily,
13
- [vars.labelTextColor]: refs.labelTextColor,
14
- [vars.inputHorizontalPadding]: refs.horizontalPadding,
15
- [vars.inputHeight]: refs.inputHeight,
16
- [vars.inputBackgroundColor]: refs.backgroundColor,
17
- [vars.labelRequiredIndicator]: refs.requiredIndicator,
18
- [vars.inputValueTextColor]: refs.valueTextColor,
19
- [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
20
- [vars.inputBorderWidth]: refs.borderWidth,
21
- [vars.inputBorderStyle]: refs.borderStyle,
22
- [vars.inputBorderColor]: refs.borderColor,
23
- [vars.inputBorderRadius]: refs.borderRadius,
24
- [vars.inputOutlineWidth]: refs.outlineWidth,
25
- [vars.inputOutlineStyle]: refs.outlineStyle,
26
- [vars.inputOutlineColor]: refs.outlineColor,
27
- [vars.inputOutlineOffset]: refs.outlineOffset,
28
- [vars.revealButtonOffset]: globalRefs.spacing.md,
29
- [vars.revealButtonSize]: refs.toggleButtonSize
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.inputHorizontalPadding]: refs.horizontalPadding,
16
+ [vars.inputHeight]: refs.inputHeight,
17
+ [vars.inputBackgroundColor]: refs.backgroundColor,
18
+ [vars.labelRequiredIndicator]: refs.requiredIndicator,
19
+ [vars.inputValueTextColor]: refs.valueTextColor,
20
+ [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
21
+ [vars.inputBorderWidth]: refs.borderWidth,
22
+ [vars.inputBorderStyle]: refs.borderStyle,
23
+ [vars.inputBorderColor]: refs.borderColor,
24
+ [vars.inputBorderRadius]: refs.borderRadius,
25
+ [vars.inputOutlineWidth]: refs.outlineWidth,
26
+ [vars.inputOutlineStyle]: refs.outlineStyle,
27
+ [vars.inputOutlineColor]: refs.outlineColor,
28
+ [vars.inputOutlineOffset]: refs.outlineOffset,
29
+ [vars.revealButtonOffset]: globalRefs.spacing.md,
30
+ [vars.revealButtonSize]: refs.toggleButtonSize,
30
31
  };
31
32
 
32
33
  export default password;
33
- export { vars }
34
+ export { vars };
@@ -4,30 +4,30 @@ import { refs } from './inputWrapper';
4
4
  const vars = PhoneFieldClass.cssVarList;
5
5
 
6
6
  const phoneField = {
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.inputValueTextColor]: refs.valueTextColor,
13
- [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
14
- [vars.inputBorderStyle]: refs.borderStyle,
15
- [vars.inputBorderWidth]: refs.borderWidth,
16
- [vars.inputBorderColor]: refs.borderColor,
17
- [vars.inputBorderRadius]: refs.borderRadius,
18
- [vars.inputOutlineStyle]: refs.outlineStyle,
19
- [vars.inputOutlineWidth]: refs.outlineWidth,
20
- [vars.inputOutlineColor]: refs.outlineColor,
21
- [vars.inputOutlineOffset]: refs.outlineOffset,
22
- [vars.inputHeight]: refs.inputHeight,
23
- [vars.phoneInputWidth]: refs.minWidth,
24
- [vars.countryCodeInputWidth]: '5em',
25
- [vars.countryCodeDropdownWidth]: '20em',
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.errorMessageTextColor]: refs.errorMessageTextColor,
13
+ [vars.inputValueTextColor]: refs.valueTextColor,
14
+ [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
15
+ [vars.inputBorderStyle]: refs.borderStyle,
16
+ [vars.inputBorderWidth]: refs.borderWidth,
17
+ [vars.inputBorderColor]: refs.borderColor,
18
+ [vars.inputBorderRadius]: refs.borderRadius,
19
+ [vars.inputOutlineStyle]: refs.outlineStyle,
20
+ [vars.inputOutlineWidth]: refs.outlineWidth,
21
+ [vars.inputOutlineColor]: refs.outlineColor,
22
+ [vars.inputOutlineOffset]: refs.outlineOffset,
23
+ [vars.phoneInputWidth]: refs.minWidth,
24
+ [vars.countryCodeInputWidth]: '5em',
25
+ [vars.countryCodeDropdownWidth]: '20em',
26
26
 
27
- // '@overlay': {
28
- // overlayItemBackgroundColor: 'red'
29
- // }
27
+ // '@overlay': {
28
+ // overlayItemBackgroundColor: 'red'
29
+ // }
30
30
  };
31
31
 
32
32
  export default phoneField;
33
- export { vars }
33
+ export { vars };
@@ -10,61 +10,62 @@ const globalRefs = getThemeRefs(globals);
10
10
  const vars = SwitchToggleClass.cssVarList;
11
11
 
12
12
  const switchToggle = {
13
- [vars.fontSize]: refs.fontSize,
14
- [vars.fontFamily]: refs.fontFamily,
13
+ [vars.fontSize]: refs.fontSize,
14
+ [vars.fontFamily]: refs.fontFamily,
15
15
 
16
- [vars.inputOutlineWidth]: refs.outlineWidth,
17
- [vars.inputOutlineOffset]: refs.outlineOffset,
18
- [vars.inputOutlineColor]: refs.outlineColor,
19
- [vars.inputOutlineStyle]: refs.outlineStyle,
16
+ [vars.inputOutlineWidth]: refs.outlineWidth,
17
+ [vars.inputOutlineOffset]: refs.outlineOffset,
18
+ [vars.inputOutlineColor]: refs.outlineColor,
19
+ [vars.inputOutlineStyle]: refs.outlineStyle,
20
20
 
21
- [vars.trackBorderStyle]: refs.borderStyle,
22
- [vars.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
23
- [vars.trackBorderColor]: refs.borderColor,
24
- [vars.trackBackgroundColor]: 'none',
25
- [vars.trackBorderRadius]: globalRefs.radius.md,
26
- [vars.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
27
- [vars.trackHeight]: checkboxHeight,
21
+ [vars.trackBorderStyle]: refs.borderStyle,
22
+ [vars.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
23
+ [vars.trackBorderColor]: refs.borderColor,
24
+ [vars.trackBackgroundColor]: 'none',
25
+ [vars.trackBorderRadius]: globalRefs.radius.md,
26
+ [vars.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
27
+ [vars.trackHeight]: checkboxHeight,
28
28
 
29
- [vars.knobSize]: `calc(1em - ${knobMargin})`,
30
- [vars.knobRadius]: '50%',
31
- [vars.knobTopOffset]: '1px',
32
- [vars.knobLeftOffset]: knobMargin,
33
- [vars.knobColor]: refs.valueTextColor,
34
- [vars.knobTransitionDuration]: '0.3s',
29
+ [vars.knobSize]: `calc(1em - ${knobMargin})`,
30
+ [vars.knobRadius]: '50%',
31
+ [vars.knobTopOffset]: '1px',
32
+ [vars.knobLeftOffset]: knobMargin,
33
+ [vars.knobColor]: refs.valueTextColor,
34
+ [vars.knobTransitionDuration]: '0.3s',
35
35
 
36
- [vars.labelTextColor]: refs.labelTextColor,
37
- [vars.labelFontWeight]: '400',
38
- [vars.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
39
- [vars.labelSpacing]: '0.25em',
40
- [vars.labelRequiredIndicator]: refs.requiredIndicator,
36
+ [vars.labelTextColor]: refs.labelTextColor,
37
+ [vars.labelFontWeight]: '400',
38
+ [vars.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
39
+ [vars.labelSpacing]: '0.25em',
40
+ [vars.labelRequiredIndicator]: refs.requiredIndicator,
41
+ [vars.errorMessageTextColor]: refs.errorMessageTextColor,
41
42
 
42
- [vars.hostWidth]: refs.width,
43
+ [vars.hostWidth]: refs.width,
43
44
 
44
- _checked: {
45
- [vars.trackBorderColor]: refs.borderColor,
46
- [vars.trackBackgroundColor]: refs.backgroundColor,
47
- [vars.knobLeftOffset]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
48
- [vars.knobColor]: refs.valueTextColor,
49
- [vars.knobTextColor]: refs.valueTextColor,
50
- },
45
+ _checked: {
46
+ [vars.trackBorderColor]: refs.borderColor,
47
+ [vars.trackBackgroundColor]: refs.backgroundColor,
48
+ [vars.knobLeftOffset]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
49
+ [vars.knobColor]: refs.valueTextColor,
50
+ [vars.knobTextColor]: refs.valueTextColor,
51
+ },
51
52
 
52
- _disabled: {
53
- [vars.knobColor]: globalRefs.colors.surface.light,
54
- [vars.trackBorderColor]: globalRefs.colors.surface.main,
55
- [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
56
- [vars.labelTextColor]: refs.labelTextColor,
57
- _checked: {
58
- [vars.knobColor]: globalRefs.colors.surface.light,
59
- [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
60
- }
53
+ _disabled: {
54
+ [vars.knobColor]: globalRefs.colors.surface.light,
55
+ [vars.trackBorderColor]: globalRefs.colors.surface.main,
56
+ [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
57
+ [vars.labelTextColor]: refs.labelTextColor,
58
+ _checked: {
59
+ [vars.knobColor]: globalRefs.colors.surface.light,
60
+ [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
61
61
  },
62
+ },
62
63
 
63
- _invalid: {
64
- [vars.trackBorderColor]: globalRefs.colors.error.main,
65
- [vars.knobColor]: globalRefs.colors.error.main,
66
- },
64
+ _invalid: {
65
+ [vars.trackBorderColor]: globalRefs.colors.error.main,
66
+ [vars.knobColor]: globalRefs.colors.error.main,
67
+ },
67
68
  };
68
69
 
69
70
  export default switchToggle;
70
- export { vars }
71
+ export { vars };