@descope/web-components-ui 1.0.76 → 1.0.78

package/dist/index.esm.js

@@ -421,6 +421,65 @@ const draggableMixin = (superclass) =>
 		}
 	};
 
+const componentNameValidationMixin = (superclass) =>
+	class ComponentNameValidationMixinClass extends superclass {
+		#checkComponentName() {
+			const currentComponentName = this.localName;
+
+			if (!superclass.componentName) {
+				throw Error(
+					`component name is not defined on super class, make sure you have a static get for "componentName"`
+				);
+			}
+
+			if (currentComponentName !== superclass.componentName) {
+				throw Error(
+					`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
+				);
+			}
+		}
+
+		init() {
+			super.init?.();
+			this.#checkComponentName();
+		}
+	};
+
+const hoverableMixin = (superclass) =>
+	class HoverableMixinClass extends superclass {
+		init() {
+			super.init?.();
+
+			this.baseElement.addEventListener('mouseover', (e) => {
+				this.setAttribute('hover', 'true');
+				e.target.addEventListener(
+					'mouseleave',
+					() => this.removeAttribute('hover'),
+					{ once: true }
+				);
+			});
+		}
+	};
+
+// we want all the valueless attributes to have "true" value
+// and all the falsy attribute to be removed
+const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
+  init() {
+    super.init?.();
+
+    observeAttributes(this, (attrs) =>
+      attrs.forEach(attr => {
+        const attrVal = this.getAttribute(attr);
+
+        if (attrVal === '') {
+          this.setAttribute(attr, 'true');
+        } else if (attrVal === 'false') {
+          this.removeAttribute(attr);
+        }
+      }), {});
+  }
+};
+
 const createBaseClass = ({ componentName, baseSelector = '' }) => {
   class DescopeBaseClass extends HTMLElement {
     static get componentName() {
@@ -757,13 +816,14 @@ const proxyInputMixin = (superclass) =>
 
 		reportValidityOnInternalInput() {
 			setTimeout(() => {
+				this.inputElement.focus();
 				this.inputElement.reportValidity();
 			});
 		}
 
 		// we want reportValidity to behave like form submission
 		reportValidity() {
-			if (!isValid) {
+			if (!this.checkValidity()) {
 				this.setAttribute('invalid', 'true');
 				this.reportValidityOnInternalInput();
 			}
@@ -811,9 +871,10 @@ const proxyInputMixin = (superclass) =>
 			});
 
 			this.addEventListener('focus', (e) => {
-				// when clicking on the form submit button and the input is invalid
-				// we want it to appear as invalid
-				if (e.relatedTarget?.form === this.form) {
+				// when clicking on the form submit button and the input is invalid, we want it to appear as invalid
+				// this is a best effort, we cannot identify it for sure without listening to the form submission event
+				// this will also be triggered when the focus is moving from the submit button to the input by pressing TAB key
+				if (e.relatedTarget?.form && e.relatedTarget?.form === this.form && e.relatedTarget?.nodeName === 'BUTTON') {
 					if (!this.checkValidity()) {
 						this.setAttribute('invalid', 'true');
 					}
@@ -841,46 +902,6 @@ const proxyInputMixin = (superclass) =>
 		}
 	};
 
-const componentNameValidationMixin = (superclass) =>
-	class ComponentNameValidationMixinClass extends superclass {
-		#checkComponentName() {
-			const currentComponentName = this.localName;
-
-			if (!superclass.componentName) {
-				throw Error(
-					`component name is not defined on super class, make sure you have a static get for "componentName"`
-				);
-			}
-
-			if (currentComponentName !== superclass.componentName) {
-				throw Error(
-					`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
-				);
-			}
-		}
-
-		init() {
-			super.init?.();
-			this.#checkComponentName();
-		}
-	};
-
-const hoverableMixin = (superclass) =>
-	class HoverableMixinClass extends superclass {
-		init() {
-			super.init?.();
-
-			this.baseElement.addEventListener('mouseover', (e) => {
-				this.setAttribute('hover', 'true');
-				e.target.addEventListener(
-					'mouseleave',
-					() => this.removeAttribute('hover'),
-					{ once: true }
-				);
-			});
-		}
-	};
-
 const focusMixin = (superclass) => class FocusMixinClass extends superclass {
   // we want to block all native events, 
   // so the input can control when to dispatch it based on its internal behavior
@@ -991,25 +1012,6 @@ const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
   }
 };
 
-// we want all the valueless attributes to have "true" value
-// and all the falsy attribute to be removed
-const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
-  init() {
-    super.init?.();
-
-    observeAttributes(this, (attrs) =>
-      attrs.forEach(attr => {
-        const attrVal = this.getAttribute(attr);
-
-        if (attrVal === '') {
-          this.setAttribute(attr, 'true');
-        } else if (attrVal === 'false') {
-          this.removeAttribute(attr);
-        }
-      }), {});
-  }
-};
-
 const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclass {
   get isReadOnly() {
     return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
@@ -1029,6 +1031,59 @@ const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclas
   }
 };
 
+const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
+  handleFocusEventsDispatching(focusableElements = []) {
+    let blurTimerId;
+
+    // in order to simulate blur on the input
+    // we are checking if focus on one of the other elements happened immediately after blur
+    // if not, the component is no longer focused and we should dispatch blur
+    focusableElements.forEach(ele => {
+      ele?.addEventListener('blur', (e) => {
+        e.stopImmediatePropagation();
+        blurTimerId = setTimeout(() => {
+          blurTimerId = null;
+          createDispatchEvent.call(this, 'blur');
+          createDispatchEvent.call(this, 'focusout', { bubbles: true });
+        });
+      });
+
+      // in order to simulate focus on the input
+      // we are holding a blur timer id and clearing it on blur
+      // if there is a timer id, it means that there was no blur on the input, so it's still focused
+      // otherwise, it was not focused before, and we need to dispatch a focus event
+      ele?.addEventListener('focus', (e) => {
+        e.stopImmediatePropagation();
+        clearTimeout(blurTimerId);
+        if (!blurTimerId) {
+          createDispatchEvent.call(this, 'focus');
+          createDispatchEvent.call(this, 'focusin', { bubbles: true });
+        }
+      });
+    });
+  }
+
+  // we want to block the input events from propagating in case the value of the root input wasn't change
+  // this can happen if we are sanitizing characters on the internal inputs and do not want it to affect the root input element value
+  // in this case, on each input event, we are comparing the root input value to the previous one, and only if it does not match, we are allowing the input event to propagate
+  handleInputEventDispatching(inputElements) {
+    let previousRootComponentValue = this.value;
+
+    inputElements.forEach(input => {
+      input.addEventListener('input', (e) => {
+        // we are comparing the previous value to the new one,
+        // and if they have the same value, we are blocking the input event
+        if (previousRootComponentValue === this.value) {
+          e.stopImmediatePropagation();
+        } else {
+          previousRootComponentValue = this.value;
+        }
+      });
+    });
+
+  }
+};
+
 const componentName$l = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
@@ -1757,7 +1812,9 @@ const createBaseInputClass = (...args) => compose(
   focusMixin,
   inputValidationMixin,
   changeMixin,
-  readOnlyMixin
+  readOnlyMixin,
+  normalizeBooleanAttributesMixin,
+  inputEventsDispatchingMixin
 )(createBaseClass(...args));
 
 const focusElement = (ele) => {
@@ -1913,31 +1970,8 @@ class PasscodeInternal extends BaseInputClass$1 {
 	};
 
 	initInputs() {
-		let prevVal = this.value;
-		let blurTimerId;
-
 		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', (e) => {
-				e.stopImmediatePropagation();
-
-				blurTimerId = setTimeout(() => {
-					blurTimerId = null;
-					this.#dispatchBlur();
-				});
-			});
-
-			input.addEventListener('focus', (e) => {
-				e.stopImmediatePropagation();
-
-				clearTimeout(blurTimerId);
-				if (!blurTimerId) {
-					this.#dispatchFocus();
-				}
-			});
-
+			// sanitize the input
 			input.addEventListener('input', (e) => {
 				const charArr = getSanitizedCharacters(input.value);
 
@@ -1946,16 +1980,10 @@ class PasscodeInternal extends BaseInputClass$1 {
 					input.value = '';
 				}
 				else this.fillDigits(charArr, input);
-
-				// we want to stop input events if the value wasn't change
-				if (prevVal === this.value) {
-					e.stopImmediatePropagation();
-				}
 			});
 
+			// we want backspace to focus on the previous digit
 			input.onkeydown = ({ key }) => {
-				prevVal = this.value;
-
 				// when user deletes a digit, we want to focus the previous digit
 				if (key === 'Backspace') {
 					// if the cursor is at 0, we want to move it to 1, so the value will be deleted
@@ -1972,6 +2000,9 @@ class PasscodeInternal extends BaseInputClass$1 {
 
 			forwardAttrs(this, input, { includeAttrs: forwardAttributes });
 		});
+
+		this.handleFocusEventsDispatching(this.inputs);
+		this.handleInputEventDispatching(this.inputs);
 	}
 
 	attributeChangedCallback(attrName, oldValue, newValue) {
@@ -2536,8 +2567,8 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
 		overlay._enterModalState = function () { };
 	}
 
-	connectedCallback() {
-		super.connectedCallback?.();
+	init() {
+		super.init?.();
 
 		this.#overrideOverlaySettings();
 		observeChildren(this, this.#onChildrenChange.bind(this));
@@ -3905,9 +3936,6 @@ class PhoneFieldInternal extends BaseInputClass {
 		);
 	}
 
-	#dispatchBlur = createDispatchEvent.bind(this, 'blur');
-	#dispatchFocus = createDispatchEvent.bind(this, 'focus');
-
 	constructor() {
 		super();
 
@@ -3972,6 +4000,13 @@ class PhoneFieldInternal extends BaseInputClass {
 	};
 
 	init() {
+
+		this.addEventListener('focus', (e) => {
+			// we want to ignore focus events we are dispatching
+			if (e.isTrusted)
+				this.inputs[0].focus();
+		});
+
 		super.init();
 		this.initInputs();
 		this.setComboBoxDescriptor();
@@ -4022,9 +4057,6 @@ class PhoneFieldInternal extends BaseInputClass {
 	}
 
 	initInputs() {
-		let prevVal = this.value;
-		let blurTimerId;
-
 		// Sanitize phone input value to filter everything but digits
 		this.phoneNumberInput.addEventListener('input', (e) => {
 			const telDigitsRegExp = /^\d$/;
@@ -4035,29 +4067,8 @@ class PhoneFieldInternal extends BaseInputClass {
 			e.target.value = sanitizedInput;
 		});
 
-		this.inputs.forEach(input => {
-			input.addEventListener('blur', (e) => {
-				e.stopImmediatePropagation();
-				blurTimerId = setTimeout(() => {
-					blurTimerId = null;
-					this.#dispatchBlur();
-				});
-			});
-
-			input.addEventListener('focus', (e) => {
-				e.stopImmediatePropagation();
-				clearTimeout(blurTimerId);
-				if (!blurTimerId) {
-					this.#dispatchFocus();
-				}
-			});
-
-			input.addEventListener('input', (e) => {
-				if (prevVal === this.value) {
-					e.stopImmediatePropagation();
-				}
-			});
-		});
+		this.handleFocusEventsDispatching(this.inputs);
+		this.handleInputEventDispatching(this.inputs);
 	}
 
 	attributeChangedCallback(attrName, oldValue, newValue) {
@@ -4251,13 +4262,6 @@ const PhoneField = compose(
 	})
 );
 
-/*
-Bugs:
-- default code value, open the dropdown and click outside, the value is gone
-- make invalid by blur, enter a 6 digit number, component is valid but the divider is red
-- missing handling of outline when focused, hiding the divider when focusing the phone
-*/
-
 customElements.define(componentName, PhoneField);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);