@vaadin/list-box 24.0.0-alpha4 → 24.0.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/list-box",
-  "version": "24.0.0-alpha4",
+  "version": "24.0.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -36,12 +36,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha4",
-    "@vaadin/item": "24.0.0-alpha4",
-    "@vaadin/vaadin-list-mixin": "24.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha4",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha4"
+    "@vaadin/component-base": "24.0.0-alpha6",
+    "@vaadin/item": "24.0.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha6",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -52,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "66be46e82c4d0a673859fbc9bdb1581dd89f360c"
+  "gitHead": "0004ac92b6e5f415b5fa949e0582d1d11e527b1f"
 }

package/src/vaadin-list-box.d.ts

@@ -5,8 +5,8 @@
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { MultiSelectListMixin } from '@vaadin/vaadin-list-mixin/vaadin-multi-select-list-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MultiSelectListMixin } from './vaadin-multi-select-list-mixin.js';
 
 /**
  * Fired when the `items` property changes.

package/src/vaadin-list-box.js

@@ -7,8 +7,8 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
-import { MultiSelectListMixin } from '@vaadin/vaadin-list-mixin/vaadin-multi-select-list-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MultiSelectListMixin } from './vaadin-multi-select-list-mixin.js';
 
 /**
  * `<vaadin-list-box>` is a Web Component for creating menus.

package/src/vaadin-multi-select-list-mixin.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ListMixinClass } from '@vaadin/component-base/src/list-mixin.js';
+
+/**
+ * A mixin for `nav` elements, facilitating multiple selection of childNodes.
+ */
+export declare function MultiSelectListMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ListMixinClass> & Constructor<MultiSelectListMixinClass> & T;
+
+export declare class MultiSelectListMixinClass {
+  /**
+   * Specifies that multiple options can be selected at once.
+   */
+  multiple: boolean | null | undefined;
+
+  /**
+   * Array of indexes of the items selected in the items array
+   * Note: Not updated when used in single selection mode.
+   */
+  selectedValues: number[] | null | undefined;
+}

package/src/vaadin-multi-select-list-mixin.js

@@ -0,0 +1,121 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ListMixin } from '@vaadin/component-base/src/list-mixin.js';
+
+/**
+ * A mixin for `nav` elements, facilitating multiple selection of childNodes.
+ *
+ * @polymerMixin
+ * @mixes ListMixin
+ */
+export const MultiSelectListMixin = (superClass) =>
+  class VaadinMultiSelectListMixin extends ListMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * Specifies that multiple options can be selected at once.
+         */
+        multiple: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+          observer: '_multipleChanged',
+        },
+
+        /**
+         * Array of indexes of the items selected in the items array
+         * Note: Not updated when used in single selection mode.
+         * @type {number[] | null | undefined}
+         */
+        selectedValues: {
+          type: Array,
+          notify: true,
+          value: () => [],
+        },
+      };
+    }
+
+    static get observers() {
+      return [`_enhanceMultipleItems(items, multiple, selected, selectedValues, selectedValues.*)`];
+    }
+
+    /** @protected */
+    ready() {
+      // Should be attached before click listener in list-mixin
+      this.addEventListener('click', (e) => this._onMultipleClick(e));
+
+      super.ready();
+    }
+
+    /** @private */
+    _enhanceMultipleItems(items, multiple, selected, selectedValues) {
+      if (!items || !multiple) {
+        return;
+      }
+
+      if (selectedValues) {
+        const selectedItems = selectedValues.map((selectedId) => items[selectedId]);
+        items.forEach((item) => {
+          item.selected = selectedItems.includes(item);
+        });
+      }
+
+      this._scrollToLastSelectedItem();
+    }
+
+    /** @private */
+    _scrollToLastSelectedItem() {
+      const lastSelectedItem = this.selectedValues.slice(-1)[0];
+      if (lastSelectedItem && !lastSelectedItem.disabled) {
+        this._scrollToItem(lastSelectedItem);
+      }
+    }
+
+    /**
+     * @param {!MouseEvent} event
+     * @protected
+     */
+    _onMultipleClick(event) {
+      const item = this._filterItems(event.composedPath())[0];
+      const idx = item && !item.disabled ? this.items.indexOf(item) : -1;
+      if (idx < 0 || !this.multiple) {
+        return;
+      }
+
+      event.preventDefault();
+      if (this.selectedValues.includes(idx)) {
+        this.selectedValues = this.selectedValues.filter((v) => v !== idx);
+      } else {
+        this.selectedValues = this.selectedValues.concat(idx);
+      }
+    }
+
+    /** @private */
+    _multipleChanged(value, oldValue) {
+      // Changing from multiple to single selection, clear selection.
+      if (!value && oldValue) {
+        this.selectedValues = [];
+        this.items.forEach((item) => {
+          item.selected = false;
+        });
+      }
+
+      // Changing from single to multiple selection, add selected to selectedValues.
+      if (value && !oldValue && this.selected !== undefined) {
+        this.selectedValues = [...this.selectedValues, this.selected];
+        this.selected = undefined;
+      }
+    }
+
+    /**
+     * Fired when the selection is changed.
+     * Not fired in single selection mode.
+     *
+     * @event selected-values-changed
+     * @param {Object} detail
+     * @param {Object} detail.value the array of indexes of the items selected in the items array.
+     */
+  };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/list-box",
-  "version": "24.0.0-alpha4",
+  "version": "24.0.0-alpha6",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/list-box",
-  "version": "24.0.0-alpha4",
+  "version": "24.0.0-alpha6",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {