@descope/web-components-ui 1.0.51 → 1.0.53

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

@@ -0,0 +1,213 @@
+import { getComponentName } from '../../../componentsHelpers';
+import { getSanitizedCharacters, focusElement } from './helpers';
+
+export const componentName = getComponentName('passcode-internal');
+
+class PasscodeInternal extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			'disabled',
+			'bordered',
+			'size'
+		];
+	}
+
+	static get componentName() {
+		return componentName;
+	}
+
+	static get formAssociated() {
+		return true;
+	}
+
+	#internals
+
+	constructor() {
+		super();
+		const template = document.createElement('template');
+
+		const inputs = [...Array(this.digits).keys()].map((idx) => `
+		<descope-text-field
+			st-width="35px"
+			data-id=${idx}
+			type="tel"
+			autocomplete="none"
+		></descope-text-field>
+	`)
+
+		template.innerHTML = `
+		<div>
+			${inputs.join('')}
+		</div>
+		`;
+
+		this.appendChild(template.content.cloneNode(true));
+
+		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
+	}
+
+	get value() {
+		return this.inputs.map(({ value }) => value).join('')
+	}
+
+	set value(val) { }
+
+	get isRequired() {
+		return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
+	}
+
+	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()
+	}
+
+	formAssociatedCallback() {
+		this.setValidity?.();
+	}
+
+	setValidity = () => {
+		if (this.isRequired && !this.value) {
+			this.#internals.setValidity({ valueMissing: true }, this.valueMissingErrMsg);
+		}
+		else if (this.pattern && !new RegExp(this.pattern).test(this.value)) {
+			this.#internals.setValidity({ patternMismatch: true }, this.patternMismatchErrMsg);
+		}
+		else {
+			this.#internals.setValidity({})
+		}
+	};
+
+	async connectedCallback() {
+		this.setValidity();
+		this.initInputs()
+
+		this.onfocus = () => {
+			this.inputs[0].focus();
+		}
+	}
+
+	getInputIdx(inputEle) {
+		return Number.parseInt(inputEle.getAttribute('data-id'), 10)
+	}
+
+	getNextInput(currInput) {
+		const currentIdx = this.getInputIdx(currInput)
+		const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1)
+		return this.inputs[newIdx]
+	}
+
+	getPrevInput(currInput) {
+		const currentIdx = this.getInputIdx(currInput)
+		const newIdx = Math.max(currentIdx - 1, 0)
+		return this.inputs[newIdx]
+	}
+
+	fillDigits(charArr, currentInput) {
+		for (let i = 0; i < charArr.length; i += 1) {
+			currentInput.value = charArr[i] ?? '';
+
+			const nextInput = this.getNextInput(currentInput);
+			if (nextInput === currentInput) break;
+			currentInput = nextInput;
+		}
+
+		!currentInput.hasAttribute('focused') && focusElement(currentInput);
+	};
+
+	initInputs() {
+		this.inputs.forEach((input) => {
+
+			// in order to simulate blur on the input
+			// we are checking if focus on one of the digits happened immediately after blur on another digit
+			// 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.inputs.forEach((ele) =>
+					ele.addEventListener('focus', () => clearTimeout(timerId), { once: true })
+				);
+			})
+
+			input.oninput = (e) => {
+				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();
+			};
+
+			input.onkeydown = ({ key }) => {
+				if (key === 'Backspace') {
+					input.value = '';
+
+					// if the user deleted the digit we want to focus the previous digit
+					const prevInput = this.getPrevInput(input)
+
+					!prevInput.hasAttribute('focused') && setTimeout(() => {
+						focusElement(prevInput);
+					});
+				} 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
+	) {
+		if (oldValue !== newValue &&
+			PasscodeInternal.observedAttributes.includes(attrName)) {
+			this.inputs.forEach((input) => input.setAttribute(attrName, newValue))
+		}
+	}
+}
+
+export default PasscodeInternal;
+

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

@@ -0,0 +1,14 @@
+
+export const focusElement = (ele) => {
+	ele?.focus();
+	ele?.setSelectionRange(1, 1);
+};
+
+export const getSanitizedCharacters = (str) => {
+	const pin = str.replace(/\s/g, ''); // sanitize string
+
+	// accept only numbers
+	if (!pin.match(/^\d+$/)) return [];
+
+	return [...pin]; // creating array of chars
+};

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

@@ -0,0 +1,3 @@
+import PasscodeInternal, { componentName } from "./PasscodeInternal"
+
+customElements.define(componentName, PasscodeInternal)

package/src/components/descope-passcode/index.js

@@ -0,0 +1,5 @@
+import Passcode, { componentName } from './Passcode';
+import '../descope-text-field'
+import './descope-passcode-internal'
+
+customElements.define(componentName, Passcode);

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

@@ -17,7 +17,6 @@ const PasswordField = compose(
 	createStyleMixin({
 		mappings: {
 			...textFieldMappings,
-			// todo: override cursor from lumo
 			revealCursor: [
 				{
 					selector: '::part(reveal-button)::before',

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

@@ -6,10 +6,11 @@ import {
 	componentNameValidationMixin
 } from '../../componentsHelpers';
 import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+import { DescopeBaseClass } from '../DescopeBaseClass';
 
 export const componentName = getComponentName('text');
 
-class RawText extends HTMLElement {
+class RawText extends DescopeBaseClass {
 	static get componentName() {
 		return componentName;
 	}
@@ -35,6 +36,12 @@ const Text = compose(
 			fontWeight: {},
 			width: {},
 			color: {},
+			letterSpacing: {},
+			textShadow: {},
+			borderWidth: {},
+			borderStyle: {},
+			borderColor: {},
+			textTransform: {},
 			textAlign: matchHostStyle(),
 			display: matchHostStyle()
 		}

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

@@ -1,5 +1,4 @@
 import Text, { componentName } from './Text';
 
 customElements.define(componentName, Text);
-
 export { Text };

package/src/componentsHelpers/createProxy/helpers.js

@@ -1,14 +1,27 @@
-const observeAttributes = (ele, callback, excludeAttrs) => {
+const observeAttributes = (
+	ele,
+	callback,
+	{ excludeAttrs = [], includeAttrs = [] }
+) => {
 	// sync all attrs on init
-	callback(...Array.from(ele.attributes).map((attr) => attr.name));
+	callback(
+		...Array.from(ele.attributes)
+			.filter(
+				(attr) =>
+					!excludeAttrs.includes(attr.name) &&
+					(!includeAttrs.length || includeAttrs.includes(attr.name))
+			)
+			.map((attr) => attr.name)
+	);
 
 	const observer = new MutationObserver((mutationsList) => {
 		for (const mutation of mutationsList) {
 			if (
 				mutation.type === 'attributes' &&
-				!excludeAttrs.includes(mutation.attributeName)
+				!excludeAttrs.includes(mutation.attributeName) &&
+				(!includeAttrs.length || includeAttrs.includes(attr.name))
 			) {
-				callback(mutation.attributeName);
+				callback([mutation.attributeName]);
 			}
 		}
 	});
@@ -31,7 +44,11 @@ const createSyncAttrsCb =
 		});
 	};
 
-export const syncAttrs = (ele1, ele2, excludeAttrs) => {
-	observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
-	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
+export const syncAttrs = (ele1, ele2, options) => {
+	observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
+	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
+};
+
+export const forwardAttrs = (source, dest, options) => {
+	observeAttributes(source, createSyncAttrsCb(source, dest), options);
 };

package/src/componentsHelpers/createProxy/index.js

@@ -1,3 +1,4 @@
+import { DescopeBaseClass } from '../../components/DescopeBaseClass';
 import { syncAttrs } from './helpers';
 
 export const createProxy = ({
@@ -15,7 +16,7 @@ export const createProxy = ({
 		</${wrappedEleName}>
 	`;
 
-	class ProxyElement extends HTMLElement {
+	class ProxyElement extends DescopeBaseClass {
 		static get componentName() {
 			return componentName;
 		}
@@ -23,7 +24,6 @@ export const createProxy = ({
 		constructor() {
 			super().attachShadow({ mode: 'open' }).innerHTML = template;
 			this.hostElement = this.shadowRoot.host;
-			this.componentName = this.hostElement.tagName.toLowerCase();
 			this.baseSelector = wrappedEleName;
 			this.shadowRoot.getElementById('create-proxy').innerHTML =
 				typeof style === 'function' ? style() : style;
@@ -35,9 +35,9 @@ export const createProxy = ({
 				this.setAttribute('tabindex', '0');
 
 				// we want to focus on the proxy element when focusing our WC
-				this.onfocus = (e) => {
+				this.addEventListener('focus', () => {
 					this.proxyElement.focus();
-				};
+				})
 
 				// `onkeydown` is set on `proxyElement` support proper tab-index navigation
 				// this support is needed since both proxy host and element catch `focus`/`blur` event
@@ -63,9 +63,11 @@ export const createProxy = ({
 				this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
 
 				// sync events
-				this.addEventListener = this.proxyElement.addEventListener;
+				this.addEventListener = (...args) => this.proxyElement.addEventListener(...args)
 
-				syncAttrs(this.proxyElement, this.hostElement, excludeAttrsSync);
+				syncAttrs(this.proxyElement, this.hostElement, {
+					excludeAttrs: excludeAttrsSync
+				});
 			}
 		}
 

package/src/componentsHelpers/createStyleMixin/index.js

@@ -2,77 +2,108 @@ import { getCssVarName, kebabCaseJoin } from '../../helpers';
 import { createStyle, createCssVarsList } 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);
-			}
-
-			#styleEle = null;
-
-			constructor() {
-				super();
-
-				this.#createComponentStyle();
-				this.#createAttrOverrideStyle();
-			}
-
-			#createAttrOverrideStyle() {
-				this.#styleEle = document.createElement('style');
-				this.#styleEle.id = 'style-mixin-overrides';
-
-				this.#styleEle.innerText = '* {}';
-				this.shadowRoot.prepend(this.#styleEle);
-			}
-
-			#updateAttrOverrideStyle(attrName, value) {
-				const style = this.#styleEle.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);
+	({ mappings = {}, nestedMappings = {} }) =>
+		(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];
 				}
-			}
-
-    connectedCallback() {
-      super.connectedCallback?.();
-      if (this.shadowRoot.isConnected) {
-        Array.from(this.attributes).forEach(attr => {
-          if (styleAttributes.includes(attr.nodeName)) {
-            this.#updateAttrOverrideStyle(attr.nodeName, attr.value)
-          }
-        });
-      }
-    }
+
+				static get cssVarList() {
+					return createCssVarsList(superclass.componentName, mappings);
+				}
+
+				#styleEle = null;
+
+				constructor() {
+					super();
+
+					this.#createComponentStyle();
+					this.#createAttrOverrideStyle();
+				}
+
+				#createAttrOverrideStyle() {
+					this.#styleEle = document.createElement('style');
+					this.#styleEle.id = 'style-mixin-overrides';
+
+					this.#styleEle.innerText = '* {}';
+					this.shadowRoot.prepend(this.#styleEle);
+				}
+
+				#updateAttrOverrideStyle(attrName, value) {
+					const style = this.#styleEle.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);
+				}
+
+				#createComponentNestingStyle() {
+					// we need these selectors to be more specific from the theme selectors
+					// in order to do it, we are repeating the class name for specificity
+					const numOfClassNameSpecifier = 3
+
+					const rootNode = this.shadowRoot.host.getRootNode()
+					const styleId = `${superclass.componentName}-style-mixin-component`
+
+					const className = superclass.componentName
+					this.shadowRoot.host.classList.add(className)
+
+					if(rootNode.querySelector(`style#${styleId}`)) return;
+
+					const themeStyle = document.createElement('style');
+					themeStyle.id = styleId;
+					themeStyle.innerHTML = createStyle(
+						superclass.componentName,
+						`${superclass.componentName}${Array(numOfClassNameSpecifier).fill(`.${className}`).join('')}`,
+						nestedMappings
+					);
+
+					// rootNode can be either a shadow DOM or a light DOM
+					if (rootNode.nodeName === '#document') {
+						rootNode.head.append(themeStyle)
+					} else {
+						rootNode.append(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) {
+						this.#createComponentNestingStyle();
+
+						Array.from(this.attributes).forEach(attr => {
+							if (styleAttributes.includes(attr.nodeName)) {
+								this.#updateAttrOverrideStyle(attr.nodeName, attr.value)
+							}
+						});
+					}
+				}
+			};
 		};
-	};

package/src/componentsHelpers/enforceNestingElementsStylesMixin.js

@@ -0,0 +1,95 @@
+import { forwardAttrs } from '../componentsHelpers/createProxy/helpers';
+
+const getChildObserver = (callback) => {
+	return new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+			if (mutation.type === 'childList') {
+				callback(mutation);
+			}
+		}
+	});
+};
+
+const insertNestingLevel = (srcEle, nestingEle) => {
+	nestingEle.append(...srcEle.childNodes);
+	srcEle.appendChild(nestingEle);
+};
+
+// adds a nesting element to the component, and move all existing children
+// to be under the nesting element
+export const enforceNestingElementsStylesMixin =
+	({ nestingElementTagName, nestingElementDestSlotName, forwardAttrOptions }) =>
+	(superclass) => {
+		const getChildNodeEle = () =>
+			Object.assign(document.createElement(nestingElementTagName), {
+				slot: nestingElementDestSlotName
+			});
+
+		let childObserver;
+		
+		const getObserver = () => childObserver;
+
+		return class EnforceNestingElementsStylesMixinClass extends superclass {
+			constructor() {
+				super();
+
+				const childObserverCallback = () => {
+					// we are going to change the DOM, so we need to disconnect the observer before
+					// and reconnect it after the child component is added
+					getObserver().disconnect(this.shadowRoot.host);
+
+					const isNestingElementExist = this.shadowRoot.host.querySelector(nestingElementTagName);
+					const hasNewChildren = this.shadowRoot.host.childNodes.length > 0;
+
+					if (!isNestingElementExist && hasNewChildren) {
+						// if before there were no children and now there are children - insert
+						insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
+					} else if (isNestingElementExist && hasNewChildren) {
+						// if children existed, and they changed -
+						// we need to update (move) the new children into
+						// descope-text and remove previous children
+						this.shadowRoot.host.querySelector(child).remove();
+						insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
+					}
+					else if (isNestingElementExist && !hasNewChildren) {
+						// if children existed and now there are none -
+						// we need to remove descope-text completely
+						this.shadowRoot.host.querySelector(child).remove();
+					}
+
+					// we need a new observer, because we remove the nesting element
+					this.shadowRoot.host.querySelector(nestingElementTagName) &&
+						forwardAttrs(
+							this.shadowRoot.host,
+							this.shadowRoot.host.querySelector(nestingElementTagName),
+							forwardAttrOptions
+						);
+
+						getObserver().observe(this.shadowRoot.host, {
+						childList: true
+					});
+				};
+
+				childObserver = getChildObserver(childObserverCallback);
+			}
+
+			connectedCallback() {
+				super.connectedCallback?.();
+
+				if (this.shadowRoot.host.childNodes.length > 0) {
+					// on the first render - we want to move all component's children to be under descope-text
+					insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
+
+					forwardAttrs(
+						this.shadowRoot.host,
+						this.shadowRoot.host.querySelector(nestingElementTagName),
+						forwardAttrOptions
+					);
+				}
+
+				getObserver().observe(this.shadowRoot.host, {
+					childList: true
+				});
+			}
+		};
+	};