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

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,
@@ -695,6 +702,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,
@@ -982,8 +990,12 @@ var DropDownListVue2 = {
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       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 +1007,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 +1015,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';
@@ -860,8 +860,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 +893,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 +916,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 +1024,11 @@ 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"
+        },
         style: {
           float: 'right'
         }

package/dist/es/common/ClearButton.js

@@ -6,6 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, clear } from '../messages/main';
+import { Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -54,8 +55,11 @@ 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"
+      }
     })]);
   }
 };

package/dist/es/common/ListFilter.js

@@ -4,7 +4,7 @@ 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';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 /**
@@ -80,8 +80,12 @@ 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"
+      },
+      "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: 1672389577,
     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,
@@ -695,6 +702,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,
@@ -982,8 +990,12 @@ var DropDownListVue2 = {
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       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 +1007,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 +1015,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';
@@ -860,8 +860,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 +893,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 +916,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 +1024,11 @@ 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"
+        },
         style: {
           float: 'right'
         }

package/dist/esm/common/ClearButton.js

@@ -6,6 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, clear } from '../messages/main.js';
+import { Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -54,8 +55,11 @@ 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"
+      }
     })]);
   }
 };

package/dist/esm/common/ListFilter.js

@@ -4,7 +4,7 @@ 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';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 /**
@@ -80,8 +80,12 @@ 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"
+      },
+      "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;
 };

package/dist/esm/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/esm/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: 1672389577,
     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/npm/AutoComplete/AutoComplete.js

@@ -682,8 +682,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(kendo_vue_common_1.Icon, {
+          "class": "k-input-loading-icon"
         });
       }
       return h("span");

package/dist/npm/ComboBox/ComboBox.js

@@ -936,8 +936,12 @@ var ComboBoxVue2 = {
         "clearclick": this.clearButtonClick
       },
       key: "clearbutton"
-    }), loading && h("span", {
-      "class": "k-icon k-input-loading-icon k-i-loading",
+    }), loading && h(kendo_vue_common_1.Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": "k-input-loading-icon",
       key: "loading"
     }),
     // @ts-ignore

package/dist/npm/DropDownList/DropDownList.js

@@ -31,6 +31,8 @@ var ListFilter_1 = require("../common/ListFilter");
 var ListDefaultItem_1 = require("../common/ListDefaultItem");
 var List_1 = require("../common/List");
 var DropDownBase_1 = require("../common/DropDownBase");
+var main_1 = require("../messages/main");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var utils_1 = require("../common/utils");
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 /**
@@ -166,6 +168,11 @@ var DropDownListVue2 = {
       }
     }
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   data: function data() {
     return {
       hasMounted: false,
@@ -701,6 +708,7 @@ var DropDownListVue2 = {
       animate: true,
       height: '200px'
     }, this.$props.popupSettings);
+    var ariaLabelSelectButton = (0, kendo_vue_intl_1.provideLocalizationService)(this).toLanguageString(main_1.selectButton, main_1.messages[main_1.selectButton]);
     var _d = this.$props,
       dataItemKey = _d.dataItemKey,
       _e = _d.dataItems,
@@ -988,8 +996,12 @@ var DropDownListVue2 = {
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       title: this.$props.title
-    }, [valueElement, loading && h("span", {
-      "class": "k-icon k-input-loading-icon k-i-loading",
+    }, [valueElement, loading && h(kendo_vue_common_1.Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": "k-input-loading-icon",
       key: "loading"
     }),
     // @ts-ignore
@@ -1001,6 +1013,7 @@ var DropDownListVue2 = {
         size: size,
         fillMode: fillMode,
         rounded: null,
+        ariaLabel: ariaLabelSelectButton,
         iconClass: (0, kendo_vue_common_1.classNames)('k-icon', iconClassName ? iconClassName : 'k-i-caret-alt-down'),
         "aria-hidden": true
       },
@@ -1008,6 +1021,7 @@ var DropDownListVue2 = {
       size: size,
       fillMode: fillMode,
       rounded: null,
+      ariaLabel: ariaLabelSelectButton,
       "class": 'k-input-button',
       iconClass: (0, kendo_vue_common_1.classNames)('k-icon', iconClassName ? iconClassName : 'k-i-caret-alt-down'),
       "aria-hidden": true

package/dist/npm/MultiSelect/MultiSelect.js

@@ -866,8 +866,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(kendo_vue_common_1.Icon, {
+          name: 'loading',
+          attrs: this.v3 ? undefined : {
+            name: 'loading'
+          },
+          "class": "k-input-loading-icon"
         });
       }
       return h("span");
@@ -895,7 +899,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),
@@ -918,7 +922,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
         })
       );
@@ -1026,8 +1030,11 @@ var MultiSelectVue2 = {
         "class": (0, kendo_vue_common_1.classNames)('k-item k-custom-item', {
           'k-focus': isCustom(focusedType)
         })
-      }, [currentText, h("span", {
-        "class": "k-icon k-i-plus",
+      }, [currentText, h(kendo_vue_common_1.Icon, {
+        name: "plus",
+        attrs: this.v3 ? undefined : {
+          name: "plus"
+        },
         style: {
           float: 'right'
         }