@descope/web-components-ui 1.0.135 → 1.0.148

package/src/mixins/componentNameValidationMixin.js

@@ -1,23 +1,23 @@
 export const componentNameValidationMixin = (superclass) =>
-	class ComponentNameValidationMixinClass extends superclass {
-		#checkComponentName() {
-			const currentComponentName = this.localName;
+  class ComponentNameValidationMixinClass extends superclass {
+    #checkComponentName() {
+      const currentComponentName = this.localName;
 
-			if (!superclass.componentName) {
-				throw Error(
-					`component name is not defined on super class, make sure you have a static get for "componentName"`
-				);
-			}
+      if (!superclass.componentName) {
+        throw Error(
+          `component name is not defined on super class, make sure you have a static get for "componentName"`
+        );
+      }
 
-			if (currentComponentName !== superclass.componentName) {
-				throw Error(
-					`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
-				);
-			}
-		}
+      if (currentComponentName !== superclass.componentName) {
+        throw Error(
+          `component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
+        );
+      }
+    }
 
-		init() {
-			super.init?.();
-			this.#checkComponentName();
-		}
-	};
+    init() {
+      super.init?.();
+      this.#checkComponentName();
+    }
+  };

package/src/mixins/createProxy.js

@@ -4,49 +4,49 @@ import { forwardProps, syncAttrs } from '../helpers/componentHelpers';
 import { createDispatchEvent } from '../helpers/mixinsHelpers';
 
 export const createProxy = ({
-	componentName,
-	wrappedEleName,
-	slots = [],
-	style,
-	excludeAttrsSync = [],
-	includeAttrsSync = [],
-	includeForwardProps = []
+  componentName,
+  wrappedEleName,
+  slots = [],
+  style,
+  excludeAttrsSync = [],
+  includeAttrsSync = [],
+  includeForwardProps = [],
 }) => {
-	class ProxyClass extends createBaseClass({ componentName, baseSelector: wrappedEleName }) {
-		#dispatchBlur = createDispatchEvent.bind(this, 'blur')
-		#dispatchFocus = createDispatchEvent.bind(this, 'focus')
-
-		constructor() {
-			super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
-			<style id="create-proxy">${isFunction(style) ? style() : style
-				}</style>
+  class ProxyClass extends createBaseClass({ componentName, baseSelector: wrappedEleName }) {
+    #dispatchBlur = createDispatchEvent.bind(this, 'blur');
+
+    #dispatchFocus = createDispatchEvent.bind(this, 'focus');
+
+    constructor() {
+      super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
+			<style id="create-proxy">${isFunction(style) ? style() : style}</style>
 			<${wrappedEleName}>
 			<slot></slot>
 			${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
 			</${wrappedEleName}>
 		`;
-		}
+    }
 
-		init() {
-			super.init?.();
+    init() {
+      super.init?.();
 
-			this.baseElement.addEventListener('blur', (e) => {
-				this.#dispatchBlur()
-			})
+      this.baseElement.addEventListener('blur', (_) => {
+        this.#dispatchBlur();
+      });
 
-			this.baseElement.addEventListener('focus', (e) => {
-				this.#dispatchFocus()
-			})
+      this.baseElement.addEventListener('focus', (_) => {
+        this.#dispatchFocus();
+      });
 
-			// this is needed for components that uses props, such as combo box
-			forwardProps(this.baseElement, this, includeForwardProps);
+      // this is needed for components that uses props, such as combo box
+      forwardProps(this.baseElement, this, includeForwardProps);
 
-			syncAttrs(this.baseElement, this, {
-				excludeAttrs: excludeAttrsSync,
-				includeAttrs: includeAttrsSync
-			});
-		}
-	}
+      syncAttrs(this.baseElement, this, {
+        excludeAttrs: excludeAttrsSync,
+        includeAttrs: includeAttrsSync,
+      });
+    }
+  }
 
-	return ProxyClass;
+  return ProxyClass;
 };

package/src/mixins/createStyleMixin/helpers.js

@@ -2,88 +2,78 @@ import { isFunction, kebabCase } from '../../helpers';
 import { getCssVarName } from '../../helpers/componentHelpers';
 
 const createCssVarFallback = (first, ...rest) =>
-	`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
-
-const createCssSelector = (
-	baseSelector = '',
-	relativeSelectorOrSelectorFn = ''
-) =>
-	isFunction(relativeSelectorOrSelectorFn)
-		? relativeSelectorOrSelectorFn(baseSelector)
-		: `${baseSelector}${/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
-			? ` ${relativeSelectorOrSelectorFn}`
-			: relativeSelectorOrSelectorFn
-		}`;
+  `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
+
+const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
+  isFunction(relativeSelectorOrSelectorFn)
+    ? relativeSelectorOrSelectorFn(baseSelector)
+    : `${baseSelector}${
+        /^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+          ? ` ${relativeSelectorOrSelectorFn}`
+          : relativeSelectorOrSelectorFn
+      }`;
 
 class StyleBuilder {
-	constructor() {
-		this.styleMap = new Map();
-	}
-
-	add(selector, property, value) {
-		if (!this.styleMap.has(selector)) {
-			this.styleMap.set(selector, []);
-		}
-
-		this.styleMap.set(selector, [
-			...this.styleMap.get(selector),
-			{ property, value }
-		]);
-	}
-
-	toString() {
-		return Array.from(this.styleMap.entries()).reduce(
-			(style, [selector, propValArr]) =>
-			(style += `${selector} { \n${propValArr
-				.map(({ property, value }) => `${property}: ${value}`)
-				.join(';\n')} \n}\n\n`),
-			''
-		);
-	}
+  constructor() {
+    this.styleMap = new Map();
+  }
+
+  add(selector, property, value) {
+    if (!this.styleMap.has(selector)) {
+      this.styleMap.set(selector, []);
+    }
+
+    this.styleMap.set(selector, [...this.styleMap.get(selector), { property, value }]);
+  }
+
+  toString() {
+    return Array.from(this.styleMap.entries()).reduce((acc, [selector, propValArr]) => {
+      const properties = propValArr
+        .map(({ property, value }) => `${property}: ${value}`)
+        .join(';\n');
+
+      return `${acc}${selector} { \n${properties} \n}\n\n`;
+    }, '');
+  }
 }
 
 const normalizeConfig = (attr, config) => {
-	const defaultMapping = { selector: '', property: kebabCase(attr) };
+  const defaultMapping = { selector: '', property: kebabCase(attr) };
 
-	if (!config || !Object.keys(config).length) return [defaultMapping];
+  if (!config || !Object.keys(config).length) return [defaultMapping];
 
-	if (Array.isArray(config))
-		return config.map((entry) => Object.assign({}, defaultMapping, entry));
+  if (Array.isArray(config)) return config.map((entry) => ({ ...defaultMapping, ...entry }));
 
-	return [Object.assign({}, defaultMapping, config)];
+  return [{ ...defaultMapping, ...config }];
 };
 
 export const createStyle = (componentName, baseSelector, mappings) => {
-	const style = new StyleBuilder();
+  const style = new StyleBuilder();
 
-	Object.keys(mappings).forEach((attr) => {
-		const attrConfig = normalizeConfig(attr, mappings[attr]);
+  Object.keys(mappings).forEach((attr) => {
+    const attrConfig = normalizeConfig(attr, mappings[attr]);
 
-		const cssVarName = getCssVarName(componentName, attr);
+    const cssVarName = getCssVarName(componentName, attr);
 
-		attrConfig.forEach(
-			({ selector: relativeSelectorOrSelectorFn, property }) => {
-				style.add(
-					createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
-					isFunction(property) ? property() : property,
-					createCssVarFallback(cssVarName)
-				);
-			}
-		);
-	});
+    attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
+      style.add(
+        createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
+        isFunction(property) ? property() : property,
+        createCssVarFallback(cssVarName)
+      );
+    });
+  });
 
-	return style.toString();
+  return style.toString();
 };
 
 export const createCssVarsList = (componentName, mappings) =>
-	Object.keys(mappings).reduce(
-		(acc, attr) =>
-			Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
-		{}
-	);
+  Object.keys(mappings).reduce(
+    (acc, attr) => Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
+    {}
+  );
 
 // on some cases we need a selector to be more specific than another
 // for this we have this fn that generate a class selector multiple times
-export const createClassSelectorSpecifier = (className, numOfRepeats) => Array(numOfRepeats)
-	.fill(`.${className}`)
-	.join('')
+export const createClassSelectorSpecifier = (className, numOfRepeats) =>
+  Array(numOfRepeats).fill(`.${className}`).join('');

package/src/mixins/createStyleMixin/index.js

@@ -4,146 +4,160 @@ import { getCssVarName, observeAttributes } from '../../helpers/componentHelpers
 import { componentsThemeManager } from '../../helpers/themeHelpers/componentsThemeManager';
 import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './helpers';
 
-const STYLE_OVERRIDE_ATTR_PREFIX = 'st'
+const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
 
 export const createStyleMixin =
-	({ mappings = {}, componentNameOverride = '' }) => (superclass) => {
-		const componentName = componentNameOverride || superclass.componentName;
-
-		return class CustomStyleMixinClass extends superclass {
-			static get cssVarList() {
-				return {
-					...superclass.cssVarList,
-					...createCssVarsList(componentName, {
-						...mappings,
-					})
-				};
-			}
-
-			#overrideStyleEle;
-			#themeStyleEle;
-			#disconnectThemeManager
-			#componentNameSuffix
-			#themeSection
-			#rootElement
-			#baseSelector
-			#styleAttributes
-
-			// we are using this mixin also for portalMixin
-			// so we should be able to inject styles to other DOM elements
-			// this is why we need to support these overrides
-			constructor({
-				getRootElement,
-				componentNameSuffix = '',
-				themeSection = BASE_THEME_SECTION,
-				baseSelector
-			} = {}) {
-				super();
-				this.#componentNameSuffix = componentNameSuffix
-				this.#themeSection = themeSection
-				this.#rootElement = getRootElement?.(this) || this.shadowRoot
-				this.#baseSelector = baseSelector ?? this.baseSelector
-
-				this.#styleAttributes = Object.keys(mappings).map((key) =>
-					kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
-				);
-
-				this.#createMappingStyle();
-				this.#createComponentTheme();
-				this.#createOverridesStyle();
-			}
-
-			get #componentTheme() {
-				return componentsThemeManager.currentTheme?.[componentName] || ''
-			}
-
-			#onComponentThemeChange() {
-				this.#themeStyleEle.innerHTML = this.#componentTheme[this.#themeSection]
-			}
-
-			#createComponentTheme() {
-				this.#themeStyleEle = document.createElement('style');
-				this.#themeStyleEle.id = `style-mixin-theme__${componentName}`;
-				this.#rootElement.prepend(this.#themeStyleEle);
-				this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.#onComponentThemeChange.bind(this))
-				this.#onComponentThemeChange()
-			}
-
-			#createOverridesStyle() {
-				if (this.#styleAttributes.length) {
-					this.#overrideStyleEle = document.createElement('style');
-					this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
-
-					const classSpecifier = createClassSelectorSpecifier(componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
-
-					this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
-					this.#rootElement.append(this.#overrideStyleEle);
-				}
-			}
-
-			#setAttrOverride(attrName, value) {
-				const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
-				if (!style) return;
-
-				const varName = getCssVarName(
-					componentName,
-					attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
-				);
-
-				if (value) style?.setProperty(varName, value);
-				else {
-					style?.removeProperty(varName);
-					this.removeAttribute(attrName)
-				}
-			}
-
-			#updateOverridesStyle(attrs = []) {
-				let shouldUpdate = false;
-
-				for (const attr of attrs) {
-					if (this.#styleAttributes.includes(attr)) {
-						this.#setAttrOverride(attr, this.getAttribute(attr));
-						shouldUpdate = true;
-					}
-				}
-
-				if (shouldUpdate) {
-					// we are rewriting the style back to the style tag
-					this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText
-				}
-			}
-
-			#createMappingStyle() {
-				if (Object.keys(mappings).length) {
-					const themeStyle = document.createElement('style');
-					themeStyle.id = `style-mixin-mappings__${componentName}`
-					themeStyle.innerHTML = createStyle(
-						kebabCaseJoin(componentName, this.#componentNameSuffix),
-						this.#baseSelector,
-						mappings
-					);
-					this.#rootElement.prepend(themeStyle);
-				}
-			}
-
-			#addClassName(className) {
-				(this.#rootElement.classList || this.#rootElement.host.classList).add(className)
-			}
-
-			init() {
-				super.init?.();
-				if (this.shadowRoot.isConnected) {
-					this.#addClassName(componentName)
-
-					// this is instead attributeChangedCallback because we cannot use static methods in this case
-					observeAttributes(this, this.#updateOverridesStyle.bind(this), {})
-				}
-			}
-
-			disconnectedCallback() {
-				super.disconnectedCallback?.();
-
-				this.#disconnectThemeManager?.();
-			}
-		}
-	};
+  ({ mappings = {}, componentNameOverride = '' }) =>
+  (superclass) => {
+    const componentName = componentNameOverride || superclass.componentName;
+
+    return class CustomStyleMixinClass extends superclass {
+      static get cssVarList() {
+        return {
+          ...superclass.cssVarList,
+          ...createCssVarsList(componentName, {
+            ...mappings,
+          }),
+        };
+      }
+
+      #overrideStyleEle;
+
+      #themeStyleEle;
+
+      #disconnectThemeManager;
+
+      #componentNameSuffix;
+
+      #themeSection;
+
+      #rootElement;
+
+      #baseSelector;
+
+      #styleAttributes;
+
+      // we are using this mixin also for portalMixin
+      // so we should be able to inject styles to other DOM elements
+      // this is why we need to support these overrides
+      constructor({
+        getRootElement,
+        componentNameSuffix = '',
+        themeSection = BASE_THEME_SECTION,
+        baseSelector,
+      } = {}) {
+        super();
+        this.#componentNameSuffix = componentNameSuffix;
+        this.#themeSection = themeSection;
+        this.#rootElement = getRootElement?.(this) || this.shadowRoot;
+        this.#baseSelector = baseSelector ?? this.baseSelector;
+
+        this.#styleAttributes = Object.keys(mappings).map((key) =>
+          kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
+        );
+
+        this.#createMappingStyle();
+        this.#createComponentTheme();
+        this.#createOverridesStyle();
+      }
+
+      // eslint-disable-next-line class-methods-use-this
+      get #componentTheme() {
+        return componentsThemeManager.currentTheme?.[componentName] || '';
+      }
+
+      #onComponentThemeChange() {
+        this.#themeStyleEle.innerHTML = this.#componentTheme[this.#themeSection];
+      }
+
+      #createComponentTheme() {
+        this.#themeStyleEle = document.createElement('style');
+        this.#themeStyleEle.id = `style-mixin-theme__${componentName}`;
+        this.#rootElement.prepend(this.#themeStyleEle);
+        this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(
+          this.#onComponentThemeChange.bind(this)
+        );
+        this.#onComponentThemeChange();
+      }
+
+      #createOverridesStyle() {
+        if (this.#styleAttributes.length) {
+          this.#overrideStyleEle = document.createElement('style');
+          this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
+
+          const classSpecifier = createClassSelectorSpecifier(
+            componentName,
+            CSS_SELECTOR_SPECIFIER_MULTIPLY
+          );
+
+          this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
+          this.#rootElement.append(this.#overrideStyleEle);
+        }
+      }
+
+      #setAttrOverride(attrName, value) {
+        const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
+        if (!style) return;
+
+        const varName = getCssVarName(
+          componentName,
+          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
+        );
+
+        if (value) style?.setProperty(varName, value);
+        else {
+          style?.removeProperty(varName);
+          this.removeAttribute(attrName);
+        }
+      }
+
+      #updateOverridesStyle(attrs = []) {
+        let shouldUpdate = false;
+
+        attrs.forEach((attr) => {
+          if (this.#styleAttributes.includes(attr)) {
+            this.#setAttrOverride(attr, this.getAttribute(attr));
+            shouldUpdate = true;
+          }
+        });
+
+        if (shouldUpdate) {
+          // we are rewriting the style back to the style tag
+          this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText;
+        }
+      }
+
+      #createMappingStyle() {
+        if (Object.keys(mappings).length) {
+          const themeStyle = document.createElement('style');
+          themeStyle.id = `style-mixin-mappings__${componentName}`;
+          themeStyle.innerHTML = createStyle(
+            kebabCaseJoin(componentName, this.#componentNameSuffix),
+            this.#baseSelector,
+            mappings
+          );
+          this.#rootElement.prepend(themeStyle);
+        }
+      }
+
+      #addClassName(className) {
+        (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
+      }
+
+      init() {
+        super.init?.();
+        if (this.shadowRoot.isConnected) {
+          this.#addClassName(componentName);
+
+          // this is instead attributeChangedCallback because we cannot use static methods in this case
+          observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
+        }
+      }
+
+      disconnectedCallback() {
+        super.disconnectedCallback?.();
+
+        this.#disconnectThemeManager?.();
+      }
+    };
+  };