@progress/kendo-vue-dropdowns 2.7.3 → 3.0.0-dev.202201141128

package/dist/npm/MultiSelect/MultiSelect.js

@@ -33,7 +33,7 @@ var __spreadArrays = undefined && undefined.__spreadArrays || function () {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MultiSelectVue3 = exports.MultiSelect = void 0; // @ts-ignore
+exports.MultiSelectVue2 = exports.MultiSelect = void 0; // @ts-ignore
 
 var Vue = require("vue");
 
@@ -43,6 +43,9 @@ var ref = allVue.ref;
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 
+var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap,
+    roundedMap = kendo_vue_common_1.kendoThemeMaps.roundedMap;
+
 var ListContainer_1 = require("../common/ListContainer");
 
 var List_1 = require("../common/List");
@@ -89,7 +92,7 @@ var FocusedItemType;
  */
 
 
-var MultiSelect = {
+var MultiSelectVue2 = {
   name: 'KendoMultiSelect',
   model: {
     event: 'changemodel'
@@ -167,7 +170,35 @@ var MultiSelect = {
       default: undefined
     },
     ariaLabelledBy: String,
-    ariaDescribedBy: String
+    ariaDescribedBy: String,
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    tagsRounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return ['solid', 'flat', 'outline'].includes(value);
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large'].includes(value);
+      }
+    }
   },
   // @ts-ignore
   setup: !gh ? undefined : function () {
@@ -186,10 +217,10 @@ var MultiSelect = {
         var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
         var editorValue = this.currentText || utils_1.getItemValue(this.computedValue()[0], this.$props.textField);
         return {
-          'k-textbox-container': true,
-          'k-state-focused': this.currentFocused,
+          'k-floating-label-container': true,
+          'k-focus': this.currentFocused,
           'k-state-empty': !(editorValue && editorValue !== 0),
-          'k-state-invalid': !isValid && isValid !== undefined,
+          'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
@@ -247,7 +278,6 @@ var MultiSelect = {
     }, this.$props.popupSettings);
     var list = this.$refs.list;
     var scrollElement = this.$refs.scrollElement;
-    var scroller = this.$refs.scroller;
 
     if (list) {
       // @ts-ignore
@@ -260,8 +290,9 @@ var MultiSelect = {
       this.base.vs.scrollElement = scrollElement;
     }
 
-    if (scroller) {
-      this.base.vs.scrollerRef(scroller);
+    if (list && this.dataItems.length) {
+      // @ts-ignore
+      this.base.vs.scrollerRef(list.$el);
     }
 
     if (!popupSettings.animate && closing) {
@@ -296,7 +327,7 @@ var MultiSelect = {
     this.hasMounted = true; // @ts-ignore
 
     this.input = this.v3 ? this.inputRef.input : this.$refs.input.input;
-    this.base.wrapper = this.v3 ? this.baseWrapperRef : this.$refs.baseWrapper;
+    this.base.wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this.anchor];
     this.element = this.v3 ? this.kendoAnchorRef : this.$refs[this.anchor];
     this.base.didMount();
     this.searchBarRef();
@@ -840,19 +871,25 @@ var MultiSelect = {
     }
   },
   render: function render(createElement) {
+    var _a;
+
     var _this = this;
 
     var h = gh || createElement;
-    var _a = this.$props,
-        style = _a.style,
-        label = _a.label,
-        dir = _a.dir,
-        disabled = _a.disabled,
-        tags = _a.tags,
-        textField = _a.textField,
-        dataItemKey = _a.dataItemKey,
-        virtual = _a.virtual,
-        loading = _a.loading;
+    var _b = this.$props,
+        style = _b.style,
+        label = _b.label,
+        dir = _b.dir,
+        disabled = _b.disabled,
+        tags = _b.tags,
+        textField = _b.textField,
+        dataItemKey = _b.dataItemKey,
+        virtual = _b.virtual,
+        loading = _b.loading,
+        size = _b.size,
+        fillMode = _b.fillMode,
+        rounded = _b.rounded,
+        tagsRounded = _b.tagsRounded;
     var focused = this.currentFocused;
     var popupSettings = Object.assign({}, {
       animate: true,
@@ -967,6 +1004,8 @@ var MultiSelect = {
     };
 
     var renderList = function renderList() {
+      var _this2 = this;
+
       var _a = this.$props.dataItems,
           dataItems = _a === void 0 ? [] : _a;
       var itemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this));
@@ -975,7 +1014,7 @@ var MultiSelect = {
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var focusedIndex = this.getFocusedState().focusedIndex;
       var translate = "translateY(" + vs.translate + "px)";
-      return (// @ts-ignore
+      return (// @ts-ignore  function children
         h(List_1.List, {
           id: this.base.listBoxId,
           attrs: this.v3 ? undefined : {
@@ -987,13 +1026,10 @@ var MultiSelect = {
             textField: textField,
             valueField: dataItemKey,
             optionsGuid: this.base.guid,
-            wrapperStyle: vs.enabled ? {
-              float: 'left',
-              width: '100%'
-            } : {
+            wrapperStyle: {
               maxHeight: popupSettings.height
             },
-            wrapperCssClass: vs.enabled ? undefined : 'k-list-scroller',
+            wrapperCssClass: 'k-list-content',
             listStyle: vs.enabled ? {
               transform: translate
             } : undefined,
@@ -1009,13 +1045,10 @@ var MultiSelect = {
           valueField: dataItemKey,
           optionsGuid: this.base.guid,
           ref: 'list',
-          wrapperStyle: vs.enabled ? {
-            float: 'left',
-            width: '100%'
-          } : {
+          wrapperStyle: {
             maxHeight: popupSettings.height
           },
-          wrapperCssClass: vs.enabled ? undefined : 'k-list-scroller',
+          wrapperCssClass: 'k-list-content',
           listStyle: vs.enabled ? {
             transform: translate
           } : undefined,
@@ -1023,27 +1056,16 @@ var MultiSelect = {
           skip: skip,
           onListclick: this.handleItemClick,
           on: this.v3 ? undefined : {
-            "listclick": this.handleItemClick
+            "listclick": this.handleItemClick,
+            "scroll": vs.scrollHandler
           },
           itemRender: itemRender,
-          noDataRender: listNoDataRender
-        })
+          noDataRender: listNoDataRender,
+          onScroll: vs.scrollHandler
+        }, this.v3 ? function () {
+          return [renderScrollElement.call(_this2)];
+        } : [renderScrollElement.call(_this2)])
       );
-    }; // Common rendering
-
-
-    var renderScrollWrapper = function renderScrollWrapper(children) {
-      return vs.enabled ? h("div", {
-        onScroll: vs.scrollHandler,
-        on: this.v3 ? undefined : {
-          "scroll": vs.scrollHandler
-        },
-        ref: 'scroller',
-        style: {
-          height: popupSettings.height,
-          overflowY: 'scroll'
-        }
-      }, [children]) : children;
     };
 
     var renderScrollElement = function renderScrollElement() {
@@ -1054,13 +1076,15 @@ var MultiSelect = {
     };
 
     var renderListContainer = function renderListContainer() {
-      var _this2 = this;
+      var _this3 = this;
+
+      var _a;
 
       var base = this.base;
-      var _a = this.$props,
-          allowCustom = _a.allowCustom,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b;
+      var _b = this.$props,
+          allowCustom = _b.allowCustom,
+          _c = _b.dataItems,
+          dataItems = _c === void 0 ? [] : _c;
       var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
       var footerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
       var header = kendo_vue_common_1.getTemplate.call(this, {
@@ -1084,7 +1108,7 @@ var MultiSelect = {
         }
       }, [h("div", {
         "class": kendo_vue_common_1.classNames('k-item k-custom-item', {
-          'k-state-focused': isCustom(focusedType)
+          'k-focus': isCustom(focusedType)
         })
       }, [currentText, h("span", {
         "class": "k-icon k-i-plus",
@@ -1110,7 +1134,8 @@ var MultiSelect = {
               show: opened,
               onOpen: this.onPopupOpened,
               onClose: this.onPopupClosed,
-              className: kendo_vue_common_1.classNames('k-list-container k-reset', popupSettings.className),
+              popupClass: kendo_vue_common_1.classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-" + (sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
+              className: popupSettings.className,
               appendTo: popupSettings.appendTo
             },
             itemsCount: dataItems.length
@@ -1123,13 +1148,22 @@ var MultiSelect = {
             show: opened,
             onOpen: this.onPopupOpened,
             onClose: this.onPopupClosed,
-            className: kendo_vue_common_1.classNames('k-list-container k-reset', popupSettings.className),
+            popupClass: kendo_vue_common_1.classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-" + (sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
+            className: popupSettings.className,
             appendTo: popupSettings.appendTo
           },
           itemsCount: dataItems.length
         }, this.v3 ? function () {
-          return [virtual && header, renderScrollWrapper.call(_this2, [!virtual && header, customItem, renderList.call(_this2), !virtual && footer, renderScrollElement.call(_this2)]), virtual && footer];
-        } : [virtual && header, renderScrollWrapper.call(_this2, [!virtual && header, customItem, renderList.call(_this2), !virtual && footer, renderScrollElement.call(_this2)]), virtual && footer])
+          return [header && h("div", {
+            "class": "k-list-header"
+          }, [header]), customItem, renderList.call(_this3), footer && h("div", {
+            "class": "k-list-footer"
+          }, [footer]), virtual && header];
+        } : [header && h("div", {
+          "class": "k-list-header"
+        }, [header]), customItem, renderList.call(_this3), footer && h("div", {
+          "class": "k-list-footer"
+        }, [footer]), virtual && header])
       );
     };
 
@@ -1137,11 +1171,7 @@ var MultiSelect = {
       ref: this.v3 ? function (el) {
         _this.kendoAnchorRef = el;
       } : this.anchor,
-      "class": kendo_vue_common_1.classNames('k-widget k-multiselect', {
-        'k-state-focused': focused && !disabled,
-        'k-state-invalid': !isValid,
-        'k-state-disabled': disabled
-      }),
+      "class": kendo_vue_common_1.classNames('k-multiselect', 'k-input', (_a = {}, _a["k-input-" + (sizeMap[size] || size)] = size, _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded, _a["k-input-" + fillMode] = fillMode, _a['k-focus'] = focused && !disabled, _a['k-disabled'] = disabled, _a['k-invalid'] = !isValid, _a['k-valid'] = isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a)),
       style: !label ? style : __assign(__assign({}, style), {
         width: undefined
       }),
@@ -1151,23 +1181,19 @@ var MultiSelect = {
       },
       onFocusin: this.handleFocus,
       on: this.v3 ? undefined : {
-        "focusin": this.handleFocus
-      }
-    }, [h("div", {
-      onClick: this.handleWrapperClick,
-      on: this.v3 ? undefined : {
+        "focusin": this.handleFocus,
         "click": this.handleWrapperClick,
         "mousedown": utils_1.preventDefaultNonInputs
       },
-      ref: this.v3 ? function (el) {
-        _this.baseWrapperRef = el;
-      } : 'baseWrapper',
-      "class": "k-multiselect-wrap k-floatwrap",
+      onClick: this.handleWrapperClick,
       onMousedown: utils_1.preventDefaultNonInputs
     }, [tagsToRender.length > 0 && // @ts-ignore  function children
     h(TagList_1.TagList, {
-      tagRender: tagRender,
+      tagsRounded: tagsRounded,
       attrs: this.v3 ? undefined : {
+        tagsRounded: tagsRounded,
+        size: size,
+        fillMode: fillMode,
         tagRender: tagRender,
         dataItems: tagsToRender,
         guid: this.base.guid,
@@ -1175,6 +1201,9 @@ var MultiSelect = {
           return matchTags(t, focusedTag, dataItemKey);
         }) : undefined
       },
+      size: size,
+      fillMode: fillMode,
+      tagRender: tagRender,
       onTagdelete: this.onTagDelete,
       on: this.v3 ? undefined : {
         "tagdelete": this.onTagDelete
@@ -1184,7 +1213,7 @@ var MultiSelect = {
       focused: focusedTag ? tagsToRender.find(function (t) {
         return matchTags(t, focusedTag, dataItemKey);
       }) : undefined
-    }), renderSearchBar.call(this, id), renderClearButton.call(this, clearButton), renderLoading.call(this, loading)]), renderListContainer.call(this)]);
+    }), renderSearchBar.call(this, id), renderClearButton.call(this, clearButton), renderLoading.call(this, loading), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,
       dir: this.$props.dir,
@@ -1202,6 +1231,6 @@ var MultiSelect = {
     }, [this.$props.label]) : null]) : component;
   }
 };
-exports.MultiSelect = MultiSelect;
-var MultiSelectVue3 = MultiSelect;
-exports.MultiSelectVue3 = MultiSelectVue3;
+exports.MultiSelectVue2 = MultiSelectVue2;
+var MultiSelect = MultiSelectVue2;
+exports.MultiSelect = MultiSelect;

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

@@ -199,4 +199,57 @@ export interface MultiSelectProps extends FormComponentProps {
      * Sets the footer component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
      */
     footer?: any;
+    /**
+     * Configures the `size` of the MultiSelect.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the MultiSelect.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null—Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `roundness` of the tags in MultiSelect.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null—Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    tagsRounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the MultiSelect.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null—Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
 }

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

@@ -1,4 +1,4 @@
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => TagListAll);
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -24,11 +24,14 @@ export interface TagListProps {
     guid: string;
     focused?: TagData;
     tagRender?: any;
+    size?: null | 'small' | 'medium' | 'large' | string;
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    tagsRounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
 }
 /**
  * @hidden
  */
-export interface TagListMethods extends Vue {
+export interface TagListMethods extends Vue2type {
     [key: string]: any;
     onTagDelete: (data: any, e: any) => void;
 }
@@ -40,5 +43,6 @@ export interface TagListAll extends TagListMethods {
 /**
  * Represents the default `TagList` component.
  */
-declare let TagList: ComponentOptions<Vue, DefaultData<TagListAll>, DefaultMethods<TagListAll>, {}, RecordPropsDefinition<TagListProps>>;
-export { TagList };
+declare let TagListVue2: ComponentOptions<Vue2type, DefaultData<TagListAll>, DefaultMethods<TagListAll>, {}, RecordPropsDefinition<TagListProps>>;
+declare const TagList: DefineComponent<{}, any, {}, {}, TagListMethods, {}, {}, {}, string, {}, {}, {}>;
+export { TagList, TagListVue2 };

package/dist/npm/MultiSelect/TagList.js

@@ -19,7 +19,7 @@ var __assign = undefined && undefined.__assign || function () {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TagList = void 0; // @ts-ignore
+exports.TagListVue2 = exports.TagList = void 0; // @ts-ignore
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 
@@ -28,8 +28,6 @@ var Vue = require("vue");
 var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
-var tagClassName = 'k-button';
-var focusedTagClassName = tagClassName + ' k-state-focused';
 
 var preventDefault = function preventDefault(event) {
   return event.preventDefault();
@@ -43,13 +41,59 @@ var stopPropagation = function stopPropagation(event) {
  */
 
 
-var TagList = {
+var TagListVue2 = {
   name: 'TagList',
   props: {
     dataItems: Array,
     guid: String,
     focused: Object,
-    tagRender: [String, Function, Object]
+    tagRender: [String, Function, Object],
+    tagsRounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return ['solid', 'flat', 'outline'].includes(value);
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large'].includes(value);
+      }
+    }
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          disabled = _b.disabled;
+      return _a = {
+        'k-chip-list': true
+      }, _a["k-chip-list-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a['k-selection-single'] = true, _a['k-disabled'] = disabled, _a;
+    },
+    chipClass: function chipClass() {
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          disabled = _b.disabled,
+          tagsRounded = _b.tagsRounded,
+          fillMode = _b.fillMode;
+      return _a = {
+        'k-chip': true,
+        'k-disabled': disabled
+      }, _a["k-chip-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[tagsRounded] || tagsRounded)] = tagsRounded, _a["k-chip-" + fillMode] = fillMode, _a["k-chip-" + fillMode + "-base"] = Boolean(fillMode), _a;
+    }
   },
   // @ts-ignore
   setup: !gh ? undefined : function () {
@@ -68,8 +112,8 @@ var TagList = {
     var _a = this.$props,
         dataItems = _a.dataItems,
         guid = _a.guid;
-    return h("ul", {
-      "class": "k-reset",
+    return h("div", {
+      "class": this.wrapperClass,
       role: "listbox",
       attrs: this.v3 ? undefined : {
         role: "listbox",
@@ -79,8 +123,10 @@ var TagList = {
     }, [dataItems.map(function (tagData, index) {
       var _this = this;
 
-      var defaultRendering = h("li", {
-        "class": tagData === this.$props.focused ? focusedTagClassName : tagClassName,
+      var defaultRendering = h("div", {
+        "class": __assign(__assign({}, this.chipClass), {
+          'k-focus': tagData === this.$props.focused
+        }),
         key: tagData.text + index,
         id: "tag-" + guid + "-" + tagData.text.replace(/\s+/g, '-'),
         attrs: this.v3 ? undefined : {
@@ -98,7 +144,9 @@ var TagList = {
         "aria-selected": true,
         role: "option",
         "aria-setsize": dataItems.length
-      }, [h("span", [tagData.text]), h("span", {
+      }, [h("span", {
+        "class": "k-chip-content"
+      }, [tagData.text]), h("span", {
         "aria-label": "delete",
         attrs: this.v3 ? undefined : {
           "aria-label": "delete"
@@ -130,4 +178,6 @@ var TagList = {
     }, this)]);
   }
 };
+exports.TagListVue2 = TagListVue2;
+var TagList = TagListVue2;
 exports.TagList = TagList;

package/dist/npm/additionalTypes.ts

@@ -1,3 +1,9 @@
 // @ts-ignore
 import { DefineComponent } from 'vue';
-export { DefineComponent };
+// @ts-ignore
+import * as Vue from 'vue';
+// @ts-ignore
+type Vue2type = Vue.default;
+// @ts-ignore
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };

package/dist/npm/common/ClearButton.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -7,13 +6,13 @@ declare type DefaultMethods<V> = {
 /**
  * @hidden
  */
-export interface ClearButtonMethods extends Vue {
+export interface ClearButtonMethods extends Vue2type {
     onMouseDown: (e: any) => void;
     onClickHandler: (e: any) => void;
 }
 /**
  * Represents the default `ClearButton` component.
  */
-declare let ClearButton: ComponentOptions<Vue, DefaultData<{}>, DefaultMethods<ClearButtonMethods>, {}, RecordPropsDefinition<{}>>;
-declare const ClearButtonVue3: DefineComponent<{}, any, {}, {}, ClearButtonMethods, {}, {}, {}, string, {}, {}, {}>;
-export { ClearButton, ClearButtonVue3 };
+declare let ClearButtonVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ClearButtonMethods>, {}, RecordPropsDefinition<{}>>;
+declare const ClearButton: DefineComponent<{}, any, {}, {}, ClearButtonMethods, {}, {}, {}, string, {}, {}, {}>;
+export { ClearButton, ClearButtonVue2 };

package/dist/npm/common/ClearButton.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ClearButtonVue3 = exports.ClearButton = void 0; // @ts-ignore
+exports.ClearButtonVue2 = exports.ClearButton = void 0; // @ts-ignore
 
 var Vue = require("vue");
 
@@ -19,7 +19,7 @@ var messages_1 = require("../messages");
  */
 
 
-var ClearButton = {
+var ClearButtonVue2 = {
   name: 'clear-button',
   inject: {
     kendoLocalizationService: {
@@ -48,7 +48,7 @@ var ClearButton = {
     var h = gh || createElement;
     var title = kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.clear, messages_1.messages[messages_1.clear]);
     return h("span", {
-      "class": "k-icon k-clear-value k-i-close",
+      "class": "k-clear-value",
       role: "button",
       attrs: this.v3 ? undefined : {
         role: "button",
@@ -64,9 +64,11 @@ var ClearButton = {
       tabIndex: -1,
       title: title,
       key: "clearbutton"
-    });
+    }, [h("span", {
+      "class": "k-icon k-i-x"
+    })]);
   }
 };
-exports.ClearButton = ClearButton;
-var ClearButtonVue3 = ClearButton;
-exports.ClearButtonVue3 = ClearButtonVue3;
+exports.ClearButtonVue2 = ClearButtonVue2;
+var ClearButton = ClearButtonVue2;
+exports.ClearButton = ClearButton;

package/dist/npm/common/DropDownBase.d.ts

@@ -1,4 +1,3 @@
-import { VNode } from 'vue';
 import VirtualScroll from './VirtualScroll';
 import { Navigation } from './Navigation';
 import { ListItemProps } from './ListItem';
@@ -28,10 +27,10 @@ export interface DropDownComponentProps {
     onChange?: (event: any) => void;
     onFilterChange?: (event: any) => void;
     onPageChange?: (event: any) => void;
-    itemRender?: (li: Element, itemProps: ListItemProps) => VNode;
-    listNoDataRender?: (element: any) => VNode;
-    header?: VNode;
-    footer?: VNode;
+    itemRender?: (li: Element, itemProps: ListItemProps) => any;
+    listNoDataRender?: (element: any) => any;
+    header?: any;
+    footer?: any;
 }
 /**
  * @hidden