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

package/dist/es/ComboBox/ComboBox.js

@@ -1,1315 +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;
-var inject = allVue.inject;
-import DropDownBase from '../common/DropDownBase';
-import { GroupStickyHeader } from '../common/GroupStickyHeader';
-import { guid, classNames, Keys, templateRendering, getListeners, kendoThemeMaps, getRef, setRef, Icon, canUseDOM } 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';
-import { SearchBar } from '../common/SearchBar';
-import { ListContainer } from '../common/ListContainer';
-import { List } from '../common/List';
-import { ClearButton } from '../common/ClearButton';
-import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { expandButton, messages } from '../messages/main';
-import { caretAltDownIcon, xIcon } from '@progress/kendo-svg-icons';
-import { MOBILE_SMALL_DEVICE, MOBILE_MEDIUM_DEVICE } from '../common/constants';
-import { ActionSheet } from '@progress/kendo-vue-layout';
-import { ListFilter } from '../common/ListFilter';
-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,
-    pagechange: 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',
-          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],
-    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
-    },
-    ariaLabel: {
-      type: String,
-      default: undefined
-    },
-    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);
-      }
-    },
-    groupField: {
-      type: String
-    },
-    adaptive: {
-      type: Boolean,
-      default: undefined
-    },
-    adaptiveTitle: {
-      type: String,
-      default: undefined
-    }
-  },
-  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: '',
-      group: undefined,
-      isScrolling: false,
-      itemHeight: 0,
-      state: undefined,
-      popupWidth: undefined,
-      windowWidth: 0
-    };
-  },
-  created: function created() {
-    this.observer = null;
-    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.observer = canUseDOM && new ResizeObserver(this.calculateMedia);
-    if ((document === null || document === void 0 ? void 0 : document.body) && this.observer) {
-      this.observer.observe(document.body);
-    }
-    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();
-  },
-  destroyed: !!isV3 ? undefined : function () {
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  },
-  updated: function updated() {
-    var _a;
-    var _b = this.$props,
-      _c = _b.dataItems,
-      dataItems = _c === void 0 ? [] : _c,
-      dataItemKey = _b.dataItemKey,
-      virtual = _b.virtual,
-      groupField = _b.groupField,
-      textField = _b.textField;
-    var opened = this.isOpen;
-    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);
-      });
-      // Needed to calculate the proper item index when in grouping mode
-      if (groupField) {
-        selectedItemIndex = (_a = this.base.getGroupedDataModernMode(dataItems, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(selectedItem);
-      }
-      var selectedItemChanged = !areSame(prevSelectedItem, selectedItem, dataItemKey);
-      if (opening && virtual) {
-        this.base.scrollToVirtualItem(virtual, selectedItemIndex);
-        this.prevCurrentOpened = true;
-      } else if (opening && !virtual) {
-        // 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(selectedItemIndex);
-        this.prevCurrentOpened = true;
-      } else if (opened && prevOpened && selectedItem && selectedItemChanged) {
-        this.base.scrollToItem(selectedItemIndex);
-      } else if (opened && !selectedItem && !this.isScrolling) {
-        var groupHeadersBeforeFocus = 0;
-        // Handle the items' focusing when working with grouped data
-        if (groupField && this.getFocusedIndex() !== -1 && dataItems.length > 0) {
-          var focusedElemBeforeGrouping_1 = dataItems[this.getFocusedIndex()][textField];
-          var gropedDataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
-          var groupedDataIdex = gropedDataItems.findIndex(function (el) {
-            return el[textField] === focusedElemBeforeGrouping_1;
-          });
-          groupHeadersBeforeFocus = gropedDataItems.slice(0, groupedDataIdex).filter(function (el) {
-            return Object.keys(el).length === 1;
-          }).length;
-        }
-        this.base.scrollToItem(this.getFocusedIndex() + groupHeadersBeforeFocus);
-      }
-    }
-    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;
-    },
-    isOpen: function isOpen() {
-      var _this = this;
-      setTimeout(function () {
-        var listItem = document.querySelector('.k-list-item');
-        _this.itemHeight = _this.base.getListItemHeight(listItem);
-      }, 100);
-    }
-  },
-  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'
-        };
-      }
-    },
-    isOpen: {
-      get: function get() {
-        return this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
-      }
-    },
-    animationStyles: {
-      get: function get() {
-        return this.windowWidth <= MOBILE_SMALL_DEVICE ? {
-          top: 0,
-          width: '100%',
-          height: '100%'
-        } : undefined;
-      }
-    },
-    classNameAdaptive: {
-      get: function get() {
-        return this.windowWidth <= MOBILE_SMALL_DEVICE ? 'k-adaptive-actionsheet k-actionsheet-fullscreen' : 'k-adaptive-actionsheet k-actionsheet-bottom';
-      }
-    },
-    adaptiveState: {
-      get: function get() {
-        return this.windowWidth <= MOBILE_MEDIUM_DEVICE && this.$props.adaptive;
-      }
-    }
-  },
-  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();
-      var opened = this.isOpen;
-      var renderAdaptive = this.adaptiveState;
-      state.event = event;
-      this.base.togglePopup(state);
-      if (!opened && renderAdaptive) {
-        this.base.filterChanged('', 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.isOpen;
-      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.isOpen;
-      var valueItemText = getItemValue(this.computedValue(), textField);
-      this.suggested = '';
-      if (text === valueItemText || text === '' && !isPresent(valueItemText)) {
-        if (opened && !this.adaptiveState) {
-          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.adaptiveState) {
-        this.base.togglePopup(state);
-      }
-      this.applyState(state);
-    },
-    selectFocusedItem: function selectFocusedItem(text, state) {
-      var opened = this.isOpen;
-      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;
-      if (this.isScrolling) {
-        this.isScrolling = false;
-      }
-      var keyCode = event.keyCode;
-      var opened = this.isOpen;
-      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) {
-          if (this.adaptiveState) {
-            this.toggleBtnClick(event); // Handle the closing on "Esc" key press in adaptive mode
-          }
-
-          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.isOpen;
-      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);
-      // Resets the value of the StickyHeader when filtering the data or just entering symbols in the input
-      if (this.$props.filterable) {
-        state.data.group = undefined;
-      }
-      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.isOpen;
-      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;
-    },
-    calculateMedia: function calculateMedia(entries) {
-      for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-        var entry = entries_1[_i];
-        this.windowWidth = entry.target.clientWidth;
-      }
-    },
-    repositionPopup: function repositionPopup() {
-      this.base.repositionPopup();
-    },
-    onScroll: function onScroll(event) {
-      this.isScrolling = true;
-      var _a = this.base,
-        vs = _a.vs,
-        list = _a.list;
-      vs.scrollHandler(event);
-      var state = this.base.initState();
-      var groupField = this.$props.groupField;
-      var _b = this.$props.dataItems,
-        dataItems = _b === void 0 ? [] : _b;
-      var group;
-      if (!groupField || !dataItems.length) {
-        return;
-      }
-      var itemHeight = this.itemHeight = this.itemHeight || (vs.enabled ? vs.itemHeight : list ? list.children[0].offsetHeight : 0);
-      var target = event.target;
-      var scrollTop = target.scrollTop - vs.skip * itemHeight;
-      if (groupField) {
-        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
-        group = dataItems[0][groupField];
-      }
-      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 _this = this;
-    var h = gh || createElement;
-    var _a = this.$props,
-      dir = _a.dir,
-      disabled = _a.disabled,
-      clearButton = _a.clearButton,
-      label = _a.label,
-      textField = _a.textField,
-      className = _a.className,
-      style = _a.style,
-      loading = _a.loading,
-      icon = _a.icon,
-      svgIcon = _a.svgIcon,
-      iconClassName = _a.iconClassName,
-      virtual = _a.virtual,
-      size = _a.size,
-      fillMode = _a.fillMode,
-      rounded = _a.rounded,
-      adaptiveTitle = _a.adaptiveTitle,
-      header = _a.header,
-      footer = _a.footer,
-      groupStickyHeaderItemRender = _a.groupStickyHeaderItemRender,
-      placeholder = _a.placeholder;
-    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]);
-    var opened = this.isOpen;
-    var renderAdaptive = this.adaptiveState;
-    vs.enabled = virtual !== undefined;
-    if (virtual !== undefined) {
-      vs.skip = virtual.skip;
-      vs.total = virtual.total;
-      vs.pageSize = virtual.pageSize;
-    }
-    if (this.group === undefined && this.$props.groupField !== undefined) {
-      this.group = getItemValue(this.$props.dataItems[0], this.$props.groupField);
-    }
-    var handleMobileFilterChange = function handleMobileFilterChange(event) {
-      var state = _this.base.initState();
-      state.event = event;
-      var eventTargetValue = event.event.target.value;
-      state.data.text = eventTargetValue;
-      _this.base.filterChanged(eventTargetValue, state);
-      _this.applyState(state);
-    };
-    var adaptiveActionSheetHeaderTemplateDef = function adaptiveActionSheetHeaderTemplateDef() {
-      return [h("div", {
-        "class": "k-actionsheet-titlebar-group k-hbox"
-      }, [h("div", {
-        "class": "k-actionsheet-title"
-      }, [h("div", {
-        "class": "k-text-center"
-      }, [adaptiveTitle]), placeholder && h("div", {
-        "class": "k-actionsheet-subtitle k-text-center"
-      }, [placeholder])]), h("div", {
-        "class": "k-actionsheet-actions"
-      }, [h(KButton, {
-        tabindex: 5,
-        attrs: this.v3 ? undefined : {
-          tabindex: 5,
-          "aria-label": "Cancel",
-          "aria-disabled": "false",
-          type: "button",
-          fillMode: "flat",
-          icon: "x",
-          svgIcon: xIcon
-        },
-        "aria-label": "Cancel",
-        "aria-disabled": "false",
-        type: "button",
-        fillMode: "flat",
-        onClick: _this.toggleBtnClick,
-        on: this.v3 ? undefined : {
-          "click": _this.toggleBtnClick
-        },
-        icon: "x",
-        svgIcon: xIcon
-      })])]), h("div", {
-        "class": "k-actionsheet-titlebar-group k-actionsheet-filter"
-      }, [renderMobileListFilter.call(_this)])];
-    };
-    var adaptiveActionSheetHeaderTemplate = templateRendering.call(this, adaptiveActionSheetHeaderTemplateDef, getListeners.call(this));
-    var adaptiveActionSheetContentTemplateDef = function adaptiveActionSheetContentTemplateDef() {
-      var _a;
-      var headerToRender = base.getTemplateDef.call(_this, header, h);
-      var footerToRender = base.getTemplateDef.call(_this, footer, h);
-      var groupStickyHeaderTemplate = templateRendering.call(_this, groupStickyHeaderItemRender, getListeners.call(_this));
-      var dataItems = _this.$props.dataItems || [];
-      return h("div", {
-        "class": "k-list-container"
-      }, [headerToRender && h("div", {
-        "class": "k-list-header"
-      }, [headerToRender]), h("div", {
-        "class": classNames('k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = !renderAdaptive ? size : false, _a['k-list-lg'] = renderAdaptive ? true : false, _a['k-virtual-list'] = vs.enabled, _a))
-      }, [header && h("div", {
-        "class": "k-list-header"
-      }, [header]), _this.group && dataItems.length !== 0 && h(GroupStickyHeader, {
-        group: _this.group,
-        attrs: this.v3 ? undefined : {
-          group: _this.group,
-          render: groupStickyHeaderTemplate
-        },
-        render: groupStickyHeaderTemplate
-      }), renderList.call(_this), footerToRender && h("div", {
-        className: "k-list-footer",
-        attrs: this.v3 ? undefined : {
-          className: "k-list-footer"
-        }
-      }, [footerToRender])])]);
-    };
-    var adaptiveActionSheetContentTemplate = templateRendering.call(this, adaptiveActionSheetContentTemplateDef, getListeners.call(this));
-    var renderAdaptiveListContainer = function renderAdaptiveListContainer() {
-      return h(ActionSheet, {
-        expand: opened,
-        attrs: this.v3 ? undefined : {
-          expand: opened,
-          animation: true,
-          animationStyles: this.animationStyles,
-          className: this.classNameAdaptive,
-          contentClassName: '!k-overflow-hidden',
-          header: adaptiveActionSheetHeaderTemplate,
-          content: adaptiveActionSheetContentTemplate,
-          navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
-        },
-        animation: true,
-        animationStyles: this.animationStyles,
-        className: this.classNameAdaptive,
-        contentClassName: '!k-overflow-hidden',
-        header: adaptiveActionSheetHeaderTemplate,
-        content: adaptiveActionSheetContentTemplate,
-        onClose: this.toggleBtnClick,
-        on: this.v3 ? undefined : {
-          "close": this.toggleBtnClick
-        },
-        navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
-      });
-    };
-    var renderMobileListFilter = function renderMobileListFilter() {
-      var state = this.base.initState();
-      var mobileText = state.data.text;
-      return h(ListFilter, {
-        adaptiveMode: true,
-        attrs: this.v3 ? undefined : {
-          adaptiveMode: true,
-          value: mobileText,
-          size: this.$props.size,
-          rounded: this.$props.rounded,
-          fillMode: this.$props.fillMode
-        },
-        value: mobileText,
-        ref: 'filterInput',
-        onChange: function onChange(ev) {
-          return handleMobileFilterChange(ev);
-        },
-        on: this.v3 ? undefined : {
-          "change": function onChange(ev) {
-            return handleMobileFilterChange(ev);
-          },
-          "keydown": this.onInputKeyDown
-        },
-        onKeydown: this.onInputKeyDown,
-        size: this.$props.size,
-        rounded: this.$props.rounded,
-        fillMode: this.$props.fillMode
-      });
-    };
-    var renderList = function renderList() {
-      var _this2 = this;
-      var _a;
-      var _b = this.$props,
-        dataItemKey = _b.dataItemKey,
-        groupField = _b.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));
-      if (!virtual) {
-        virtual = {
-          skip: 0
-        };
-      }
-      var skip = virtual.skip;
-      var translate = "translateY(".concat(vs.translate, "px)");
-      var focusedIndex = opened ? this.getFocusedIndex() : undefined;
-      var value = isPresent(text) && text !== selectedItemText ? null : this.computedValue();
-      if (groupField) {
-        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
-      }
-      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: !renderAdaptive ? popupSettings.height : undefined
-            },
-            wrapperCssClass: classNames('k-list-content', (_a = {}, _a['k-list-scroller'] = !this.$props.virtual, _a)),
-            listStyle: vs.enabled ? {
-              transform: translate
-            } : undefined,
-            skip: skip,
-            itemRender: itemRender,
-            groupHeaderItemRender: groupHeaderItemRender,
-            noDataRender: listNoDataRender,
-            groupField: groupField
-          },
-          show: opened,
-          dataItems: dataItems,
-          focusedIndex: focusedIndex,
-          value: value,
-          textField: textField,
-          valueField: dataItemKey,
-          optionsGuid: base.guid,
-          ref: 'list',
-          wrapperStyle: {
-            maxHeight: !renderAdaptive ? popupSettings.height : undefined
-          },
-          wrapperCssClass: classNames('k-list-content', (_a = {}, _a['k-list-scroller'] = !this.$props.virtual, _a)),
-          listStyle: vs.enabled ? {
-            transform: translate
-          } : undefined,
-          key: "listkey",
-          skip: skip,
-          onListclick: this.handleItemClick,
-          on: this.v3 ? undefined : {
-            "listclick": this.handleItemClick,
-            "scroll": this.onScroll
-          },
-          itemRender: itemRender,
-          groupHeaderItemRender: groupHeaderItemRender,
-          noDataRender: listNoDataRender,
-          groupField: groupField,
-          onScroll: this.onScroll
-        }, 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 groupStickyHeaderTemplate = templateRendering.call(this, this.$props.groupStickyHeaderItemRender, getListeners.call(this));
-      var headerListContainer = base.getTemplateDef.call(this, header);
-      var footerListContainer = base.getTemplateDef.call(this, footer);
-      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, {
-          ref: 'container',
-          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['k-virtual-list'] = this.base.vs.enabled, _a)),
-              className: classNames('k-list-container', popupSettings.className)
-            }),
-            dir: dir !== undefined ? dir : this.base.dirCalculated
-          },
-          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['k-virtual-list'] = this.base.vs.enabled, _a)),
-            className: classNames('k-list-container', popupSettings.className)
-          }),
-          dir: dir !== undefined ? dir : this.base.dirCalculated
-        }, this.v3 ? function () {
-          return [headerListContainer && h("div", {
-            "class": "k-list-header"
-          }, [headerListContainer]), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
-            group: _this3.group,
-            attrs: _this3.v3 ? undefined : {
-              group: _this3.group,
-              render: groupStickyHeaderTemplate
-            },
-            render: groupStickyHeaderTemplate
-          }), renderList.call(_this3), footerListContainer && h("div", {
-            "class": "k-list-footer"
-          }, [footerListContainer])];
-        } : [headerListContainer && h("div", {
-          "class": "k-list-header"
-        }, [headerListContainer]), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
-          group: _this3.group,
-          attrs: _this3.v3 ? undefined : {
-            group: _this3.group,
-            render: groupStickyHeaderTemplate
-          },
-          render: groupStickyHeaderTemplate
-        }), renderList.call(_this3), footerListContainer && h("div", {
-          "class": "k-list-footer"
-        }, [footerListContainer])])
-      );
-    };
-    var renderSearchBar = function renderSearchBar(searchText, searchId) {
-      var _this = this;
-      var _a = this.$props,
-        tabIndex = _a.tabIndex,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        dataItemKey = _a.dataItemKey;
-      if (!virtual) {
-        virtual = {
-          skip: 0
-        };
-      }
-      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,
-            ariaLabel: this.$props.ariaLabel
-          },
-          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,
-          ariaLabel: this.$props.ariaLabel
-        })
-      );
-    };
-    var comboboxDefault = function comboboxDefault() {
-      var _a;
-      return 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(Icon, {
-        name: 'loading',
-        attrs: this.v3 ? undefined : {
-          name: 'loading'
-        },
-        "class": "k-input-loading-icon",
-        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,
-          icon: icon || 'caret-alt-down',
-          svgIcon: svgIcon || caretAltDownIcon,
-          iconClass: iconClassName
-        },
-        tabIndex: -1,
-        "aria-label": ariaLabelExpandButton,
-        size: size,
-        fillMode: fillMode,
-        rounded: null,
-        "class": 'k-input-button',
-        icon: icon || 'caret-alt-down',
-        svgIcon: svgIcon || caretAltDownIcon,
-        iconClass: 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();
-        }
-      }), !renderAdaptive && renderListContainer.call(this)]);
-    };
-    // The following one combines the default rendering of the Combobox and the Adaptive rendering.
-    // This is needed because of Vue 2 specifics
-    var combobox = [isV3 ? h(comboboxDefault.call(this), __assign({}, this.$attrs)) : comboboxDefault.call(this), renderAdaptive && renderAdaptiveListContainer.call(this)];
-    var comboboxToRender = isV3 ? combobox : renderAdaptive ? h("div", [combobox]) : comboboxDefault.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
-      }
-    }, [comboboxToRender, 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]) : comboboxToRender;
-  }
-};
-/**
- * @hidden
- */
-var ComboBox = ComboBoxVue2;
-export { ComboBox, ComboBoxVue2 };