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

package/dist/esm/MultiSelectTree/MultiSelectTree.js

@@ -1,1220 +0,0 @@
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) {
-        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-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, canUseDOM } 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.js';
-import { getItemValue, areSame, matchTags } from '../common/utils.js';
-import { ListNoData } from './../DropDownTree/ListNoData.js';
-import { messages, nodata, adaptiveModeFooterApply, adaptiveModeFooterCancel } from './../messages/main.js';
-import { FloatingLabel } from '@progress/kendo-vue-labels';
-import { Button as KButton } from '@progress/kendo-vue-buttons';
-import { TagList } from '../MultiSelect/TagList.js';
-import { ClearButton } from '../common/ClearButton.js';
-import { ListFilter } from '../common/ListFilter.js';
-import { getMultiSelectTreeValue } from './utils.js';
-import { MOBILE_SMALL_DEVICE, MOBILE_MEDIUM_DEVICE } from '../common/constants.js';
-import { ActionSheet } from '@progress/kendo-vue-layout';
-import { xIcon } from '@progress/kendo-svg-icons';
-import DropDownBase from '../common/DropDownBase.js';
-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',
-  model: {
-    event: 'changemodel'
-  },
-  // @ts-ignore
-  emits: {
-    open: null,
-    close: null,
-    focus: null,
-    blur: null,
-    change: null,
-    filterchange: null,
-    expandchange: null,
-    'changemodel': null,
-    'update:modelValue': null
-  },
-  props: {
-    opened: {
-      type: Boolean,
-      default: undefined
-    },
-    disabled: Boolean,
-    dir: String,
-    tabIndex: Number,
-    accessKey: String,
-    dataItems: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
-    },
-    value: Array,
-    modelValue: 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: undefined
-    },
-    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',
-          anchor: ''
-        };
-      }
-    },
-    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],
-    adaptive: {
-      type: Boolean,
-      default: undefined
-    },
-    adaptiveTitle: {
-      type: String,
-      default: undefined
-    }
-  },
-  inject: {
-    kendoLocalizationService: {
-      default: null
-    }
-  },
-  created: function created() {
-    this.observer = null;
-    validatePackage(packageMetadata);
-    this.base = new DropDownBase(this);
-    this.componentGuid = guid();
-    this.anchor = guid();
-  },
-  data: function data() {
-    return {
-      focusedTagState: undefined,
-      openState: false,
-      focusedState: false,
-      filterState: '',
-      currentValue: [],
-      popupWidth: '200px',
-      windowWidth: 0,
-      initialAdaptiveRenderingValues: undefined
-    };
-  },
-  computed: {
-    animationStyles: {
-      get: function get() {
-        return this.windowWidth <= MOBILE_SMALL_DEVICE ? {
-          top: 0,
-          width: '100%',
-          height: '100%'
-        } : undefined;
-      }
-    },
-    classNameAdaptive: {
-      get: function get() {
-        return this.windowWidth <= MOBILE_SMALL_DEVICE ? 'k-adaptive-actionsheet k-actionsheet-fullscreen' : 'k-adaptive-actionsheet k-actionsheet-bottom';
-      }
-    },
-    adaptiveState: {
-      get: function get() {
-        return this.windowWidth <= MOBILE_MEDIUM_DEVICE && this.$props.adaptive;
-      }
-    },
-    isOpen: function isOpen() {
-      return this.opened !== undefined ? this.opened : this.openState;
-    },
-    computedValue: function computedValue() {
-      return this.value !== undefined ? this.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
-    },
-    hasValue: function hasValue() {
-      return !!this.computedValue.length;
-    },
-    tagsToRenderRef: function tagsToRenderRef() {
-      var _this = this;
-      if (this.initialAdaptiveRenderingValues === undefined) {
-        return this.tags === undefined ? this.computedValue.map(function (item) {
-          return {
-            text: getItemValue(item, _this.$props.textField),
-            data: [item]
-          };
-        }) : __spreadArray([], this.tags, true);
-      } else {
-        var valuesBeforeAdaptiveRendering = this.initialAdaptiveRenderingValues;
-        return valuesBeforeAdaptiveRendering.length > 0 && valuesBeforeAdaptiveRendering.map(function (item) {
-          return {
-            text: getItemValue(item, _this.$props.textField),
-            data: [item]
-          };
-        });
-      }
-    }
-  },
-  watch: {
-    // This watch gets the state of the data when the adaptive mode is activated
-    isOpen: function isOpen(newValue) {
-      if (newValue && this.value) {
-        this.initialAdaptiveRenderingValues = __spreadArray([], this.value, true);
-      } else {
-        this.initialAdaptiveRenderingValues = undefined;
-      }
-    }
-  },
-  mounted: function mounted() {
-    this.observer = canUseDOM && new ResizeObserver(this.calculateMedia);
-    if ((document === null || document === void 0 ? void 0 : document.body) && this.observer) {
-      this.observer.observe(document.body);
-    }
-    this.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();
-  },
-  destroyed: !!isV3 ? undefined : function () {
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  },
-  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 _this = this;
-    var h = gh || createElement;
-    var id = this.$props.id || this.componentGuid;
-    var _a = this.$props,
-      dataItems = _a.dataItems,
-      dataItemKey = _a.dataItemKey,
-      _b = _a.popupSettings,
-      popupSettings = _b === void 0 ? {} : _b,
-      disabled = _a.disabled,
-      placeholder = _a.placeholder,
-      label = _a.label,
-      name = _a.name,
-      checkField = _a.checkField,
-      checkIndeterminateField = _a.checkIndeterminateField,
-      subItemsField = _a.subItemsField,
-      validationMessage = _a.validationMessage,
-      valid = _a.valid,
-      value = _a.value,
-      required = _a.required,
-      validityStyles = _a.validityStyles,
-      adaptiveTitle = _a.adaptiveTitle;
-    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 renderAdaptive = this.adaptiveState;
-    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 _c = this.$props,
-      size = _c.size,
-      rounded = _c.rounded,
-      fillMode = _c.fillMode;
-    var adaptiveActionSheetHeaderTemplateDef = function adaptiveActionSheetHeaderTemplateDef() {
-      return [h("div", {
-        "class": "k-actionsheet-titlebar-group k-hbox"
-      }, [h("div", {
-        "class": "k-actionsheet-title"
-      }, [h("div", {
-        "class": "k-text-center"
-      }, [adaptiveTitle]), h("div", {
-        "class": "k-actionsheet-subtitle k-text-center"
-      }, [placeholder])]), h("div", {
-        "class": "k-actionsheet-actions"
-      }, [h(KButton, {
-        tabindex: 5,
-        attrs: this.v3 ? undefined : {
-          tabindex: 5,
-          "aria-label": "Cancel",
-          "aria-disabled": "false",
-          type: "button",
-          fillMode: "flat",
-          icon: "x",
-          svgIcon: xIcon
-        },
-        "aria-label": "Cancel",
-        "aria-disabled": "false",
-        type: "button",
-        fillMode: "flat",
-        onClick: _this.onCancel,
-        on: this.v3 ? undefined : {
-          "click": _this.onCancel
-        },
-        icon: "x",
-        svgIcon: xIcon
-      })])]), h("div", {
-        "class": "k-actionsheet-titlebar-group k-actionsheet-filter"
-      }, [_this.$props.filterable &&
-      // @ts-ignore
-      h(ListFilter, {
-        value: _this.$props.filter === undefined ? _this.filterState : _this.$props.filter,
-        attrs: this.v3 ? undefined : {
-          value: _this.$props.filter === undefined ? _this.filterState : _this.$props.filter,
-          size: size,
-          rounded: rounded,
-          fillMode: fillMode
-        },
-        ref: setRef(_this, 'input'),
-        onChange: _this.onFilterChange,
-        on: this.v3 ? undefined : {
-          "change": _this.onFilterChange,
-          "keydown": _this.onInputKeyDown,
-          "focus": _this.onFocus,
-          "blur": _this.onBlur
-        },
-        onKeydown: _this.onInputKeyDown,
-        size: size,
-        rounded: rounded,
-        fillMode: fillMode,
-        onFocus: _this.onFocus,
-        onBlur: _this.onBlur
-      })])];
-    };
-    var adaptiveActionSheetHeaderTemplate = templateRendering.call(this, adaptiveActionSheetHeaderTemplateDef, getListeners.call(this));
-    var adaptiveActionSheetFooterTemplateDef = function adaptiveActionSheetFooterTemplateDef() {
-      var cancelText = localization.toLanguageString(adaptiveModeFooterCancel, messages[adaptiveModeFooterCancel]);
-      var applyText = localization.toLanguageString(adaptiveModeFooterApply, messages[adaptiveModeFooterApply]);
-      return [h(KButton, {
-        size: "large",
-        attrs: this.v3 ? undefined : {
-          size: "large",
-          "aria-label": cancelText,
-          "aria-disabled": "false",
-          type: "button"
-        },
-        "aria-label": cancelText,
-        "aria-disabled": "false",
-        type: "button",
-        onClick: _this.onCancel,
-        on: this.v3 ? undefined : {
-          "click": _this.onCancel
-        }
-      }, [cancelText]), h(KButton, {
-        themeColor: "primary",
-        attrs: this.v3 ? undefined : {
-          themeColor: "primary",
-          size: "large",
-          "aria-label": applyText,
-          "aria-disabled": "false",
-          type: "button"
-        },
-        size: "large",
-        "aria-label": applyText,
-        "aria-disabled": "false",
-        type: "button",
-        onClick: _this.closePopup,
-        on: this.v3 ? undefined : {
-          "click": _this.closePopup
-        }
-      }, [applyText])];
-    };
-    var adaptiveActionSheetFooterTemplate = templateRendering.call(this, adaptiveActionSheetFooterTemplateDef, getListeners.call(this));
-    var adaptiveActionSheetContentTemplateDef = function adaptiveActionSheetContentTemplateDef() {
-      var headerToRender = _this.base.getTemplateDef.call(_this, header, h);
-      var footerToRender = _this.base.getTemplateDef.call(_this, footer, h);
-      return [headerToRender && h("div", {
-        "class": "k-list-header"
-      }, [headerToRender]), dataItems.length > 0 ?
-      // @ts-ignore
-      h(TreeView, {
-        ref: setRef(_this, 'treeView'),
-        tabIndex: tabIndex,
-        attrs: this.v3 ? undefined : {
-          tabIndex: tabIndex,
-          dataItems: dataItems,
-          focusIdField: dataItemKey,
-          textField: _this.$props.textField,
-          checkField: checkField,
-          checkIndeterminateField: checkIndeterminateField,
-          expandField: _this.$props.expandField,
-          childrenField: subItemsField,
-          expandIcons: true,
-          checkboxes: true,
-          size: 'large',
-          item: itemTemplate
-        },
-        dataItems: dataItems,
-        focusIdField: dataItemKey,
-        textField: _this.$props.textField,
-        checkField: checkField,
-        checkIndeterminateField: checkIndeterminateField,
-        expandField: _this.$props.expandField,
-        childrenField: subItemsField,
-        expandIcons: true,
-        onItemclick: _this.onChange,
-        on: this.v3 ? undefined : {
-          "itemclick": _this.onChange,
-          "checkchange": _this.onChange,
-          "expandchange": _this.onExpand,
-          "focus": _this.onFocus,
-          "blur": _this.onBlur,
-          "keydown": _this.onWrapperKeyDown
-        },
-        onCheckchange: _this.onChange,
-        onExpandchange: _this.onExpand,
-        onFocus: _this.onFocus,
-        onBlur: _this.onBlur,
-        onKeydown: _this.onWrapperKeyDown,
-        checkboxes: true,
-        size: 'large',
-        item: itemTemplate
-      }) : noDataTemplate, footerToRender && h("div", {
-        className: "k-list-footer",
-        attrs: this.v3 ? undefined : {
-          className: "k-list-footer"
-        }
-      }, [footerToRender])];
-    };
-    var adaptiveActionSheetContentTemplate = templateRendering.call(this, adaptiveActionSheetContentTemplateDef, getListeners.call(this));
-    var renderAdaptiveListContainer = function renderAdaptiveListContainer() {
-      return h(ActionSheet, {
-        expand: this.isOpen,
-        attrs: this.v3 ? undefined : {
-          expand: this.isOpen,
-          animation: true,
-          animationStyles: this.animationStyles,
-          className: this.classNameAdaptive,
-          footerClassName: 'k-actions k-actions-stretched',
-          contentClassName: '!k-overflow-hidden',
-          header: adaptiveActionSheetHeaderTemplate,
-          content: adaptiveActionSheetContentTemplate,
-          footer: adaptiveActionSheetFooterTemplate,
-          navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
-        },
-        animation: true,
-        animationStyles: this.animationStyles,
-        className: this.classNameAdaptive,
-        footerClassName: 'k-actions k-actions-stretched',
-        contentClassName: '!k-overflow-hidden',
-        header: adaptiveActionSheetHeaderTemplate,
-        content: adaptiveActionSheetContentTemplate,
-        footer: adaptiveActionSheetFooterTemplate,
-        onClose: this.onCancel,
-        on: this.v3 ? undefined : {
-          "close": this.onCancel
-        },
-        navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
-      });
-    };
-    var component = function component() {
-      var _this2 = this;
-      var _a, _b;
-      var _this = this;
-      return h("span", {
-        ref: setRef(this, 'kendoAnchor', this.anchor),
-        "class": classNames('k-multiselecttree 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": "tree",
-          "aria-expanded": this.isOpen,
-          "aria-disabled": disabled,
-          "aria-label": label,
-          "aria-labelledby": this.$props.ariaLabelledBy,
-          "aria-describedby": this.$props.ariaLabelledBy ? this.$props.ariaLabelledBy : 'tagslist-' + id,
-          "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,
-          "focusin": this.onFocus,
-          "focusout": this.onBlur,
-          "click": this.onWrapperClick
-        },
-        onMousedown: this.onWrapperMouseDown,
-        onFocusin: this.onFocus,
-        onFocusout: this.onBlur,
-        role: "combobox",
-        "aria-haspopup": "tree",
-        "aria-expanded": this.isOpen,
-        "aria-disabled": disabled,
-        "aria-label": label,
-        "aria-labelledby": this.$props.ariaLabelledBy,
-        "aria-describedby": this.$props.ariaLabelledBy ? this.$props.ariaLabelledBy : 'tagslist-' + id,
-        "aria-required": this.$props.required,
-        onClick: this.onWrapperClick
-      }, [this.tagsToRenderRef.length > 0 && h(TagList, {
-        id: 'tagslist-' + id,
-        attrs: this.v3 ? undefined : {
-          id: 'tagslist-' + id,
-          tagRender: tagTemplate,
-          dataItems: this.tagsToRenderRef,
-          guid: id,
-          focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
-            return _this.focusedTagState && matchTags(t, _this.focusedTagState, dataItemKey);
-          }) : undefined,
-          tagsRounded: rounded,
-          size: size,
-          fillMode: fillMode
-        },
-        "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)),
-        tagRender: tagTemplate,
-        onTagdelete: this.onTagDelete,
-        on: this.v3 ? undefined : {
-          "tagdelete": this.onTagDelete
-        },
-        dataItems: this.tagsToRenderRef,
-        guid: id,
-        focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
-          return _this.focusedTagState && matchTags(t, _this.focusedTagState, dataItemKey);
-        }) : undefined,
-        tagsRounded: rounded,
-        size: size,
-        fillMode: fillMode
-      }), 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
-      }, [this.tagsToRenderRef.length === 0 && h("span", {
-        "class": "k-input-value-text"
-      }, [placeholder])]), 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,
-          required: required,
-          title: label
-        },
-        ref: setRef(this, 'select'),
-        tabIndex: -1,
-        "aria-hidden": true,
-        required: required,
-        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
-        }
-      })]), !renderAdaptive &&
-      // @ts-ignore function children
-      h(Popup, {
-        style: {
-          width: this.popupWidth,
-          direction: dir
-        },
-        popupClass: classNames(popupSettings.popupClass, 'k-multiselecttree-popup', 'popup-' + this.componentGuid),
-        attrs: this.v3 ? undefined : {
-          popupClass: classNames(popupSettings.popupClass, '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,
-            "focus": _this2.onFocus,
-            "blur": _this2.onBlur
-          },
-          onKeydown: _this2.onInputKeyDown,
-          size: size,
-          rounded: rounded,
-          fillMode: fillMode,
-          onFocus: _this2.onFocus,
-          onBlur: _this2.onBlur
-        }), 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,
-            "focus": _this2.onFocus,
-            "blur": _this2.onBlur,
-            "keydown": _this2.onWrapperKeyDown
-          },
-          onCheckchange: _this2.onChange,
-          onExpandchange: _this2.onExpand,
-          onFocus: _this2.onFocus,
-          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,
-          "focus": _this2.onFocus,
-          "blur": _this2.onBlur
-        },
-        onKeydown: _this2.onInputKeyDown,
-        size: size,
-        rounded: rounded,
-        fillMode: fillMode,
-        onFocus: _this2.onFocus,
-        onBlur: _this2.onBlur
-      }), 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,
-          "focus": _this2.onFocus,
-          "blur": _this2.onBlur,
-          "keydown": _this2.onWrapperKeyDown
-        },
-        onCheckchange: _this2.onChange,
-        onExpandchange: _this2.onExpand,
-        onFocus: _this2.onFocus,
-        onBlur: _this2.onBlur,
-        onKeydown: _this2.onWrapperKeyDown,
-        checkboxes: true,
-        size: size,
-        item: itemTemplate
-      }) : noDataTemplate, footer && h("div", {
-        "class": "k-list-footer"
-      }, [footer])])]);
-    };
-    // The following one combines the default rendering of the MultiSelect and the Adaptive rendering.
-    // This is needed because of Vue 2 specifics
-    var multiselecttree = [isV3 ? h(component.call(this), __assign({}, this.$attrs)) : component.call(this), renderAdaptive && renderAdaptiveListContainer.call(this)];
-    var multiselecttreeToRender = isV3 ? multiselecttree : this.$props.adaptive ? h("span", [multiselecttree]) : component.call(this);
-    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 [multiselecttreeToRender];
-    } : [multiselecttreeToRender]) : multiselecttreeToRender;
-  },
-  methods: {
-    clearFilter: function clearFilter(event) {
-      this.onFilterChange(event, '');
-    },
-    onCancel: function onCancel(event) {
-      var dropdownEvent = {
-        event: event,
-        target: this
-      };
-      var changeEvent = __assign({
-        items: [],
-        operation: 'toggle',
-        value: this.initialAdaptiveRenderingValues
-      }, dropdownEvent);
-      this.$emit('change', changeEvent);
-      this.closePopup(event);
-    },
-    calculateMedia: function calculateMedia(entries) {
-      for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-        var entry = entries_1[_i];
-        this.windowWidth = entry.target.clientWidth;
-      }
-    },
-    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, items, operation) {
-      var fields = {
-        dataItemKey: this.dataItemKey,
-        checkField: this.checkField,
-        checkIndeterminateField: this.checkIndeterminateField,
-        expandField: this.expandField,
-        subItemsField: this.subItemsField
-      };
-      var value = getMultiSelectTreeValue(this.dataItems, __assign(__assign({}, fields), {
-        items: items,
-        operation: operation,
-        value: this.computedValue
-      }));
-      var changeEvent = __assign({
-        items: items,
-        operation: operation,
-        value: value
-      }, event);
-      this.$emit('changemodel', value);
-      this.$emit('update:modelValue', value);
-      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.$props.filterable) {
-        this.clearFilter(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.elementRef);
-      }
-    },
-    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.adaptiveState) {
-        this.focusedTagState = undefined;
-        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.computedValue && this.computedValue.length > 0 && (keyCode === Keys.left || keyCode === Keys.right || keyCode === Keys.home || keyCode === Keys.end || keyCode === Keys.delete || keyCode === Keys.backspace)) {
-        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 (hasFocused) {
-            focusedIndex = Math.min(tagsToRender.length - 1, focusedIndex + 1);
-            newFocusedTag = tagsToRender[focusedIndex];
-          } else {
-            newFocusedTag = tagsToRender[0];
-          }
-        } else if (keyCode === Keys.home) {
-          newFocusedTag = tagsToRender[0];
-        } else if (keyCode === Keys.end) {
-          newFocusedTag = tagsToRender[tagsToRender.length - 1];
-        } else if (keyCode === Keys.delete || keyCode === Keys.backspace) {
-          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.switchFocus(function () {
-            _this.focusElement(_this.elementRef);
-          });
-          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 (keyCode === Keys.esc || altKey && keyCode === Keys.up) {
-        event.preventDefault();
-        this.switchFocus(function () {
-          _this.focusElement(_this.elementRef);
-        });
-        if (keyCode === Keys.esc && this.adaptiveState) {
-          this.onCancel(event);
-        } else {
-          this.closePopup(event);
-        }
-      }
-      if (altKey || keyCode !== Keys.up && keyCode !== Keys.down) {
-        return;
-      }
-      event.preventDefault();
-      this.switchFocus(keyCode === Keys.up ? function () {
-        _this.focusElement(_this.elementRef);
-      } : 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);
-      this.filterState = '';
-      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, emptyValue) {
-      var newValue = emptyValue ? '' : event.target.value;
-      var filterDesc = {
-        field: this.$props.textField,
-        operator: 'contains',
-        value: newValue
-      };
-      var ev = {
-        filter: filterDesc,
-        event: event,
-        target: this
-      };
-      this.$emit('filterchange', ev);
-      if (this.$props.filter === undefined) {
-        this.filterState = newValue;
-      }
-    }
-  }
-};
-/**
- * @hidden
- */
-var MultiSelectTree = MultiSelectTreeVue2;
-export { MultiSelectTree, MultiSelectTreeVue2 };