@descope/web-components-ui 1.0.59 → 1.0.61

package/dist/index.esm.js

@@ -342,12 +342,29 @@ const forwardAttrs = (source, dest, options = {}) => {
 	);
 };
 
+const forwardProps = (src, target, props = []) => {
+	if(!props.length) return;
+
+	const config = props.reduce((acc, prop) => Object.assign(acc, {[prop] : {
+		get () {
+			return target[prop]
+		},
+		set (v) {
+			target[prop] = v;
+		}
+	}}), {});
+
+	Object.defineProperties(src, config);
+};
+
 const createProxy = ({
 	componentName,
 	wrappedEleName,
 	slots = [],
 	style,
-	excludeAttrsSync = []
+	excludeAttrsSync = [],
+	includeAttrsSync = [],
+	includeForwardProps = []
 }) => {
 	const template = `
 		<style id="create-proxy"></style>
@@ -373,6 +390,10 @@ const createProxy = ({
 		connectedCallback() {
 			if (this.shadowRoot.isConnected) {
 				this.proxyElement = this.shadowRoot.querySelector(wrappedEleName);
+
+				// this is needed for components that uses props, such as combo box
+				forwardProps(this.hostElement, this.proxyElement, includeForwardProps);
+
 				this.setAttribute('tabindex', '0');
 
 				// we want to focus on the proxy element when focusing our WC
@@ -397,7 +418,8 @@ const createProxy = ({
 					this.proxyElement.addEventListener(...args);
 
 				syncAttrs(this.proxyElement, this.hostElement, {
-					excludeAttrs: excludeAttrsSync
+					excludeAttrs: excludeAttrsSync,
+					includeAttrs: includeAttrsSync
 				});
 			}
 		}
@@ -1475,7 +1497,9 @@ class PasscodeInternal extends HTMLElement {
 		return [
 			'disabled',
 			'bordered',
-			'size'
+			'size',
+			'required',
+			'pattern'
 		];
 	}
 
@@ -1669,9 +1693,15 @@ class PasscodeInternal extends HTMLElement {
 		oldValue,
 		newValue
 	) {
-		if (oldValue !== newValue &&
-			PasscodeInternal.observedAttributes.includes(attrName)) {
-			this.inputs.forEach((input) => input.setAttribute(attrName, newValue));
+		const validationRelatedAttributes = ['required', 'pattern'];
+
+		if (oldValue !== newValue) {
+			if (validationRelatedAttributes.includes(attrName)) {
+				this.setValidity();
+			}
+			else if (PasscodeInternal.observedAttributes.includes(attrName)) {
+				this.inputs.forEach((input) => input.setAttribute(attrName, newValue));
+			}
 		}
 	}
 }
@@ -1692,15 +1722,12 @@ const customMixin = (superclass) =>
 			super.connectedCallback?.();
 			const template = document.createElement('template');
 
-			//forward required & pattern TODO use forwardAttrs
 			template.innerHTML = `
       <${componentName$4} 
         bordered="true" 
         name="code" 
         tabindex="0"
         slot="input"
-        required="${this.shadowRoot.host.getAttribute('required')}"
-        pattern="${this.shadowRoot.host.getAttribute('pattern')}"
       ></${componentName$4}>
       `;
 
@@ -1714,11 +1741,13 @@ const customMixin = (superclass) =>
 
 			// we want to control when the element is out of focus
 			// so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
-			this.proxyElement._setFocused = () => {};
+			this.proxyElement._setFocused = () => { };
 
 			this.shadowRoot.host.appendChild(template.content.cloneNode(true));
 			this.inputElement = this.querySelector(componentName$4);
 
+			forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] });
+
 			// we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
 			this.inputElement.addEventListener('blur', () => {
 				this.proxyElement.validate();