@progress/kendo-vue-dropdowns 5.3.0-dev.202410141143 → 5.3.0-develop.2

package/dist/esm/DropDownList/DropDownList.js

@@ -1,1314 +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 { templateRendering, getListeners, classNames, Keys, guid, noop, getTemplate, kendoThemeMaps, getTabIndex, setRef, getRef, Icon, canUseDOM } from '@progress/kendo-vue-common';
-import { Button as KButton } from '@progress/kendo-vue-buttons';
-var sizeMap = kendoThemeMaps.sizeMap,
-  roundedMap = kendoThemeMaps.roundedMap;
-import { ListContainer } from '../common/ListContainer.js';
-import { ListFilter } from '../common/ListFilter.js';
-import { ListDefaultItem } from '../common/ListDefaultItem.js';
-import { List } from '../common/List.js';
-import DropDownBase from '../common/DropDownBase.js';
-import { GroupStickyHeader } from '../common/GroupStickyHeader.js';
-import { selectButton, messages } from '../messages/main.js';
-import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { MOBILE_SMALL_DEVICE, MOBILE_MEDIUM_DEVICE } from '../common/constants.js';
-import { ActionSheet } from '@progress/kendo-vue-layout';
-import { isPresent, getItemValue, sameCharsOnly, shuffleData, matchText, areSame, preventDefaultNonInputs, getFocusedItem } from '../common/utils.js';
-import { caretAltDownIcon, xIcon } from '@progress/kendo-svg-icons';
-var VALIDATION_MESSAGE = 'Please select a value from the list!';
-/**
- * @hidden
- */
-var DropDownListVue2 = {
-  name: 'KendoDropDownList',
-  model: {
-    event: 'changemodel'
-  },
-  props: {
-    id: String,
-    title: 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
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    leftRightKeysNavigation: {
-      type: Boolean,
-      default: true
-    },
-    valid: {
-      type: Boolean,
-      default: undefined
-    },
-    validate: {
-      type: Boolean
-    },
-    validationMessage: {
-      type: String,
-      default: undefined
-    },
-    validityStyles: {
-      type: Boolean,
-      default: true
-    },
-    delay: {
-      type: Number,
-      default: 500
-    },
-    ignoreCase: {
-      type: Boolean,
-      default: true
-    },
-    icon: String,
-    svgIcon: Object,
-    iconClassName: String,
-    defaultItem: [Object, String],
-    valueRender: [String, Function, Object],
-    valueMap: Function,
-    opened: {
-      type: Boolean,
-      default: undefined
-    },
-    disabled: Boolean,
-    dir: {
-      type: String,
-      default: undefined
-    },
-    tabIndex: {
-      type: Number,
-      default: 0
-    },
-    accessKey: String,
-    dataItems: Array,
-    textField: String,
-    valueField: String,
-    valuePrimitive: Boolean,
-    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
-    },
-    ariaLabelledBy: String,
-    ariaLabel: 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
-    },
-    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,
-      group: undefined,
-      isScrolling: false,
-      itemHeight: 0,
-      state: undefined,
-      popupWidth: undefined,
-      windowWidth: 0
-    };
-  },
-  watch: {
-    currentOpened: function currentOpened(_, oldValue) {
-      // @ts-ignore
-      this.prevCurrentOpened = oldValue;
-    },
-    opened: function opened(_, oldValue) {
-      // @ts-ignore
-      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);
-    }
-  },
-  created: function created() {
-    this.observer = null;
-    this.valueDuringOnChange = undefined;
-    this.currentText = undefined;
-    this.currentValue = undefined;
-    this.prevCurrentValue = this.computedValue();
-    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 selectRef = ref(null);
-    var baseWrapperRef = ref(null);
-    var kendoAnchorRef = ref(null);
-    return {
-      v3: v3,
-      selectRef: selectRef,
-      baseWrapperRef: baseWrapperRef,
-      kendoAnchorRef: kendoAnchorRef
-    };
-  },
-  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;
-    this.select = getRef(this, 'select');
-    this.base.wrapper = 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 filterInput = this.$refs.filterInput;
-    var scrollElement = this.$refs.scrollElement;
-    var scroller = this.$refs.scroller;
-    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 (filterInput) {
-      this.filterInput = filterInput;
-    }
-    if (list && dataItems.length) {
-      // @ts-ignore
-      this.base.vs.scrollerRef(list.$el);
-    }
-    if (!this.$props.popupSettings.animate) {
-      if (opening) {
-        this.onPopupOpened();
-      } else if (closing) {
-        // this.onPopupClosed();
-      }
-    }
-    // @ts-ignore
-    if (virtual && this.virtualTotalHasChanged) {
-      this.base.vs.calcScrollElementHeight();
-      this.base.vs.reset();
-      // @ts-ignore
-      this.virtualTotalHasChanged = false;
-    } else {
-      var selectedItem_1 = this.computedValue();
-      var prevSelectedItem = this.prevCurrentValue;
-      var selectedItemIndex = dataItems.findIndex(function (i) {
-        return areSame(i, selectedItem_1, 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_1);
-      }
-      var selectedItemChanged = !areSame(prevSelectedItem, selectedItem_1, 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_1 && selectedItemChanged && !this._navigated) {
-        this.base.scrollToItem(selectedItemIndex);
-      } else if (opened && prevOpened && this._navigated) {
-        if (this._navigated && virtual && virtual.skip === 0) {
-          this.base.vs.reset();
-        } else if (this._navigated && virtual && virtual.skip === virtual.total - virtual.pageSize) {
-          this.base.vs.scrollToEnd();
-        }
-      }
-    }
-    this._navigated = false;
-    this.prevCurrentValue = this.computedValue();
-    this.setValidity();
-  },
-  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'
-        };
-      }
-    },
-    dropDownListId: {
-      get: function get() {
-        return "value-".concat(this.base.guid).concat(this.$props.ariaDescribedBy ? ' ' + this.$props.ariaDescribedBy : '');
-      }
-    },
-    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.base.wrapper) {
-        this.base.wrapper.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;
-      }
-      if (!isPresent(value) && this.$props.defaultItem !== undefined) {
-        value = this.$props.defaultItem;
-      }
-      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,
-        defaultItem = _a.defaultItem;
-      var skip = virtual ? virtual.skip : 0;
-      var item = index === -1 && defaultItem !== undefined ? defaultItem : dataItems[index - skip];
-      var newSelected = !areSame(item, this.computedValue(), dataItemKey);
-      this.triggerOnChange(item, state);
-      if (newSelected) {
-        this.base.triggerPageChangeCornerItems(item, state);
-      }
-    },
-    onNavigate: function onNavigate(state, keyCode) {
-      var _a = this.$props,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        defaultItem = _a.defaultItem,
-        dataItemKey = _a.dataItemKey,
-        _c = _a.virtual,
-        virtual = _c === void 0 ? {
-          skip: 0,
-          total: 0,
-          pageSize: 0
-        } : _c;
-      var vs = this.base.vs;
-      var value = this.computedValue();
-      var index = dataItems.findIndex(function (i) {
-        return areSame(i, value, dataItemKey);
-      });
-      var newIndex = this.base.navigation.navigate({
-        current: virtual.skip + index,
-        max: (vs.enabled ? virtual.total : dataItems.length) - 1,
-        min: defaultItem !== undefined ? -1 : 0,
-        keyCode: keyCode
-      });
-      if (newIndex !== undefined) {
-        this.handleItemSelect(newIndex, state);
-      }
-      this.applyState(state);
-    },
-    search: function search(event) {
-      var _this = this;
-      clearTimeout(this.typingTimeout);
-      if (!this.$props.filterable) {
-        this.typingTimeout = setTimeout(function () {
-          return _this.searchState.word = '';
-        }, this.$props.delay);
-        this.selectNext(event);
-      }
-    },
-    selectNext: function selectNext(event) {
-      var _this = this;
-      var _a = this.$props,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        dataItemKey = _a.dataItemKey;
-      var mappedData = dataItems.map(function (item, idx) {
-        return {
-          item: item,
-          itemIndex: idx
-        };
-      });
-      var word = this.searchState.word;
-      var last = this.searchState.last;
-      var isInLoop = sameCharsOnly(word, last);
-      var dataLength = mappedData.length;
-      var startIndex = Math.max(0, dataItems.findIndex(function (i) {
-        return areSame(i, _this.computedValue(), dataItemKey);
-      }));
-      var defaultItem;
-      if (this.$props.defaultItem) {
-        defaultItem = {
-          item: this.$props.defaultItem,
-          itemIndex: -1
-        };
-        dataLength += 1;
-        startIndex += 1;
-      }
-      startIndex += isInLoop ? 1 : 0;
-      mappedData = shuffleData(mappedData, startIndex, defaultItem);
-      var text,
-        loopMatch,
-        nextMatch,
-        index = 0;
-      var _c = this.$props,
-        textField = _c.textField,
-        ignoreCase = _c.ignoreCase;
-      for (; index < dataLength; index++) {
-        text = getItemValue(mappedData[index].item, textField);
-        loopMatch = isInLoop && matchText(text, last, ignoreCase);
-        nextMatch = matchText(text, word, ignoreCase);
-        if (loopMatch || nextMatch) {
-          index = mappedData[index].itemIndex;
-          break;
-        }
-      }
-      if (index !== dataLength) {
-        var state = this.base.initState();
-        state.event = event;
-        this.handleItemSelect(index, state);
-        this.applyState(state);
-        this.valueDuringOnChange = undefined;
-      }
-    },
-    handleKeyDown: function handleKeyDown(event) {
-      if (this.isScrolling) {
-        this.isScrolling = false;
-      }
-      var _a = this.$props,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        leftRightKeysNavigation = _a.leftRightKeysNavigation,
-        filterable = _a.filterable,
-        disabled = _a.disabled,
-        _c = _a.virtual,
-        virtual = _c === void 0 ? {
-          skip: 0,
-          total: 0,
-          pageSize: 0
-        } : _c;
-      var opened = this.isOpen;
-      var keyCode = event.keyCode;
-      var homeOrEndKeys = keyCode === Keys.home || keyCode === Keys.end;
-      var upOrDownKeys = keyCode === Keys.up || keyCode === Keys.down;
-      var shouldOpen = !opened && (event.altKey && keyCode === Keys.down || keyCode === Keys.enter || keyCode === Keys.space);
-      var shouldClose = opened && (event.altKey && keyCode === Keys.up || keyCode === Keys.esc);
-      var leftOrRightKeys = leftRightKeysNavigation && (keyCode === Keys.left || keyCode === Keys.right);
-      var shouldNavigate = upOrDownKeys || !filterable && (leftOrRightKeys || homeOrEndKeys);
-      var state = this.base.initState();
-      state.event = event;
-      if (disabled) {
-        return;
-      } else if (homeOrEndKeys && this.base.vs.enabled) {
-        if (keyCode === Keys.home) {
-          if (virtual.skip !== 0) {
-            this.base.triggerOnPageChange(state, 0, virtual.pageSize);
-            this._navigated = true;
-          } else {
-            this.triggerOnChange(dataItems[0], state);
-          }
-        } else {
-          if (virtual.skip < virtual.total - virtual.pageSize) {
-            this.base.triggerOnPageChange(state, virtual.total - virtual.pageSize, virtual.pageSize);
-            this._navigated = true;
-          } else {
-            this.triggerOnChange(dataItems[dataItems.length - 1], state);
-          }
-        }
-      } else if (opened && keyCode === Keys.enter) {
-        var focusedIndex = this.focusedIndex();
-        if (focusedIndex !== undefined) {
-          this.handleItemSelect(focusedIndex, state);
-        }
-        this.base.togglePopup(state);
-        event.preventDefault();
-      } else if (shouldOpen || shouldClose) {
-        if (this.adaptiveState) {
-          this.handleWrapperClick(event); // Handle the closing on "Esc" key press in adaptive mode
-        }
-
-        this.base.togglePopup(state);
-        event.preventDefault();
-      } else if (shouldNavigate) {
-        this.onNavigate(state, keyCode);
-        event.preventDefault();
-      }
-      this.applyState(state);
-    },
-    handleItemClick: function handleItemClick(index, event) {
-      this.base.handleItemClick(index, event);
-      this.valueDuringOnChange = undefined;
-    },
-    handleFocus: function handleFocus(event) {
-      if (this._skipFocusEvent) {
-        return;
-      }
-      this.base.handleFocus(event);
-    },
-    handleBlur: function handleBlur(event) {
-      if (this._skipFocusEvent || !this.currentFocused) {
-        return;
-      }
-      var opened = this.isOpen;
-      var state = this.base.initState();
-      state.event = event;
-      state.data.currentFocused = false;
-      state.events.push({
-        type: 'blur'
-      });
-      if (opened && !this.adaptiveState) {
-        this.base.togglePopup(state);
-      }
-      this.applyState(state);
-    },
-    handleDefaultItemClick: function handleDefaultItemClick(event) {
-      var state = this.base.initState();
-      state.event = event;
-      this.base.togglePopup(state);
-      this.triggerOnChange(this.$props.defaultItem, state);
-      this.applyState(state);
-    },
-    handleWrapperClick: function handleWrapperClick(event) {
-      var state = this.base.initState();
-      state.event = event;
-      if (!this.currentFocused) {
-        // @ts-ignore
-        state.data.currentFocused = true;
-      }
-      this.base.togglePopup(state);
-      this.applyState(state);
-    },
-    handleKeyPress: function handleKeyPress(event) {
-      if (this.$props.filterable || event.keyCode === Keys.enter) {
-        return;
-      }
-      var character = String.fromCharCode(event.charCode || event.keyCode);
-      if (this.$props.ignoreCase) {
-        character = character.toLowerCase();
-      }
-      if (character === ' ') {
-        event.preventDefault();
-      }
-      this.searchState = {
-        word: this.searchState.word + character,
-        last: this.searchState.last + character
-      };
-      this.search(event);
-    },
-    handleListFilterChange: function handleListFilterChange(event) {
-      var state = this.base.initState();
-      state.event = event;
-      if (this.$props.filter === undefined) {
-        // @ts-ignore
-        state.data.currentText = event.target.value;
-      }
-      this.base.filterChanged(event.target.value, state);
-      // Used to reset the value of the StickyHeader when filtering the data
-      state.data.group = undefined;
-      this.applyState(state);
-    },
-    onPopupOpened: function onPopupOpened() {
-      if (this.filterInput) {
-        this.focusElement(this.filterInput.input);
-      }
-    },
-    onPopupClosed: function onPopupClosed() {
-      var _this = this;
-      if (this.currentFocused) {
-        setTimeout(function () {
-          if (_this.currentFocused && _this.base.wrapper) {
-            _this.focusElement(_this.base.wrapper);
-          }
-        });
-      }
-    },
-    focusedIndex: function focusedIndex() {
-      var filterText = isPresent(this.$props.filter) ? this.$props.filter : this.currentText;
-      var _a = this.$props,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        _c = _a.virtual,
-        virtual = _c === void 0 ? {
-          skip: 0
-        } : _c,
-        dataItemKey = _a.dataItemKey,
-        textField = _a.textField,
-        focusedItemIndex = _a.focusedItemIndex;
-      var value = this.computedValue();
-      var selectedIndex = dataItems.findIndex(function (i) {
-        return areSame(i, value, dataItemKey);
-      });
-      var hasSelected = !(selectedIndex < 0 && !this.$props.defaultItem);
-      if (!hasSelected && filterText && virtual.skip === 0) {
-        return focusedItemIndex ? focusedItemIndex(dataItems, filterText, textField) : dataItems.indexOf(getFocusedItem(dataItems, filterText, textField));
-      } else {
-        return !hasSelected && virtual.skip === 0 ? 0 : undefined;
-      }
-    },
-    focusElement: function focusElement(element) {
-      var _this = this;
-      this._skipFocusEvent = true;
-      element.focus();
-      setTimeout(function () {
-        return _this._skipFocusEvent = false;
-      }, 30);
-    },
-    setValidity: function setValidity() {
-      if (this.select && this.select.setCustomValidity) {
-        this.select.setCustomValidity(this.validity().valid ? '' : this.$props.validationMessage || VALIDATION_MESSAGE);
-      }
-    },
-    triggerOnChange: function triggerOnChange(item, state) {
-      if (areSame(this.computedValue(), 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,
-      style = _a.style,
-      className = _a.className,
-      label = _a.label,
-      dir = _a.dir,
-      _b = _a.virtual,
-      virtual = _b === void 0 ? {
-        skip: 0
-      } : _b,
-      size = _a.size,
-      rounded = _a.rounded,
-      fillMode = _a.fillMode,
-      dataItemKey = _a.dataItemKey,
-      _c = _a.dataItems,
-      dataItems = _c === void 0 ? [] : _c,
-      disabled = _a.disabled,
-      tabIndex = _a.tabIndex,
-      loading = _a.loading,
-      icon = _a.icon,
-      svgIcon = _a.svgIcon,
-      iconClassName = _a.iconClassName,
-      adaptiveTitle = _a.adaptiveTitle,
-      header = _a.header,
-      footer = _a.footer,
-      groupStickyHeaderItemRender = _a.groupStickyHeaderItemRender;
-    var opened = this.isOpen;
-    var text = getItemValue(this.computedValue(), this.$props.textField);
-    var isValid = !this.$props.validityStyles || this.validity().valid;
-    var base = this.base;
-    var vs = base.vs;
-    var id = this.$props.id || this.inputId;
-    vs.enabled = this.$props.virtual !== undefined;
-    var popupSettings = Object.assign({}, {
-      animate: true,
-      height: '200px'
-    }, this.$props.popupSettings);
-    var ariaLabelSelectButton = provideLocalizationService(this).toLanguageString(selectButton, messages[selectButton]);
-    var renderAdaptive = this.adaptiveState;
-    if (this.group === undefined && this.$props.groupField !== undefined) {
-      this.group = getItemValue(this.$props.dataItems[0], this.$props.groupField);
-    }
-    var valueRender = templateRendering.call(this, this.$props.valueRender, getListeners.call(this));
-    var focused = this.currentFocused;
-    var value = this.primitiveValue();
-    var selectedIndex = dataItems.findIndex(function (i) {
-      return areSame(i, value, dataItemKey);
-    });
-    var valueDefaultRendering = h("span", {
-      "class": "k-input-inner",
-      id: this.dropDownListId,
-      attrs: this.v3 ? undefined : {
-        id: this.dropDownListId
-      }
-    }, [h("span", {
-      "class": "k-input-value-text"
-    }, [text])]);
-    var valueElement = getTemplate.call(this, {
-      h: h,
-      template: valueRender,
-      defaultRendering: valueDefaultRendering,
-      additionalProps: __assign({
-        value: this.computedValue()
-      }, this.$data)
-    });
-    var dummySelect = function dummySelect(cvalue) {
-      /* Dummy component to support forms */
-      return h("select", {
-        name: this.$props.name,
-        attrs: this.v3 ? undefined : {
-          name: this.$props.name,
-          id: id,
-          tabindex: -1,
-          "aria-hidden": true,
-          title: this.$props.label
-        },
-        id: id,
-        ref: setRef(this, 'select'),
-        tabindex: -1,
-        "aria-hidden": true,
-        title: this.$props.label,
-        style: {
-          opacity: 0,
-          width: 1,
-          border: 0,
-          zIndex: -1,
-          position: 'absolute',
-          left: '50%'
-        }
-      }, [h("option", {
-        value: this.v3 ? this.$props.valueMap ? this.$props.valueMap.call(undefined, cvalue) : cvalue : null,
-        domProps: this.v3 ? undefined : {
-          "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, cvalue) : cvalue
-        }
-      })]);
-    };
-    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]), h("div", {
-        "class": "k-actionsheet-subtitle k-text-center"
-      })]), 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.handleWrapperClick,
-        on: this.v3 ? undefined : {
-          "click": _this.handleWrapperClick
-        },
-        icon: "x",
-        svgIcon: xIcon
-      })])]), h("div", {
-        "class": "k-actionsheet-titlebar-group k-actionsheet-filter"
-      }, [renderListFilter.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));
-      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))
-      }, [renderDefaultItem.call(_this), _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.handleWrapperClick,
-        on: this.v3 ? undefined : {
-          "close": this.handleWrapperClick
-        },
-        navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
-      });
-    };
-    var renderDefaultItem = function renderDefaultItem() {
-      var _a = this.$props,
-        textField = _a.textField,
-        defaultItem = _a.defaultItem;
-      return defaultItem !== undefined &&
-      // @ts-ignore
-      h(ListDefaultItem, {
-        defaultItem: defaultItem,
-        attrs: this.v3 ? undefined : {
-          defaultItem: defaultItem,
-          textField: textField,
-          selected: areSame(this.computedValue(), defaultItem, dataItemKey)
-        },
-        textField: textField,
-        selected: areSame(this.computedValue(), defaultItem, dataItemKey),
-        key: "defaultitemkey",
-        onDefaultitemclick: this.handleDefaultItemClick,
-        on: this.v3 ? undefined : {
-          "defaultitemclick": this.handleDefaultItemClick
-        }
-      });
-    };
-    var renderList = function renderList() {
-      var _this2 = this;
-      var _a = this.$props,
-        textField = _a.textField,
-        groupField = _a.groupField;
-      var dataItemsToRender = 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 skip = virtual.skip;
-      var translate = "translateY(".concat(vs.translate, "px)");
-      if (groupField) {
-        dataItemsToRender = this.base.getGroupedDataModernMode(dataItemsToRender, groupField);
-      }
-      return (
-        // @ts-ignore  function children
-        h(List, {
-          id: this.base.listBoxId,
-          attrs: this.v3 ? undefined : {
-            id: this.base.listBoxId,
-            show: opened,
-            dataItems: dataItemsToRender.slice(),
-            focusedIndex: this.focusedIndex(),
-            value: this.computedValue(),
-            textField: textField,
-            valueField: dataItemKey,
-            optionsGuid: this.base.guid,
-            wrapperStyle: {
-              maxHeight: popupSettings.height
-            },
-            wrapperCssClass: 'k-list-content',
-            listStyle: vs.enabled ? {
-              transform: translate
-            } : undefined,
-            skip: skip,
-            itemRender: itemRender,
-            groupHeaderItemRender: groupHeaderItemRender,
-            noDataRender: listNoDataRender,
-            groupField: groupField
-          },
-          show: opened,
-          dataItems: dataItemsToRender.slice(),
-          focusedIndex: this.focusedIndex(),
-          value: this.computedValue(),
-          textField: textField,
-          valueField: dataItemKey,
-          optionsGuid: this.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": this.onScroll
-          },
-          itemRender: itemRender,
-          groupHeaderItemRender: groupHeaderItemRender,
-          noDataRender: listNoDataRender,
-          groupField: groupField,
-          onScroll: this.onScroll
-        }, this.v3 ? function () {
-          return [renderScrollElement.call(_this2)];
-        } : [renderScrollElement.call(_this2)])
-      );
-    };
-    var renderListFilter = function renderListFilter() {
-      var filterText = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
-      return this.$props.filterable &&
-      // @ts-ignore
-      h(ListFilter, {
-        value: filterText,
-        attrs: this.v3 ? undefined : {
-          value: filterText,
-          size: this.$props.size,
-          rounded: this.$props.rounded,
-          fillMode: this.$props.fillMode,
-          ariaControlsId: this.base.listBoxId,
-          ariaActivedescendantId: "option-".concat(this.base.guid, "-").concat(this.focusedIndex())
-        },
-        ref: 'filterInput',
-        onChange: this.handleListFilterChange,
-        on: this.v3 ? undefined : {
-          "change": this.handleListFilterChange,
-          "keydown": this.handleKeyDown
-        },
-        onKeydown: this.handleKeyDown,
-        size: this.$props.size,
-        rounded: this.$props.rounded,
-        fillMode: this.$props.fillMode,
-        ariaControlsId: this.base.listBoxId,
-        ariaActivedescendantId: "option-".concat(this.base.guid, "-").concat(this.focusedIndex())
-      });
-    };
-    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);
-      return (
-        // @ts-ignore  function children
-        h(ListContainer, {
-          ref: 'container',
-          onMousedown: preventDefaultNonInputs,
-          on: this.v3 ? undefined : {
-            "mousedown": preventDefaultNonInputs,
-            "open": this.onPopupOpened,
-            "close": this.onPopupClosed,
-            "blur": this.handleBlur
-          },
-          dir: dir !== undefined ? dir : base.dirCalculated,
-          attrs: this.v3 ? undefined : {
-            dir: dir !== undefined ? dir : base.dirCalculated,
-            width: this.popupWidth
-            // @ts-ignore
-            ,
-            popupSettings: __assign(__assign({}, popupSettings), {
-              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),
-              anchor: this.anchor,
-              show: opened
-            })
-          },
-          width: this.popupWidth,
-          popupSettings: __assign(__assign({}, popupSettings), {
-            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),
-            anchor: this.anchor,
-            show: opened
-          }),
-          onOpen: this.onPopupOpened,
-          onClose: this.onPopupClosed,
-          onBlur: this.handleBlur
-        }, this.v3 ? function () {
-          return [renderListFilter.call(_this3), renderDefaultItem.call(_this3), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
-            group: _this3.group,
-            attrs: _this3.v3 ? undefined : {
-              group: _this3.group,
-              render: groupStickyHeaderTemplate
-            },
-            render: groupStickyHeaderTemplate
-          }), headerListContainer && h("div", {
-            "class": "k-list-header"
-          }, [headerListContainer]), renderList.call(_this3), footerListContainer && h("div", {
-            "class": "k-list-footer"
-          }, [footerListContainer])];
-        } : [renderListFilter.call(_this3), renderDefaultItem.call(_this3), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
-          group: _this3.group,
-          attrs: _this3.v3 ? undefined : {
-            group: _this3.group,
-            render: groupStickyHeaderTemplate
-          },
-          render: groupStickyHeaderTemplate
-        }), headerListContainer && h("div", {
-          "class": "k-list-header"
-        }, [headerListContainer]), renderList.call(_this3), footerListContainer && h("div", {
-          "class": "k-list-footer"
-        }, [footerListContainer])])
-      );
-    };
-    if (this.$props.virtual !== undefined) {
-      base.vs.skip = virtual.skip;
-      // @ts-ignore
-      base.vs.total = virtual.total;
-      // @ts-ignore
-      base.vs.pageSize = virtual.pageSize;
-    }
-    var dropdownlistDefault = function dropdownlistDefault() {
-      var _a;
-      return h("span", {
-        ref: setRef(this, 'kendoAnchor', this.anchor),
-        "class": classNames('k-dropdownlist k-picker', className, (_a = {}, _a["k-picker-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-picker-".concat(fillMode)] = fillMode, _a['k-focus'] = focused, _a['k-disabled'] = disabled, _a['k-invalid'] = !isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a)),
-        style: !label ? style : __assign(__assign({}, style), {
-          width: undefined
-        }),
-        dir: dir,
-        attrs: this.v3 ? undefined : {
-          dir: dir,
-          tabindex: getTabIndex(tabIndex, disabled),
-          accesskey: this.$props.accessKey,
-          role: 'combobox',
-          "aria-disabled": disabled || undefined,
-          "aria-haspopup": true,
-          "aria-expanded": opened || false,
-          "aria-owns": this.base.listBoxId,
-          "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
-          "aria-label": this.$props.ariaLabel || this.$props.label,
-          "aria-labelledby": this.$props.ariaLabelledBy,
-          "aria-describedBy": this.dropDownListId,
-          title: this.$props.title
-        },
-        onMousedown: opened ? preventDefaultNonInputs : noop,
-        on: this.v3 ? undefined : {
-          "mousedown": opened ? preventDefaultNonInputs : noop,
-          "focusin": this.handleFocus,
-          "focusout": this.handleBlur,
-          "keydown": this.handleKeyDown,
-          "keypress": this.handleKeyPress,
-          "click": disabled ? noop : this.handleWrapperClick
-        },
-        onFocusin: this.handleFocus,
-        onFocusout: this.handleBlur,
-        tabindex: getTabIndex(tabIndex, disabled),
-        accesskey: this.$props.accessKey,
-        onKeydown: this.handleKeyDown,
-        onKeypress: this.handleKeyPress,
-        role: 'combobox',
-        onClick: disabled ? noop : this.handleWrapperClick,
-        "aria-disabled": disabled || undefined,
-        "aria-haspopup": true,
-        "aria-expanded": opened || false,
-        "aria-owns": this.base.listBoxId,
-        "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
-        "aria-label": this.$props.ariaLabel || this.$props.label,
-        "aria-labelledby": this.$props.ariaLabelledBy,
-        "aria-describedBy": this.dropDownListId,
-        title: this.$props.title
-      }, [valueElement, 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,
-          size: size,
-          fillMode: fillMode,
-          rounded: null,
-          ariaLabel: ariaLabelSelectButton,
-          icon: icon || 'caret-alt-down',
-          svgIcon: svgIcon || caretAltDownIcon,
-          iconClass: iconClassName
-        },
-        tabIndex: -1,
-        size: size,
-        fillMode: fillMode,
-        rounded: null,
-        ariaLabel: ariaLabelSelectButton,
-        "class": 'k-input-button',
-        icon: icon || 'caret-alt-down',
-        svgIcon: svgIcon || caretAltDownIcon,
-        iconClass: iconClassName
-      }), dummySelect.call(this, value), !renderAdaptive && renderListContainer.call(this)]);
-    };
-    // The following one combines the default rendering of the DropDownList and the Adaptive rendering.
-    // This is needed because of Vue 2 specifics
-    var dropdownlist = [isV3 ? h(dropdownlistDefault.call(this), __assign({}, this.$attrs)) : dropdownlistDefault.call(this), renderAdaptive && renderAdaptiveListContainer.call(this)];
-    var dropdownlistToRender = isV3 ? dropdownlist : renderAdaptive ? h("div", [dropdownlist]) : dropdownlistDefault.call(this);
-    return label ? h("span", {
-      "class": this.spanClassNames,
-      onFocusin: this.handleFocus,
-      on: this.v3 ? undefined : {
-        "focusin": this.handleFocus,
-        "focusout": this.handleBlur
-      },
-      onFocusout: this.handleBlur,
-      dir: this.$props.dir,
-      attrs: this.v3 ? undefined : {
-        dir: this.$props.dir
-      }
-    }, [dropdownlistToRender, 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]) : dropdownlistToRender;
-  }
-};
-/**
- * @hidden
- */
-var DropDownList = DropDownListVue2;
-export { DropDownList, DropDownListVue2 };