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

package/MultiSelectTree/MultiSelectTree.mjs

@@ -0,0 +1,759 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as ge, h as k, createVNode as s, isVNode as ve } from "vue";
+import { validatePackage as be, guid as N, canUseDOM as Se, getRef as g, getTabIndex as ke, templateRendering as u, getListeners as f, getTemplate as E, noop as z, Keys as n, setRef as v, classNames as V, Icon as ye, kendoThemeMaps as Fe } from "@progress/kendo-vue-common";
+import { Popup as we } from "@progress/kendo-vue-popup";
+import { provideLocalizationService as Re } from "@progress/kendo-vue-intl";
+import { TreeView as q } from "@progress/kendo-vue-treeview";
+import { packageMetadata as xe } from "../package-metadata.mjs";
+import { getItemValue as j, areSame as Ve, matchTags as _ } from "../common/utils.mjs";
+import { ListNoData as $e } from "../DropDownTree/ListNoData.mjs";
+import { nodata as G, messages as M, adaptiveModeFooterCancel as H, adaptiveModeFooterApply as U } from "../messages/main.mjs";
+import { FloatingLabel as Ie } from "@progress/kendo-vue-labels";
+import { Button as B } from "@progress/kendo-vue-buttons";
+import { TagList as Te } from "../MultiSelect/TagList.mjs";
+import { ClearButton as Ce } from "../common/ClearButton.mjs";
+import { ListFilter as J } from "../common/ListFilter.mjs";
+import { getMultiSelectTreeValue as De } from "./utils.mjs";
+import { MOBILE_SMALL_DEVICE as Q, MOBILE_MEDIUM_DEVICE as Ee } from "../common/constants.mjs";
+import { ActionSheet as Me } from "@progress/kendo-vue-layout";
+import { xIcon as Be } from "@progress/kendo-svg-icons";
+import Ae from "../common/DropDownBase.mjs";
+function $(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ve(e);
+}
+const Oe = "Please select a value from the list!", {
+  sizeMap: X,
+  roundedMap: Pe
+} = Fe, Ke = (e) => e.split("_").map((t) => parseInt(t, 10)), Y = (e, t) => {
+  const {
+    validationMessage: i,
+    valid: a,
+    required: o
+  } = e;
+  return {
+    customError: i !== void 0,
+    valid: !!(a !== void 0 ? a : !o || t),
+    valueMissing: !t
+  };
+}, at = /* @__PURE__ */ ge({
+  name: "KendoMultiSelectTree",
+  model: {
+    event: "changemodel"
+  },
+  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: void 0
+    },
+    disabled: Boolean,
+    dir: String,
+    tabIndex: Number,
+    accessKey: String,
+    dataItems: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    value: Array,
+    modelValue: Array,
+    valueMap: Function,
+    placeholder: String,
+    dataItemKey: {
+      type: String,
+      required: !0
+    },
+    textField: {
+      type: String,
+      required: !0
+    },
+    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: !0
+    },
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    required: Boolean,
+    name: String,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    filterable: Boolean,
+    filter: String,
+    loading: Boolean,
+    tags: Array,
+    popupSettings: {
+      type: Object,
+      default: function() {
+        return {
+          animate: !0,
+          height: "200px",
+          anchor: ""
+        };
+      }
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return [null, "small", "medium", "large"].includes(e);
+      }
+    },
+    rounded: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return [null, "small", "medium", "large", "full"].includes(e);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: "solid",
+      validator: function(e) {
+        return [null, "flat", "outline", "solid"].includes(e);
+      }
+    },
+    item: [String, Function, Object],
+    tag: [String, Function, Object],
+    header: [String, Function, Object],
+    footer: [String, Function, Object],
+    listNoData: [String, Function, Object],
+    adaptive: {
+      type: Boolean,
+      default: void 0
+    },
+    adaptiveTitle: {
+      type: String,
+      default: void 0
+    }
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  created() {
+    this.observer = null, be(xe), this.base = new Ae(this), this.componentGuid = N(), this.anchor = N();
+  },
+  data() {
+    return {
+      focusedTagState: void 0,
+      openState: !1,
+      focusedState: !1,
+      filterState: "",
+      currentValue: [],
+      popupWidth: "200px",
+      windowWidth: 0,
+      initialAdaptiveRenderingValues: void 0
+    };
+  },
+  computed: {
+    animationStyles() {
+      return this.windowWidth <= Q ? {
+        top: 0,
+        width: "100%",
+        height: "100%"
+      } : void 0;
+    },
+    classNameAdaptive() {
+      return this.windowWidth <= Q ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom";
+    },
+    adaptiveState() {
+      return this.windowWidth <= Ee && this.$props.adaptive;
+    },
+    isOpen() {
+      return this.opened !== void 0 ? this.opened : this.openState;
+    },
+    computedValue() {
+      return this.value !== void 0 ? this.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.currentValue;
+    },
+    hasValue() {
+      return !!this.computedValue.length;
+    },
+    tagsToRenderRef() {
+      if (this.initialAdaptiveRenderingValues === void 0)
+        return this.tags === void 0 ? this.computedValue.map((e) => ({
+          text: j(e, this.$props.textField),
+          data: [e]
+        })) : [...this.tags];
+      {
+        const e = this.initialAdaptiveRenderingValues;
+        return e.length > 0 && e.map((t) => ({
+          text: j(t, this.$props.textField),
+          data: [t]
+        }));
+      }
+    }
+  },
+  watch: {
+    // This watch gets the state of the data when the adaptive mode is activated
+    isOpen: function(e) {
+      e && this.value ? this.initialAdaptiveRenderingValues = [...this.value] : this.initialAdaptiveRenderingValues = void 0;
+    }
+  },
+  mounted() {
+    this.observer = Se && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.elementRef = g(this, "kendoAnchor"), this.inputRef = g(this, "input"), this.selectRef = g(this, "select"), this.treeViewRef = g(this, "treeView"), this.skipFocusRef = !1, this.popupRef = g(this, "popup"), this.calculatePopupWidth();
+  },
+  updated() {
+    this.inputRef = g(this, "input"), this.treeViewRef = g(this, "treeView"), this.popupRef && this.isOpen && this.hasValue && this.popupRef.reposition(), this.setValidity(), this.calculatePopupWidth();
+  },
+  render() {
+    let e;
+    const t = this.$props.id || this.componentGuid, {
+      dataItems: i,
+      dataItemKey: a,
+      popupSettings: o = {},
+      disabled: d,
+      placeholder: l,
+      label: r,
+      name: h,
+      checkField: b,
+      checkIndeterminateField: F,
+      subItemsField: A,
+      validationMessage: Z,
+      valid: ee,
+      value: O,
+      required: I,
+      validityStyles: te,
+      adaptiveTitle: ie
+    } = this.$props, w = ke(this.$props.tabIndex, d), T = Re(this), se = Y({
+      validationMessage: Z,
+      valid: ee,
+      required: I
+    }, this.hasValue), R = this.$props.dir, P = this.adaptiveState, K = u.call(this, this.item, f.call(this)), ne = u.call(this, this.tag, f.call(this)), ae = u.call(this, this.$props.header, f.call(this)), oe = u.call(this, this.$props.footer, f.call(this)), C = E.call(this, {
+      h: k,
+      template: ae
+    }), D = E.call(this, {
+      h: k,
+      template: oe
+    }), le = u.call(this, this.$props.listNoData, f.call(this)), re = s($e, null, $(e = T.toLanguageString(G, M[G])) ? e : {
+      default: () => [e]
+    }), L = E.call(this, {
+      h: k,
+      defaultRendering: re,
+      template: le
+    }), W = !te || se.valid, {
+      size: c,
+      rounded: S,
+      fillMode: y
+    } = this.$props, de = () => [s("div", {
+      class: "k-actionsheet-titlebar-group k-hbox"
+    }, [s("div", {
+      class: "k-actionsheet-title"
+    }, [s("div", {
+      class: "k-text-center"
+    }, [ie]), s("div", {
+      class: "k-actionsheet-subtitle k-text-center"
+    }, [l])]), s("div", {
+      class: "k-actionsheet-actions"
+    }, [s(B, {
+      tabIndex: 5,
+      "aria-label": "Cancel",
+      "aria-disabled": "false",
+      type: "button",
+      fillMode: "flat",
+      onClick: this.onCancel,
+      icon: "x",
+      svgIcon: Be
+    }, null)])]), s("div", {
+      class: "k-actionsheet-titlebar-group k-actionsheet-filter"
+    }, [this.$props.filterable && s(J, {
+      value: this.$props.filter === void 0 ? this.filterState : this.$props.filter,
+      ref: v(this, "input"),
+      onChange: this.onFilterChange,
+      onKeydown: this.onInputKeyDown,
+      size: c,
+      rounded: S,
+      fillMode: y,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur
+    }, null)])], he = u.call(this, de, f.call(this)), ce = () => {
+      const p = T.toLanguageString(H, M[H]), m = T.toLanguageString(U, M[U]);
+      return [s(B, {
+        size: "large",
+        "aria-label": p,
+        "aria-disabled": "false",
+        type: "button",
+        onClick: this.onCancel
+      }, $(p) ? p : {
+        default: () => [p]
+      }), s(B, {
+        themeColor: "primary",
+        size: "large",
+        "aria-label": m,
+        "aria-disabled": "false",
+        type: "button",
+        onClick: this.closePopup
+      }, $(m) ? m : {
+        default: () => [m]
+      })];
+    }, pe = u.call(this, ce, f.call(this)), ue = () => {
+      const p = this.base.getTemplateDef.call(this, C, k), m = this.base.getTemplateDef.call(this, D, k);
+      return [p && s("div", {
+        class: "k-list-header"
+      }, [p]), i.length > 0 ? s(q, {
+        ref: v(this, "treeView"),
+        tabIndex: w,
+        dataItems: i,
+        focusIdField: a,
+        textField: this.$props.textField,
+        checkField: b,
+        checkIndeterminateField: F,
+        expandField: this.$props.expandField,
+        childrenField: A,
+        expandIcons: !0,
+        onItemclick: this.onChange,
+        onCheckchange: this.onChange,
+        onExpandchange: this.onExpand,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        onKeydown: this.onWrapperKeyDown,
+        checkboxes: !0,
+        size: "large",
+        item: K
+      }, null) : L, m && s("div", {
+        class: "k-list-footer"
+      }, [m])];
+    }, fe = u.call(this, ue, f.call(this)), me = function() {
+      return s(Me, {
+        expand: this.isOpen,
+        animation: !0,
+        animationStyles: this.animationStyles,
+        className: this.classNameAdaptive,
+        footerClassName: "k-actions k-actions-stretched",
+        contentClassName: "!k-overflow-hidden",
+        header: he,
+        content: fe,
+        footer: pe,
+        onClose: this.onCancel,
+        navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
+      }, null);
+    }, x = [k(function() {
+      return s("span", {
+        ref: v(this, "kendoAnchor"),
+        class: V("k-multiselecttree k-input", this.$props.className, {
+          [`k-input-${X[c] || c}`]: c,
+          [`k-rounded-${Pe[S] || S}`]: S,
+          [`k-input-${y}`]: y,
+          "k-focus": this.focusedState && !d,
+          "k-invalid": !W,
+          "k-disabled": d,
+          "k-loading": this.$props.loading,
+          "k-required": I
+        }),
+        tabindex: w,
+        accesskey: this.$props.accessKey,
+        id: t,
+        dir: R,
+        onKeydown: this.onWrapperKeyDown,
+        onMousedown: this.onWrapperMouseDown,
+        onFocusin: this.onFocus,
+        onFocusout: this.onBlur,
+        role: "combobox",
+        "aria-haspopup": "tree",
+        "aria-expanded": this.isOpen,
+        "aria-disabled": d,
+        "aria-label": r,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaLabelledBy ? this.$props.ariaLabelledBy : "tagslist-" + t,
+        "aria-required": this.$props.required,
+        onClick: this.onWrapperClick
+      }, [
+        this.tagsToRenderRef.length > 0 && s(Te, {
+          id: "tagslist-" + t,
+          class: V("k-input-values k-chip-list k-selection-multiple", {
+            [`k-chip-list-${X[c] || c}`]: c,
+            "k-readonly": this.hasValue
+          }),
+          tagRender: ne,
+          onTagdelete: this.onTagDelete,
+          dataItems: this.tagsToRenderRef,
+          guid: t,
+          focused: this.focusedTagState ? this.tagsToRenderRef.find((p) => this.focusedTagState && _(p, this.focusedTagState, a)) : void 0,
+          tagsRounded: S,
+          size: c,
+          fillMode: y
+        }, null),
+        s("span", {
+          class: "k-input-inner",
+          role: "combobox",
+          tabindex: w,
+          "aria-expanded": this.isOpen,
+          "aria-describedby": "tagslist-" + t,
+          "aria-label": this.$props.ariaLabelledBy
+        }, [this.tagsToRenderRef.length === 0 && s("span", {
+          class: "k-input-value-text"
+        }, [l])]),
+        this.$props.loading && s(ye, {
+          class: "k-input-loading-icon",
+          name: "loading"
+        }, null),
+        this.hasValue && !d && s(Ce, {
+          onClearclick: this.onClear
+        }, null),
+        /* Dummy component to support forms */
+        s("select", {
+          name: h,
+          ref: v(this, "select"),
+          tabindex: -1,
+          "aria-hidden": !0,
+          required: I,
+          title: r,
+          style: {
+            opacity: 0,
+            width: 1,
+            border: 0,
+            zIndex: -1,
+            position: "absolute",
+            left: "50%"
+          }
+        }, [s("option", {
+          value: this.$props.valueMap ? this.$props.valueMap.call(void 0, O) : O
+        }, null)]),
+        !P && s(we, {
+          style: {
+            width: this.popupWidth,
+            direction: R
+          },
+          popupClass: V(o.popupClass, "k-multiselecttree-popup", "popup-" + this.componentGuid),
+          class: V(o.className, {
+            "k-rtl": R === "rtl"
+          }),
+          animate: o.animate,
+          anchor: this.anchor,
+          show: this.isOpen,
+          onOpen: this.onPopupOpened,
+          onClose: this.onPopupClosed,
+          appendTo: o.appendTo,
+          ref: v(this, "popup")
+        }, {
+          default: () => [this.$props.filterable && s(J, {
+            value: this.$props.filter === void 0 ? this.filterState : this.$props.filter,
+            ref: v(this, "input"),
+            onChange: this.onFilterChange,
+            onKeydown: this.onInputKeyDown,
+            size: c,
+            rounded: S,
+            fillMode: y,
+            onFocus: this.onFocus,
+            onBlur: this.onBlur
+          }, null), C && s("div", {
+            class: "k-list-header"
+          }, [C]), i.length > 0 ? s(q, {
+            ref: v(this, "treeView"),
+            tabIndex: w,
+            dataItems: i,
+            focusIdField: a,
+            textField: this.$props.textField,
+            checkField: b,
+            checkIndeterminateField: F,
+            expandField: this.$props.expandField,
+            childrenField: A,
+            expandIcons: !0,
+            onItemclick: this.onChange,
+            onCheckchange: this.onChange,
+            onExpandchange: this.onExpand,
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+            onKeydown: this.onWrapperKeyDown,
+            checkboxes: !0,
+            size: c,
+            item: K
+          }, null) : L, D && s("div", {
+            class: "k-list-footer"
+          }, [D])]
+        })
+      ]);
+    }.call(this), {
+      ...this.$attrs
+    }), P && me.call(this)];
+    return r ? s(Ie, {
+      label: r,
+      editorValue: this.hasValue,
+      editorPlaceholder: l,
+      editorValid: W,
+      editorDisabled: d,
+      editorId: t,
+      dir: R
+    }, $(x) ? x : {
+      default: () => [x]
+    }) : x;
+  },
+  methods: {
+    clearFilter(e) {
+      this.onFilterChange(e, "");
+    },
+    onCancel(e) {
+      const t = {
+        event: e,
+        target: this
+      }, i = {
+        items: [],
+        operation: "toggle",
+        value: this.initialAdaptiveRenderingValues,
+        ...t
+      };
+      this.$emit("change", i), this.closePopup(e);
+    },
+    calculateMedia(e) {
+      for (let t of e)
+        this.windowWidth = t.target.clientWidth;
+    },
+    calculatePopupWidth() {
+      this.elementRef && (this.popupWidth = this.popupSettings.width !== void 0 ? this.popupSettings.width : this.elementRef.offsetWidth + "px");
+    },
+    focus() {
+      this.$el && this.$el.focus();
+    },
+    setValidity() {
+      if (this.selectRef && this.selectRef.setCustomValidity) {
+        const {
+          validationMessage: e,
+          valid: t,
+          required: i
+        } = this.$props, a = Y({
+          validationMessage: e,
+          valid: t,
+          required: i
+        }, this.hasValue);
+        this.selectRef.setCustomValidity(a.valid ? "" : this.validationMessage === void 0 ? Oe : this.validationMessage);
+      }
+    },
+    changeValue(e, t, i) {
+      const a = {
+        dataItemKey: this.dataItemKey,
+        checkField: this.checkField,
+        checkIndeterminateField: this.checkIndeterminateField,
+        expandField: this.expandField,
+        subItemsField: this.subItemsField
+      }, o = De(this.dataItems, {
+        ...a,
+        items: t,
+        operation: i,
+        value: this.computedValue
+      }), d = {
+        items: t,
+        operation: i,
+        value: o,
+        ...e
+      };
+      this.$emit("changemodel", o), this.$emit("update:modelValue", o), this.$emit("change", d);
+    },
+    onChange(e) {
+      if (Ve(e.item, this.computedValue, this.dataItemKey))
+        return;
+      const {
+        item: t,
+        event: i
+      } = e, a = {
+        event: i,
+        target: this
+      };
+      this.changeValue(a, [t], "toggle");
+    },
+    openPopup(e) {
+      if (!this.isOpen) {
+        const t = {
+          ...e
+        };
+        this.$emit("open", t), this.opened === void 0 && (this.openState = !0);
+      }
+    },
+    closePopup(e) {
+      if (this.$props.filterable && this.clearFilter(e), this.isOpen) {
+        const t = {
+          ...e
+        };
+        this.$emit("close", t), this.opened === void 0 && (this.openState = !1);
+      }
+    },
+    switchFocus(e) {
+      this.skipFocusRef = !0, e(), window.setTimeout(() => this.skipFocusRef = !1, 0);
+    },
+    focusElement(e) {
+      e && this.switchFocus(() => e.focus());
+    },
+    onPopupOpened() {
+      if (!this.focusedState && this.isOpen)
+        this.closePopup({
+          target: this
+        });
+      else if (this.$props.filterable) {
+        const e = this.inputRef && this.inputRef.input;
+        this.focusElement(e);
+      } else
+        this.focusElement(this.treeViewRef && this.treeViewRef.input);
+    },
+    onPopupClosed() {
+      this.focusedState && this.focusElement(this.elementRef);
+    },
+    onFocus(e) {
+      if (!this.focusedState && !this.skipFocusRef) {
+        this.focusedState = !0;
+        const t = {
+          event: e,
+          target: this
+        };
+        this.$emit("focus", t);
+      }
+    },
+    onBlur(e) {
+      if (this.focusedState && !this.skipFocusRef && !this.adaptiveState) {
+        this.focusedTagState = void 0, this.focusedState = !1;
+        const t = {
+          event: e,
+          target: this
+        }, i = {
+          ...t
+        };
+        (!e.relatedTarget || !e.relatedTarget.closest(".popup-" + this.componentGuid)) && (this.$emit("blur", i), this.closePopup(t));
+      }
+    },
+    onWrapperMouseDown() {
+      this.focusedState && this.switchFocus(z);
+    },
+    onWrapperClick(e) {
+      if (!this.$props.disabled && !e.defaultPrevented) {
+        this.focusedState = !0;
+        const t = {
+          event: e,
+          target: this
+        };
+        this.isOpen || this.openPopup(t);
+      }
+    },
+    onWrapperKeyDown(e) {
+      const {
+        keyCode: t,
+        altKey: i
+      } = e, a = this.treeViewRef && this.treeViewRef.$el, o = this.inputRef && this.inputRef.input;
+      if (this.$props.disabled || e.defaultPrevented && o === e.target)
+        return;
+      const d = {
+        event: e,
+        target: this
+      };
+      if (this.computedValue && this.computedValue.length > 0 && (t === n.left || t === n.right || t === n.home || t === n.end || t === n.delete || t === n.backspace)) {
+        const l = this.tagsToRenderRef;
+        let r = this.focusedTagState ? l.findIndex((F) => _(F, this.focusedTagState, this.dataItemKey)) : -1, h;
+        const b = r !== -1;
+        t === n.left ? (b ? r = Math.max(0, r - 1) : r = l.length - 1, h = l[r]) : t === n.right ? b ? (r = Math.min(l.length - 1, r + 1), h = l[r]) : h = l[0] : t === n.home ? h = l[0] : t === n.end ? h = l[l.length - 1] : (t === n.delete || t === n.backspace) && b && this.changeValue(d, l[r].data, "delete"), h !== this.focusedTagState && (this.focusedTagState = h);
+      }
+      if (this.isOpen)
+        if (t === n.esc || i && t === n.up)
+          e.preventDefault(), this.switchFocus(() => {
+            this.focusElement(this.elementRef);
+          }), this.closePopup(d);
+        else if (a && a.querySelector(".k-focus") && (t === n.up || t === n.down || t === n.left || t === n.right || t === n.home || t === n.end)) {
+          if (t === n.up) {
+            const l = Array.from(a.querySelectorAll(".k-treeview-item")), r = [...l].reverse().find((h) => !!(h && h.querySelector(".k-focus")));
+            if (r && l.indexOf(r) === 0)
+              return this.switchFocus(() => {
+                this.focusElement(o || this.elementRef);
+              });
+          }
+          this.switchFocus(z);
+        } else
+          t === n.down && this.switchFocus(() => {
+            this.focusElement(o || a);
+          });
+      else
+        i && t === n.down && (e.preventDefault(), this.openPopup(d));
+    },
+    onInputKeyDown(e) {
+      const {
+        keyCode: t,
+        altKey: i
+      } = e;
+      (t === n.esc || i && t === n.up) && (e.preventDefault(), this.switchFocus(() => {
+        this.focusElement(this.elementRef);
+      }), t === n.esc && this.adaptiveState ? this.onCancel(e) : this.closePopup(e)), !(i || t !== n.up && t !== n.down) && (e.preventDefault(), this.switchFocus(t === n.up ? () => {
+        this.focusElement(this.elementRef);
+      } : () => {
+        this.focusElement(this.treeViewRef && this.treeViewRef.$el);
+      }));
+    },
+    onClear(e) {
+      const t = {
+        event: e,
+        target: this
+      };
+      this.changeValue(t, [], "clear"), this.closePopup(t), this.filterState = "", e.preventDefault();
+    },
+    onTagDelete(e, t) {
+      if (this.closePopup({
+        target: this
+      }), !this.focusedState) {
+        const i = this.inputRef && this.inputRef.input;
+        this.focusElement(i);
+      }
+      this.changeValue({
+        event: t,
+        target: this
+      }, e, "delete");
+    },
+    onExpand(e) {
+      const {
+        item: t,
+        itemHierarchicalIndex: i,
+        event: a
+      } = e, o = {
+        level: Ke(i),
+        item: t,
+        event: a,
+        target: this
+      };
+      this.$emit("expandchange", o);
+    },
+    onFilterChange(e, t) {
+      const i = t ? "" : e.target.value, o = {
+        filter: {
+          field: this.$props.textField,
+          operator: "contains",
+          value: i
+        },
+        event: e,
+        target: this
+      };
+      this.$emit("filterchange", o), this.$props.filter === void 0 && (this.filterState = i);
+    }
+  }
+});
+export {
+  at as MultiSelectTree
+};