@progress/kendo-vue-dropdowns 3.7.4-dev.202212020747 → 3.7.4-dev.202301091431

package/dist/es/AutoComplete/AutoComplete.js

@@ -22,7 +22,7 @@ import { List } from './../common/List';
 import DropDownBase from '../common/DropDownBase';
 import { ClearButton } from '../common/ClearButton';
 import { itemIndexStartsWith, getItemValue, areSame, getFocusedItem } from '../common/utils';
-import { guid, Keys, classNames, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
+import { guid, Keys, classNames, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
@@ -676,8 +676,8 @@ var AutoCompleteVue2 = {
     };
     var renderLoading = function renderLoading(cloading) {
       if (cloading) {
-        return h("span", {
-          "class": "k-icon k-input-loading-icon k-i-loading"
+        return h(Icon, {
+          "class": "k-input-loading-icon"
         });
       }
       return h("span");

package/dist/es/ComboBox/ComboBox.js

@@ -18,7 +18,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 import DropDownBase from '../common/DropDownBase';
-import { guid, classNames, Keys, templateRendering, getListeners, getTemplate, kendoThemeMaps, getRef, setRef } from '@progress/kendo-vue-common';
+import { guid, classNames, Keys, templateRendering, getListeners, getTemplate, kendoThemeMaps, getRef, setRef, Icon } from '@progress/kendo-vue-common';
 import { Button as KButton } from '@progress/kendo-vue-buttons';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
@@ -930,8 +930,12 @@ var ComboBoxVue2 = {
         "clearclick": this.clearButtonClick
       },
       key: "clearbutton"
-    }), loading && h("span", {
-      "class": "k-icon k-input-loading-icon k-i-loading",
+    }), loading && h(Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": "k-input-loading-icon",
       key: "loading"
     }),
     // @ts-ignore

package/dist/es/DropDownList/DropDownList.js

@@ -16,7 +16,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { templateRendering, getListeners, classNames, Keys, guid, noop, getTemplate, kendoThemeMaps, getTabIndex, setRef, getRef } from '@progress/kendo-vue-common';
+import { templateRendering, getListeners, classNames, Keys, guid, noop, getTemplate, kendoThemeMaps, getTabIndex, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 import { Button as KButton } from '@progress/kendo-vue-buttons';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
@@ -25,6 +25,8 @@ import { ListFilter } from '../common/ListFilter';
 import { ListDefaultItem } from '../common/ListDefaultItem';
 import { List } from '../common/List';
 import DropDownBase from '../common/DropDownBase';
+import { selectButton, messages } from '../messages/main';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { isPresent, getItemValue, sameCharsOnly, shuffleData, matchText, areSame, preventDefaultNonInputs, getFocusedItem } from '../common/utils';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 /**
@@ -160,6 +162,11 @@ var DropDownListVue2 = {
       }
     }
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   data: function data() {
     return {
       hasMounted: false,
@@ -318,6 +325,11 @@ var DropDownListVue2 = {
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
+    },
+    dropDownListId: {
+      get: function get() {
+        return "value-".concat(this.base.guid).concat(this.$props.ariaDescribedBy ? ' ' + this.$props.ariaDescribedBy : '');
+      }
     }
   },
   methods: {
@@ -695,6 +707,7 @@ var DropDownListVue2 = {
       animate: true,
       height: '200px'
     }, this.$props.popupSettings);
+    var ariaLabelSelectButton = provideLocalizationService(this).toLanguageString(selectButton, messages[selectButton]);
     var _d = this.$props,
       dataItemKey = _d.dataItemKey,
       _e = _d.dataItems,
@@ -710,7 +723,11 @@ var DropDownListVue2 = {
       return areSame(i, value, dataItemKey);
     });
     var valueDefaultRendering = h("span", {
-      "class": "k-input-inner"
+      "class": "k-input-inner",
+      id: this.dropDownListId,
+      attrs: this.v3 ? undefined : {
+        id: this.dropDownListId
+      }
     }, [h("span", {
       "class": "k-input-value-text"
     }, [text])]);
@@ -953,7 +970,7 @@ var DropDownListVue2 = {
         "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
         "aria-label": this.$props.ariaLabel || this.$props.label,
         "aria-labelledby": this.$props.ariaLabelledBy,
-        "aria-describedby": this.$props.ariaDescribedBy,
+        "aria-describedBy": this.dropDownListId,
         title: this.$props.title
       },
       onMousedown: opened ? preventDefaultNonInputs : noop,
@@ -980,10 +997,14 @@ var DropDownListVue2 = {
       "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
       "aria-label": this.$props.ariaLabel || this.$props.label,
       "aria-labelledby": this.$props.ariaLabelledBy,
-      "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-describedBy": this.dropDownListId,
       title: this.$props.title
-    }, [valueElement, loading && h("span", {
-      "class": "k-icon k-input-loading-icon k-i-loading",
+    }, [valueElement, loading && h(Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": "k-input-loading-icon",
       key: "loading"
     }),
     // @ts-ignore
@@ -995,6 +1016,7 @@ var DropDownListVue2 = {
         size: size,
         fillMode: fillMode,
         rounded: null,
+        ariaLabel: ariaLabelSelectButton,
         iconClass: classNames('k-icon', iconClassName ? iconClassName : 'k-i-caret-alt-down'),
         "aria-hidden": true
       },
@@ -1002,6 +1024,7 @@ var DropDownListVue2 = {
       size: size,
       fillMode: fillMode,
       rounded: null,
+      ariaLabel: ariaLabelSelectButton,
       "class": 'k-input-button',
       iconClass: classNames('k-icon', iconClassName ? iconClassName : 'k-i-caret-alt-down'),
       "aria-hidden": true

package/dist/es/MultiSelect/MultiSelect.js

@@ -25,7 +25,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, Keys, guid, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
+import { classNames, Keys, guid, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 import { ListContainer } from '../common/ListContainer';
@@ -36,6 +36,7 @@ import DropDownBase from '../common/DropDownBase';
 import { ClearButton } from '../common/ClearButton';
 import { ActiveDescendant } from './../common/settings';
 import { itemIndexStartsWith, getItemValue, areSame, matchDataCollections, removeDataItems, isPresent, preventDefaultNonInputs } from '../common/utils';
+import { plusIcon } from '@progress/kendo-svg-icons';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var preventDefault = function preventDefault(event) {
   return event.preventDefault();
@@ -860,8 +861,12 @@ var MultiSelectVue2 = {
     };
     var renderLoading = function renderLoading(cloading) {
       if (cloading) {
-        return h("span", {
-          "class": "k-icon k-input-loading-icon k-i-loading"
+        return h(Icon, {
+          name: 'loading',
+          attrs: this.v3 ? undefined : {
+            name: 'loading'
+          },
+          "class": "k-input-loading-icon"
         });
       }
       return h("span");
@@ -889,7 +894,7 @@ var MultiSelectVue2 = {
             expanded: opened,
             owns: this.base.listBoxId,
             activedescendant: ariaActivedescendant,
-            "aria-describedBy": "tagslist-".concat(this.base.guid, " ").concat(this.$props.ariaDescribedBy || ''),
+            "aria-describedBy": "tagslist-".concat(this.base.guid).concat(this.$props.ariaDescribedBy ? ' ' + this.$props.ariaDescribedBy : ''),
             "aria-labelledBy": this.$props.ariaLabelledBy
           },
           size: Math.max((placeholderToShow || '').length, searchText.length, 1),
@@ -912,7 +917,7 @@ var MultiSelectVue2 = {
           expanded: opened,
           owns: this.base.listBoxId,
           activedescendant: ariaActivedescendant,
-          "aria-describedBy": "tagslist-".concat(this.base.guid, " ").concat(this.$props.ariaDescribedBy || ''),
+          "aria-describedBy": "tagslist-".concat(this.base.guid).concat(this.$props.ariaDescribedBy ? ' ' + this.$props.ariaDescribedBy : ''),
           "aria-labelledBy": this.$props.ariaLabelledBy
         })
       );
@@ -1020,8 +1025,13 @@ var MultiSelectVue2 = {
         "class": classNames('k-item k-custom-item', {
           'k-focus': isCustom(focusedType)
         })
-      }, [currentText, h("span", {
-        "class": "k-icon k-i-plus",
+      }, [currentText, h(Icon, {
+        name: "plus",
+        attrs: this.v3 ? undefined : {
+          name: "plus",
+          icon: plusIcon
+        },
+        icon: plusIcon,
         style: {
           float: 'right'
         }

package/dist/es/MultiSelect/TagList.js

@@ -64,9 +64,8 @@ var TagListVue2 = {
         size = _b.size,
         disabled = _b.disabled;
       return _a = {
-        'k-input-values': true,
         'k-chip-list': true
-      }, _a["k-chip-list-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a['k-selection-multiple'] = true, _a['k-disabled'] = disabled, _a;
+      }, _a["k-chip-list-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a['k-disabled'] = disabled, _a;
     }
   },
   // @ts-ignore
@@ -92,6 +91,8 @@ var TagListVue2 = {
       tagsRounded = _a.tagsRounded,
       removeTagIcon = _a.removeTagIcon;
     return h("div", {
+      "class": 'k-input-values'
+    }, [h("div", {
       "class": this.wrapperClass,
       role: "listbox",
       attrs: this.v3 ? undefined : {
@@ -152,7 +153,7 @@ var TagListVue2 = {
           tagdelete: this.onTagDelete
         }
       });
-    }, this), defaultSlot]);
+    }, this), defaultSlot])]);
   }
 };
 /**

package/dist/es/common/ClearButton.js

@@ -4,8 +4,10 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
+import { xIcon } from '@progress/kendo-svg-icons';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, clear } from '../messages/main';
+import { Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -54,8 +56,13 @@ var ClearButtonVue2 = {
       tabindex: -1,
       title: title,
       key: "clearbutton"
-    }, [h("span", {
-      "class": "k-icon k-i-x"
+    }, [h(Icon, {
+      name: "x",
+      attrs: this.v3 ? undefined : {
+        name: "x",
+        icon: xIcon
+      },
+      icon: xIcon
     })]);
   }
 };

package/dist/es/common/ListFilter.js

@@ -4,7 +4,8 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { getRef, kendoThemeMaps, setRef } from '@progress/kendo-vue-common';
+import { getRef, Icon, kendoThemeMaps, setRef } from '@progress/kendo-vue-common';
+import { searchIcon } from '@progress/kendo-svg-icons';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 /**
@@ -80,8 +81,14 @@ var ListFilterVue2 = {
       "class": "k-list-filter"
     }, [h("span", {
       "class": this.spanClass
-    }, [h("span", {
-      "class": "k-input-icon k-icon k-i-search"
+    }, [h(Icon, {
+      name: "search",
+      attrs: this.v3 ? undefined : {
+        name: "search",
+        icon: searchIcon
+      },
+      icon: searchIcon,
+      "class": "k-input-icon"
     }), h("input", {
       ref: setRef(this, 'input'),
       type: "text",

package/dist/es/messages/main.d.ts

@@ -10,6 +10,10 @@ export declare const expandButton = "dropdowns.expandbutton";
  * @hidden
  */
 export declare const clear = "dropdowns.clear";
+/**
+ * @hidden
+ */
+export declare const selectButton = "dropdowns.select";
 /**
  * @hidden
  */
@@ -17,4 +21,5 @@ export declare const messages: {
     "dropdowns.clear": string;
     "dropdowns.expandbutton": string;
     "dropdowns.nodata": string;
+    "dropdowns.select": string;
 };

package/dist/es/messages/main.js

@@ -11,6 +11,10 @@ export var expandButton = 'dropdowns.expandbutton';
  * @hidden
  */
 export var clear = 'dropdowns.clear';
+/**
+ * @hidden
+ */
+export var selectButton = 'dropdowns.select';
 /**
  * @hidden
  */
@@ -18,4 +22,5 @@ export var messages = (_a = {},
     _a[clear] = 'clear',
     _a[expandButton] = 'expand button',
     _a[nodata] = 'NO DATA FOUND.',
+    _a[selectButton] = 'Select',
     _a);

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dropdowns',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1669966396,
+    publishDate: 1673273441,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/AutoComplete/AutoComplete.js

@@ -22,7 +22,7 @@ import { List } from './../common/List.js';
 import DropDownBase from '../common/DropDownBase.js';
 import { ClearButton } from '../common/ClearButton.js';
 import { itemIndexStartsWith, getItemValue, areSame, getFocusedItem } from '../common/utils.js';
-import { guid, Keys, classNames, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
+import { guid, Keys, classNames, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
@@ -676,8 +676,8 @@ var AutoCompleteVue2 = {
     };
     var renderLoading = function renderLoading(cloading) {
       if (cloading) {
-        return h("span", {
-          "class": "k-icon k-input-loading-icon k-i-loading"
+        return h(Icon, {
+          "class": "k-input-loading-icon"
         });
       }
       return h("span");

package/dist/esm/ComboBox/ComboBox.js

@@ -18,7 +18,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 import DropDownBase from '../common/DropDownBase.js';
-import { guid, classNames, Keys, templateRendering, getListeners, getTemplate, kendoThemeMaps, getRef, setRef } from '@progress/kendo-vue-common';
+import { guid, classNames, Keys, templateRendering, getListeners, getTemplate, kendoThemeMaps, getRef, setRef, Icon } from '@progress/kendo-vue-common';
 import { Button as KButton } from '@progress/kendo-vue-buttons';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
@@ -930,8 +930,12 @@ var ComboBoxVue2 = {
         "clearclick": this.clearButtonClick
       },
       key: "clearbutton"
-    }), loading && h("span", {
-      "class": "k-icon k-input-loading-icon k-i-loading",
+    }), loading && h(Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": "k-input-loading-icon",
       key: "loading"
     }),
     // @ts-ignore

package/dist/esm/DropDownList/DropDownList.js

@@ -16,7 +16,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { templateRendering, getListeners, classNames, Keys, guid, noop, getTemplate, kendoThemeMaps, getTabIndex, setRef, getRef } from '@progress/kendo-vue-common';
+import { templateRendering, getListeners, classNames, Keys, guid, noop, getTemplate, kendoThemeMaps, getTabIndex, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 import { Button as KButton } from '@progress/kendo-vue-buttons';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
@@ -25,6 +25,8 @@ import { ListFilter } from '../common/ListFilter.js';
 import { ListDefaultItem } from '../common/ListDefaultItem.js';
 import { List } from '../common/List.js';
 import DropDownBase from '../common/DropDownBase.js';
+import { selectButton, messages } from '../messages/main.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { isPresent, getItemValue, sameCharsOnly, shuffleData, matchText, areSame, preventDefaultNonInputs, getFocusedItem } from '../common/utils.js';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 /**
@@ -160,6 +162,11 @@ var DropDownListVue2 = {
       }
     }
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   data: function data() {
     return {
       hasMounted: false,
@@ -318,6 +325,11 @@ var DropDownListVue2 = {
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
+    },
+    dropDownListId: {
+      get: function get() {
+        return "value-".concat(this.base.guid).concat(this.$props.ariaDescribedBy ? ' ' + this.$props.ariaDescribedBy : '');
+      }
     }
   },
   methods: {
@@ -695,6 +707,7 @@ var DropDownListVue2 = {
       animate: true,
       height: '200px'
     }, this.$props.popupSettings);
+    var ariaLabelSelectButton = provideLocalizationService(this).toLanguageString(selectButton, messages[selectButton]);
     var _d = this.$props,
       dataItemKey = _d.dataItemKey,
       _e = _d.dataItems,
@@ -710,7 +723,11 @@ var DropDownListVue2 = {
       return areSame(i, value, dataItemKey);
     });
     var valueDefaultRendering = h("span", {
-      "class": "k-input-inner"
+      "class": "k-input-inner",
+      id: this.dropDownListId,
+      attrs: this.v3 ? undefined : {
+        id: this.dropDownListId
+      }
     }, [h("span", {
       "class": "k-input-value-text"
     }, [text])]);
@@ -953,7 +970,7 @@ var DropDownListVue2 = {
         "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
         "aria-label": this.$props.ariaLabel || this.$props.label,
         "aria-labelledby": this.$props.ariaLabelledBy,
-        "aria-describedby": this.$props.ariaDescribedBy,
+        "aria-describedBy": this.dropDownListId,
         title: this.$props.title
       },
       onMousedown: opened ? preventDefaultNonInputs : noop,
@@ -980,10 +997,14 @@ var DropDownListVue2 = {
       "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
       "aria-label": this.$props.ariaLabel || this.$props.label,
       "aria-labelledby": this.$props.ariaLabelledBy,
-      "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-describedBy": this.dropDownListId,
       title: this.$props.title
-    }, [valueElement, loading && h("span", {
-      "class": "k-icon k-input-loading-icon k-i-loading",
+    }, [valueElement, loading && h(Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": "k-input-loading-icon",
       key: "loading"
     }),
     // @ts-ignore
@@ -995,6 +1016,7 @@ var DropDownListVue2 = {
         size: size,
         fillMode: fillMode,
         rounded: null,
+        ariaLabel: ariaLabelSelectButton,
         iconClass: classNames('k-icon', iconClassName ? iconClassName : 'k-i-caret-alt-down'),
         "aria-hidden": true
       },
@@ -1002,6 +1024,7 @@ var DropDownListVue2 = {
       size: size,
       fillMode: fillMode,
       rounded: null,
+      ariaLabel: ariaLabelSelectButton,
       "class": 'k-input-button',
       iconClass: classNames('k-icon', iconClassName ? iconClassName : 'k-i-caret-alt-down'),
       "aria-hidden": true

package/dist/esm/MultiSelect/MultiSelect.js

@@ -25,7 +25,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, Keys, guid, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
+import { classNames, Keys, guid, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 import { ListContainer } from '../common/ListContainer.js';
@@ -36,6 +36,7 @@ import DropDownBase from '../common/DropDownBase.js';
 import { ClearButton } from '../common/ClearButton.js';
 import { ActiveDescendant } from './../common/settings.js';
 import { itemIndexStartsWith, getItemValue, areSame, matchDataCollections, removeDataItems, isPresent, preventDefaultNonInputs } from '../common/utils.js';
+import { plusIcon } from '@progress/kendo-svg-icons';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var preventDefault = function preventDefault(event) {
   return event.preventDefault();
@@ -860,8 +861,12 @@ var MultiSelectVue2 = {
     };
     var renderLoading = function renderLoading(cloading) {
       if (cloading) {
-        return h("span", {
-          "class": "k-icon k-input-loading-icon k-i-loading"
+        return h(Icon, {
+          name: 'loading',
+          attrs: this.v3 ? undefined : {
+            name: 'loading'
+          },
+          "class": "k-input-loading-icon"
         });
       }
       return h("span");
@@ -889,7 +894,7 @@ var MultiSelectVue2 = {
             expanded: opened,
             owns: this.base.listBoxId,
             activedescendant: ariaActivedescendant,
-            "aria-describedBy": "tagslist-".concat(this.base.guid, " ").concat(this.$props.ariaDescribedBy || ''),
+            "aria-describedBy": "tagslist-".concat(this.base.guid).concat(this.$props.ariaDescribedBy ? ' ' + this.$props.ariaDescribedBy : ''),
             "aria-labelledBy": this.$props.ariaLabelledBy
           },
           size: Math.max((placeholderToShow || '').length, searchText.length, 1),
@@ -912,7 +917,7 @@ var MultiSelectVue2 = {
           expanded: opened,
           owns: this.base.listBoxId,
           activedescendant: ariaActivedescendant,
-          "aria-describedBy": "tagslist-".concat(this.base.guid, " ").concat(this.$props.ariaDescribedBy || ''),
+          "aria-describedBy": "tagslist-".concat(this.base.guid).concat(this.$props.ariaDescribedBy ? ' ' + this.$props.ariaDescribedBy : ''),
           "aria-labelledBy": this.$props.ariaLabelledBy
         })
       );
@@ -1020,8 +1025,13 @@ var MultiSelectVue2 = {
         "class": classNames('k-item k-custom-item', {
           'k-focus': isCustom(focusedType)
         })
-      }, [currentText, h("span", {
-        "class": "k-icon k-i-plus",
+      }, [currentText, h(Icon, {
+        name: "plus",
+        attrs: this.v3 ? undefined : {
+          name: "plus",
+          icon: plusIcon
+        },
+        icon: plusIcon,
         style: {
           float: 'right'
         }

package/dist/esm/MultiSelect/TagList.js

@@ -64,9 +64,8 @@ var TagListVue2 = {
         size = _b.size,
         disabled = _b.disabled;
       return _a = {
-        'k-input-values': true,
         'k-chip-list': true
-      }, _a["k-chip-list-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a['k-selection-multiple'] = true, _a['k-disabled'] = disabled, _a;
+      }, _a["k-chip-list-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a['k-disabled'] = disabled, _a;
     }
   },
   // @ts-ignore
@@ -92,6 +91,8 @@ var TagListVue2 = {
       tagsRounded = _a.tagsRounded,
       removeTagIcon = _a.removeTagIcon;
     return h("div", {
+      "class": 'k-input-values'
+    }, [h("div", {
       "class": this.wrapperClass,
       role: "listbox",
       attrs: this.v3 ? undefined : {
@@ -152,7 +153,7 @@ var TagListVue2 = {
           tagdelete: this.onTagDelete
         }
       });
-    }, this), defaultSlot]);
+    }, this), defaultSlot])]);
   }
 };
 /**

package/dist/esm/common/ClearButton.js

@@ -4,8 +4,10 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
+import { xIcon } from '@progress/kendo-svg-icons';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, clear } from '../messages/main.js';
+import { Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -54,8 +56,13 @@ var ClearButtonVue2 = {
       tabindex: -1,
       title: title,
       key: "clearbutton"
-    }, [h("span", {
-      "class": "k-icon k-i-x"
+    }, [h(Icon, {
+      name: "x",
+      attrs: this.v3 ? undefined : {
+        name: "x",
+        icon: xIcon
+      },
+      icon: xIcon
     })]);
   }
 };

package/dist/esm/common/ListFilter.js

@@ -4,7 +4,8 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { getRef, kendoThemeMaps, setRef } from '@progress/kendo-vue-common';
+import { getRef, Icon, kendoThemeMaps, setRef } from '@progress/kendo-vue-common';
+import { searchIcon } from '@progress/kendo-svg-icons';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 /**
@@ -80,8 +81,14 @@ var ListFilterVue2 = {
       "class": "k-list-filter"
     }, [h("span", {
       "class": this.spanClass
-    }, [h("span", {
-      "class": "k-input-icon k-icon k-i-search"
+    }, [h(Icon, {
+      name: "search",
+      attrs: this.v3 ? undefined : {
+        name: "search",
+        icon: searchIcon
+      },
+      icon: searchIcon,
+      "class": "k-input-icon"
     }), h("input", {
       ref: setRef(this, 'input'),
       type: "text",

package/dist/esm/messages/main.d.ts

@@ -10,6 +10,10 @@ export declare const expandButton = "dropdowns.expandbutton";
  * @hidden
  */
 export declare const clear = "dropdowns.clear";
+/**
+ * @hidden
+ */
+export declare const selectButton = "dropdowns.select";
 /**
  * @hidden
  */
@@ -17,4 +21,5 @@ export declare const messages: {
     "dropdowns.clear": string;
     "dropdowns.expandbutton": string;
     "dropdowns.nodata": string;
+    "dropdowns.select": string;
 };