@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,38 +1,43 @@
1
1
  import {
2
- createStyleMixin,
3
- draggableMixin,
4
- createProxy,
5
- proxyInputMixin,
6
- componentNameValidationMixin
2
+ createStyleMixin,
3
+ draggableMixin,
4
+ createProxy,
5
+ proxyInputMixin,
6
+ componentNameValidationMixin,
7
7
  } from '../../mixins';
8
8
  import textFieldMappings from '../descope-text-field/textFieldMappings';
9
9
  import { compose } from '../../helpers';
10
10
  import { getComponentName } from '../../helpers/componentHelpers';
11
- import { resetInputOverrides, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
11
+ import {
12
+ resetInputOverrides,
13
+ useHostExternalPadding,
14
+ } from '../../helpers/themeHelpers/resetHelpers';
12
15
 
13
16
  export const componentName = getComponentName('email-field');
14
17
 
15
18
  export const EmailFieldClass = compose(
16
- createStyleMixin({
17
- mappings: textFieldMappings
18
- }),
19
- draggableMixin,
20
- proxyInputMixin,
21
- componentNameValidationMixin
19
+ createStyleMixin({
20
+ mappings: textFieldMappings,
21
+ }),
22
+ draggableMixin,
23
+ proxyInputMixin,
24
+ componentNameValidationMixin
22
25
  )(
23
- createProxy({
24
- slots: ['suffix'],
25
- wrappedEleName: 'vaadin-email-field',
26
- style: () => `
26
+ createProxy({
27
+ slots: ['suffix'],
28
+ wrappedEleName: 'vaadin-email-field',
29
+ style: () => `
27
30
  :host {
28
31
  display: inline-block;
29
32
  max-width: 100%;
30
- padding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${EmailFieldClass.cssVarList.inputOutlineOffset}))
33
+ padding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${
34
+ EmailFieldClass.cssVarList.inputOutlineOffset
35
+ }))
31
36
  }
32
37
  ${useHostExternalPadding(EmailFieldClass.cssVarList)}
33
38
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
34
39
  `,
35
- excludeAttrsSync: ['tabindex'],
36
- componentName
37
- })
40
+ excludeAttrsSync: ['tabindex'],
41
+ componentName,
42
+ })
38
43
  );
@@ -1,25 +1,22 @@
1
- import {
2
- createStyleMixin,
3
- draggableMixin,
4
- } from '../../mixins';
1
+ import { createStyleMixin, draggableMixin } from '../../mixins';
5
2
  import { createBaseClass } from '../../baseClasses/createBaseClass';
6
3
  import { compose } from '../../helpers';
7
4
  import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
8
5
 
9
- const observedAttributes = ['src', 'alt']
6
+ const observedAttributes = ['src', 'alt'];
10
7
 
11
8
  export const componentName = getComponentName('image');
12
9
 
13
- const BaseClass = createBaseClass({ componentName, baseSelector: ':host > img' })
10
+ const BaseClass = createBaseClass({ componentName, baseSelector: ':host > img' });
14
11
  class RawImage extends BaseClass {
15
- static get observedAttributes() {
16
- return observedAttributes.concat(BaseClass.observedAttributes || []);
17
- }
12
+ static get observedAttributes() {
13
+ return observedAttributes.concat(BaseClass.observedAttributes || []);
14
+ }
18
15
 
19
- constructor() {
20
- super();
16
+ constructor() {
17
+ super();
21
18
 
22
- this.attachShadow({ mode: 'open' }).innerHTML = `
19
+ this.attachShadow({ mode: 'open' }).innerHTML = `
23
20
  <style>
24
21
  :host > img {
25
22
  width: 100%;
@@ -31,21 +28,21 @@ class RawImage extends BaseClass {
31
28
  </style>
32
29
  <img/>
33
30
  `;
34
- }
31
+ }
35
32
 
36
- connectedCallback() {
37
- super.connectedCallback?.();
33
+ connectedCallback() {
34
+ super.connectedCallback?.();
38
35
 
39
- forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes })
40
- }
36
+ forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes });
37
+ }
41
38
  }
42
39
 
43
40
  export const ImageClass = compose(
44
- createStyleMixin({
45
- mappings: {
46
- height: { selector: () => ':host' },
47
- width: { selector: () => ':host' },
48
- }
49
- }),
50
- draggableMixin,
41
+ createStyleMixin({
42
+ mappings: {
43
+ height: { selector: () => ':host' },
44
+ width: { selector: () => ':host' },
45
+ },
46
+ }),
47
+ draggableMixin
51
48
  )(RawImage);
@@ -1,8 +1,4 @@
1
- import {
2
- createStyleMixin,
3
- draggableMixin,
4
- componentNameValidationMixin,
5
- } from '../../mixins';
1
+ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
6
2
  import { createBaseClass } from '../../baseClasses/createBaseClass';
7
3
  import { TextClass } from '../descope-text/TextClass';
8
4
  import { compose } from '../../helpers';
@@ -11,10 +7,10 @@ import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
11
7
  export const componentName = getComponentName('link');
12
8
 
13
9
  class RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }) {
14
- constructor() {
15
- super();
10
+ constructor() {
11
+ super();
16
12
 
17
- this.attachShadow({ mode: 'open' }).innerHTML = `
13
+ this.attachShadow({ mode: 'open' }).innerHTML = `
18
14
  <style>
19
15
  :host {
20
16
  display: inline-block;
@@ -36,40 +32,40 @@ class RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }
36
32
  </div>
37
33
  `;
38
34
 
39
- forwardAttrs(this, this.shadowRoot.querySelector('a'), {
40
- includeAttrs: ['href', 'target', 'tooltip'],
41
- mapAttrs: {
42
- tooltip: 'title'
43
- }
44
- });
35
+ forwardAttrs(this, this.shadowRoot.querySelector('a'), {
36
+ includeAttrs: ['href', 'target', 'tooltip'],
37
+ mapAttrs: {
38
+ tooltip: 'title',
39
+ },
40
+ });
45
41
 
46
- forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
47
- includeAttrs: ['mode', 'variant'],
48
- });
49
- }
42
+ forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
43
+ includeAttrs: ['mode', 'variant'],
44
+ });
45
+ }
50
46
  }
51
47
 
52
48
  const selectors = {
53
- host: { selector: () => ':host' },
54
- anchor: {},
55
- wrapper: { selector: () => ':host > div' },
56
- text: { selector: () => TextClass.componentName }
49
+ host: { selector: () => ':host' },
50
+ anchor: {},
51
+ wrapper: { selector: () => ':host > div' },
52
+ text: { selector: () => TextClass.componentName },
57
53
  };
58
54
 
59
55
  const { anchor, text, host, wrapper } = selectors;
60
56
 
61
57
  export const LinkClass = compose(
62
- createStyleMixin({
63
- mappings: {
64
- hostWidth: { ...host, property: 'width' },
65
- textAlign: wrapper,
66
- textColor: [
67
- { ...anchor, property: 'color' },
68
- { ...text, property: TextClass.cssVarList.textColor }
69
- ],
70
- cursor: anchor,
71
- }
72
- }),
73
- draggableMixin,
74
- componentNameValidationMixin
58
+ createStyleMixin({
59
+ mappings: {
60
+ hostWidth: { ...host, property: 'width' },
61
+ textAlign: wrapper,
62
+ textColor: [
63
+ { ...anchor, property: 'color' },
64
+ { ...text, property: TextClass.cssVarList.textColor },
65
+ ],
66
+ cursor: anchor,
67
+ },
68
+ }),
69
+ draggableMixin,
70
+ componentNameValidationMixin
75
71
  )(RawLink);
@@ -1,8 +1,4 @@
1
- import {
2
- createStyleMixin,
3
- draggableMixin,
4
- componentNameValidationMixin
5
- } from '../../mixins';
1
+ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
6
2
  import { createBaseClass } from '../../baseClasses/createBaseClass';
7
3
  import { compose } from '../../helpers';
8
4
  import { getComponentName } from '../../helpers/componentHelpers';
@@ -10,13 +6,14 @@ import { getComponentName } from '../../helpers/componentHelpers';
10
6
  export const componentName = getComponentName('loader-linear');
11
7
 
12
8
  class RawLoaderLinear extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
13
- static get componentName() {
14
- return componentName;
15
- }
16
- constructor() {
17
- super();
9
+ static get componentName() {
10
+ return componentName;
11
+ }
18
12
 
19
- this.attachShadow({ mode: 'open' }).innerHTML = `
13
+ constructor() {
14
+ super();
15
+
16
+ this.attachShadow({ mode: 'open' }).innerHTML = `
20
17
  <style>
21
18
  @keyframes tilt {
22
19
  0% { transform: translateX(0); }
@@ -38,37 +35,35 @@ class RawLoaderLinear extends createBaseClass({ componentName, baseSelector: ':h
38
35
  </style>
39
36
  <div></div>
40
37
  `;
41
- }
38
+ }
42
39
  }
43
40
 
44
41
  const selectors = {
45
- after: { selector: '::after' },
46
- host: { selector: () => ':host' }
42
+ after: { selector: '::after' },
43
+ host: { selector: () => ':host' },
47
44
  };
48
45
 
49
46
  const { after, host } = selectors;
50
47
 
51
48
  export const LoaderLinearClass = compose(
52
- createStyleMixin({
53
- mappings: {
54
- hostDisplay: {},
55
- hostWidth: { ...host, property: 'width' },
56
- barHeight: [
57
- { property: 'height' },
58
- { ...after, property: 'height' }
59
- ],
60
- barBorderRadius: [
61
- { property: 'border-radius' },
62
- { ...after, property: 'border-radius' }
63
- ],
64
- barBackgroundColor: { property: 'background-color' },
65
- barColor: { ...after, property: 'background-color' },
66
- barWidth: { ...after, property: 'width' },
67
- animationDuration: [{}, after],
68
- animationTimingFunction: [{}, after],
69
- animationIterationCount: [{}, after]
70
- }
71
- }),
72
- draggableMixin,
73
- componentNameValidationMixin
49
+ createStyleMixin({
50
+ mappings: {
51
+ hostDisplay: {},
52
+ hostWidth: { ...host, property: 'width' },
53
+ barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
54
+ barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
55
+ verticalPadding: [
56
+ { ...host, property: 'padding-top' },
57
+ { ...host, property: 'padding-bottom' },
58
+ ],
59
+ barBackgroundColor: { property: 'background-color' },
60
+ barColor: { ...after, property: 'background-color' },
61
+ barWidth: { ...after, property: 'width' },
62
+ animationDuration: [{}, after],
63
+ animationTimingFunction: [{}, after],
64
+ animationIterationCount: [{}, after],
65
+ },
66
+ }),
67
+ draggableMixin,
68
+ componentNameValidationMixin
74
69
  )(RawLoaderLinear);
@@ -1,8 +1,4 @@
1
- import {
2
- createStyleMixin,
3
- draggableMixin,
4
- componentNameValidationMixin
5
- } from '../../mixins';
1
+ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
6
2
  import { createBaseClass } from '../../baseClasses/createBaseClass';
7
3
  import { compose } from '../../helpers';
8
4
  import { getComponentName } from '../../helpers/componentHelpers';
@@ -10,10 +6,10 @@ import { getComponentName } from '../../helpers/componentHelpers';
10
6
  export const componentName = getComponentName('loader-radial');
11
7
 
12
8
  class RawLoaderRadial extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
13
- constructor() {
14
- super();
9
+ constructor() {
10
+ super();
15
11
 
16
- this.attachShadow({ mode: 'open' }).innerHTML = `
12
+ this.attachShadow({ mode: 'open' }).innerHTML = `
17
13
  <style>
18
14
  @keyframes spin {
19
15
  0% { transform: rotate(0deg); }
@@ -29,29 +25,26 @@ class RawLoaderRadial extends createBaseClass({ componentName, baseSelector: ':h
29
25
  </style>
30
26
  <div></div>
31
27
  `;
32
- }
28
+ }
33
29
  }
34
30
 
35
31
  export const LoaderRadialClass = compose(
36
- createStyleMixin({
37
- mappings: {
38
- hostDisplay: { property: 'display' },
39
- spinnerSize: [
40
- { property: 'width' },
41
- { property: 'height' }
42
- ],
43
- spinnerBorderWidth: { property: 'border-width' },
44
- spinnerBorderStyle: { property: 'border-style' },
45
- spinnerBorderRadius: { property: 'border-radius' },
46
- spinnerQuadrant1Color: { property: 'border-top-color' },
47
- spinnerQuadrant2Color: { property: 'border-bottom-color' },
48
- spinnerQuadrant3Color: { property: 'border-right-color' },
49
- spinnerQuadrant4Color: { property: 'border-left-color' },
50
- animationDuration: {},
51
- animationTimingFunction: {},
52
- animationIterationCount: {}
53
- }
54
- }),
55
- draggableMixin,
56
- componentNameValidationMixin
32
+ createStyleMixin({
33
+ mappings: {
34
+ hostDisplay: { property: 'display' },
35
+ spinnerSize: [{ property: 'width' }, { property: 'height' }],
36
+ spinnerBorderWidth: { property: 'border-width' },
37
+ spinnerBorderStyle: { property: 'border-style' },
38
+ spinnerBorderRadius: { property: 'border-radius' },
39
+ spinnerQuadrant1Color: { property: 'border-top-color' },
40
+ spinnerQuadrant2Color: { property: 'border-bottom-color' },
41
+ spinnerQuadrant3Color: { property: 'border-right-color' },
42
+ spinnerQuadrant4Color: { property: 'border-left-color' },
43
+ animationDuration: {},
44
+ animationTimingFunction: {},
45
+ animationIterationCount: {},
46
+ },
47
+ }),
48
+ draggableMixin,
49
+ componentNameValidationMixin
57
50
  )(RawLoaderRadial);
@@ -3,4 +3,8 @@ import { createCssVarImageClass } from '../../baseClasses/createCssVarImageClass
3
3
 
4
4
  export const componentName = getComponentName('logo');
5
5
 
6
- export const LogoClass = createCssVarImageClass({ componentName, varName: 'url', fallbackVarName: 'fallbackUrl' })
6
+ export const LogoClass = createCssVarImageClass({
7
+ componentName,
8
+ varName: 'url',
9
+ fallbackVarName: 'fallbackUrl',
10
+ });
@@ -1,11 +1,6 @@
1
1
  import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
2
2
  import { compose } from '../../helpers';
3
- import {
4
- createStyleMixin,
5
- proxyInputMixin,
6
- draggableMixin,
7
- createProxy,
8
- } from '../../mixins';
3
+ import { createStyleMixin, proxyInputMixin, draggableMixin, createProxy } from '../../mixins';
9
4
  import { componentName as descopeInternalComponentName } from './descope-new-password-internal/componentName';
10
5
  import { PasswordClass } from '../descope-password/PasswordClass';
11
6
  import { useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
@@ -13,91 +8,78 @@ import { useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers'
13
8
  export const componentName = getComponentName('new-password');
14
9
 
15
10
  const customMixin = (superclass) =>
16
- class NewPasswordMixinClass extends superclass {
17
- constructor() {
18
- super();
19
- }
20
-
21
- init() {
22
- super.init?.();
11
+ class NewPasswordMixinClass extends superclass {
12
+ init() {
13
+ super.init?.();
23
14
 
24
- const template = document.createElement('template');
15
+ const template = document.createElement('template');
25
16
 
26
- template.innerHTML = `
27
- <${descopeInternalComponentName}
28
- name="new-password"
17
+ template.innerHTML = `
18
+ <${descopeInternalComponentName}
19
+ name="new-password"
29
20
  tabindex="-1"
30
21
  slot="input"
31
22
  ></${descopeInternalComponentName}>
32
23
  `;
33
24
 
34
- this.baseElement.appendChild(template.content.cloneNode(true));
25
+ this.baseElement.appendChild(template.content.cloneNode(true));
35
26
 
36
- this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
27
+ this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
37
28
 
38
- forwardAttrs(this, this.inputElement, {
39
- includeAttrs: [
40
- 'password-label',
41
- 'password-placeholder',
42
- 'confirm-label',
43
- 'confirm-placeholder',
44
- 'full-width',
45
- 'size',
46
- 'bordered',
47
- 'label',
48
- 'has-confirm',
49
- 'invalid',
50
- 'readonly',
51
- 'draggable'
52
- ]
53
- });
54
- }
55
- };
29
+ forwardAttrs(this, this.inputElement, {
30
+ includeAttrs: [
31
+ 'password-label',
32
+ 'password-placeholder',
33
+ 'confirm-label',
34
+ 'confirm-placeholder',
35
+ 'full-width',
36
+ 'size',
37
+ 'bordered',
38
+ 'label',
39
+ 'has-confirm',
40
+ 'invalid',
41
+ 'readonly',
42
+ 'draggable',
43
+ ],
44
+ });
45
+ }
46
+ };
56
47
 
57
- const {
58
- host,
59
- label,
60
- internalInputsWrapper,
61
- errorMessage,
62
- helperText
63
- } = {
64
- host: { selector: () => ':host' },
65
- label: { selector: '::part(label)' },
66
- internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
67
- helperText: { selector: '::part(helper-text)' },
68
- errorMessage: { selector: '::part(error-message)' }
69
- }
48
+ const { host, label, internalInputsWrapper, errorMessage, helperText } = {
49
+ host: { selector: () => ':host' },
50
+ label: { selector: '::part(label)' },
51
+ internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
52
+ helperText: { selector: '::part(helper-text)' },
53
+ errorMessage: { selector: '::part(error-message)' },
54
+ };
70
55
 
71
56
  export const NewPasswordClass = compose(
72
- createStyleMixin({
73
- mappings: {
74
- fontSize: [
75
- host,
76
- {},
77
- {
78
- selector: PasswordClass.componentName,
79
- property: PasswordClass.cssVarList.fontSize
80
- }
81
- ],
82
- fontFamily: [
83
- label,
84
- errorMessage,
85
- helperText
86
- ],
87
- hostWidth: { ...host, property: 'width' },
88
- hostMinWidth: { ...host, property: 'min-width' },
89
- inputsRequiredIndicator: { ...host, property: 'content' },
90
- spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
91
- }
92
- }),
93
- draggableMixin,
94
- proxyInputMixin,
95
- customMixin,
57
+ createStyleMixin({
58
+ mappings: {
59
+ fontSize: [
60
+ host,
61
+ {},
62
+ {
63
+ selector: PasswordClass.componentName,
64
+ property: PasswordClass.cssVarList.fontSize,
65
+ },
66
+ ],
67
+ fontFamily: [label, errorMessage, helperText],
68
+ errorMessageTextColor: { ...errorMessage, property: 'color' },
69
+ hostWidth: { ...host, property: 'width' },
70
+ hostMinWidth: { ...host, property: 'min-width' },
71
+ inputsRequiredIndicator: { ...host, property: 'content' },
72
+ spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
73
+ },
74
+ }),
75
+ draggableMixin,
76
+ proxyInputMixin,
77
+ customMixin
96
78
  )(
97
- createProxy({
98
- slots: [],
99
- wrappedEleName: 'vaadin-text-field',
100
- style: () => `
79
+ createProxy({
80
+ slots: [],
81
+ wrappedEleName: 'vaadin-text-field',
82
+ style: () => `
101
83
  :host {
102
84
  display: inline-block;
103
85
  max-width: 100%;
@@ -140,7 +122,7 @@ export const NewPasswordClass = compose(
140
122
  height: initial;
141
123
  },
142
124
  `,
143
- excludeAttrsSync: ['tabindex'],
144
- componentName
145
- })
125
+ excludeAttrsSync: ['tabindex'],
126
+ componentName,
127
+ })
146
128
  );