@descope/web-components-ui 1.0.135 → 1.0.148

package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js

@@ -1,11 +1,11 @@
 import { getComponentName } from '../../../helpers/componentHelpers';
 import { compose } from '../../../helpers';
 import {
-	createStyleMixin,
-	proxyInputMixin,
-	draggableMixin,
-	componentNameValidationMixin,
-	createProxy
+  createStyleMixin,
+  proxyInputMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+  createProxy,
 } from '../../../mixins';
 import { booleanFieldMixin } from '../booleanFieldMixin';
 import commonStyles from '../commonStyles';
@@ -14,98 +14,93 @@ import { useHostExternalPadding } from '../../../helpers/themeHelpers/resetHelpe
 export const componentName = getComponentName('checkbox');
 
 const {
-	host,
-	component,
-	checkboxElement,
-	checkboxSurface,
-	checkboxHiddenLabel,
-	label,
-	requiredIndicator,
-	helperText,
-	errorMessage
+  host,
+  component,
+  checkboxElement,
+  checkboxSurface,
+  checkboxHiddenLabel,
+  label,
+  requiredIndicator,
+  helperText,
+  errorMessage,
 } = {
-	host: { selector: () => ':host' },
-	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-	component: { selector: 'vaadin-checkbox' },
-	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
-	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
-	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
-	helperText: { selector: '::part(helper-text)' },
-	errorMessage: { selector: '::part(error-message)' },
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  component: { selector: 'vaadin-checkbox' },
+  checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
+  checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
+  checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
 };
 
 export const CheckboxClass = compose(
-	createStyleMixin({
-		mappings: {
-			hostWidth: { ...host, property: 'width' },
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
 
-			fontSize: [
-				host,
-				checkboxElement,
-				label,
-				checkboxHiddenLabel,
-			],
-			fontFamily: [
-				label,
-				checkboxHiddenLabel,
-				helperText,
-				errorMessage,
-			],
+      fontSize: [host, checkboxElement, label, checkboxHiddenLabel],
+      fontFamily: [label, checkboxHiddenLabel, helperText, errorMessage],
 
-			labelTextColor: [
-				{ ...label, property: 'color' },
-				{ ...requiredIndicator, property: 'color' },
-				{ ...label, property: '-webkit-text-fill-color' }
-			],
-			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+        { ...label, property: '-webkit-text-fill-color' },
+      ],
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
 
-			labelFontWeight: [
-				{ ...label, property: 'font-weight' },
-				{ ...checkboxHiddenLabel, property: 'font-weight' }
-			],
-			labelSpacing: [
-				{ ...label, property: 'left' },
-				{ ...checkboxHiddenLabel, property: 'padding-left' }
-			],
-			inputValueTextColor: { ...checkboxSurface, property: 'color' },
-			inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
+      labelFontWeight: [
+        { ...label, property: 'font-weight' },
+        { ...checkboxHiddenLabel, property: 'font-weight' },
+      ],
+      labelSpacing: [
+        { ...label, property: 'left' },
+        { ...checkboxHiddenLabel, property: 'padding-left' },
+      ],
+      inputValueTextColor: { ...checkboxSurface, property: 'color' },
+      inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
 
-			inputBorderRadius: { ...checkboxElement, property: 'border-radius' },
-			inputBorderWidth: { ...checkboxElement, property: 'border-width' },
-			inputBorderOffset: { ...checkboxElement, property: 'border-offset' },
-			inputBorderColor: { ...checkboxElement, property: 'border-color' },
-			inputBorderStyle: { ...checkboxElement, property: 'border-style' },
+      inputBorderRadius: { ...checkboxElement, property: 'border-radius' },
+      inputBorderWidth: { ...checkboxElement, property: 'border-width' },
+      inputBorderOffset: { ...checkboxElement, property: 'border-offset' },
+      inputBorderColor: { ...checkboxElement, property: 'border-color' },
+      inputBorderStyle: { ...checkboxElement, property: 'border-style' },
 
-			inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
-			inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
-			inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
-			inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
+      inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
+      inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
+      inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
+      inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
 
-			inputSize: [
-				{ ...checkboxElement, property: 'width' },
-				{ ...checkboxElement, property: 'height' },
-				{ ...checkboxSurface, property: 'font-size' },
-				{ ...component, property: 'font-size' },
-				{ ...checkboxHiddenLabel, property: 'line-height' },
-				{ ...label, property: 'margin-left' },
-				{ ...label, property: 'line-height' },
-			],
-		},
-	}),
-	draggableMixin,
-	proxyInputMixin,
-	componentNameValidationMixin,
-	booleanFieldMixin
+      inputSize: [
+        { ...checkboxElement, property: 'width' },
+        { ...checkboxElement, property: 'height' },
+        { ...checkboxSurface, property: 'font-size' },
+        { ...component, property: 'font-size' },
+        { ...checkboxHiddenLabel, property: 'line-height' },
+        { ...label, property: 'margin-left' },
+        { ...label, property: 'line-height' },
+      ],
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin,
+  componentNameValidationMixin,
+  booleanFieldMixin
 )(
-	createProxy({
-		slots: [],
-		wrappedEleName: 'vaadin-text-field',
-		style: () => `
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
 			${commonStyles}
+			vaadin-checkbox::part(checkbox)::after {
+				top: 0;
+				left: 0;
+			}
 			${useHostExternalPadding(CheckboxClass.cssVarList)}
 		`,
-		excludeAttrsSync: ['tabindex'],
-		componentName
-	})
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
 );

package/src/components/boolean-fields/descope-checkbox/index.js

@@ -1,6 +1,6 @@
 import { componentName, CheckboxClass } from './CheckboxClass';
-import '@vaadin/checkbox'
-import '@vaadin/text-field'
+import '@vaadin/checkbox';
+import '@vaadin/text-field';
 import '../descope-boolean-field-internal';
 
 customElements.define(componentName, CheckboxClass);

package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js

@@ -1,11 +1,11 @@
-import { getComponentName } from '../../../helpers/componentHelpers'
+import { getComponentName } from '../../../helpers/componentHelpers';
 import { compose } from '../../../helpers';
 import {
-	createStyleMixin,
-	proxyInputMixin,
-	draggableMixin,
-	componentNameValidationMixin,
-	createProxy
+  createStyleMixin,
+  proxyInputMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+  createProxy,
 } from '../../../mixins';
 import { booleanFieldMixin } from '../booleanFieldMixin';
 import commonStyles from '../commonStyles';
@@ -14,102 +14,95 @@ import { useHostExternalPadding } from '../../../helpers/themeHelpers/resetHelpe
 export const componentName = getComponentName('switch-toggle');
 
 const {
-	host,
-	component,
-	checkboxElement: track,
-	checkboxSurface: knob,
-	checkboxHiddenLabel,
-	label,
-	requiredIndicator,
-	helperText,
-	errorMessage
+  host,
+  component,
+  checkboxElement: track,
+  checkboxSurface: knob,
+  checkboxHiddenLabel,
+  label,
+  requiredIndicator,
+  helperText,
+  errorMessage,
 } = {
-	host: { selector: () => ':host' },
-	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-	component: { selector: 'vaadin-checkbox' },
-	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
-	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
-	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
-	helperText: { selector: '::part(helper-text)' },
-	errorMessage: { selector: '::part(error-message)' },
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  component: { selector: 'vaadin-checkbox' },
+  checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
+  checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
+  checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
 };
 
 export const SwitchToggleClass = compose(
-	createStyleMixin({
-		mappings: {
-			hostWidth: { ...host, property: 'width' },
-			fontSize: [
-				component,
-				label,
-				checkboxHiddenLabel,
-			],
-			fontFamily: [
-				label,
-				helperText,
-				errorMessage,
-			],
-			trackBorderWidth: { ...track, property: 'border-width' },
-			trackBorderStyle: { ...track, property: 'border-style' },
-			trackBorderColor: { ...track, property: 'border-color' },
-			trackBackgroundColor: { ...track, property: 'background-color' },
-			trackBorderRadius: { ...track, property: 'border-radius' },
-			trackWidth: [
-				{ ...track, property: 'width' },
-			],
-			trackHeight: [
-				{ ...knob, property: 'font-size' },
-				{ ...track, property: 'height' }
-			],
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      fontSize: [component, label, checkboxHiddenLabel],
+      fontFamily: [label, helperText, errorMessage],
+      trackBorderWidth: { ...track, property: 'border-width' },
+      trackBorderStyle: { ...track, property: 'border-style' },
+      trackBorderColor: { ...track, property: 'border-color' },
+      trackBackgroundColor: { ...track, property: 'background-color' },
+      trackBorderRadius: { ...track, property: 'border-radius' },
+      trackWidth: [{ ...track, property: 'width' }],
+      trackHeight: [
+        { ...knob, property: 'font-size' },
+        { ...track, property: 'height' },
+      ],
 
-			knobSize: [
-				{ ...knob, property: 'width' },
-				{ ...knob, property: 'height' },
-			],
-			knobTextColor: { ...knob, property: 'color' },
-			knobRadius: { ...knob, property: 'border-radius' },
-			knobTransitionDuration: { ...knob, property: 'transition' },
-			knobColor: { ...knob, property: 'background-color' },
-			knobTopOffset: { ...knob, property: 'top' },
-			knobLeftOffset: { ...knob, property: 'left' },
+      knobSize: [
+        { ...knob, property: 'width' },
+        { ...knob, property: 'height' },
+      ],
+      knobTextColor: { ...knob, property: 'color' },
+      knobRadius: { ...knob, property: 'border-radius' },
+      knobTransitionDuration: { ...knob, property: 'transition' },
+      knobColor: { ...knob, property: 'background-color' },
+      knobTopOffset: { ...knob, property: 'top' },
+      knobLeftOffset: { ...knob, property: 'left' },
 
-			labelSpacing: [
-				{ ...label, property: 'padding-left' },
-				{ ...checkboxHiddenLabel, property: 'padding-left' }
-			],
-			labelLineHeight: [
-				{ ...label, property: 'line-height' },
-				{ ...checkboxHiddenLabel, property: 'line-height' }
-			],
-			labelFontWeight: [
-				{ ...label, property: 'font-weight' },
-				{ ...checkboxHiddenLabel, property: 'font-weight' }
-			],
-			labelTextColor: [
-				{ ...label, property: 'color' },
-				{ ...requiredIndicator, property: 'color' },
-				{ ...label, property: '-webkit-text-fill-color' }
-			],
-			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
-			inputOutlineWidth: { ...track, property: 'outline-width' },
-			inputOutlineOffset: { ...track, property: 'outline-offset' },
-			inputOutlineColor: { ...track, property: 'outline-color' },
-			inputOutlineStyle: { ...track, property: 'outline-style' },
-		},
-	}),
-	draggableMixin,
-	proxyInputMixin,
-	componentNameValidationMixin,
-	booleanFieldMixin
+      labelSpacing: [
+        { ...label, property: 'padding-left' },
+        { ...checkboxHiddenLabel, property: 'padding-left' },
+      ],
+      labelLineHeight: [
+        { ...label, property: 'line-height' },
+        { ...checkboxHiddenLabel, property: 'line-height' },
+      ],
+      labelFontWeight: [
+        { ...label, property: 'font-weight' },
+        { ...checkboxHiddenLabel, property: 'font-weight' },
+      ],
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+        { ...label, property: '-webkit-text-fill-color' },
+      ],
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      inputOutlineWidth: { ...track, property: 'outline-width' },
+      inputOutlineOffset: { ...track, property: 'outline-offset' },
+      inputOutlineColor: { ...track, property: 'outline-color' },
+      inputOutlineStyle: { ...track, property: 'outline-style' },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin,
+  componentNameValidationMixin,
+  booleanFieldMixin
 )(
-	createProxy({
-		slots: [],
-		wrappedEleName: 'vaadin-text-field',
-		style: () => `
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
 			${commonStyles}
 			${useHostExternalPadding(SwitchToggleClass.cssVarList)}
 			vaadin-text-field::part(label) {
-				left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
+				left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${
+          SwitchToggleClass.cssVarList.trackBorderWidth
+        }) * 2);
 			}
 			vaadin-checkbox[active]::part(checkbox) {
 				transform: none;
@@ -120,7 +113,7 @@ export const SwitchToggleClass = compose(
 				content: '';
 			}
 		`,
-		excludeAttrsSync: ['tabindex'],
-		componentName
-	})
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
 );

package/src/components/boolean-fields/descope-switch-toggle/index.js

@@ -1,6 +1,6 @@
 import { componentName, SwitchToggleClass } from './SwitchToggleClass';
-import '@vaadin/checkbox'
-import '@vaadin/text-field'
+import '@vaadin/checkbox';
+import '@vaadin/text-field';
 import '../descope-boolean-field-internal';
 
 customElements.define(componentName, SwitchToggleClass);

package/src/components/descope-button/ButtonClass.js

@@ -1,12 +1,12 @@
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
-import { useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
 import {
-	createStyleMixin,
-	draggableMixin,
-	createProxy,
-	componentNameValidationMixin
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  componentNameValidationMixin,
 } from '../../mixins';
+import { clickableMixin } from './clickableMixin';
 
 export const componentName = getComponentName('button');
 
@@ -15,6 +15,10 @@ const resetStyles = `
 		display: inline-block;
 		box-sizing: border-box;
 	}
+	vaadin-button::before,
+	vaadin-button::after {
+		opacity: 0;
+	}
 	vaadin-button {
 		margin: 0;
 		min-width: 0;
@@ -43,65 +47,67 @@ const iconStyles = `
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
 const { host, label } = {
-	host: { selector: () => ':host' },
-	label: { selector: '::part(label)' },
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
 };
 
-export const ButtonClass = compose(
-	createStyleMixin({
-		mappings: {
-			hostWidth: { ...host, property: 'width' },
-			fontSize: {},
-			fontFamily: {},
+let loadingIndicatorStyles;
 
-			cursor: {},
-			backgroundColor: {},
+export const ButtonClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostHeight: { property: 'height' },
+      fontSize: {},
+      fontFamily: {},
 
-			outlineOffset: {},
-			outlineColor: {},
-			outlineStyle: {},
-			outlineWidth: {},
+      cursor: {},
+      backgroundColor: {},
 
-			borderRadius: {},
-			borderColor: {},
-			borderStyle: {},
-			borderWidth: {},
+      outlineOffset: {},
+      outlineColor: {},
+      outlineStyle: {},
+      outlineWidth: {},
 
-			verticalPadding: [
-				{ property: 'padding-top' },
-				{ property: 'padding-bottom' },
-			],
-			horizontalPadding: [
-				{ property: 'padding-left' },
-				{ property: 'padding-right' },
-			],
+      borderRadius: {},
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
 
-			labelTextColor: { property: 'color' },
-			labelTextDecoration: { ...label, property: 'text-decoration' },
-			labelSpacing: { ...label, property: 'gap' },
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
 
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
+      labelTextColor: { property: 'color' },
+      labelTextDecoration: { ...label, property: 'text-decoration' },
+      labelSpacing: { ...label, property: 'gap' },
+    },
+  }),
+  clickableMixin,
+  draggableMixin,
+  componentNameValidationMixin
 )(
-	createProxy({
-		slots: ['prefix', 'label', 'suffix'],
-		wrappedEleName: 'vaadin-button',
-		style: () => `
+  createProxy({
+    slots: ['prefix', 'label', 'suffix'],
+    wrappedEleName: 'vaadin-button',
+    style: () => `
 			${resetStyles}
 			${iconStyles}
 			${loadingIndicatorStyles}
 			${editorOverrides}
-			${useHostExternalPadding(ButtonClass.cssVarList)}
+			:host {
+				padding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}));
+			}
+			vaadin-button {
+				height: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
+			}
 		`,
-		excludeAttrsSync: ['tabindex'],
-		componentName
-	})
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
 );
 
 const { color, fontSize } = ButtonClass.cssVarList;
-const loadingIndicatorStyles = `
+loadingIndicatorStyles = `
 	@keyframes spin {
 		0% { -webkit-transform: rotate(0deg); }
 		100% { -webkit-transform: rotate(360deg); }
@@ -123,6 +129,10 @@ const loadingIndicatorStyles = `
 		width: var(${fontSize});
 		height: var(${fontSize});
 	}
+	:host([disabled="true"]),
+	:host([loading="true"]) {
+		pointer-events: none;
+	}
 	:host([loading="true"])::part(prefix),
 	:host([loading="true"])::part(label) {
 		visibility: hidden;

package/src/components/descope-button/clickableMixin.js

@@ -0,0 +1,10 @@
+export const clickableMixin = (superclass) =>
+  class ClickableMixinClass extends superclass {
+    get isLoading() {
+      return this.getAttribute('loading') === 'true';
+    }
+
+    click() {
+      this.isLoading || super.click();
+    }
+  };