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

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 };

package/dist/es/common/ListDefaultItem.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;
@@ -15,13 +14,13 @@ export interface DefaultItemProps {
 /**
  * @hidden
  */
-export interface ListDefaultItemMethods extends Vue {
+export interface ListDefaultItemMethods extends Vue2type {
     onMouseDown: (e: any) => void;
     onClick: (e: any) => void;
 }
 /**
  * Represents the default `ListDefaultItem` component.
  */
-declare let ListDefaultItem: ComponentOptions<Vue, DefaultData<{}>, DefaultMethods<ListDefaultItemMethods>, {}, RecordPropsDefinition<DefaultItemProps>>;
-declare const ListDefaultItemVue3: DefineComponent<DefaultItemProps, any, {}, {}, ListDefaultItemMethods, {}, {}, {}, string, DefaultItemProps, DefaultItemProps, {}>;
-export { ListDefaultItem, ListDefaultItemVue3 };
+declare let ListDefaultItemVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ListDefaultItemMethods>, {}, RecordPropsDefinition<DefaultItemProps>>;
+declare const ListDefaultItem: DefineComponent<DefaultItemProps, any, {}, {}, ListDefaultItemMethods, {}, {}, {}, string, DefaultItemProps, DefaultItemProps, {}>;
+export { ListDefaultItem, ListDefaultItemVue2 };

package/dist/es/common/ListDefaultItem.js

@@ -8,7 +8,7 @@ import { getItemValue } from './utils';
  * Represents the default `ListDefaultItem` component.
  */
 
-var ListDefaultItem = {
+var ListDefaultItemVue2 = {
   name: 'list-default-item',
   props: {
     defaultItem: [Object, String],
@@ -45,10 +45,10 @@ var ListDefaultItem = {
       },
       onMousedown: this.onMouseDown,
       "class": classNames('k-list-optionlabel', {
-        'k-state-selected': selected
+        'k-selected': selected
       })
     }, [getItemValue(defaultItem, textField) || '']);
   }
 };
-var ListDefaultItemVue3 = ListDefaultItem;
-export { ListDefaultItem, ListDefaultItemVue3 };
+var ListDefaultItem = ListDefaultItemVue2;
+export { ListDefaultItem, ListDefaultItemVue2 };

package/dist/es/common/ListFilter.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;
@@ -15,7 +14,7 @@ export interface ListFilterProps {
 /**
  * @hidden
  */
-export interface ListFilterMethods extends Vue {
+export interface ListFilterMethods extends Vue2type {
     [key: string]: any;
     onKeyDown: (e: any) => void;
     onChange: (e: any) => void;
@@ -36,6 +35,6 @@ export interface ListFilterAll extends ListFilterState, ListFilterMethods {
 /**
  * Represents the default `ListFilter` component.
  */
-declare let ListFilter: ComponentOptions<Vue, DefaultData<{}>, DefaultMethods<ListFilterMethods>, {}, RecordPropsDefinition<ListFilterProps>>;
-declare const ListFilterVue3: DefineComponent<ListFilterProps, any, {}, {}, ListFilterMethods, {}, {}, {}, string, ListFilterProps, ListFilterProps, {}>;
-export { ListFilter, ListFilterVue3 };
+declare let ListFilterVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ListFilterMethods>, {}, RecordPropsDefinition<ListFilterProps>>;
+declare const ListFilter: DefineComponent<ListFilterProps, any, {}, {}, ListFilterMethods, {}, {}, {}, string, ListFilterProps, ListFilterProps, {}>;
+export { ListFilter, ListFilterVue2 };

package/dist/es/common/ListFilter.js

@@ -7,7 +7,7 @@ var ref = allVue.ref;
  * Represents the default `ListFilter` component.
  */
 
-var ListFilter = {
+var ListFilterVue2 = {
   name: 'list-filter',
   // @ts-ignore
   emits: {
@@ -52,17 +52,15 @@ var ListFilter = {
       domProps: this.v3 ? undefined : {
         "value": this.$props.value || ''
       },
-      "class": "k-textbox",
+      "class": "k-input",
       onInput: this.onChange,
       on: this.v3 ? undefined : {
         "input": this.onChange,
         "keydown": this.onKeyDown
       },
       onKeydown: this.onKeyDown
-    }), h("span", {
-      "class": "k-icon k-i-search"
     })]);
   }
 };
-var ListFilterVue3 = ListFilter;
-export { ListFilter, ListFilterVue3 };
+var ListFilter = ListFilterVue2;
+export { ListFilter, ListFilterVue2 };

package/dist/es/common/ListItem.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;
@@ -44,12 +43,24 @@ export interface ListItemProps {
 /**
  * @hidden
  */
-export interface ListItemMethods extends Vue {
+export interface ListItemMethods {
     handleClick: (e: any) => void;
 }
+/**
+ * @hidden
+ */
+export interface ListItemComputed {
+    itemClass: object;
+}
+/**
+ * @hidden
+ */
+export interface ListItemAll extends Vue2type, ListItemMethods, ListItemComputed {
+    itemClass: object;
+}
 /**
  * Represents the default `ListItem` component.
  */
-declare let ListItem: ComponentOptions<Vue, DefaultData<{}>, DefaultMethods<ListItemMethods>, {}, RecordPropsDefinition<ListItemProps>>;
-declare const ListItemVue3: DefineComponent<ListItemProps, any, {}, {}, ListItemMethods, {}, {}, {}, string, ListItemProps, ListItemProps, {}>;
-export { ListItem, ListItemVue3 };
+declare let ListItemVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ListItemAll>, ListItemComputed, RecordPropsDefinition<ListItemProps>>;
+declare const ListItem: DefineComponent<ListItemProps, any, {}, {}, ListItemMethods, {}, {}, {}, string, ListItemProps, ListItemProps, {}>;
+export { ListItem, ListItemVue2 };

package/dist/es/common/ListItem.js

@@ -1,4 +1,20 @@
-// @ts-ignore
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @ts-ignore
+
+
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
@@ -8,7 +24,7 @@ import { getItemValue } from './utils';
  * Represents the default `ListItem` component.
  */
 
-var ListItem = {
+var ListItemVue2 = {
   name: 'list-item',
   props: {
     id: String,
@@ -26,6 +42,15 @@ var ListItem = {
       v3: v3
     };
   },
+  computed: {
+    itemClass: function itemClass() {
+      return {
+        'k-list-item': true,
+        'k-selected': this.$props.selected,
+        'k-focus': this.$props.focused
+      };
+    }
+  },
   methods: {
     handleClick: function handleClick(e) {
       this.$emit('itemclick', this.$props.index, e);
@@ -44,25 +69,29 @@ var ListItem = {
       },
       role: "option",
       "aria-selected": selected,
-      "class": classNames('k-item', {
-        'k-state-selected': selected,
-        'k-state-focused': this.$props.focused
+      "class": classNames('k-list-item', {
+        'k-selected': selected,
+        'k-focus': this.$props.focused
       }),
       onClick: this.handleClick,
       on: this.v3 ? undefined : {
         "click": this.handleClick
       }
-    }, [getItemValue(this.$props.dataItem, this.$props.textField).toString()]);
+    }, [h("span", {
+      "class": "k-list-item-text"
+    }, [getItemValue(this.$props.dataItem, this.$props.textField).toString()])]);
     return getTemplate.call(this, {
       h: h,
       template: this.$props.render,
       defaultRendering: defaultRendering,
-      additionalProps: this.$props,
+      additionalProps: __assign(__assign({}, this.$props), {
+        itemClass: this.itemClass
+      }),
       additionalListeners: {
         click: this.handleClick
       }
     });
   }
 };
-var ListItemVue3 = ListItem;
-export { ListItem, ListItemVue3 };
+var ListItem = ListItemVue2;
+export { ListItem, ListItemVue2 };

package/dist/es/common/SearchBar.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) => SearchBarData);
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -28,11 +27,12 @@ export interface SearchBarProps {
     clearButton?: boolean;
     clearButtonClick?: any;
     accessKey?: string;
+    ariaLabelledBy?: string;
 }
 /**
  * @hidden
  */
-export interface SearchBarMethods extends Vue {
+export interface SearchBarMethods extends Vue2type {
     onChange: (e: any) => void;
     onBlur: (e: any) => void;
     onFocus: (e: any) => void;
@@ -57,6 +57,6 @@ export interface SearchBarAll extends SearchBarMethods, SearchBarData {
 /**
  * Represents the default `SearchBar` component.
  */
-declare let SearchBar: ComponentOptions<Vue, DefaultData<SearchBarData>, DefaultMethods<SearchBarAll>, {}, RecordPropsDefinition<SearchBarProps>>;
-declare const SearchBarVue3: DefineComponent<SearchBarProps, any, SearchBarData, {}, SearchBarMethods, {}, {}, {}, string, SearchBarProps, SearchBarProps, {}>;
-export { SearchBar, SearchBarVue3 };
+declare let SearchBarVue2: ComponentOptions<Vue2type, DefaultData<SearchBarData>, DefaultMethods<SearchBarAll>, {}, RecordPropsDefinition<SearchBarProps>>;
+declare const SearchBar: DefineComponent<SearchBarProps, any, SearchBarData, {}, SearchBarMethods, {}, {}, {}, string, SearchBarProps, SearchBarProps, {}>;
+export { SearchBar, SearchBarVue2 };

package/dist/es/common/SearchBar.js

@@ -8,7 +8,7 @@ import { canUseDOM } from '@progress/kendo-vue-common';
  * Represents the default `SearchBar` component.
  */
 
-var SearchBar = {
+var SearchBarVue2 = {
   name: 'search-bar',
   // @ts-ignore
   emits: {
@@ -36,7 +36,8 @@ var SearchBar = {
     activedescendant: String,
     describedby: String,
     clearButton: Boolean,
-    accessKey: String
+    accessKey: String,
+    ariaLabelledBy: String
   },
   data: function data() {
     return {
@@ -108,11 +109,7 @@ var SearchBar = {
     var _this = this;
 
     var h = gh || createElement;
-    var suggestedText = this.$props.suggestedText;
-    return h("span", {
-      "class": "k-searchbar",
-      key: "searchbar"
-    }, [h("input", {
+    return h("input", {
       autoComplete: "off",
       attrs: this.v3 ? undefined : {
         autoComplete: "off",
@@ -131,12 +128,14 @@ var SearchBar = {
         "aria-expanded": this.$props.expanded || false,
         "aria-owns": this.$props.owns,
         "aria-activedescendant": this.$props.activedescendant,
-        "aria-describedby": this.$props.describedby
+        "aria-describedby": this.$props.describedby,
+        "aria-labelledby": this.$props.ariaLabelledBy
       },
       id: this.$props.id,
       type: "text",
+      key: "searchbar",
       placeholder: this.$props.placeholder,
-      "class": "k-input",
+      "class": "k-input-inner",
       tabIndex: this.$props.tabIndex,
       accessKey: this.$props.accessKey,
       role: "listbox",
@@ -166,9 +165,10 @@ var SearchBar = {
       "aria-expanded": this.$props.expanded || false,
       "aria-owns": this.$props.owns,
       "aria-activedescendant": this.$props.activedescendant,
-      "aria-describedby": this.$props.describedby
-    })]);
+      "aria-describedby": this.$props.describedby,
+      "aria-labelledby": this.$props.ariaLabelledBy
+    });
   }
 };
-var SearchBarVue3 = SearchBar;
-export { SearchBar, SearchBarVue3 };
+var SearchBar = SearchBarVue2;
+export { SearchBar, SearchBarVue2 };

package/dist/es/main.d.ts

@@ -1,13 +1,13 @@
 import { FormComponentValidity } from '@progress/kendo-vue-common';
-import { DropDownList, DropDownListVue3 } from './DropDownList/DropDownList';
+import { DropDownList, DropDownListVue2 } from './DropDownList/DropDownList';
 import { DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent } from './DropDownList/DropDownListProps';
 import { Page, VirtualizationSettings, DropDownsPopupSettings, Suggestion } from './common/settings';
 import { ListItemProps } from './common/ListItem';
-import { ComboBox, ComboBoxVue3 } from './ComboBox/ComboBox';
+import { ComboBox, ComboBoxVue2 } from './ComboBox/ComboBox';
 import { ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent } from './ComboBox/ComboBoxProps';
-import { AutoComplete, AutoCompleteVue3 } from './AutoComplete/AutoComplete';
+import { AutoComplete, AutoCompleteVue2 } from './AutoComplete/AutoComplete';
 import { AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent } from './AutoComplete/AutoCompleteProps';
-import { MultiSelect, MultiSelectVue3 } from './MultiSelect/MultiSelect';
+import { MultiSelect, MultiSelectVue2 } from './MultiSelect/MultiSelect';
 import { MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent } from './MultiSelect/MultiSelectProps';
 import { TagData as MultiSelectTagData } from './MultiSelect/TagList';
-export { AutoComplete, AutoCompleteVue3, AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent, DropDownList, DropDownListVue3, DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, DropDownsPopupSettings, ListItemProps, Suggestion, ComboBox, ComboBoxVue3, ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent, MultiSelect, MultiSelectVue3, MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent, MultiSelectTagData, FormComponentValidity };
+export { AutoComplete, AutoCompleteVue2, AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent, DropDownList, DropDownListVue2, DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, DropDownsPopupSettings, ListItemProps, Suggestion, ComboBox, ComboBoxVue2, ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent, MultiSelect, MultiSelectVue2, MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent, MultiSelectTagData, FormComponentValidity };

package/dist/es/main.js

@@ -1,5 +1,5 @@
-import { DropDownList, DropDownListVue3 } from './DropDownList/DropDownList';
-import { ComboBox, ComboBoxVue3 } from './ComboBox/ComboBox';
-import { AutoComplete, AutoCompleteVue3 } from './AutoComplete/AutoComplete';
-import { MultiSelect, MultiSelectVue3 } from './MultiSelect/MultiSelect';
-export { AutoComplete, AutoCompleteVue3, DropDownList, DropDownListVue3, ComboBox, ComboBoxVue3, MultiSelect, MultiSelectVue3 };
+import { DropDownList, DropDownListVue2 } from './DropDownList/DropDownList';
+import { ComboBox, ComboBoxVue2 } from './ComboBox/ComboBox';
+import { AutoComplete, AutoCompleteVue2 } from './AutoComplete/AutoComplete';
+import { MultiSelect, MultiSelectVue2 } from './MultiSelect/MultiSelect';
+export { AutoComplete, AutoCompleteVue2, DropDownList, DropDownListVue2, ComboBox, ComboBoxVue2, MultiSelect, MultiSelectVue2 };

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: 1641392855,
+    publishDate: 1641906727,
     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.d.ts

@@ -1,4 +1,3 @@
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
 declare type DefaultData<V> = object | ((this: V) => AutoCompleteData);
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -6,7 +5,7 @@ declare type DefaultMethods<V> = {
 import { AutoCompleteProps } from './AutoCompleteProps';
 import { DropDownStateBase, InternalState } from './../common/settings';
 import { FormComponentValidity } from '@progress/kendo-vue-common';
-import { DefineComponent } from '../additionalTypes';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 /**
  * @hidden
  */
@@ -95,11 +94,11 @@ export interface AutoCompleteComputed {
 /**
  * @hidden
  */
-export interface AutoCompleteAll extends AutoCompleteMethods, AutoCompleteState, AutoCompleteData, AutoCompleteComputed, Vue {
+export interface AutoCompleteAll extends AutoCompleteMethods, AutoCompleteState, AutoCompleteData, AutoCompleteComputed, Vue2type {
 }
 /**
  * Represents the default `AutoComplete` component.
  */
-declare let AutoComplete: ComponentOptions<Vue, DefaultData<AutoCompleteData>, DefaultMethods<AutoCompleteAll>, AutoCompleteComputed, RecordPropsDefinition<AutoCompleteProps>>;
-declare const AutoCompleteVue3: DefineComponent<AutoCompleteProps, any, AutoCompleteData, AutoCompleteComputed, AutoCompleteMethods, {}, {}, {}, string, AutoCompleteProps, AutoCompleteProps, {}>;
-export { AutoComplete, AutoCompleteVue3 };
+declare let AutoCompleteVue2: ComponentOptions<Vue2type, DefaultData<AutoCompleteData>, DefaultMethods<AutoCompleteAll>, AutoCompleteComputed, RecordPropsDefinition<AutoCompleteProps>>;
+declare const AutoComplete: DefineComponent<AutoCompleteProps, any, AutoCompleteData, AutoCompleteComputed, AutoCompleteMethods, {}, {}, {}, string, AutoCompleteProps, AutoCompleteProps, {}>;
+export { AutoComplete, AutoCompleteVue2 };

package/dist/npm/AutoComplete/AutoComplete.js

@@ -19,7 +19,7 @@ var __assign = undefined && undefined.__assign || function () {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AutoCompleteVue3 = exports.AutoComplete = void 0; // @ts-ignore
+exports.AutoCompleteVue2 = exports.AutoComplete = void 0; // @ts-ignore
 
 var Vue = require("vue");
 
@@ -41,12 +41,14 @@ var utils_1 = require("../common/utils");
 
 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 VALIDATION_MESSAGE = 'Please enter a valid value!';
 /**
  * Represents the default `AutoComplete` component.
  */
 
-var AutoComplete = {
+var AutoCompleteVue2 = {
   name: 'KendoAutoComplete',
   model: {
     event: 'changemodel'
@@ -103,7 +105,6 @@ var AutoComplete = {
     accessKey: String,
     dataItems: Array,
     textField: String,
-    className: String,
     loading: Boolean,
     popupSettings: {
       type: Object,
@@ -124,7 +125,28 @@ var AutoComplete = {
       default: false
     },
     ariaLabelledBy: String,
-    ariaDescribedBy: String
+    ariaDescribedBy: String,
+    rounded: {
+      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);
+      }
+    }
   },
   data: function data() {
     return {
@@ -216,10 +238,10 @@ var AutoComplete = {
       get: function get() {
         var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
         return {
-          'k-textbox-container': true,
-          'k-state-focused': this.currentFocused,
-          'k-state-empty': !this.computedValue(),
-          'k-state-invalid': !isValid && isValid !== undefined,
+          'k-floating-label-container': true,
+          'k-focus': this.currentFocused,
+          'k-empty': !this.computedValue(),
+          'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
@@ -478,17 +500,21 @@ var AutoComplete = {
     }
   },
   render: function render(createElement) {
+    var _a;
+
     var _this = this;
 
     var h = gh || createElement;
-    var _a = this.$props,
-        dir = _a.dir,
-        disabled = _a.disabled,
-        label = _a.label,
-        className = _a.className,
-        style = _a.style,
-        loading = _a.loading,
-        suggest = _a.suggest;
+    var _b = this.$props,
+        dir = _b.dir,
+        disabled = _b.disabled,
+        label = _b.label,
+        size = _b.size,
+        rounded = _b.rounded,
+        fillMode = _b.fillMode,
+        style = _b.style,
+        loading = _b.loading,
+        suggest = _b.suggest;
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var focused = this.currentFocused;
     var base = this.base;
@@ -589,7 +615,7 @@ var AutoComplete = {
             wrapperStyle: {
               maxHeight: popupSettings.height
             },
-            wrapperCssClass: "k-list-scroller",
+            wrapperCssClass: "k-list-content",
             itemRender: itemRender,
             noDataRender: listNoDataRender
           },
@@ -605,7 +631,7 @@ var AutoComplete = {
           wrapperStyle: {
             maxHeight: popupSettings.height
           },
-          wrapperCssClass: "k-list-scroller",
+          wrapperCssClass: "k-list-content",
           onListclick: this.handleItemClick,
           on: this.v3 ? undefined : {
             "listclick": this.handleItemClick
@@ -619,6 +645,8 @@ var AutoComplete = {
     var renderListContainer = function renderListContainer() {
       var _this2 = this;
 
+      var _a;
+
       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, {
@@ -648,7 +676,8 @@ var AutoComplete = {
               animate: popupSettings.animate,
               anchor: this.anchor,
               show: opened,
-              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)),
+              className: popupSettings.className,
               appendTo: popupSettings.appendTo
             },
             dir: dir !== undefined ? dir : this.base.dirCalculated
@@ -658,13 +687,22 @@ var AutoComplete = {
             animate: popupSettings.animate,
             anchor: this.anchor,
             show: opened,
-            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)),
+            className: popupSettings.className,
             appendTo: popupSettings.appendTo
           },
           dir: dir !== undefined ? dir : this.base.dirCalculated
         }, this.v3 ? function () {
-          return [header, renderList.call(_this2), footer];
-        } : [header, renderList.call(_this2), footer])
+          return [header && h("div", {
+            "class": "k-list-header"
+          }, [header]), renderList.call(_this2), footer && h("div", {
+            "class": "k-list-footer"
+          }, [footer])];
+        } : [header && h("div", {
+          "class": "k-list-header"
+        }, [header]), renderList.call(_this2), footer && h("div", {
+          "class": "k-list-footer"
+        }, [footer])])
       );
     };
 
@@ -694,11 +732,7 @@ var AutoComplete = {
     };
 
     var autoComplete = h("span", {
-      "class": kendo_vue_common_1.classNames('k-widget k-autocomplete', className, {
-        'k-state-disabled': disabled,
-        'k-state-focused': focused && !disabled,
-        'k-state-invalid': !isValid
-      }),
+      "class": kendo_vue_common_1.classNames('k-autocomplete k-input', (_a = {}, _a["k-input-" + (sizeMap[size] || size)] = size, _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded, _a["k-input-" + fillMode] = fillMode, _a['k-valid'] = isValid, _a['k-invalid'] = !isValid, _a['k-focus'] = focused && !disabled, _a['k-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a)),
       ref: this.v3 ? function (el) {
         _this.kendoAnchorRef = el;
       } : this.anchor,
@@ -727,6 +761,6 @@ var AutoComplete = {
     }, [this.$props.label]) : null]) : autoComplete;
   }
 };
-exports.AutoComplete = AutoComplete;
-var AutoCompleteVue3 = AutoComplete;
-exports.AutoCompleteVue3 = AutoCompleteVue3;
+exports.AutoCompleteVue2 = AutoCompleteVue2;
+var AutoComplete = AutoCompleteVue2;
+exports.AutoComplete = AutoComplete;