@descope/web-components-ui 1.0.65 → 1.0.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/cjs/index.cjs.js +6 -4
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +663 -433
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/233.js +5 -1
  6. package/dist/umd/314.js +283 -0
  7. package/dist/umd/314.js.LICENSE.txt +27 -0
  8. package/dist/umd/541.js +744 -0
  9. package/dist/umd/541.js.LICENSE.txt +21 -0
  10. package/dist/umd/725.js +37 -1
  11. package/dist/umd/786.js +1 -1
  12. package/dist/umd/824.js +229 -0
  13. package/dist/umd/{54.js.LICENSE.txt → 824.js.LICENSE.txt} +0 -6
  14. package/dist/umd/840.js +9 -9
  15. package/dist/umd/860.js +1 -0
  16. package/dist/umd/descope-button-index-js.js +1 -1
  17. package/dist/umd/descope-checkbox-index-js.js +1 -1
  18. package/dist/umd/descope-combo-box-index-js.js +1 -0
  19. package/dist/umd/descope-container-index-js.js +1 -1
  20. package/dist/umd/descope-date-picker-index-js.js +1 -1
  21. package/dist/umd/descope-divider-index-js.js +1 -1
  22. package/dist/umd/descope-email-field-index-js.js +1 -1
  23. package/dist/umd/descope-link-index-js.js +1 -1
  24. package/dist/umd/descope-loader-linear-index-js.js +1 -1
  25. package/dist/umd/descope-loader-radial-index-js.js +1 -1
  26. package/dist/umd/descope-logo-index-js.js +1 -1
  27. package/dist/umd/descope-number-field-index-js.js +1 -1
  28. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
  29. package/dist/umd/descope-passcode-index-js.js +1 -1
  30. package/dist/umd/descope-password-field-index-js.js +1 -1
  31. package/dist/umd/descope-switch-toggle-index-js.js +1 -1
  32. package/dist/umd/descope-text-area-index-js.js +1 -1
  33. package/dist/umd/descope-text-field-index-js.js +1 -1
  34. package/dist/umd/descope-text-index-js.js +1 -1
  35. package/dist/umd/index.js +1 -1
  36. package/package.json +2 -1
  37. package/src/components/descope-combo-box/ComboBox.js +111 -0
  38. package/src/components/descope-combo-box/index.js +6 -0
  39. package/src/constants.js +3 -1
  40. package/src/helpers/componentHelpers.js +55 -36
  41. package/src/helpers/index.js +2 -1
  42. package/src/helpers/themeHelpers/index.js +3 -3
  43. package/src/mixins/createStyleMixin/index.js +117 -91
  44. package/src/mixins/index.js +1 -0
  45. package/src/mixins/inputMixin.js +2 -3
  46. package/src/mixins/portalMixin.js +62 -0
  47. package/src/theme/components/comboBox.js +32 -0
  48. package/src/theme/components/index.js +3 -1
  49. package/dist/umd/54.js +0 -971
  50. package/dist/umd/666.js +0 -37
  51. /package/dist/umd/{666.js.LICENSE.txt → 725.js.LICENSE.txt} +0 -0
@@ -1,109 +1,135 @@
1
- import { CSS_SELECTOR_SPECIFIER_MULTIPLY } from '../../constants';
1
+ import { BASE_THEME_SECTION, CSS_SELECTOR_SPECIFIER_MULTIPLY } from '../../constants';
2
2
  import { kebabCaseJoin } from '../../helpers';
3
- import { getCssVarName } from '../../helpers/componentHelpers';
3
+ 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
- export const createStyleMixin =
8
- ({ mappings = {} }) =>
9
- (superclass) => {
10
- const styleAttributes = Object.keys(mappings).map((key) =>
11
- kebabCaseJoin('st', key)
12
- );
13
- return class CustomStyleMixinClass extends superclass {
14
- static get observedAttributes() {
15
- const superAttrs = superclass.observedAttributes || [];
16
- return [...superAttrs, ...styleAttributes];
17
- }
18
-
19
- static get cssVarList() {
20
- return createCssVarsList(superclass.componentName, {
21
- ...mappings,
22
- });
23
- }
24
-
25
- #overrideStyleEle = null;
26
- #themeStyleEle = null;
27
- #disconnectThemeManager
7
+ const STYLE_OVERRIDE_ATTR_PREFIX = 'st'
28
8
 
29
- constructor() {
30
- super();
31
- }
32
-
33
- get componentTheme() {
34
- return componentsThemeManager.currentTheme?.[superclass.componentName] || ''
35
- }
36
9
 
37
- onComponentThemeChange() {
38
- this.#themeStyleEle.innerHTML = this.componentTheme.theme
39
- }
40
-
41
- #createComponentTheme() {
42
- this.#themeStyleEle = document.createElement('style');
43
- this.#themeStyleEle.id = 'style-mixin-component-theme';
44
- this.shadowRoot.prepend(this.#themeStyleEle);
45
- this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.onComponentThemeChange.bind(this))
46
- this.onComponentThemeChange()
47
- }
48
-
49
- #createAttrOverrideStyle() {
50
- this.#overrideStyleEle = document.createElement('style');
51
- this.#overrideStyleEle.id = 'style-mixin-overrides';
52
-
53
- const classSpecifier = createClassSelectorSpecifier(superclass.componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
54
- this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
55
- this.shadowRoot.append(this.#overrideStyleEle);
10
+ export const createStyleMixin =
11
+ ({ mappings = {} }) => (superclass) =>
12
+ class CustomStyleMixinClass extends superclass {
13
+ static get cssVarList() {
14
+ return {
15
+ ...superclass.cssVarList,
16
+ ...createCssVarsList(superclass.componentName, {
17
+ ...mappings,
18
+ })
19
+ };
20
+ }
21
+
22
+ #overrideStyleEle;
23
+ #themeStyleEle;
24
+ #disconnectThemeManager
25
+ #componentNameSuffix
26
+ #themeSection
27
+ #rootElement
28
+ #baseSelector
29
+ #styleAttributes
30
+
31
+ // we are using this mixin also for portalMixin
32
+ // so we should be able to inject styles to other DOM elements
33
+ // this is why we need to support these overrides
34
+ constructor({
35
+ getRootElement,
36
+ componentNameSuffix = '',
37
+ themeSection = BASE_THEME_SECTION,
38
+ baseSelector
39
+ } = {}) {
40
+ super();
41
+ this.#componentNameSuffix = componentNameSuffix
42
+ this.#themeSection = themeSection
43
+ this.#rootElement = getRootElement?.(this) || this.shadowRoot
44
+ this.#baseSelector = baseSelector ?? this.baseSelector
45
+
46
+ this.#styleAttributes = Object.keys(mappings).map((key) =>
47
+ kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
48
+ );
49
+ }
50
+
51
+ get componentTheme() {
52
+ return componentsThemeManager.currentTheme?.[superclass.componentName] || ''
53
+ }
54
+
55
+ #onComponentThemeChange() {
56
+ this.#themeStyleEle.innerHTML = this.componentTheme[this.#themeSection]
57
+ }
58
+
59
+ #createComponentTheme() {
60
+ this.#themeStyleEle = document.createElement('style');
61
+ this.#themeStyleEle.id = 'style-mixin-theme';
62
+ this.#rootElement.prepend(this.#themeStyleEle);
63
+ this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.#onComponentThemeChange.bind(this))
64
+ this.#onComponentThemeChange()
65
+ }
66
+
67
+ #createAttrOverrideStyle() {
68
+ this.#overrideStyleEle = document.createElement('style');
69
+ this.#overrideStyleEle.id = 'style-mixin-overrides';
70
+
71
+ const classSpecifier = createClassSelectorSpecifier(superclass.componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
72
+
73
+ this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
74
+ this.#rootElement.append(this.#overrideStyleEle);
75
+ }
76
+
77
+ #setAttrOverrideStyle(attrName, value) {
78
+ const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
79
+ if (!style) return;
80
+
81
+ const varName = getCssVarName(
82
+ superclass.componentName,
83
+ attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
84
+ );
85
+
86
+ if (value) style?.setProperty(varName, value);
87
+ else style?.removeProperty(varName);
88
+ }
89
+
90
+ #updateOverrideStyle(attrs = []) {
91
+ for (const attr of attrs) {
92
+ if (this.#styleAttributes.includes(attr)) {
93
+ this.#setAttrOverrideStyle(attr, this.getAttribute(attr));
94
+ }
56
95
  }
57
96
 
58
- #updateAttrOverrideStyle(attrName, value) {
59
- const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
60
- const varName = getCssVarName(
61
- superclass.componentName,
62
- attrName.replace(/^st-/, '')
63
- );
97
+ // we are rewriting the style back to the style tag
98
+ this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText
99
+ }
64
100
 
65
- if (value) style?.setProperty(varName, value);
66
- else style?.removeProperty(varName);
67
- }
101
+ #createComponentStyle() {
102
+ const themeStyle = document.createElement('style');
103
+ themeStyle.id = 'style-mixin-mappings'
104
+ themeStyle.innerHTML = createStyle(
105
+ kebabCaseJoin(superclass.componentName, this.#componentNameSuffix),
106
+ this.#baseSelector,
107
+ mappings
108
+ );
109
+ this.#rootElement.prepend(themeStyle);
110
+ }
68
111
 
69
- #createComponentStyle() {
70
- const themeStyle = document.createElement('style');
71
- themeStyle.id = 'style-mixin-component';
72
- themeStyle.innerHTML = createStyle(
73
- superclass.componentName,
74
- this.baseSelector,
75
- mappings
76
- );
77
- this.shadowRoot.prepend(themeStyle);
78
- }
112
+ #addClassName(className) {
113
+ (this.#rootElement.classList || this.#rootElement.host.classList).add(className)
114
+ }
79
115
 
80
- attributeChangedCallback(attrName, oldValue, newValue) {
81
- super.attributeChangedCallback?.(attrName, oldValue, newValue);
116
+ connectedCallback() {
117
+ super.connectedCallback?.();
118
+ if (this.shadowRoot.isConnected) {
82
119
 
83
- if (styleAttributes.includes(attrName)) {
84
- this.#updateAttrOverrideStyle(attrName, newValue);
85
- }
86
- }
120
+ this.#addClassName(superclass.componentName)
87
121
 
88
- connectedCallback() {
89
- super.connectedCallback?.();
90
- if (this.shadowRoot.isConnected) {
91
- this.classList.add(superclass.componentName)
122
+ this.#createComponentStyle();
123
+ this.#createComponentTheme();
124
+ this.#createAttrOverrideStyle();
92
125
 
93
- this.#createComponentStyle();
94
- this.#createComponentTheme();
95
- this.#createAttrOverrideStyle();
126
+ // this is instead attributeChangedCallback because we cannot use static methods in this case
127
+ observeAttributes(this, this.#updateOverrideStyle.bind(this), {})
96
128
 
97
- Array.from(this.attributes).forEach((attr) => {
98
- if (styleAttributes.includes(attr.nodeName)) {
99
- this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
100
- }
101
- });
102
- }
103
129
  }
130
+ }
104
131
 
105
- disconnectedCallback() {
106
- this.#disconnectThemeManager?.();
107
- }
108
- };
132
+ disconnectedCallback() {
133
+ this.#disconnectThemeManager?.();
134
+ }
109
135
  };
@@ -5,3 +5,4 @@ export { proxyInputMixin } from './proxyInputMixin';
5
5
  export { componentNameValidationMixin } from './componentNameValidationMixin';
6
6
  export { hoverableMixin } from './hoverableMixin';
7
7
  export { inputMixin } from './inputMixin'
8
+ export { portalMixin } from './portalMixin'
@@ -1,5 +1,4 @@
1
-
2
- const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)
1
+ import { upperFirst } from "../helpers";
3
2
 
4
3
  const events = [
5
4
  'change',
@@ -69,7 +68,7 @@ export const inputMixin = (superclass) => class InputMixinClass extends supercla
69
68
  }
70
69
 
71
70
  get isReadOnly() {
72
- return this.getAttribute('readonly') !== 'false'
71
+ return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
73
72
  }
74
73
 
75
74
  setValidity() {
@@ -0,0 +1,62 @@
1
+ import { PORTAL_THEME_PREFIX } from "../constants";
2
+ import { upperFirst } from "../helpers";
3
+ import { forwardAttrs } from "../helpers/componentHelpers";
4
+ import { createStyleMixin } from "./createStyleMixin";
5
+ import { createCssVarsList } from "./createStyleMixin/helpers";
6
+
7
+ const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
8
+
9
+ const appendSuffixToKeys = (obj, suffix) => Object.keys(obj).reduce((acc, key) =>
10
+ Object.assign(acc, { [suffix + upperFirst(key)]: obj[key] }), {})
11
+
12
+ const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
13
+
14
+ export const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
15
+ const eleDisplayName = name || sanitizeSelector(selector)
16
+
17
+ const BaseClass = createStyleMixin({
18
+ mappings
19
+ })(superclass)
20
+
21
+ return class PortalMixinClass extends BaseClass {
22
+ static get cssVarList() {
23
+ return {
24
+ ...BaseClass.cssVarList,
25
+ ...createCssVarsList(superclass.componentName, appendSuffixToKeys(mappings, eleDisplayName))
26
+ };
27
+ }
28
+
29
+ #portalEle
30
+
31
+ constructor() {
32
+ // we cannot use "this" before calling "super"
33
+ const getRootElement = (that) => {
34
+ const baseEle = that.shadowRoot.querySelector(that.baseSelector)
35
+ const portal = baseEle.shadowRoot.querySelector(selector)
36
+
37
+ return portal.shadowRoot || portal
38
+ };
39
+
40
+ super({
41
+ getRootElement,
42
+ componentNameSuffix: eleDisplayName,
43
+ themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
44
+ baseSelector: ':host'
45
+ })
46
+
47
+ this.#portalEle = getDomNode(getRootElement(this))
48
+ }
49
+
50
+ #handleHoverAttribute() {
51
+ this.#portalEle.onmouseenter = (e) => { e.target.setAttribute('hover', 'true') }
52
+ this.#portalEle.onmouseleave = (e) => { e.target.removeAttribute('hover') }
53
+ }
54
+
55
+ connectedCallback() {
56
+ super.connectedCallback?.();
57
+ forwardAttrs(this, this.#portalEle, { excludeAttrs: ['hover'] })
58
+
59
+ this.#handleHoverAttribute();
60
+ }
61
+ }
62
+ }
@@ -0,0 +1,32 @@
1
+ import globals from '../globals';
2
+ import ComboBox from '../../components/descope-combo-box/ComboBox';
3
+ import { textField } from './textField';
4
+ import { getThemeRefs } from '../../helpers/themeHelpers';
5
+
6
+ const globalRefs = getThemeRefs(globals);
7
+
8
+ const vars = ComboBox.cssVarList;
9
+
10
+ export const comboBox = {
11
+ ...textField(ComboBox.cssVarList),
12
+ size: {
13
+ xs: {
14
+ [vars.width]: '30px'
15
+ }
16
+ },
17
+ [vars.borderColor]: 'green',
18
+ [vars.borderWidth]: '0',
19
+ [vars.cursor]: 'pointer',
20
+ [vars.padding]: '0',
21
+
22
+ '@overlay': {
23
+ [vars.overlayBackgroundColor] : 'red',
24
+ [vars.overlayBorder]: '3px solid blue',
25
+
26
+ _hover: {
27
+ [vars.overlayBackgroundColor] : 'blue',
28
+ }
29
+ }
30
+ };
31
+
32
+ export default comboBox;
@@ -13,6 +13,7 @@ import link from './link';
13
13
  import divider from './divider';
14
14
  import passcode from './passcode';
15
15
  import { loaderRadial, loaderLinear } from './loader';
16
+ import comboBox from './comboBox';
16
17
 
17
18
  export default {
18
19
  button,
@@ -30,5 +31,6 @@ export default {
30
31
  divider,
31
32
  passcode,
32
33
  loaderRadial,
33
- loaderLinear
34
+ loaderLinear,
35
+ comboBox
34
36
  };