@vaadin/multi-select-combo-box 23.1.0-alpha3 → 23.1.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -33,18 +33,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "23.1.0-alpha3",
-    "@vaadin/component-base": "23.1.0-alpha3",
-    "@vaadin/field-base": "23.1.0-alpha3",
-    "@vaadin/input-container": "23.1.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
+    "@vaadin/combo-box": "23.1.0-alpha4",
+    "@vaadin/component-base": "23.1.0-alpha4",
+    "@vaadin/field-base": "23.1.0-alpha4",
+    "@vaadin/input-container": "23.1.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
 }

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

@@ -31,12 +31,12 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
   static get properties() {
     return {
       label: {
-        type: String
+        type: String,
       },
 
       item: {
-        type: Object
-      }
+        type: Object,
+      },
     };
   }
 
@@ -73,11 +73,11 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
     this.dispatchEvent(
       new CustomEvent('item-removed', {
         detail: {
-          item: this.item
+          item: this.item,
         },
         bubbles: true,
-        composed: true
-      })
+        composed: true,
+      }),
     );
   }
 }

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

@@ -16,8 +16,8 @@ registerStyles(
     }
   `,
   {
-    moduleId: 'vaadin-multi-select-combo-box-container-styles'
-  }
+    moduleId: 'vaadin-multi-select-combo-box-container-styles',
+  },
 );
 
 let memoizedTemplate;

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

@@ -51,8 +51,8 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
   static get properties() {
     return {
       _target: {
-        type: Object
-      }
+        type: Object,
+      },
     };
   }
 
@@ -65,6 +65,17 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     return this.querySelector('[part="clear-button"]');
   }
 
+  /**
+   * Override method inherited from the combo-box
+   * to allow opening dropdown when readonly.
+   * @override
+   */
+  open() {
+    if (!this.disabled && !(this.readonly && this._getOverlayItems().length === 0)) {
+      this.opened = true;
+    }
+  }
+
   /**
    * @protected
    * @override
@@ -113,6 +124,11 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
    * @override
    */
   _closeOrCommit() {
+    if (this.readonly) {
+      this.close();
+      return;
+    }
+
     if (this.__enterPressed) {
       this.__enterPressed = null;
 
@@ -127,6 +143,49 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     super._closeOrCommit();
   }
 
+  /**
+   * 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 {FocusEvent} event
+   * @protected
+   * @override
+   */
+  _onFocusout(event) {
+    super._onFocusout(event);
+
+    if (this.readonly && !this._closeOnBlurIsPrevented) {
+      this.close();
+    }
+  }
+
   /**
    * @param {CustomEvent} event
    * @protected
@@ -135,6 +194,11 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
   _overlaySelectedItemChanged(event) {
     event.stopPropagation();
 
+    // Do not un-select on click when readonly
+    if (this.readonly) {
+      return;
+    }
+
     if (event.detail.item instanceof ComboBoxPlaceholder) {
       return;
     }
@@ -143,9 +207,9 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
       this.dispatchEvent(
         new CustomEvent('combo-box-item-selected', {
           detail: {
-            item: event.detail.item
-          }
-        })
+            item: event.detail.item,
+          },
+        }),
       );
     }
   }

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

@@ -16,7 +16,7 @@ registerStyles(
       );
     }
   `,
-  { moduleId: 'vaadin-multi-select-combo-box-overlay-styles' }
+  { moduleId: 'vaadin-multi-select-combo-box-overlay-styles' },
 );
 
 /**

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

@@ -23,9 +23,20 @@ class MultiSelectComboBoxScroller extends ComboBoxScroller {
       return false;
     }
 
+    if (this.comboBox.readonly) {
+      return false;
+    }
+
     const host = this.comboBox.getRootNode().host;
     return host._findIndex(item, host.selectedItems, itemIdPath) > -1;
   }
+
+  /** @private */
+  __updateElement(el, index) {
+    super.__updateElement(el, index);
+
+    el.toggleAttribute('readonly', this.comboBox.readonly);
+  }
 }
 
 customElements.define(MultiSelectComboBoxScroller.is, MultiSelectComboBoxScroller);

package/src/vaadin-multi-select-combo-box.d.ts

@@ -232,13 +232,13 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
   addEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

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

@@ -46,7 +46,7 @@ const multiSelectComboBox = css`
 `;
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
-  moduleId: 'vaadin-multi-select-combo-box-styles'
+  moduleId: 'vaadin-multi-select-combo-box-styles',
 });
 
 /**
@@ -213,7 +213,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         type: Boolean,
         reflectToAttribute: true,
         observer: '_clearButtonVisibleChanged',
-        value: false
+        value: false,
       },
 
       /**
@@ -221,7 +221,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        * The items can be of either `String` or `Object` type.
        */
       items: {
-        type: Array
+        type: Array,
       },
 
       /**
@@ -229,7 +229,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        * @attr {string} item-label-path
        */
       itemLabelPath: {
-        type: String
+        type: String,
       },
 
       /**
@@ -238,7 +238,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        * @attr {string} item-value-path
        */
       itemValuePath: {
-        type: String
+        type: String,
       },
 
       /**
@@ -246,7 +246,17 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        * @attr {string} item-id-path
        */
       itemIdPath: {
-        type: String
+        type: String,
+      },
+
+      /**
+       * When present, it specifies that the field is read-only.
+       */
+      readonly: {
+        type: Boolean,
+        value: false,
+        observer: '_readonlyChanged',
+        reflectToAttribute: true,
       },
 
       /**
@@ -256,7 +266,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       selectedItems: {
         type: Array,
         value: () => [],
-        notify: true
+        notify: true,
       },
 
       /**
@@ -266,7 +276,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         type: Boolean,
         notify: true,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -276,7 +286,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       pageSize: {
         type: Number,
         value: 50,
-        observer: '_pageSizeChanged'
+        observer: '_pageSizeChanged',
       },
 
       /**
@@ -293,7 +303,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        */
       dataProvider: {
         type: Object,
-        observer: '_dataProviderChanged'
+        observer: '_dataProviderChanged',
       },
 
       /**
@@ -302,7 +312,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        */
       allowCustomValues: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /**
@@ -324,7 +334,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       filter: {
         type: String,
         value: '',
-        notify: true
+        notify: true,
       },
 
       /**
@@ -337,14 +347,14 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       /** @protected */
       _hasValue: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /** @private */
       _overflowItems: {
         type: Array,
-        value: () => []
-      }
+        value: () => [],
+      },
     };
   }
 
@@ -376,7 +386,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         this._setFocusElement(input);
         this.stateTarget = input;
         this.ariaTarget = input;
-      })
+      }),
     );
     this.addController(new LabelledInputController(this.inputElement, this._labelController));
 
@@ -465,6 +475,26 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     }
   }
 
+  /** @private */
+  _readonlyChanged(readonly, oldReadonly) {
+    if (readonly) {
+      this.__savedItems = this.$.comboBox._getOverlayItems();
+      this.$.comboBox._setOverlayItems(Array.from(this.selectedItems));
+
+      // Update chips to hide remove button
+      this._chips.forEach((chip) => {
+        chip.setAttribute('readonly', '');
+      });
+    } else if (oldReadonly) {
+      this.$.comboBox._setOverlayItems(this.__savedItems);
+      this.__savedItems = null;
+
+      this._chips.forEach((chip) => {
+        chip.removeAttribute('readonly');
+      });
+    }
+  }
+
   /** @private */
   _pageSizeChanged(pageSize, oldPageSize) {
     if (Math.floor(pageSize) !== pageSize || pageSize <= 0) {
@@ -484,6 +514,10 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     // Re-render chips
     this.__updateChips();
 
+    if (this.readonly) {
+      this.$.comboBox._setOverlayItems(selectedItems);
+    }
+
     // Re-render scroller
     this.$.comboBox.$.dropdown._scroller.requestContentUpdate();
 
@@ -593,6 +627,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
     chip.item = item;
     chip.toggleAttribute('disabled', this.disabled);
+    chip.toggleAttribute('readonly', this.readonly);
 
     const label = this._getItemLabel(item, this.itemLabelPath);
     chip.label = label;
@@ -719,8 +754,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       new CustomEvent('custom-values-set', {
         detail: event.detail,
         composed: true,
-        bubbles: true
-      })
+        bubbles: true,
+      }),
     );
   }
 

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

@@ -22,7 +22,7 @@ const chip = css`
     cursor: var(--lumo-clickable-cursor);
   }
 
-  :host(:not([part~='overflow'])) {
+  :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
     padding-inline-end: 0;
   }
 
@@ -88,13 +88,18 @@ const chip = css`
     content: var(--lumo-icons-cross);
   }
 
-  :host([disabled]) [part] {
+  :host([disabled]) [part='label'] {
     color: var(--lumo-disabled-text-color);
     -webkit-text-fill-color: var(--lumo-disabled-text-color);
     pointer-events: none;
   }
+
+  :host([readonly]) [part='remove-button'],
+  :host([disabled]) [part='remove-button'] {
+    display: none;
+  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {
-  moduleId: 'lumo-multi-select-combo-box-chip'
+  moduleId: 'lumo-multi-select-combo-box-chip',
 });

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

@@ -10,6 +10,21 @@ import '@vaadin/vaadin-lumo-styles/typography.js';
 import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+registerStyles(
+  'vaadin-multi-select-combo-box-item',
+  css`
+    @media (any-hover: hover) {
+      :host(:hover[readonly]) {
+        background-color: transparent;
+        cursor: default;
+      }
+    }
+  `,
+  {
+    moduleId: 'lumo-multi-select-combo-box-item',
+  },
+);
+
 const multiSelectComboBox = css`
   :host([has-value]) {
     padding-inline-start: 0;
@@ -26,8 +41,13 @@ const multiSelectComboBox = css`
   [part='toggle-button']::before {
     content: var(--lumo-icons-dropdown);
   }
+
+  :host([readonly][has-value]) [part='toggle-button'] {
+    color: var(--lumo-contrast-60pct);
+    cursor: var(--lumo-clickable-cursor);
+  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
-  moduleId: 'lumo-multi-select-combo-box'
+  moduleId: 'lumo-multi-select-combo-box',
 });

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

@@ -13,17 +13,20 @@ const chip = css`
   :host {
     height: 1.25rem;
     margin-inline-end: 0.25rem;
-    padding-inline-start: 0.5rem;
+    padding: 0 0.5rem;
     border-radius: 4px;
     background-color: hsla(214, 53%, 23%, 0.1);
     cursor: default;
     font-family: var(--material-font-family);
   }
 
+  :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
+    padding-inline-end: 0;
+  }
+
   :host([part~='overflow']) {
     position: relative;
     margin-inline-start: 0.5rem;
-    padding-inline-end: 0.5rem;
   }
 
   :host([part~='overflow'])::before,
@@ -85,22 +88,18 @@ const chip = css`
     content: var(--material-icons-clear);
   }
 
-  /* Disabled */
-  :host([disabled]) [part] {
-    pointer-events: none;
-  }
-
   :host([disabled]) [part='label'] {
     color: var(--material-disabled-text-color);
     -webkit-text-fill-color: var(--material-disabled-text-color);
+    pointer-events: none;
   }
 
+  :host([readonly]) [part='remove-button'],
   :host([disabled]) [part='remove-button'] {
-    color: hsla(0, 0%, 100%, 0.75);
-    -webkit-text-fill-color: hsla(0, 0%, 100%, 0.75);
+    display: none;
   }
 `;
 
 registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {
-  moduleId: 'material-multi-select-combo-box-chip'
+  moduleId: 'material-multi-select-combo-box-chip',
 });

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

@@ -9,6 +9,21 @@ import '@vaadin/vaadin-material-styles/typography.js';
 import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+registerStyles(
+  'vaadin-multi-select-combo-box-item',
+  css`
+    @media (any-hover: hover) {
+      :host(:hover[readonly]) {
+        background-color: transparent;
+        cursor: default;
+      }
+    }
+  `,
+  {
+    moduleId: 'material-multi-select-combo-box-item',
+  },
+);
+
 const multiSelectComboBox = css`
   :host([readonly]) [part~='chip'] {
     opacity: 0.5;
@@ -30,8 +45,12 @@ const multiSelectComboBox = css`
   :host([opened]) [part='toggle-button'] {
     transform: rotate(180deg);
   }
+
+  :host([readonly][has-value]) [part='toggle-button'] {
+    color: var(--material-secondary-text-color);
+  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
-  moduleId: 'material-multi-select-combo-box'
+  moduleId: 'material-multi-select-combo-box',
 });