@descope/web-components-ui 1.0.74 → 1.0.76

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

@@ -1,11 +1,15 @@
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
-import { getComponentName } from '../../../helpers/componentHelpers';
+import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
 import { createDispatchEvent } from '../../../helpers/mixinsHelpers';
 import { getSanitizedCharacters, focusElement } from './helpers';
 
 export const componentName = getComponentName('passcode-internal');
 
 const observedAttributes = [
+	'digits'
+]
+
+const forwardAttributes = [
 	'disabled',
 	'bordered',
 	'size',
@@ -29,22 +33,35 @@ class PasscodeInternal extends BaseInputClass {
 
 	constructor() {
 		super();
+
+		this.innerHTML = `
+		<div class="wrapper"></div>
+		<style>
+			.wrapper {
+				display: flex;
+				width: 100%;
+				justify-content: space-between;
+			}
+		</style>
+		`;
+
+		this.wrapperEle = this.querySelector('div');
+	}
+
+	renderInputs() {
 		const inputs = [...Array(this.digits).keys()].map((idx) => `
 		<descope-text-field
-			st-width="35px"
 			data-id=${idx}
 			type="tel"
 			autocomplete="off"
 		></descope-text-field>
 	`)
 
-		this.innerHTML = `
-		<div>
-			${inputs.join('')}
-		</div>
-		`;
+		this.wrapperEle.innerHTML = inputs.join('');
 
 		this.inputs = Array.from(this.querySelectorAll('descope-text-field'))
+
+		this.initInputs()
 	}
 
 	get digits() {
@@ -52,7 +69,7 @@ class PasscodeInternal extends BaseInputClass {
 	}
 
 	get value() {
-		return this.inputs.map(({ value }) => value).join('')
+		return this.inputs?.map(({ value }) => value).join('') || ''
 	}
 
 	set value(val) {
@@ -91,7 +108,8 @@ class PasscodeInternal extends BaseInputClass {
 
 		super.init?.();
 
-		this.initInputs()
+		this.renderInputs()
+
 	}
 
 	getInputIdx(inputEle) {
@@ -180,6 +198,8 @@ class PasscodeInternal extends BaseInputClass {
 					input.value = ''; // we are clearing the previous value so we can override it with the new value
 				}
 			};
+
+			forwardAttrs(this, input, { includeAttrs: forwardAttributes })
 		})
 	}
 
@@ -189,11 +209,9 @@ class PasscodeInternal extends BaseInputClass {
 		// sync attributes to inputs
 		if (oldValue !== newValue) {
 			if (observedAttributes.includes(attrName)) {
-				this.inputs.forEach(
-					(input) => newValue === null ?
-						input.removeAttribute(attrName) :
-						input.setAttribute(attrName, newValue)
-				)
+				if (attrName === 'digits') {
+					this.renderInputs();
+				}
 			}
 		}
 	}