@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,23 +1,23 @@
1
1
  export const componentNameValidationMixin = (superclass) =>
2
- class ComponentNameValidationMixinClass extends superclass {
3
- #checkComponentName() {
4
- const currentComponentName = this.localName;
2
+ class ComponentNameValidationMixinClass extends superclass {
3
+ #checkComponentName() {
4
+ const currentComponentName = this.localName;
5
5
 
6
- if (!superclass.componentName) {
7
- throw Error(
8
- `component name is not defined on super class, make sure you have a static get for "componentName"`
9
- );
10
- }
6
+ if (!superclass.componentName) {
7
+ throw Error(
8
+ `component name is not defined on super class, make sure you have a static get for "componentName"`
9
+ );
10
+ }
11
11
 
12
- if (currentComponentName !== superclass.componentName) {
13
- throw Error(
14
- `component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
15
- );
16
- }
17
- }
12
+ if (currentComponentName !== superclass.componentName) {
13
+ throw Error(
14
+ `component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
15
+ );
16
+ }
17
+ }
18
18
 
19
- init() {
20
- super.init?.();
21
- this.#checkComponentName();
22
- }
23
- };
19
+ init() {
20
+ super.init?.();
21
+ this.#checkComponentName();
22
+ }
23
+ };
@@ -4,49 +4,49 @@ import { forwardProps, syncAttrs } from '../helpers/componentHelpers';
4
4
  import { createDispatchEvent } from '../helpers/mixinsHelpers';
5
5
 
6
6
  export const createProxy = ({
7
- componentName,
8
- wrappedEleName,
9
- slots = [],
10
- style,
11
- excludeAttrsSync = [],
12
- includeAttrsSync = [],
13
- includeForwardProps = []
7
+ componentName,
8
+ wrappedEleName,
9
+ slots = [],
10
+ style,
11
+ excludeAttrsSync = [],
12
+ includeAttrsSync = [],
13
+ includeForwardProps = [],
14
14
  }) => {
15
- class ProxyClass extends createBaseClass({ componentName, baseSelector: wrappedEleName }) {
16
- #dispatchBlur = createDispatchEvent.bind(this, 'blur')
17
- #dispatchFocus = createDispatchEvent.bind(this, 'focus')
18
-
19
- constructor() {
20
- super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
21
- <style id="create-proxy">${isFunction(style) ? style() : style
22
- }</style>
15
+ class ProxyClass extends createBaseClass({ componentName, baseSelector: wrappedEleName }) {
16
+ #dispatchBlur = createDispatchEvent.bind(this, 'blur');
17
+
18
+ #dispatchFocus = createDispatchEvent.bind(this, 'focus');
19
+
20
+ constructor() {
21
+ super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
22
+ <style id="create-proxy">${isFunction(style) ? style() : style}</style>
23
23
  <${wrappedEleName}>
24
24
  <slot></slot>
25
25
  ${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
26
26
  </${wrappedEleName}>
27
27
  `;
28
- }
28
+ }
29
29
 
30
- init() {
31
- super.init?.();
30
+ init() {
31
+ super.init?.();
32
32
 
33
- this.baseElement.addEventListener('blur', (e) => {
34
- this.#dispatchBlur()
35
- })
33
+ this.baseElement.addEventListener('blur', (_) => {
34
+ this.#dispatchBlur();
35
+ });
36
36
 
37
- this.baseElement.addEventListener('focus', (e) => {
38
- this.#dispatchFocus()
39
- })
37
+ this.baseElement.addEventListener('focus', (_) => {
38
+ this.#dispatchFocus();
39
+ });
40
40
 
41
- // this is needed for components that uses props, such as combo box
42
- forwardProps(this.baseElement, this, includeForwardProps);
41
+ // this is needed for components that uses props, such as combo box
42
+ forwardProps(this.baseElement, this, includeForwardProps);
43
43
 
44
- syncAttrs(this.baseElement, this, {
45
- excludeAttrs: excludeAttrsSync,
46
- includeAttrs: includeAttrsSync
47
- });
48
- }
49
- }
44
+ syncAttrs(this.baseElement, this, {
45
+ excludeAttrs: excludeAttrsSync,
46
+ includeAttrs: includeAttrsSync,
47
+ });
48
+ }
49
+ }
50
50
 
51
- return ProxyClass;
51
+ return ProxyClass;
52
52
  };
@@ -2,88 +2,78 @@ import { isFunction, kebabCase } from '../../helpers';
2
2
  import { getCssVarName } from '../../helpers/componentHelpers';
3
3
 
4
4
  const createCssVarFallback = (first, ...rest) =>
5
- `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
6
-
7
- const createCssSelector = (
8
- baseSelector = '',
9
- relativeSelectorOrSelectorFn = ''
10
- ) =>
11
- isFunction(relativeSelectorOrSelectorFn)
12
- ? relativeSelectorOrSelectorFn(baseSelector)
13
- : `${baseSelector}${/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
14
- ? ` ${relativeSelectorOrSelectorFn}`
15
- : relativeSelectorOrSelectorFn
16
- }`;
5
+ `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
6
+
7
+ const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
8
+ isFunction(relativeSelectorOrSelectorFn)
9
+ ? relativeSelectorOrSelectorFn(baseSelector)
10
+ : `${baseSelector}${
11
+ /^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
12
+ ? ` ${relativeSelectorOrSelectorFn}`
13
+ : relativeSelectorOrSelectorFn
14
+ }`;
17
15
 
18
16
  class StyleBuilder {
19
- constructor() {
20
- this.styleMap = new Map();
21
- }
22
-
23
- add(selector, property, value) {
24
- if (!this.styleMap.has(selector)) {
25
- this.styleMap.set(selector, []);
26
- }
27
-
28
- this.styleMap.set(selector, [
29
- ...this.styleMap.get(selector),
30
- { property, value }
31
- ]);
32
- }
33
-
34
- toString() {
35
- return Array.from(this.styleMap.entries()).reduce(
36
- (style, [selector, propValArr]) =>
37
- (style += `${selector} { \n${propValArr
38
- .map(({ property, value }) => `${property}: ${value}`)
39
- .join(';\n')} \n}\n\n`),
40
- ''
41
- );
42
- }
17
+ constructor() {
18
+ this.styleMap = new Map();
19
+ }
20
+
21
+ add(selector, property, value) {
22
+ if (!this.styleMap.has(selector)) {
23
+ this.styleMap.set(selector, []);
24
+ }
25
+
26
+ this.styleMap.set(selector, [...this.styleMap.get(selector), { property, value }]);
27
+ }
28
+
29
+ toString() {
30
+ return Array.from(this.styleMap.entries()).reduce((acc, [selector, propValArr]) => {
31
+ const properties = propValArr
32
+ .map(({ property, value }) => `${property}: ${value}`)
33
+ .join(';\n');
34
+
35
+ return `${acc}${selector} { \n${properties} \n}\n\n`;
36
+ }, '');
37
+ }
43
38
  }
44
39
 
45
40
  const normalizeConfig = (attr, config) => {
46
- const defaultMapping = { selector: '', property: kebabCase(attr) };
41
+ const defaultMapping = { selector: '', property: kebabCase(attr) };
47
42
 
48
- if (!config || !Object.keys(config).length) return [defaultMapping];
43
+ if (!config || !Object.keys(config).length) return [defaultMapping];
49
44
 
50
- if (Array.isArray(config))
51
- return config.map((entry) => Object.assign({}, defaultMapping, entry));
45
+ if (Array.isArray(config)) return config.map((entry) => ({ ...defaultMapping, ...entry }));
52
46
 
53
- return [Object.assign({}, defaultMapping, config)];
47
+ return [{ ...defaultMapping, ...config }];
54
48
  };
55
49
 
56
50
  export const createStyle = (componentName, baseSelector, mappings) => {
57
- const style = new StyleBuilder();
51
+ const style = new StyleBuilder();
58
52
 
59
- Object.keys(mappings).forEach((attr) => {
60
- const attrConfig = normalizeConfig(attr, mappings[attr]);
53
+ Object.keys(mappings).forEach((attr) => {
54
+ const attrConfig = normalizeConfig(attr, mappings[attr]);
61
55
 
62
- const cssVarName = getCssVarName(componentName, attr);
56
+ const cssVarName = getCssVarName(componentName, attr);
63
57
 
64
- attrConfig.forEach(
65
- ({ selector: relativeSelectorOrSelectorFn, property }) => {
66
- style.add(
67
- createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
68
- isFunction(property) ? property() : property,
69
- createCssVarFallback(cssVarName)
70
- );
71
- }
72
- );
73
- });
58
+ attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
59
+ style.add(
60
+ createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
61
+ isFunction(property) ? property() : property,
62
+ createCssVarFallback(cssVarName)
63
+ );
64
+ });
65
+ });
74
66
 
75
- return style.toString();
67
+ return style.toString();
76
68
  };
77
69
 
78
70
  export const createCssVarsList = (componentName, mappings) =>
79
- Object.keys(mappings).reduce(
80
- (acc, attr) =>
81
- Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
82
- {}
83
- );
71
+ Object.keys(mappings).reduce(
72
+ (acc, attr) => Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
73
+ {}
74
+ );
84
75
 
85
76
  // on some cases we need a selector to be more specific than another
86
77
  // for this we have this fn that generate a class selector multiple times
87
- export const createClassSelectorSpecifier = (className, numOfRepeats) => Array(numOfRepeats)
88
- .fill(`.${className}`)
89
- .join('')
78
+ export const createClassSelectorSpecifier = (className, numOfRepeats) =>
79
+ Array(numOfRepeats).fill(`.${className}`).join('');
@@ -4,146 +4,160 @@ import { getCssVarName, observeAttributes } from '../../helpers/componentHelpers
4
4
  import { componentsThemeManager } from '../../helpers/themeHelpers/componentsThemeManager';
5
5
  import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './helpers';
6
6
 
7
- const STYLE_OVERRIDE_ATTR_PREFIX = 'st'
7
+ const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
8
8
 
9
9
  export const createStyleMixin =
10
- ({ mappings = {}, componentNameOverride = '' }) => (superclass) => {
11
- const componentName = componentNameOverride || superclass.componentName;
12
-
13
- return class CustomStyleMixinClass extends superclass {
14
- static get cssVarList() {
15
- return {
16
- ...superclass.cssVarList,
17
- ...createCssVarsList(componentName, {
18
- ...mappings,
19
- })
20
- };
21
- }
22
-
23
- #overrideStyleEle;
24
- #themeStyleEle;
25
- #disconnectThemeManager
26
- #componentNameSuffix
27
- #themeSection
28
- #rootElement
29
- #baseSelector
30
- #styleAttributes
31
-
32
- // we are using this mixin also for portalMixin
33
- // so we should be able to inject styles to other DOM elements
34
- // this is why we need to support these overrides
35
- constructor({
36
- getRootElement,
37
- componentNameSuffix = '',
38
- themeSection = BASE_THEME_SECTION,
39
- baseSelector
40
- } = {}) {
41
- super();
42
- this.#componentNameSuffix = componentNameSuffix
43
- this.#themeSection = themeSection
44
- this.#rootElement = getRootElement?.(this) || this.shadowRoot
45
- this.#baseSelector = baseSelector ?? this.baseSelector
46
-
47
- this.#styleAttributes = Object.keys(mappings).map((key) =>
48
- kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
49
- );
50
-
51
- this.#createMappingStyle();
52
- this.#createComponentTheme();
53
- this.#createOverridesStyle();
54
- }
55
-
56
- get #componentTheme() {
57
- return componentsThemeManager.currentTheme?.[componentName] || ''
58
- }
59
-
60
- #onComponentThemeChange() {
61
- this.#themeStyleEle.innerHTML = this.#componentTheme[this.#themeSection]
62
- }
63
-
64
- #createComponentTheme() {
65
- this.#themeStyleEle = document.createElement('style');
66
- this.#themeStyleEle.id = `style-mixin-theme__${componentName}`;
67
- this.#rootElement.prepend(this.#themeStyleEle);
68
- this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.#onComponentThemeChange.bind(this))
69
- this.#onComponentThemeChange()
70
- }
71
-
72
- #createOverridesStyle() {
73
- if (this.#styleAttributes.length) {
74
- this.#overrideStyleEle = document.createElement('style');
75
- this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
76
-
77
- const classSpecifier = createClassSelectorSpecifier(componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
78
-
79
- this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
80
- this.#rootElement.append(this.#overrideStyleEle);
81
- }
82
- }
83
-
84
- #setAttrOverride(attrName, value) {
85
- const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
86
- if (!style) return;
87
-
88
- const varName = getCssVarName(
89
- componentName,
90
- attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
91
- );
92
-
93
- if (value) style?.setProperty(varName, value);
94
- else {
95
- style?.removeProperty(varName);
96
- this.removeAttribute(attrName)
97
- }
98
- }
99
-
100
- #updateOverridesStyle(attrs = []) {
101
- let shouldUpdate = false;
102
-
103
- for (const attr of attrs) {
104
- if (this.#styleAttributes.includes(attr)) {
105
- this.#setAttrOverride(attr, this.getAttribute(attr));
106
- shouldUpdate = true;
107
- }
108
- }
109
-
110
- if (shouldUpdate) {
111
- // we are rewriting the style back to the style tag
112
- this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText
113
- }
114
- }
115
-
116
- #createMappingStyle() {
117
- if (Object.keys(mappings).length) {
118
- const themeStyle = document.createElement('style');
119
- themeStyle.id = `style-mixin-mappings__${componentName}`
120
- themeStyle.innerHTML = createStyle(
121
- kebabCaseJoin(componentName, this.#componentNameSuffix),
122
- this.#baseSelector,
123
- mappings
124
- );
125
- this.#rootElement.prepend(themeStyle);
126
- }
127
- }
128
-
129
- #addClassName(className) {
130
- (this.#rootElement.classList || this.#rootElement.host.classList).add(className)
131
- }
132
-
133
- init() {
134
- super.init?.();
135
- if (this.shadowRoot.isConnected) {
136
- this.#addClassName(componentName)
137
-
138
- // this is instead attributeChangedCallback because we cannot use static methods in this case
139
- observeAttributes(this, this.#updateOverridesStyle.bind(this), {})
140
- }
141
- }
142
-
143
- disconnectedCallback() {
144
- super.disconnectedCallback?.();
145
-
146
- this.#disconnectThemeManager?.();
147
- }
148
- }
149
- };
10
+ ({ mappings = {}, componentNameOverride = '' }) =>
11
+ (superclass) => {
12
+ const componentName = componentNameOverride || superclass.componentName;
13
+
14
+ return class CustomStyleMixinClass extends superclass {
15
+ static get cssVarList() {
16
+ return {
17
+ ...superclass.cssVarList,
18
+ ...createCssVarsList(componentName, {
19
+ ...mappings,
20
+ }),
21
+ };
22
+ }
23
+
24
+ #overrideStyleEle;
25
+
26
+ #themeStyleEle;
27
+
28
+ #disconnectThemeManager;
29
+
30
+ #componentNameSuffix;
31
+
32
+ #themeSection;
33
+
34
+ #rootElement;
35
+
36
+ #baseSelector;
37
+
38
+ #styleAttributes;
39
+
40
+ // we are using this mixin also for portalMixin
41
+ // so we should be able to inject styles to other DOM elements
42
+ // this is why we need to support these overrides
43
+ constructor({
44
+ getRootElement,
45
+ componentNameSuffix = '',
46
+ themeSection = BASE_THEME_SECTION,
47
+ baseSelector,
48
+ } = {}) {
49
+ super();
50
+ this.#componentNameSuffix = componentNameSuffix;
51
+ this.#themeSection = themeSection;
52
+ this.#rootElement = getRootElement?.(this) || this.shadowRoot;
53
+ this.#baseSelector = baseSelector ?? this.baseSelector;
54
+
55
+ this.#styleAttributes = Object.keys(mappings).map((key) =>
56
+ kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
57
+ );
58
+
59
+ this.#createMappingStyle();
60
+ this.#createComponentTheme();
61
+ this.#createOverridesStyle();
62
+ }
63
+
64
+ // eslint-disable-next-line class-methods-use-this
65
+ get #componentTheme() {
66
+ return componentsThemeManager.currentTheme?.[componentName] || '';
67
+ }
68
+
69
+ #onComponentThemeChange() {
70
+ this.#themeStyleEle.innerHTML = this.#componentTheme[this.#themeSection];
71
+ }
72
+
73
+ #createComponentTheme() {
74
+ this.#themeStyleEle = document.createElement('style');
75
+ this.#themeStyleEle.id = `style-mixin-theme__${componentName}`;
76
+ this.#rootElement.prepend(this.#themeStyleEle);
77
+ this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(
78
+ this.#onComponentThemeChange.bind(this)
79
+ );
80
+ this.#onComponentThemeChange();
81
+ }
82
+
83
+ #createOverridesStyle() {
84
+ if (this.#styleAttributes.length) {
85
+ this.#overrideStyleEle = document.createElement('style');
86
+ this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
87
+
88
+ const classSpecifier = createClassSelectorSpecifier(
89
+ componentName,
90
+ CSS_SELECTOR_SPECIFIER_MULTIPLY
91
+ );
92
+
93
+ this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
94
+ this.#rootElement.append(this.#overrideStyleEle);
95
+ }
96
+ }
97
+
98
+ #setAttrOverride(attrName, value) {
99
+ const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
100
+ if (!style) return;
101
+
102
+ const varName = getCssVarName(
103
+ componentName,
104
+ attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
105
+ );
106
+
107
+ if (value) style?.setProperty(varName, value);
108
+ else {
109
+ style?.removeProperty(varName);
110
+ this.removeAttribute(attrName);
111
+ }
112
+ }
113
+
114
+ #updateOverridesStyle(attrs = []) {
115
+ let shouldUpdate = false;
116
+
117
+ attrs.forEach((attr) => {
118
+ if (this.#styleAttributes.includes(attr)) {
119
+ this.#setAttrOverride(attr, this.getAttribute(attr));
120
+ shouldUpdate = true;
121
+ }
122
+ });
123
+
124
+ if (shouldUpdate) {
125
+ // we are rewriting the style back to the style tag
126
+ this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText;
127
+ }
128
+ }
129
+
130
+ #createMappingStyle() {
131
+ if (Object.keys(mappings).length) {
132
+ const themeStyle = document.createElement('style');
133
+ themeStyle.id = `style-mixin-mappings__${componentName}`;
134
+ themeStyle.innerHTML = createStyle(
135
+ kebabCaseJoin(componentName, this.#componentNameSuffix),
136
+ this.#baseSelector,
137
+ mappings
138
+ );
139
+ this.#rootElement.prepend(themeStyle);
140
+ }
141
+ }
142
+
143
+ #addClassName(className) {
144
+ (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
145
+ }
146
+
147
+ init() {
148
+ super.init?.();
149
+ if (this.shadowRoot.isConnected) {
150
+ this.#addClassName(componentName);
151
+
152
+ // this is instead attributeChangedCallback because we cannot use static methods in this case
153
+ observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
154
+ }
155
+ }
156
+
157
+ disconnectedCallback() {
158
+ super.disconnectedCallback?.();
159
+
160
+ this.#disconnectThemeManager?.();
161
+ }
162
+ };
163
+ };