@descope/web-components-ui 1.0.60 → 1.0.62

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

@@ -1,16 +1,16 @@
+import BaseInputClass from '../../../baseClasses/BaseInputClass';
 import { getComponentName } from '../../../componentsHelpers';
 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

@@ -3,7 +3,7 @@ import {
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
-	inputMixin,
+	proxyInputMixin,
 	compose,
 	componentNameValidationMixin
 } from '../../componentsHelpers';
@@ -26,7 +26,7 @@ const PasswordField = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({

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

@@ -3,7 +3,7 @@ import {
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
-	inputMixin,
+	proxyInputMixin,
 	compose,
 	componentNameValidationMixin,
 } from '../../componentsHelpers';
@@ -21,7 +21,7 @@ const SwitchToggle = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({

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

@@ -6,7 +6,7 @@ import {
 	componentNameValidationMixin
 } from '../../componentsHelpers';
 import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
-import { DescopeBaseClass } from '../DescopeBaseClass';
+import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
 
 export const componentName = getComponentName('text');
 

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

@@ -3,7 +3,7 @@ import {
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
-	inputMixin,
+	proxyInputMixin,
 	compose,
 	componentNameValidationMixin
 } from '../../componentsHelpers';
@@ -36,7 +36,7 @@ const TextArea = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({

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

@@ -3,7 +3,7 @@ import {
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
-	inputMixin,
+	proxyInputMixin,
 	compose,
 	componentNameValidationMixin
 } from '../../componentsHelpers';
@@ -18,7 +18,7 @@ const TextField = compose(
 		mappings: textFieldMappings
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({

package/src/componentsHelpers/compose.js

@@ -0,0 +1,3 @@
+export default (...fns) =>
+(val) =>
+  fns.reduceRight((res, fn) => fn(res), val);

package/src/componentsHelpers/createProxy/index.js

@@ -1,5 +1,5 @@
-import { compose } from '..';
-import { DescopeBaseClass } from '../../components/DescopeBaseClass';
+import compose from '../compose';
+import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
 import { hoverableMixin } from '../hoverableMixin';
 import { syncAttrs, forwardProps } from './helpers';
 

package/src/componentsHelpers/enforceNestingElementsStylesMixin.js

@@ -19,65 +19,65 @@ const insertNestingLevel = (srcEle, nestingEle) => {
 // 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();
-					}
+		(superclass) => {
+			const getChildNodeEle = () =>
+				document.createElement(nestingElementTagName, {
+					slot: nestingElementDestSlotName
+				});
 
-					// 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
-						);
+			let childObserver;
 
-						getObserver().observe(this.shadowRoot.host, {
-						childList: true
-					});
-				};
+			const getObserver = () => childObserver;
 
-				childObserver = getChildObserver(childObserverCallback);
-			}
+			let isMutating = false;
+
+			const filterNestingElement = (node) => node.localName !== nestingElementTagName
+			return class EnforceNestingElementsStylesMixinClass extends superclass {
+				constructor() {
+					super();
+
+					const childObserverCallback = (mutation, observer) => {
+
+						// we are going to change the DOM, so we need to skip the upcoming mutations
+						if (isMutating) return;
+
+						isMutating = true
+
+						const { addedNodes, removedNodes } = mutation
+
+						const nestingElement = this.shadowRoot.host.querySelector(nestingElementTagName);
+						const hasNewChildren = Array.from(addedNodes)
+							.filter(filterNestingElement)
+							.length > 0;
+						const hasRemovedChildren = Array.from(removedNodes)
+							.filter(filterNestingElement)
+							.length > 0;
 
-			connectedCallback() {
-				super.connectedCallback?.();
+						if (!nestingElement && hasNewChildren) {
+							// if before there were no children and now there are children - insert
+							this.handleNestingLevelInsertion()
 
-				if (this.shadowRoot.host.childNodes.length > 0) {
-					// on the first render - we want to move all component's children to be under descope-text
+						} else if (nestingElement && hasNewChildren) {
+							// if children existed, and they changed -
+							// we need to update (move) the new children into
+							// descope-text and remove previous children
+							nestingElement.replaceChildren(...addedNodes)
+						}
+						else if (nestingElement && !hasNewChildren && hasRemovedChildren) {
+							// 	// if children existed and now there are none -
+							// 	// we need to remove descope-text completely
+							nestingElement.remove();
+						}
+
+						setTimeout(() => {
+							isMutating = false
+						})
+					};
+
+					childObserver = getChildObserver(childObserverCallback);
+				}
+
+				handleNestingLevelInsertion() {
 					insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
 
 					forwardAttrs(
@@ -87,9 +87,17 @@ export const enforceNestingElementsStylesMixin =
 					);
 				}
 
-				getObserver().observe(this.shadowRoot.host, {
-					childList: true
-				});
-			}
+				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
+						this.handleNestingLevelInsertion()
+					}
+
+					getObserver().observe(this.shadowRoot.host, {
+						childList: true
+					});
+				}
+			};
 		};
-	};

package/src/componentsHelpers/index.js

@@ -3,13 +3,9 @@ import { kebabCaseJoin } from '../helpers';
 
 export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
-export const compose =
-	(...fns) =>
-	(val) =>
-		fns.reduceRight((res, fn) => fn(res), val);
-
 export { createStyleMixin } from './createStyleMixin';
 export { draggableMixin } from './draggableMixin';
 export { createProxy } from './createProxy';
-export { inputMixin } from './inputMixin';
+export { proxyInputMixin } from './proxyInputMixin';
 export { componentNameValidationMixin } from './componentNameValidationMixin';
+export { default as compose } from './compose'