@descope/web-components-ui 1.0.239 → 1.0.240

package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js

@@ -0,0 +1,488 @@
+import { compose } from '../../helpers';
+import {
+  forwardAttrs,
+  getComponentName,
+  observeAttributes,
+  observeChildren,
+} from '../../helpers/componentHelpers';
+import {
+  resetInputLabelPosition,
+  resetInputCursor,
+  resetInputPlaceholder,
+  resetInputReadonlyStyle,
+  useHostExternalPadding,
+} from '../../helpers/themeHelpers/resetHelpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  componentNameValidationMixin,
+  portalMixin,
+  proxyInputMixin,
+} from '../../mixins';
+
+export const componentName = getComponentName('multi-select-combo-box');
+
+const MultiSelectComboBoxMixin = (superclass) =>
+  class MultiSelectComboBoxMixinClass extends superclass {
+    // eslint-disable-next-line class-methods-use-this
+    #renderItem = ({ displayName, value, label }) => {
+      return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
+    };
+
+    #data;
+
+    get defaultValues() {
+      const defaultValuesAttr = this.getAttribute('default-values');
+      if (defaultValuesAttr) {
+        try {
+          const defaultValues = JSON.parse(defaultValuesAttr);
+          if (this.isValidDataType(defaultValues)) {
+            return defaultValues;
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('could not parse data string from attribute "default-values" -', e.message);
+        }
+      }
+      return [];
+    }
+
+    get renderItem() {
+      return this.#renderItem;
+    }
+
+    set renderItem(renderFn) {
+      this.#renderItem = renderFn;
+      this.renderItems();
+    }
+
+    get data() {
+      if (this.#data) return this.#data;
+
+      const dataAttr = this.getAttribute('data');
+
+      if (dataAttr) {
+        try {
+          const data = JSON.parse(dataAttr);
+          if (this.isValidDataType(data)) {
+            return data;
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('could not parse data string from attribute "data" -', e.message);
+        }
+      }
+
+      return [];
+    }
+
+    set data(data) {
+      if (this.isValidDataType(data)) {
+        this.#data = data;
+        this.renderItems();
+      }
+    }
+
+    get allowCustomValue() {
+      return this.getAttribute('allow-custom-value') === 'true';
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    isValidDataType(data) {
+      const isValid = Array.isArray(data);
+      if (!isValid) {
+        // eslint-disable-next-line no-console
+        console.error('data and default-values must be an array, received:', data);
+      }
+
+      return isValid;
+    }
+
+    getItemsTemplate() {
+      return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
+    }
+
+    renderItems() {
+      const template = this.getItemsTemplate();
+      if (template) this.innerHTML = template;
+    }
+
+    handleSelectedItems() {
+      const currentSelected =
+        this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];
+
+      this.baseElement.selectedItems = [];
+
+      // if previously selected item ID exists in current children, set it as selected
+      if (currentSelected.length > 0) {
+        this.value = currentSelected;
+      }
+
+      // otherwise, if default value is specified, set default value as selected item
+      if (this.value.length === 0) {
+        this.setDefaultValues();
+      }
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    customValueTransformFn(val) {
+      return val;
+    }
+
+    // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
+    // field that it searches the value, and the finaly display value of the input.
+    // We provide a custom transform function to override that behavior.
+    setComboBoxDescriptor() {
+      const valueDescriptor = Object.getOwnPropertyDescriptor(
+        this.inputElement.constructor.prototype,
+        'value'
+      );
+
+      const comboBox = this;
+
+      Object.defineProperties(this.inputElement, {
+        value: {
+          ...valueDescriptor,
+          set(val) {
+            const transformedValue = comboBox.customValueTransformFn(val) || '';
+
+            if (transformedValue === this.value) {
+              return;
+            }
+
+            valueDescriptor.set.call(this, transformedValue);
+          },
+        },
+      });
+    }
+
+    // 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 items = Array.from(this.children);
+
+      // we want the data-name attribute to be accessible as an object attribute
+      if (items.length) {
+        this.removeAttribute('has-no-options');
+
+        items.forEach((node) => {
+          Object.defineProperty(node, 'data-name', {
+            value: node.getAttribute('data-name'),
+            configurable: true,
+            writable: true,
+          });
+          Object.defineProperty(node, 'data-id', {
+            value: node.getAttribute('data-id'),
+            configurable: true,
+            writable: true,
+          });
+        });
+
+        this.baseElement.items = items;
+
+        setTimeout(() => {
+          // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
+          this.handleSelectedItems();
+        }, 0);
+      } else {
+        this.baseElement.items = [];
+        this.setAttribute('has-no-options', '');
+      }
+
+      // use vaadin combobox custom renderer to render options as HTML
+      // and not via default renderer, which renders only the data-name's value
+      // in its own HTML template
+      this.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-multi-select-combo-box-internal')
+        .shadowRoot.querySelector('vaadin-multi-select-combo-box-overlay');
+      overlay._attachOverlay = () => {
+        overlay.bringToFront();
+      };
+      overlay._detachOverlay = () => {};
+      overlay._enterModalState = () => {};
+    }
+
+    #handleCustomValues() {
+      if (this.allowCustomValue) {
+        this.baseElement.addEventListener('custom-value-set', (e) => {
+          const newItemHtml = this.#renderItem({
+            label: e.detail,
+            displayName: e.detail,
+            value: e.detail,
+          });
+          this.innerHTML += newItemHtml;
+          // The value needs to be set with a timeout because it needs to execute after
+          // the custom value is added to items by the children change observer
+          setTimeout(() => {
+            this.value = [...this.value, e.detail];
+          }, 0);
+        });
+      }
+    }
+
+    init() {
+      super.init?.();
+
+      // eslint-disable-next-line func-names
+      this.getValidity = function () {
+        if (!this.value.length && this.isRequired) {
+          return {
+            valueMissing: true,
+          };
+        }
+        return {};
+      };
+
+      this.setComboBoxDescriptor();
+
+      this.#overrideOverlaySettings();
+
+      this.#handleCustomValues();
+
+      this.renderItems();
+
+      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+
+      observeChildren(this, this.#onChildrenChange.bind(this));
+
+      // Note: we need to forward the `placeholder` because the vaadin component observes it and
+      // tries to override it, causing us to lose the user set placeholder.
+      forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });
+
+      this.setDefaultValues();
+    }
+
+    setDefaultValues() {
+      this.value = this.defaultValues;
+    }
+
+    set value(vals) {
+      if (vals && vals.length > 0) {
+        const children = this.baseElement.items?.filter((item) => vals.includes(item['data-id']));
+
+        if (children?.length > 0) {
+          this.baseElement.selectedItems = children;
+        }
+      } else {
+        this.baseElement.selectedItems = [];
+      }
+    }
+
+    get value() {
+      return this.baseElement.selectedItems.map((elem) => elem.getAttribute('data-id')) || [];
+    }
+  };
+
+const {
+  host,
+  inputField,
+  inputElement,
+  placeholder,
+  toggle,
+  label,
+  requiredIndicator,
+  helperText,
+  errorMessage,
+  chip,
+  chipLabel,
+  overflowChipFirstBorder,
+  overflowChipSecondBorder,
+} = {
+  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)' },
+  chip: { selector: 'vaadin-multi-select-combo-box-chip' },
+  chipLabel: { selector: 'vaadin-multi-select-combo-box-chip::part(label)' },
+  overflowChipFirstBorder: {
+    selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::before",
+  },
+  overflowChipSecondBorder: {
+    selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::after",
+  },
+};
+
+export const MultiSelectComboBoxClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+      // we apply font-size also on the host so we can set its width with em
+      fontSize: [{}, host],
+      chipFontSize: { ...chipLabel, property: 'font-size' },
+      fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      inputHeight: { ...inputField, property: 'min-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' },
+        { ...inputField, property: 'padding-inline-start' },
+      ],
+      inputVerticalPadding: [
+        { ...inputField, property: 'padding-top' },
+        { ...inputField, property: 'padding-bottom' },
+      ],
+      chipTextColor: { ...chipLabel, property: 'color' },
+      chipBackgroundColor: [
+        { ...chip, property: 'background-color' },
+        { ...overflowChipFirstBorder, property: 'border-color' },
+        { ...overflowChipSecondBorder, property: 'border-color' },
+      ],
+
+      // 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: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,
+      },
+      overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },
+      overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },
+      overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },
+      overlayCursor: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.cursor },
+      overlayItemBoxShadow: {
+        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemBoxShadow,
+      },
+      overlayItemPaddingInlineStart: {
+        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
+      },
+      overlayItemPaddingInlineEnd: {
+        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,
+      },
+    },
+  }),
+  draggableMixin,
+  portalMixin({
+    name: 'overlay',
+    selector: 'vaadin-multi-select-combo-box-internal',
+    mappings: {
+      backgroundColor: { selector: 'vaadin-multi-select-combo-box-scroller' },
+      minHeight: { selector: 'vaadin-multi-select-combo-box-overlay' },
+      margin: { selector: 'vaadin-multi-select-combo-box-overlay' },
+      cursor: { selector: 'vaadin-multi-select-combo-box-item' },
+      fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },
+      fontSize: { selector: 'vaadin-multi-select-combo-box-item' },
+      itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },
+      itemPaddingInlineStart: {
+        selector: 'vaadin-multi-select-combo-box-item',
+        property: 'padding-inline-start',
+      },
+      itemPaddingInlineEnd: {
+        selector: 'vaadin-multi-select-combo-box-item',
+        property: 'padding-inline-end',
+      },
+    },
+    forward: {
+      include: false,
+      attributes: ['size'],
+    },
+  }),
+  proxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
+  componentNameValidationMixin,
+  MultiSelectComboBoxMixin
+)(
+  createProxy({
+    slots: ['', 'prefix'],
+    wrappedEleName: 'vaadin-multi-select-combo-box',
+    style: () => `
+		:host {
+			display: inline-flex;
+			box-sizing: border-box;
+			-webkit-mask-image: none;
+		}
+		${useHostExternalPadding(MultiSelectComboBoxClass.cssVarList)}
+		${resetInputReadonlyStyle('vaadin-multi-select-combo-box')}
+		${resetInputPlaceholder('vaadin-multi-select-combo-box')}
+		${resetInputCursor('vaadin-multi-select-combo-box')}
+
+		vaadin-multi-select-combo-box {
+			padding: 0;
+			width: 100%;
+		}
+		vaadin-multi-select-combo-box::before {
+			height: initial;
+		}
+		vaadin-multi-select-combo-box [slot="input"] {
+			-webkit-mask-image: none;
+			min-height: 0;
+      align-self: center;
+			box-sizing: border-box;
+		}
+
+		::part(input-field) {
+      padding: 0;
+			box-shadow: none;
+		}
+    ${resetInputLabelPosition('vaadin-multi-select-combo-box')}
+    :host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {
+      display: block;
+    }
+
+    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,
+    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
+      left: -4px;
+      right: -4px;
+      border-left-width: 0;
+      border-inline-start-style: solid;
+      border-inline-start-width: 2px;
+    }
+    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
+      left: -8px;
+      right: -8px;
+    }
+
+    :host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {
+      display: 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.
+    // Note: we exclude `placeholder` because the vaadin component observes it and
+    // tries to override it, causing us to lose the user set placeholder.
+    excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
+    componentName,
+    includeForwardProps: ['items', 'renderer', 'selectedItems'],
+  })
+);

package/src/components/descope-multi-select-combo-box/index.js

@@ -0,0 +1,6 @@
+import '@vaadin/multi-select-combo-box';
+import { componentName, MultiSelectComboBoxClass } from './MultiSelectComboBoxClass';
+
+customElements.define(componentName, MultiSelectComboBoxClass);
+
+export { MultiSelectComboBoxClass };

package/src/theme/components/index.js

@@ -26,6 +26,7 @@ import * as buttonSelectionGroup from './buttonSelectionGroup/buttonSelectionGro
 import * as modal from './modal';
 import * as grid from './grid';
 import * as notificationCard from './notificationCard';
+import * as multiSelectComboBox from './multiSelectComboBox';
 import * as badge from './badge';
 
 const components = {
@@ -58,6 +59,7 @@ const components = {
   modal,
   grid,
   notificationCard,
+  multiSelectComboBox,
   badge,
 };
 

package/src/theme/components/inputWrapper.js

@@ -35,10 +35,10 @@ const [theme, refs, vars] = createHelperVars(
     direction: globalRefs.direction,
 
     size: {
-      xs: { fontSize: '12px' },
-      sm: { fontSize: '14px' },
-      md: { fontSize: '16px' },
-      lg: { fontSize: '18px' },
+      xs: { fontSize: '12px', chipFontSize: '10px' },
+      sm: { fontSize: '14px', chipFontSize: '12px' },
+      md: { fontSize: '16px', chipFontSize: '14px' },
+      lg: { fontSize: '18px', chipFontSize: '16px' },
     },
 
     _fullWidth: {

package/src/theme/components/multiSelectComboBox.js

@@ -0,0 +1,57 @@
+import globals from '../globals';
+import { MultiSelectComboBoxClass } from '../../components/descope-multi-select-combo-box/MultiSelectComboBoxClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { refs } from './inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+const vars = MultiSelectComboBoxClass.cssVarList;
+
+export const multiSelectComboBox = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.inputBorderColor]: refs.borderColor,
+  [vars.inputBorderWidth]: refs.borderWidth,
+  [vars.inputBorderStyle]: refs.borderStyle,
+  [vars.inputBorderRadius]: refs.borderRadius,
+  [vars.inputOutlineColor]: refs.outlineColor,
+  [vars.inputOutlineOffset]: refs.outlineOffset,
+  [vars.inputOutlineWidth]: refs.outlineWidth,
+  [vars.inputOutlineStyle]: refs.outlineStyle,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.inputValueTextColor]: refs.valueTextColor,
+  [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars.inputBackgroundColor]: refs.backgroundColor,
+  [vars.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars.inputVerticalPadding]: refs.verticalPadding,
+  [vars.inputHeight]: refs.inputHeight,
+  [vars.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
+  [vars.inputDropdownButtonCursor]: 'pointer',
+  [vars.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
+  [vars.overlayItemPaddingInlineStart]: globalRefs.spacing.xs,
+  [vars.overlayItemPaddingInlineEnd]: globalRefs.spacing.lg,
+  [vars.chipFontSize]: refs.chipFontSize,
+  [vars.chipTextColor]: refs.valueTextColor,
+  [vars.chipBackgroundColor]: globalRefs.colors.surface.main,
+
+  _readonly: {
+    [vars.inputDropdownButtonCursor]: 'default',
+  },
+
+  // Overlay theme exposed via the component:
+  [vars.overlayFontSize]: refs.fontSize,
+  [vars.overlayFontFamily]: refs.fontFamily,
+  [vars.overlayCursor]: 'pointer',
+  [vars.overlayItemBoxShadow]: 'none',
+
+  // Overlay direct theme:
+  [vars.overlay.minHeight]: '400px',
+  [vars.overlay.margin]: '0',
+};
+
+export default multiSelectComboBox;
+export { vars };