@descope/web-components-ui 1.0.61 → 1.0.63

package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js

@@ -1,16 +1,16 @@
-import { getComponentName } from '../../../componentsHelpers';
+import BaseInputClass from '../../../baseClasses/BaseInputClass';
+import { getComponentName } from '../../../helpers/componentHelpers';
 import { getSanitizedCharacters, focusElement } from './helpers';
 
 export const componentName = getComponentName('passcode-internal');
 
-class PasscodeInternal extends HTMLElement {
+class PasscodeInternal extends BaseInputClass {
 	static get observedAttributes() {
 		return [
+			...BaseInputClass.observedAttributes,
 			'disabled',
 			'bordered',
-			'size',
-			'required',
-			'pattern'
+			'size'
 		];
 	}
 
@@ -18,12 +18,6 @@ class PasscodeInternal extends HTMLElement {
 		return componentName;
 	}
 
-	static get formAssociated() {
-		return true;
-	}
-
-	#internals
-
 	constructor() {
 		super();
 		const template = document.createElement('template');
@@ -47,23 +41,9 @@ class PasscodeInternal extends HTMLElement {
 
 		this.baseSelector = ':host > div';
 
-		this.#internals = this.attachInternals();
-
 		this.inputs = Array.from(this.querySelectorAll('descope-text-field'))
 	}
 
-	checkValidity() {
-		// we need to toggle the has-error-message so the text inside the digits will become red when there is an error
-		if (this.#internals.validity.valid) {
-			this.inputs.forEach(input => input.removeAttribute('has-error-message'))
-		} else {
-			this.inputs.forEach(input => input.setAttribute('has-error-message', 'true'))
-			// we need to call it so the has-error-message with have the correct format (="true")
-			this.oninvalid?.()
-		}
-		return this.#internals.validity.valid
-	}
-
 	get digits() {
 		return Number.parseInt(this.getAttribute('digits')) || 6
 	}
@@ -72,59 +52,54 @@ class PasscodeInternal extends HTMLElement {
 		return this.inputs.map(({ value }) => value).join('')
 	}
 
-	set value(val) { }
+	set value(val) {
+		if(val === this.value) return;
 
-	get isRequired() {
-		return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
+		const charArr = getSanitizedCharacters(val);
+
+		if (charArr.length) {
+			this.fillDigits(charArr, this.inputs[0]);
+		}
 	}
 
 	get pattern() {
 		return `^$|^\\d{${this.digits},}$`
 	}
 
-	get valueMissingErrMsg() {
-		return 'Please fill out this field.'
-	}
-
-	get patternMismatchErrMsg() {
-		return `Must be a ${this.digits} digits number.`
-	}
-
-	get validity() {
-		return this.#internals.validity;
-	}
-
-	get validationMessage() {
-		return this.#internals.validationMessage;
-	}
-
-	reportValidity() {
-		this.#internals.reportValidity()
+	handleInputsInvalid() {
+		setTimeout(() => {
+			if (this.hasAttribute('invalid')) {
+				this.inputs.forEach(input => input.setAttribute('invalid', 'true'))
+			}
+		})
 	}
 
-	formAssociatedCallback() {
-		this.setValidity?.();
+	handleInputsValid() {
+		this.inputs.forEach(input => input.removeAttribute('invalid'))
 	}
 
-	setValidity = () => {
+	getValidity() {
 		if (this.isRequired && !this.value) {
-			this.#internals.setValidity({ valueMissing: true }, this.valueMissingErrMsg);
+			return { valueMissing: true };
 		}
 		else if (this.pattern && !new RegExp(this.pattern).test(this.value)) {
-			this.#internals.setValidity({ patternMismatch: true }, this.patternMismatchErrMsg);
+			return { patternMismatch: true };
 		}
 		else {
-			this.#internals.setValidity({})
+			return {}
 		}
 	};
 
+	handleFocus() {
+		this.inputs[0].focus();
+	}
+
 	async connectedCallback() {
-		this.setValidity();
+		super.connectedCallback();
 		this.initInputs()
 
-		this.onfocus = () => {
-			this.inputs[0].focus();
-		}
+		this.addEventListener('invalid', this.handleInputsInvalid)
+		this.addEventListener('valid', this.handleInputsValid)
 	}
 
 	getInputIdx(inputEle) {
@@ -155,6 +130,10 @@ class PasscodeInternal extends HTMLElement {
 		!currentInput.hasAttribute('focused') && focusElement(currentInput);
 	};
 
+	handleBlur() {
+		this.handleInputsInvalid()
+	}
+
 	initInputs() {
 		this.inputs.forEach((input) => {
 
@@ -163,7 +142,7 @@ class PasscodeInternal extends HTMLElement {
 			// if not, the component is no longer focused and we should simulate blur
 			input.addEventListener('blur', () => {
 				const timerId = setTimeout(() => {
-					this.dispatchEvent(new Event('blur'))
+					this.dispatchBlur()
 				});
 
 				this.inputs.forEach((ele) =>
@@ -171,13 +150,13 @@ class PasscodeInternal extends HTMLElement {
 				);
 			})
 
-			input.oninput = (e) => {
+			input.oninput = () => {
 				const charArr = getSanitizedCharacters(input.value);
 
 				if (!charArr.length) input.value = ''; // if we got an invalid value we want to clear the input
 				else this.fillDigits(charArr, input);
 
-				this.setValidity();
+				this.dispatchInput()
 			};
 
 			input.onkeydown = ({ key }) => {
@@ -190,27 +169,21 @@ class PasscodeInternal extends HTMLElement {
 					!prevInput.hasAttribute('focused') && setTimeout(() => {
 						focusElement(prevInput);
 					});
+					
+					this.dispatchInput()
 				} else if (key.match(/^(\d)$/g)) { // if input is a digit
 					input.value = ''; // we are clearing the previous value so we can override it with the new value
 				}
 
-				this.setValidity()
 			};
 		})
 	}
 
-	attributeChangedCallback(
-		attrName,
-		oldValue,
-		newValue
-	) {
-		const validationRelatedAttributes = ['required', 'pattern'];
+	attributeChangedCallback(attrName, oldValue, newValue) {
+		super.attributeChangedCallback(attrName, oldValue, newValue)
 
 		if (oldValue !== newValue) {
-			if (validationRelatedAttributes.includes(attrName)) {
-				this.setValidity()
-			}
-			else if (PasscodeInternal.observedAttributes.includes(attrName)) {
+			if (PasscodeInternal.observedAttributes.includes(attrName) && !BaseInputClass.observedAttributes.includes(attrName)) {
 				this.inputs.forEach((input) => input.setAttribute(attrName, newValue))
 			}
 		}
@@ -218,4 +191,3 @@ class PasscodeInternal extends HTMLElement {
 }
 
 export default PasscodeInternal;
-

package/src/components/descope-password-field/PasswordField.js

@@ -1,13 +1,13 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
-	inputMixin,
-	compose,
+	proxyInputMixin,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
+} from '../../mixins';
 import textFieldMappings from '../descope-text-field/textFieldMappings';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('password-field');
 
@@ -26,7 +26,7 @@ const PasswordField = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({

package/src/components/descope-switch-toggle/SwitchToggle.js

@@ -1,13 +1,12 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
-	inputMixin,
-	compose,
+	proxyInputMixin,
 	componentNameValidationMixin,
-} from '../../componentsHelpers';
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+} from '../../mixins';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('switch-toggle');
 
@@ -16,12 +15,12 @@ let overrides = ``;
 const SwitchToggle = compose(
 	createStyleMixin({
 		mappings: {
-			width: matchHostStyle(),
+			width: {selector: () => ':host'},
 			cursor: [{}, { selector: '> label' }]
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -47,6 +46,9 @@ overrides = `
 		--bgColor: #fff;
 		--knobBgColor: #000;
 	}
+	vaadin-checkbox : {
+		width: 100%;
+	}
 	vaadin-checkbox>label {
 		cursor: pointer;
 		border: 1px solid;
@@ -73,6 +75,7 @@ overrides = `
 		height: 0;
 		width: 0;
 		visibility: hidden;
+		margin: 0;
 	}
 	vaadin-checkbox[checked]>label::after {
 		transform: translateX(-100%);

package/src/components/descope-text/Text.js

@@ -1,12 +1,11 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
-	compose,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+} from '../../mixins';
 import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('text');
 
@@ -17,7 +16,18 @@ class RawText extends DescopeBaseClass {
 	constructor() {
 		super();
 		const template = document.createElement('template');
-		template.innerHTML = `<slot></slot>`;
+		template.innerHTML = `
+		<style>
+			:host {
+				display: inline-block;
+			}
+			:host > slot {
+				width: 100%;
+				display: inline-block;
+			}
+		</style>
+		<slot></slot>
+		`;
 
 		this.attachShadow({ mode: 'open' });
 		this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -34,7 +44,7 @@ const Text = compose(
 			fontStyle: {},
 			fontSize: {},
 			fontWeight: {},
-			width: {},
+			width: { selector: () => ':host' },
 			color: {},
 			letterSpacing: {},
 			textShadow: {},
@@ -42,9 +52,8 @@ const Text = compose(
 			borderStyle: {},
 			borderColor: {},
 			textTransform: {},
-			textAlign: matchHostStyle(),
-			display: matchHostStyle()
-		}
+			textAlign: {},
+		},
 	}),
 	draggableMixin,
 	componentNameValidationMixin

package/src/components/descope-text-area/TextArea.js

@@ -1,20 +1,20 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
-	inputMixin,
-	compose,
+	proxyInputMixin,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+} from '../../mixins';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('text-area');
 
 const selectors = {
 	label: '::part(label)',
 	input: '::part(input-field)',
-	required: '::part(required-indicator)::after'
+	required: '::part(required-indicator)::after',
+	host: () => ':host'
 };
 
 let overrides = ``;
@@ -25,7 +25,7 @@ const TextArea = compose(
 			resize: { selector: '> textarea' },
 			color: { selector: selectors.label },
 			cursor: {},
-			width: matchHostStyle(),
+			width: { selector: selectors.host },
 			backgroundColor: { selector: selectors.input },
 			borderWidth: { selector: selectors.input },
 			borderStyle: { selector: selectors.input },
@@ -36,7 +36,7 @@ const TextArea = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -55,6 +55,7 @@ overrides = `
 
 	vaadin-text-area {
 		margin: 0;
+		width: 100%;
 	}
 	vaadin-text-area > label,
 	vaadin-text-area::part(input-field) {

package/src/components/descope-text-field/TextField.js

@@ -1,13 +1,13 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
-	inputMixin,
-	compose,
+	proxyInputMixin,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
+} from '../../mixins';
 import textFieldMappings from '../descope-text-field/textFieldMappings';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('text-field');
 
@@ -18,7 +18,7 @@ const TextField = compose(
 		mappings: textFieldMappings
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({

package/src/components/descope-text-field/textFieldMappings.js

@@ -1,17 +1,15 @@
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
-
 const selectors = {
 	label: '::part(label)',
 	input: '::part(input-field)',
 	readOnlyInput: '[readonly]::part(input-field)::after',
-	placeholder: '> input:placeholder-shown'
+	placeholder: '> input:placeholder-shown',
+	host: () => ':host'
 };
 
 export default {
-	color: { selector: selectors.input },
 	backgroundColor: { selector: selectors.input },
 	color: { selector: selectors.input },
-	width: matchHostStyle({}),
+	width: { selector: selectors.host },
 	borderColor: [
 		{ selector: selectors.input },
 		{ selector: selectors.readOnlyInput }

package/src/constants.js

@@ -1 +1,2 @@
 export const DESCOPE_PREFIX = 'descope';
+export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3

package/src/dev/index.js

@@ -1,2 +1,2 @@
-export {default as defaultTheme} from '../theme';
-export { themeToStyle } from '../themeHelpers';
+export { default as defaultTheme } from '../theme';
+export { themeToStyle } from '../helpers/themeHelpers';

package/src/{componentsHelpers/createProxy/helpers.js → helpers/componentHelpers.js}

@@ -1,3 +1,6 @@
+import { kebabCaseJoin } from '.';
+import { DESCOPE_PREFIX } from '../constants';
+
 const observeAttributes = (
 	ele,
 	callback,
@@ -50,12 +53,17 @@ export const syncAttrs = (ele1, ele2, options) => {
 	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
 };
 
+export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
+
+export const getCssVarName = (...args) =>
+  `--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
+
 export const forwardAttrs = (source, dest, options = {}) => {
-	observeAttributes(
-		source,
-		createSyncAttrsCb(source, dest, options.mapAttrs),
-		options
-	);
+  observeAttributes(
+    source,
+    createSyncAttrsCb(source, dest, options.mapAttrs),
+    options
+  );
 };
 
 export const forwardProps = (src, target, props = []) => {

package/src/{helpers.js → helpers/index.js}

@@ -1,3 +1,4 @@
+
 export const kebabCase = (str) =>
 	str
 		.replace(/([a-z])([A-Z])/g, '$1-$2')
@@ -6,5 +7,7 @@ export const kebabCase = (str) =>
 
 export const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
 
-export const getCssVarName = (...args) =>
-	`--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
+export const compose = (...fns) =>
+	(val) =>
+		fns.reduceRight((res, fn) => fn(res), val);
+

package/src/helpers/themeHelpers/componentsThemeManager.js

@@ -0,0 +1,40 @@
+
+class ComponentsThemeManager {
+  static mountOnPropName = 'DescopeThemeManager';
+
+  #themes = {};
+
+  #currentThemeName = 'light';
+
+  #callbacks = new Set();
+
+  #notify() {
+    this.#callbacks.forEach(cb => cb?.());
+  };
+
+  get currentThemeName() {
+    return this.#currentThemeName;
+  }
+
+  set currentThemeName(themeName) {
+    this.#currentThemeName = themeName;
+    this.#notify();
+  }
+
+  get currentTheme() {
+    return this.#themes[this.currentThemeName];
+  }
+
+  onCurrentThemeChange(cb) {
+    this.#callbacks.add(cb);
+
+    return () => { this.#callbacks.delete(cb); };
+  };
+
+  set themes(themes) {
+    this.#themes = themes;
+    this.#notify();
+  }
+}
+
+export const componentsThemeManager = new ComponentsThemeManager()

package/src/{themeHelpers → helpers/themeHelpers}/index.js

@@ -1,8 +1,8 @@
 import merge from 'lodash.merge';
 import set from 'lodash.set';
-import { DESCOPE_PREFIX } from '../constants';
-import { getCssVarName, kebabCase } from '../helpers';
-import { getComponentName } from '../componentsHelpers';
+import { DESCOPE_PREFIX } from '../../constants';
+import { kebabCase } from '..';
+import { getComponentName, getCssVarName } from '../componentHelpers';
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -32,9 +32,9 @@ export const getThemeRefs = (theme, prefix) =>
 export const globalsThemeToStyle = (theme, themeName = '') => `
 *[data-theme="${themeName}"] {
 	${Object.entries(themeToCSSVarsObj(theme)).reduce(
-		(acc, entry) => (acc += `${entry.join(':')};\n`),
-		''
-	)}
+	(acc, entry) => (acc += `${entry.join(':')};\n`),
+	''
+)}
 }
 `;
 
@@ -42,10 +42,20 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 	transformTheme(componentsTheme, [], (path, val) => {
 		const [component, ...restPath] = path;
 		const property = restPath.pop();
+		const componentName = getComponentName(component);
+
+		// we need a support for portal components theme (e.g. overlay)
+		// this allows us to generate those themes under different sections
+		// if the theme has root level attribute that starts with #
+		// we are generating a new theme
+		let themeName = 'theme'
+
+		if (restPath[0] && restPath[0].startsWith('#')) {
+			themeName = restPath.shift();
+		}
 
 		// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
 		// starts with underscore -> attribute selector
-
 		const attrsSelector = restPath.reduce((acc, section, idx) => {
 			if (section.startsWith('_'))
 				return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
@@ -65,30 +75,53 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 				.join('')}"]`);
 		}, '');
 
-		let selector = `${getComponentName(component)}${attrsSelector}`;
+		let selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
 
 		return {
-			[selector]: {
-				[property]: val
+			[componentName]: {
+				[themeName]: {
+					[selector]: {
+						[property]: val
+					}
+				}
 			}
 		};
 	});
 
-export const componentsThemeToStyle = (componentsTheme, themeName = '') =>
-	Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
+
+export const createComponentsTheme = (componentsTheme) => {
+	const styleObj = componentsThemeToStyleObj(componentsTheme);
+
+	return Object.keys(styleObj).reduce(
+		(acc, componentName) => {
+			const componentThemes = styleObj[componentName];
+
+			return Object.assign(acc, {
+				[componentName]: Object.keys(componentThemes)
+					.reduce((acc, theme) =>
+						Object.assign(acc, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
+						{})
+			})
+		},
+		{}
+	);
+}
+
+const componentsThemeToStyle = (componentsTheme) =>
+	Object.entries(componentsTheme).reduce(
 		(acc, [selector, vars]) =>
-			(acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(
-				vars
-			)
-				.map(([key, val]) => `${key}: ${val}`)
-				.join(';\n')} \n}\n\n`),
+		(acc += `${selector} { \n${Object.entries(
+			vars
+		)
+			.map(([key, val]) => `${key}: ${val}`)
+			.join(';\n')} \n}\n\n`),
 		''
 	);
 
-export const themeToStyle = ({ globals, components }, themeName) => `
-${globalsThemeToStyle(globals, themeName)}
-${componentsThemeToStyle(components, themeName)}
-`;
+export const themeToStyle = ({ globals, components }, themeName) => ({
+	globals: globalsThemeToStyle(globals, themeName),
+	components: createComponentsTheme(components)
+});
 
 const useVar = (varName) => `var(${varName})`;
 
@@ -107,3 +140,5 @@ export const createHelperVars = (theme, prefix) => {
 
 	return [res.theme, res.useVars, res.vars];
 };
+
+export { componentsThemeManager } from './componentsThemeManager'

package/src/index.cjs.js

@@ -1,3 +1,3 @@
 // CJS is used by screen-renderer-service, we cannot load vaadin there,
 // so we are exporting only the css generation stuff
-export * from './themeHelpers';
+export * from './helpers/themeHelpers';