@vaadin/multi-select-combo-box 25.0.0-alpha1 → 25.0.0-alpha11

package/src/vaadin-multi-select-combo-box-internal-mixin.js

@@ -1,449 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { ComboBoxDataProviderMixin } from '@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js';
-import { ComboBoxMixin } from '@vaadin/combo-box/src/vaadin-combo-box-mixin.js';
-import { ComboBoxPlaceholder } from '@vaadin/combo-box/src/vaadin-combo-box-placeholder.js';
-
-/**
- * @polymerMixin
- * @mixes ComboBoxDataProviderMixin
- * @mixes ComboBoxMixin
- */
-export const MultiSelectComboBoxInternalMixin = (superClass) =>
-  class MultiSelectComboBoxInternalMixinClass extends ComboBoxDataProviderMixin(ComboBoxMixin(superClass)) {
-    static get properties() {
-      return {
-        /**
-         * A subset of items, filtered based on the user input.
-         */
-        filteredItems: {
-          type: Array,
-          notify: true,
-          sync: true,
-        },
-
-        /**
-         * When true, filter string isn't cleared after selecting an item.
-         */
-        keepFilter: {
-          type: Boolean,
-          value: false,
-        },
-
-        /**
-         * When set to `true`, "loading" attribute is set
-         * on the host and the overlay element.
-         * @type {boolean}
-         */
-        loading: {
-          type: Boolean,
-          notify: true,
-          sync: true,
-        },
-
-        /**
-         * Total number of items.
-         * @type {number | undefined}
-         */
-        size: {
-          type: Number,
-          notify: true,
-          observer: '_sizeChanged',
-          sync: true,
-        },
-
-        /**
-         * Selected items to render in the dropdown
-         * when the component is read-only.
-         */
-        selectedItems: {
-          type: Array,
-          value: () => [],
-        },
-
-        /**
-         * Set to true to group selected items at the top of the overlay.
-         * @attr {boolean} selected-items-on-top
-         */
-        selectedItemsOnTop: {
-          type: Boolean,
-          value: false,
-          sync: true,
-        },
-
-        /**
-         * Last input value entered by the user before value is updated.
-         * Used to store `filter` property value before clearing it.
-         */
-        lastFilter: {
-          type: String,
-          notify: true,
-          sync: true,
-        },
-
-        /**
-         * A subset of items to be shown at the top of the overlay.
-         */
-        topGroup: {
-          type: Array,
-          observer: '_topGroupChanged',
-          sync: true,
-        },
-
-        _target: {
-          type: Object,
-        },
-      };
-    }
-
-    static get observers() {
-      return ['_readonlyChanged(readonly)'];
-    }
-
-    /**
-     * Reference to the clear button element.
-     * @protected
-     * @return {!HTMLElement}
-     */
-    get clearElement() {
-      return this.querySelector('[part="clear-button"]');
-    }
-
-    /**
-     * Tag name prefix used by scroller and items.
-     * @protected
-     * @return {string}
-     */
-    get _tagNamePrefix() {
-      return 'vaadin-multi-select-combo-box';
-    }
-
-    constructor() {
-      super();
-
-      this.addEventListener('custom-value-set', this.__onCustomValueSet.bind(this));
-    }
-
-    /**
-     * Override method inherited from the combo-box
-     * to allow opening dropdown when readonly.
-     * @override
-     */
-    open() {
-      if (!this.disabled && !(this.readonly && this.selectedItems.length === 0)) {
-        this.opened = true;
-      }
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this._target = this;
-      this._toggleElement = this.querySelector('.toggle-button');
-    }
-
-    /** @protected */
-    _updateOverlayWidth() {
-      this.$.overlay._updateOverlayWidth();
-    }
-
-    /** @private */
-    _readonlyChanged() {
-      this._setDropdownItems(this.filteredItems);
-    }
-
-    /**
-     * Override combo-box method to group selected
-     * items at the top of the overlay.
-     *
-     * @protected
-     * @override
-     */
-    _setDropdownItems(items) {
-      if (this.readonly) {
-        super._setDropdownItems(this.selectedItems);
-        return;
-      }
-
-      if (this.filter || !this.selectedItemsOnTop) {
-        super._setDropdownItems(items);
-        return;
-      }
-
-      if (items && items.length && this.topGroup && this.topGroup.length) {
-        // Filter out items included to the top group.
-        const filteredItems = items.filter(
-          (item) => this._comboBox._findIndex(item, this.topGroup, this.itemIdPath) === -1,
-        );
-
-        super._setDropdownItems(this.topGroup.concat(filteredItems));
-        return;
-      }
-
-      super._setDropdownItems(items);
-    }
-
-    /** @private */
-    _topGroupChanged(topGroup) {
-      if (topGroup) {
-        this._setDropdownItems(this.filteredItems);
-      }
-    }
-
-    /**
-     * Override combo-box method to set correct owner for using by item renderers.
-     * This needs to be done before the scroller gets added to the DOM to ensure
-     * Lit directive works in case when combo-box is opened using attribute.
-     *
-     * @protected
-     * @override
-     */
-    _initScroller() {
-      const comboBox = this.getRootNode().host;
-
-      this._comboBox = comboBox;
-
-      super._initScroller(comboBox);
-    }
-
-    /**
-     * Override Enter handler to keep overlay open
-     * when item is selected or unselected.
-     * @param {!Event} event
-     * @protected
-     * @override
-     */
-    _onEnter(event) {
-      if (this.opened) {
-        // Do not submit the surrounding form.
-        event.preventDefault();
-        // Do not trigger global listeners.
-        event.stopPropagation();
-
-        if (this.readonly) {
-          this.close();
-        } else if (this._hasValidInputValue()) {
-          // Keep selected item focused after committing on Enter.
-          const focusedItem = this._dropdownItems[this._focusedIndex];
-          this._commitValue();
-          this._focusedIndex = this._dropdownItems.indexOf(focusedItem);
-        }
-
-        return;
-      }
-
-      super._onEnter(event);
-    }
-
-    /**
-     * Override Escape handler to not clear
-     * selected items when readonly.
-     * @param {!Event} event
-     * @protected
-     * @override
-     */
-    _onEscape(event) {
-      if (this.readonly) {
-        event.stopPropagation();
-        if (this.opened) {
-          this.close();
-        }
-        return;
-      }
-
-      super._onEscape(event);
-    }
-
-    /**
-     * Override from combo-box to ignore requests to clear the filter if the
-     * keepFilter option is enabled. Exceptions are when the dropdown is closed,
-     * so the filter is still cleared on cancel and focus out.
-     * @protected
-     * @override
-     */
-    _clearFilter() {
-      if (!this.keepFilter || !this.opened) {
-        super._clearFilter();
-      }
-    }
-
-    /**
-     * Override method from combo-box to always clear the filter when reverting
-     * the input value, regardless of the keepFilter option.
-     * @override
-     * @protected
-     */
-    _revertInputValueToValue() {
-      super._revertInputValueToValue();
-      this.filter = '';
-    }
-
-    /**
-     * @protected
-     * @override
-     */
-    _commitValue() {
-      // Store filter value for checking if user input is matching
-      // an item which is already selected, to not un-select it.
-      this.lastFilter = this.filter;
-
-      super._commitValue();
-    }
-
-    /**
-     * Override method inherited from the combo-box
-     * to not update focused item when readonly.
-     * @protected
-     * @override
-     */
-    _onArrowDown() {
-      if (!this.readonly) {
-        super._onArrowDown();
-      } else if (!this.opened) {
-        this.open();
-      }
-    }
-
-    /**
-     * Override method inherited from the combo-box
-     * to not update focused item when readonly.
-     * @protected
-     * @override
-     */
-    _onArrowUp() {
-      if (!this.readonly) {
-        super._onArrowUp();
-      } else if (!this.opened) {
-        this.open();
-      }
-    }
-
-    /**
-     * Override method inherited from the combo-box
-     * to close dropdown on blur when readonly.
-     * @param {boolean} focused
-     * @protected
-     * @override
-     */
-    _setFocused(focused) {
-      // Disable combo-box logic that updates selectedItem
-      // based on the overlay focused index on input blur
-      if (!focused) {
-        this._ignoreCommitValue = true;
-      }
-
-      super._setFocused(focused);
-
-      if (!focused && this.readonly && !this._closeOnBlurIsPrevented) {
-        this.close();
-      }
-    }
-
-    /**
-     * Override method inherited from the combo-box
-     * to not commit an already selected item again
-     * after closing overlay on outside click.
-     * @protected
-     * @override
-     */
-    _onClosed() {
-      this._ignoreCommitValue = true;
-
-      super._onClosed();
-    }
-
-    /**
-     * Override method inherited from the combo-box
-     * to not commit an already selected item again
-     * on blur, which would result in un-selecting.
-     * @protected
-     * @override
-     */
-    _detectAndDispatchChange() {
-      if (this._ignoreCommitValue) {
-        this._ignoreCommitValue = false;
-
-        // Reset internal combo-box state
-        this.clear();
-        this._inputElementValue = '';
-        return;
-      }
-
-      super._detectAndDispatchChange();
-    }
-
-    /**
-     * @param {CustomEvent} event
-     * @protected
-     * @override
-     */
-    _overlaySelectedItemChanged(event) {
-      event.stopPropagation();
-
-      // Do not un-select on click when readonly
-      if (this.readonly) {
-        return;
-      }
-
-      if (event.detail.item instanceof ComboBoxPlaceholder) {
-        return;
-      }
-
-      if (this.opened) {
-        // Store filter value for checking if user input is matching
-        // an item which is already selected, to not un-select it.
-        this.lastFilter = this.filter;
-
-        this.dispatchEvent(
-          new CustomEvent('combo-box-item-selected', {
-            detail: {
-              item: event.detail.item,
-            },
-          }),
-        );
-      }
-    }
-
-    /**
-     * Override method inherited from the combo-box
-     * to not request data provider when read-only.
-     *
-     * @protected
-     * @override
-     */
-    _shouldFetchData() {
-      if (this.readonly) {
-        return false;
-      }
-
-      return super._shouldFetchData();
-    }
-
-    /**
-     * Override method inherited from the combo-box
-     * to not clear the data provider cache when read-only.
-     *
-     * @protected
-     * @override
-     */
-    clearCache() {
-      if (this.readonly) {
-        return;
-      }
-
-      super.clearCache();
-    }
-
-    /** @private */
-    __onCustomValueSet(event) {
-      // Prevent setting custom value on input blur or outside click,
-      // so it can be only committed explicitly by pressing Enter.
-      if (this._ignoreCommitValue) {
-        event.stopImmediatePropagation();
-      }
-    }
-  };

package/src/vaadin-multi-select-combo-box-internal.js

@@ -1,56 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-multi-select-combo-box-item.js';
-import './vaadin-multi-select-combo-box-overlay.js';
-import './vaadin-multi-select-combo-box-scroller.js';
-import { css, html, LitElement } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { MultiSelectComboBoxInternalMixin } from './vaadin-multi-select-combo-box-internal-mixin.js';
-
-/**
- * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes MultiSelectComboBoxInternalMixin
- * @mixes ThemableMixin
- * @private
- */
-class MultiSelectComboBoxInternal extends MultiSelectComboBoxInternalMixin(ThemableMixin(PolylitMixin(LitElement))) {
-  static get is() {
-    return 'vaadin-multi-select-combo-box-internal';
-  }
-
-  static get styles() {
-    return css`
-      :host([opened]) {
-        pointer-events: auto;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <slot></slot>
-
-      <vaadin-multi-select-combo-box-overlay
-        id="overlay"
-        .opened="${this._overlayOpened}"
-        ?loading="${this.loading}"
-        theme="${ifDefined(this._theme)}"
-        .positionTarget="${this._target}"
-        no-vertical-overlap
-        .restoreFocusNode="${this.inputElement}"
-      ></vaadin-multi-select-combo-box-overlay>
-    `;
-  }
-}
-
-defineCustomElement(MultiSelectComboBoxInternal);

package/src/vaadin-multi-select-combo-box-styles.js

@@ -1,74 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-export const multiSelectComboBox = css`
-  :host {
-    max-width: 100%;
-    --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
-    --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px);
-  }
-
-  #chips {
-    display: flex;
-    align-items: center;
-  }
-
-  ::slotted(input) {
-    box-sizing: border-box;
-    flex: 1 0 var(--input-min-width);
-  }
-
-  ::slotted([slot='chip']),
-  ::slotted([slot='overflow']) {
-    flex: 0 1 auto;
-  }
-
-  ::slotted([slot='chip']) {
-    overflow: hidden;
-  }
-
-  :host(:is([readonly], [disabled])) ::slotted(input) {
-    flex-grow: 0;
-    flex-basis: 0;
-    padding: 0;
-  }
-
-  :host([auto-expand-vertically]) #chips {
-    display: contents;
-  }
-
-  :host([auto-expand-horizontally]) [class$='container'] {
-    width: auto;
-  }
-`;
-
-export const multiSelectComboBoxChip = css`
-  :host {
-    display: inline-flex;
-    align-items: center;
-    align-self: center;
-    white-space: nowrap;
-    box-sizing: border-box;
-  }
-
-  [part='label'] {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  :host([hidden]),
-  :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
-    display: none !important;
-  }
-
-  @media (forced-colors: active) {
-    :host {
-      outline: 1px solid;
-      outline-offset: -1px;
-    }
-  }
-`;

package/theme/lumo/vaadin-multi-select-combo-box-chip-styles.d.ts

@@ -1,10 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';

package/theme/lumo/vaadin-multi-select-combo-box-chip-styles.js

@@ -1,107 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { fieldButton } from '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const chip = css`
-  :host {
-    font-size: var(--lumo-font-size-xxs);
-    line-height: 1;
-    color: var(--lumo-body-text-color);
-    border-radius: var(--lumo-border-radius-s);
-    background-color: var(--lumo-contrast-20pct);
-    cursor: var(--lumo-clickable-cursor);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  :host([disabled]) {
-    background-color: var(--lumo-contrast-10pct);
-  }
-
-  :host([focused]) [part='remove-button'] {
-    color: inherit;
-  }
-
-  :host([slot='overflow']) {
-    position: relative;
-    min-width: var(--lumo-size-xxs);
-    margin-inline-start: var(--lumo-space-s);
-  }
-
-  :host([slot='overflow'])::before,
-  :host([slot='overflow'])::after {
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    border-left: calc(var(--lumo-space-s) / 4) solid;
-    border-radius: var(--lumo-border-radius-s);
-    border-color: var(--lumo-contrast-30pct);
-  }
-
-  :host([slot='overflow'])::before {
-    left: calc(-1 * var(--lumo-space-s) / 2);
-  }
-
-  :host([slot='overflow'])::after {
-    left: calc(-1 * var(--lumo-space-s));
-  }
-
-  :host([count='2']) {
-    margin-inline-start: calc(var(--lumo-space-s) / 2);
-  }
-
-  :host([count='2'])::after {
-    display: none;
-  }
-
-  :host([count='1']) {
-    margin-inline-start: 0;
-  }
-
-  :host([count='1'])::before,
-  :host([count='1'])::after {
-    display: none;
-  }
-
-  [part='label'] {
-    font-weight: 500;
-    line-height: 1.25;
-  }
-
-  [part='remove-button'] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: -0.3125em;
-    margin-bottom: -0.3125em;
-    margin-inline-start: auto;
-    width: 1.25em;
-    height: 1.25em;
-    font-size: 1.5em;
-    transition: none;
-  }
-
-  [part='remove-button']::before {
-    content: var(--lumo-icons-cross);
-  }
-
-  :host([disabled]) [part='label'] {
-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
-    pointer-events: none;
-  }
-`;
-
-registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {
-  moduleId: 'lumo-multi-select-combo-box-chip',
-});

package/theme/lumo/vaadin-multi-select-combo-box-styles.d.ts

@@ -1,10 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';