@progress/kendo-vue-dropdowns 3.9.3 → 3.9.4-dev.202304190945

package/dist/es/MultiSelectTree/MultiSelectTree.js

@@ -0,0 +1,880 @@
+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);
+};
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { classNames, noop, getTabIndex, Keys, guid, kendoThemeMaps, Icon, getRef, setRef, validatePackage, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { Popup } from '@progress/kendo-vue-popup';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { TreeView } from '@progress/kendo-vue-treeview';
+import { packageMetadata } from './../package-metadata';
+import { getItemValue, areSame, matchTags } from '../common/utils';
+import { ListNoData } from './../DropDownTree/ListNoData';
+import { messages, nodata } from './../messages/main';
+import { FloatingLabel } from '@progress/kendo-vue-labels';
+import { TagList } from '../MultiSelect/TagList';
+import { ClearButton } from '../common/ClearButton';
+import { ListFilter } from '../common/ListFilter';
+var VALIDATION_MESSAGE = 'Please select a value from the list!';
+var sizeMap = kendoThemeMaps.sizeMap,
+  roundedMap = kendoThemeMaps.roundedMap;
+var toLevel = function toLevel(hierarchicalIndex) {
+  return hierarchicalIndex.split('_').map(function (i) {
+    return parseInt(i, 10);
+  });
+};
+var getValidity = function getValidity(parameters, hasValue) {
+  var validationMessage = parameters.validationMessage,
+    valid = parameters.valid,
+    required = parameters.required;
+  return {
+    customError: validationMessage !== undefined,
+    valid: Boolean(valid !== undefined ? valid : !required || hasValue),
+    valueMissing: !hasValue
+  };
+};
+/**
+ * @hidden
+ */
+var MultiSelectTreeVue2 = {
+  name: 'KendoMultiSelectTree',
+  // @ts-ignore
+  emits: {
+    open: null,
+    close: null,
+    focus: null,
+    blur: null,
+    change: null,
+    filterChange: null,
+    expandChange: null
+  },
+  props: {
+    opened: {
+      type: Boolean,
+      default: undefined
+    },
+    disabled: Boolean,
+    dir: String,
+    tabIndex: Number,
+    accessKey: String,
+    dataItems: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    value: Array,
+    valueMap: Function,
+    placeholder: String,
+    dataItemKey: {
+      type: String,
+      required: true
+    },
+    textField: {
+      type: String,
+      required: true
+    },
+    checkField: {
+      type: String,
+      default: 'checkField'
+    },
+    checkIndeterminateField: {
+      type: String,
+      default: 'checkIndeterminateField'
+    },
+    expandField: String,
+    subItemsField: {
+      type: String,
+      default: 'items'
+    },
+    className: String,
+    label: String,
+    validationMessage: String,
+    validityStyles: {
+      type: Boolean,
+      default: true
+    },
+    valid: {
+      type: Boolean,
+      default: true
+    },
+    required: Boolean,
+    name: String,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    filterable: Boolean,
+    filter: String,
+    loading: Boolean,
+    tags: Array,
+    popupSettings: {
+      type: Object,
+      default: function _default() {
+        return {
+          animate: true,
+          height: '200px'
+        };
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'flat', 'outline', 'solid'].includes(value);
+      }
+    },
+    item: [String, Function, Object],
+    tag: [String, Function, Object],
+    header: [String, Function, Object],
+    footer: [String, Function, Object],
+    listNoData: [String, Function, Object]
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.componentGuid = guid();
+    this.anchor = guid();
+  },
+  data: function data() {
+    return {
+      focusedTagState: undefined,
+      openState: false,
+      focusedState: false,
+      filterState: '',
+      currentValue: [],
+      popupWidth: '200px'
+    };
+  },
+  computed: {
+    isOpen: function isOpen() {
+      return this.opened !== undefined ? this.opened : this.openState;
+    },
+    computedValue: function computedValue() {
+      return this.value !== undefined ? this.value : this.currentValue;
+    },
+    hasValue: function hasValue() {
+      return !!this.computedValue.length;
+    },
+    tagsToRenderRef: function tagsToRenderRef() {
+      var _this = this;
+      return this.tags === undefined ? this.computedValue.map(function (item) {
+        return {
+          text: getItemValue(item, _this.$props.textField),
+          data: [item]
+        };
+      }) : __spreadArray([], this.tags, true);
+    }
+  },
+  mounted: function mounted() {
+    this.elementRef = getRef(this, 'kendoAnchor', this.anchor);
+    this.inputRef = getRef(this, 'input');
+    this.selectRef = getRef(this, 'select');
+    this.treeViewRef = getRef(this, 'treeView');
+    this.skipFocusRef = false;
+    this.popupRef = getRef(this, 'popup');
+    this.calculatePopupWidth();
+  },
+  updated: function updated() {
+    this.inputRef = getRef(this, 'input');
+    this.treeViewRef = getRef(this, 'treeView');
+    if (this.popupRef && this.isOpen && this.hasValue) {
+      this.popupRef.reposition();
+    }
+    this.setValidity();
+    this.calculatePopupWidth();
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+    var _a, _b;
+    var _this = this;
+    var h = gh || createElement;
+    var id = this.$props.id || this.componentGuid;
+    var _c = this.$props,
+      dataItems = _c.dataItems,
+      dataItemKey = _c.dataItemKey,
+      _d = _c.popupSettings,
+      popupSettings = _d === void 0 ? {} : _d,
+      disabled = _c.disabled,
+      placeholder = _c.placeholder,
+      label = _c.label,
+      name = _c.name,
+      checkField = _c.checkField,
+      checkIndeterminateField = _c.checkIndeterminateField,
+      subItemsField = _c.subItemsField,
+      validationMessage = _c.validationMessage,
+      valid = _c.valid,
+      value = _c.value,
+      required = _c.required,
+      validityStyles = _c.validityStyles;
+    var tabIndex = getTabIndex(this.$props.tabIndex, disabled);
+    var localization = provideLocalizationService(this);
+    var validity = getValidity({
+      validationMessage: validationMessage,
+      valid: valid,
+      required: required
+    }, this.hasValue);
+    var dir = this.$props.dir; // useRtl(elementRef,this.$props.dir);
+    var itemTemplate = templateRendering.call(this, this.item, getListeners.call(this));
+    var tagTemplate = templateRendering.call(this, this.tag, getListeners.call(this));
+    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 listNoDataRender = templateRendering.call(this, this.$props.listNoData, getListeners.call(this));
+    var noDataDefault =
+    // @ts-ignore function children
+    h(ListNoData, this.v3 ? function () {
+      return [localization.toLanguageString(nodata, messages[nodata])];
+    } : [localization.toLanguageString(nodata, messages[nodata])]);
+    var noDataTemplate = getTemplate.call(this, {
+      h: h,
+      defaultRendering: noDataDefault,
+      template: listNoDataRender
+    });
+    var isValid = !validityStyles || validity.valid;
+    var _e = this.$props,
+      size = _e.size,
+      rounded = _e.rounded,
+      fillMode = _e.fillMode;
+    var multiselecttree = h("span", {
+      ref: setRef(this, 'kendoAnchor', this.anchor),
+      "class": classNames('k-multiselect k-input', this.$props.className, (_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-focus'] = this.focusedState && !disabled, _a['k-invalid'] = !isValid, _a['k-disabled'] = disabled, _a['k-loading'] = this.$props.loading, _a['k-required'] = required, _a)),
+      tabIndex: tabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: tabIndex,
+        accessKey: this.$props.accessKey,
+        id: id,
+        dir: dir,
+        role: "combobox",
+        "aria-haspopup": "true",
+        "aria-expanded": this.isOpen,
+        "aria-disabled": disabled,
+        "aria-label": label,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        "aria-required": this.$props.required
+      },
+      accessKey: this.$props.accessKey,
+      id: id,
+      dir: dir,
+      onKeydown: this.onWrapperKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.onWrapperKeyDown,
+        "mousedown": this.onWrapperMouseDown,
+        "focus": this.onFocus,
+        "blur": this.onBlur,
+        "click": this.onWrapperClick
+      },
+      onMousedown: this.onWrapperMouseDown,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      role: "combobox",
+      "aria-haspopup": "true",
+      "aria-expanded": this.isOpen,
+      "aria-disabled": disabled,
+      "aria-label": label,
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-required": this.$props.required,
+      onClick: this.onWrapperClick
+    }, [h("div", {
+      id: 'tagslist-' + id,
+      attrs: this.v3 ? undefined : {
+        id: 'tagslist-' + id
+      },
+      "class": classNames('k-input-values k-chip-list k-selection-multiple', (_b = {}, _b["k-chip-list-".concat(sizeMap[size] || size)] = size, _b['k-readonly'] = this.hasValue, _b))
+    }, [this.tagsToRenderRef.length > 0 ? h(TagList, {
+      tagRender: tagTemplate,
+      attrs: this.v3 ? undefined : {
+        tagRender: tagTemplate,
+        dataItems: this.tagsToRenderRef,
+        guid: id,
+        focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
+          return matchTags(t, _this.focusedTagState, dataItemKey);
+        }) : undefined,
+        size: size
+      },
+      onTagdelete: this.onTagDelete,
+      on: this.v3 ? undefined : {
+        "tagdelete": this.onTagDelete
+      },
+      dataItems: this.tagsToRenderRef,
+      guid: id,
+      focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
+        return matchTags(t, _this.focusedTagState, dataItemKey);
+      }) : undefined,
+      size: size
+    }) : !this.hasValue && placeholder]), !this.hasValue && h("span", {
+      "class": "k-input-inner",
+      role: 'combobox',
+      attrs: this.v3 ? undefined : {
+        role: 'combobox',
+        tabIndex: tabIndex,
+        "aria-expanded": this.isOpen,
+        "aria-describedby": 'tagslist-' + id,
+        "aria-label": this.$props.ariaLabelledBy
+      },
+      tabIndex: tabIndex,
+      "aria-expanded": this.isOpen,
+      "aria-describedby": 'tagslist-' + id,
+      "aria-label": this.$props.ariaLabelledBy
+    }, [h("span", {
+      "class": "k-input-value-text"
+    }, ["\xA0"])]), this.$props.loading && h(Icon, {
+      "class": "k-input-loading-icon",
+      name: "loading",
+      attrs: this.v3 ? undefined : {
+        name: "loading"
+      }
+    }), this.hasValue && !disabled && h(ClearButton, {
+      onClearclick: this.onClear,
+      on: this.v3 ? undefined : {
+        "clearclick": this.onClear
+      }
+    }), /* Dummy component to support forms */h("select", {
+      name: name,
+      attrs: this.v3 ? undefined : {
+        name: name,
+        tabIndex: -1,
+        "aria-hidden": true,
+        title: label
+      },
+      ref: setRef(this, 'select'),
+      tabIndex: -1,
+      "aria-hidden": true,
+      title: 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, value) : value : null,
+      domProps: this.v3 ? undefined : {
+        "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, value) : value
+      }
+    })]),
+    // @ts-ignore function children
+    h(Popup, {
+      style: {
+        width: this.popupWidth,
+        direction: dir
+      },
+      popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-multiselecttree-popup', 'popup-' + this.componentGuid),
+      attrs: this.v3 ? undefined : {
+        popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-multiselecttree-popup', 'popup-' + this.componentGuid),
+        animate: popupSettings.animate,
+        anchor: this.anchor,
+        show: this.isOpen,
+        appendTo: popupSettings.appendTo
+      },
+      "class": classNames(popupSettings.className, {
+        'k-rtl': dir === 'rtl'
+      }),
+      animate: popupSettings.animate,
+      anchor: this.anchor,
+      show: this.isOpen,
+      onOpen: this.onPopupOpened,
+      on: this.v3 ? undefined : {
+        "open": this.onPopupOpened,
+        "close": this.onPopupClosed
+      },
+      onClose: this.onPopupClosed,
+      appendTo: popupSettings.appendTo,
+      ref: setRef(this, 'popup')
+    }, this.v3 ? function () {
+      return [_this2.$props.filterable &&
+      // @ts-ignore
+      h(ListFilter, {
+        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+        attrs: _this2.v3 ? undefined : {
+          value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+          size: size,
+          rounded: rounded,
+          fillMode: fillMode
+        },
+        ref: setRef(_this2, 'input'),
+        onChange: _this2.onFilterChange,
+        on: _this2.v3 ? undefined : {
+          "change": _this2.onFilterChange,
+          "keydown": _this2.onInputKeyDown
+        },
+        onKeydown: _this2.onInputKeyDown,
+        size: size,
+        rounded: rounded,
+        fillMode: fillMode
+      }), header && h("div", {
+        "class": "k-list-header"
+      }, [header]), dataItems.length > 0 ?
+      // @ts-ignore
+      h(TreeView, {
+        ref: setRef(_this2, 'treeView'),
+        tabIndex: tabIndex,
+        attrs: _this2.v3 ? undefined : {
+          tabIndex: tabIndex,
+          dataItems: dataItems,
+          focusIdField: dataItemKey,
+          textField: _this2.$props.textField,
+          checkField: checkField,
+          checkIndeterminateField: checkIndeterminateField,
+          expandField: _this2.$props.expandField,
+          childrenField: subItemsField,
+          expandIcons: true,
+          checkboxes: true,
+          size: size,
+          item: itemTemplate
+        },
+        dataItems: dataItems,
+        focusIdField: dataItemKey,
+        textField: _this2.$props.textField,
+        checkField: checkField,
+        checkIndeterminateField: checkIndeterminateField,
+        expandField: _this2.$props.expandField,
+        childrenField: subItemsField,
+        expandIcons: true,
+        onItemclick: _this2.onChange,
+        on: _this2.v3 ? undefined : {
+          "itemclick": _this2.onChange,
+          "checkchange": _this2.onChange,
+          "expandchange": _this2.onExpand,
+          "blur": _this2.onBlur,
+          "keydown": _this2.onWrapperKeyDown
+        },
+        onCheckchange: _this2.onChange,
+        onExpandchange: _this2.onExpand,
+        onBlur: _this2.onBlur,
+        onKeydown: _this2.onWrapperKeyDown,
+        checkboxes: true,
+        size: size,
+        item: itemTemplate
+      }) : noDataTemplate, footer && h("div", {
+        "class": "k-list-footer"
+      }, [footer])];
+    } : [_this2.$props.filterable && h(ListFilter, {
+      value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+      attrs: _this2.v3 ? undefined : {
+        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+        size: size,
+        rounded: rounded,
+        fillMode: fillMode
+      },
+      ref: setRef(_this2, 'input'),
+      onChange: _this2.onFilterChange,
+      on: _this2.v3 ? undefined : {
+        "change": _this2.onFilterChange,
+        "keydown": _this2.onInputKeyDown
+      },
+      onKeydown: _this2.onInputKeyDown,
+      size: size,
+      rounded: rounded,
+      fillMode: fillMode
+    }), header && h("div", {
+      "class": "k-list-header"
+    }, [header]), dataItems.length > 0 ? h(TreeView, {
+      ref: setRef(_this2, 'treeView'),
+      tabIndex: tabIndex,
+      attrs: _this2.v3 ? undefined : {
+        tabIndex: tabIndex,
+        dataItems: dataItems,
+        focusIdField: dataItemKey,
+        textField: _this2.$props.textField,
+        checkField: checkField,
+        checkIndeterminateField: checkIndeterminateField,
+        expandField: _this2.$props.expandField,
+        childrenField: subItemsField,
+        expandIcons: true,
+        checkboxes: true,
+        size: size,
+        item: itemTemplate
+      },
+      dataItems: dataItems,
+      focusIdField: dataItemKey,
+      textField: _this2.$props.textField,
+      checkField: checkField,
+      checkIndeterminateField: checkIndeterminateField,
+      expandField: _this2.$props.expandField,
+      childrenField: subItemsField,
+      expandIcons: true,
+      onItemclick: _this2.onChange,
+      on: _this2.v3 ? undefined : {
+        "itemclick": _this2.onChange,
+        "checkchange": _this2.onChange,
+        "expandchange": _this2.onExpand,
+        "blur": _this2.onBlur,
+        "keydown": _this2.onWrapperKeyDown
+      },
+      onCheckchange: _this2.onChange,
+      onExpandchange: _this2.onExpand,
+      onBlur: _this2.onBlur,
+      onKeydown: _this2.onWrapperKeyDown,
+      checkboxes: true,
+      size: size,
+      item: itemTemplate
+    }) : noDataTemplate, footer && h("div", {
+      "class": "k-list-footer"
+    }, [footer])])]);
+    return label ?
+    // @ts-ignore function children
+    h(FloatingLabel, {
+      label: label,
+      attrs: this.v3 ? undefined : {
+        label: label,
+        editorValue: this.hasValue,
+        editorPlaceholder: placeholder,
+        editorValid: isValid,
+        editorDisabled: disabled,
+        editorId: id,
+        dir: dir
+      },
+      editorValue: this.hasValue,
+      editorPlaceholder: placeholder,
+      editorValid: isValid,
+      editorDisabled: disabled,
+      editorId: id,
+      dir: dir
+    }, this.v3 ? function () {
+      return [multiselecttree];
+    } : [multiselecttree]) : multiselecttree;
+  },
+  methods: {
+    calculatePopupWidth: function calculatePopupWidth() {
+      if (this.elementRef) {
+        this.popupWidth = this.popupSettings.width !== undefined ? this.popupSettings.width : this.elementRef.offsetWidth + 'px';
+      }
+    },
+    focus: function focus() {
+      if (this.$el) {
+        this.$el.focus();
+      }
+    },
+    setValidity: function setValidity() {
+      if (this.selectRef && this.selectRef.setCustomValidity) {
+        var _a = this.$props,
+          validationMessage = _a.validationMessage,
+          valid = _a.valid,
+          required = _a.required;
+        var validity = getValidity({
+          validationMessage: validationMessage,
+          valid: valid,
+          required: required
+        }, this.hasValue);
+        this.selectRef.setCustomValidity(validity.valid ? '' : this.validationMessage === undefined ? VALIDATION_MESSAGE : this.validationMessage);
+      }
+    },
+    changeValue: function changeValue(event, relatedItems, operation) {
+      var changeEvent = __assign({
+        items: relatedItems,
+        operation: operation
+      }, event);
+      this.$emit('change', changeEvent);
+    },
+    onChange: function onChange(e) {
+      if (areSame(e.item, this.computedValue, this.dataItemKey)) {
+        return;
+      }
+      var item = e.item,
+        event = e.event;
+      var ev = {
+        event: event,
+        target: this
+      };
+      this.changeValue(ev, [item], 'toggle');
+    },
+    openPopup: function openPopup(event) {
+      if (!this.isOpen) {
+        var openEvent = __assign({}, event);
+        this.$emit('open', openEvent);
+        if (this.opened === undefined) {
+          this.openState = true;
+        }
+      }
+    },
+    closePopup: function closePopup(event) {
+      if (this.isOpen) {
+        var closeEvent = __assign({}, event);
+        this.$emit('close', closeEvent);
+        if (this.opened === undefined) {
+          this.openState = false;
+        }
+      }
+    },
+    switchFocus: function switchFocus(focusFn) {
+      var _this = this;
+      this.skipFocusRef = true;
+      focusFn();
+      window.setTimeout(function () {
+        return _this.skipFocusRef = false;
+      }, 0);
+    },
+    focusElement: function focusElement(element) {
+      if (element) {
+        this.switchFocus(function () {
+          return element.focus();
+        });
+      }
+    },
+    onPopupOpened: function onPopupOpened() {
+      if (!this.focusedState && this.isOpen) {
+        this.closePopup({
+          target: this
+        });
+      } else {
+        if (this.$props.filterable) {
+          var inputElement = this.inputRef && this.inputRef.input;
+          this.focusElement(inputElement);
+        } else {
+          this.focusElement(this.treeViewRef && this.treeViewRef.input);
+        }
+      }
+    },
+    onPopupClosed: function onPopupClosed() {
+      if (this.focusedState) {
+        // Move the focus from treeview to dropdown without triggering Focus or Blur events.
+        this.focusElement(this.$el);
+      }
+    },
+    onFocus: function onFocus(event) {
+      if (!this.focusedState && !this.skipFocusRef) {
+        this.focusedState = true;
+        var focusEvent = {
+          event: event,
+          target: this
+        };
+        this.$emit('focus', focusEvent);
+      }
+    },
+    onBlur: function onBlur(event) {
+      if (this.focusedState && !this.skipFocusRef) {
+        this.focusedState = false;
+        var ev = {
+          event: event,
+          target: this
+        };
+        var focusEvent = __assign({}, ev);
+        if (!event.relatedTarget || !event.relatedTarget.closest('.popup-' + this.componentGuid)) {
+          this.$emit('blur', focusEvent);
+          this.closePopup(ev);
+        }
+      }
+    },
+    onWrapperMouseDown: function onWrapperMouseDown() {
+      if (this.focusedState) {
+        // moving focus from treeview to dropdown triggers Focus and Blur events.
+        this.switchFocus(noop);
+      }
+    },
+    onWrapperClick: function onWrapperClick(event) {
+      if (!this.$props.disabled && !event.defaultPrevented) {
+        this.focusedState = true;
+        var ev = {
+          event: event,
+          target: this
+        };
+        if (!this.isOpen) {
+          this.openPopup(ev);
+        }
+      }
+    },
+    onWrapperKeyDown: function onWrapperKeyDown(event) {
+      var _this = this;
+      var keyCode = event.keyCode,
+        altKey = event.altKey;
+      var treeviewElement = this.treeViewRef && this.treeViewRef.$el;
+      var inputElement = this.inputRef && this.inputRef.input;
+      if (this.$props.disabled || event.defaultPrevented && inputElement === event.target) {
+        return;
+      }
+      var ev = {
+        event: event,
+        target: this
+      };
+      if (this.value && this.value.length > 0 && (keyCode === Keys.left || keyCode === Keys.right || keyCode === Keys.home || keyCode === Keys.end || keyCode === Keys.delete)) {
+        var tagsToRender = this.tagsToRenderRef;
+        var focusedIndex = this.focusedTagState ? tagsToRender.findIndex(function (t) {
+          return matchTags(t, _this.focusedTagState, _this.dataItemKey);
+        }) : -1;
+        var newFocusedTag = undefined;
+        var hasFocused = focusedIndex !== -1;
+        if (keyCode === Keys.left) {
+          if (hasFocused) {
+            focusedIndex = Math.max(0, focusedIndex - 1);
+          } else {
+            focusedIndex = tagsToRender.length - 1;
+          }
+          newFocusedTag = tagsToRender[focusedIndex];
+        } else if (keyCode === Keys.right) {
+          if (focusedIndex === tagsToRender.length - 1) {
+            newFocusedTag = undefined;
+          } else if (hasFocused) {
+            focusedIndex = Math.min(tagsToRender.length - 1, focusedIndex + 1);
+            newFocusedTag = tagsToRender[focusedIndex];
+          }
+        } else if (keyCode === Keys.home) {
+          newFocusedTag = tagsToRender[0];
+        } else if (keyCode === Keys.end) {
+          newFocusedTag = tagsToRender[tagsToRender.length - 1];
+        } else if (keyCode === Keys.delete) {
+          if (hasFocused) {
+            this.changeValue(ev, tagsToRender[focusedIndex].data, 'delete');
+          }
+        }
+        if (newFocusedTag !== this.focusedTagState) {
+          this.focusedTagState = newFocusedTag;
+        }
+      }
+      if (this.isOpen) {
+        if (keyCode === Keys.esc || altKey && keyCode === Keys.up) {
+          event.preventDefault();
+          this.closePopup(ev);
+        } else if (treeviewElement && treeviewElement.querySelector('.k-focus') && (keyCode === Keys.up || keyCode === Keys.down || keyCode === Keys.left || keyCode === Keys.right || keyCode === Keys.home || keyCode === Keys.end)) {
+          if (keyCode === Keys.up) {
+            var items = Array.from(treeviewElement.querySelectorAll('.k-treeview-item'));
+            var focusedItem = __spreadArray([], items, true).reverse().find(function (i) {
+              return Boolean(i && i.querySelector('.k-focus'));
+            });
+            if (focusedItem && items.indexOf(focusedItem) === 0) {
+              return this.switchFocus(function () {
+                _this.focusElement(inputElement || _this.elementRef);
+              });
+            }
+          }
+          this.switchFocus(noop);
+        } else if (keyCode === Keys.down) {
+          this.switchFocus(function () {
+            _this.focusElement(inputElement || treeviewElement);
+          });
+        }
+      } else {
+        if (altKey && keyCode === Keys.down) {
+          event.preventDefault();
+          this.openPopup(ev);
+        }
+      }
+    },
+    onInputKeyDown: function onInputKeyDown(event) {
+      var _this = this;
+      var keyCode = event.keyCode,
+        altKey = event.altKey;
+      if (altKey || keyCode !== Keys.up && keyCode !== Keys.down) {
+        return;
+      }
+      event.preventDefault();
+      this.switchFocus(keyCode === Keys.up ? function () {
+        _this.focusElement(_this.$el);
+      } : function () {
+        _this.focusElement(_this.treeViewRef && _this.treeViewRef.$el);
+      });
+    },
+    onClear: function onClear(event) {
+      var ev = {
+        event: event,
+        target: this
+      };
+      this.changeValue(ev, [], 'clear');
+      this.closePopup(ev);
+      event.preventDefault();
+    },
+    onTagDelete: function onTagDelete(itemsToRemove, event) {
+      this.closePopup({
+        target: this
+      });
+      if (!this.focusedState) {
+        var inputElement = this.inputRef && this.inputRef.input;
+        this.focusElement(inputElement);
+      }
+      this.changeValue({
+        event: event,
+        target: this
+      }, itemsToRemove, 'delete');
+    },
+    onExpand: function onExpand(e) {
+      var item = e.item,
+        itemHierarchicalIndex = e.itemHierarchicalIndex,
+        event = e.event;
+      var expandEvent = {
+        level: toLevel(itemHierarchicalIndex),
+        item: item,
+        event: event,
+        target: this
+      };
+      this.$emit('expandchange', expandEvent);
+    },
+    onFilterChange: function onFilterChange(event) {
+      var filterDesc = {
+        field: this.$props.textField,
+        operator: 'contains',
+        value: event.target.value
+      };
+      var ev = {
+        filter: filterDesc,
+        event: event,
+        target: this
+      };
+      this.$emit('filterchange', ev);
+      if (this.$props.filter === undefined) {
+        this.filterState = event.target.value;
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+var MultiSelectTree = MultiSelectTreeVue2;
+export { MultiSelectTree, MultiSelectTreeVue2 };