@descope/web-components-ui 1.0.135 → 1.0.148

package/src/components/descope-password/PasswordClass.js

@@ -1,9 +1,9 @@
 import {
-	createStyleMixin,
-	draggableMixin,
-	createProxy,
-	proxyInputMixin,
-	componentNameValidationMixin
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
 } from '../../mixins';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
@@ -13,90 +13,82 @@ import { resetInputCursor, useHostExternalPadding } from '../../helpers/themeHel
 export const componentName = getComponentName('password');
 
 const {
-	host,
-	inputField,
-	inputElement,
-	inputElementPlaceholder,
-	revealButtonContainer,
-	revealButtonIcon,
-	label,
-	requiredIndicator,
-	errorMessage,
-	helperText
+  host,
+  inputField,
+  inputElement,
+  inputElementPlaceholder,
+  revealButtonContainer,
+  revealButtonIcon,
+  label,
+  requiredIndicator,
+  errorMessage,
+  helperText,
 } = {
-	host: { selector: () => ':host' },
-	inputField: { selector: '::part(input-field)' },
-	inputElement: { selector: '> input' },
-	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
-	revealButtonContainer: { selector: () => '::part(reveal-button)' },
-	revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
-	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-	helperText: { selector: '::part(helper-text)' },
-	errorMessage: { selector: '::part(error-message)' }
-}
+  host: { selector: () => ':host' },
+  inputField: { selector: '::part(input-field)' },
+  inputElement: { selector: '> input' },
+  inputElementPlaceholder: { selector: '> input:placeholder-shown' },
+  revealButtonContainer: { selector: () => '::part(reveal-button)' },
+  revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+};
 
 export const PasswordClass = compose(
-	createStyleMixin({
-		mappings: {
-			hostWidth: { ...host, property: 'width' },
-			hostMinWidth: { ...host, property: 'min-width' },
-			fontSize: [
-				{},
-				host,
-			],
-			fontFamily: [
-				label,
-				inputField,
-				errorMessage,
-				helperText
-			],
-			inputHeight: { ...inputField, property: 'height' },
-			inputHorizontalPadding: [
-				{ ...inputElement, property: 'padding-left' },
-				{ ...inputElement, property: 'padding-right' }
-			],
-			inputBackgroundColor: { ...inputField, property: 'background-color' },
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      fontSize: [{}, host],
+      fontFamily: [label, inputField, errorMessage, helperText],
+      inputHeight: { ...inputField, property: 'height' },
+      inputHorizontalPadding: [
+        { ...inputElement, property: 'padding-left' },
+        { ...inputElement, property: 'padding-right' },
+      ],
+      inputBackgroundColor: { ...inputField, property: 'background-color' },
 
-			inputBorderStyle: { ...inputField, property: 'border-style' },
-			inputBorderWidth: { ...inputField, property: 'border-width' },
-			inputBorderColor: { ...inputField, property: 'border-color' },
-			inputBorderRadius: { ...inputField, property: 'border-radius' },
+      inputBorderStyle: { ...inputField, property: 'border-style' },
+      inputBorderWidth: { ...inputField, property: 'border-width' },
+      inputBorderColor: { ...inputField, property: 'border-color' },
+      inputBorderRadius: { ...inputField, property: 'border-radius' },
 
-			inputOutlineColor: { ...inputField, property: 'outline-color' },
-			inputOutlineStyle: { ...inputField, property: 'outline-style' },
-			inputOutlineOffset: { ...inputField, property: 'outline-offset' },
-			inputOutlineWidth: { ...inputField, property: 'outline-width' },
+      inputOutlineColor: { ...inputField, property: 'outline-color' },
+      inputOutlineStyle: { ...inputField, property: 'outline-style' },
+      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+      inputOutlineWidth: { ...inputField, property: 'outline-width' },
 
-			labelTextColor: [
-				{ ...label, property: 'color' },
-				{ ...requiredIndicator, property: 'color' }
-			],
-			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
 
-			inputValueTextColor: [
-				{ ...inputElement, property: 'color' },
-				{ ...revealButtonIcon, property: 'color' }
-			],
-			inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
+      inputValueTextColor: [
+        { ...inputElement, property: 'color' },
+        { ...revealButtonIcon, property: 'color' },
+      ],
+      inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
 
-			revealButtonOffset: [
-				{ ...revealButtonContainer, property: 'margin-right' },
-				{ ...revealButtonContainer, property: 'margin-left' }
-			],
-			revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
-
-		}
-	}),
-	draggableMixin,
-	proxyInputMixin,
-	componentNameValidationMixin,
-	passwordDraggableMixin
+      revealButtonOffset: [
+        { ...revealButtonContainer, property: 'margin-right' },
+        { ...revealButtonContainer, property: 'margin-left' },
+      ],
+      revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin,
+  componentNameValidationMixin,
+  passwordDraggableMixin
 )(
-	createProxy({
-		slots: ['suffix'],
-		wrappedEleName: 'vaadin-password-field',
-		style: () => `
+  createProxy({
+    slots: ['suffix'],
+    wrappedEleName: 'vaadin-password-field',
+    style: () => `
 			:host {
 				display: inline-block;
 				max-width: 100%;
@@ -145,7 +137,7 @@ export const PasswordClass = compose(
 				box-shadow: 0 0 0 2px var(${PasswordClass.cssVarList.inputOutlineColor});
 			}
 		`,
-		excludeAttrsSync: ['tabindex'],
-		componentName
-	})
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
 );

package/src/components/descope-password/passwordDraggableMixin.js

@@ -1,34 +1,35 @@
-const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
-	get isReadOnly() {
-		return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
-	}
+const passwordDraggableMixin = (superclass) =>
+  class PasswordDraggableMixinClass extends superclass {
+    get isReadOnly() {
+      return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false';
+    }
 
-	init() {
-		// there is an issue in Chrome that input field with type password cannot be D&D
-		// so in case the input is draggable & readonly, we are changing the input type to "text" before dragging 
-		// and return the original type when done
-		this.addEventListener('mousedown', (e) => {
-			if (this.isDraggable & this.isReadOnly) {
-				const inputEle = this.baseElement.querySelector('input');
-				const prevType = inputEle.getAttribute('type')
+    init() {
+      // there is an issue in Chrome that input field with type password cannot be D&D
+      // so in case the input is draggable & readonly, we are changing the input type to "text" before dragging
+      // and return the original type when done
+      this.addEventListener('mousedown', (e) => {
+        if (this.isDraggable && this.isReadOnly) {
+          const inputEle = this.baseElement.querySelector('input');
+          const prevType = inputEle.getAttribute('type');
 
-				inputEle.setAttribute('type', 'text');
-				setTimeout(() => inputEle.focus());
+          inputEle.setAttribute('type', 'text');
+          setTimeout(() => inputEle.focus());
 
-				const onComplete = (e) => {
-					inputEle.setAttribute('type', prevType)
+          const onComplete = (_) => {
+            inputEle.setAttribute('type', prevType);
 
-					e.target.removeEventListener('mouseup', onComplete)
-					e.target.removeEventListener('dragend', onComplete)
-				}
+            e.target.removeEventListener('mouseup', onComplete);
+            e.target.removeEventListener('dragend', onComplete);
+          };
 
-				e.target.addEventListener('mouseup', onComplete, { once: true })
-				e.target.addEventListener('dragend', onComplete, { once: true })
-			}
-		})
+          e.target.addEventListener('mouseup', onComplete, { once: true });
+          e.target.addEventListener('dragend', onComplete, { once: true });
+        }
+      });
 
-		super.init?.();
-	}
-}
+      super.init?.();
+    }
+  };
 
-export default passwordDraggableMixin
+export default passwordDraggableMixin;