@vaadin/multi-select-combo-box 24.4.0-rc2 → 24.5.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.4.0-rc2",
+  "version": "24.5.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -38,17 +38,17 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-rc2",
-    "@vaadin/combo-box": "24.4.0-rc2",
-    "@vaadin/component-base": "24.4.0-rc2",
-    "@vaadin/field-base": "24.4.0-rc2",
-    "@vaadin/input-container": "24.4.0-rc2",
-    "@vaadin/item": "24.4.0-rc2",
-    "@vaadin/lit-renderer": "24.4.0-rc2",
-    "@vaadin/overlay": "24.4.0-rc2",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-rc2",
-    "@vaadin/vaadin-material-styles": "24.4.0-rc2",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-rc2"
+    "@vaadin/a11y-base": "24.5.0-alpha2",
+    "@vaadin/combo-box": "24.5.0-alpha2",
+    "@vaadin/component-base": "24.5.0-alpha2",
+    "@vaadin/field-base": "24.5.0-alpha2",
+    "@vaadin/input-container": "24.5.0-alpha2",
+    "@vaadin/item": "24.5.0-alpha2",
+    "@vaadin/lit-renderer": "24.5.0-alpha2",
+    "@vaadin/overlay": "24.5.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha2",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -60,5 +60,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ea3d99e8cf67a337e959d5cab849f80464c7c7e5"
+  "gitHead": "403f153bf4351f220cb6172485a0575ddf0d0fba"
 }

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

@@ -231,6 +231,14 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   items: TItem[] | undefined;
 
+  /**
+   * A function used to generate CSS class names for dropdown
+   * items and selected chips based on the item. The return
+   * value should be the generated class name as a string, or
+   * multiple class names separated by whitespace characters.
+   */
+  itemClassNameGenerator: (item: TItem) => string;
+
   /**
    * The item property used for a visual representation of the item.
    * @attr {string} item-label-path

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

@@ -180,6 +180,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
           filtered-items="[[filteredItems]]"
           selected-items="[[selectedItems]]"
           selected-items-on-top="[[selectedItemsOnTop]]"
+          item-class-name-generator="[[itemClassNameGenerator]]"
           top-group="[[_topGroup]]"
           opened="{{opened}}"
           renderer="[[renderer]]"
@@ -279,6 +280,17 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         type: Array,
       },
 
+      /**
+       * A function used to generate CSS class names for dropdown
+       * items and selected chips based on the item. The return
+       * value should be the generated class name as a string, or
+       * multiple class names separated by whitespace characters.
+       */
+      itemClassNameGenerator: {
+        type: Object,
+        observer: '__itemClassNameGeneratorChanged',
+      },
+
       /**
        * The item property used for a visual representation of the item.
        * @attr {string} item-label-path
@@ -761,6 +773,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     }
   }
 
+  /** @private */
+  __itemClassNameGeneratorChanged(generator, oldGenerator) {
+    if (generator || oldGenerator) {
+      this.__updateChips();
+    }
+  }
+
   /** @private */
   _pageSizeChanged(pageSize, oldPageSize) {
     if (Math.floor(pageSize) !== pageSize || pageSize <= 0) {
@@ -934,6 +953,10 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     chip.label = label;
     chip.setAttribute('title', label);
 
+    if (typeof this.itemClassNameGenerator === 'function') {
+      chip.className = this.itemClassNameGenerator(item);
+    }
+
     chip.addEventListener('item-removed', (e) => this._onItemRemoved(e));
     chip.addEventListener('mousedown', (e) => this._preventBlur(e));
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.4.0-rc2",
+  "version": "24.5.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -596,6 +596,17 @@
                   ]
                 }
               },
+              {
+                "name": "itemClassNameGenerator",
+                "description": "A function used to generate CSS class names for dropdown\nitems and selected chips based on the item. The return\nvalue should be the generated class name as a string, or\nmultiple class names separated by whitespace characters.",
+                "value": {
+                  "type": [
+                    "Object",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "itemLabelPath",
                 "description": "The item property used for a visual representation of the item.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.4.0-rc2",
+  "version": "24.5.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -194,6 +194,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".itemClassNameGenerator",
+              "description": "A function used to generate CSS class names for dropdown\nitems and selected chips based on the item. The return\nvalue should be the generated class name as a string, or\nmultiple class names separated by whitespace characters.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".itemLabelPath",
               "description": "The item property used for a visual representation of the item.",