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

package/dist/es/DropDownTree/DropDownTree.js

@@ -1,1090 +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,
-//  useRtl,
-getTabIndex, Keys, guid, kendoThemeMaps, Icon, getRef, templateRendering, getListeners, getTemplate, canUseDOM, setRef } 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 { validatePackage } from '@progress/kendo-vue-common';
-import { packageMetadata } from './../package-metadata';
-import { getItemValue, areSame, isPresent } from '../common/utils';
-import { ListNoData } from './ListNoData';
-import { messages, clear, nodata } from './../messages/main';
-import { FloatingLabel } from '@progress/kendo-vue-labels';
-import { ListFilter } from '../common/ListFilter';
-import { Button as KButton } from '@progress/kendo-vue-buttons';
-import { xIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
-import { MOBILE_SMALL_DEVICE, MOBILE_MEDIUM_DEVICE } from '../common/constants';
-import { ActionSheet } from '@progress/kendo-vue-layout';
-import DropDownBase from '../common/DropDownBase';
-var sizeMap = kendoThemeMaps.sizeMap,
-  roundedMap = kendoThemeMaps.roundedMap;
-var VALIDATION_MESSAGE = 'Please select a value from the list!';
-// const ValueHolder: React.FunctionComponent<ValueHolderProps> = props =>
-//   <span class="k-input-value-text">{props.children}</span>;
-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 DropDownTreeVue2 = {
-  name: 'KendoDropDownTree',
-  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: {
-      type: [Object, String, Number, Boolean],
-      default: function _default() {
-        return undefined;
-      }
-    },
-    modelValue: {
-      type: [Object, String, Number, Boolean],
-      default: function _default() {
-        return undefined;
-      }
-    },
-    valueMap: Function,
-    placeholder: String,
-    dataItemKey: {
-      type: String,
-      required: true
-    },
-    textField: {
-      type: String,
-      required: true
-    },
-    selectField: {
-      type: String,
-      default: 'selected'
-    },
-    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,
-    ariaLabel: {
-      type: String,
-      default: undefined
-    },
-    ariaLabelledBy: String,
-    ariaDescribedBy: String,
-    filterable: Boolean,
-    filter: String,
-    loading: Boolean,
-    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],
-    header: [String, Function, Object],
-    footer: [String, Function, Object],
-    valueRender: [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 {
-      currentOpened: false,
-      focused: false,
-      filterState: '',
-      currentValue: undefined,
-      popupWidth: '200px',
-      windowWidth: 0,
-      initialAdaptiveRenderingValues: undefined
-    };
-  },
-  computed: {
-    wrapperClass: function wrapperClass() {
-      var _a;
-      var _b = this.$props,
-        validationMessage = _b.validationMessage,
-        valid = _b.valid,
-        required = _b.required,
-        validityStyles = _b.validityStyles;
-      var validity = getValidity({
-        validationMessage: validationMessage,
-        valid: valid,
-        required: required
-      }, this.hasValue);
-      var isValid = !validityStyles || validity.valid;
-      var _c = this.$props,
-        size = _c.size,
-        rounded = _c.rounded,
-        fillMode = _c.fillMode;
-      return _a = {
-        'k-dropdowntree': true,
-        'k-picker': true
-      }, _a[this.$props.className] = this.$props.className, _a["k-picker-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-picker-".concat(fillMode)] = fillMode, _a['k-focus'] = this.focused, _a['k-invalid'] = !isValid, _a['k-loading'] = this.$props.loading, _a['k-required'] = required, _a['k-disabled'] = this.$props.disabled, _a;
-    },
-    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.currentOpened;
-    },
-    computedValue: function computedValue() {
-      return this.value !== undefined ? this.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
-    },
-    hasValue: function hasValue() {
-      return isPresent(this.computedValue);
-    },
-    currentValueText: function currentValueText() {
-      return this.hasValue ? getItemValue(this.computedValue, this.$props.textField) : '';
-    }
-  },
-  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,
-      popupSettings = _a.popupSettings,
-      disabled = _a.disabled,
-      placeholder = _a.placeholder,
-      label = _a.label,
-      name = _a.name,
-      selectField = _a.selectField,
-      subItemsField = _a.subItemsField,
-      validationMessage = _a.validationMessage,
-      valid = _a.valid,
-      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 renderAdaptive = this.adaptiveState;
-    var dir = this.$props.dir; // useRtl(elementRef, props.dir);
-    var itemTemplate = templateRendering.call(this, this.item, getListeners.call(this));
-    var valueTemplate = templateRendering.call(this, this.valueRender, 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 valueDefault = h("span", {
-      "class": "k-input-value-text"
-    }, [this.currentValueText || placeholder]);
-    var valueToRender = getTemplate.call(this, {
-      h: h,
-      defaultRendering: valueDefault,
-      template: valueTemplate,
-      additionalProps: {
-        value: this.computedValue
-      }
-    });
-    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: 1,
-        attrs: this.v3 ? undefined : {
-          tabindex: 1,
-          "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.onWrapperClick,
-        on: this.v3 ? undefined : {
-          "click": _this.onWrapperClick
-        },
-        icon: "x",
-        svgIcon: xIcon
-      })])]), h("div", {
-        "class": "k-actionsheet-titlebar-group k-actionsheet-filter"
-      }, [_this.$props.filterable &&
-      // @ts-ignore
-      h(ListFilter, {
-        tabindex: 0,
-        attrs: this.v3 ? undefined : {
-          tabindex: 0,
-          value: _this.$props.filter === undefined ? _this.filterState : _this.$props.filter,
-          size: size,
-          rounded: rounded,
-          fillMode: fillMode
-        },
-        value: _this.$props.filter === undefined ? _this.filterState : _this.$props.filter,
-        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 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,
-          selectField: selectField,
-          expandField: _this.$props.expandField,
-          childrenField: subItemsField,
-          expandIcons: true,
-          size: 'large',
-          item: itemTemplate
-        },
-        dataItems: dataItems,
-        focusIdField: dataItemKey,
-        textField: _this.$props.textField,
-        selectField: selectField,
-        expandField: _this.$props.expandField,
-        childrenField: subItemsField,
-        expandIcons: true,
-        onItemclick: _this.onChange,
-        on: this.v3 ? undefined : {
-          "itemclick": _this.onChange,
-          "expandchange": _this.onExpand,
-          "focus": _this.onFocus,
-          "blur": _this.onBlur,
-          "keydown": _this.onWrapperKeyDown
-        },
-        onExpandchange: _this.onExpand,
-        onFocus: _this.onFocus,
-        onBlur: _this.onBlur,
-        onKeydown: _this.onWrapperKeyDown,
-        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,
-          header: adaptiveActionSheetHeaderTemplate,
-          content: adaptiveActionSheetContentTemplate,
-          contentClassName: '!k-overflow-hidden',
-          navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
-        },
-        animation: true,
-        animationStyles: this.animationStyles,
-        className: this.classNameAdaptive,
-        header: adaptiveActionSheetHeaderTemplate,
-        content: adaptiveActionSheetContentTemplate,
-        contentClassName: '!k-overflow-hidden',
-        onClose: this.onWrapperClick,
-        on: this.v3 ? undefined : {
-          "close": this.onWrapperClick
-        },
-        navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
-      });
-    };
-    var isValid = !validityStyles || validity.valid;
-    var _b = this.$props,
-      size = _b.size,
-      rounded = _b.rounded,
-      fillMode = _b.fillMode;
-    var component = function component() {
-      var _this2 = this;
-      return h("span", {
-        "class": this.wrapperClass,
-        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 || this.$props.ariaLabel,
-          "aria-labelledby": this.$props.ariaLabelledBy,
-          "aria-describedby": this.$props.ariaDescribedBy,
-          "aria-required": required
-        },
-        accessKey: this.$props.accessKey,
-        id: id,
-        dir: dir,
-        ref: setRef(this, 'kendoAnchor', this.anchor),
-        onKeydown: this.onWrapperKeyDown,
-        on: this.v3 ? undefined : {
-          "keydown": this.onWrapperKeyDown,
-          "click": this.onWrapperClick,
-          "mousedown": this.onWrapperMouseDown,
-          "focusin": this.onFocus,
-          "focusout": this.onBlur
-        },
-        onClick: 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 || this.$props.ariaLabel,
-        "aria-labelledby": this.$props.ariaLabelledBy,
-        "aria-describedby": this.$props.ariaDescribedBy,
-        "aria-required": required
-      }, [h("span", {
-        "class": "k-input-inner"
-      }, [valueToRender]), this.$props.loading && h(Icon, {
-        "class": "k-input-loading-icon",
-        name: "loading",
-        attrs: this.v3 ? undefined : {
-          name: "loading"
-        }
-      }), this.hasValue && !disabled && h("span", {
-        onClick: this.onClear,
-        on: this.v3 ? undefined : {
-          "click": this.onClear,
-          "mousedown": function mousedown(e) {
-            return e.preventDefault();
-          }
-        },
-        "class": "k-clear-value",
-        title: localization.toLanguageString(clear, messages[clear]),
-        attrs: this.v3 ? undefined : {
-          title: localization.toLanguageString(clear, messages[clear]),
-          role: "button",
-          tabIndex: -1
-        },
-        role: "button",
-        tabIndex: -1,
-        onMousedown: function mousedown(e) {
-          return e.preventDefault();
-        }
-      }, [h(Icon, {
-        name: "x",
-        attrs: this.v3 ? undefined : {
-          name: "x",
-          icon: xIcon
-        },
-        icon: xIcon
-      })]), h(KButton, {
-        tabIndex: -1,
-        attrs: this.v3 ? undefined : {
-          tabIndex: -1,
-          type: "button",
-          "aria-label": "select",
-          size: size,
-          fillMode: fillMode,
-          themeColor: "base",
-          rounded: null,
-          icon: "caret-alt-down",
-          svgIcon: caretAltDownIcon
-        },
-        type: "button",
-        "aria-label": "select",
-        "class": "k-input-button",
-        size: size,
-        fillMode: fillMode,
-        themeColor: "base",
-        rounded: null,
-        icon: "caret-alt-down",
-        svgIcon: caretAltDownIcon
-      }), /* 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, this.computedValue) : this.computedValue : null,
-        domProps: this.v3 ? undefined : {
-          "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, this.computedValue) : this.computedValue
-        }
-      })]), !renderAdaptive &&
-      // @ts-ignore function children
-      h(Popup, {
-        style: {
-          width: this.popupWidth,
-          direction: dir
-        },
-        ref: setRef(this, 'popup'),
-        "class": classNames(popupSettings.className, {
-          'k-rtl': dir === 'rtl'
-        }),
-        popupClass: classNames(popupSettings.popupClass, 'k-dropdowntree-popup', 'popup-' + this.componentGuid),
-        attrs: this.v3 ? undefined : {
-          popupClass: classNames(popupSettings.popupClass, 'k-dropdowntree-popup', 'popup-' + this.componentGuid),
-          animate: popupSettings.animate,
-          anchor: this.anchor,
-          show: this.isOpen,
-          appendTo: popupSettings.appendTo
-        },
-        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
-      }, 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,
-            "blur": _this2.onBlur
-          },
-          onKeydown: _this2.onInputKeyDown,
-          onBlur: _this2.onBlur,
-          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,
-            selectField: selectField,
-            expandField: _this2.$props.expandField,
-            childrenField: subItemsField,
-            expandIcons: true,
-            size: size,
-            item: itemTemplate
-          },
-          dataItems: dataItems,
-          focusIdField: dataItemKey,
-          textField: _this2.$props.textField,
-          selectField: selectField,
-          expandField: _this2.$props.expandField,
-          childrenField: subItemsField,
-          expandIcons: true,
-          onItemclick: _this2.onChange,
-          on: _this2.v3 ? undefined : {
-            "itemclick": _this2.onChange,
-            "expandchange": _this2.onExpand,
-            "focus": _this2.onFocus,
-            "blur": _this2.onBlur,
-            "keydown": _this2.onWrapperKeyDown
-          },
-          onExpandchange: _this2.onExpand,
-          onFocus: _this2.onFocus,
-          onBlur: _this2.onBlur,
-          onKeydown: _this2.onWrapperKeyDown,
-          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,
-          "blur": _this2.onBlur
-        },
-        onKeydown: _this2.onInputKeyDown,
-        onBlur: _this2.onBlur,
-        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,
-          selectField: selectField,
-          expandField: _this2.$props.expandField,
-          childrenField: subItemsField,
-          expandIcons: true,
-          size: size,
-          item: itemTemplate
-        },
-        dataItems: dataItems,
-        focusIdField: dataItemKey,
-        textField: _this2.$props.textField,
-        selectField: selectField,
-        expandField: _this2.$props.expandField,
-        childrenField: subItemsField,
-        expandIcons: true,
-        onItemclick: _this2.onChange,
-        on: _this2.v3 ? undefined : {
-          "itemclick": _this2.onChange,
-          "expandchange": _this2.onExpand,
-          "focus": _this2.onFocus,
-          "blur": _this2.onBlur,
-          "keydown": _this2.onWrapperKeyDown
-        },
-        onExpandchange: _this2.onExpand,
-        onFocus: _this2.onFocus,
-        onBlur: _this2.onBlur,
-        onKeydown: _this2.onWrapperKeyDown,
-        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 dropdowntree = [isV3 ? h(component.call(this), __assign({}, this.$attrs)) : component.call(this), renderAdaptive && renderAdaptiveListContainer.call(this)];
-    var dropdowntreeToRender = isV3 ? dropdowntree : this.$props.adaptive ? h("span", [dropdowntree]) : component.call(this);
-    return label ?
-    // @ts-ignore function children
-    h(FloatingLabel, {
-      label: label,
-      attrs: this.v3 ? undefined : {
-        label: label,
-        editorValue: this.currentValueText,
-        editorPlaceholder: placeholder,
-        editorValid: isValid,
-        editorDisabled: disabled,
-        editorId: id,
-        focused: this.focused,
-        dir: dir
-      },
-      editorValue: this.currentValueText,
-      editorPlaceholder: placeholder,
-      editorValid: isValid,
-      editorDisabled: disabled,
-      editorId: id,
-      focused: this.focused,
-      dir: dir
-    }, this.v3 ? function () {
-      return [dropdowntreeToRender];
-    } : [dropdowntreeToRender]) : dropdowntreeToRender;
-  },
-  methods: {
-    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);
-      }
-    },
-    openPopup: function openPopup(event) {
-      if (!this.isOpen) {
-        var openEvent = __assign({}, event);
-        this.$emit('open', openEvent);
-        this.currentOpened = true;
-      }
-    },
-    closePopup: function closePopup(event) {
-      if (this.isOpen) {
-        var closeEvent = __assign({}, event);
-        this.$emit('close', closeEvent);
-        this.currentOpened = false;
-      }
-    },
-    onWrapperClick: function onWrapperClick(event) {
-      this.onFilterChange(__assign(__assign({}, event), {
-        target: {
-          value: ''
-        }
-      }));
-      if (!event.defaultPrevented && this.$el) {
-        this.focused = true;
-        var ev = {
-          event: event,
-          target: this
-        };
-        (this.isOpen ? this.closePopup : this.openPopup)(ev);
-      }
-    },
-    switchFocus: function switchFocus(focusFn) {
-      var _this = this;
-      this.skipFocusRef = true;
-      focusFn();
-      window.setTimeout(function () {
-        return _this.skipFocusRef = false;
-      }, 0);
-    },
-    onWrapperKeyDown: function onWrapperKeyDown(event) {
-      var _this = this;
-      var keyCode = event.keyCode,
-        altKey = event.altKey;
-      var treeview = 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.isOpen) {
-        if (keyCode === Keys.esc || altKey && keyCode === Keys.up) {
-          event.preventDefault();
-          this.closePopup(ev);
-        } else if (treeview && treeview.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 && inputElement) {
-            var items = Array.from(treeview.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.switchFocus(noop);
-        } else if (keyCode === Keys.down) {
-          this.switchFocus(function () {
-            _this.focusElement(inputElement || treeview);
-          });
-        }
-      } 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) {
-        this.onWrapperClick(event);
-      } else 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);
-      });
-    },
-    focusElement: function focusElement(element) {
-      if (element) {
-        this.switchFocus(function () {
-          return element.focus();
-        });
-      }
-    },
-    onPopupOpened: function onPopupOpened() {
-      if (!this.focused && this.isOpen && !this.currentOpened) {
-        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.$el);
-        }
-      }
-    },
-    onPopupClosed: function onPopupClosed() {
-      if (this.focused) {
-        // Move the focus from treeview to dropdown without triggering Focus or Blur events.
-        this.focusElement(this.elementRef);
-      }
-    },
-    onFocus: function onFocus(event) {
-      if (!this.focused && !this.skipFocusRef) {
-        this.focused = true;
-        var focusEvent = {
-          event: event,
-          target: this
-        };
-        this.$emit('focus', focusEvent);
-      }
-    },
-    onBlur: function onBlur(event) {
-      if (this.focused && !this.skipFocusRef) {
-        this.focused = false;
-        var ev = {
-          event: event,
-          target: this
-        };
-        var focusEvent = __assign({}, ev);
-        if ((!event.relatedTarget || !event.relatedTarget.closest('.popup-' + this.componentGuid)) && !this.adaptiveState) {
-          this.$emit('blur', focusEvent);
-          this.closePopup(ev);
-        }
-      }
-    },
-    onWrapperMouseDown: function onWrapperMouseDown() {
-      if (this.focused) {
-        // moving focus from treeview to dropdown triggers Focus and Blur events.
-        this.switchFocus(noop);
-      }
-    },
-    changeValue: function changeValue(event, newValue, hierarchicalIndex) {
-      var changeEvent = __assign({
-        value: newValue,
-        level: hierarchicalIndex ? toLevel(hierarchicalIndex) : []
-      }, event);
-      this.$emit('changemodel', newValue);
-      this.$emit('update:modelValue', newValue);
-      this.$emit('change', changeEvent);
-      this.currentValue = newValue;
-    },
-    onChange: function onChange(e) {
-      if (areSame(e.item, this.computedValue, this.dataItemKey) || !this.$el) {
-        return;
-      }
-      var item = e.item,
-        itemHierarchicalIndex = e.itemHierarchicalIndex,
-        event = e.event;
-      var ev = {
-        event: event,
-        target: this
-      };
-      this.changeValue(ev, item, itemHierarchicalIndex);
-      this.closePopup(ev);
-    },
-    onClear: function onClear(event) {
-      var ev = {
-        event: event,
-        target: this
-      };
-      this.changeValue(ev, null);
-      this.closePopup(ev);
-      event.preventDefault();
-    },
-    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 DropDownTree = DropDownTreeVue2;
-export { DropDownTree, DropDownTreeVue2 };