@descope/web-components-ui 1.0.135 → 1.0.148

package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js

@@ -3,22 +3,22 @@ import { observeAttributes } from '../../../helpers/componentHelpers';
 import { NewPasswordClass } from '../NewPasswordClass';
 import { componentName } from './componentName';
 
-const passwordAttrPrefixRegex = /^password-/
-const confirmAttrPrefixRegex = /^confirm-/
+const passwordAttrPrefixRegex = /^password-/;
+const confirmAttrPrefixRegex = /^confirm-/;
 
-const removeAttrPrefix = (attr, prefix) => attr.replace(prefix, '')
+const removeAttrPrefix = (attr, prefix) => attr.replace(prefix, '');
 
 const passwordInputAttrs = ['password-label', 'password-placeholder'];
 const confirmInputAttrs = ['confirm-label', 'confirm-placeholder'];
 const commonAttrs = [
-	'disabled',
-	'bordered',
-	'size',
-	'full-width',
-	'maxlength',
-	'invalid',
-	'readonly',
-	'draggable'
+  'disabled',
+  'bordered',
+  'size',
+  'full-width',
+  'maxlength',
+  'invalid',
+  'readonly',
+  'draggable',
 ];
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
@@ -26,166 +26,161 @@ const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInpu
 const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass {
-	static get observedAttributes() {
-		return ['has-confirm'].concat(
-			BaseInputClass.observedAttributes || [],
-			inputRelatedAttrs,
-		);
-	}
+  static get observedAttributes() {
+    return ['has-confirm'].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);
+  }
 
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.innerHTML = `
+    this.innerHTML = `
 			<div class="wrapper"></div>
 		`;
 
-		this.wrapperEle = this.querySelector('.wrapper')
-	}
-
-	get value() {
-		return this.passwordInput?.value || '';
-	}
-
-	set value(val) {
-		if (val === this.value) return;
-		this.value = val;
-	}
-
-	get hasConfirm() {
-		return this.getAttribute('has-confirm') === 'true';
-	}
-
-	getValidity() {
-		if (this.isRequired && !this.value) {
-			return { valueMissing: true };
-		}
-		if (this.hasConfirm && this.confirmInput && this.value !== this.confirmInput.value) {
-			return { patternMismatch: true };
-		}
-
-		const min = this.getAttribute('minlength');
-		const minVal = parseInt(min, 10) || 0;
-		const minValid = this.value.length >= minVal;
-		if (!minValid) {
-			return { tooShort: true }
-		}
-
-		return {}
-	};
-
-	init() {
-		this.addEventListener('focus', (e) => {
-			// we want to ignore focus events we are dispatching
-			if (e.isTrusted) {
-				this.passwordInput.focus()
-			}
-		});
-
-		super.init?.();
-		this.renderInputs(this.hasConfirm);
-	}
-
-	renderInputs(shouldRenderConfirm) {
-		let template = `<descope-password data-id="password"></descope-password>`;
-
-		if (shouldRenderConfirm) {
-			template += `<descope-password data-id="confirm"></descope-password>`
-		}
-
-		this.wrapperEle.innerHTML = template;
-
-		this.passwordInput = this.querySelector('[data-id="password"]');
-		this.confirmInput = this.querySelector('[data-id="confirm"]');
-
-		this.inputs = [this.passwordInput, this.confirmInput];
-
-		this.initInputs();
-
-		// we are calling attributeChangedCallback with all the input related attributes
-		// in order to set it on the newly generated input
-		[...passwordInputAttrs, ...confirmInputAttrs, ...commonAttrs].forEach(attr => {
-			this.attributeChangedCallback(attr, null, this.getAttribute(attr))
-		})
-	}
-
-	// the inputs are not required but we still want it to have a required
-	// indicator in case the root component is required
-	handleIndicatorStyle() {
-		for (const input of this.inputs) {
-			const styleTag = document.createElement('style');
-			styleTag.innerHTML = `
+    this.wrapperEle = this.querySelector('.wrapper');
+  }
+
+  get value() {
+    return this.passwordInput?.value || '';
+  }
+
+  set value(val) {
+    if (val === this.value) return;
+    this.value = val;
+  }
+
+  get hasConfirm() {
+    return this.getAttribute('has-confirm') === 'true';
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+    if (this.hasConfirm && this.confirmInput && this.value !== this.confirmInput.value) {
+      return { patternMismatch: true };
+    }
+
+    const min = this.getAttribute('minlength');
+    const minVal = parseInt(min, 10) || 0;
+    const minValid = this.value.length >= minVal;
+    if (!minValid) {
+      return { tooShort: true };
+    }
+
+    return {};
+  }
+
+  init() {
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) {
+        this.passwordInput.focus();
+      }
+    });
+
+    super.init?.();
+    this.renderInputs(this.hasConfirm);
+  }
+
+  renderInputs(shouldRenderConfirm) {
+    let template = `<descope-password data-id="password"></descope-password>`;
+
+    if (shouldRenderConfirm) {
+      template += `<descope-password data-id="confirm"></descope-password>`;
+    }
+
+    this.wrapperEle.innerHTML = template;
+
+    this.passwordInput = this.querySelector('[data-id="password"]');
+    this.confirmInput = this.querySelector('[data-id="confirm"]');
+
+    this.inputs = [this.passwordInput, this.confirmInput];
+
+    this.initInputs();
+
+    // we are calling attributeChangedCallback with all the input related attributes
+    // in order to set it on the newly generated input
+    [...passwordInputAttrs, ...confirmInputAttrs, ...commonAttrs].forEach((attr) => {
+      this.attributeChangedCallback(attr, null, this.getAttribute(attr));
+    });
+  }
+
+  // the inputs are not required but we still want it to have a required
+  // indicator in case the root component is required
+  handleIndicatorStyle() {
+    this.inputs.forEach((input) => {
+      const styleTag = document.createElement('style');
+      styleTag.innerHTML = `
 				:host::part(required-indicator)::after {
 					content: var(${NewPasswordClass.cssVarList.inputsRequiredIndicator});
 				}
 				`;
-			input?.shadowRoot.appendChild(styleTag);
-		}
-	}
-
-	get isInvalid() {
-		return this.hasAttribute('invalid') && this.getAttribute('invalid') !== 'false'
-	}
-
-	// for some reason, Vaadin is removing the invalid attribute on several events, 
-	// e.g. focus, input, etc..., so we need to make sure the inputs will stay invalid
-	// if the root component is invalid
-	handleInputsInvalidAttribute() {
-		this.inputs.forEach(input => {
-			input && observeAttributes(input, (changedAttributes) => {
-				if (changedAttributes.includes('invalid')) {
-					const inputInvalidValue = input.getAttribute('invalid')
-					const rootInvalidValue = this.getAttribute('invalid')
-
-					if (this.isInvalid && rootInvalidValue !== inputInvalidValue) {
-						input.setAttribute('invalid', 'true')
-					}
-				}
-			}, {});
-		})
-	}
-
-	initInputs() {
-		this.handleIndicatorStyle()
-		this.handleInputsInvalidAttribute();
-		this.handleFocusEventsDispatching(this.inputs)
-	}
-
-	toggleBooleanAttribute(ele, name, value) {
-		value === null ?
-			ele?.removeAttribute(name) :
-			ele?.setAttribute(name, value)
-	}
-
-	attributeChangedCallback(attrName, oldValue, newValue) {
-		super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-		if (oldValue !== newValue) {
-			if (attrName === 'has-confirm') {
-				this.renderInputs(newValue !== null && newValue !== 'false');
-			}
-			else if (commonAttrs.includes(attrName)) {
-				this.inputs.forEach(
-					(input) => this.toggleBooleanAttribute(input, attrName, newValue)
-				);
-			}
-			else if (passwordInputAttrs.includes(attrName)) {
-				this.toggleBooleanAttribute(
-					this.passwordInput,
-					removeAttrPrefix(attrName, passwordAttrPrefixRegex),
-					newValue
-				);
-			}
-			else if (confirmInputAttrs.includes(attrName)) {
-				this.toggleBooleanAttribute(
-					this.confirmInput,
-					removeAttrPrefix(attrName, confirmAttrPrefixRegex),
-					newValue
-				);
-
-			}
-		}
-	}
+      input?.shadowRoot.appendChild(styleTag);
+    });
+  }
+
+  get isInvalid() {
+    return this.hasAttribute('invalid') && this.getAttribute('invalid') !== 'false';
+  }
+
+  // for some reason, Vaadin is removing the invalid attribute on several events,
+  // e.g. focus, input, etc..., so we need to make sure the inputs will stay invalid
+  // if the root component is invalid
+  handleInputsInvalidAttribute() {
+    this.inputs.forEach((input) => {
+      input &&
+        observeAttributes(
+          input,
+          (changedAttributes) => {
+            if (changedAttributes.includes('invalid')) {
+              const inputInvalidValue = input.getAttribute('invalid');
+              const rootInvalidValue = this.getAttribute('invalid');
+
+              if (this.isInvalid && rootInvalidValue !== inputInvalidValue) {
+                input.setAttribute('invalid', 'true');
+              }
+            }
+          },
+          {}
+        );
+    });
+  }
+
+  initInputs() {
+    this.handleIndicatorStyle();
+    this.handleInputsInvalidAttribute();
+    this.handleFocusEventsDispatching(this.inputs);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  toggleBooleanAttribute(ele, name, value) {
+    value === null ? ele?.removeAttribute(name) : ele?.setAttribute(name, value);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue) {
+      if (attrName === 'has-confirm') {
+        this.renderInputs(newValue !== null && newValue !== 'false');
+      } else if (commonAttrs.includes(attrName)) {
+        this.inputs.forEach((input) => this.toggleBooleanAttribute(input, attrName, newValue));
+      } else if (passwordInputAttrs.includes(attrName)) {
+        this.toggleBooleanAttribute(
+          this.passwordInput,
+          removeAttrPrefix(attrName, passwordAttrPrefixRegex),
+          newValue
+        );
+      } else if (confirmInputAttrs.includes(attrName)) {
+        this.toggleBooleanAttribute(
+          this.confirmInput,
+          removeAttrPrefix(attrName, confirmAttrPrefixRegex),
+          newValue
+        );
+      }
+    }
+  }
 }
 
 export default NewPasswordInternal;

package/src/components/descope-new-password/descope-new-password-internal/componentName.js

@@ -1,3 +1,3 @@
-import { getComponentName } from "../../../helpers/componentHelpers";
+import { getComponentName } from '../../../helpers/componentHelpers';
 
 export const componentName = getComponentName('new-password-internal');

package/src/components/descope-new-password/descope-new-password-internal/index.js

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

package/src/components/descope-new-password/index.js

@@ -1,7 +1,7 @@
 import { componentName, NewPasswordClass } from './NewPasswordClass';
-import '../descope-text-field'
-import '../descope-password'
-import './descope-new-password-internal'
+import '../descope-text-field';
+import '../descope-password';
+import './descope-new-password-internal';
 
 customElements.define(componentName, NewPasswordClass);
 

package/src/components/descope-number-field/NumberFieldClass.js

@@ -1,38 +1,43 @@
 import {
-	createStyleMixin,
-	draggableMixin,
-	createProxy,
-	proxyInputMixin,
-	componentNameValidationMixin
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
 } from '../../mixins';
 import textFieldMappings from '../descope-text-field/textFieldMappings';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
-import { resetInputOverrides, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
+import {
+  resetInputOverrides,
+  useHostExternalPadding,
+} from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('number-field');
 
 export const NumberFieldClass = compose(
-	createStyleMixin({
-		mappings: textFieldMappings
-	}),
-	draggableMixin,
-	proxyInputMixin,
-	componentNameValidationMixin
+  createStyleMixin({
+    mappings: textFieldMappings,
+  }),
+  draggableMixin,
+  proxyInputMixin,
+  componentNameValidationMixin
 )(
-	createProxy({
-		slots: ['prefix', 'suffix'],
-		wrappedEleName: 'vaadin-number-field',
-		style: () => `
+  createProxy({
+    slots: ['prefix', 'suffix'],
+    wrappedEleName: 'vaadin-number-field',
+    style: () => `
 			:host {
 				display: inline-block;
 				max-width: 100%;
-				padding: calc(var(${NumberFieldClass.cssVarList.inputOutlineWidth}) + var(${NumberFieldClass.cssVarList.inputOutlineOffset}));
+				padding: calc(var(${NumberFieldClass.cssVarList.inputOutlineWidth}) + var(${
+          NumberFieldClass.cssVarList.inputOutlineOffset
+        }));
 			}
 			${useHostExternalPadding(NumberFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
-		excludeAttrsSync: ['tabindex'],
-		componentName
-	})
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
 );