@descope-ui/descope-multi-select-combo-box 3.9.0

package/src/component/MultiSelectComboBoxClass.js

@@ -0,0 +1,692 @@
+import { compose, compareArraysUnordered } from '@descope-ui/common/utils';
+import {
+  forwardAttrs,
+  getComponentName,
+  observeAttributes,
+  observeChildren,
+} from '@descope-ui/common/components-helpers';
+import {
+  resetInputLabelPosition,
+  resetInputCursor,
+  resetInputPlaceholder,
+  resetInputReadonlyStyle,
+  useHostExternalPadding,
+  inputFloatingLabelStyle,
+} from '@descope-ui/common/theme-helpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  componentNameValidationMixin,
+  portalMixin,
+  proxyInputMixin,
+  changeMixin,
+} from '@descope-ui/common/components-mixins';
+
+export const componentName = getComponentName('multi-select-combo-box');
+
+const multiSelectComboBoxMixin = (superclass) =>
+  class MultiSelectComboBoxMixinClass extends superclass {
+    static get observedAttributes() {
+      return ['readonly'];
+    }
+
+    #renderItem = ({ displayName, value, label }) => {
+      const ele = document.createElement('span');
+      ele.setAttribute('data-name', label);
+      ele.setAttribute('data-id', value);
+      ele.textContent = displayName || label;
+
+      return ele.outerHTML;
+    };
+
+    #data;
+
+    #value = [];
+
+    get defaultValues() {
+      const defaultValuesAttr = this.getAttribute('default-values');
+      if (defaultValuesAttr) {
+        try {
+          const defaultValues = JSON.parse(defaultValuesAttr);
+          if (this.isValidDataType(defaultValues)) {
+            return defaultValues;
+          }
+        } catch (e) {
+          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) {
+          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 allowCustomValues() {
+      return this.getAttribute('allow-custom-value') === 'true';
+    }
+
+    get minItemsSelection() {
+      return parseInt(this.getAttribute('min-items-selection'), 10) || 0;
+    }
+
+    get maxItemsSelection() {
+      return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
+    }
+
+    isValidDataType(data) {
+      const isValid = Array.isArray(data);
+      if (!isValid) {
+        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;
+    }
+
+    updateSelectedItems() {
+      const currentSelected =
+        this.baseElement.selectedItems?.map((item) =>
+          item.getAttribute('data-id'),
+        ) || [];
+
+      if (currentSelected.length > 0) {
+        this.value = currentSelected;
+      }
+
+      if (this.value.length === 0) {
+        this.setDefaultValues();
+      }
+    }
+
+    customValueTransformFn(val) {
+      return val;
+    }
+
+    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);
+          },
+        },
+      });
+    }
+
+    #dedupItems(items) {
+      return Array.from(
+        new Map(
+          items.map((item) => [item.getAttribute('data-id'), item]),
+        ).values(),
+      );
+    }
+
+    #onChildrenChange() {
+      const items = Array.from(this.children);
+      const dedupItems = this.#dedupItems(items);
+
+      if (items.length) {
+        this.removeAttribute('has-no-options');
+
+        dedupItems.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 = dedupItems;
+
+        setTimeout(() => {
+          this.updateSelectedItems();
+        }, 0);
+      } else {
+        this.baseElement.items = [];
+        this.setAttribute('has-no-options', '');
+      }
+
+      this.baseElement.renderer = (root, combo, model) => {
+        root.innerHTML = model.item.outerHTML;
+      };
+    }
+
+    #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.allowCustomValues) {
+        this.baseElement.addEventListener('custom-value-set', (e) => {
+          const newItemHtml = this.#renderItem({
+            label: e.detail,
+            displayName: e.detail,
+            value: e.detail,
+          });
+          this.innerHTML += newItemHtml;
+          this.baseElement._lastFilter = '';
+          setTimeout(() => {
+            this.value = [...this.value, e.detail];
+          }, 0);
+        });
+      }
+    }
+
+    setGetValidity() {
+      this.getValidity = function () {
+        if (this.pattern) {
+          const patternRegex = new RegExp(this.pattern);
+          if (this.value.some((val) => !patternRegex.test(val)))
+            return {
+              patternMismatch: true,
+            };
+        }
+
+        if (this.isRequired && !this.value.length) {
+          return {
+            valueMissing: true,
+          };
+        }
+        if (
+          this.isRequired &&
+          this.minItemsSelection &&
+          this.value.length < this.minItemsSelection
+        ) {
+          return {
+            rangeUnderflow: true,
+          };
+        }
+        if (
+          this.maxItemsSelection &&
+          this.value.length > this.maxItemsSelection
+        ) {
+          return {
+            rangeOverflow: true,
+          };
+        }
+        return {};
+      };
+
+      const that = this;
+
+      this.baseElement.checkValidity = () => that.validity.valid;
+    }
+
+    init() {
+      super.init?.();
+
+      this.setGetValidity();
+
+      this.#handleCustomValues();
+
+      this.renderItems();
+
+      observeAttributes(this, this.renderItems.bind(this), {
+        includeAttrs: ['data'],
+      });
+
+      observeChildren(this, this.#onChildrenChange.bind(this));
+
+      forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });
+
+      setTimeout(() => {
+        this.setComboBoxDescriptor();
+        this.#overrideOverlaySettings();
+      });
+
+      this.setDefaultValues();
+
+      this.baseElement.addEventListener('selected-items-changed', () => {
+        this.#updateInternalValue();
+        this.dispatchEvent(new CustomEvent('input', { bubbles: true }));
+      });
+    }
+
+    setDefaultValues() {
+      const initialDefaultValues = this.defaultValues;
+      if (initialDefaultValues.length > 0) {
+        this.value = this.defaultValues;
+      }
+    }
+
+    #updateInternalValue() {
+      this.#value =
+        this.baseElement.selectedItems?.map((elem) =>
+          elem.getAttribute('data-id'),
+        ) || [];
+    }
+
+    set value(vals) {
+      if (vals && vals.length > 0) {
+        const selectedChildren = this.baseElement.items?.filter((item) =>
+          vals.includes(item['data-id']),
+        );
+
+        if (this.allowCustomValues) {
+          const existingValues =
+            selectedChildren?.map((child) => child.getAttribute('data-id')) ||
+            [];
+          const missingValues = vals.filter(
+            (val) => !existingValues.includes(val),
+          );
+
+          if (missingValues.length) {
+            const newItemsHtml = missingValues.reduce((acc, val) => {
+              const newItemHtml = this.#renderItem({
+                label: val,
+                displayName: val,
+                value: val,
+              });
+              return acc + newItemHtml;
+            }, '');
+            this.innerHTML += newItemsHtml;
+
+            setTimeout(() => {
+              this.value = vals;
+            }, 0);
+            return;
+          }
+        }
+
+        const newSelectedValues =
+          selectedChildren?.map((child) => child.getAttribute('data-id')) || [];
+        if (!compareArraysUnordered(this.#value, newSelectedValues)) {
+          this.baseElement.selectedItems = selectedChildren;
+        }
+      } else {
+        this.baseElement.selectedItems = [];
+      }
+    }
+
+    get value() {
+      return this.#value;
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+      if (attrName === 'readonly') {
+        this.onReadOnlyChange(newValue !== null && newValue === 'true');
+      }
+    }
+
+    onReadOnlyChange(val) {
+      if (val) {
+        this.baseElement?.shadowRoot
+          ?.querySelector('vaadin-multi-select-combo-box-internal')
+          ?.setAttribute('inert', val);
+      } else {
+        this.baseElement?.shadowRoot
+          ?.querySelector('vaadin-multi-select-combo-box-internal')
+          ?.removeAttribute('inert');
+      }
+    }
+  };
+
+const {
+  host,
+  inputField,
+  inputElement,
+  placeholder,
+  toggle,
+  clearButton,
+  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)' },
+  clearButton: { selector: '::part(clear-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' },
+      fontSize: [{}, host],
+      chipFontSize: { ...chipLabel, property: 'font-size' },
+      fontFamily: [
+        label,
+        placeholder,
+        inputField,
+        helperText,
+        errorMessage,
+        chipLabel,
+      ],
+      labelFontSize: { ...label, property: 'font-size' },
+      labelFontWeight: { ...label, property: 'font-weight' },
+      inputValueFontWeight: { ...inputField, property: 'font-weight' },
+      inputPlaceholderFontWeight: { ...placeholder, property: 'font-weight' },
+      helperTextFontWeight: { ...helperText, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage, property: 'font-weight' },
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: {
+        ...errorMessage,
+        property: 'padding-inline-start',
+      },
+      errorMessageIconRepeat: {
+        ...errorMessage,
+        property: 'background-repeat',
+      },
+      errorMessageIconPosition: {
+        ...errorMessage,
+        property: 'background-position',
+      },
+      errorMessageFontSize: { ...errorMessage, property: 'font-size' },
+      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' },
+        { ...clearButton, property: 'cursor' },
+      ],
+      inputDropdownButtonColor: [
+        { ...toggle, property: 'color' },
+        { ...clearButton, property: 'color' },
+      ],
+      inputDropdownButtonSize: [
+        { ...toggle, property: 'font-size' },
+        { ...clearButton, 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' },
+      ],
+
+      labelPosition: { ...label, property: 'position' },
+      labelTopPosition: { ...label, property: 'top' },
+      labelLeftPosition: { ...label, property: 'left' },
+      labelHorizontalPosition: [
+        { ...label, property: 'left' },
+        { ...label, property: 'right' },
+      ],
+      inputTransformY: { ...label, property: 'transform' },
+      inputTransition: { ...label, property: 'transition' },
+      marginInlineStart: { ...label, property: 'margin-inline-start' },
+      placeholderOpacity: { ...placeholder, property: 'opacity' },
+      inputVerticalAlignment: { ...inputField, property: 'align-items' },
+
+      overlayBackground: {
+        property: () =>
+          MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,
+      },
+      overlayTextColor: {
+        property: () => MultiSelectComboBoxClass.cssVarList.overlay.textColor,
+      },
+      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' },
+      textColor: {
+        selector: 'vaadin-multi-select-combo-box-item',
+        property: 'color',
+      },
+      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',
+  }),
+  changeMixin,
+  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;
+		}
+		vaadin-multi-select-combo-box[readonly] [slot="input"] {
+      flex-grow: 1;
+      flex-basis: 4em;
+		}
+
+		::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;
+    }
+
+    ${inputFloatingLabelStyle()}
+
+    vaadin-multi-select-combo-box::part(toggle-button),
+    vaadin-multi-select-combo-box::part(clear-button) {
+      align-self: center;
+    }
+
+    vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
+      opacity: 0;
+    }
+    vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
+      opacity: 0;
+    }
+
+		`,
+    excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder', 'style'],
+    componentName,
+    includeForwardProps: ['items', 'renderer', 'selectedItems'],
+  }),
+);

package/src/component/index.js

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