@progress/kendo-vue-dropdowns 2.7.3 → 2.8.0-dev.202201111325

package/dist/es/MultiSelect/MultiSelect.js

@@ -33,7 +33,9 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
-import { classNames, Keys, guid, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { classNames, Keys, guid, templateRendering, getListeners, getTemplate, kendoThemeMaps } from '@progress/kendo-vue-common';
+var sizeMap = kendoThemeMaps.sizeMap,
+    roundedMap = kendoThemeMaps.roundedMap;
 import { ListContainer } from '../common/ListContainer';
 import { List } from '../common/List';
 import { TagList } from './TagList';
@@ -72,7 +74,7 @@ var FocusedItemType;
  */
 
 
-var MultiSelect = {
+var MultiSelectVue2 = {
   name: 'KendoMultiSelect',
   model: {
     event: 'changemodel'
@@ -150,7 +152,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 () {
@@ -169,10 +199,10 @@ var MultiSelect = {
         var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
         var editorValue = this.currentText || getItemValue(this.computedValue()[0], this.$props.textField);
         return {
-          'k-textbox-container': true,
-          'k-state-focused': this.currentFocused,
-          'k-state-empty': !(editorValue && editorValue !== 0),
-          'k-state-invalid': !isValid && isValid !== undefined,
+          'k-floating-label-container': true,
+          'k-focus': this.currentFocused,
+          'k-empty': !(editorValue && editorValue !== 0),
+          'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
@@ -279,7 +309,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();
@@ -823,19 +853,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,
@@ -974,9 +1010,10 @@ var MultiSelect = {
               float: 'left',
               width: '100%'
             } : {
-              maxHeight: popupSettings.height
+              maxHeight: popupSettings.height,
+              overflowY: 'scroll'
             },
-            wrapperCssClass: vs.enabled ? undefined : 'k-list-scroller',
+            wrapperCssClass: 'k-list-content',
             listStyle: vs.enabled ? {
               transform: translate
             } : undefined,
@@ -996,9 +1033,10 @@ var MultiSelect = {
             float: 'left',
             width: '100%'
           } : {
-            maxHeight: popupSettings.height
+            maxHeight: popupSettings.height,
+            overflowY: 'scroll'
           },
-          wrapperCssClass: vs.enabled ? undefined : 'k-list-scroller',
+          wrapperCssClass: 'k-list-content',
           listStyle: vs.enabled ? {
             transform: translate
           } : undefined,
@@ -1039,11 +1077,13 @@ var MultiSelect = {
     var renderListContainer = function renderListContainer() {
       var _this2 = 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 = templateRendering.call(this, this.$props.header, getListeners.call(this));
       var footerTemplate = templateRendering.call(this, this.$props.footer, getListeners.call(this));
       var header = getTemplate.call(this, {
@@ -1067,7 +1107,7 @@ var MultiSelect = {
         }
       }, [h("div", {
         "class": classNames('k-item k-custom-item', {
-          'k-state-focused': isCustom(focusedType)
+          'k-focus': isCustom(focusedType)
         })
       }, [currentText, h("span", {
         "class": "k-icon k-i-plus",
@@ -1093,7 +1133,8 @@ var MultiSelect = {
               show: opened,
               onOpen: this.onPopupOpened,
               onClose: this.onPopupClosed,
-              className: classNames('k-list-container k-reset', popupSettings.className),
+              popupClass: 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
@@ -1106,7 +1147,8 @@ var MultiSelect = {
             show: opened,
             onOpen: this.onPopupOpened,
             onClose: this.onPopupClosed,
-            className: classNames('k-list-container k-reset', popupSettings.className),
+            popupClass: 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
@@ -1120,11 +1162,7 @@ var MultiSelect = {
       ref: this.v3 ? function (el) {
         _this.kendoAnchorRef = el;
       } : this.anchor,
-      "class": classNames('k-widget k-multiselect', {
-        'k-state-focused': focused && !disabled,
-        'k-state-invalid': !isValid,
-        'k-state-disabled': disabled
-      }),
+      "class": 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
       }),
@@ -1134,23 +1172,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": preventDefaultNonInputs
       },
-      ref: this.v3 ? function (el) {
-        _this.baseWrapperRef = el;
-      } : 'baseWrapper',
-      "class": "k-multiselect-wrap k-floatwrap",
+      onClick: this.handleWrapperClick,
       onMousedown: preventDefaultNonInputs
     }, [tagsToRender.length > 0 && // @ts-ignore  function children
     h(TagList, {
-      tagRender: tagRender,
+      tagsRounded: tagsRounded,
       attrs: this.v3 ? undefined : {
+        tagsRounded: tagsRounded,
+        size: size,
+        fillMode: fillMode,
         tagRender: tagRender,
         dataItems: tagsToRender,
         guid: this.base.guid,
@@ -1158,6 +1192,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
@@ -1167,7 +1204,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,
@@ -1185,5 +1222,5 @@ var MultiSelect = {
     }, [this.$props.label]) : null]) : component;
   }
 };
-var MultiSelectVue3 = MultiSelect;
-export { MultiSelect, MultiSelectVue3 };
+var MultiSelect = MultiSelectVue2;
+export { MultiSelect, MultiSelectVue2 };

package/dist/es/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/es/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/es/MultiSelect/TagList.js

@@ -15,13 +15,11 @@ var __assign = this && this.__assign || function () {
 }; // @ts-ignore
 
 
-import { getTemplate } from '@progress/kendo-vue-common';
+import { getTemplate, kendoThemeMaps } from '@progress/kendo-vue-common';
 import * as Vue from '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();
@@ -35,13 +33,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-" + (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-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-" + (kendoThemeMaps.roundedMap[tagsRounded] || tagsRounded)] = tagsRounded, _a["k-chip-" + fillMode] = fillMode, _a["k-chip-" + fillMode + "-base"] = Boolean(fillMode), _a;
+    }
   },
   // @ts-ignore
   setup: !gh ? undefined : function () {
@@ -60,8 +104,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",
@@ -71,8 +115,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 : {
@@ -90,7 +136,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"
@@ -122,4 +170,5 @@ var TagList = {
     }, this)]);
   }
 };
-export { TagList };
+var TagList = TagListVue2;
+export { TagList, TagListVue2 };

package/dist/es/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/es/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/es/common/ClearButton.js

@@ -9,7 +9,7 @@ import { messages, clear } from '../messages';
  * Represents the default `ClearButton` component.
  */
 
-var ClearButton = {
+var ClearButtonVue2 = {
   name: 'clear-button',
   inject: {
     kendoLocalizationService: {
@@ -38,7 +38,7 @@ var ClearButton = {
     var h = gh || createElement;
     var title = provideLocalizationService(this).toLanguageString(clear, messages[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",
@@ -54,8 +54,10 @@ var ClearButton = {
       tabIndex: -1,
       title: title,
       key: "clearbutton"
-    });
+    }, [h("span", {
+      "class": "k-icon k-i-x"
+    })]);
   }
 };
-var ClearButtonVue3 = ClearButton;
-export { ClearButton, ClearButtonVue3 };
+var ClearButton = ClearButtonVue2;
+export { ClearButton, ClearButtonVue2 };

package/dist/es/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

package/dist/es/common/List.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) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -28,7 +28,7 @@ export interface ListProps {
 /**
  * @hidden
  */
-export interface ListMethods extends Vue {
+export interface ListMethods extends Vue2type {
     handleClick: (e: any) => void;
 }
 /**
@@ -48,5 +48,6 @@ export interface ListAll extends ListMethods, ListState {
 /**
  * Represents the default `List` component.
  */
-declare let List: ComponentOptions<Vue, DefaultData<{}>, DefaultMethods<ListMethods>, {}, RecordPropsDefinition<ListProps>>;
-export { List };
+declare let ListVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ListMethods>, {}, RecordPropsDefinition<ListProps>>;
+declare const List: DefineComponent<{}, any, {}, {}, ListMethods, {}, {}, {}, string, {}, {}, {}>;
+export { List, ListVue2 };

package/dist/es/common/List.js

@@ -13,7 +13,7 @@ import { messages, nodata } from '../messages';
  * Represents the default `List` component.
  */
 
-var List = {
+var ListVue2 = {
   name: 'list',
   props: {
     id: String,
@@ -147,7 +147,7 @@ var List = {
       },
       role: "listbox",
       "aria-hidden": !show ? true : undefined,
-      "class": 'k-list k-reset',
+      "class": 'k-list-ul',
       ref: this.v3 ? function (el) {
         _this.listRef = el;
       } : 'list',
@@ -155,4 +155,5 @@ var List = {
     }, [items])]) : renderNoValueElement.call(this);
   }
 };
-export { List };
+var List = ListVue2;
+export { List, ListVue2 };

package/dist/es/common/ListContainer.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;
@@ -24,7 +23,7 @@ export interface ListContainerState {
 /**
  * @hidden
  */
-export interface ListContainerMethods extends Vue {
+export interface ListContainerMethods extends Vue2type {
     onMouseDown: (e: any) => void;
     onBlur: (e: any) => void;
     onOpen: (e: any) => void;
@@ -33,6 +32,6 @@ export interface ListContainerMethods extends Vue {
 /**
  * Represents the default `ListContainer` component.
  */
-declare let ListContainer: ComponentOptions<Vue, DefaultData<{}>, DefaultMethods<ListContainerMethods>, {}, RecordPropsDefinition<ListContainerProps>>;
-declare const ListContainerVue3: DefineComponent<ListContainerProps, any, {}, {}, ListContainerMethods, {}, {}, {}, string, ListContainerProps, ListContainerProps, {}>;
-export { ListContainer, ListContainerVue3 };
+declare let ListContainerVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ListContainerMethods>, {}, RecordPropsDefinition<ListContainerProps>>;
+declare const ListContainer: DefineComponent<ListContainerProps, any, {}, {}, ListContainerMethods, {}, {}, {}, string, ListContainerProps, ListContainerProps, {}>;
+export { ListContainer, ListContainerVue2 };

package/dist/es/common/ListContainer.js

@@ -8,7 +8,7 @@ import { getDefaultSlots } from '@progress/kendo-vue-common';
  * Represents the default `ListContainer` component.
  */
 
-var ListContainer = {
+var ListContainerVue2 = {
   name: 'list-container',
   // @ts-ignore
   emits: {
@@ -68,7 +68,8 @@ var ListContainer = {
         dir = _a.dir,
         popupSettings = _a.popupSettings; // @ts-ignore
 
-    var className = popupSettings.className,
+    var popupClass = popupSettings.popupClass,
+        className = popupSettings.className,
         animate = popupSettings.animate,
         anchor = popupSettings.anchor,
         show = popupSettings.show,
@@ -101,6 +102,7 @@ var ListContainer = {
         onClose: this.onClose
       }, this.v3 ? function () {
         return [h("div", {
+          "class": popupClass,
           onMousedown: _this.onMouseDown,
           on: _this.v3 ? undefined : {
             "mousedown": _this.onMouseDown,
@@ -109,6 +111,7 @@ var ListContainer = {
           onFocusout: _this.onBlur
         }, [defaultSlot])];
       } : [h("div", {
+        "class": popupClass,
         onMousedown: _this.onMouseDown,
         on: _this.v3 ? undefined : {
           "mousedown": _this.onMouseDown,
@@ -119,5 +122,5 @@ var ListContainer = {
     );
   }
 };
-var ListContainerVue3 = ListContainer;
-export { ListContainer, ListContainerVue3 };
+var ListContainer = ListContainerVue2;
+export { ListContainer, ListContainerVue2 };