@progress/kendo-vue-dropdowns 3.5.3 → 3.5.4

package/dist/es/ComboBox/ComboBox.js

@@ -772,10 +772,12 @@ var ComboBoxVue2 = {
     var renderList = function renderList() {
       var _this2 = this;
 
-      var _a = this.$props,
-          dataItemKey = _a.dataItemKey,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b;
+      var _a;
+
+      var _b = this.$props,
+          dataItemKey = _b.dataItemKey,
+          _c = _b.dataItems,
+          dataItems = _c === void 0 ? [] : _c;
       var itemRender = templateRendering.call(this, this.$props.itemRender, getListeners.call(this));
       var listNoDataRender = templateRendering.call(this, this.$props.listNoDataRender, getListeners.call(this));
 
@@ -805,7 +807,7 @@ var ComboBoxVue2 = {
             wrapperStyle: {
               maxHeight: popupSettings.height
             },
-            wrapperCssClass: 'k-list-content',
+            wrapperCssClass: classNames('k-list-content', (_a = {}, _a['k-list-scroller'] = !this.$props.virtual, _a)),
             listStyle: vs.enabled ? {
               transform: translate
             } : undefined,
@@ -824,7 +826,7 @@ var ComboBoxVue2 = {
           wrapperStyle: {
             maxHeight: popupSettings.height
           },
-          wrapperCssClass: 'k-list-content',
+          wrapperCssClass: classNames('k-list-content', (_a = {}, _a['k-list-scroller'] = !this.$props.virtual, _a)),
           listStyle: vs.enabled ? {
             transform: translate
           } : undefined,
@@ -1011,7 +1013,7 @@ var ComboBoxVue2 = {
         size: size,
         fillMode: fillMode,
         rounded: null,
-        iconClass: classNames('k-icon k-i-arrow-s', iconClassName)
+        iconClass: classNames('k-icon k-i-caret-alt-down', iconClassName)
       },
       tabIndex: -1,
       "aria-label": ariaLabelExpandButton,
@@ -1019,7 +1021,7 @@ var ComboBoxVue2 = {
       fillMode: fillMode,
       rounded: null,
       "class": 'k-input-button',
-      iconClass: classNames('k-icon k-i-arrow-s', iconClassName),
+      iconClass: classNames('k-icon k-i-caret-alt-down', iconClassName),
       onClick: this.toggleBtnClick,
       on: this.v3 ? undefined : {
         "click": this.toggleBtnClick,

package/dist/es/DropDownList/DropDownList.js

@@ -141,6 +141,7 @@ var DropDownListVue2 = {
       default: undefined
     },
     ariaLabelledBy: String,
+    ariaLabel: String,
     ariaDescribedBy: String,
     rounded: {
       type: String,
@@ -995,13 +996,13 @@ var DropDownListVue2 = {
         dir: dir,
         tabindex: getTabIndex(tabIndex, disabled),
         accesskey: this.$props.accessKey,
-        role: 'listbox',
+        role: 'combobox',
         "aria-disabled": disabled || undefined,
         "aria-haspopup": true,
         "aria-expanded": opened || false,
         "aria-owns": this.base.listBoxId,
         "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
-        "aria-label": this.$props.label,
+        "aria-label": this.$props.ariaLabel || this.$props.label,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
         id: this.$props.id,
@@ -1022,14 +1023,14 @@ var DropDownListVue2 = {
       accesskey: this.$props.accessKey,
       onKeydown: this.handleKeyDown,
       onKeypress: this.handleKeyPress,
-      role: 'listbox',
+      role: 'combobox',
       onClick: disabled ? noop : this.handleWrapperClick,
       "aria-disabled": disabled || undefined,
       "aria-haspopup": true,
       "aria-expanded": opened || false,
       "aria-owns": this.base.listBoxId,
       "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
-      "aria-label": this.$props.label,
+      "aria-label": this.$props.ariaLabel || this.$props.label,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       id: this.$props.id,
@@ -1046,14 +1047,16 @@ var DropDownListVue2 = {
         size: size,
         fillMode: fillMode,
         rounded: null,
-        iconClass: classNames('k-icon k-i-arrow-s', iconClassName)
+        iconClass: classNames('k-icon k-i-caret-alt-down', iconClassName),
+        "aria-hidden": true
       },
       tabIndex: -1,
       size: size,
       fillMode: fillMode,
       rounded: null,
       "class": 'k-input-button',
-      iconClass: classNames('k-icon k-i-arrow-s', iconClassName)
+      iconClass: classNames('k-icon k-i-caret-alt-down', iconClassName),
+      "aria-hidden": true
     }), dummySelect.call(this, value), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,

package/dist/es/DropDownList/DropDownListProps.d.ts

@@ -57,6 +57,10 @@ export interface DropDownListProps extends FormComponentProps {
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Adds aris-label for the component.
+     */
+    ariaLabel?: string;
     /**
      * There is no placeholder concept when it comes to DropDownList/HTML select element. The approach
      * that we recommend in such cases is to use the default Item as it is shown here ([see example]({% slug defaultitem_dropdownlist %})).

package/dist/es/MultiSelect/MultiSelect.js

@@ -94,6 +94,7 @@ var MultiSelectVue2 = {
       type: Boolean,
       default: true
     },
+    removeTagIcon: String,
     allowCustom: Boolean,
     modelValue: Array,
     opened: {
@@ -902,7 +903,8 @@ var MultiSelectVue2 = {
         size = _b.size,
         fillMode = _b.fillMode,
         rounded = _b.rounded,
-        tagsRounded = _b.tagsRounded;
+        tagsRounded = _b.tagsRounded,
+        removeTagIcon = _b.removeTagIcon;
     var focused = this.currentFocused;
     var popupSettings = Object.assign({}, {
       animate: true,
@@ -1196,8 +1198,9 @@ var MultiSelectVue2 = {
       onMousedown: preventDefaultNonInputs
     }, [tagsToRender.length > 0 && // @ts-ignore  function children
     h(TagList, {
-      tagsRounded: tagsRounded,
+      removeTagIcon: removeTagIcon,
       attrs: this.v3 ? undefined : {
+        removeTagIcon: removeTagIcon,
         tagsRounded: tagsRounded,
         size: size,
         fillMode: fillMode,
@@ -1208,6 +1211,7 @@ var MultiSelectVue2 = {
           return matchTags(t, focusedTag, dataItemKey);
         }) : undefined
       },
+      tagsRounded: tagsRounded,
       size: size,
       fillMode: fillMode,
       tagRender: tagRender,

package/dist/es/MultiSelect/MultiSelectProps.d.ts

@@ -75,6 +75,10 @@ export interface MultiSelectProps extends FormComponentProps {
      * The hint that is displayed when the MultiSelect is empty.
      */
     placeholder?: string;
+    /**
+     * Sets the close icon of the tag items.
+     */
+    removeTagIcon?: string;
     /**
      * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
      */

package/dist/es/MultiSelect/TagList.d.ts

@@ -20,6 +20,7 @@ export interface TagData {
  * @hidden
  */
 export interface TagListProps {
+    removeTagIcon: string;
     dataItems: Array<TagData>;
     guid: string;
     focused?: TagData;

package/dist/es/MultiSelect/TagList.js

@@ -37,6 +37,7 @@ var stopPropagation = function stopPropagation(event) {
 var TagListVue2 = {
   name: 'TagList',
   props: {
+    removeTagIcon: String,
     dataItems: Array,
     guid: String,
     focused: Object,
@@ -86,6 +87,14 @@ var TagListVue2 = {
         'k-chip': true,
         'k-disabled': disabled
       }, _a["k-chip-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[tagsRounded] || tagsRounded)] = tagsRounded, _a["k-chip-".concat(fillMode)] = fillMode, _a["k-chip-".concat(fillMode, "-base")] = Boolean(fillMode), _a;
+    },
+    closeIcon: function closeIcon() {
+      var _a;
+
+      return _a = {
+        'k-icon': true,
+        'k-i-x-circle': !this.removeTagIcon
+      }, _a['k-i-' + this.removeTagIcon] = this.removeTagIcon, _a;
     }
   },
   // @ts-ignore
@@ -155,7 +164,7 @@ var TagListVue2 = {
           }
         }
       }, [h("span", {
-        "class": "k-icon k-i-close"
+        "class": this.closeIcon
       })])]);
       return getTemplate.call(this, {
         h: h,

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: 1662388753,
+    publishDate: 1662729077,
     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/ComboBox/ComboBox.js

@@ -772,10 +772,12 @@ var ComboBoxVue2 = {
     var renderList = function renderList() {
       var _this2 = this;
 
-      var _a = this.$props,
-          dataItemKey = _a.dataItemKey,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b;
+      var _a;
+
+      var _b = this.$props,
+          dataItemKey = _b.dataItemKey,
+          _c = _b.dataItems,
+          dataItems = _c === void 0 ? [] : _c;
       var itemRender = templateRendering.call(this, this.$props.itemRender, getListeners.call(this));
       var listNoDataRender = templateRendering.call(this, this.$props.listNoDataRender, getListeners.call(this));
 
@@ -805,7 +807,7 @@ var ComboBoxVue2 = {
             wrapperStyle: {
               maxHeight: popupSettings.height
             },
-            wrapperCssClass: 'k-list-content',
+            wrapperCssClass: classNames('k-list-content', (_a = {}, _a['k-list-scroller'] = !this.$props.virtual, _a)),
             listStyle: vs.enabled ? {
               transform: translate
             } : undefined,
@@ -824,7 +826,7 @@ var ComboBoxVue2 = {
           wrapperStyle: {
             maxHeight: popupSettings.height
           },
-          wrapperCssClass: 'k-list-content',
+          wrapperCssClass: classNames('k-list-content', (_a = {}, _a['k-list-scroller'] = !this.$props.virtual, _a)),
           listStyle: vs.enabled ? {
             transform: translate
           } : undefined,
@@ -1011,7 +1013,7 @@ var ComboBoxVue2 = {
         size: size,
         fillMode: fillMode,
         rounded: null,
-        iconClass: classNames('k-icon k-i-arrow-s', iconClassName)
+        iconClass: classNames('k-icon k-i-caret-alt-down', iconClassName)
       },
       tabIndex: -1,
       "aria-label": ariaLabelExpandButton,
@@ -1019,7 +1021,7 @@ var ComboBoxVue2 = {
       fillMode: fillMode,
       rounded: null,
       "class": 'k-input-button',
-      iconClass: classNames('k-icon k-i-arrow-s', iconClassName),
+      iconClass: classNames('k-icon k-i-caret-alt-down', iconClassName),
       onClick: this.toggleBtnClick,
       on: this.v3 ? undefined : {
         "click": this.toggleBtnClick,

package/dist/esm/DropDownList/DropDownList.js

@@ -141,6 +141,7 @@ var DropDownListVue2 = {
       default: undefined
     },
     ariaLabelledBy: String,
+    ariaLabel: String,
     ariaDescribedBy: String,
     rounded: {
       type: String,
@@ -995,13 +996,13 @@ var DropDownListVue2 = {
         dir: dir,
         tabindex: getTabIndex(tabIndex, disabled),
         accesskey: this.$props.accessKey,
-        role: 'listbox',
+        role: 'combobox',
         "aria-disabled": disabled || undefined,
         "aria-haspopup": true,
         "aria-expanded": opened || false,
         "aria-owns": this.base.listBoxId,
         "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
-        "aria-label": this.$props.label,
+        "aria-label": this.$props.ariaLabel || this.$props.label,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
         id: this.$props.id,
@@ -1022,14 +1023,14 @@ var DropDownListVue2 = {
       accesskey: this.$props.accessKey,
       onKeydown: this.handleKeyDown,
       onKeypress: this.handleKeyPress,
-      role: 'listbox',
+      role: 'combobox',
       onClick: disabled ? noop : this.handleWrapperClick,
       "aria-disabled": disabled || undefined,
       "aria-haspopup": true,
       "aria-expanded": opened || false,
       "aria-owns": this.base.listBoxId,
       "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
-      "aria-label": this.$props.label,
+      "aria-label": this.$props.ariaLabel || this.$props.label,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       id: this.$props.id,
@@ -1046,14 +1047,16 @@ var DropDownListVue2 = {
         size: size,
         fillMode: fillMode,
         rounded: null,
-        iconClass: classNames('k-icon k-i-arrow-s', iconClassName)
+        iconClass: classNames('k-icon k-i-caret-alt-down', iconClassName),
+        "aria-hidden": true
       },
       tabIndex: -1,
       size: size,
       fillMode: fillMode,
       rounded: null,
       "class": 'k-input-button',
-      iconClass: classNames('k-icon k-i-arrow-s', iconClassName)
+      iconClass: classNames('k-icon k-i-caret-alt-down', iconClassName),
+      "aria-hidden": true
     }), dummySelect.call(this, value), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,

package/dist/esm/DropDownList/DropDownListProps.d.ts

@@ -57,6 +57,10 @@ export interface DropDownListProps extends FormComponentProps {
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Adds aris-label for the component.
+     */
+    ariaLabel?: string;
     /**
      * There is no placeholder concept when it comes to DropDownList/HTML select element. The approach
      * that we recommend in such cases is to use the default Item as it is shown here ([see example]({% slug defaultitem_dropdownlist %})).

package/dist/esm/MultiSelect/MultiSelect.js

@@ -94,6 +94,7 @@ var MultiSelectVue2 = {
       type: Boolean,
       default: true
     },
+    removeTagIcon: String,
     allowCustom: Boolean,
     modelValue: Array,
     opened: {
@@ -902,7 +903,8 @@ var MultiSelectVue2 = {
         size = _b.size,
         fillMode = _b.fillMode,
         rounded = _b.rounded,
-        tagsRounded = _b.tagsRounded;
+        tagsRounded = _b.tagsRounded,
+        removeTagIcon = _b.removeTagIcon;
     var focused = this.currentFocused;
     var popupSettings = Object.assign({}, {
       animate: true,
@@ -1196,8 +1198,9 @@ var MultiSelectVue2 = {
       onMousedown: preventDefaultNonInputs
     }, [tagsToRender.length > 0 && // @ts-ignore  function children
     h(TagList, {
-      tagsRounded: tagsRounded,
+      removeTagIcon: removeTagIcon,
       attrs: this.v3 ? undefined : {
+        removeTagIcon: removeTagIcon,
         tagsRounded: tagsRounded,
         size: size,
         fillMode: fillMode,
@@ -1208,6 +1211,7 @@ var MultiSelectVue2 = {
           return matchTags(t, focusedTag, dataItemKey);
         }) : undefined
       },
+      tagsRounded: tagsRounded,
       size: size,
       fillMode: fillMode,
       tagRender: tagRender,

package/dist/esm/MultiSelect/MultiSelectProps.d.ts

@@ -75,6 +75,10 @@ export interface MultiSelectProps extends FormComponentProps {
      * The hint that is displayed when the MultiSelect is empty.
      */
     placeholder?: string;
+    /**
+     * Sets the close icon of the tag items.
+     */
+    removeTagIcon?: string;
     /**
      * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
      */

package/dist/esm/MultiSelect/TagList.d.ts

@@ -20,6 +20,7 @@ export interface TagData {
  * @hidden
  */
 export interface TagListProps {
+    removeTagIcon: string;
     dataItems: Array<TagData>;
     guid: string;
     focused?: TagData;

package/dist/esm/MultiSelect/TagList.js

@@ -37,6 +37,7 @@ var stopPropagation = function stopPropagation(event) {
 var TagListVue2 = {
   name: 'TagList',
   props: {
+    removeTagIcon: String,
     dataItems: Array,
     guid: String,
     focused: Object,
@@ -86,6 +87,14 @@ var TagListVue2 = {
         'k-chip': true,
         'k-disabled': disabled
       }, _a["k-chip-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[tagsRounded] || tagsRounded)] = tagsRounded, _a["k-chip-".concat(fillMode)] = fillMode, _a["k-chip-".concat(fillMode, "-base")] = Boolean(fillMode), _a;
+    },
+    closeIcon: function closeIcon() {
+      var _a;
+
+      return _a = {
+        'k-icon': true,
+        'k-i-x-circle': !this.removeTagIcon
+      }, _a['k-i-' + this.removeTagIcon] = this.removeTagIcon, _a;
     }
   },
   // @ts-ignore
@@ -155,7 +164,7 @@ var TagListVue2 = {
           }
         }
       }, [h("span", {
-        "class": "k-icon k-i-close"
+        "class": this.closeIcon
       })])]);
       return getTemplate.call(this, {
         h: h,

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: 1662388753,
+    publishDate: 1662729077,
     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/ComboBox/ComboBox.js

@@ -791,10 +791,12 @@ var ComboBoxVue2 = {
     var renderList = function renderList() {
       var _this2 = this;
 
-      var _a = this.$props,
-          dataItemKey = _a.dataItemKey,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b;
+      var _a;
+
+      var _b = this.$props,
+          dataItemKey = _b.dataItemKey,
+          _c = _b.dataItems,
+          dataItems = _c === void 0 ? [] : _c;
       var itemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this));
       var listNoDataRender = kendo_vue_common_1.templateRendering.call(this, this.$props.listNoDataRender, kendo_vue_common_1.getListeners.call(this));
 
@@ -824,7 +826,7 @@ var ComboBoxVue2 = {
             wrapperStyle: {
               maxHeight: popupSettings.height
             },
-            wrapperCssClass: 'k-list-content',
+            wrapperCssClass: (0, kendo_vue_common_1.classNames)('k-list-content', (_a = {}, _a['k-list-scroller'] = !this.$props.virtual, _a)),
             listStyle: vs.enabled ? {
               transform: translate
             } : undefined,
@@ -843,7 +845,7 @@ var ComboBoxVue2 = {
           wrapperStyle: {
             maxHeight: popupSettings.height
           },
-          wrapperCssClass: 'k-list-content',
+          wrapperCssClass: (0, kendo_vue_common_1.classNames)('k-list-content', (_a = {}, _a['k-list-scroller'] = !this.$props.virtual, _a)),
           listStyle: vs.enabled ? {
             transform: translate
           } : undefined,
@@ -1030,7 +1032,7 @@ var ComboBoxVue2 = {
         size: size,
         fillMode: fillMode,
         rounded: null,
-        iconClass: (0, kendo_vue_common_1.classNames)('k-icon k-i-arrow-s', iconClassName)
+        iconClass: (0, kendo_vue_common_1.classNames)('k-icon k-i-caret-alt-down', iconClassName)
       },
       tabIndex: -1,
       "aria-label": ariaLabelExpandButton,
@@ -1038,7 +1040,7 @@ var ComboBoxVue2 = {
       fillMode: fillMode,
       rounded: null,
       "class": 'k-input-button',
-      iconClass: (0, kendo_vue_common_1.classNames)('k-icon k-i-arrow-s', iconClassName),
+      iconClass: (0, kendo_vue_common_1.classNames)('k-icon k-i-caret-alt-down', iconClassName),
       onClick: this.toggleBtnClick,
       on: this.v3 ? undefined : {
         "click": this.toggleBtnClick,

package/dist/npm/DropDownList/DropDownList.js

@@ -158,6 +158,7 @@ var DropDownListVue2 = {
       default: undefined
     },
     ariaLabelledBy: String,
+    ariaLabel: String,
     ariaDescribedBy: String,
     rounded: {
       type: String,
@@ -1012,13 +1013,13 @@ var DropDownListVue2 = {
         dir: dir,
         tabindex: (0, kendo_vue_common_1.getTabIndex)(tabIndex, disabled),
         accesskey: this.$props.accessKey,
-        role: 'listbox',
+        role: 'combobox',
         "aria-disabled": disabled || undefined,
         "aria-haspopup": true,
         "aria-expanded": opened || false,
         "aria-owns": this.base.listBoxId,
         "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
-        "aria-label": this.$props.label,
+        "aria-label": this.$props.ariaLabel || this.$props.label,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
         id: this.$props.id,
@@ -1039,14 +1040,14 @@ var DropDownListVue2 = {
       accesskey: this.$props.accessKey,
       onKeydown: this.handleKeyDown,
       onKeypress: this.handleKeyPress,
-      role: 'listbox',
+      role: 'combobox',
       onClick: disabled ? kendo_vue_common_1.noop : this.handleWrapperClick,
       "aria-disabled": disabled || undefined,
       "aria-haspopup": true,
       "aria-expanded": opened || false,
       "aria-owns": this.base.listBoxId,
       "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
-      "aria-label": this.$props.label,
+      "aria-label": this.$props.ariaLabel || this.$props.label,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       id: this.$props.id,
@@ -1063,14 +1064,16 @@ var DropDownListVue2 = {
         size: size,
         fillMode: fillMode,
         rounded: null,
-        iconClass: (0, kendo_vue_common_1.classNames)('k-icon k-i-arrow-s', iconClassName)
+        iconClass: (0, kendo_vue_common_1.classNames)('k-icon k-i-caret-alt-down', iconClassName),
+        "aria-hidden": true
       },
       tabIndex: -1,
       size: size,
       fillMode: fillMode,
       rounded: null,
       "class": 'k-input-button',
-      iconClass: (0, kendo_vue_common_1.classNames)('k-icon k-i-arrow-s', iconClassName)
+      iconClass: (0, kendo_vue_common_1.classNames)('k-icon k-i-caret-alt-down', iconClassName),
+      "aria-hidden": true
     }), dummySelect.call(this, value), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,

package/dist/npm/DropDownList/DropDownListProps.d.ts

@@ -57,6 +57,10 @@ export interface DropDownListProps extends FormComponentProps {
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Adds aris-label for the component.
+     */
+    ariaLabel?: string;
     /**
      * There is no placeholder concept when it comes to DropDownList/HTML select element. The approach
      * that we recommend in such cases is to use the default Item as it is shown here ([see example]({% slug defaultitem_dropdownlist %})).

package/dist/npm/MultiSelect/MultiSelect.js

@@ -112,6 +112,7 @@ var MultiSelectVue2 = {
       type: Boolean,
       default: true
     },
+    removeTagIcon: String,
     allowCustom: Boolean,
     modelValue: Array,
     opened: {
@@ -920,7 +921,8 @@ var MultiSelectVue2 = {
         size = _b.size,
         fillMode = _b.fillMode,
         rounded = _b.rounded,
-        tagsRounded = _b.tagsRounded;
+        tagsRounded = _b.tagsRounded,
+        removeTagIcon = _b.removeTagIcon;
     var focused = this.currentFocused;
     var popupSettings = Object.assign({}, {
       animate: true,
@@ -1214,8 +1216,9 @@ var MultiSelectVue2 = {
       onMousedown: utils_1.preventDefaultNonInputs
     }, [tagsToRender.length > 0 && // @ts-ignore  function children
     h(TagList_1.TagList, {
-      tagsRounded: tagsRounded,
+      removeTagIcon: removeTagIcon,
       attrs: this.v3 ? undefined : {
+        removeTagIcon: removeTagIcon,
         tagsRounded: tagsRounded,
         size: size,
         fillMode: fillMode,
@@ -1226,6 +1229,7 @@ var MultiSelectVue2 = {
           return matchTags(t, focusedTag, dataItemKey);
         }) : undefined
       },
+      tagsRounded: tagsRounded,
       size: size,
       fillMode: fillMode,
       tagRender: tagRender,

package/dist/npm/MultiSelect/MultiSelectProps.d.ts

@@ -75,6 +75,10 @@ export interface MultiSelectProps extends FormComponentProps {
      * The hint that is displayed when the MultiSelect is empty.
      */
     placeholder?: string;
+    /**
+     * Sets the close icon of the tag items.
+     */
+    removeTagIcon?: string;
     /**
      * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
      */

package/dist/npm/MultiSelect/TagList.d.ts

@@ -20,6 +20,7 @@ export interface TagData {
  * @hidden
  */
 export interface TagListProps {
+    removeTagIcon: string;
     dataItems: Array<TagData>;
     guid: string;
     focused?: TagData;

package/dist/npm/MultiSelect/TagList.js

@@ -45,6 +45,7 @@ var stopPropagation = function stopPropagation(event) {
 var TagListVue2 = {
   name: 'TagList',
   props: {
+    removeTagIcon: String,
     dataItems: Array,
     guid: String,
     focused: Object,
@@ -94,6 +95,14 @@ var TagListVue2 = {
         'k-chip': true,
         'k-disabled': disabled
       }, _a["k-chip-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-".concat(kendo_vue_common_1.kendoThemeMaps.roundedMap[tagsRounded] || tagsRounded)] = tagsRounded, _a["k-chip-".concat(fillMode)] = fillMode, _a["k-chip-".concat(fillMode, "-base")] = Boolean(fillMode), _a;
+    },
+    closeIcon: function closeIcon() {
+      var _a;
+
+      return _a = {
+        'k-icon': true,
+        'k-i-x-circle': !this.removeTagIcon
+      }, _a['k-i-' + this.removeTagIcon] = this.removeTagIcon, _a;
     }
   },
   // @ts-ignore
@@ -163,7 +172,7 @@ var TagListVue2 = {
           }
         }
       }, [h("span", {
-        "class": "k-icon k-i-close"
+        "class": this.closeIcon
       })])]);
       return kendo_vue_common_1.getTemplate.call(this, {
         h: h,