@progress/kendo-vue-dropdowns 3.5.0 → 3.5.1-dev.202208100944

package/dist/esm/ComboBox/ComboBox.js

@@ -0,0 +1,1063 @@
+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;
+var inject = allVue.inject;
+import DropDownBase from '../common/DropDownBase.js';
+import { guid, classNames, Keys, templateRendering, getListeners, getTemplate, kendoThemeMaps, getRef, setRef } from '@progress/kendo-vue-common';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+var sizeMap = kendoThemeMaps.sizeMap,
+    roundedMap = kendoThemeMaps.roundedMap;
+import { areSame, itemIndexStartsWith, getItemIndexByText, getItemValue, isPresent, suggestValue as _suggestValue } from '../common/utils.js';
+import { SearchBar } from '../common/SearchBar.js';
+import { ListContainer } from '../common/ListContainer.js';
+import { List } from '../common/List.js';
+import { ClearButton } from '../common/ClearButton.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { expandButton, messages } from '../messages.js';
+var VALIDATION_MESSAGE = 'Please enter a valid value!';
+/**
+ * @hidden
+ */
+
+var ComboBoxVue2 = {
+  name: 'KendoComboBox',
+  model: {
+    event: 'changemodel'
+  },
+  // @ts-ignore
+  emits: {
+    'changemodel': null,
+    'update:modelValue': null,
+    'filterchange': null,
+    change: null,
+    focus: null,
+    blur: null,
+    open: null,
+    close: null,
+    scroll: null
+  },
+  props: {
+    id: String,
+    dataItemKey: {
+      type: [Object, String]
+    },
+    defaultValue: {
+      type: [String, Object, Number, Boolean],
+      default: undefined
+    },
+    name: String,
+    modelValue: {
+      type: [String, Object, Number, Boolean],
+      default: undefined
+    },
+    value: {
+      type: [String, Object, Number, Boolean],
+      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
+    },
+    iconClassName: String,
+    opened: {
+      type: Boolean,
+      default: undefined
+    },
+    disabled: Boolean,
+    dir: {
+      type: String,
+      default: undefined
+    },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    accessKey: String,
+    dataItems: Array,
+    textField: String,
+    className: String,
+    loading: Boolean,
+    popupSettings: {
+      type: Object,
+      default: function _default() {
+        return {
+          animate: true,
+          height: '200px'
+        };
+      }
+    },
+    itemRender: [String, Function, Object],
+    listNoDataRender: [String, Function, Object],
+    focusedItemIndex: Function,
+    header: [String, Function, Object],
+    footer: [String, Function, Object],
+    filterable: Boolean,
+    filter: {
+      type: String,
+      default: undefined
+    },
+    virtual: {
+      type: Object,
+      default: undefined
+    },
+    suggest: {
+      type: Boolean,
+      default: false
+    },
+    allowCustom: {
+      type: Boolean,
+      default: false
+    },
+    clearButton: {
+      type: Boolean,
+      default: true
+    },
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    valueField: String,
+    valuePrimitive: Boolean,
+    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);
+      }
+    }
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      hasMounted: false,
+      currentText: '',
+      currentValue: '',
+      currentFocused: false,
+      currentOpened: false,
+      searchState: {
+        word: '',
+        last: ''
+      },
+      _skipFocusEvent: false,
+      valueDuringOnChange: {},
+      _navigated: false,
+      suggested: ''
+    };
+  },
+  created: function created() {
+    this.valueDuringOnChange = undefined;
+    this.currentText = undefined;
+    this.currentValue = undefined;
+    this.currentFocused = undefined;
+    this.currentOpened = undefined;
+    this.prevCurrentValue = this.computedValue();
+    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 elementRef = ref(null);
+    var kendoAnchorRef = ref(null);
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      inputRef: inputRef,
+      elementRef: elementRef,
+      kendoAnchorRef: kendoAnchorRef,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  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();
+  },
+  updated: function updated() {
+    var _a = this.$props,
+        _b = _a.dataItems,
+        dataItems = _b === void 0 ? [] : _b,
+        dataItemKey = _a.dataItemKey,
+        virtual = _a.virtual;
+    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 closing = prevOpened && !opened;
+    var list = this.$refs.list;
+    var scrollElement = this.$refs.scrollElement;
+    var selectedItem = this.computedValue();
+    this.valueOnDidUpdate = selectedItem;
+
+    if (list) {
+      // @ts-ignore
+      this.base.vs.list = list.list; // @ts-ignore
+
+      this.base.list = list.list;
+    }
+
+    if (scrollElement) {
+      this.base.vs.scrollElement = scrollElement;
+    }
+
+    if (list && dataItems.length) {
+      // @ts-ignore
+      this.base.vs.scrollerRef(list.$el);
+    } // @ts-ignore
+
+
+    if (virtual && this.virtualTotalHasChanged) {
+      this.base.vs.calcScrollElementHeight();
+      this.base.vs.reset();
+      this.virtualTotalHasChanged = false;
+    } else {
+      var prevSelectedItem = this.prevCurrentValue;
+      var selectedItemIndex = dataItems.findIndex(function (i) {
+        return areSame(i, selectedItem, dataItemKey);
+      });
+      var selectedItemChanged = !areSame(prevSelectedItem, selectedItem, dataItemKey);
+
+      if (opening && virtual) {
+        this.base.scrollToVirtualItem(virtual, selectedItemIndex);
+        this.prevCurrentOpened = true;
+      } else if (opening && !virtual) {
+        this.base.scrollToItem(selectedItemIndex);
+        this.prevCurrentOpened = true;
+      } else if (opened && prevOpened && selectedItem && selectedItemChanged) {
+        this.base.scrollToItem(selectedItemIndex);
+      }
+    }
+
+    if (opening && this.input) {
+      this.input.focus();
+    }
+
+    this.prevCurrentValue = this.computedValue();
+    this.setValidity();
+  },
+  watch: {
+    currentOpened: function currentOpened(_, oldValue) {
+      this.prevCurrentOpened = oldValue;
+    },
+    opened: function opened(_, oldValue) {
+      this.prevOpened = oldValue;
+    },
+    virtual: function virtual(newValue, oldValue) {
+      if (newValue && oldValue && newValue.total !== oldValue.total) {
+        this.virtualTotalHasChanged = true;
+      }
+
+      this.virtualHasChanged = true;
+    }
+  },
+  computed: {
+    index: {
+      get: function get() {
+        var _a = this.$props,
+            _b = _a.dataItems,
+            dataItems = _b === void 0 ? [] : _b,
+            dataItemKey = _a.dataItemKey;
+        var value = this.computedValue(); // TO DO: deprecate it!
+
+        return dataItems.findIndex(function (i) {
+          return areSame(i, value, dataItemKey);
+        });
+      }
+    },
+    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 this.valuePrimitive ? this.findByFieldValue(this.valueField, value) || value : value;
+    },
+    findByFieldValue: function findByFieldValue(field, value) {
+      var index = this.dataItems.findIndex(function (i) {
+        return getItemValue(i, field) === value;
+      });
+      return this.dataItems[index];
+    },
+    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,
+          _b = _a.dataItems,
+          dataItems = _b === void 0 ? [] : _b,
+          virtual = _a.virtual,
+          dataItemKey = _a.dataItemKey;
+      var skip = virtual ? virtual.skip : 0;
+      var item = dataItems[index - skip];
+      var newSelected = !areSame(item, this.computedValue(), dataItemKey);
+      this.triggerOnChange(item, state);
+
+      if (this.currentText !== undefined) {
+        // @ts-ignore
+        state.data.currentText = undefined;
+      }
+
+      if (newSelected) {
+        this.base.triggerPageChangeCornerItems(item, state);
+      }
+    },
+    onNavigate: function onNavigate(state, keyCode) {
+      var _a = this.$props,
+          _b = _a.dataItems,
+          dataItems = _b === void 0 ? [] : _b,
+          _c = _a.virtual,
+          virtual = _c === void 0 ? {
+        skip: 0
+      } : _c;
+      var text = this.$props.filter ? this.$props.filter : this.currentText;
+      var focusedIndex = this.getFocusedIndex();
+      var vs = this.base.vs;
+      var value = this.computedValue();
+      this.suggested = '';
+
+      if (focusedIndex !== -1 && !isPresent(value)) {
+        this.handleItemSelect(focusedIndex, state);
+      } else if (text === '') {
+        this.handleItemSelect(0, state);
+      } else {
+        var currentIndex = virtual.skip + focusedIndex;
+        var newIndex = this.base.navigation.navigate({
+          keyCode: keyCode,
+          current: currentIndex,
+          max: (vs.enabled ? vs.total : dataItems.length) - 1,
+          min: 0
+        });
+
+        if (newIndex !== undefined) {
+          this.handleItemSelect(newIndex, state);
+        }
+      }
+    },
+    toggleBtnClick: function toggleBtnClick(event) {
+      var state = this.base.initState();
+      state.event = event;
+      this.base.togglePopup(state);
+      this.applyState(state);
+    },
+    applyValueOnEnter: function applyValueOnEnter(value, state) {
+      var _a;
+
+      var _b = this.$props,
+          _c = _b.dataItems,
+          dataItems = _c === void 0 ? [] : _c,
+          textField = _b.textField,
+          allowCustom = _b.allowCustom;
+      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var currentValueText = getItemValue(this.computedValue(), textField);
+      var valueIndex = currentValueText === value ? this.index : getItemIndexByText(dataItems, value, textField);
+      var itemSelected = valueIndex !== -1;
+      var newSelected = undefined;
+      this.suggested = '';
+
+      if (itemSelected) {
+        // typed text match item from list
+        newSelected = dataItems[valueIndex];
+      } else {
+        if (allowCustom) {
+          // any custom text not in list
+          newSelected = textField !== undefined ? (_a = {}, _a[textField] = value, _a) : value;
+        } else {
+          return this.selectFocusedItem(value, state);
+        }
+      }
+
+      this.triggerOnChange(newSelected, state);
+
+      if (opened) {
+        this.base.togglePopup(state);
+      }
+
+      if (this.$props.filter === undefined && this.currentText !== undefined) {
+        // @ts-ignore
+        state.data.currentText = undefined;
+      }
+
+      this.applyState(state);
+    },
+    applyValueOnRejectSuggestions: function applyValueOnRejectSuggestions(text, state) {
+      var _a;
+
+      var _b = this.$props,
+          _c = _b.dataItems,
+          dataItems = _c === void 0 ? [] : _c,
+          textField = _b.textField,
+          allowCustom = _b.allowCustom;
+      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var valueItemText = getItemValue(this.computedValue(), textField);
+      this.suggested = '';
+
+      if (text === valueItemText || text === '' && !isPresent(valueItemText)) {
+        if (opened) {
+          this.base.togglePopup(state);
+        }
+
+        return this.applyState(state);
+      }
+
+      var valueIndex = getItemIndexByText(dataItems, text, textField, true);
+      var itemSelected = valueIndex !== -1;
+      var newSelected = null;
+
+      if (itemSelected) {
+        newSelected = dataItems[valueIndex];
+      } else if (allowCustom) {
+        newSelected = text ? textField ? (_a = {}, _a[textField] = text, _a) : text : null;
+      }
+
+      this.triggerOnChange(newSelected, state);
+
+      if (this.currentText !== undefined) {
+        // @ts-ignore
+        state.data.currentText = undefined;
+        this.base.filterChanged('', state);
+      }
+
+      if (opened) {
+        this.base.togglePopup(state);
+      }
+
+      this.applyState(state);
+    },
+    selectFocusedItem: function selectFocusedItem(text, state) {
+      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,
+          _c = _a.virtual,
+          virtual = _c === void 0 ? {
+        skip: 0
+      } : _c,
+          _d = _a.focusedItemIndex,
+          focusedItemIndex = _d === void 0 ? itemIndexStartsWith : _d;
+      var skip = virtual.skip;
+      var focusedIndex = text === '' && skip === 0 ? 0 : focusedItemIndex(dataItems, text, textField);
+
+      if (focusedIndex !== -1) {
+        this.handleItemSelect(focusedIndex + skip, state);
+      } else {
+        this.triggerOnChange(null, state);
+
+        if (this.currentText !== undefined) {
+          // @ts-ignore
+          state.data.currentText = undefined;
+        }
+      }
+
+      if (opened) {
+        this.base.togglePopup(state);
+      }
+
+      return this.applyState(state);
+    },
+    handleItemClick: function handleItemClick(index, event) {
+      this.base.handleItemClick(index, event);
+      this.valueDuringOnChange = undefined;
+    },
+    handleFocus: function handleFocus(event) {
+      this.$emit('focus', event);
+    },
+    handleBlur: function handleBlur(event) {
+      if (this.currentFocused) {
+        var state = this.base.initState();
+        state.data.currentFocused = false;
+        state.events.push({
+          type: 'blur'
+        });
+        state.event = event;
+        this.applyValueOnRejectSuggestions(event.currentTarget.value, state);
+      }
+    },
+    onInputKeyDown: function onInputKeyDown(event) {
+      var _this = this;
+
+      var keyCode = event.keyCode;
+      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var state = this.base.initState();
+      state.event = event;
+
+      if (!event.altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
+        event.preventDefault();
+        this.onNavigate(state, keyCode);
+        this.applyState(state);
+        return;
+      }
+
+      var togglePopup = function togglePopup() {
+        event.preventDefault();
+
+        _this.base.togglePopup(state);
+
+        _this.applyState(state);
+      };
+
+      if (opened) {
+        if (event.altKey && keyCode === Keys.up) {
+          togglePopup();
+        } else if (keyCode === Keys.enter) {
+          event.preventDefault();
+          this.applyValueOnEnter(event.currentTarget.value, state);
+        } else if (keyCode === Keys.esc) {
+          togglePopup();
+        }
+      } else {
+        if (event.altKey && keyCode === Keys.down) {
+          togglePopup();
+        } else if (keyCode === Keys.esc) {
+          this.applyValueOnRejectSuggestions(event.currentTarget.value, state);
+        }
+      }
+    },
+    inputOnChange: function inputOnChange(event) {
+      var state = this.base.initState();
+      state.event = event;
+      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var input = event.currentTarget;
+      var value = input.value;
+
+      if (this.$props.suggest) {
+        var selectionAtEnd = input.selectionEnd === value.length;
+        var prevText = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
+
+        if (!isPresent(prevText)) {
+          prevText = getItemValue(this.computedValue(), this.$props.textField) || '';
+        }
+
+        var deletedSuggestion = prevText && prevText === value;
+        var deleting = prevText && prevText.length > value.length;
+
+        if (deletedSuggestion || deleting || !selectionAtEnd) {
+          this.suggested = '';
+        } else {
+          this.suggestValue(value);
+        }
+      }
+
+      if (this.$props.filter === undefined) {
+        // @ts-ignore
+        state.data.currentText = value;
+      }
+
+      if (this.currentFocusedItem !== undefined) {
+        // @ts-ignore
+        state.data.focusedItem = undefined;
+      }
+
+      if (!opened) {
+        this.base.togglePopup(state);
+      }
+
+      this.base.filterChanged(value, state);
+      this.applyState(state);
+    },
+    clearButtonClick: function clearButtonClick(event) {
+      var state = this.base.initState();
+      state.event = event;
+      event.stopPropagation();
+      this.suggested = '';
+      this.base.filterChanged('', state);
+
+      if (this.$props.filter === undefined && this.currentText !== undefined) {
+        // @ts-ignore
+        state.data.currentText = undefined;
+      }
+
+      this.triggerOnChange(null, state);
+      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+
+      if (opened) {
+        this.base.togglePopup(state);
+      }
+
+      this.applyState(state);
+    },
+    getFocusedIndex: function getFocusedIndex() {
+      var value = this.computedValue();
+      var _a = this.$props,
+          _b = _a.dataItems,
+          dataItems = _b === void 0 ? [] : _b,
+          textField = _a.textField,
+          dataItemKey = _a.dataItemKey,
+          _c = _a.virtual,
+          virtual = _c === void 0 ? {
+        skip: 0
+      } : _c,
+          _d = _a.focusedItemIndex,
+          focusedItemIndex = _d === void 0 ? itemIndexStartsWith : _d;
+      var text = this.$props.filter ? this.$props.filter : this.currentText;
+
+      if (isPresent(value) && text === undefined) {
+        return dataItems.findIndex(function (i) {
+          return areSame(i, value, dataItemKey);
+        });
+      } else if (text) {
+        return focusedItemIndex(dataItems, text, textField);
+      } else {
+        return virtual.skip === 0 ? 0 : -1;
+      }
+    },
+    suggestValue: function suggestValue(value) {
+      var _a = this.$props,
+          dataItems = _a.dataItems,
+          textField = _a.textField;
+      this.suggested = _suggestValue(value, dataItems, textField);
+    },
+    setValidity: function setValidity() {
+      if (this.input && this.input.setCustomValidity) {
+        this.input.setCustomValidity(this.validity().valid ? '' : this.$props.validationMessage || VALIDATION_MESSAGE);
+      }
+    },
+    triggerOnChange: function triggerOnChange(item, state) {
+      var value = this.computedValue();
+
+      if (!isPresent(value) && !isPresent(item) || areSame(value, item, this.$props.dataItemKey)) {
+        return;
+      }
+
+      if (this.$props.value === undefined) {
+        this.currentValue = item;
+      }
+
+      this.valueDuringOnChange = item;
+      state.events.push({
+        type: 'change'
+      });
+    },
+    applyState: function applyState(state) {
+      this.base.applyState(state);
+      this.valueDuringOnChange = undefined;
+    }
+  },
+  render: function render(createElement) {
+    var _a;
+
+    var h = gh || createElement;
+    var _b = this.$props,
+        dir = _b.dir,
+        disabled = _b.disabled,
+        clearButton = _b.clearButton,
+        label = _b.label,
+        textField = _b.textField,
+        className = _b.className,
+        style = _b.style,
+        loading = _b.loading,
+        iconClassName = _b.iconClassName,
+        virtual = _b.virtual,
+        size = _b.size,
+        fillMode = _b.fillMode,
+        rounded = _b.rounded;
+    var focused = this.currentFocused;
+    var isValid = !this.$props.validityStyles || this.validity().valid;
+    var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
+    var selectedItemText = getItemValue(this.computedValue(), textField);
+    var inputText = isPresent(text) ? text : selectedItemText;
+    var renderClearButton = clearButton && (!!inputText || isPresent(this.computedValue()));
+    var base = this.base;
+    var vs = base.vs;
+    var id = this.$props.id || this.inputId;
+    var popupSettings = Object.assign({}, {
+      animate: true,
+      height: '200px'
+    }, this.$props.popupSettings);
+    var ariaLabelExpandButton = provideLocalizationService(this).toLanguageString(expandButton, messages[expandButton]);
+    vs.enabled = virtual !== undefined;
+
+    if (virtual !== undefined) {
+      vs.skip = virtual.skip;
+      vs.total = virtual.total;
+      vs.pageSize = virtual.pageSize;
+    }
+
+    var renderList = function renderList() {
+      var _this2 = this;
+
+      var _a = this.$props,
+          dataItemKey = _a.dataItemKey,
+          _b = _a.dataItems,
+          dataItems = _b === void 0 ? [] : _b;
+      var itemRender = templateRendering.call(this, this.$props.itemRender, getListeners.call(this));
+      var listNoDataRender = templateRendering.call(this, this.$props.listNoDataRender, getListeners.call(this));
+
+      if (!virtual) {
+        virtual = {
+          skip: 0
+        };
+      }
+
+      var skip = virtual.skip;
+      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var translate = "translateY(".concat(vs.translate, "px)");
+      var focusedIndex = opened ? this.getFocusedIndex() : undefined;
+      var value = isPresent(text) && text !== selectedItemText ? null : this.computedValue();
+      return (// @ts-ignore  function children
+        h(List, {
+          id: base.listBoxId,
+          attrs: this.v3 ? undefined : {
+            id: base.listBoxId,
+            show: opened,
+            dataItems: dataItems,
+            focusedIndex: focusedIndex,
+            value: value,
+            textField: textField,
+            valueField: dataItemKey,
+            optionsGuid: base.guid,
+            wrapperStyle: {
+              maxHeight: popupSettings.height
+            },
+            wrapperCssClass: 'k-list-content',
+            listStyle: vs.enabled ? {
+              transform: translate
+            } : undefined,
+            skip: skip,
+            itemRender: itemRender,
+            noDataRender: listNoDataRender
+          },
+          show: opened,
+          dataItems: dataItems,
+          focusedIndex: focusedIndex,
+          value: value,
+          textField: textField,
+          valueField: dataItemKey,
+          optionsGuid: base.guid,
+          ref: 'list',
+          wrapperStyle: {
+            maxHeight: popupSettings.height
+          },
+          wrapperCssClass: 'k-list-content',
+          listStyle: vs.enabled ? {
+            transform: translate
+          } : undefined,
+          key: "listkey",
+          skip: skip,
+          onListclick: this.handleItemClick,
+          on: this.v3 ? undefined : {
+            "listclick": this.handleItemClick,
+            "scroll": vs.scrollHandler
+          },
+          itemRender: itemRender,
+          noDataRender: listNoDataRender,
+          onScroll: vs.scrollHandler
+        }, this.v3 ? function () {
+          return [renderScrollElement.call(_this2)];
+        } : [renderScrollElement.call(_this2)])
+      );
+    };
+
+    var renderScrollElement = function renderScrollElement() {
+      return vs.enabled && h("div", {
+        ref: 'scrollElement',
+        key: 'scrollElementKey'
+      });
+    };
+
+    var renderListContainer = function renderListContainer() {
+      var _this3 = 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 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 popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
+      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: popupWidth,
+          attrs: this.v3 ? undefined : {
+            width: popupWidth,
+            popupSettings: {
+              animate: popupSettings.animate,
+              anchor: this.anchor,
+              show: opened,
+              popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
+              className: popupSettings.className,
+              appendTo: popupSettings.appendTo
+            },
+            dir: dir !== undefined ? dir : this.base.dirCalculated
+          },
+          popupSettings: {
+            animate: popupSettings.animate,
+            anchor: this.anchor,
+            show: opened,
+            popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
+            className: popupSettings.className,
+            appendTo: popupSettings.appendTo
+          },
+          dir: dir !== undefined ? dir : this.base.dirCalculated
+        }, this.v3 ? function () {
+          return [header && h("div", {
+            "class": "k-list-header"
+          }, [header]), renderList.call(_this3), footer && h("div", {
+            "class": "k-list-footer"
+          }, [footer])];
+        } : [header && h("div", {
+          "class": "k-list-header"
+        }, [header]), renderList.call(_this3), footer && h("div", {
+          "class": "k-list-footer"
+        }, [footer])])
+      );
+    };
+
+    var renderSearchBar = function renderSearchBar(searchText, searchId) {
+      var _this = this;
+
+      var _a = this.$props,
+          placeholder = _a.placeholder,
+          tabIndex = _a.tabIndex,
+          _b = _a.dataItems,
+          dataItems = _b === void 0 ? [] : _b,
+          dataItemKey = _a.dataItemKey;
+
+      if (!virtual) {
+        virtual = {
+          skip: 0
+        };
+      }
+
+      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var value = this.computedValue();
+      var selectedIndex = Math.max(0, dataItems.findIndex(function (i) {
+        return areSame(i, value, dataItemKey);
+      }));
+
+      if (this.suggested && !areSame(this.valueOnDidUpdate, value, dataItemKey)) {
+        this.suggested = '';
+      }
+
+      return (// @ts-ignore  function children
+        h(SearchBar, {
+          id: searchId,
+          attrs: this.v3 ? undefined : {
+            id: searchId,
+            placeholder: placeholder,
+            tabIndex: tabIndex || undefined,
+            accessKey: this.$props.accessKey,
+            value: searchText + this.suggested,
+            suggestedText: this.suggested,
+            disabled: disabled,
+            expanded: opened,
+            owns: this.base.listBoxId,
+            activedescendant: this.base.guid + '-' + (selectedIndex + virtual.skip),
+            ariaLabelledBy: this.$props.ariaLabelledBy,
+            ariaDescribedBy: this.$props.ariaDescribedBy
+          },
+          placeholder: placeholder,
+          tabIndex: tabIndex || undefined,
+          accessKey: this.$props.accessKey,
+          value: searchText + this.suggested,
+          suggestedText: this.suggested,
+          ref: this.v3 ? function (el) {
+            _this.inputRef = el;
+          } : 'input',
+          onKeydown: this.onInputKeyDown,
+          on: this.v3 ? undefined : {
+            "keydown": this.onInputKeyDown,
+            "change": this.inputOnChange,
+            "focus": this.base.handleFocus,
+            "blur": this.handleBlur
+          },
+          onChange: this.inputOnChange,
+          onFocus: this.base.handleFocus,
+          onBlur: this.handleBlur,
+          disabled: disabled,
+          expanded: opened,
+          owns: this.base.listBoxId,
+          activedescendant: this.base.guid + '-' + (selectedIndex + virtual.skip),
+          ariaLabelledBy: this.$props.ariaLabelledBy,
+          ariaDescribedBy: this.$props.ariaDescribedBy
+        })
+      );
+    };
+
+    var combobox = h("span", {
+      "class": classNames('k-combobox 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-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a['k-focus'] = focused && !disabled, _a), className),
+      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, inputText || '', id), renderClearButton && !loading && // @ts-ignore  function children
+    h(ClearButton, {
+      onClearclick: this.clearButtonClick,
+      on: this.v3 ? undefined : {
+        "clearclick": this.clearButtonClick
+      },
+      key: "clearbutton"
+    }), loading && h("span", {
+      "class": "k-icon k-input-loading-icon k-i-loading",
+      key: "loading"
+    }), // @ts-ignore
+    h(KButton, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": ariaLabelExpandButton,
+        size: size,
+        fillMode: fillMode,
+        rounded: null,
+        iconClass: classNames('k-icon k-i-arrow-s', iconClassName)
+      },
+      tabIndex: -1,
+      "aria-label": ariaLabelExpandButton,
+      size: size,
+      fillMode: fillMode,
+      rounded: null,
+      "class": 'k-input-button',
+      iconClass: classNames('k-icon k-i-arrow-s', iconClassName),
+      onClick: this.toggleBtnClick,
+      on: this.v3 ? undefined : {
+        "click": this.toggleBtnClick,
+        "mousedown": function mousedown(e) {
+          return e.preventDefault();
+        }
+      },
+      onMousedown: function mousedown(e) {
+        return e.preventDefault();
+      }
+    }), renderListContainer.call(this)]);
+    return label ? h("span", {
+      "class": this.spanClassNames,
+      onFocusin: this.handleFocus,
+      on: this.v3 ? undefined : {
+        "focusin": this.handleFocus
+      },
+      dir: this.$props.dir,
+      attrs: this.v3 ? undefined : {
+        dir: this.$props.dir
+      }
+    }, [combobox, this.$props.label ? id ? h("label", {
+      "for": id,
+      attrs: this.v3 ? undefined : {
+        "for": id
+      },
+      "class": "k-label"
+    }, [this.$props.label]) : h("span", {
+      "class": "k-label"
+    }, [this.$props.label]) : null]) : combobox;
+  }
+};
+/**
+ * @hidden
+ */
+
+var ComboBox = ComboBoxVue2;
+export { ComboBox, ComboBoxVue2 };