@progress/kendo-vue-dropdowns 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/dist/es/AutoComplete/AutoComplete.js

@@ -1,825 +0,0 @@
-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;
-var isV3 = allVue.version && allVue.version[0] === '3';
-var ref = allVue.ref;
-import { SearchBar } from './../common/SearchBar';
-import { ListContainer } from './../common/ListContainer';
-import { List } from './../common/List';
-import DropDownBase from '../common/DropDownBase';
-import { GroupStickyHeader } from '../common/GroupStickyHeader';
-import { ClearButton } from '../common/ClearButton';
-import { itemIndexStartsWith, getItemValue, areSame, getFocusedItem } from '../common/utils';
-import { guid, Keys, classNames, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
-var sizeMap = kendoThemeMaps.sizeMap,
-  roundedMap = kendoThemeMaps.roundedMap;
-var VALIDATION_MESSAGE = 'Please enter a valid value!';
-/**
- * @hidden
- */
-var AutoCompleteVue2 = {
-  name: 'KendoAutoComplete',
-  model: {
-    event: 'changemodel'
-  },
-  props: {
-    id: String,
-    defaultValue: {
-      type: [String],
-      default: undefined
-    },
-    name: String,
-    modelValue: {
-      type: [String],
-      default: undefined
-    },
-    value: {
-      type: [String],
-      default: undefined
-    },
-    label: {
-      type: String
-    },
-    placeholder: String,
-    required: {
-      type: Boolean,
-      default: false
-    },
-    valid: {
-      type: Boolean,
-      default: undefined
-    },
-    validationMessage: {
-      type: String,
-      default: undefined
-    },
-    validityStyles: {
-      type: Boolean,
-      default: true
-    },
-    opened: {
-      type: Boolean,
-      default: undefined
-    },
-    disabled: Boolean,
-    dir: {
-      type: String,
-      default: undefined
-    },
-    tabIndex: {
-      type: Number,
-      default: undefined
-    },
-    readonly: Boolean,
-    accessKey: String,
-    dataItems: Array,
-    textField: String,
-    loading: Boolean,
-    popupSettings: {
-      type: Object,
-      default: function _default() {
-        return {
-          animate: true,
-          height: '200px',
-          anchor: ''
-        };
-      }
-    },
-    itemRender: [String, Function, Object],
-    groupHeaderItemRender: [String, Function, Object],
-    groupStickyHeaderItemRender: [String, Function, Object],
-    listNoDataRender: [String, Function, Object],
-    focusedItemIndex: Function,
-    header: [String, Function, Object],
-    footer: [String, Function, Object],
-    suggest: {
-      type: [Boolean, String],
-      default: false
-    },
-    ariaLabel: {
-      type: String,
-      default: undefined
-    },
-    ariaLabelledBy: 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);
-      }
-    },
-    groupField: {
-      type: String
-    }
-  },
-  data: function data() {
-    return {
-      hasMounted: false,
-      currentText: '',
-      currentValue: '',
-      currentFocused: false,
-      currentOpened: false,
-      focusedItem: undefined,
-      searchState: {
-        word: '',
-        last: ''
-      },
-      valueDuringOnChange: {},
-      suggested: '',
-      group: undefined,
-      isScrolling: false,
-      popupWidth: undefined,
-      itemHeight: 0
-    };
-  },
-  created: function created() {
-    this.valueDuringOnChange = undefined;
-    this.currentText = undefined;
-    this.currentValue = undefined;
-    this.currentFocused = undefined;
-    this.currentOpened = undefined;
-    this.base = new DropDownBase(this);
-    this.anchor = guid();
-    this.inputId = guid();
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    var inputRef = ref(null);
-    var kendoAnchorRef = ref(null);
-    return {
-      v3: v3,
-      inputRef: inputRef,
-      kendoAnchorRef: kendoAnchorRef
-    };
-  },
-  mounted: function mounted() {
-    this.hasMounted = true;
-    // @ts-ignore
-    this.input = this.v3 ? this.inputRef.input : this.$refs.input.input;
-    this.base.wrapper = getRef(this, 'kendoAnchor', this.anchor);
-    this.element = getRef(this, 'kendoAnchor', this.anchor);
-    this.base.didMount();
-    this.setValidity();
-  },
-  watch: {
-    currentOpened: function currentOpened(_, oldValue) {
-      this.prevCurrentOpened = oldValue;
-    },
-    opened: function opened(_, oldValue) {
-      this.prevOpened = oldValue;
-    },
-    dataItems: function dataItems(_, oldValue) {
-      this.prevData = oldValue;
-    },
-    focusedItem: function focusedItem(_, oldValue) {
-      this.prevFocusedItem = oldValue;
-    }
-  },
-  updated: function updated() {
-    var _a;
-    var _b = this.$props,
-      _c = _b.groupField,
-      groupField = _c === void 0 ? '' : _c,
-      _d = _b.dataItems,
-      dataItems = _d === void 0 ? [] : _d;
-    var focusedIndex = this.focusedIndex();
-    var focusedItem = dataItems[focusedIndex];
-    var dataChanged = this.prevData !== dataItems;
-    var focusedItemChanged = focusedItem !== undefined && this.prevFocusedItem !== focusedItem;
-    var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
-    var prevOpened = this.prevOpened !== undefined ? this.prevOpened : this.prevCurrentOpened;
-    var opening = !prevOpened && opened;
-    var list = this.$refs.list;
-    if (list) {
-      // @ts-ignore
-      this.base.vs.list = list.list;
-      // @ts-ignore
-      this.base.list = list.list;
-    }
-    if (groupField === '') {
-      if (opened && (focusedItemChanged || dataChanged) || opening) {
-        this.base.scrollToItem(focusedIndex);
-      }
-    } else if (!this.isScrolling) {
-      var focusedItemIndex = (_a = this.base.getGroupedDataModernMode(dataItems, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(focusedItem);
-      if (opening) {
-        // Resets the sticky header group value for scenarios with open/close of component's popup
-        if (dataItems && dataItems.length !== 0) {
-          this.base.resetGroupStickyHeader(dataItems[0][groupField], this);
-        }
-        this.base.scrollToItem(focusedItemIndex);
-      }
-      if (opened && prevOpened && focusedItemChanged) {
-        this.base.scrollToItem(focusedItemIndex);
-      }
-    }
-    this.setValidity();
-  },
-  computed: {
-    spanClassNames: {
-      get: function get() {
-        var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
-        return {
-          'k-floating-label-container': true,
-          'k-focus': this.currentFocused,
-          'k-empty': !this.computedValue(),
-          'k-invalid': !isValid && isValid !== undefined,
-          'k-rtl': this.$props.dir === 'rtl'
-        };
-      }
-    }
-  },
-  methods: {
-    focus: function focus() {
-      if (this.input) {
-        this.input.focus();
-      }
-    },
-    computedValue: function computedValue() {
-      var value;
-      if (this.valueDuringOnChange !== undefined) {
-        value = this.valueDuringOnChange;
-      } else if (this.$props.value !== undefined) {
-        value = this.$props.value;
-      } else if (this.$props.modelValue !== undefined) {
-        value = this.$props.modelValue;
-      } else if (this.currentValue !== undefined) {
-        value = this.currentValue;
-      } else if (this.$props.defaultValue !== undefined) {
-        value = this.$props.defaultValue;
-      }
-      return value;
-    },
-    primitiveValue: function primitiveValue() {
-      var value = this.computedValue();
-      return this.valuePrimitive ? getItemValue(value, this.valueField) : value;
-    },
-    validity: function validity() {
-      var customError = this.$props.validationMessage !== undefined;
-      var isValid = !this.$props.required || this.computedValue() !== null && this.computedValue() !== '' && this.computedValue() !== undefined;
-      var valid = this.$props.valid !== undefined ? this.$props.valid : isValid;
-      return {
-        customError: customError,
-        valid: valid,
-        valueMissing: this.computedValue() === null
-      };
-    },
-    handleItemSelect: function handleItemSelect(index, state) {
-      var _a = this.$props.dataItems,
-        dataItems = _a === void 0 ? [] : _a;
-      var item = dataItems[index];
-      var newText = getItemValue(item, this.$props.textField);
-      this.triggerOnChange(newText, state, {
-        item: item
-      });
-      this.triggerOnSelect(state, {
-        item: item
-      });
-    },
-    itemFocus: function itemFocus(index, state) {
-      var _a = this.$props,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        textField = _a.textField;
-      var focusedItem = dataItems[index];
-      if (!areSame(this.$data.focusedItem, focusedItem, textField)) {
-        state.data.focusedItem = focusedItem;
-      }
-    },
-    togglePopup: function togglePopup(state) {
-      this.base.togglePopup(state);
-    },
-    onNavigate: function onNavigate(state, keyCode) {
-      var _this = this;
-      var typedText = this.computedValue();
-      var _a = this.$props,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        textField = _a.textField,
-        focusedItemIndex = _a.focusedItemIndex;
-      var focusedIndex = this.$data.focusedItem !== undefined ? dataItems.findIndex(function (i) {
-        return areSame(i, _this.$data.focusedItem, textField);
-      }) : focusedItemIndex ? focusedItemIndex(dataItems, typedText, textField) : dataItems.indexOf(getFocusedItem(dataItems, typedText, textField));
-      var newFocused = this.base.navigation.navigate({
-        keyCode: keyCode,
-        current: focusedIndex,
-        max: dataItems.length - 1,
-        min: 0
-      });
-      if (newFocused !== undefined) {
-        this.itemFocus(newFocused, state);
-      }
-      this.applyState(state);
-    },
-    /**
-     * @hidden
-     */
-    applyInputValue: function applyInputValue(value, state, eventKey) {
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
-      var _a = this.$props,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        textField = _a.textField;
-      this.suggested = '';
-      if (opened && eventKey === Keys.enter) {
-        var item = dataItems[this.focusedIndex(value)];
-        var newValue = getItemValue(item, textField);
-        this.triggerOnChange(newValue, state, {
-          item: item
-        });
-        this.triggerOnSelect(state, {
-          item: item
-        });
-      }
-      if (opened) {
-        this.togglePopup(state);
-      }
-      this.applyState(state);
-    },
-    setValidity: function setValidity() {
-      if (this.input && this.input.setCustomValidity) {
-        this.input.setCustomValidity(this.validity().valid ? '' : this.$props.validationMessage || VALIDATION_MESSAGE);
-      }
-    },
-    handleItemClick: function handleItemClick(index, event) {
-      this.base.handleItemClick(index, event);
-      this.valueDuringOnChange = undefined;
-    },
-    onChangeHandler: function onChangeHandler(event) {
-      var base = this.base;
-      var state = base.initState();
-      var input = event.target;
-      var value = input.value;
-      var selectionAtEnd = input.selectionEnd === value.length;
-      state.event = event;
-      var prevSuggestion = this.suggested;
-      var prevValue = this.computedValue();
-      var prevUserInput = prevValue && prevSuggestion && prevValue.substring(0, prevValue.length - prevSuggestion.length);
-      var deletedSuggestion = prevUserInput && prevUserInput === value;
-      var deleting = prevUserInput && prevUserInput.length > value.length;
-      var suggest = this.$props.suggest;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
-      if (suggest !== undefined && suggest !== false) {
-        if (deletedSuggestion || deleting || !selectionAtEnd) {
-          this.suggested = '';
-        } else {
-          this.suggestValue(value);
-        }
-        var newValue = value + this.suggested;
-        var suggestion = {
-          userInput: value,
-          value: this.suggested
-        };
-        this.triggerOnChange(newValue, state, {
-          suggestion: suggestion
-        });
-      } else {
-        this.suggested = '';
-        this.triggerOnChange(value, state);
-      }
-      if (!opened && value || opened && !value) {
-        this.togglePopup(state);
-      }
-      state.data.focusedItem = undefined;
-      // Resets the value of the StickyHeader when filtering the data or just entering symbols in the input
-      if (this.prevData && this.prevData.length !== this.$props.dataItems) {
-        state.data.group = undefined;
-      }
-      this.applyState(state);
-    },
-    clearButtonClick: function clearButtonClick(event) {
-      var base = this.base;
-      var state = base.initState();
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
-      state.event = event;
-      var newValue = '';
-      this.suggested = '';
-      this.triggerOnChange(newValue, state);
-      if (this.$data.focusedItem !== undefined) {
-        state.data.focusedItem = undefined;
-      }
-      if (opened) {
-        this.togglePopup(state);
-      }
-      this.applyState(state);
-    },
-    onInputKeyDown: function onInputKeyDown(event) {
-      if (this.isScrolling) {
-        this.isScrolling = false;
-      }
-      var keyCode = event.keyCode;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
-      var state = this.base.initState();
-      var value = this.computedValue();
-      state.event = event;
-      var preventDefault = function preventDefault() {
-        if (opened) {
-          event.preventDefault();
-        }
-      };
-      if (keyCode === Keys.enter || opened && keyCode === Keys.esc || event.altKey && keyCode === Keys.up) {
-        preventDefault();
-        this.applyInputValue(event.currentTarget.value, state, event.keyCode);
-      } else if (!event.altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
-        preventDefault();
-        this.onNavigate(state, keyCode);
-      } else if (!opened && keyCode === Keys.esc) {
-        this.clearButtonClick(event);
-      } else if (!opened && value && event.altKey && keyCode === Keys.down) {
-        this.togglePopup(state);
-        this.applyState(state);
-      }
-    },
-    handleBlur: function handleBlur(event) {
-      if (this.currentFocused) {
-        var state = this.base.initState();
-        state.data.focused = false;
-        state.events.push({
-          type: 'blur'
-        });
-        state.event = event;
-        this.applyInputValue(event.currentTarget.value, state);
-        this.currentFocused = false;
-      }
-    },
-    triggerOnChange: function triggerOnChange(newValue, state, eventArgs) {
-      if (this.computedValue() === newValue && !eventArgs) {
-        return;
-      }
-      // @ts-ignore
-      state.data.currentValue = newValue;
-      this.valueDuringOnChange = newValue;
-      state.events.push(__assign({
-        type: 'change'
-      }, eventArgs || {}));
-    },
-    triggerOnSelect: function triggerOnSelect(state, eventArgs) {
-      state.events.push(__assign({
-        type: 'select'
-      }, eventArgs || {}));
-    },
-    applyState: function applyState(state) {
-      this.base.applyState(state);
-      this.valueDuringOnChange = undefined;
-    },
-    suggestValue: function suggestValue(value) {
-      this.suggested = '';
-      if (value) {
-        var _a = this.$props,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b,
-          textField = _a.textField;
-        var suggestedItem = dataItems[itemIndexStartsWith(dataItems, value, textField)];
-        if (suggestedItem) {
-          var suggestedText = getItemValue(suggestedItem, textField);
-          if (value.toLowerCase() !== suggestedText.toLowerCase()) {
-            this.suggested = suggestedText.substring(value.length);
-          }
-        }
-      }
-    },
-    focusedIndex: function focusedIndex(value) {
-      var _this = this;
-      var _a = this.$props,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        textField = _a.textField,
-        focusedItemIndex = _a.focusedItemIndex;
-      var inputValue = value !== undefined ? value : this.computedValue();
-      return this.$data.focusedItem !== undefined ? dataItems.findIndex(function (i) {
-        return areSame(i, _this.$data.focusedItem, textField);
-      }) : focusedItemIndex ? focusedItemIndex(dataItems, inputValue, textField) : Math.max(0, dataItems.indexOf(getFocusedItem(dataItems, inputValue, textField)));
-    },
-    repositionPopup: function repositionPopup() {
-      this.base.repositionPopup();
-    },
-    onScroll: function onScroll(event) {
-      this.isScrolling = true;
-      var state = this.base.initState();
-      var list = this.base.list;
-      var groupField = this.$props.groupField;
-      var _a = this.$props.dataItems,
-        dataItems = _a === void 0 ? [] : _a;
-      if (!groupField || !dataItems.length) {
-        return;
-      }
-      var itemHeight = this.itemHeight || (list.children ? list.children[0].offsetHeight : 0);
-      var target = event.target;
-      var scrollTop = target.scrollTop;
-      if (groupField) {
-        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
-      }
-      var group = dataItems[0][groupField];
-      if (itemHeight === 0) {
-        itemHeight = 28;
-      }
-      for (var i = 1; i < dataItems.length; i++) {
-        if (itemHeight * i > scrollTop) {
-          break;
-        }
-        if (dataItems[i] && dataItems[i][groupField]) {
-          group = dataItems[i][groupField];
-        }
-      }
-      if (group !== this.group) {
-        state.data.group = group;
-        this.applyState(state);
-      }
-    }
-  },
-  render: function render(createElement) {
-    var _a;
-    var h = gh || createElement;
-    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;
-    var value = this.computedValue();
-    var clearButton = !loading && !!value;
-    var id = this.$props.id || this.inputId;
-    var popupSettings = Object.assign({}, {
-      animate: true,
-      height: '200px'
-    }, this.$props.popupSettings);
-    if (typeof suggest === 'string') {
-      this.suggested = suggest;
-    }
-    var renderSearchBar = function renderSearchBar(searchValue, searchId) {
-      var _this = this;
-      var _a = this.$props,
-        placeholder = _a.placeholder,
-        tabIndex = _a.tabIndex,
-        readonly = _a.readonly;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
-      return (
-        // @ts-ignore  function children
-        h(SearchBar, {
-          id: searchId,
-          attrs: this.v3 ? undefined : {
-            id: searchId,
-            placeholder: placeholder,
-            tabIndex: tabIndex,
-            accessKey: this.$props.accessKey,
-            value: searchValue,
-            suggestedText: this.suggested,
-            focused: focused,
-            name: this.$props.name,
-            disabled: disabled,
-            readOnly: readonly,
-            expanded: opened,
-            owns: base.listBoxId,
-            activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(),
-            ariaLabelledBy: this.$props.ariaLabelledBy,
-            ariaDescribedBy: this.$props.ariaDescribedBy,
-            ariaLabel: this.$props.ariaLabel
-          },
-          placeholder: placeholder,
-          tabIndex: tabIndex,
-          accessKey: this.$props.accessKey,
-          value: searchValue,
-          suggestedText: this.suggested,
-          focused: focused,
-          name: this.$props.name,
-          ref: this.v3 ? function (el) {
-            _this.inputRef = el;
-          } : 'input',
-          onKeydown: this.onInputKeyDown,
-          on: this.v3 ? undefined : {
-            "keydown": this.onInputKeyDown,
-            "change": this.onChangeHandler,
-            "focus": base.handleFocus,
-            "blur": this.handleBlur,
-            "clearbuttonclick": this.clearButtonClick
-          },
-          onChange: this.onChangeHandler,
-          onFocus: base.handleFocus,
-          onBlur: this.handleBlur,
-          disabled: disabled,
-          readOnly: readonly,
-          expanded: opened,
-          owns: base.listBoxId,
-          activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(),
-          onClearbuttonclick: this.clearButtonClick,
-          ariaLabelledBy: this.$props.ariaLabelledBy,
-          ariaDescribedBy: this.$props.ariaDescribedBy,
-          ariaLabel: this.$props.ariaLabel
-        })
-      );
-    };
-    var renderList = function renderList() {
-      var _a = this.$props,
-        textField = _a.textField,
-        groupField = _a.groupField;
-      var dataItems = this.$props.dataItems || [];
-      var itemRender = templateRendering.call(this, this.$props.itemRender, getListeners.call(this));
-      var groupHeaderItemRender = templateRendering.call(this, this.$props.groupHeaderItemRender, getListeners.call(this));
-      var listNoDataRender = templateRendering.call(this, this.$props.listNoDataRender, getListeners.call(this));
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
-      if (groupField) {
-        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
-      }
-      return (
-        // @ts-ignore
-        h(List, {
-          id: base.listBoxId,
-          attrs: this.v3 ? undefined : {
-            id: base.listBoxId,
-            show: opened,
-            dataItems: dataItems.slice(),
-            focusedIndex: this.focusedIndex(),
-            value: value,
-            textField: textField,
-            valueField: textField,
-            highlightSelected: false,
-            optionsGuid: base.guid,
-            wrapperStyle: {
-              maxHeight: popupSettings.height
-            },
-            wrapperCssClass: "k-list-content",
-            itemRender: itemRender,
-            groupHeaderItemRender: groupHeaderItemRender,
-            noDataRender: listNoDataRender,
-            groupField: groupField
-          },
-          show: opened,
-          dataItems: dataItems.slice(),
-          focusedIndex: this.focusedIndex(),
-          value: value,
-          textField: textField,
-          valueField: textField,
-          highlightSelected: false,
-          optionsGuid: base.guid,
-          ref: 'list',
-          wrapperStyle: {
-            maxHeight: popupSettings.height
-          },
-          wrapperCssClass: "k-list-content",
-          onListclick: this.handleItemClick,
-          on: this.v3 ? undefined : {
-            "listclick": this.handleItemClick,
-            "scroll": this.onScroll
-          },
-          itemRender: itemRender,
-          groupHeaderItemRender: groupHeaderItemRender,
-          noDataRender: listNoDataRender,
-          groupField: groupField,
-          onScroll: this.onScroll
-        })
-      );
-    };
-    var renderListContainer = function renderListContainer() {
-      var _this2 = this;
-      var _a;
-      var headerTemplate = templateRendering.call(this, this.$props.header, getListeners.call(this));
-      var footerTemplate = templateRendering.call(this, this.$props.footer, getListeners.call(this));
-      var groupStickyHeaderTemplate = templateRendering.call(this, this.$props.groupStickyHeaderItemRender, getListeners.call(this));
-      var header = getTemplate.call(this, {
-        h: h,
-        template: headerTemplate
-      });
-      var footer = getTemplate.call(this, {
-        h: h,
-        template: footerTemplate
-      });
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
-      var dataItems = this.$props.dataItems || [];
-      if (this.group === undefined && this.$props.groupField !== undefined) {
-        this.group = getItemValue(dataItems[0], this.$props.groupField);
-      }
-      return (
-        // @ts-ignore  function children
-        h(ListContainer, {
-          onMousedown: function onMousedown(e) {
-            return e.preventDefault();
-          },
-          on: this.v3 ? undefined : {
-            "mousedown": function onMousedown(e) {
-              return e.preventDefault();
-            }
-          },
-          width: this.popupWidth,
-          attrs: this.v3 ? undefined : {
-            width: this.popupWidth,
-            popupSettings: __assign(__assign({}, popupSettings), {
-              anchor: this.anchor,
-              show: opened,
-              popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a)),
-              className: classNames('k-list-container', popupSettings.className)
-            }),
-            dir: dir !== undefined ? dir : this.base.dirCalculated
-          },
-          ref: 'container',
-          popupSettings: __assign(__assign({}, popupSettings), {
-            anchor: this.anchor,
-            show: opened,
-            popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a)),
-            className: classNames('k-list-container', popupSettings.className)
-          }),
-          dir: dir !== undefined ? dir : this.base.dirCalculated
-        }, this.v3 ? function () {
-          return [header && h("div", {
-            "class": "k-list-header"
-          }, [header]), _this2.group && dataItems.length !== 0 && h(GroupStickyHeader, {
-            group: _this2.group,
-            attrs: _this2.v3 ? undefined : {
-              group: _this2.group,
-              render: groupStickyHeaderTemplate
-            },
-            render: groupStickyHeaderTemplate
-          }), renderList.call(_this2), footer && h("div", {
-            "class": "k-list-footer"
-          }, [footer])];
-        } : [header && h("div", {
-          "class": "k-list-header"
-        }, [header]), _this2.group && dataItems.length !== 0 && h(GroupStickyHeader, {
-          group: _this2.group,
-          attrs: _this2.v3 ? undefined : {
-            group: _this2.group,
-            render: groupStickyHeaderTemplate
-          },
-          render: groupStickyHeaderTemplate
-        }), renderList.call(_this2), footer && h("div", {
-          "class": "k-list-footer"
-        }, [footer])])
-      );
-    };
-    var autoComplete = h("span", {
-      "class": classNames('k-autocomplete k-input', (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-invalid'] = !isValid, _a['k-focus'] = focused && !disabled, _a['k-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a)),
-      ref: setRef(this, 'kendoAnchor', this.anchor),
-      style: !label ? style : __assign(__assign({}, style), {
-        width: undefined
-      }),
-      dir: dir,
-      attrs: this.v3 ? undefined : {
-        dir: dir
-      }
-    }, [renderSearchBar.call(this, value || '', id), clearButton && !loading &&
-    // @ts-ignore  function children
-    h(ClearButton, {
-      onClearclick: this.clearButtonClick,
-      on: this.v3 ? undefined : {
-        "clearclick": this.clearButtonClick
-      }
-    }), h("span", {
-      "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
-    }), renderListContainer.call(this)]);
-    return label ? h("span", {
-      "class": this.spanClassNames,
-      dir: this.$props.dir,
-      attrs: this.v3 ? undefined : {
-        dir: this.$props.dir
-      }
-    }, [autoComplete, this.$props.label ? id ? h("label", {
-      "for": id,
-      attrs: this.v3 ? undefined : {
-        "for": id
-      },
-      "class": "k-floating-label"
-    }, [this.$props.label]) : h("span", {
-      "class": "k-label"
-    }, [this.$props.label]) : null]) : autoComplete;
-  }
-};
-/**
- * @hidden
- */
-var AutoComplete = AutoCompleteVue2;
-export { AutoComplete, AutoCompleteVue2 };