@descope/web-components-ui 1.0.135 → 1.0.148

package/src/components/descope-passcode/PasscodeClass.js

@@ -1,121 +1,121 @@
 import {
-	createStyleMixin,
-	draggableMixin,
-	createProxy,
-	proxyInputMixin,
-	componentNameValidationMixin
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
 } from '../../mixins';
 import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal';
-import { TextFieldClass } from '../descope-text-field/TextFieldClass'
+import { TextFieldClass } from '../descope-text-field/TextFieldClass';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
-import { resetInputCursor, resetInputFieldDefaultWidth } from '../../helpers/themeHelpers/resetHelpers';
+import {
+  resetInputCursor,
+  resetInputFieldDefaultWidth,
+} from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('passcode');
 
-const observedAttributes = [
-	'digits'
-];
+const observedAttributes = ['digits'];
 
 const customMixin = (superclass) =>
-	class PasscodeMixinClass extends superclass {
-		static get observedAttributes() {
-			return observedAttributes.concat(superclass.observedAttributes || []);
-		}
-
-		constructor() {
-			super();
-		}
-
-		get digits() {
-			return Number.parseInt(this.getAttribute('digits')) || 6;
-		}
-
-		init() {
-			super.init?.();
-			const template = document.createElement('template');
-
-			template.innerHTML = `
-			<${descopeInternalComponentName} 
-				bordered="true" 
-				name="code" 
+  class PasscodeMixinClass extends superclass {
+    static get observedAttributes() {
+      return observedAttributes.concat(superclass.observedAttributes || []);
+    }
+
+    get digits() {
+      return Number.parseInt(this.getAttribute('digits'), 10) || 6;
+    }
+
+    init() {
+      super.init?.();
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+			<${descopeInternalComponentName}
+				bordered="true"
+				name="code"
 				tabindex="-1"
 				slot="input"
 			></${descopeInternalComponentName}>
 			`;
 
-			this.baseElement.appendChild(template.content.cloneNode(true));
+      this.baseElement.appendChild(template.content.cloneNode(true));
 
-			this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
+      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
 
-			forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] })
-		}
+      forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
+    }
 
-		attributeChangedCallback(attrName, oldValue, newValue) {
-			super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-			if (attrName === 'digits') {
-				this.style.setProperty('--passcode-digits-count', newValue);
-			}
-		}
-	};
+      if (attrName === 'digits') {
+        this.style.setProperty('--passcode-digits-count', newValue);
+      }
+    }
+  };
 
 const {
-	host,
-	digitField,
-	label,
-	requiredIndicator,
-	internalWrapper,
-	focusedDigitField
+  host,
+  digitField,
+  label,
+  requiredIndicator,
+  internalWrapper,
+  focusedDigitField,
+  errorMessage,
 } = {
-	host: { selector: () => ':host' },
-	focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
-	digitField: { selector: () => TextFieldClass.componentName },
-	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-	internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
-}
+  host: { selector: () => ':host' },
+  focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
+  digitField: { selector: () => TextFieldClass.componentName },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  internalWrapper: { selector: 'descope-passcode-internal .wrapper' },
+  errorMessage: { selector: '::part(error-message)' },
+};
 
-const textVars = TextFieldClass.cssVarList
+const textVars = TextFieldClass.cssVarList;
 
 export const PasscodeClass = compose(
-	createStyleMixin({
-		mappings: {
-			fontSize: [{ ...digitField, property: textVars.fontSize }, host],
-			hostWidth: { property: 'width' },
-			fontFamily: host,
-			labelTextColor: [
-				{ ...label, property: 'color' },
-				{ ...requiredIndicator, property: 'color' },
-			],
-			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
-			digitValueTextColor: {
-				selector: TextFieldClass.componentName,
-				property: textVars.inputValueTextColor
-			},
-			digitSize: [
-				{ ...digitField, property: 'height' },
-				{ ...digitField, property: 'width' }
-			],
-			digitPadding: { ...digitField, property: textVars.inputHorizontalPadding },
-			digitTextAlign: { ...digitField, property: textVars.inputTextAlign },
-			digitCaretTextColor: { ...digitField, property: textVars.inputCaretTextColor },
-			digitSpacing: { ...internalWrapper, property: 'gap' },
-			digitOutlineColor: { ...digitField, property: textVars.inputOutlineColor },
-			digitOutlineWidth: { ...digitField, property: textVars.inputOutlineWidth },
-
-			focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars.inputOutlineColor }
-		},
-	}),
-	draggableMixin,
-	proxyInputMixin,
-	componentNameValidationMixin,
-	customMixin
+  createStyleMixin({
+    mappings: {
+      fontSize: [{ ...digitField, property: textVars.fontSize }, host],
+      hostWidth: { property: 'width' },
+      fontFamily: host,
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      digitValueTextColor: {
+        selector: TextFieldClass.componentName,
+        property: textVars.inputValueTextColor,
+      },
+      digitSize: [
+        { ...digitField, property: 'height' },
+        { ...digitField, property: 'width' },
+      ],
+      digitPadding: { ...digitField, property: textVars.inputHorizontalPadding },
+      digitTextAlign: { ...digitField, property: textVars.inputTextAlign },
+      digitCaretTextColor: { ...digitField, property: textVars.inputCaretTextColor },
+      digitSpacing: { ...internalWrapper, property: 'gap' },
+      digitOutlineColor: { ...digitField, property: textVars.inputOutlineColor },
+      digitOutlineWidth: { ...digitField, property: textVars.inputOutlineWidth },
+
+      focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars.inputOutlineColor },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin,
+  componentNameValidationMixin,
+  customMixin
 )(
-	createProxy({
-		slots: [],
-		wrappedEleName: 'vaadin-text-field',
-		style: () => `
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
 			:host {
 				display: inline-flex;
 				max-width: 100%;
@@ -180,9 +180,9 @@ export const PasscodeClass = compose(
 
 			${resetInputCursor('vaadin-text-field')}
     	`,
-		excludeAttrsSync: ['tabindex'],
-		componentName
-	})
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
 );
 
 export default PasscodeClass;

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

@@ -1,36 +1,29 @@
+/* eslint-disable no-param-reassign */
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
 import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
 import { getSanitizedCharacters, focusElement } from './helpers';
 
 export const componentName = getComponentName('passcode-internal');
 
-const observedAttributes = [
-	'digits'
-]
+const observedAttributes = ['digits'];
 
-const forwardAttributes = [
-	'disabled',
-	'bordered',
-	'size',
-	'invalid',
-	'readonly'
-]
+const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' })
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass {
-	static get observedAttributes() {
-		return observedAttributes.concat(BaseInputClass.observedAttributes || []);
-	}
+  static get observedAttributes() {
+    return observedAttributes.concat(BaseInputClass.observedAttributes || []);
+  }
 
-	static get componentName() {
-		return componentName;
-	}
+  static get componentName() {
+    return componentName;
+  }
 
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.innerHTML = `
+    this.innerHTML = `
 		<div class="wrapper"></div>
 		<style>
 			.wrapper {
@@ -41,150 +34,151 @@ class PasscodeInternal extends BaseInputClass {
 		</style>
 		`;
 
-		this.wrapperEle = this.querySelector('div');
-	}
+    this.wrapperEle = this.querySelector('div');
+  }
 
-	renderInputs() {
-		const inputs = [...Array(this.digits).keys()].map((idx) => `
+  renderInputs() {
+    const inputs = [...Array(this.digits).keys()].map(
+      (idx) => `
 		<descope-text-field
 			data-id=${idx}
 			type="tel"
 			autocomplete="one-time-code"
 			inputMode="numeric"
 		></descope-text-field>
-	`)
-
-		this.wrapperEle.innerHTML = inputs.join('');
-
-		this.inputs = Array.from(this.querySelectorAll('descope-text-field'))
-
-		this.initInputs()
-	}
-
-	get digits() {
-		return Number.parseInt(this.getAttribute('digits')) || 6
-	}
-
-	get value() {
-		return this.inputs?.map(({ value }) => value).join('') || ''
-	}
-
-	set value(val) {
-		if (val === this.value) return;
-
-		const charArr = getSanitizedCharacters(val);
-
-		if (charArr.length) {
-			this.fillDigits(charArr, this.inputs[0]);
-		}
-	}
-
-	get pattern() {
-		return `^$|^\\d{${this.digits},}$`
-	}
-
-	getValidity() {
-		if (this.isRequired && !this.value) {
-			return { valueMissing: true };
-		}
-		else if (this.pattern && !new RegExp(this.pattern).test(this.value)) {
-			return { patternMismatch: true };
-		}
-		else {
-			return {}
-		}
-	};
-
-	init() {
-		// we are adding listeners before calling to super because it's stopping the events
-		this.addEventListener('focus', (e) => {
-			// we want to ignore focus events we are dispatching
-			if (e.isTrusted)
-				this.inputs[0].focus()
-		})
-
-		super.init?.();
-
-		this.renderInputs();
-	}
-
-	getInputIdx(inputEle) {
-		return Number.parseInt(inputEle.getAttribute('data-id'), 10)
-	}
-
-	getNextInput(currInput) {
-		const currentIdx = this.getInputIdx(currInput)
-		const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1)
-		return this.inputs[newIdx]
-	}
-
-	getPrevInput(currInput) {
-		const currentIdx = this.getInputIdx(currInput)
-		const newIdx = Math.max(currentIdx - 1, 0)
-		return this.inputs[newIdx]
-	}
-
-	fillDigits(charArr, currentInput) {
-		for (let i = 0; i < charArr.length; i += 1) {
-			currentInput.value = charArr[i] ?? '';
-
-			const nextInput = this.getNextInput(currentInput);
-
-			if (nextInput === currentInput) break;
-			currentInput = nextInput;
-		}
-
-		focusElement(currentInput);
-	};
-
-	initInputs() {
-		this.inputs.forEach((input) => {
-			// sanitize the input
-			input.addEventListener('input', (e) => {
-				const charArr = getSanitizedCharacters(input.value);
-
-				if (!charArr.length) {
-					// if we got an invalid value we want to clear the input
-					input.value = '';
-				}
-				else this.fillDigits(charArr, input);
-			})
-
-			// we want backspace to focus on the previous digit
-			input.onkeydown = ({ key }) => {
-				// 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
-					if (!input.selectionStart) {
-						input.setSelectionRange(1, 1);
-					}
-					setTimeout(() => {
-						focusElement(this.getPrevInput(input));
-					});
-				} else if (key.length === 1) { // we want only characters and not command keys
-					input.value = ''; // we are clearing the previous value so we can override it with the new value
-				}
-			};
-
-			forwardAttrs(this, input, { includeAttrs: forwardAttributes })
-		})
-
-		this.handleFocusEventsDispatching(this.inputs);
-		this.handleInputEventDispatching();
-	}
-
-	attributeChangedCallback(attrName, oldValue, newValue) {
-		super.attributeChangedCallback?.(attrName, oldValue, newValue)
-
-		// sync attributes to inputs
-		if (oldValue !== newValue) {
-			if (observedAttributes.includes(attrName)) {
-				if (attrName === 'digits') {
-					this.renderInputs();
-				}
-			}
-		}
-	}
+	`
+    );
+
+    this.wrapperEle.innerHTML = inputs.join('');
+
+    this.inputs = Array.from(this.querySelectorAll('descope-text-field'));
+
+    this.initInputs();
+  }
+
+  get digits() {
+    return Number.parseInt(this.getAttribute('digits'), 10) || 6;
+  }
+
+  get value() {
+    return this.inputs?.map(({ value }) => value).join('') || '';
+  }
+
+  set value(val) {
+    if (val === this.value) return;
+
+    const charArr = getSanitizedCharacters(val);
+
+    if (charArr.length) {
+      this.fillDigits(charArr, this.inputs[0]);
+    }
+  }
+
+  get pattern() {
+    return `^$|^\\d{${this.digits},}$`;
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+    if (this.pattern && !new RegExp(this.pattern).test(this.value)) {
+      return { patternMismatch: true };
+    }
+
+    return {};
+  }
+
+  init() {
+    // we are adding listeners before calling to super because it's stopping the events
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) this.inputs[0].focus();
+    });
+
+    super.init?.();
+
+    this.renderInputs();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  getInputIdx(inputEle) {
+    return Number.parseInt(inputEle.getAttribute('data-id'), 10);
+  }
+
+  getNextInput(currInput) {
+    const currentIdx = this.getInputIdx(currInput);
+    const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1);
+    return this.inputs[newIdx];
+  }
+
+  getPrevInput(currInput) {
+    const currentIdx = this.getInputIdx(currInput);
+    const newIdx = Math.max(currentIdx - 1, 0);
+    return this.inputs[newIdx];
+  }
+
+  fillDigits(charArr, currentInput) {
+    for (let i = 0; i < charArr.length; i += 1) {
+      currentInput.value = charArr[i] ?? '';
+
+      const nextInput = this.getNextInput(currentInput);
+
+      if (nextInput === currentInput) break;
+      currentInput = nextInput;
+    }
+
+    focusElement(currentInput);
+  }
+
+  initInputs() {
+    this.inputs.forEach((input) => {
+      // sanitize the input
+      input.addEventListener('input', (_) => {
+        const charArr = getSanitizedCharacters(input.value);
+
+        if (!charArr.length) {
+          // if we got an invalid value we want to clear the input
+          input.value = '';
+        } else this.fillDigits(charArr, input);
+      });
+
+      // we want backspace to focus on the previous digit
+      input.onkeydown = ({ key }) => {
+        // 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
+          if (!input.selectionStart) {
+            input.setSelectionRange(1, 1);
+          }
+          setTimeout(() => {
+            focusElement(this.getPrevInput(input));
+          });
+        } else if (key.length === 1) {
+          // we want only characters and not command keys
+          input.value = ''; // we are clearing the previous value so we can override it with the new value
+        }
+      };
+
+      forwardAttrs(this, input, { includeAttrs: forwardAttributes });
+    });
+
+    this.handleFocusEventsDispatching(this.inputs);
+    this.handleInputEventDispatching();
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    // sync attributes to inputs
+    if (oldValue !== newValue) {
+      if (observedAttributes.includes(attrName)) {
+        if (attrName === 'digits') {
+          this.renderInputs();
+        }
+      }
+    }
+  }
 }
 
 export default PasscodeInternal;

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

@@ -1,14 +1,13 @@
-
 export const focusElement = (ele) => {
-	ele?.focus();
-	ele?.setSelectionRange(1, 1);
+  ele?.focus();
+  ele?.setSelectionRange(1, 1);
 };
 
 export const getSanitizedCharacters = (str) => {
-	const pin = str.replace(/\s/g, ''); // sanitize string
+  const pin = str.replace(/\s/g, ''); // sanitize string
 
-	// accept only numbers
-	if (!pin.match(/^\d+$/)) return [];
+  // accept only numbers
+  if (!pin.match(/^\d+$/)) return [];
 
-	return [...pin]; // creating array of chars
-};
+  return [...pin]; // creating array of chars
+};

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

@@ -1,3 +1,3 @@
-import PasscodeInternal, { componentName } from "./PasscodeInternal"
+import PasscodeInternal, { componentName } from './PasscodeInternal';
 
-customElements.define(componentName, PasscodeInternal)
+customElements.define(componentName, PasscodeInternal);

package/src/components/descope-passcode/index.js

@@ -1,6 +1,6 @@
 import { componentName, PasscodeClass } from './PasscodeClass';
-import '../descope-text-field'
-import './descope-passcode-internal'
+import '../descope-text-field';
+import './descope-passcode-internal';
 
 customElements.define(componentName, PasscodeClass);