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

package/dist/esm/DropDownList/DropDownList.js

@@ -0,0 +1,1088 @@
+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 } 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 { isPresent, getItemValue, sameCharsOnly, shuffleData, matchText, areSame, preventDefaultNonInputs, getFocusedItem } from '../common/utils.js';
+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
+    },
+    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'
+        };
+      }
+    },
+    itemRender: [String, Function, Object],
+    listNoDataRender: [String, Function, Object],
+    focusedItemIndex: Function,
+    header: [String, Function, Object],
+    footer: [String, Function, Object],
+    filterable: Boolean,
+    filter: {
+      type: String,
+      default: undefined
+    },
+    virtual: {
+      type: Object,
+      default: undefined
+    },
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return ['solid', 'flat', 'outline'].includes(value);
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large'].includes(value);
+      }
+    }
+  },
+  data: function data() {
+    return {
+      hasMounted: false,
+      currentText: '',
+      currentValue: '',
+      currentFocused: false,
+      currentOpened: false,
+      searchState: {
+        word: '',
+        last: ''
+      },
+      _skipFocusEvent: false,
+      valueDuringOnChange: {},
+      _navigated: false
+    };
+  },
+  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;
+    }
+  },
+  created: function created() {
+    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.hasMounted = true;
+    this.select = getRef(this, 'select');
+    this.base.wrapper = getRef(this, 'kendoAnchor', this.anchor);
+    this.base.didMount();
+    this.setValidity();
+  },
+  updated: function updated() {
+    var _a = this.$props,
+        _b = _a.dataItems,
+        dataItems = _b === void 0 ? [] : _b,
+        dataItemKey = _a.dataItemKey,
+        virtual = _a.virtual;
+    var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+    var prevOpened = this.prevOpened !== undefined ? this.prevOpened : this.prevCurrentOpened;
+    var opening = !prevOpened && opened;
+    var closing = prevOpened && !opened;
+    var list = this.$refs.list;
+    var 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);
+      });
+      var selectedItemChanged = !areSame(prevSelectedItem, selectedItem_1, dataItemKey);
+
+      if (opening && virtual) {
+        this.base.scrollToVirtualItem(virtual, selectedItemIndex);
+        this.prevCurrentOpened = true;
+      } else if (opening && !virtual) {
+        this.base.scrollToItem(selectedItemIndex);
+        this.prevCurrentOpened = true;
+      } else if (opened && prevOpened && selectedItem_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'
+        };
+      }
+    }
+  },
+  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) {
+      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.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      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) {
+        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.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var state = this.base.initState();
+      state.event = event;
+      state.data.currentFocused = false;
+      state.events.push({
+        type: 'blur'
+      });
+
+      if (opened) {
+        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);
+      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;
+    }
+  },
+  render: function render(createElement) {
+    var _a;
+
+    var h = gh || createElement;
+    var _b = this.$props,
+        style = _b.style,
+        className = _b.className,
+        label = _b.label,
+        dir = _b.dir,
+        _c = _b.virtual,
+        virtual = _c === void 0 ? {
+      skip: 0
+    } : _c,
+        size = _b.size,
+        rounded = _b.rounded,
+        fillMode = _b.fillMode;
+    var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+    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 _d = this.$props,
+        dataItemKey = _d.dataItemKey,
+        _e = _d.dataItems,
+        dataItems = _e === void 0 ? [] : _e,
+        disabled = _d.disabled,
+        tabIndex = _d.tabIndex,
+        loading = _d.loading,
+        iconClassName = _d.iconClassName;
+    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"
+    }, [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 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 textField = this.$props.textField;
+      var itemRender = templateRendering.call(this, this.$props.itemRender, 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)");
+      return (// @ts-ignore  function children
+        h(List, {
+          id: this.base.listBoxId,
+          attrs: this.v3 ? undefined : {
+            id: this.base.listBoxId,
+            show: opened,
+            dataItems: dataItems.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,
+            noDataRender: listNoDataRender
+          },
+          show: opened,
+          dataItems: dataItems.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": vs.scrollHandler
+          },
+          itemRender: itemRender,
+          noDataRender: listNoDataRender,
+          onScroll: vs.scrollHandler
+        }, 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
+        },
+        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
+      });
+    };
+
+    var renderScrollElement = function renderScrollElement() {
+      return vs.enabled && h("div", {
+        ref: 'scrollElement',
+        key: 'scrollElementKey'
+      });
+    };
+
+    var renderListContainer = function renderListContainer() {
+      var _this3 = this;
+
+      var _a;
+
+      var headerTemplate = templateRendering.call(this, this.$props.header, getListeners.call(this));
+      var footerTemplate = templateRendering.call(this, this.$props.footer, getListeners.call(this));
+      var header = getTemplate.call(this, {
+        h: h,
+        template: headerTemplate
+      });
+      var footer = getTemplate.call(this, {
+        h: h,
+        template: footerTemplate
+      });
+      var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
+      return (// @ts-ignore  function children
+        h(ListContainer, {
+          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: popupWidth // @ts-ignore
+            ,
+            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: popupSettings.className,
+              animate: popupSettings.animate,
+              anchor: this.anchor,
+              show: opened
+            }
+          },
+          width: popupWidth,
+          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: popupSettings.className,
+            animate: popupSettings.animate,
+            anchor: this.anchor,
+            show: opened
+          },
+          onOpen: this.onPopupOpened,
+          onClose: this.onPopupClosed,
+          onBlur: this.handleBlur
+        }, this.v3 ? function () {
+          return [renderListFilter.call(_this3), renderDefaultItem.call(_this3), header && h("div", {
+            "class": "k-list-header"
+          }, [header]), renderList.call(_this3), footer && h("div", {
+            "class": "k-list-footer"
+          }, [footer])];
+        } : [renderListFilter.call(_this3), renderDefaultItem.call(_this3), header && h("div", {
+          "class": "k-list-header"
+        }, [header]), renderList.call(_this3), footer && h("div", {
+          "class": "k-list-footer"
+        }, [footer])])
+      );
+    };
+
+    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 dropdownlist = 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: 'listbox',
+        "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.label,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        id: this.$props.id,
+        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: 'listbox',
+      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.label,
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      id: this.$props.id,
+      title: this.$props.title
+    }, [valueElement, loading && h("span", {
+      "class": "k-icon k-input-loading-icon k-i-loading",
+      key: "loading"
+    }), // @ts-ignore
+    h(KButton, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        tabIndex: -1,
+        size: size,
+        fillMode: fillMode,
+        rounded: null,
+        iconClass: classNames('k-icon k-i-arrow-s', iconClassName)
+      },
+      tabIndex: -1,
+      size: size,
+      fillMode: fillMode,
+      rounded: null,
+      "class": 'k-input-button',
+      iconClass: classNames('k-icon k-i-arrow-s', iconClassName)
+    }), dummySelect.call(this, value), renderListContainer.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
+      }
+    }, [dropdownlist, this.$props.label ? id ? h("label", {
+      "for": id,
+      attrs: this.v3 ? undefined : {
+        "for": id
+      },
+      "class": "k-label"
+    }, [this.$props.label]) : h("span", {
+      "class": "k-label"
+    }, [this.$props.label]) : null]) : dropdownlist;
+  }
+};
+/**
+ * @hidden
+ */
+
+var DropDownList = DropDownListVue2;
+export { DropDownList, DropDownListVue2 };