@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,16 +1,16 @@
1
1
  import { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';
2
2
  import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
3
3
  import { compose } from '../../helpers';
4
- import {
5
- createProxy,
6
- createStyleMixin,
7
- draggableMixin,
8
- proxyInputMixin
9
- } from '../../mixins';
4
+ import { createProxy, createStyleMixin, draggableMixin, proxyInputMixin } from '../../mixins';
10
5
  import { TextFieldClass } from '../descope-text-field/TextFieldClass';
11
6
  import { ComboBoxClass } from '../descope-combo-box/ComboBoxClass';
12
7
  import CountryCodes from './CountryCodes';
13
- import { resetInputCursor, resetInputFieldInvalidBackgroundColor, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
8
+ import {
9
+ resetInputCursor,
10
+ resetInputFieldDefaultWidth,
11
+ resetInputFieldInvalidBackgroundColor,
12
+ useHostExternalPadding,
13
+ } from '../../helpers/themeHelpers/resetHelpers';
14
14
 
15
15
  const textVars = TextFieldClass.cssVarList;
16
16
  const comboVars = ComboBoxClass.cssVarList;
@@ -18,151 +18,148 @@ const comboVars = ComboBoxClass.cssVarList;
18
18
  export const componentName = getComponentName('phone-field');
19
19
 
20
20
  const customMixin = (superclass) =>
21
- class PhoneFieldMixinClass extends superclass {
22
- static get CountryCodes() {
23
- return CountryCodes;
24
- }
21
+ class PhoneFieldMixinClass extends superclass {
22
+ static get CountryCodes() {
23
+ return CountryCodes;
24
+ }
25
25
 
26
- constructor() {
27
- super();
28
- }
26
+ init() {
27
+ super.init?.();
29
28
 
30
- init() {
31
- super.init?.();
29
+ const template = document.createElement('template');
32
30
 
33
- const template = document.createElement('template');
34
-
35
- template.innerHTML = `
36
- <${descopeInternalComponentName}
31
+ template.innerHTML = `
32
+ <${descopeInternalComponentName}
37
33
  tabindex="-1"
38
34
  slot="input"
39
35
  ></${descopeInternalComponentName}>
40
36
  `;
41
37
 
42
- this.baseElement.appendChild(template.content.cloneNode(true));
43
-
44
- this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
45
-
46
- forwardAttrs(this.shadowRoot.host, this.inputElement, {
47
- includeAttrs: [
48
- 'size',
49
- 'bordered',
50
- 'invalid',
51
- 'minlength',
52
- 'maxlength',
53
- 'default-code',
54
- 'country-input-placeholder',
55
- 'phone-input-placeholder',
56
- ]
57
- });
58
- }
59
- };
38
+ this.baseElement.appendChild(template.content.cloneNode(true));
39
+
40
+ this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
41
+
42
+ forwardAttrs(this.shadowRoot.host, this.inputElement, {
43
+ includeAttrs: [
44
+ 'size',
45
+ 'bordered',
46
+ 'invalid',
47
+ 'minlength',
48
+ 'maxlength',
49
+ 'default-code',
50
+ 'country-input-placeholder',
51
+ 'phone-input-placeholder',
52
+ ],
53
+ });
54
+ }
55
+ };
60
56
 
61
57
  const {
62
- host,
63
- label,
64
- requiredIndicator,
65
- inputField,
66
- countryCodeInput,
67
- phoneInput,
68
- separator,
69
- errorMessage,
70
- helperText
58
+ host,
59
+ label,
60
+ requiredIndicator,
61
+ inputField,
62
+ countryCodeInput,
63
+ phoneInput,
64
+ separator,
65
+ errorMessage,
66
+ helperText,
71
67
  } = {
72
- host: { selector: () => ':host' },
73
- label: { selector: '::part(label)' },
74
- requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
75
- inputField: { selector: '::part(input-field)' },
76
- phoneInput: { selector: () => 'descope-text-field' },
77
- countryCodeInput: { selector: () => 'descope-combo-box' },
78
- separator: { selector: 'descope-phone-field-internal .separator' },
79
- helperText: { selector: '::part(helper-text)' },
80
- errorMessage: { selector: '::part(error-message)' }
68
+ host: { selector: () => ':host' },
69
+ label: { selector: '::part(label)' },
70
+ requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
71
+ inputField: { selector: '::part(input-field)' },
72
+ phoneInput: { selector: () => 'descope-text-field' },
73
+ countryCodeInput: { selector: () => 'descope-combo-box' },
74
+ separator: { selector: 'descope-phone-field-internal .separator' },
75
+ helperText: { selector: '::part(helper-text)' },
76
+ errorMessage: { selector: '::part(error-message)' },
81
77
  };
82
78
 
83
79
  export const PhoneFieldClass = compose(
84
- createStyleMixin({
85
- mappings: {
86
- fontSize: [
87
- host,
88
- inputField,
89
- {
90
- selector: TextFieldClass.componentName,
91
- property: TextFieldClass.cssVarList.fontSize
92
- },
93
- {
94
- selector: ComboBoxClass.componentName,
95
- property: ComboBoxClass.cssVarList.fontSize
96
- }
97
- ],
98
- fontFamily: [
99
- label,
100
- errorMessage,
101
- helperText,
102
- {
103
- ...countryCodeInput,
104
- property: ComboBoxClass.cssVarList.overlay.fontFamily
105
- }
106
- ],
107
- hostWidth: [
108
- { ...host, property: 'width' },
109
- { ...phoneInput, property: 'width' },
110
- { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' }
111
- ],
112
-
113
- inputBorderStyle: [
114
- { ...inputField, property: 'border-style' },
115
- { ...separator, property: 'border-left-style' }
116
- ],
117
- inputBorderWidth: [
118
- { ...inputField, property: 'border-width' },
119
- { ...separator, property: 'border-left-width' }
120
- ],
121
- inputBorderColor: [
122
- { ...inputField, property: 'border-color' },
123
- { ...separator, property: 'border-left-color' }
124
- ],
125
- inputBorderRadius: { ...inputField, property: 'border-radius' },
126
-
127
- countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
128
- countryCodeDropdownWidth: {
129
- ...countryCodeInput,
130
- property: '--vaadin-combo-box-overlay-width'
131
- },
132
- phoneInputWidth: { ...phoneInput, property: 'width' },
133
-
134
- labelTextColor: [
135
- { ...label, property: 'color' },
136
- { ...requiredIndicator, property: 'color' },
137
- ],
138
- labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
139
-
140
- inputValueTextColor: [
141
- { ...phoneInput, property: textVars.inputValueTextColor },
142
- { ...countryCodeInput, property: comboVars.inputValueTextColor }
143
- ],
144
-
145
- inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
146
-
147
- overlayItemBackgroundColor: {
148
- selector: 'descope-combo-box',
149
- property: comboVars.overlayItemBackgroundColor
150
- },
151
-
152
- inputOutlineStyle: { ...inputField, property: 'outline-style' },
153
- inputOutlineColor: { ...inputField, property: 'outline-color' },
154
- inputOutlineWidth: { ...inputField, property: 'outline-width' },
155
- inputOutlineOffset: { ...inputField, property: 'outline-offset' },
156
- },
157
- }),
158
- draggableMixin,
159
- proxyInputMixin,
160
- customMixin,
80
+ createStyleMixin({
81
+ mappings: {
82
+ fontSize: [
83
+ host,
84
+ inputField,
85
+ {
86
+ selector: TextFieldClass.componentName,
87
+ property: TextFieldClass.cssVarList.fontSize,
88
+ },
89
+ {
90
+ selector: ComboBoxClass.componentName,
91
+ property: ComboBoxClass.cssVarList.fontSize,
92
+ },
93
+ ],
94
+ fontFamily: [
95
+ label,
96
+ errorMessage,
97
+ helperText,
98
+ {
99
+ ...countryCodeInput,
100
+ property: ComboBoxClass.cssVarList.overlay.fontFamily,
101
+ },
102
+ ],
103
+ hostWidth: [
104
+ { ...host, property: 'width' },
105
+ { ...phoneInput, property: 'width' },
106
+ { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
107
+ ],
108
+
109
+ inputBorderStyle: [
110
+ { ...inputField, property: 'border-style' },
111
+ { ...separator, property: 'border-left-style' },
112
+ ],
113
+ inputBorderWidth: [
114
+ { ...inputField, property: 'border-width' },
115
+ { ...separator, property: 'border-left-width' },
116
+ ],
117
+ inputBorderColor: [
118
+ { ...inputField, property: 'border-color' },
119
+ { ...separator, property: 'border-left-color' },
120
+ ],
121
+ inputBorderRadius: { ...inputField, property: 'border-radius' },
122
+
123
+ countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
124
+ countryCodeDropdownWidth: {
125
+ ...countryCodeInput,
126
+ property: '--vaadin-combo-box-overlay-width',
127
+ },
128
+ phoneInputWidth: { ...phoneInput, property: 'width' },
129
+
130
+ labelTextColor: [
131
+ { ...label, property: 'color' },
132
+ { ...requiredIndicator, property: 'color' },
133
+ ],
134
+ labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
135
+ errorMessageTextColor: { ...errorMessage, property: 'color' },
136
+
137
+ inputValueTextColor: [
138
+ { ...phoneInput, property: textVars.inputValueTextColor },
139
+ { ...countryCodeInput, property: comboVars.inputValueTextColor },
140
+ ],
141
+
142
+ inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
143
+
144
+ overlayItemBackgroundColor: {
145
+ selector: 'descope-combo-box',
146
+ property: comboVars.overlayItemBackgroundColor,
147
+ },
148
+
149
+ inputOutlineStyle: { ...inputField, property: 'outline-style' },
150
+ inputOutlineColor: { ...inputField, property: 'outline-color' },
151
+ inputOutlineWidth: { ...inputField, property: 'outline-width' },
152
+ inputOutlineOffset: { ...inputField, property: 'outline-offset' },
153
+ },
154
+ }),
155
+ draggableMixin,
156
+ proxyInputMixin,
157
+ customMixin
161
158
  )(
162
- createProxy({
163
- slots: [],
164
- wrappedEleName: 'vaadin-text-field',
165
- style: () => `
159
+ createProxy({
160
+ slots: [],
161
+ wrappedEleName: 'vaadin-text-field',
162
+ style: () => `
166
163
  :host {
167
164
  display: inline-flex;
168
165
  max-width: 100%;
@@ -172,6 +169,7 @@ export const PhoneFieldClass = compose(
172
169
  ${useHostExternalPadding(PhoneFieldClass.cssVarList)}
173
170
  ${resetInputCursor('vaadin-text-field')}
174
171
  ${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
172
+ ${resetInputFieldDefaultWidth()}
175
173
 
176
174
  div {
177
175
  display: inline-flex;
@@ -220,7 +218,7 @@ export const PhoneFieldClass = compose(
220
218
  descope-text-field {
221
219
  flex-grow: 1;
222
220
  ${textVars.inputOutlineWidth}: 0;
223
- ${comboVars.inputOutlineOffset}: 0;
221
+ ${textVars.inputOutlineOffset}: 0;
224
222
  ${textVars.inputBorderWidth}: 0;
225
223
  ${textVars.inputBorderRadius}: 0;
226
224
  }
@@ -231,9 +229,9 @@ export const PhoneFieldClass = compose(
231
229
  border: none;
232
230
  }
233
231
  `,
234
- excludeAttrsSync: ['tabindex'],
235
- componentName
236
- })
232
+ excludeAttrsSync: ['tabindex'],
233
+ componentName,
234
+ })
237
235
  );
238
236
 
239
237
  export default PhoneFieldClass;