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

package/dist/es/ComboBox/ComboBox.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;
@@ -25,7 +21,7 @@ import DropDownBase from '../common/DropDownBase';
 import { guid, classNames, Keys, templateRendering, getListeners, getTemplate, kendoThemeMaps, getRef, setRef } from '@progress/kendo-vue-common';
 import { Button as KButton } from '@progress/kendo-vue-buttons';
 var sizeMap = kendoThemeMaps.sizeMap,
-    roundedMap = kendoThemeMaps.roundedMap;
+  roundedMap = kendoThemeMaps.roundedMap;
 import { areSame, itemIndexStartsWith, getItemIndexByText, getItemValue, isPresent, suggestValue as _suggestValue } from '../common/utils';
 import { SearchBar } from '../common/SearchBar';
 import { ListContainer } from '../common/ListContainer';
@@ -37,7 +33,6 @@ var VALIDATION_MESSAGE = 'Please enter a valid value!';
 /**
  * @hidden
  */
-
 var ComboBoxVue2 = {
   name: 'KendoComboBox',
   model: {
@@ -223,8 +218,8 @@ var ComboBoxVue2 = {
     };
   },
   mounted: function mounted() {
-    this.hasMounted = true; // @ts-ignore
-
+    this.hasMounted = true;
+    // @ts-ignore
     this.input = this.v3 ? this.inputRef.input : this.$refs.input.input;
     this.base.wrapper = getRef(this, 'kendoAnchor', this.anchor);
     this.element = getRef(this, 'kendoAnchor', this.anchor);
@@ -233,10 +228,10 @@ var ComboBoxVue2 = {
   },
   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;
@@ -245,24 +240,20 @@ var ComboBoxVue2 = {
     var scrollElement = this.$refs.scrollElement;
     var selectedItem = this.computedValue();
     this.valueOnDidUpdate = selectedItem;
-
     if (list) {
       // @ts-ignore
-      this.base.vs.list = list.list; // @ts-ignore
-
+      this.base.vs.list = list.list;
+      // @ts-ignore
       this.base.list = list.list;
     }
-
     if (scrollElement) {
       this.base.vs.scrollElement = scrollElement;
     }
-
     if (list && dataItems.length) {
       // @ts-ignore
       this.base.vs.scrollerRef(list.$el);
-    } // @ts-ignore
-
-
+    }
+    // @ts-ignore
     if (virtual && this.virtualTotalHasChanged) {
       this.base.vs.calcScrollElementHeight();
       this.base.vs.reset();
@@ -273,7 +264,6 @@ var ComboBoxVue2 = {
         return areSame(i, selectedItem, dataItemKey);
       });
       var selectedItemChanged = !areSame(prevSelectedItem, selectedItem, dataItemKey);
-
       if (opening && virtual) {
         this.base.scrollToVirtualItem(virtual, selectedItemIndex);
         this.prevCurrentOpened = true;
@@ -284,11 +274,9 @@ var ComboBoxVue2 = {
         this.base.scrollToItem(selectedItemIndex);
       }
     }
-
     if (opening && this.input) {
       this.input.focus();
     }
-
     this.prevCurrentValue = this.computedValue();
     this.setValidity();
   },
@@ -303,7 +291,6 @@ var ComboBoxVue2 = {
       if (newValue && oldValue && newValue.total !== oldValue.total) {
         this.virtualTotalHasChanged = true;
       }
-
       this.virtualHasChanged = true;
     }
   },
@@ -311,11 +298,11 @@ var ComboBoxVue2 = {
     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);
         });
@@ -342,7 +329,6 @@ var ComboBoxVue2 = {
     },
     computedValue: function computedValue() {
       var value;
-
       if (this.valueDuringOnChange !== undefined) {
         value = this.valueDuringOnChange;
       } else if (this.$props.value !== undefined) {
@@ -354,7 +340,6 @@ var ComboBoxVue2 = {
       } else if (this.$props.defaultValue !== undefined) {
         value = this.$props.defaultValue;
       }
-
       return this.valuePrimitive ? this.findByFieldValue(this.valueField, value) || value : value;
     },
     findByFieldValue: function findByFieldValue(field, value) {
@@ -379,38 +364,35 @@ var ComboBoxVue2 = {
     },
     handleItemSelect: function handleItemSelect(index, state) {
       var _a = this.$props,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b,
-          virtual = _a.virtual,
-          dataItemKey = _a.dataItemKey;
+        _b = _a.dataItems,
+        dataItems = _b === void 0 ? [] : _b,
+        virtual = _a.virtual,
+        dataItemKey = _a.dataItemKey;
       var skip = virtual ? virtual.skip : 0;
       var item = dataItems[index - skip];
       var newSelected = !areSame(item, this.computedValue(), dataItemKey);
       this.triggerOnChange(item, state);
-
       if (this.currentText !== undefined) {
         // @ts-ignore
         state.data.currentText = undefined;
       }
-
       if (newSelected) {
         this.base.triggerPageChangeCornerItems(item, state);
       }
     },
     onNavigate: function onNavigate(state, keyCode) {
       var _a = this.$props,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b,
-          _c = _a.virtual,
-          virtual = _c === void 0 ? {
-        skip: 0
-      } : _c;
+        _b = _a.dataItems,
+        dataItems = _b === void 0 ? [] : _b,
+        _c = _a.virtual,
+        virtual = _c === void 0 ? {
+          skip: 0
+        } : _c;
       var text = this.$props.filter ? this.$props.filter : this.currentText;
       var focusedIndex = this.getFocusedIndex();
       var vs = this.base.vs;
       var value = this.computedValue();
       this.suggested = '';
-
       if (focusedIndex !== -1 && !isPresent(value)) {
         this.handleItemSelect(focusedIndex, state);
       } else if (text === '') {
@@ -423,7 +405,6 @@ var ComboBoxVue2 = {
           max: (vs.enabled ? vs.total : dataItems.length) - 1,
           min: 0
         });
-
         if (newIndex !== undefined) {
           this.handleItemSelect(newIndex, state);
         }
@@ -437,19 +418,17 @@ var ComboBoxVue2 = {
     },
     applyValueOnEnter: function applyValueOnEnter(value, state) {
       var _a;
-
       var _b = this.$props,
-          _c = _b.dataItems,
-          dataItems = _c === void 0 ? [] : _c,
-          textField = _b.textField,
-          allowCustom = _b.allowCustom;
+        _c = _b.dataItems,
+        dataItems = _c === void 0 ? [] : _c,
+        textField = _b.textField,
+        allowCustom = _b.allowCustom;
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var currentValueText = getItemValue(this.computedValue(), textField);
       var valueIndex = currentValueText === value ? this.index : getItemIndexByText(dataItems, value, textField);
       var itemSelected = valueIndex !== -1;
       var newSelected = undefined;
       this.suggested = '';
-
       if (itemSelected) {
         // typed text match item from list
         newSelected = dataItems[valueIndex];
@@ -461,94 +440,77 @@ var ComboBoxVue2 = {
           return this.selectFocusedItem(value, state);
         }
       }
-
       this.triggerOnChange(newSelected, state);
-
       if (opened) {
         this.base.togglePopup(state);
       }
-
       if (this.$props.filter === undefined && this.currentText !== undefined) {
         // @ts-ignore
         state.data.currentText = undefined;
       }
-
       this.applyState(state);
     },
     applyValueOnRejectSuggestions: function applyValueOnRejectSuggestions(text, state) {
       var _a;
-
       var _b = this.$props,
-          _c = _b.dataItems,
-          dataItems = _c === void 0 ? [] : _c,
-          textField = _b.textField,
-          allowCustom = _b.allowCustom;
+        _c = _b.dataItems,
+        dataItems = _c === void 0 ? [] : _c,
+        textField = _b.textField,
+        allowCustom = _b.allowCustom;
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var valueItemText = getItemValue(this.computedValue(), textField);
       this.suggested = '';
-
       if (text === valueItemText || text === '' && !isPresent(valueItemText)) {
         if (opened) {
           this.base.togglePopup(state);
         }
-
         return this.applyState(state);
       }
-
       var valueIndex = getItemIndexByText(dataItems, text, textField, true);
       var itemSelected = valueIndex !== -1;
       var newSelected = null;
-
       if (itemSelected) {
         newSelected = dataItems[valueIndex];
       } else if (allowCustom) {
         newSelected = text ? textField ? (_a = {}, _a[textField] = text, _a) : text : null;
       }
-
       this.triggerOnChange(newSelected, state);
-
       if (this.currentText !== undefined) {
         // @ts-ignore
         state.data.currentText = undefined;
         this.base.filterChanged('', state);
       }
-
       if (opened) {
         this.base.togglePopup(state);
       }
-
       this.applyState(state);
     },
     selectFocusedItem: function selectFocusedItem(text, state) {
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var _a = this.$props,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b,
-          textField = _a.textField,
-          _c = _a.virtual,
-          virtual = _c === void 0 ? {
-        skip: 0
-      } : _c,
-          _d = _a.focusedItemIndex,
-          focusedItemIndex = _d === void 0 ? itemIndexStartsWith : _d;
+        _b = _a.dataItems,
+        dataItems = _b === void 0 ? [] : _b,
+        textField = _a.textField,
+        _c = _a.virtual,
+        virtual = _c === void 0 ? {
+          skip: 0
+        } : _c,
+        _d = _a.focusedItemIndex,
+        focusedItemIndex = _d === void 0 ? itemIndexStartsWith : _d;
       var skip = virtual.skip;
       var focusedIndex = text === '' && skip === 0 ? 0 : focusedItemIndex(dataItems, text, textField);
-
       if (focusedIndex !== -1) {
         this.handleItemSelect(focusedIndex + skip, state);
       } else {
         this.triggerOnChange(null, state);
-
         if (this.currentText !== undefined) {
           // @ts-ignore
           state.data.currentText = undefined;
         }
       }
-
       if (opened) {
         this.base.togglePopup(state);
       }
-
       return this.applyState(state);
     },
     handleItemClick: function handleItemClick(index, event) {
@@ -571,27 +533,21 @@ var ComboBoxVue2 = {
     },
     onInputKeyDown: function onInputKeyDown(event) {
       var _this = this;
-
       var keyCode = event.keyCode;
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var state = this.base.initState();
       state.event = event;
-
       if (!event.altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
         event.preventDefault();
         this.onNavigate(state, keyCode);
         this.applyState(state);
         return;
       }
-
       var togglePopup = function togglePopup() {
         event.preventDefault();
-
         _this.base.togglePopup(state);
-
         _this.applyState(state);
       };
-
       if (opened) {
         if (event.altKey && keyCode === Keys.up) {
           togglePopup();
@@ -615,39 +571,31 @@ var ComboBoxVue2 = {
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var input = event.currentTarget;
       var value = input.value;
-
       if (this.$props.suggest) {
         var selectionAtEnd = input.selectionEnd === value.length;
         var prevText = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
-
         if (!isPresent(prevText)) {
           prevText = getItemValue(this.computedValue(), this.$props.textField) || '';
         }
-
         var deletedSuggestion = prevText && prevText === value;
         var deleting = prevText && prevText.length > value.length;
-
         if (deletedSuggestion || deleting || !selectionAtEnd) {
           this.suggested = '';
         } else {
           this.suggestValue(value);
         }
       }
-
       if (this.$props.filter === undefined) {
         // @ts-ignore
         state.data.currentText = value;
       }
-
       if (this.currentFocusedItem !== undefined) {
         // @ts-ignore
         state.data.focusedItem = undefined;
       }
-
       if (!opened) {
         this.base.togglePopup(state);
       }
-
       this.base.filterChanged(value, state);
       this.applyState(state);
     },
@@ -657,36 +605,31 @@ var ComboBoxVue2 = {
       event.stopPropagation();
       this.suggested = '';
       this.base.filterChanged('', state);
-
       if (this.$props.filter === undefined && this.currentText !== undefined) {
         // @ts-ignore
         state.data.currentText = undefined;
       }
-
       this.triggerOnChange(null, state);
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
-
       if (opened) {
         this.base.togglePopup(state);
       }
-
       this.applyState(state);
     },
     getFocusedIndex: function getFocusedIndex() {
       var value = this.computedValue();
       var _a = this.$props,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b,
-          textField = _a.textField,
-          dataItemKey = _a.dataItemKey,
-          _c = _a.virtual,
-          virtual = _c === void 0 ? {
-        skip: 0
-      } : _c,
-          _d = _a.focusedItemIndex,
-          focusedItemIndex = _d === void 0 ? itemIndexStartsWith : _d;
+        _b = _a.dataItems,
+        dataItems = _b === void 0 ? [] : _b,
+        textField = _a.textField,
+        dataItemKey = _a.dataItemKey,
+        _c = _a.virtual,
+        virtual = _c === void 0 ? {
+          skip: 0
+        } : _c,
+        _d = _a.focusedItemIndex,
+        focusedItemIndex = _d === void 0 ? itemIndexStartsWith : _d;
       var text = this.$props.filter ? this.$props.filter : this.currentText;
-
       if (isPresent(value) && text === undefined) {
         return dataItems.findIndex(function (i) {
           return areSame(i, value, dataItemKey);
@@ -699,8 +642,8 @@ var ComboBoxVue2 = {
     },
     suggestValue: function suggestValue(value) {
       var _a = this.$props,
-          dataItems = _a.dataItems,
-          textField = _a.textField;
+        dataItems = _a.dataItems,
+        textField = _a.textField;
       this.suggested = _suggestValue(value, dataItems, textField);
     },
     setValidity: function setValidity() {
@@ -710,15 +653,12 @@ var ComboBoxVue2 = {
     },
     triggerOnChange: function triggerOnChange(item, state) {
       var value = this.computedValue();
-
       if (!isPresent(value) && !isPresent(item) || areSame(value, item, this.$props.dataItemKey)) {
         return;
       }
-
       if (this.$props.value === undefined) {
         this.currentValue = item;
       }
-
       this.valueDuringOnChange = item;
       state.events.push({
         type: 'change'
@@ -734,22 +674,21 @@ var ComboBoxVue2 = {
   },
   render: function render(createElement) {
     var _a;
-
     var h = gh || createElement;
     var _b = this.$props,
-        dir = _b.dir,
-        disabled = _b.disabled,
-        clearButton = _b.clearButton,
-        label = _b.label,
-        textField = _b.textField,
-        className = _b.className,
-        style = _b.style,
-        loading = _b.loading,
-        iconClassName = _b.iconClassName,
-        virtual = _b.virtual,
-        size = _b.size,
-        fillMode = _b.fillMode,
-        rounded = _b.rounded;
+      dir = _b.dir,
+      disabled = _b.disabled,
+      clearButton = _b.clearButton,
+      label = _b.label,
+      textField = _b.textField,
+      className = _b.className,
+      style = _b.style,
+      loading = _b.loading,
+      iconClassName = _b.iconClassName,
+      virtual = _b.virtual,
+      size = _b.size,
+      fillMode = _b.fillMode,
+      rounded = _b.rounded;
     var focused = this.currentFocused;
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
@@ -765,37 +704,32 @@ var ComboBoxVue2 = {
     }, this.$props.popupSettings);
     var ariaLabelExpandButton = provideLocalizationService(this).toLanguageString(expandButton, messages[expandButton]);
     vs.enabled = virtual !== undefined;
-
     if (virtual !== undefined) {
       vs.skip = virtual.skip;
       vs.total = virtual.total;
       vs.pageSize = virtual.pageSize;
     }
-
     var renderList = function renderList() {
       var _this2 = this;
-
       var _a;
-
       var _b = this.$props,
-          dataItemKey = _b.dataItemKey,
-          _c = _b.dataItems,
-          dataItems = _c === void 0 ? [] : _c;
+        dataItemKey = _b.dataItemKey,
+        _c = _b.dataItems,
+        dataItems = _c === void 0 ? [] : _c;
       var itemRender = templateRendering.call(this, this.$props.itemRender, getListeners.call(this));
       var listNoDataRender = templateRendering.call(this, this.$props.listNoDataRender, getListeners.call(this));
-
       if (!virtual) {
         virtual = {
           skip: 0
         };
       }
-
       var skip = virtual.skip;
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var translate = "translateY(".concat(vs.translate, "px)");
       var focusedIndex = opened ? this.getFocusedIndex() : undefined;
       var value = isPresent(text) && text !== selectedItemText ? null : this.computedValue();
-      return (// @ts-ignore  function children
+      return (
+        // @ts-ignore  function children
         h(List, {
           id: base.listBoxId,
           attrs: this.v3 ? undefined : {
@@ -848,19 +782,15 @@ var ComboBoxVue2 = {
         } : [renderScrollElement.call(_this2)])
       );
     };
-
     var renderScrollElement = function renderScrollElement() {
       return vs.enabled && h("div", {
         ref: 'scrollElement',
         key: 'scrollElementKey'
       });
     };
-
     var renderListContainer = function renderListContainer() {
       var _this3 = this;
-
       var _a;
-
       var headerTemplate = templateRendering.call(this, this.$props.header, getListeners.call(this));
       var footerTemplate = templateRendering.call(this, this.$props.footer, getListeners.call(this));
       var header = getTemplate.call(this, {
@@ -873,7 +803,8 @@ var ComboBoxVue2 = {
       });
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
-      return (// @ts-ignore  function children
+      return (
+        // @ts-ignore  function children
         h(ListContainer, {
           ref: 'container',
           onMousedown: function onMousedown(e) {
@@ -915,34 +846,29 @@ var ComboBoxVue2 = {
         }, [footer])])
       );
     };
-
     var renderSearchBar = function renderSearchBar(searchText, searchId) {
       var _this = this;
-
       var _a = this.$props,
-          placeholder = _a.placeholder,
-          tabIndex = _a.tabIndex,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b,
-          dataItemKey = _a.dataItemKey;
-
+        placeholder = _a.placeholder,
+        tabIndex = _a.tabIndex,
+        _b = _a.dataItems,
+        dataItems = _b === void 0 ? [] : _b,
+        dataItemKey = _a.dataItemKey;
       if (!virtual) {
         virtual = {
           skip: 0
         };
       }
-
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var value = this.computedValue();
       var selectedIndex = Math.max(0, dataItems.findIndex(function (i) {
         return areSame(i, value, dataItemKey);
       }));
-
       if (this.suggested && !areSame(this.valueOnDidUpdate, value, dataItemKey)) {
         this.suggested = '';
       }
-
-      return (// @ts-ignore  function children
+      return (
+        // @ts-ignore  function children
         h(SearchBar, {
           id: searchId,
           attrs: this.v3 ? undefined : {
@@ -986,7 +912,6 @@ var ComboBoxVue2 = {
         })
       );
     };
-
     var combobox = h("span", {
       "class": classNames('k-combobox k-input', (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-invalid'] = !isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a['k-focus'] = focused && !disabled, _a), className),
       ref: setRef(this, 'kendoAnchor', this.anchor),
@@ -997,7 +922,8 @@ var ComboBoxVue2 = {
       attrs: this.v3 ? undefined : {
         dir: dir
       }
-    }, [renderSearchBar.call(this, inputText || '', id), renderClearButton && !loading && // @ts-ignore  function children
+    }, [renderSearchBar.call(this, inputText || '', id), renderClearButton && !loading &&
+    // @ts-ignore  function children
     h(ClearButton, {
       onClearclick: this.clearButtonClick,
       on: this.v3 ? undefined : {
@@ -1007,7 +933,8 @@ var ComboBoxVue2 = {
     }), 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 : {
@@ -1061,6 +988,5 @@ var ComboBoxVue2 = {
 /**
  * @hidden
  */
-
 var ComboBox = ComboBoxVue2;
 export { ComboBox, ComboBoxVue2 };