@descope/web-components-ui 1.0.58 → 1.0.60

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();
@@ -2156,99 +2185,6 @@ const genColors = (colors) => {
 	}, {});
 };
 
-const globalRefs$7 = getThemeRefs(globals);
-const vars$c = Button.cssVarList;
-
-const mode = {
-	primary: globalRefs$7.colors.primary,
-	secondary: globalRefs$7.colors.secondary,
-	success: globalRefs$7.colors.success,
-	error: globalRefs$7.colors.error,
-	surface: globalRefs$7.colors.surface
-};
-
-const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$i);
-
-const button = {
-	...helperTheme$1,
-
-	size: {
-		xs: {
-			[vars$c.height]: '10px',
-			[vars$c.fontSize]: '10px',
-			[vars$c.padding]: `0 ${globalRefs$7.spacing.xs}`
-		},
-		sm: {
-			[vars$c.height]: '20px',
-			[vars$c.fontSize]: '10px',
-			[vars$c.padding]: `0 ${globalRefs$7.spacing.sm}`
-		},
-		md: {
-			[vars$c.height]: '30px',
-			[vars$c.fontSize]: '14px',
-			[vars$c.padding]: `0 ${globalRefs$7.spacing.md}`
-		},
-		lg: {
-			[vars$c.height]: '40px',
-			[vars$c.fontSize]: '20px',
-			[vars$c.padding]: `0 ${globalRefs$7.spacing.lg}`
-		},
-		xl: {
-			[vars$c.height]: '50px',
-			[vars$c.fontSize]: '25px',
-			[vars$c.padding]: `0 ${globalRefs$7.spacing.xl}`
-		}
-	},
-
-	[vars$c.borderRadius]: globalRefs$7.radius.lg,
-	[vars$c.cursor]: 'pointer',
-	[vars$c.borderWidth]: '2px',
-	[vars$c.borderStyle]: 'solid',
-	[vars$c.borderColor]: 'transparent',
-
-	_fullWidth: {
-		[vars$c.width]: '100%'
-	},
-	_loading: {
-		[vars$c.cursor]: 'wait'
-	},
-
-	variant: {
-		contained: {
-			[vars$c.color]: helperRefs$1.contrast,
-			[vars$c.backgroundColor]: helperRefs$1.main,
-			_hover: {
-				[vars$c.backgroundColor]: helperRefs$1.dark
-			},
-			_loading: {
-				[vars$c.backgroundColor]: helperRefs$1.main
-			}
-		},
-		outline: {
-			[vars$c.color]: helperRefs$1.main,
-			[vars$c.borderColor]: helperRefs$1.main,
-			_hover: {
-				[vars$c.color]: helperRefs$1.dark,
-				[vars$c.borderColor]: helperRefs$1.dark,
-				_error: {
-					[vars$c.color]: helperRefs$1.error
-				}
-			}
-		},
-		link: {
-			[vars$c.color]: helperRefs$1.main,
-			[vars$c.padding]: 0,
-			[vars$c.margin]: 0,
-			[vars$c.lineHeight]: helperRefs$1.height,
-			[vars$c.borderRadius]: 0,
-			_hover: {
-				[vars$c.color]: helperRefs$1.main,
-				[vars$c.textDecoration]: 'underline'
-			}
-		}
-	}
-};
-
 const colors = genColors({
 	surface: {
 		main: 'lightgray',
@@ -2352,6 +2288,99 @@ var globals = {
 	fonts
 };
 
+const globalRefs$7 = getThemeRefs(globals);
+const vars$c = Button.cssVarList;
+
+const mode = {
+	primary: globalRefs$7.colors.primary,
+	secondary: globalRefs$7.colors.secondary,
+	success: globalRefs$7.colors.success,
+	error: globalRefs$7.colors.error,
+	surface: globalRefs$7.colors.surface
+};
+
+const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$i);
+
+const button = {
+	...helperTheme$1,
+
+	size: {
+		xs: {
+			[vars$c.height]: '10px',
+			[vars$c.fontSize]: '10px',
+			[vars$c.padding]: `0 ${globalRefs$7.spacing.xs}`
+		},
+		sm: {
+			[vars$c.height]: '20px',
+			[vars$c.fontSize]: '10px',
+			[vars$c.padding]: `0 ${globalRefs$7.spacing.sm}`
+		},
+		md: {
+			[vars$c.height]: '30px',
+			[vars$c.fontSize]: '14px',
+			[vars$c.padding]: `0 ${globalRefs$7.spacing.md}`
+		},
+		lg: {
+			[vars$c.height]: '40px',
+			[vars$c.fontSize]: '20px',
+			[vars$c.padding]: `0 ${globalRefs$7.spacing.lg}`
+		},
+		xl: {
+			[vars$c.height]: '50px',
+			[vars$c.fontSize]: '25px',
+			[vars$c.padding]: `0 ${globalRefs$7.spacing.xl}`
+		}
+	},
+
+	[vars$c.borderRadius]: globalRefs$7.radius.lg,
+	[vars$c.cursor]: 'pointer',
+	[vars$c.borderWidth]: '2px',
+	[vars$c.borderStyle]: 'solid',
+	[vars$c.borderColor]: 'transparent',
+
+	_fullWidth: {
+		[vars$c.width]: '100%'
+	},
+	_loading: {
+		[vars$c.cursor]: 'wait'
+	},
+
+	variant: {
+		contained: {
+			[vars$c.color]: helperRefs$1.contrast,
+			[vars$c.backgroundColor]: helperRefs$1.main,
+			_hover: {
+				[vars$c.backgroundColor]: helperRefs$1.dark
+			},
+			_loading: {
+				[vars$c.backgroundColor]: helperRefs$1.main
+			}
+		},
+		outline: {
+			[vars$c.color]: helperRefs$1.main,
+			[vars$c.borderColor]: helperRefs$1.main,
+			_hover: {
+				[vars$c.color]: helperRefs$1.dark,
+				[vars$c.borderColor]: helperRefs$1.dark,
+				_error: {
+					[vars$c.color]: helperRefs$1.error
+				}
+			}
+		},
+		link: {
+			[vars$c.color]: helperRefs$1.main,
+			[vars$c.padding]: 0,
+			[vars$c.margin]: 0,
+			[vars$c.lineHeight]: helperRefs$1.height,
+			[vars$c.borderRadius]: 0,
+			_hover: {
+				[vars$c.color]: helperRefs$1.main,
+				[vars$c.textDecoration]: 'underline'
+			}
+		}
+	}
+};
+
 const globalRefs$6 = getThemeRefs(globals);
 
 const vars$b = TextField.cssVarList;