@descope/web-components-ui 1.0.136 → 1.0.150

package/src/components/descope-combo-box/ComboBoxClass.js

@@ -1,88 +1,93 @@
 import { compose } from '../../helpers';
 import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
-import { resetInputCursor, resetInputPlaceholder, resetInputReadonlyStyle, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
 import {
-	createStyleMixin,
-	draggableMixin,
-	createProxy,
-	componentNameValidationMixin,
-	portalMixin,
-	proxyInputMixin
+  resetInputCursor,
+  resetInputPlaceholder,
+  resetInputReadonlyStyle,
+  useHostExternalPadding,
+} from '../../helpers/themeHelpers/resetHelpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  componentNameValidationMixin,
+  portalMixin,
+  proxyInputMixin,
 } from '../../mixins';
 
 export const componentName = getComponentName('combo-box');
 
-const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
-	constructor() {
-		super();
-	}
-
-	// vaadin api is to set props on their combo box node, 
-	// in order to avoid it, we are passing the children of this component
-	// to the items & renderer props, so it will be used as the combo box items
-	#onChildrenChange() {
-		const baseElement = this.shadowRoot.querySelector(this.baseSelector)
-		const items = Array.from(this.children)
-
-		// we want the data-name attribute to be accessible as an object attribute
-		if (items.length) {
-			items.forEach((node) => {
-				Object.defineProperty(node, 'data-name', {
-					value: node.getAttribute('data-name'),
-				})
-				Object.defineProperty(node, 'data-id', {
-					value: node.getAttribute('data-id')
-				})
-			});
-
-			baseElement.items = items;
-
-			baseElement.renderer = (root, combo, model) => {
-				root.innerHTML = model.item.outerHTML;
-			};
-		}
-	}
-
-	// the default vaadin behavior is to attach the overlay to the body when opened
-	// we do not want that because it's difficult to style the overlay in this way
-	// so we override it to open inside the shadow DOM
-	#overrideOverlaySettings() {
-		const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay')
-
-		overlay._attachOverlay = function () { this.bringToFront(); }
-		overlay._detachOverlay = function () { }
-		overlay._enterModalState = function () { }
-	}
-
-	init() {
-		super.init?.()
-
-		this.#overrideOverlaySettings();
-		observeChildren(this, this.#onChildrenChange.bind(this));
-	}
-}
+const ComboBoxMixin = (superclass) =>
+  class ComboBoxMixinClass extends superclass {
+    // vaadin api is to set props on their combo box node,
+    // in order to avoid it, we are passing the children of this component
+    // to the items & renderer props, so it will be used as the combo box items
+    #onChildrenChange() {
+      const baseElement = this.shadowRoot.querySelector(this.baseSelector);
+      const items = Array.from(this.children);
+
+      // we want the data-name attribute to be accessible as an object attribute
+      if (items.length) {
+        items.forEach((node) => {
+          Object.defineProperty(node, 'data-name', {
+            value: node.getAttribute('data-name'),
+          });
+          Object.defineProperty(node, 'data-id', {
+            value: node.getAttribute('data-id'),
+          });
+        });
+
+        baseElement.items = items;
+
+        baseElement.renderer = (root, combo, model) => {
+          // eslint-disable-next-line no-param-reassign
+          root.innerHTML = model.item.outerHTML;
+        };
+      }
+    }
+
+    // the default vaadin behavior is to attach the overlay to the body when opened
+    // we do not want that because it's difficult to style the overlay in this way
+    // so we override it to open inside the shadow DOM
+    #overrideOverlaySettings() {
+      const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay');
+
+      overlay._attachOverlay = () => {
+        this.bringToFront();
+      };
+      overlay._detachOverlay = () => {};
+      overlay._enterModalState = () => {};
+    }
+
+    init() {
+      super.init?.();
+
+      this.#overrideOverlaySettings.bind(this);
+      observeChildren(this, this.#onChildrenChange.bind(this));
+    }
+  };
 
 const {
-	host,
-	inputField,
-	inputElement,
-	placeholder,
-	toggle,
-	label,
-	requiredIndicator,
-	helperText,
-	errorMessage
+  host,
+  inputField,
+  inputElement,
+  placeholder,
+  toggle,
+  label,
+  requiredIndicator,
+  helperText,
+  errorMessage,
 } = {
-	host: { selector: () => ':host' },
-	inputField: { selector: '::part(input-field)' },
-	inputElement: { selector: 'input' },
-	placeholder: { selector: '> input:placeholder-shown' },
-	toggle: { selector: '::part(toggle-button)' },
-	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' },
+  placeholder: { selector: '> input:placeholder-shown' },
+  toggle: { selector: '::part(toggle-button)' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+};
 
 // const { slotted, selected } = {
 // 	slotted: { selector: () => '::slotted(*)' },
@@ -90,82 +95,74 @@ const {
 // }
 
 export const ComboBoxClass = compose(
-	createStyleMixin({
-		mappings: {
-			hostWidth: { ...host, property: 'width' },
-			// we apply font-size also on the host so we can set its width with em
-			fontSize: [
-				{},
-				host,
-			],
-			fontFamily: [
-				label,
-				placeholder,
-				inputField,
-				helperText,
-				errorMessage
-			],
-			labelTextColor: [
-				{ ...label, property: 'color' },
-				{ ...requiredIndicator, property: 'color' }
-			],
-			inputHeight: { ...inputField, property: 'height' },
-			inputBackgroundColor: { ...inputField, property: 'background-color' },
-			inputBorderColor: { ...inputField, property: 'border-color' },
-			inputBorderWidth: { ...inputField, property: 'border-width' },
-			inputBorderStyle: { ...inputField, property: 'border-style' },
-			inputBorderRadius: { ...inputField, property: 'border-radius' },
-			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
-			inputValueTextColor: { ...inputField, property: 'color' },
-			inputPlaceholderTextColor: { ...placeholder, property: 'color' },
-			inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
-			inputDropdownButtonColor: { ...toggle, property: 'color' },
-			inputDropdownButtonSize: { ...toggle, property: 'font-size' },
-			inputDropdownButtonOffset: [
-				{ ...toggle, property: 'margin-right' },
-				{ ...toggle, property: 'margin-left' },
-			],
-			inputOutlineColor: { ...inputField, property: 'outline-color' },
-			inputOutlineWidth: { ...inputField, property: 'outline-width' },
-			inputOutlineStyle: { ...inputField, property: 'outline-style' },
-			inputOutlineOffset: { ...inputField, property: 'outline-offset' },
-			inputHorizontalPadding: [
-				{ ...inputElement, property: 'padding-left' },
-				{ ...inputElement, property: 'padding-right' }
-			],
-
-			// we need to use the variables from the portal mixin
-			// so we need to use an arrow function on the selector
-			// for that to work, because ComboBox is not available
-			// at this time.
-			overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
-			overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border }
-		}
-	}),
-	draggableMixin,
-	portalMixin({
-		name: 'overlay',
-		selector: '',
-		mappings: {
-			backgroundColor: { selector: 'vaadin-combo-box-scroller' },
-			cursor: { selector: 'vaadin-combo-box-item' }, // TODO: this mapping doesn't work, needs fixing.
-			minHeight: { selector: 'vaadin-combo-box-overlay' },
-			margin: { selector: 'vaadin-combo-box-overlay' },
-			fontFamily: { selector: 'vaadin-combo-box-item' }
-		},
-		forward: {
-			include: false,
-			attributes: ['size']
-		},
-	}),
-	proxyInputMixin,
-	componentNameValidationMixin,
-	ComboBoxMixin
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      // we apply font-size also on the host so we can set its width with em
+      fontSize: [{}, host],
+      fontFamily: [label, placeholder, inputField, helperText, errorMessage],
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      inputHeight: { ...inputField, property: 'height' },
+      inputBackgroundColor: { ...inputField, property: 'background-color' },
+      inputBorderColor: { ...inputField, property: 'border-color' },
+      inputBorderWidth: { ...inputField, property: 'border-width' },
+      inputBorderStyle: { ...inputField, property: 'border-style' },
+      inputBorderRadius: { ...inputField, property: 'border-radius' },
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      inputValueTextColor: { ...inputField, property: 'color' },
+      inputPlaceholderTextColor: { ...placeholder, property: 'color' },
+      inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
+      inputDropdownButtonColor: { ...toggle, property: 'color' },
+      inputDropdownButtonSize: { ...toggle, property: 'font-size' },
+      inputDropdownButtonOffset: [
+        { ...toggle, property: 'margin-right' },
+        { ...toggle, property: 'margin-left' },
+      ],
+      inputOutlineColor: { ...inputField, property: 'outline-color' },
+      inputOutlineWidth: { ...inputField, property: 'outline-width' },
+      inputOutlineStyle: { ...inputField, property: 'outline-style' },
+      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+      inputHorizontalPadding: [
+        { ...inputElement, property: 'padding-left' },
+        { ...inputElement, property: 'padding-right' },
+      ],
+
+      // we need to use the variables from the portal mixin
+      // so we need to use an arrow function on the selector
+      // for that to work, because ComboBox is not available
+      // at this time.
+      overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
+      overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
+    },
+  }),
+  draggableMixin,
+  portalMixin({
+    name: 'overlay',
+    selector: '',
+    mappings: {
+      backgroundColor: { selector: 'vaadin-combo-box-scroller' },
+      cursor: { selector: 'vaadin-combo-box-item' }, // TODO: this mapping doesn't work, needs fixing.
+      minHeight: { selector: 'vaadin-combo-box-overlay' },
+      margin: { selector: 'vaadin-combo-box-overlay' },
+      fontFamily: { selector: 'vaadin-combo-box-item' },
+    },
+    forward: {
+      include: false,
+      attributes: ['size'],
+    },
+  }),
+  proxyInputMixin,
+  componentNameValidationMixin,
+  ComboBoxMixin
 )(
-	createProxy({
-		slots: ['prefix'],
-		wrappedEleName: 'vaadin-combo-box',
-		style: () => `
+  createProxy({
+    slots: ['prefix'],
+    wrappedEleName: 'vaadin-combo-box',
+    style: () => `
 		:host {
 			display: inline-flex;
 			box-sizing: border-box;
@@ -175,7 +172,7 @@ export const ComboBoxClass = compose(
 		${resetInputReadonlyStyle('vaadin-combo-box')}
 		${resetInputPlaceholder('vaadin-combo-box')}
 		${resetInputCursor('vaadin-combo-box')}
-		
+
 		vaadin-combo-box {
 			padding: 0;
 			width: 100%;
@@ -194,13 +191,12 @@ export const ComboBoxClass = compose(
 			box-shadow: none;
 		}
 		`,
-		// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
-		// with the same name. Including it will cause Vaadin to calculate NaN size,
-		// and reset items to an empty array, and opening the list box with no items
-		// to display.
-		excludeAttrsSync: ['tabindex', 'size'],
-		componentName,
-		includeForwardProps: ['items', 'renderer', 'selectedItem']
-	})
+    // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
+    // with the same name. Including it will cause Vaadin to calculate NaN size,
+    // and reset items to an empty array, and opening the list box with no items
+    // to display.
+    excludeAttrsSync: ['tabindex', 'size'],
+    componentName,
+    includeForwardProps: ['items', 'renderer', 'selectedItem'],
+  })
 );
-

package/src/components/descope-container/ContainerClass.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('container');
 
 class RawContainer extends createBaseClass({ componentName, baseSelector: ':host > slot' }) {
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.attachShadow({ mode: 'open' }).innerHTML = `
+    this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
 			:host > slot {
 				box-sizing: border-box;
@@ -28,41 +24,35 @@ class RawContainer extends createBaseClass({ componentName, baseSelector: ':host
 		</style>
 		<slot></slot>
 	`;
-	}
+  }
 }
 
 export const ContainerClass = compose(
-	createStyleMixin({
-		mappings: {
-			hostHeight: { selector: () => ':host', property: 'height' },
-			hostWidth: { selector: () => ':host', property: 'width' },
-
-			verticalPadding: [
-				{ property: 'padding-top' },
-				{ property: 'padding-bottom' }
-			],
-			horizontalPadding: [
-				{ property: 'padding-left' },
-				{ property: 'padding-right' }
-			],
-
-			flexDirection: {},
-			justifyContent: {},
-			alignItems: {},
-			gap: {},
-			flexWrap: {},
-
-			backgroundColor: {},
-			color: {},
-			borderRadius: {},
-
-			borderColor: {},
-			borderStyle: {},
-			borderWidth: {},
-
-			boxShadow: {}
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
+  createStyleMixin({
+    mappings: {
+      hostHeight: { selector: () => ':host', property: 'height' },
+      hostWidth: { selector: () => ':host', property: 'width' },
+
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+
+      flexDirection: {},
+      justifyContent: {},
+      alignItems: {},
+      gap: {},
+      flexWrap: {},
+
+      backgroundColor: {},
+      color: {},
+      borderRadius: {},
+
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+
+      boxShadow: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
 )(RawContainer);

package/src/components/descope-date-picker/index.js

@@ -1,25 +1,20 @@
 import '@vaadin/date-picker';
-import {
-	draggableMixin,
-	createProxy,
-	componentNameValidationMixin
-} from '../../mixins';
+import { draggableMixin, createProxy, componentNameValidationMixin } from '../../mixins';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 
 const componentName = getComponentName('date-picker');
 
 export const DatePickerClass = compose(
-	draggableMixin,
-	componentNameValidationMixin
+  draggableMixin,
+  componentNameValidationMixin
 )(
-	createProxy({
-		componentName,
-		slots: ['prefix', 'suffix'],
-		wrappedEleName: 'vaadin-date-picker',
-		style: ``
-	})
+  createProxy({
+    componentName,
+    slots: ['prefix', 'suffix'],
+    wrappedEleName: 'vaadin-date-picker',
+    style: ``,
+  })
 );
 
 customElements.define(componentName, DatePickerClass);
-

package/src/components/descope-divider/DividerClass.js

@@ -1,18 +1,14 @@
-import {
-	createStyleMixin,
-	draggableMixin,
-	componentNameValidationMixin
-} from '../../mixins';
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('divider');
 class RawDivider extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.attachShadow({ mode: 'open' }).innerHTML = `
+    this.attachShadow({ mode: 'open' }).innerHTML = `
 			<style>
 				:host {
 					display: inline-block;
@@ -45,67 +41,61 @@ class RawDivider extends createBaseClass({ componentName, baseSelector: ':host >
 			</div>
 		`;
 
-		this.textComponent = this.shadowRoot.querySelector('descope-text');
+    this.textComponent = this.shadowRoot.querySelector('descope-text');
 
-		forwardAttrs(this, this.textComponent, {
-			includeAttrs: ['mode', 'variant', 'italic']
-		});
-	}
+    forwardAttrs(this, this.textComponent, {
+      includeAttrs: ['mode', 'variant', 'italic'],
+    });
+  }
 }
 
-const {
-	host,
-	before,
-	after,
-	text,
-} = {
-	host: { selector: () => ':host' },
-	before: { selector: '::before' },
-	after: { selector: '::after' },
-	text: { selector: 'descope-text' },
+const { host, before, after, text } = {
+  host: { selector: () => ':host' },
+  before: { selector: '::before' },
+  after: { selector: '::after' },
+  text: { selector: 'descope-text' },
 };
 
 export const DividerClass = compose(
-	createStyleMixin({
-		mappings: {
-			hostWidth: { ...host, property: 'width' },
-			hostPadding: { ...host, property: 'padding' },
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostPadding: { ...host, property: 'padding' },
 
-			minHeight: {},
-			alignItems: {},
-			alignSelf: {},
-			flexDirection: {},
+      minHeight: {},
+      alignItems: {},
+      alignSelf: {},
+      flexDirection: {},
 
-			labelTextWidth: { ...text, property: 'width' },
-			labelTextMaxWidth: { ...text, property: 'max-width' },
-			labelTextVerticalSpacing: [
-				{ ...text, property: 'padding-top' },
-				{ ...text, property: 'padding-bottom' }
-			],
-			labelTextHorizontalSpacing: [
-				{ ...text, property: 'padding-right' },
-				{ ...text, property: 'padding-left' }
-			],
+      labelTextWidth: { ...text, property: 'width' },
+      labelTextMaxWidth: { ...text, property: 'max-width' },
+      labelTextVerticalSpacing: [
+        { ...text, property: 'padding-top' },
+        { ...text, property: 'padding-bottom' },
+      ],
+      labelTextHorizontalSpacing: [
+        { ...text, property: 'padding-right' },
+        { ...text, property: 'padding-left' },
+      ],
 
-			stripeColor: [
-				{ ...before, property: 'background-color' },
-				{ ...after, property: 'background-color' }
-			],
-			stripeHorizontalThickness: [
-				{ ...before, property: 'height' },
-				{ ...after, property: 'height' }
-			],
-			stripeVerticalThickness: [
-				{ ...before, property: 'width' },
-				{ ...after, property: 'width' }
-			],
-			stripeColorOpacity: [
-				{ ...before, property: 'opacity' },
-				{ ...after, property: 'opacity' }
-			],
-		},
-	}),
-	draggableMixin,
-	componentNameValidationMixin
+      stripeColor: [
+        { ...before, property: 'background-color' },
+        { ...after, property: 'background-color' },
+      ],
+      stripeHorizontalThickness: [
+        { ...before, property: 'height' },
+        { ...after, property: 'height' },
+      ],
+      stripeVerticalThickness: [
+        { ...before, property: 'width' },
+        { ...after, property: 'width' },
+      ],
+      stripeColorOpacity: [
+        { ...before, property: 'opacity' },
+        { ...after, property: 'opacity' },
+      ],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
 )(RawDivider);
-