@descope/web-components-ui 1.0.64 → 1.0.66

package/src/mixins/createStyleMixin/index.js

@@ -1,109 +1,135 @@
-import { CSS_SELECTOR_SPECIFIER_MULTIPLY } from '../../constants';
+import { BASE_THEME_SECTION, CSS_SELECTOR_SPECIFIER_MULTIPLY } from '../../constants';
 import { kebabCaseJoin } from '../../helpers';
-import { getCssVarName } from '../../helpers/componentHelpers';
+import { getCssVarName, observeAttributes } from '../../helpers/componentHelpers';
 import { componentsThemeManager } from '../../helpers/themeHelpers/componentsThemeManager';
 import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './helpers';
 
-export const createStyleMixin =
-	({ mappings = {} }) =>
-		(superclass) => {
-			const styleAttributes = Object.keys(mappings).map((key) =>
-				kebabCaseJoin('st', key)
-			);
-			return class CustomStyleMixinClass extends superclass {
-				static get observedAttributes() {
-					const superAttrs = superclass.observedAttributes || [];
-					return [...superAttrs, ...styleAttributes];
-				}
+const STYLE_OVERRIDE_ATTR_PREFIX = 'st'
 
-				static get cssVarList() {
-					return createCssVarsList(superclass.componentName, {
+
+export const createStyleMixin =
+	({ mappings = {} }) => (superclass) =>
+		class CustomStyleMixinClass extends superclass {
+			static get cssVarList() {
+				return {
+					...superclass.cssVarList,
+					...createCssVarsList(superclass.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)
+				);
+			}
+
+			get componentTheme() {
+				return componentsThemeManager.currentTheme?.[superclass.componentName] || ''
+			}
+
+			#onComponentThemeChange() {
+				this.#themeStyleEle.innerHTML = this.componentTheme[this.#themeSection]
+			}
+
+			#createComponentTheme() {
+				this.#themeStyleEle = document.createElement('style');
+				this.#themeStyleEle.id = 'style-mixin-theme';
+				this.#rootElement.prepend(this.#themeStyleEle);
+				this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.#onComponentThemeChange.bind(this))
+				this.#onComponentThemeChange()
+			}
+
+			#createAttrOverrideStyle() {
+				this.#overrideStyleEle = document.createElement('style');
+				this.#overrideStyleEle.id = 'style-mixin-overrides';
+
+				const classSpecifier = createClassSelectorSpecifier(superclass.componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
+
+				this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
+				this.#rootElement.append(this.#overrideStyleEle);
+			}
+
+			#setAttrOverrideStyle(attrName, value) {
+				const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
+				if (!style) return;
+
+				const varName = getCssVarName(
+					superclass.componentName,
+					attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
+				);
+
+				if (value) style?.setProperty(varName, value);
+				else style?.removeProperty(varName);
+			}
+
+			#updateOverrideStyle(attrs = []) {
+				for (const attr of attrs) {
+					if (this.#styleAttributes.includes(attr)) {
+						this.#setAttrOverrideStyle(attr, this.getAttribute(attr));
+					}
 				}
 
-				#overrideStyleEle = null;
-				#themeStyleEle = null;
-				#disconnectThemeManager
+				// we are rewriting the style back to the style tag
+				this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText
+			}
+
+			#createComponentStyle() {
+				const themeStyle = document.createElement('style');
+				themeStyle.id = 'style-mixin-mappings'
+				themeStyle.innerHTML = createStyle(
+					kebabCaseJoin(superclass.componentName, this.#componentNameSuffix),
+					this.#baseSelector,
+					mappings
+				);
+				this.#rootElement.prepend(themeStyle);
+			}
+
+			#addClassName(className) {
+				(this.#rootElement.classList || this.#rootElement.host.classList).add(className)
+			}
 
-				constructor() {
-					super();
+			connectedCallback() {
+				super.connectedCallback?.();
+				if (this.shadowRoot.isConnected) {
 
-					this.classList.add(superclass.componentName)
+					this.#addClassName(superclass.componentName)
 
 					this.#createComponentStyle();
 					this.#createComponentTheme();
 					this.#createAttrOverrideStyle();
-				}
-
-				get componentTheme() {
-					return componentsThemeManager.currentTheme?.[superclass.componentName] || ''
-				}
-
-				onComponentThemeChange() {
-					this.#themeStyleEle.innerHTML = this.componentTheme.theme
-				}
-
-				#createComponentTheme() {
-					this.#themeStyleEle = document.createElement('style');
-					this.#themeStyleEle.id = 'style-mixin-component-theme';
-					this.shadowRoot.prepend(this.#themeStyleEle);
-					this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.onComponentThemeChange.bind(this))
-					this.onComponentThemeChange()
-				}
 
-				#createAttrOverrideStyle() {
-					this.#overrideStyleEle = document.createElement('style');
-					this.#overrideStyleEle.id = 'style-mixin-overrides';
+					// this is instead attributeChangedCallback because we cannot use static methods in this case
+					observeAttributes(this, this.#updateOverrideStyle.bind(this), {})
 
-					const classSpecifier = createClassSelectorSpecifier(superclass.componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
-					this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
-					this.shadowRoot.append(this.#overrideStyleEle);
 				}
+			}
 
-				#updateAttrOverrideStyle(attrName, value) {
-					const style = this.#overrideStyleEle.sheet?.cssRules[0].style;
-					const varName = getCssVarName(
-						superclass.componentName,
-						attrName.replace(/^st-/, '')
-					);
-
-					if (value) style?.setProperty(varName, value);
-					else style?.removeProperty(varName);
-				}
-
-				#createComponentStyle() {
-					const themeStyle = document.createElement('style');
-					themeStyle.id = 'style-mixin-component';
-					themeStyle.innerHTML = createStyle(
-						superclass.componentName,
-						this.baseSelector,
-						mappings
-					);
-					this.shadowRoot.prepend(themeStyle);
-				}
-
-				attributeChangedCallback(attrName, oldValue, newValue) {
-					super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-					if (styleAttributes.includes(attrName)) {
-						this.#updateAttrOverrideStyle(attrName, newValue);
-					}
-				}
-
-				connectedCallback() {
-					super.connectedCallback?.();
-					if (this.shadowRoot.isConnected) {
-						Array.from(this.attributes).forEach((attr) => {
-							if (styleAttributes.includes(attr.nodeName)) {
-								this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
-							}
-						});
-					}
-				}
-
-				disconnectedCallback() {
-					this.#disconnectThemeManager?.();
-				}
-			};
+			disconnectedCallback() {
+				this.#disconnectThemeManager?.();
+			}
 		};

package/src/mixins/index.js

@@ -5,3 +5,4 @@ export { proxyInputMixin } from './proxyInputMixin';
 export { componentNameValidationMixin } from './componentNameValidationMixin';
 export { hoverableMixin } from './hoverableMixin';
 export { inputMixin } from './inputMixin'
+export { portalMixin } from './portalMixin'

package/src/mixins/inputMixin.js

@@ -1,5 +1,4 @@
-
-const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)
+import { upperFirst } from "../helpers";
 
 const events = [
   'change',
@@ -68,7 +67,13 @@ export const inputMixin = (superclass) => class InputMixinClass extends supercla
     }
   }
 
+  get isReadOnly() {
+    return this.getAttribute('readonly') !== 'false'
+  }
+
   setValidity() {
+    if (this.isReadOnly) return;
+
     const validity = this.getValidity()
     this.#internals.setValidity(validity, this.getErrorMessage(validity))
   }
@@ -94,8 +99,8 @@ export const inputMixin = (superclass) => class InputMixinClass extends supercla
   }
 
   setCustomValidity(errorMessage) {
-    if(errorMessage){
-      this.#internals.setValidity({customError: true}, errorMessage)
+    if (errorMessage) {
+      this.#internals.setValidity({ customError: true }, errorMessage)
     } else {
       this.#internals.setValidity({})
       this.setValidity()
@@ -148,9 +153,9 @@ export const inputMixin = (superclass) => class InputMixinClass extends supercla
     }
   }
 
-  handleDispatchValidationEvents(){
-    if(this.checkValidity()) {
-      this.dispatchValid() 
+  handleDispatchValidationEvents() {
+    if (this.checkValidity()) {
+      this.dispatchValid()
     } else {
       this.dispatchInvalid()
     }

package/src/mixins/portalMixin.js

@@ -0,0 +1,62 @@
+import { PORTAL_THEME_PREFIX } from "../constants";
+import { upperFirst } from "../helpers";
+import { forwardAttrs } from "../helpers/componentHelpers";
+import { createStyleMixin } from "./createStyleMixin";
+import { createCssVarsList } from "./createStyleMixin/helpers";
+
+const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
+
+const appendSuffixToKeys = (obj, suffix) => Object.keys(obj).reduce((acc, key) =>
+  Object.assign(acc, { [suffix + upperFirst(key)]: obj[key] }), {})
+
+const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
+
+export const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
+  const eleDisplayName = name || sanitizeSelector(selector)
+
+  const BaseClass = createStyleMixin({
+    mappings
+  })(superclass)
+
+  return class PortalMixinClass extends BaseClass {
+    static get cssVarList() {
+      return {
+        ...BaseClass.cssVarList,
+        ...createCssVarsList(superclass.componentName, appendSuffixToKeys(mappings, eleDisplayName))
+      };
+    }
+
+    #portalEle
+
+    constructor() {
+      // we cannot use "this" before calling "super"
+      const getRootElement = (that) => {
+        const baseEle = that.shadowRoot.querySelector(that.baseSelector)
+        const portal = baseEle.shadowRoot.querySelector(selector)
+
+        return portal.shadowRoot || portal
+      };
+
+      super({
+        getRootElement,
+        componentNameSuffix: eleDisplayName,
+        themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
+        baseSelector: ':host'
+      })
+
+      this.#portalEle = getDomNode(getRootElement(this))
+    }
+
+    #handleHoverAttribute() {
+      this.#portalEle.onmouseenter = (e) => { e.target.setAttribute('hover', 'true') }
+      this.#portalEle.onmouseleave = (e) => { e.target.removeAttribute('hover') }
+    }
+
+    connectedCallback() {
+      super.connectedCallback?.();
+      forwardAttrs(this, this.#portalEle, { excludeAttrs: ['hover'] })
+
+      this.#handleHoverAttribute();
+    }
+  }
+}

package/src/mixins/proxyInputMixin.js

@@ -41,28 +41,6 @@ export const proxyInputMixin = (superclass) =>
 
 			this.#inputElement = super.inputElement
 
-			// this is our way to identify that the form was submitted
-			// in this case, we want the input to be in error state if it's not valid
-			this.addEventListener('focus', (e) => {
-				if (e.relatedTarget?.form) {
-					if (!this.checkValidity()) {
-						this.setAttribute('invalid', 'true');
-					}
-
-					if (this.hasAttribute('invalid')) {
-						this.reportValidityOnInternalInput()
-					}
-				}
-			})
-
-			this.addEventListener('invalid', () => {
-				this.setInternalInputErrorMessage()
-				this.setAttribute('error-message', this.validationMessage)
-			})
-
-			this.addEventListener('valid', () => {
-				this.removeAttribute('invalid')
-			})
 		}
 
 		get inputElement() {
@@ -118,6 +96,29 @@ export const proxyInputMixin = (superclass) =>
 		connectedCallback() {
 			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
 
+			// this is our way to identify that the form was submitted
+			// in this case, we want the input to be in error state if it's not valid
+			this.addEventListener('focus', (e) => {
+				if (e.relatedTarget?.form) {
+					if (!this.checkValidity()) {
+						this.setAttribute('invalid', 'true');
+					}
+
+					if (this.hasAttribute('invalid')) {
+						this.reportValidityOnInternalInput()
+					}
+				}
+			})
+
+			this.addEventListener('invalid', () => {
+				this.setInternalInputErrorMessage()
+				this.setAttribute('error-message', this.validationMessage)
+			})
+
+			this.addEventListener('valid', () => {
+				this.removeAttribute('invalid')
+			})
+
 			super.connectedCallback?.();
 
 			this.inputElement.addEventListener('input', () => {

package/src/theme/components/comboBox.js

@@ -0,0 +1,32 @@
+import globals from '../globals';
+import ComboBox from '../../components/descope-combo-box/ComboBox';
+import { textField } from './textField';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = ComboBox.cssVarList;
+
+export const comboBox = {
+	...textField(ComboBox.cssVarList),
+	size: {
+		xs: {
+			[vars.width]: '30px'
+		}
+	},
+	[vars.borderColor]: 'green',
+	[vars.borderWidth]: '0',
+	[vars.cursor]: 'pointer',
+	[vars.padding]: '0',
+
+	'@overlay': {
+		[vars.overlayBackgroundColor] : 'red',
+		[vars.overlayBorder]: '3px solid blue',
+
+		_hover: {
+			[vars.overlayBackgroundColor] : 'blue',
+		}
+	}
+};
+
+export default comboBox;

package/src/theme/components/index.js

@@ -13,6 +13,7 @@ import link from './link';
 import divider from './divider';
 import passcode from './passcode';
 import { loaderRadial, loaderLinear } from './loader';
+import comboBox from './comboBox';
 
 export default {
 	button,
@@ -30,5 +31,6 @@ export default {
 	divider,
 	passcode,
 	loaderRadial,
-	loaderLinear
+	loaderLinear,
+	comboBox
 };