@descope/web-components-ui 1.0.135 → 1.0.148

package/src/components/descope-email-field/EmailFieldClass.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('email-field');
 
 export const EmailFieldClass = compose(
-	createStyleMixin({
-		mappings: textFieldMappings
-	}),
-	draggableMixin,
-	proxyInputMixin,
-	componentNameValidationMixin
+  createStyleMixin({
+    mappings: textFieldMappings,
+  }),
+  draggableMixin,
+  proxyInputMixin,
+  componentNameValidationMixin
 )(
-	createProxy({
-		slots: ['suffix'],
-		wrappedEleName: 'vaadin-email-field',
-		style: () => `
+  createProxy({
+    slots: ['suffix'],
+    wrappedEleName: 'vaadin-email-field',
+    style: () => `
 			:host {
 				display: inline-block;
 				max-width: 100%;
-				padding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${EmailFieldClass.cssVarList.inputOutlineOffset}))
+				padding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${
+          EmailFieldClass.cssVarList.inputOutlineOffset
+        }))
 			}
 			${useHostExternalPadding(EmailFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}		
 		`,
-		excludeAttrsSync: ['tabindex'],
-		componentName
-	})
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
 );

package/src/components/descope-image/ImageClass.js

@@ -1,25 +1,22 @@
-import {
-	createStyleMixin,
-	draggableMixin,
-} from '../../mixins';
+import { createStyleMixin, draggableMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 
-const observedAttributes = ['src', 'alt']
+const observedAttributes = ['src', 'alt'];
 
 export const componentName = getComponentName('image');
 
-const BaseClass = createBaseClass({ componentName, baseSelector: ':host > img' })
+const BaseClass = createBaseClass({ componentName, baseSelector: ':host > img' });
 class RawImage extends BaseClass {
-	static get observedAttributes() {
-		return observedAttributes.concat(BaseClass.observedAttributes || []);
-	}
+  static get observedAttributes() {
+    return observedAttributes.concat(BaseClass.observedAttributes || []);
+  }
 
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.attachShadow({ mode: 'open' }).innerHTML = `
+    this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
 			:host > img {
 				width: 100%;
@@ -31,21 +28,21 @@ class RawImage extends BaseClass {
 		</style>
 		<img/>
 	`;
-	}
+  }
 
-	connectedCallback() {
-		super.connectedCallback?.();
+  connectedCallback() {
+    super.connectedCallback?.();
 
-		forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes })
-	}
+    forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes });
+  }
 }
 
 export const ImageClass = compose(
-	createStyleMixin({
-		mappings: {
-			height: { selector: () => ':host' },
-			width: { selector: () => ':host' },
-		}
-	}),
-	draggableMixin,
+  createStyleMixin({
+    mappings: {
+      height: { selector: () => ':host' },
+      width: { selector: () => ':host' },
+    },
+  }),
+  draggableMixin
 )(RawImage);

package/src/components/descope-link/LinkClass.js

@@ -1,8 +1,4 @@
-import {
-	createStyleMixin,
-	draggableMixin,
-	componentNameValidationMixin,
-} from '../../mixins';
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { TextClass } from '../descope-text/TextClass';
 import { compose } from '../../helpers';
@@ -11,10 +7,10 @@ import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 export const componentName = getComponentName('link');
 
 class RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }) {
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.attachShadow({ mode: 'open' }).innerHTML = `
+    this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
 		:host {
 			display: inline-block;
@@ -36,40 +32,40 @@ class RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }
 		</div>
 		`;
 
-		forwardAttrs(this, this.shadowRoot.querySelector('a'), {
-			includeAttrs: ['href', 'target', 'tooltip'],
-			mapAttrs: {
-				tooltip: 'title'
-			}
-		});
+    forwardAttrs(this, this.shadowRoot.querySelector('a'), {
+      includeAttrs: ['href', 'target', 'tooltip'],
+      mapAttrs: {
+        tooltip: 'title',
+      },
+    });
 
-		forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
-			includeAttrs: ['mode', 'variant'],
-		});
-	}
+    forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
+      includeAttrs: ['mode', 'variant'],
+    });
+  }
 }
 
 const selectors = {
-	host: { selector: () => ':host' },
-	anchor: {},
-	wrapper: { selector: () => ':host > div' },
-	text: { selector: () => TextClass.componentName }
+  host: { selector: () => ':host' },
+  anchor: {},
+  wrapper: { selector: () => ':host > div' },
+  text: { selector: () => TextClass.componentName },
 };
 
 const { anchor, text, host, wrapper } = selectors;
 
 export const LinkClass = compose(
-	createStyleMixin({
-		mappings: {
-			hostWidth: { ...host, property: 'width' },
-			textAlign: wrapper,
-			textColor: [
-				{ ...anchor, property: 'color' },
-				{ ...text, property: TextClass.cssVarList.textColor }
-			],
-			cursor: anchor,
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      textAlign: wrapper,
+      textColor: [
+        { ...anchor, property: 'color' },
+        { ...text, property: TextClass.cssVarList.textColor },
+      ],
+      cursor: anchor,
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
 )(RawLink);

package/src/components/descope-loader-linear/LoaderLinearClass.js

@@ -1,8 +1,4 @@
-import {
-	createStyleMixin,
-	draggableMixin,
-	componentNameValidationMixin
-} from '../../mixins';
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
@@ -10,13 +6,14 @@ import { getComponentName } from '../../helpers/componentHelpers';
 export const componentName = getComponentName('loader-linear');
 
 class RawLoaderLinear extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
-	static get componentName() {
-		return componentName;
-	}
-	constructor() {
-		super();
+  static get componentName() {
+    return componentName;
+  }
 
-		this.attachShadow({ mode: 'open' }).innerHTML = `
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
 			@keyframes tilt {
 				0% { transform: translateX(0); }
@@ -38,37 +35,35 @@ class RawLoaderLinear extends createBaseClass({ componentName, baseSelector: ':h
 		</style>
 		<div></div>
 	`;
-	}
+  }
 }
 
 const selectors = {
-	after: { selector: '::after' },
-	host: { selector: () => ':host' }
+  after: { selector: '::after' },
+  host: { selector: () => ':host' },
 };
 
 const { after, host } = selectors;
 
 export const LoaderLinearClass = compose(
-	createStyleMixin({
-		mappings: {
-			hostDisplay: {},
-			hostWidth: { ...host, property: 'width' },
-			barHeight: [
-				{ property: 'height' },
-				{ ...after, property: 'height' }
-			],
-			barBorderRadius: [
-				{ property: 'border-radius' },
-				{ ...after, property: 'border-radius' }
-			],
-			barBackgroundColor: { property: 'background-color' },
-			barColor: { ...after, property: 'background-color' },
-			barWidth: { ...after, property: 'width' },
-			animationDuration: [{}, after],
-			animationTimingFunction: [{}, after],
-			animationIterationCount: [{}, after]
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
+  createStyleMixin({
+    mappings: {
+      hostDisplay: {},
+      hostWidth: { ...host, property: 'width' },
+      barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
+      barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
+      verticalPadding: [
+        { ...host, property: 'padding-top' },
+        { ...host, property: 'padding-bottom' },
+      ],
+      barBackgroundColor: { property: 'background-color' },
+      barColor: { ...after, property: 'background-color' },
+      barWidth: { ...after, property: 'width' },
+      animationDuration: [{}, after],
+      animationTimingFunction: [{}, after],
+      animationIterationCount: [{}, after],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
 )(RawLoaderLinear);

package/src/components/descope-loader-radial/LoaderRadialClass.js

@@ -1,8 +1,4 @@
-import {
-	createStyleMixin,
-	draggableMixin,
-	componentNameValidationMixin
-} from '../../mixins';
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
@@ -10,10 +6,10 @@ import { getComponentName } from '../../helpers/componentHelpers';
 export const componentName = getComponentName('loader-radial');
 
 class RawLoaderRadial extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.attachShadow({ mode: 'open' }).innerHTML = `
+    this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
 			@keyframes spin {
 				0% { transform: rotate(0deg); }
@@ -29,29 +25,26 @@ class RawLoaderRadial extends createBaseClass({ componentName, baseSelector: ':h
 		</style>
 		<div></div>
 	`;
-	}
+  }
 }
 
 export const LoaderRadialClass = compose(
-	createStyleMixin({
-		mappings: {
-			hostDisplay: { property: 'display' },
-			spinnerSize: [
-				{ property: 'width' },
-				{ property: 'height' }
-			],
-			spinnerBorderWidth: { property: 'border-width' },
-			spinnerBorderStyle: { property: 'border-style' },
-			spinnerBorderRadius: { property: 'border-radius' },
-			spinnerQuadrant1Color: { property: 'border-top-color' },
-			spinnerQuadrant2Color: { property: 'border-bottom-color' },
-			spinnerQuadrant3Color: { property: 'border-right-color' },
-			spinnerQuadrant4Color: { property: 'border-left-color' },
-			animationDuration: {},
-			animationTimingFunction: {},
-			animationIterationCount: {}
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
+  createStyleMixin({
+    mappings: {
+      hostDisplay: { property: 'display' },
+      spinnerSize: [{ property: 'width' }, { property: 'height' }],
+      spinnerBorderWidth: { property: 'border-width' },
+      spinnerBorderStyle: { property: 'border-style' },
+      spinnerBorderRadius: { property: 'border-radius' },
+      spinnerQuadrant1Color: { property: 'border-top-color' },
+      spinnerQuadrant2Color: { property: 'border-bottom-color' },
+      spinnerQuadrant3Color: { property: 'border-right-color' },
+      spinnerQuadrant4Color: { property: 'border-left-color' },
+      animationDuration: {},
+      animationTimingFunction: {},
+      animationIterationCount: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
 )(RawLoaderRadial);

package/src/components/descope-logo/LogoClass.js

@@ -3,4 +3,8 @@ import { createCssVarImageClass } from '../../baseClasses/createCssVarImageClass
 
 export const componentName = getComponentName('logo');
 
-export const LogoClass = createCssVarImageClass({ componentName, varName: 'url', fallbackVarName: 'fallbackUrl' })
+export const LogoClass = createCssVarImageClass({
+  componentName,
+  varName: 'url',
+  fallbackVarName: 'fallbackUrl',
+});

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

@@ -1,11 +1,6 @@
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 import { compose } from '../../helpers';
-import {
-	createStyleMixin,
-	proxyInputMixin,
-	draggableMixin,
-	createProxy,
-} from '../../mixins';
+import { createStyleMixin, proxyInputMixin, draggableMixin, createProxy } from '../../mixins';
 import { componentName as descopeInternalComponentName } from './descope-new-password-internal/componentName';
 import { PasswordClass } from '../descope-password/PasswordClass';
 import { useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
@@ -13,91 +8,78 @@ import { useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers'
 export const componentName = getComponentName('new-password');
 
 const customMixin = (superclass) =>
-	class NewPasswordMixinClass extends superclass {
-		constructor() {
-			super();
-		}
-
-		init() {
-			super.init?.();
+  class NewPasswordMixinClass extends superclass {
+    init() {
+      super.init?.();
 
-			const template = document.createElement('template');
+      const template = document.createElement('template');
 
-			template.innerHTML = `
-			<${descopeInternalComponentName} 
-				name="new-password" 
+      template.innerHTML = `
+			<${descopeInternalComponentName}
+				name="new-password"
 				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: [
-					'password-label',
-					'password-placeholder',
-					'confirm-label',
-					'confirm-placeholder',
-					'full-width',
-					'size',
-					'bordered',
-					'label',
-					'has-confirm',
-					'invalid',
-					'readonly',
-					'draggable'
-				]
-			});
-		}
-	};
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: [
+          'password-label',
+          'password-placeholder',
+          'confirm-label',
+          'confirm-placeholder',
+          'full-width',
+          'size',
+          'bordered',
+          'label',
+          'has-confirm',
+          'invalid',
+          'readonly',
+          'draggable',
+        ],
+      });
+    }
+  };
 
-const {
-	host,
-	label,
-	internalInputsWrapper,
-	errorMessage,
-	helperText
-} = {
-	host: { selector: () => ':host' },
-	label: { selector: '::part(label)' },
-	internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
-	helperText: { selector: '::part(helper-text)' },
-	errorMessage: { selector: '::part(error-message)' }
-}
+const { host, label, internalInputsWrapper, errorMessage, helperText } = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+};
 
 export const NewPasswordClass = compose(
-	createStyleMixin({
-		mappings: {
-			fontSize: [
-				host,
-				{},
-				{
-					selector: PasswordClass.componentName,
-					property: PasswordClass.cssVarList.fontSize
-				}
-			],
-			fontFamily: [
-				label,
-				errorMessage,
-				helperText
-			],
-			hostWidth: { ...host, property: 'width' },
-			hostMinWidth: { ...host, property: 'min-width' },
-			inputsRequiredIndicator: { ...host, property: 'content' },
-			spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
-		}
-	}),
-	draggableMixin,
-	proxyInputMixin,
-	customMixin,
+  createStyleMixin({
+    mappings: {
+      fontSize: [
+        host,
+        {},
+        {
+          selector: PasswordClass.componentName,
+          property: PasswordClass.cssVarList.fontSize,
+        },
+      ],
+      fontFamily: [label, errorMessage, helperText],
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      inputsRequiredIndicator: { ...host, property: 'content' },
+      spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin,
+  customMixin
 )(
-	createProxy({
-		slots: [],
-		wrappedEleName: 'vaadin-text-field',
-		style: () => `
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
 		:host {
 			display: inline-block;
 			max-width: 100%;
@@ -140,7 +122,7 @@ export const NewPasswordClass = compose(
 			height: initial;
 		},
 		`,
-		excludeAttrsSync: ['tabindex'],
-		componentName
-	})
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
 );