@progress/kendo-vue-dropdowns 3.6.4 → 3.6.5-dev.202210181442

package/dist/es/DropDownList/DropDownList.js

@@ -2,19 +2,15 @@ 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
-
-
+};
+// @ts-ignore
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
@@ -23,7 +19,7 @@ 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;
+  roundedMap = kendoThemeMaps.roundedMap;
 import { ListContainer } from '../common/ListContainer';
 import { ListFilter } from '../common/ListFilter';
 import { ListDefaultItem } from '../common/ListDefaultItem';
@@ -34,7 +30,6 @@ var VALIDATION_MESSAGE = 'Please select a value from the list!';
 /**
  * @hidden
  */
-
 var DropDownListVue2 = {
   name: 'KendoDropDownList',
   model: {
@@ -194,7 +189,6 @@ var DropDownListVue2 = {
       if (newValue && oldValue && newValue.total !== oldValue.total) {
         this.virtualTotalHasChanged = true;
       }
-
       this.virtualHasChanged = true;
     }
   },
@@ -231,10 +225,10 @@ var DropDownListVue2 = {
   },
   updated: function updated() {
     var _a = this.$props,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        dataItemKey = _a.dataItemKey,
-        virtual = _a.virtual;
+      _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;
@@ -243,39 +237,34 @@ var DropDownListVue2 = {
     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.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();
+      } else if (closing) {
+        // this.onPopupClosed();
       }
-    } // @ts-ignore
-
-
+    }
+    // @ts-ignore
     if (virtual && this.virtualTotalHasChanged) {
       this.base.vs.calcScrollElementHeight();
-      this.base.vs.reset(); // @ts-ignore
-
+      this.base.vs.reset();
+      // @ts-ignore
       this.virtualTotalHasChanged = false;
     } else {
       var selectedItem_1 = this.computedValue();
@@ -284,7 +273,6 @@ var DropDownListVue2 = {
         return areSame(i, selectedItem_1, dataItemKey);
       });
       var selectedItemChanged = !areSame(prevSelectedItem, selectedItem_1, dataItemKey);
-
       if (opening && virtual) {
         this.base.scrollToVirtualItem(virtual, selectedItemIndex);
         this.prevCurrentOpened = true;
@@ -301,7 +289,6 @@ var DropDownListVue2 = {
         }
       }
     }
-
     this._navigated = false;
     this.prevCurrentValue = this.computedValue();
     this.setValidity();
@@ -310,11 +297,11 @@ var DropDownListVue2 = {
     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!
-
+          _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);
         });
@@ -341,7 +328,6 @@ var DropDownListVue2 = {
     },
     computedValue: function computedValue() {
       var value;
-
       if (this.valueDuringOnChange !== undefined) {
         value = this.valueDuringOnChange;
       } else if (this.$props.value !== undefined) {
@@ -353,11 +339,9 @@ var DropDownListVue2 = {
       } 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) {
@@ -382,32 +366,31 @@ var DropDownListVue2 = {
     },
     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;
+        _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;
+        _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) {
@@ -419,18 +402,14 @@ var DropDownListVue2 = {
         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 = '';
@@ -440,11 +419,10 @@ var DropDownListVue2 = {
     },
     selectNext: function selectNext(event) {
       var _this = this;
-
       var _a = this.$props,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b,
-          dataItemKey = _a.dataItemKey;
+        _b = _a.dataItems,
+        dataItems = _b === void 0 ? [] : _b,
+        dataItemKey = _a.dataItemKey;
       var mappedData = dataItems.map(function (item, idx) {
         return {
           item: item,
@@ -459,7 +437,6 @@ var DropDownListVue2 = {
         return areSame(i, _this.computedValue(), dataItemKey);
       }));
       var defaultItem;
-
       if (this.$props.defaultItem) {
         defaultItem = {
           item: this.$props.defaultItem,
@@ -468,28 +445,24 @@ var DropDownListVue2 = {
         dataLength += 1;
         startIndex += 1;
       }
-
       startIndex += isInLoop ? 1 : 0;
       mappedData = shuffleData(mappedData, startIndex, defaultItem);
       var text,
-          loopMatch,
-          nextMatch,
-          index = 0;
+        loopMatch,
+        nextMatch,
+        index = 0;
       var _c = this.$props,
-          textField = _c.textField,
-          ignoreCase = _c.ignoreCase;
-
+        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;
@@ -500,17 +473,17 @@ var DropDownListVue2 = {
     },
     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;
+        _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;
@@ -521,7 +494,6 @@ var DropDownListVue2 = {
       var shouldNavigate = upOrDownKeys || !filterable && (leftOrRightKeys || homeOrEndKeys);
       var state = this.base.initState();
       state.event = event;
-
       if (disabled) {
         return;
       } else if (homeOrEndKeys && this.base.vs.enabled) {
@@ -542,11 +514,9 @@ var DropDownListVue2 = {
         }
       } 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) {
@@ -556,7 +526,6 @@ var DropDownListVue2 = {
         this.onNavigate(state, keyCode);
         event.preventDefault();
       }
-
       this.applyState(state);
     },
     handleItemClick: function handleItemClick(index, event) {
@@ -567,14 +536,12 @@ var DropDownListVue2 = {
       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;
@@ -582,11 +549,9 @@ var DropDownListVue2 = {
       state.events.push({
         type: 'blur'
       });
-
       if (opened) {
         this.base.togglePopup(state);
       }
-
       this.applyState(state);
     },
     handleDefaultItemClick: function handleDefaultItemClick(event) {
@@ -599,12 +564,10 @@ var DropDownListVue2 = {
     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);
     },
@@ -612,17 +575,13 @@ var DropDownListVue2 = {
       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
@@ -632,12 +591,10 @@ var DropDownListVue2 = {
     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);
     },
@@ -648,7 +605,6 @@ var DropDownListVue2 = {
     },
     onPopupClosed: function onPopupClosed() {
       var _this = this;
-
       if (this.currentFocused) {
         setTimeout(function () {
           if (_this.currentFocused && _this.base.wrapper) {
@@ -660,21 +616,20 @@ var DropDownListVue2 = {
     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;
+        _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 {
@@ -683,7 +638,6 @@ var DropDownListVue2 = {
     },
     focusElement: function focusElement(element) {
       var _this = this;
-
       this._skipFocusEvent = true;
       element.focus();
       setTimeout(function () {
@@ -699,11 +653,9 @@ var DropDownListVue2 = {
       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'
@@ -719,20 +671,19 @@ var DropDownListVue2 = {
   },
   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;
+      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;
@@ -745,13 +696,13 @@ var DropDownListVue2 = {
       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;
+      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();
@@ -771,7 +722,6 @@ var DropDownListVue2 = {
         value: this.computedValue()
       }, this.$data)
     });
-
     var dummySelect = function dummySelect(cvalue) {
       /* Dummy component to support forms */
       return h("select", {
@@ -803,12 +753,12 @@ var DropDownListVue2 = {
         }
       })]);
     };
-
     var renderDefaultItem = function renderDefaultItem() {
       var _a = this.$props,
-          textField = _a.textField,
-          defaultItem = _a.defaultItem;
-      return defaultItem !== undefined && // @ts-ignore
+        textField = _a.textField,
+        defaultItem = _a.defaultItem;
+      return defaultItem !== undefined &&
+      // @ts-ignore
       h(ListDefaultItem, {
         defaultItem: defaultItem,
         attrs: this.v3 ? undefined : {
@@ -825,16 +775,15 @@ var DropDownListVue2 = {
         }
       });
     };
-
     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
+      return (
+        // @ts-ignore  function children
         h(List, {
           id: this.base.listBoxId,
           attrs: this.v3 ? undefined : {
@@ -887,10 +836,10 @@ var DropDownListVue2 = {
         } : [renderScrollElement.call(_this2)])
       );
     };
-
     var renderListFilter = function renderListFilter() {
       var filterText = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
-      return this.$props.filterable && // @ts-ignore
+      return this.$props.filterable &&
+      // @ts-ignore
       h(ListFilter, {
         value: filterText,
         attrs: this.v3 ? undefined : {
@@ -911,19 +860,15 @@ var DropDownListVue2 = {
         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, {
@@ -935,7 +880,8 @@ var DropDownListVue2 = {
         template: footerTemplate
       });
       var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
-      return (// @ts-ignore  function children
+      return (
+        // @ts-ignore  function children
         h(ListContainer, {
           ref: 'container',
           onMousedown: preventDefaultNonInputs,
@@ -948,7 +894,8 @@ var DropDownListVue2 = {
           dir: dir !== undefined ? dir : base.dirCalculated,
           attrs: this.v3 ? undefined : {
             dir: dir !== undefined ? dir : base.dirCalculated,
-            width: popupWidth // @ts-ignore
+            width: 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)),
@@ -980,15 +927,13 @@ var DropDownListVue2 = {
         }, [footer])])
       );
     };
-
     if (this.$props.virtual !== undefined) {
-      base.vs.skip = virtual.skip; // @ts-ignore
-
-      base.vs.total = virtual.total; // @ts-ignore
-
+      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)),
@@ -1040,7 +985,8 @@ var DropDownListVue2 = {
     }, [valueElement, loading && h("span", {
       "class": "k-icon k-input-loading-icon k-i-loading",
       key: "loading"
-    }), // @ts-ignore
+    }),
+    // @ts-ignore
     h(KButton, {
       type: "button",
       attrs: this.v3 ? undefined : {
@@ -1086,6 +1032,5 @@ var DropDownListVue2 = {
 /**
  * @hidden
  */
-
 var DropDownList = DropDownListVue2;
 export { DropDownList, DropDownListVue2 };