@descope/web-components-ui 1.0.61 → 1.0.63

package/src/index.js

@@ -2,7 +2,6 @@ import './components/descope-button';
 import './components/descope-checkbox';
 import './components/descope-loader-linear';
 import './components/descope-loader-radial';
-import './components/descope-combo';
 import './components/descope-container';
 import './components/descope-date-picker';
 import './components/descope-divider';
@@ -19,8 +18,9 @@ import './components/descope-text-field';
 
 export {
 	globalsThemeToStyle,
-	componentsThemeToStyle,
-	themeToStyle
-} from './themeHelpers';
-export { genColor } from './themeHelpers/processColors';
+	createComponentsTheme,
+	themeToStyle,
+	componentsThemeManager
+} from './helpers/themeHelpers';
+export { genColor } from './helpers/themeHelpers/colorsHelpers';
 export { default as defaultTheme } from './theme';

package/src/index.umd.js

@@ -1,3 +1,5 @@
+const { componentsThemeManager } = require("./helpers/themeHelpers/componentsThemeManager");
+
 const components = import.meta.webpackContext('./components', {
 	recursive: true,
 	regExp: /index.js$/,
@@ -14,3 +16,5 @@ module.exports = components.keys().reduce((acc, key) => {
 
 	return acc;
 }, {});
+
+module.exports.componentsThemeManager = componentsThemeManager

package/src/{componentsHelpers/createProxy/index.js → mixins/createProxy.js}

@@ -1,7 +1,7 @@
-import { compose } from '..';
-import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
-import { hoverableMixin } from '../hoverableMixin';
-import { syncAttrs, forwardProps } from './helpers';
+import { DescopeBaseClass } from '../baseClasses/DescopeBaseClass';
+import { compose } from '../helpers';
+import { forwardProps, syncAttrs } from '../helpers/componentHelpers';
+import { hoverableMixin } from './hoverableMixin';
 
 export const createProxy = ({
 	componentName,

package/src/{componentsHelpers → mixins}/createStyleMixin/helpers.js

@@ -1,4 +1,5 @@
-import { getCssVarName, kebabCase } from '../../helpers';
+import { kebabCase } from '../../helpers';
+import { getCssVarName } from '../../helpers/componentHelpers';
 
 const createCssVarFallback = (first, ...rest) =>
 	`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
@@ -9,11 +10,10 @@ const createCssSelector = (
 ) =>
 	typeof relativeSelectorOrSelectorFn === 'function'
 		? relativeSelectorOrSelectorFn(baseSelector)
-		: `${baseSelector}${
-				/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
-					? ` ${relativeSelectorOrSelectorFn}`
-					: relativeSelectorOrSelectorFn
-		  }`;
+		: `${baseSelector}${/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+			? ` ${relativeSelectorOrSelectorFn}`
+			: relativeSelectorOrSelectorFn
+		}`;
 
 class StyleBuilder {
 	constructor() {
@@ -34,9 +34,9 @@ class StyleBuilder {
 	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`),
+			(style += `${selector} { \n${propValArr
+				.map(({ property, value }) => `${property}: ${value}`)
+				.join(';\n')} \n}\n\n`),
 			''
 		);
 	}
@@ -82,9 +82,8 @@ export const createCssVarsList = (componentName, mappings) =>
 		{}
 	);
 
-// match the host selector with the inner element selector
-// e.g. when we want to set the same size for the host & the inner element this can be useful
-export const matchHostStyle = (mappingObj = {}) => [
-	mappingObj,
-	{ ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
-];
+// 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('')

package/src/mixins/createStyleMixin/index.js

@@ -0,0 +1,109 @@
+import { CSS_SELECTOR_SPECIFIER_MULTIPLY } from '../../constants';
+import { kebabCaseJoin } from '../../helpers';
+import { getCssVarName } 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];
+				}
+
+				static get cssVarList() {
+					return createCssVarsList(superclass.componentName, {
+						...mappings,
+					});
+				}
+
+				#overrideStyleEle = null;
+				#themeStyleEle = null;
+				#disconnectThemeManager
+
+				constructor() {
+					super();
+
+					this.classList.add(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';
+
+					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?.();
+				}
+			};
+		};

package/src/mixins/index.js

@@ -0,0 +1,7 @@
+export { createStyleMixin } from './createStyleMixin';
+export { draggableMixin } from './draggableMixin';
+export { createProxy } from './createProxy';
+export { proxyInputMixin } from './proxyInputMixin';
+export { componentNameValidationMixin } from './componentNameValidationMixin';
+export { hoverableMixin } from './hoverableMixin';
+export { inputMixin } from './inputMixin'

package/src/mixins/inputMixin.js

@@ -0,0 +1,173 @@
+
+const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)
+
+const events = [
+  'change',
+  'input',
+  'blur',
+  'focus',
+  'invalid',
+  'valid',
+]
+
+const observedAttributes = [
+  'required',
+  'pattern',
+]
+
+const errorAttributes = {
+  valueMissing: 'data-errormessage-value-missing',
+  patternMismatch: 'data-errormessage-pattern-mismatch'
+}
+export const inputMixin = (superclass) => class InputMixinClass extends superclass {
+  static get observedAttributes() {
+    return [
+      ...superclass.observedAttributes || [],
+      ...observedAttributes
+    ];
+  }
+
+  static get formAssociated() {
+    return true;
+  }
+
+  #internals
+
+  constructor() {
+    super();
+
+    this.#internals = this.attachInternals();
+
+    for (const event of events) {
+      this[`dispatch${upperFirst(event)}`] = function () {
+        this.dispatchInputEvent(event)
+      }
+    }
+  }
+
+  get defaultErrorMsgValueMissing() {
+    return 'Please fill out this field.'
+  }
+
+  get defaultErrorMsgPatternMismatch() {
+    return 'Please match the requested format.'
+  }
+
+  getErrorMessage(flags) {
+    switch (true) {
+      case flags.valueMissing:
+        return this.getAttribute(errorAttributes.valueMissing) ||
+          this.defaultErrorMsgValueMissing
+      case flags.patternMismatch || flags.typeMismatch:
+        return this.getAttribute(errorAttributes.patternMismatch) ||
+          this.defaultErrorMsgPatternMismatch
+      case flags.customError:
+        return this.validationMessage
+      default:
+        return ''
+    }
+  }
+
+  setValidity() {
+    const validity = this.getValidity()
+    this.#internals.setValidity(validity, this.getErrorMessage(validity))
+  }
+
+  get validationMessage() {
+    return this.#internals.validationMessage;
+  }
+
+  getValidity() {
+    throw Error('getValidity', 'is not implemented')
+  }
+
+  checkValidity() {
+    return this.#internals.validity.valid
+  }
+
+  reportValidity() {
+    return this.#internals.reportValidity()
+  }
+
+  get validity() {
+    return this.#internals.validity
+  }
+
+  setCustomValidity(errorMessage) {
+    if(errorMessage){
+      this.#internals.setValidity({customError: true}, errorMessage)
+    } else {
+      this.#internals.setValidity({})
+      this.setValidity()
+    }
+  }
+
+  get isRequired() {
+    return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
+  }
+
+  get pattern() {
+    return this.getAttribute('pattern')
+  }
+
+  get value() {
+    throw Error('get value', 'is not implemented')
+  }
+
+  set value(value) {
+    throw Error('set value', 'is not implemented')
+  }
+
+  handleFocus() {
+    throw Error('handleFocus', 'is not implemented')
+  }
+
+  handleInput() {
+    this.setValidity()
+    this.handleDispatchValidationEvents()
+  }
+
+  handleBlur() {
+    throw Error('handleBlur', 'is not implemented')
+  }
+
+  handleChange() {
+    throw Error('handleChange', 'is not implemented')
+  }
+
+  dispatchInputEvent(eventName) {
+    this[`on${eventName}`]?.(); // in case we got an event callback as property
+    this.dispatchEvent(new InputEvent(eventName));
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (observedAttributes.includes(attrName)) {
+      this.setValidity();
+    }
+  }
+
+  handleDispatchValidationEvents(){
+    if(this.checkValidity()) {
+      this.dispatchValid() 
+    } else {
+      this.dispatchInvalid()
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback?.();
+
+    this.setValidity();
+    this.handleDispatchValidationEvents();
+
+    // create proxy replace the addEventListener fn 
+    // and we want to be able to access the focus events 
+    // of this element and not the nested element's events
+    this.onfocus = this.handleFocus.bind(this);
+    this.addEventListener('input', this.handleInput.bind(this))
+    this.addEventListener('blur', this.handleBlur.bind(this))
+    this.addEventListener('change', this.handleBlur.bind(this))
+  }
+}

package/src/mixins/proxyInputMixin.js

@@ -0,0 +1,152 @@
+import { inputMixin } from "./inputMixin";
+
+const errorAttrs = ['invalid', 'has-error-message'];
+
+const propertyObserver = (src, target, property) => {
+	Object.defineProperty(src, property, {
+		set: function (v) {
+			return (target[property] = v);
+		},
+		get: function () {
+			return target[property];
+		},
+		configurable: true
+	});
+};
+
+// recursively take the first slot child until it finds an element which is not a slot
+// stops after "nestingLevel" times
+const getNestedInput = (ele) => {
+	if (!ele) return;
+
+	const nestingLevel = 10
+
+	let nonSlotEle = ele
+	for (let i = 0; i < nestingLevel; i++) {
+		nonSlotEle = nonSlotEle.assignedElements()[0]
+		if (nonSlotEle.localName !== 'slot') return nonSlotEle
+	}
+}
+
+export const proxyInputMixin = (superclass) =>
+	class proxyInputMixinClass extends inputMixin(superclass) {
+		static get observedAttributes() {
+			return [...superclass.observedAttributes || [], ...errorAttrs];
+		}
+
+		#inputElement
+
+		constructor() {
+			super();
+
+			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() {
+			const inputSlot = this.baseEle.shadowRoot.querySelector('slot[name="input"]')
+			const textAreaSlot = this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')
+
+			this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot)
+		
+			if (!this.#inputElement) throw Error('no input was found');
+
+			return this.#inputElement
+		}
+
+		set inputElement(ele) {
+			this.#inputElement = ele
+		}
+
+		getValidity() {
+			return this.inputElement.validity
+		}
+
+		reportValidityOnInternalInput() {
+			setTimeout(() => {
+				this.inputElement.reportValidity()
+			}, 0)
+		}
+
+		handleBlur() { }
+
+		handleFocus() {
+			this.inputElement.focus();
+			if (this.hasAttribute('invalid')) {
+				this.reportValidityOnInternalInput()
+			}
+		}
+
+		// we want reportValidity to behave like form submission
+		reportValidity() {
+			const isValid = super.reportValidity()
+			if (!isValid) {
+				this.setAttribute('invalid', 'true');
+				this.inputElement.focus()
+			}
+			this.reportValidityOnInternalInput()
+		}
+
+		setInternalInputErrorMessage() {
+			if (!this.checkValidity()) {
+				this.inputElement.setCustomValidity(this.validationMessage)
+			}
+		}
+
+		connectedCallback() {
+			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
+
+			super.connectedCallback?.();
+
+			this.inputElement.addEventListener('input', () => {
+				this.inputElement.setCustomValidity('')
+				if (!this.inputElement.checkValidity())
+					this.setInternalInputErrorMessage()
+			})
+
+			this.inputElement.addEventListener('invalid', () => {
+				this.setValidity()
+				this.setInternalInputErrorMessage()
+				this.setAttribute('error-message', this.validationMessage)
+			})
+
+			// this is needed in order to make sure the form input validation is working
+			if (!this.hasAttribute('tabindex')) {
+				this.setAttribute('tabindex', 0);
+			}
+
+			// sync properties
+			propertyObserver(this, this.inputElement, 'value');
+			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+		}
+
+		attributeChangedCallback(attrName, oldValue, newValue) {
+			super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+			if (attrName === 'invalid' && newValue === '') {
+				this.setAttribute('invalid', 'true')
+			}
+		}
+	};

package/src/theme/components/button.js

@@ -1,5 +1,5 @@
 import globals from '../globals';
-import { getThemeRefs, createHelperVars } from '../../themeHelpers';
+import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
 import Button, { componentName } from '../../components/descope-button/Button';
 
 const globalRefs = getThemeRefs(globals);
@@ -17,7 +17,7 @@ const [helperTheme, helperRefs] = createHelperVars({ mode }, componentName);
 
 const button = {
 	...helperTheme,
-
+	[vars.width]: 'fit-content',
 	size: {
 		xs: {
 			[vars.height]: '10px',

package/src/theme/components/checkbox.js

@@ -3,7 +3,8 @@ import Checkbox from '../../components/descope-checkbox/Checkbox';
 const vars = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars.cursor]: 'pointer'
+	[vars.cursor]: 'pointer',
+	[vars.width]: 'fit-content'
 };
 
 export default checkbox;

package/src/theme/components/container.js

@@ -1,5 +1,5 @@
 import globals from "../globals";
-import { getThemeRefs, createHelperVars } from "../../themeHelpers";
+import { getThemeRefs, createHelperVars } from "../../helpers/themeHelpers";
 import Container from "../../components/descope-container/Container";
 
 const globalRefs = getThemeRefs(globals);
@@ -27,7 +27,7 @@ const [helperTheme, helperRefs, helperVars] =
 
 const container = {
 	...helperTheme,
-	[vars.display]: 'flex',
+	[vars.width]: '100%',
 	verticalPadding: {
 		sm: { [vars.verticalPadding]: '5px' },
 		md: { [vars.verticalPadding]: '10px' },

package/src/theme/components/divider.js

@@ -1,26 +1,34 @@
-import Divider from '../../components/descope-divider/Divider';
+import Divider, { componentName } from '../../components/descope-divider/Divider';
+import { createHelperVars } from '../../helpers/themeHelpers';
 
 const vars = Divider.cssVarList;
 
+const thickness = '2px'
+const textPaddingSize = '10px'
+const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName);
+
+
 const divider = {
+	...helperTheme,
 	[vars.alignItems]: 'center',
-	[vars.height]: '2px',
+	[vars.dividerHeight]: helperRefs.thickness,
 	[vars.backgroundColor]: 'currentColor',
 	[vars.opacity]: '0.2',
-	[vars.padding]: '0 10px',
+	[vars.textPadding]: `0 ${helperRefs.textPaddingSize}`,
 	[vars.width]: '100%',
 	[vars.flexDirection]: 'row',
 	[vars.alignSelf]: 'strech',
 	[vars.textWidth]: 'fit-content',
+	[vars.maxTextWidth]: 'calc(100% - 100px)',
 	_vertical: {
-		[vars.width]: '2px',
-		[vars.padding]: '10px 0',
+		[vars.padding]: `0 calc(${thickness} * 3)`,
+		[vars.width]: 'fit-content',
+		[vars.textPadding]: `${helperRefs.textPaddingSize} 0`,
 		[vars.flexDirection]: 'column',
 		[vars.minHeight]: '200px',
-		[vars.textWidth]: 'max-content'
-	},
-	_italic: {
-		[vars.fontStyle]: 'italic'
+		[vars.textWidth]: 'fit-content',
+		[vars.dividerWidth]: helperRefs.thickness,
+		[vars.maxTextWidth]: '100%',
 	}
 };
 

package/src/theme/components/link.js

@@ -1,5 +1,5 @@
 import globals from '../globals';
-import { getThemeRefs } from '../../themeHelpers';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 import Link from '../../components/descope-link/Link';
 
 const globalRefs = getThemeRefs(globals);

package/src/theme/components/loader/loaderLinear.js

@@ -1,5 +1,5 @@
 import LoaderLinear from '../../../components/descope-loader-linear/LoaderLinear';
-import { getThemeRefs } from '../../../themeHelpers';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
 import globals from '../../globals';
 
 const globalRefs = getThemeRefs(globals);

package/src/theme/components/loader/loaderRadial.js

@@ -1,5 +1,5 @@
 import LoaderRadial from '../../../components/descope-loader-radial/LoaderRadial';
-import { getThemeRefs } from '../../../themeHelpers';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
 import globals from '../../globals';
 
 const globalRefs = getThemeRefs(globals);

package/src/theme/components/text.js

@@ -1,5 +1,5 @@
 import globals from '../globals';
-import { getThemeRefs } from '../../themeHelpers';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 import Text from '../../components/descope-text/Text';
 
 const globalRefs = getThemeRefs(globals);

package/src/theme/components/textArea.js

@@ -1,11 +1,12 @@
 import globals from '../globals';
-import { getThemeRefs } from '../../themeHelpers';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 import TextArea from '../../components/descope-text-area/TextArea';
 
 const globalRefs = getThemeRefs(globals);
 const vars = TextArea.cssVarList;
 
 const textArea = {
+	[vars.width]: '100%',
 	[vars.color]: globalRefs.colors.primary.main,
 	[vars.backgroundColor]: globalRefs.colors.surface.light,
 	[vars.resize]: 'vertical',