@descope/web-components-ui 1.0.64 → 1.0.65

package/dist/index.esm.js

@@ -256,12 +256,6 @@ const createStyleMixin =
 
 				constructor() {
 					super();
-
-					this.classList.add(superclass.componentName);
-
-					this.#createComponentStyle();
-					this.#createComponentTheme();
-					this.#createAttrOverrideStyle();
 				}
 
 				get componentTheme() {
@@ -290,7 +284,7 @@ const createStyleMixin =
 				}
 
 				#updateAttrOverrideStyle(attrName, value) {
-					const style = this.#overrideStyleEle.sheet?.cssRules[0].style;
+					const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
 					const varName = getCssVarName(
 						superclass.componentName,
 						attrName.replace(/^st-/, '')
@@ -322,6 +316,12 @@ const createStyleMixin =
 				connectedCallback() {
 					super.connectedCallback?.();
 					if (this.shadowRoot.isConnected) {
+						this.classList.add(superclass.componentName);
+
+						this.#createComponentStyle();
+						this.#createComponentTheme();
+						this.#createAttrOverrideStyle();
+
 						Array.from(this.attributes).forEach((attr) => {
 							if (styleAttributes.includes(attr.nodeName)) {
 								this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
@@ -544,7 +544,13 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
     }
   }
 
+  get isReadOnly() {
+    return this.getAttribute('readonly') !== 'false'
+  }
+
   setValidity() {
+    if (this.isReadOnly) return;
+
     const validity = this.getValidity();
     this.#internals.setValidity(validity, this.getErrorMessage(validity));
   }
@@ -570,8 +576,8 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
   }
 
   setCustomValidity(errorMessage) {
-    if(errorMessage){
-      this.#internals.setValidity({customError: true}, errorMessage);
+    if (errorMessage) {
+      this.#internals.setValidity({ customError: true }, errorMessage);
     } else {
       this.#internals.setValidity({});
       this.setValidity();
@@ -624,9 +630,9 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
     }
   }
 
-  handleDispatchValidationEvents(){
-    if(this.checkValidity()) {
-      this.dispatchValid(); 
+  handleDispatchValidationEvents() {
+    if (this.checkValidity()) {
+      this.dispatchValid();
     } else {
       this.dispatchInvalid();
     }
@@ -689,28 +695,6 @@ const proxyInputMixin = (superclass) =>
 
 			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() {
@@ -766,6 +750,29 @@ const proxyInputMixin = (superclass) =>
 		connectedCallback() {
 			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
 
+			// 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');
+			});
+
 			super.connectedCallback?.();
 
 			this.inputElement.addEventListener('input', () => {
@@ -1615,7 +1622,8 @@ class PasscodeInternal extends BaseInputClass {
 			...BaseInputClass.observedAttributes,
 			'disabled',
 			'bordered',
-			'size'
+			'size',
+			'readonly'
 		];
 	}
 
@@ -1658,7 +1666,7 @@ class PasscodeInternal extends BaseInputClass {
 	}
 
 	set value(val) {
-		if(val === this.value) return;
+		if (val === this.value) return;
 
 		const charArr = getSanitizedCharacters(val);
 
@@ -1701,6 +1709,7 @@ class PasscodeInternal extends BaseInputClass {
 
 	async connectedCallback() {
 		super.connectedCallback();
+
 		this.initInputs();
 
 		this.addEventListener('invalid', this.handleInputsInvalid);
@@ -1745,7 +1754,8 @@ class PasscodeInternal extends BaseInputClass {
 			// 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', () => {
+			input.addEventListener('blur', (e) => {
+				e.stopPropagation();
 				const timerId = setTimeout(() => {
 					this.dispatchBlur();
 				});
@@ -1755,7 +1765,8 @@ class PasscodeInternal extends BaseInputClass {
 				);
 			});
 
-			input.oninput = () => {
+			input.oninput = (e) => {
+				e.stopPropagation();
 				const charArr = getSanitizedCharacters(input.value);
 
 				if (!charArr.length) input.value = ''; // if we got an invalid value we want to clear the input
@@ -1774,7 +1785,7 @@ class PasscodeInternal extends BaseInputClass {
 					!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
@@ -1934,6 +1945,7 @@ const Passcode = compose(
       --vaadin-field-default-width: auto;
 			display: inline-block;
     }
+
     descope-passcode-internal {
       -webkit-mask-image: none;
       display: flex;