@vaadin/multi-select-combo-box 25.0.0-alpha18 → 25.0.0-alpha19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.0.0-alpha18",
+  "version": "25.0.0-alpha19",
   "publishConfig": {
     "access": "public"
   },
@@ -36,27 +36,27 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha18",
-    "@vaadin/combo-box": "25.0.0-alpha18",
-    "@vaadin/component-base": "25.0.0-alpha18",
-    "@vaadin/field-base": "25.0.0-alpha18",
-    "@vaadin/input-container": "25.0.0-alpha18",
-    "@vaadin/item": "25.0.0-alpha18",
-    "@vaadin/lit-renderer": "25.0.0-alpha18",
-    "@vaadin/overlay": "25.0.0-alpha18",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha18",
+    "@vaadin/a11y-base": "25.0.0-alpha19",
+    "@vaadin/combo-box": "25.0.0-alpha19",
+    "@vaadin/component-base": "25.0.0-alpha19",
+    "@vaadin/field-base": "25.0.0-alpha19",
+    "@vaadin/input-container": "25.0.0-alpha19",
+    "@vaadin/item": "25.0.0-alpha19",
+    "@vaadin/lit-renderer": "25.0.0-alpha19",
+    "@vaadin/overlay": "25.0.0-alpha19",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha19",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha18",
-    "@vaadin/test-runner-commands": "25.0.0-alpha18",
+    "@vaadin/chai-plugins": "25.0.0-alpha19",
+    "@vaadin/test-runner-commands": "25.0.0-alpha19",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha18",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha19",
     "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "cb5cafb5687a117ebead1b81e2116991cec13abe"
+  "gitHead": "1f9af1ce5f0bae8daff044176c8a8df697763881"
 }

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

@@ -13,6 +13,7 @@ import type { ComboBoxBaseMixinClass } from '@vaadin/combo-box/src/vaadin-combo-
 import type { ComboBoxDataProviderMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js';
 import type { ComboBoxItemsMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
@@ -31,11 +32,11 @@ export type MultiSelectComboBoxRenderer<TItem> = (
 ) => void;
 
 export interface MultiSelectComboBoxI18n {
-  cleared: string;
-  focused: string;
-  selected: string;
-  deselected: string;
-  total: string;
+  cleared?: string;
+  focused?: string;
+  selected?: string;
+  deselected?: string;
+  total?: string;
 }
 
 export declare function MultiSelectComboBoxMixin<TItem, T extends Constructor<HTMLElement>>(
@@ -49,6 +50,7 @@ export declare function MultiSelectComboBoxMixin<TItem, T extends Constructor<HT
   Constructor<DisabledMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<FocusMixinClass> &
+  Constructor<I18nMixinClass<MultiSelectComboBoxI18n>> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputControlMixinClass> &
   Constructor<InputMixinClass> &
@@ -97,12 +99,12 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
   itemIdPath: string;
 
   /**
-   * The object used to localize this component.
-   * To change the default localization, replace the entire
-   * _i18n_ object or just the property you want to modify.
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
    * The object has the following JSON structure and default values:
-   * ```
+   * ```js
    * {
    *   // Screen reader announcement on clear button click.
    *   cleared: 'Selection cleared',

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

@@ -7,6 +7,7 @@ import { announce } from '@vaadin/a11y-base/src/announce.js';
 import { ComboBoxDataProviderMixin } from '@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js';
 import { ComboBoxItemsMixin } from '@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js';
 import { ComboBoxPlaceholder } from '@vaadin/combo-box/src/vaadin-combo-box-placeholder.js';
+import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
@@ -14,16 +15,26 @@ import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 
+const DEFAULT_I18N = {
+  cleared: 'Selection cleared',
+  focused: 'focused. Press Backspace to remove',
+  selected: 'added to selection',
+  deselected: 'removed from selection',
+  total: '{count} items selected',
+};
+
 /**
  * @polymerMixin
  * @mixes ComboBoxDataProviderMixin
  * @mixes ComboBoxItemsMixin
+ * @mixes I18nMixin
  * @mixes InputControlMixin
  * @mixes ResizeMixin
  */
 export const MultiSelectComboBoxMixin = (superClass) =>
-  class MultiSelectComboBoxMixinClass extends ComboBoxDataProviderMixin(
-    ComboBoxItemsMixin(InputControlMixin(ResizeMixin(superClass))),
+  class MultiSelectComboBoxMixinClass extends I18nMixin(
+    DEFAULT_I18N,
+    ComboBoxDataProviderMixin(ComboBoxItemsMixin(InputControlMixin(ResizeMixin(superClass)))),
   ) {
     static get properties() {
       return {
@@ -72,43 +83,6 @@ export const MultiSelectComboBoxMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * The object used to localize this component.
-         * To change the default localization, replace the entire
-         * _i18n_ object or just the property you want to modify.
-         *
-         * The object has the following JSON structure and default values:
-         * ```
-         * {
-         *   // Screen reader announcement on clear button click.
-         *   cleared: 'Selection cleared',
-         *   // Screen reader announcement when a chip is focused.
-         *   focused: ' focused. Press Backspace to remove',
-         *   // Screen reader announcement when item is selected.
-         *   selected: 'added to selection',
-         *   // Screen reader announcement when item is deselected.
-         *   deselected: 'removed from selection',
-         *   // Screen reader announcement of the selected items count.
-         *   // {count} is replaced with the actual count of items.
-         *   total: '{count} items selected',
-         * }
-         * ```
-         * @type {!MultiSelectComboBoxI18n}
-         * @default {English/US}
-         */
-        i18n: {
-          type: Object,
-          value: () => {
-            return {
-              cleared: 'Selection cleared',
-              focused: 'focused. Press Backspace to remove',
-              selected: 'added to selection',
-              deselected: 'removed from selection',
-              total: '{count} items selected',
-            };
-          },
-        },
-
         /**
          * When true, filter string isn't cleared after selecting an item.
          */
@@ -244,6 +218,37 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       ];
     }
 
+    /**
+     * The object used to localize this component. To change the default
+     * localization, replace this with an object that provides all properties, or
+     * just the individual properties you want to change.
+     *
+     * The object has the following JSON structure and default values:
+     * ```js
+     * {
+     *   // Screen reader announcement on clear button click.
+     *   cleared: 'Selection cleared',
+     *   // Screen reader announcement when a chip is focused.
+     *   focused: ' focused. Press Backspace to remove',
+     *   // Screen reader announcement when item is selected.
+     *   selected: 'added to selection',
+     *   // Screen reader announcement when item is deselected.
+     *   deselected: 'removed from selection',
+     *   // Screen reader announcement of the selected items count.
+     *   // {count} is replaced with the actual count of items.
+     *   total: '{count} items selected',
+     * }
+     * ```
+     * @return {!MultiSelectComboBoxI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     /** @protected */
     get slotStyles() {
       const tag = this.localName;
@@ -384,7 +389,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     clear() {
       this.__updateSelection([]);
 
-      announce(this.i18n.cleared);
+      announce(this.__effectiveI18n.cleared);
     }
 
     /**
@@ -750,8 +755,8 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     /** @private */
     __announceItem(itemLabel, isSelected, itemCount) {
       const state = isSelected ? 'selected' : 'deselected';
-      const total = this.i18n.total.replace('{count}', itemCount || 0);
-      announce(`${itemLabel} ${this.i18n[state]} ${total}`);
+      const total = this.__effectiveI18n.total.replace('{count}', itemCount || 0);
+      announce(`${itemLabel} ${this.__effectiveI18n[state]} ${total}`);
     }
 
     /** @private */
@@ -1218,7 +1223,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
         if (focusedIndex > -1) {
           const item = chips[focusedIndex].item;
           const itemLabel = this._getItemLabel(item);
-          announce(`${itemLabel} ${this.i18n.focused}`);
+          announce(`${itemLabel} ${this.__effectiveI18n.focused}`);
         }
       }
     }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.0.0-alpha18",
+  "version": "25.0.0-alpha19",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -109,6 +109,15 @@
                 ]
               }
             },
+            {
+              "name": "i18n",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "value": {
+                "type": [
+                  "Object"
+                ]
+              }
+            },
             {
               "name": "autofocus",
               "description": "Specify that this control should have input focus when the page loads.",
@@ -485,6 +494,15 @@
                   ]
                 }
               },
+              {
+                "name": "i18n",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  // Screen reader announcement on clear button click.\n  cleared: 'Selection cleared',\n  // Screen reader announcement when a chip is focused.\n  focused: ' focused. Press Backspace to remove',\n  // Screen reader announcement when item is selected.\n  selected: 'added to selection',\n  // Screen reader announcement when item is deselected.\n  deselected: 'removed from selection',\n  // Screen reader announcement of the selected items count.\n  // {count} is replaced with the actual count of items.\n  total: '{count} items selected',\n}\n```",
+                "value": {
+                  "type": [
+                    "MultiSelectComboBoxI18n"
+                  ]
+                }
+              },
               {
                 "name": "autofocus",
                 "description": "Specify that this control should have input focus when the page loads.",
@@ -694,15 +712,6 @@
                   ]
                 }
               },
-              {
-                "name": "i18n",
-                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n```\n{\n  // Screen reader announcement on clear button click.\n  cleared: 'Selection cleared',\n  // Screen reader announcement when a chip is focused.\n  focused: ' focused. Press Backspace to remove',\n  // Screen reader announcement when item is selected.\n  selected: 'added to selection',\n  // Screen reader announcement when item is deselected.\n  deselected: 'removed from selection',\n  // Screen reader announcement of the selected items count.\n  // {count} is replaced with the actual count of items.\n  total: '{count} items selected',\n}\n```",
-                "value": {
-                  "type": [
-                    "MultiSelectComboBoxI18n"
-                  ]
-                }
-              },
               {
                 "name": "keepFilter",
                 "description": "When true, filter string isn't cleared after selecting an item.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.0.0-alpha18",
+  "version": "25.0.0-alpha19",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -187,6 +187,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".i18n",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  // Screen reader announcement on clear button click.\n  cleared: 'Selection cleared',\n  // Screen reader announcement when a chip is focused.\n  focused: ' focused. Press Backspace to remove',\n  // Screen reader announcement when item is selected.\n  selected: 'added to selection',\n  // Screen reader announcement when item is deselected.\n  deselected: 'removed from selection',\n  // Screen reader announcement of the selected items count.\n  // {count} is replaced with the actual count of items.\n  total: '{count} items selected',\n}\n```",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".label",
               "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
@@ -264,13 +271,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": ".i18n",
-              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n```\n{\n  // Screen reader announcement on clear button click.\n  cleared: 'Selection cleared',\n  // Screen reader announcement when a chip is focused.\n  focused: ' focused. Press Backspace to remove',\n  // Screen reader announcement when item is selected.\n  selected: 'added to selection',\n  // Screen reader announcement when item is deselected.\n  deselected: 'removed from selection',\n  // Screen reader announcement of the selected items count.\n  // {count} is replaced with the actual count of items.\n  total: '{count} items selected',\n}\n```",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": ".selectedItems",
               "description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",