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

package/DropDownList/DropDownList.mjs

@@ -0,0 +1,781 @@
+/**
+ * @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 $e, ref as N, createVNode as n, h as M, isVNode as Ce } from "vue";
+import { guid as A, canUseDOM as xe, getRef as W, Keys as f, templateRendering as C, getListeners as x, getTemplate as Oe, classNames as B, setRef as G, noop as q, getTabIndex as we, Icon as Fe, kendoThemeMaps as De } from "@progress/kendo-vue-common";
+import { Button as U } from "@progress/kendo-vue-buttons";
+import { ListContainer as Ve } from "../common/ListContainer.mjs";
+import { ListFilter as Te } from "../common/ListFilter.mjs";
+import { ListDefaultItem as Me } from "../common/ListDefaultItem.mjs";
+import { List as Be } from "../common/List.mjs";
+import Le from "../common/DropDownBase.mjs";
+import { GroupStickyHeader as Y } from "../common/GroupStickyHeader.mjs";
+import { selectButton as J, messages as Re } from "../messages/main.mjs";
+import { provideLocalizationService as Ne } from "@progress/kendo-vue-intl";
+import { MOBILE_SMALL_DEVICE as Q, MOBILE_MEDIUM_DEVICE as Ee } from "../common/constants.mjs";
+import { ActionSheet as Ke } from "@progress/kendo-vue-layout";
+import { areSame as y, isPresent as X, getItemValue as F, sameCharsOnly as He, shuffleData as Pe, matchText as Z, getFocusedItem as _e, preventDefaultNonInputs as ee } from "../common/utils.mjs";
+import { xIcon as je, caretAltDownIcon as ze } from "@progress/kendo-svg-icons";
+const {
+  sizeMap: E,
+  roundedMap: Ae
+} = De;
+function We(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Ce(e);
+}
+const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
+  name: "KendoDropDownList",
+  model: {
+    event: "changemodel"
+  },
+  props: {
+    id: String,
+    title: String,
+    dataItemKey: {
+      type: [Object, String]
+    },
+    defaultValue: {
+      type: [String, Object, Number, Boolean],
+      default: void 0
+    },
+    name: String,
+    modelValue: {
+      type: [String, Object, Number, Boolean],
+      default: void 0
+    },
+    value: {
+      type: [String, Object, Number, Boolean],
+      default: void 0
+    },
+    label: {
+      type: String
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    leftRightKeysNavigation: {
+      type: Boolean,
+      default: !0
+    },
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    validate: {
+      type: Boolean
+    },
+    validationMessage: {
+      type: String,
+      default: void 0
+    },
+    validityStyles: {
+      type: Boolean,
+      default: !0
+    },
+    delay: {
+      type: Number,
+      default: 500
+    },
+    ignoreCase: {
+      type: Boolean,
+      default: !0
+    },
+    icon: String,
+    svgIcon: Object,
+    iconClassName: String,
+    defaultItem: [Object, String],
+    valueRender: [String, Function, Object],
+    valueMap: Function,
+    opened: {
+      type: Boolean,
+      default: void 0
+    },
+    disabled: Boolean,
+    dir: {
+      type: String,
+      default: void 0
+    },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    accessKey: String,
+    dataItems: Array,
+    textField: String,
+    valueField: String,
+    valuePrimitive: Boolean,
+    className: String,
+    loading: Boolean,
+    popupSettings: {
+      type: Object,
+      default: {
+        animate: !0,
+        height: "200px",
+        anchor: ""
+      }
+    },
+    itemRender: [String, Function, Object],
+    groupHeaderItemRender: [String, Function, Object],
+    groupStickyHeaderItemRender: [String, Function, Object],
+    listNoDataRender: [String, Function, Object],
+    focusedItemIndex: Function,
+    header: [String, Function, Object],
+    footer: [String, Function, Object],
+    filterable: Boolean,
+    filter: {
+      type: String,
+      default: void 0
+    },
+    virtual: {
+      type: Object,
+      default: void 0
+    },
+    ariaLabelledBy: String,
+    ariaLabel: String,
+    ariaDescribedBy: String,
+    rounded: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return ["small", "medium", "large", "full"].includes(e);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: "solid",
+      validator: function(e) {
+        return ["solid", "flat", "outline"].includes(e);
+      }
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return ["small", "medium", "large"].includes(e);
+      }
+    },
+    groupField: {
+      type: String
+    },
+    adaptive: {
+      type: Boolean,
+      default: void 0
+    },
+    adaptiveTitle: {
+      type: String,
+      default: void 0
+    },
+    onChange: Function
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data() {
+    return {
+      hasMounted: !1,
+      currentText: "",
+      currentValue: "",
+      currentFocused: !1,
+      currentOpened: !1,
+      searchState: {
+        word: "",
+        last: ""
+      },
+      _skipFocusEvent: !1,
+      valueDuringOnChange: {},
+      _navigated: !1,
+      group: void 0,
+      isScrolling: !1,
+      itemHeight: 0,
+      state: void 0,
+      popupWidth: void 0,
+      windowWidth: 0
+    };
+  },
+  watch: {
+    currentOpened: function(e, t) {
+      this.prevCurrentOpened = t;
+    },
+    opened: function(e, t) {
+      this.prevOpened = t;
+    },
+    virtual: function(e, t) {
+      e && t && e.total !== t.total && (this.virtualTotalHasChanged = !0), this.virtualHasChanged = !0;
+    },
+    isOpen: function() {
+      setTimeout(() => {
+        const e = document.querySelector(".k-list-item");
+        this.itemHeight = this.base.getListItemHeight(e);
+      }, 100);
+    }
+  },
+  created() {
+    this.observer = null, this.valueDuringOnChange = void 0, this.currentText = void 0, this.currentValue = void 0, this.prevCurrentValue = this.computedValue(), this.currentFocused = void 0, this.currentOpened = void 0, this.base = new Le(this), this.anchor = A(), this.inputId = A();
+  },
+  setup() {
+    const e = N(null), t = N(null), s = N(null);
+    return {
+      selectRef: e,
+      baseWrapperRef: t,
+      kendoAnchorRef: s
+    };
+  },
+  mounted() {
+    this.observer = xe && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.select = W(this, "select"), this.base.wrapper = W(this, "kendoAnchor"), this.base.didMount(), this.setValidity();
+  },
+  updated() {
+    var I;
+    const {
+      dataItems: e = [],
+      dataItemKey: t,
+      virtual: s,
+      groupField: l,
+      textField: o
+    } = this.$props, i = this.isOpen, r = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, a = !r && i, d = this.$refs.list, h = this.$refs.filterInput, u = this.$refs.scrollElement;
+    if (this.$refs.scroller, d && (this.base.vs.list = d.list, this.base.list = d.list), u && (this.base.vs.scrollElement = u), h && (this.filterInput = h), d && e.length && this.base.vs.scrollerRef(d.$el), this.$props.popupSettings.animate || a && this.onPopupOpened(), s && this.virtualTotalHasChanged)
+      this.base.vs.calcScrollElementHeight(), this.base.vs.reset(), this.virtualTotalHasChanged = !1;
+    else {
+      const m = this.computedValue(), g = this.prevCurrentValue;
+      let p = e.findIndex((v) => y(v, m, t));
+      l && (p = (I = this.base.getGroupedDataModernMode(e, l)) == null ? void 0 : I.indexOf(m));
+      const S = !y(g, m, t);
+      a && s ? (this.base.scrollToVirtualItem(s, p), this.prevCurrentOpened = !0) : a && !s ? (e && e.length !== 0 && this.base.resetGroupStickyHeader(e[0][l], this), this.base.scrollToItem(p), this.prevCurrentOpened = !0) : i && r && m && S && !this._navigated ? this.base.scrollToItem(p) : i && r && this._navigated && (this._navigated && s && s.skip === 0 ? this.base.vs.reset() : this._navigated && s && s.skip === s.total - s.pageSize && this.base.vs.scrollToEnd());
+    }
+    this._navigated = !1, this.prevCurrentValue = this.computedValue(), this.setValidity();
+  },
+  computed: {
+    index() {
+      const {
+        dataItems: e = [],
+        dataItemKey: t
+      } = this.$props, s = this.computedValue();
+      return e.findIndex((l) => y(l, s, t));
+    },
+    spanClassNames() {
+      const e = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
+      return {
+        "k-floating-label-container": !0,
+        "k-focus": this.currentFocused,
+        "k-empty": !this.computedValue(),
+        "k-invalid": !e && e !== void 0,
+        "k-rtl": this.$props.dir === "rtl"
+      };
+    },
+    dropDownListId() {
+      return `value-${this.base.guid}${this.$props.ariaDescribedBy ? " " + this.$props.ariaDescribedBy : ""}`;
+    },
+    isOpen() {
+      return this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened;
+    },
+    animationStyles() {
+      return this.windowWidth <= Q ? {
+        top: 0,
+        width: "100%",
+        height: "100%"
+      } : void 0;
+    },
+    classNameAdaptiv() {
+      return this.windowWidth <= Q ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom";
+    },
+    adaptiveState() {
+      return this.windowWidth <= Ee && this.$props.adaptive;
+    }
+  },
+  methods: {
+    focus() {
+      this.base.wrapper && this.base.wrapper.focus();
+    },
+    computedValue() {
+      let e;
+      return this.valueDuringOnChange !== void 0 ? e = this.valueDuringOnChange : this.$props.value !== void 0 ? e = this.$props.value : this.$props.modelValue !== void 0 ? e = this.$props.modelValue : this.currentValue !== void 0 ? e = this.currentValue : this.$props.defaultValue !== void 0 && (e = this.$props.defaultValue), !X(e) && this.$props.defaultItem !== void 0 && (e = this.$props.defaultItem), this.valuePrimitive && this.findByFieldValue(this.valueField, e) || e;
+    },
+    findByFieldValue(e, t) {
+      const s = this.dataItems.findIndex((l) => F(l, e) === t);
+      return this.dataItems[s];
+    },
+    primitiveValue() {
+      const e = this.computedValue();
+      return this.valuePrimitive ? F(e, this.valueField) : e;
+    },
+    validity() {
+      const e = this.$props.validationMessage !== void 0, t = !this.$props.required || this.computedValue() !== null && this.computedValue() !== "" && this.computedValue() !== void 0, s = this.$props.valid !== void 0 ? this.$props.valid : t;
+      return {
+        customError: e,
+        valid: s,
+        valueMissing: this.computedValue() === null
+      };
+    },
+    handleItemSelect(e, t) {
+      const {
+        dataItems: s = [],
+        virtual: l,
+        dataItemKey: o,
+        defaultItem: i
+      } = this.$props, r = l ? l.skip : 0, a = e === -1 && i !== void 0 ? i : s[e - r], d = !y(a, this.computedValue(), o);
+      this.triggerOnChange(a, t), d && this.base.triggerPageChangeCornerItems(a, t);
+    },
+    onNavigate(e, t) {
+      const {
+        dataItems: s = [],
+        defaultItem: l,
+        dataItemKey: o,
+        virtual: i = {
+          skip: 0,
+          total: 0,
+          pageSize: 0
+        }
+      } = this.$props, r = this.base.vs, a = this.computedValue(), d = s.findIndex((u) => y(u, a, o)), h = this.base.navigation.navigate({
+        current: i.skip + d,
+        max: (r.enabled ? i.total : s.length) - 1,
+        min: l !== void 0 ? -1 : 0,
+        keyCode: t
+      });
+      h !== void 0 && this.handleItemSelect(h, e), this.applyState(e);
+    },
+    search(e) {
+      clearTimeout(this.typingTimeout), this.$props.filterable || (this.typingTimeout = setTimeout(() => this.searchState.word = "", this.$props.delay), this.selectNext(e));
+    },
+    selectNext(e) {
+      const {
+        dataItems: t = [],
+        dataItemKey: s
+      } = this.$props;
+      let l = t.map((v, D) => ({
+        item: v,
+        itemIndex: D
+      }));
+      const o = this.searchState.word, i = this.searchState.last, r = He(o, i);
+      let a = l.length, d = Math.max(0, t.findIndex((v) => y(v, this.computedValue(), s))), h;
+      this.$props.defaultItem && (h = {
+        item: this.$props.defaultItem,
+        itemIndex: -1
+      }, a += 1, d += 1), d += r ? 1 : 0, l = Pe(l, d, h);
+      let u, I, m, g = 0;
+      const {
+        textField: p,
+        ignoreCase: S
+      } = this.$props;
+      for (; g < a; g++)
+        if (u = F(l[g].item, p), I = r && Z(u, i, S), m = Z(u, o, S), I || m) {
+          g = l[g].itemIndex;
+          break;
+        }
+      if (g !== a) {
+        const v = this.base.initState();
+        v.event = e, this.handleItemSelect(g, v), this.applyState(v), this.valueDuringOnChange = void 0;
+      }
+    },
+    handleKeyDown(e) {
+      this.isScrolling && (this.isScrolling = !1);
+      const {
+        dataItems: t = [],
+        leftRightKeysNavigation: s,
+        filterable: l,
+        disabled: o,
+        virtual: i = {
+          skip: 0,
+          total: 0,
+          pageSize: 0
+        }
+      } = this.$props, r = this.isOpen, a = e.keyCode, d = a === f.home || a === f.end, h = a === f.up || a === f.down, u = !r && (e.altKey && a === f.down || a === f.enter || a === f.space), I = r && (e.altKey && a === f.up || a === f.esc), m = s && (a === f.left || a === f.right), g = h || !l && (m || d), p = this.base.initState();
+      if (p.event = e, !o) {
+        if (d && this.base.vs.enabled)
+          a === f.home ? i.skip !== 0 ? (this.base.triggerOnPageChange(p, 0, i.pageSize), this._navigated = !0) : this.triggerOnChange(t[0], p) : i.skip < i.total - i.pageSize ? (this.base.triggerOnPageChange(p, i.total - i.pageSize, i.pageSize), this._navigated = !0) : this.triggerOnChange(t[t.length - 1], p);
+        else if (r && a === f.enter) {
+          const S = this.focusedIndex();
+          S !== void 0 && this.handleItemSelect(S, p), this.base.togglePopup(p), e.preventDefault();
+        } else
+          u || I ? (this.adaptiveState && this.handleWrapperClick(e), this.base.togglePopup(p), e.preventDefault()) : g && (this.onNavigate(p, a), e.preventDefault());
+        this.applyState(p);
+      }
+    },
+    handleItemClick(e, t) {
+      this.base.handleItemClick(e, t), this.valueDuringOnChange = void 0;
+    },
+    handleFocus(e) {
+      this._skipFocusEvent || this.base.handleFocus(e);
+    },
+    handleBlur(e) {
+      if (this._skipFocusEvent || !this.currentFocused)
+        return;
+      const t = this.isOpen, s = this.base.initState();
+      s.event = e, s.data.currentFocused = !1, s.events.push({
+        type: "blur"
+      }), t && !this.adaptiveState && this.base.togglePopup(s), this.applyState(s);
+    },
+    handleDefaultItemClick(e) {
+      const t = this.base.initState();
+      t.event = e, this.base.togglePopup(t), this.triggerOnChange(this.$props.defaultItem, t), this.applyState(t);
+    },
+    handleWrapperClick(e) {
+      const t = this.base.initState();
+      t.event = e, this.currentFocused || (t.data.currentFocused = !0), this.base.togglePopup(t), this.applyState(t);
+    },
+    handleKeyPress(e) {
+      if (this.$props.filterable || e.keyCode === f.enter)
+        return;
+      let t = String.fromCharCode(e.charCode || e.keyCode);
+      this.$props.ignoreCase && (t = t.toLowerCase()), t === " " && e.preventDefault(), this.searchState = {
+        word: this.searchState.word + t,
+        last: this.searchState.last + t
+      }, this.search(e);
+    },
+    handleListFilterChange(e) {
+      const t = this.base.initState();
+      t.event = e, this.$props.filter === void 0 && (t.data.currentText = e.target.value), this.base.filterChanged(e.target.value, t), t.data.group = void 0, this.applyState(t);
+    },
+    onPopupOpened() {
+      this.filterInput && this.focusElement(this.filterInput.input);
+    },
+    onPopupClosed() {
+      this.currentFocused && setTimeout(() => {
+        this.currentFocused && this.base.wrapper && this.focusElement(this.base.wrapper);
+      });
+    },
+    focusedIndex() {
+      const e = X(this.$props.filter) ? this.$props.filter : this.currentText, {
+        dataItems: t = [],
+        virtual: s = {
+          skip: 0
+        },
+        dataItemKey: l,
+        textField: o,
+        focusedItemIndex: i
+      } = this.$props, r = this.computedValue(), d = !(t.findIndex((h) => y(h, r, l)) < 0 && !this.$props.defaultItem);
+      return !d && e && s.skip === 0 ? i ? i(t, e, o) : t.indexOf(_e(t, e, o)) : !d && s.skip === 0 ? 0 : void 0;
+    },
+    focusElement(e) {
+      this._skipFocusEvent = !0, e.focus(), setTimeout(() => this._skipFocusEvent = !1, 30);
+    },
+    setValidity() {
+      this.select && this.select.setCustomValidity && this.select.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || Ge);
+    },
+    triggerOnChange(e, t) {
+      y(this.computedValue(), e, this.$props.dataItemKey) || (this.$props.value === void 0 && (this.currentValue = e), this.valueDuringOnChange = e, t.events.push({
+        type: "change"
+      }));
+    },
+    applyState(e) {
+      this.base.applyState(e), this.valueDuringOnChange = void 0;
+    },
+    calculateMedia(e) {
+      for (let t of e)
+        this.windowWidth = t.target.clientWidth;
+    },
+    repositionPopup() {
+      this.base.repositionPopup();
+    },
+    onScroll(e) {
+      this.isScrolling = !0;
+      const {
+        vs: t,
+        list: s
+      } = this.base;
+      t.scrollHandler(e);
+      const l = this.base.initState(), {
+        groupField: o
+      } = this.$props;
+      let {
+        dataItems: i = []
+      } = this.$props, r;
+      if (!o || !i.length)
+        return;
+      const a = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : s ? s.children[0].offsetHeight : 0), h = e.target.scrollTop - t.skip * a;
+      o && (i = this.base.getGroupedDataModernMode(i, o), r = i[0][o]);
+      for (let u = 1; u < i.length && !(a * u > h); u++)
+        i[u] && i[u][o] && (r = i[u][o]);
+      r !== this.group && (l.data.group = r, this.applyState(l));
+    }
+  },
+  render() {
+    const {
+      style: e,
+      className: t,
+      label: s,
+      dir: l,
+      virtual: o = {
+        skip: 0
+      },
+      size: i,
+      rounded: r,
+      fillMode: a,
+      dataItemKey: d,
+      dataItems: h = [],
+      disabled: u,
+      tabIndex: I,
+      loading: m,
+      icon: g,
+      svgIcon: p,
+      iconClassName: S,
+      adaptiveTitle: v,
+      header: D,
+      footer: K,
+      groupStickyHeaderItemRender: te
+    } = this.$props, O = this.isOpen, ie = F(this.computedValue(), this.$props.textField), se = !this.$props.validityStyles || this.validity().valid, k = this.base, w = k.vs, L = this.$props.id || this.inputId;
+    w.enabled = this.$props.virtual !== void 0;
+    const V = Object.assign({}, {
+      animate: !0,
+      height: "200px"
+    }, this.$props.popupSettings), ae = Ne(this).toLanguageString(J, Re[J]), T = this.adaptiveState;
+    this.group === void 0 && this.$props.groupField !== void 0 && (this.group = F(this.$props.dataItems[0], this.$props.groupField));
+    const ne = C.call(this, this.$props.valueRender, x.call(this)), le = this.currentFocused, H = this.primitiveValue(), oe = h.findIndex((c) => y(c, H, d)), re = n("span", {
+      class: "k-input-inner",
+      id: this.dropDownListId
+    }, [n("span", {
+      class: "k-input-value-text"
+    }, [ie])]);
+    let de = Oe.call(this, {
+      h: M,
+      template: ne,
+      defaultRendering: re,
+      additionalProps: {
+        value: this.computedValue(),
+        ...this.$data
+      }
+    });
+    const ue = function(c) {
+      return n("select", {
+        name: this.$props.name,
+        id: L,
+        ref: G(this, "select"),
+        tabindex: -1,
+        "aria-hidden": !0,
+        title: this.$props.label,
+        style: {
+          opacity: 0,
+          width: 1,
+          border: 0,
+          zIndex: -1,
+          position: "absolute",
+          left: "50%"
+        }
+      }, [n("option", {
+        value: this.$props.valueMap ? this.$props.valueMap.call(void 0, c) : c
+      }, null)]);
+    }, pe = () => [n("div", {
+      class: "k-actionsheet-titlebar-group k-hbox"
+    }, [n("div", {
+      class: "k-actionsheet-title"
+    }, [n("div", {
+      class: "k-text-center"
+    }, [v]), n("div", {
+      class: "k-actionsheet-subtitle k-text-center"
+    }, null)]), n("div", {
+      class: "k-actionsheet-actions"
+    }, [n(U, {
+      tabIndex: 5,
+      "aria-label": "Cancel",
+      "aria-disabled": "false",
+      type: "button",
+      fillMode: "flat",
+      onClick: this.handleWrapperClick,
+      icon: "x",
+      svgIcon: je
+    }, null)])]), n("div", {
+      class: "k-actionsheet-titlebar-group k-actionsheet-filter"
+    }, [j.call(this)])], he = C.call(this, pe, x.call(this)), ce = () => {
+      const c = k.getTemplateDef.call(this, D, M), b = k.getTemplateDef.call(this, K, M), $ = C.call(this, te, x.call(this));
+      return n("div", {
+        class: "k-list-container"
+      }, [c && n("div", {
+        class: "k-list-header"
+      }, [c]), n("div", {
+        class: B("k-list", {
+          [`k-list-${E[i] || i}`]: T ? !1 : i,
+          "k-list-lg": !!T,
+          "k-virtual-list": w.enabled
+        })
+      }, [P.call(this), this.group && h.length !== 0 && n(Y, {
+        group: this.group,
+        render: $
+      }, null), _.call(this), b && n("div", {
+        class: "k-list-footer"
+      }, [b])])]);
+    }, fe = C.call(this, ce, x.call(this)), ge = function() {
+      return n(Ke, {
+        expand: O,
+        animation: !0,
+        animationStyles: this.animationStyles,
+        className: this.classNameAdaptive,
+        contentClassName: "!k-overflow-hidden",
+        header: he,
+        content: fe,
+        onClose: this.handleWrapperClick,
+        navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
+      }, null);
+    }, P = function() {
+      const {
+        textField: c,
+        defaultItem: b
+      } = this.$props;
+      return b !== void 0 && n(Me, {
+        defaultItem: b,
+        textField: c,
+        selected: y(this.computedValue(), b, d),
+        key: "defaultitemkey",
+        onDefaultitemclick: this.handleDefaultItemClick
+      }, null);
+    }, _ = function() {
+      let c;
+      const {
+        textField: b,
+        groupField: $
+      } = this.$props;
+      let R = this.$props.dataItems || [];
+      const be = C.call(this, this.$props.itemRender, x.call(this)), ye = C.call(this, this.$props.groupHeaderItemRender, x.call(this)), Ie = C.call(this, this.$props.listNoDataRender, x.call(this)), Se = o.skip, ke = `translateY(${w.translate}px)`;
+      return $ && (R = this.base.getGroupedDataModernMode(R, $)), n(Be, {
+        id: this.base.listBoxId,
+        show: O,
+        dataItems: R.slice(),
+        focusedIndex: this.focusedIndex(),
+        value: this.computedValue(),
+        textField: b,
+        valueField: d,
+        optionsGuid: this.base.guid,
+        ref: "list",
+        wrapperStyle: {
+          maxHeight: V.height
+        },
+        wrapperCssClass: "k-list-content",
+        listStyle: w.enabled ? {
+          transform: ke
+        } : void 0,
+        key: "listkey",
+        skip: Se,
+        onListclick: this.handleItemClick,
+        itemRender: be,
+        groupHeaderItemRender: ye,
+        noDataRender: Ie,
+        groupField: $,
+        onScroll: this.onScroll
+      }, We(c = me.call(this)) ? c : {
+        default: () => [c]
+      });
+    }, j = function() {
+      const c = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
+      return this.$props.filterable && n(Te, {
+        value: c,
+        ref: "filterInput",
+        onChange: this.handleListFilterChange,
+        onKeydown: this.handleKeyDown,
+        size: this.$props.size,
+        rounded: this.$props.rounded,
+        fillMode: this.$props.fillMode,
+        ariaControlsId: this.base.listBoxId,
+        ariaActivedescendantId: `option-${this.base.guid}-${this.focusedIndex()}`
+      }, null);
+    }, me = function() {
+      return w.enabled && n("div", {
+        ref: "scrollElement",
+        key: "scrollElementKey"
+      }, null);
+    }, ve = function() {
+      const c = C.call(this, this.$props.groupStickyHeaderItemRender, x.call(this)), b = k.getTemplateDef.call(this, D), $ = k.getTemplateDef.call(this, K);
+      return n(Ve, {
+        ref: "container",
+        onMousedown: ee,
+        dir: l !== void 0 ? l : k.dirCalculated,
+        width: this.popupWidth,
+        popupSettings: {
+          ...V,
+          popupClass: B(V.popupClass, "k-list", {
+            [`k-list-${E[i] || i}`]: i,
+            "k-virtual-list": this.base.vs.enabled
+          }),
+          className: B("k-list-container", V.className),
+          anchor: this.anchor,
+          show: O
+        },
+        onOpen: this.onPopupOpened,
+        onClose: this.onPopupClosed,
+        onBlur: this.handleBlur
+      }, {
+        default: () => [j.call(this), P.call(this), this.group && h.length !== 0 && n(Y, {
+          group: this.group,
+          render: c
+        }, null), b && n("div", {
+          class: "k-list-header"
+        }, [b]), _.call(this), $ && n("div", {
+          class: "k-list-footer"
+        }, [$])]
+      });
+    };
+    this.$props.virtual !== void 0 && (k.vs.skip = o.skip, k.vs.total = o.total, k.vs.pageSize = o.pageSize);
+    const z = [M(function() {
+      return n("span", {
+        ref: G(this, "kendoAnchor"),
+        class: B("k-dropdownlist k-picker", t, {
+          [`k-picker-${E[i] || i}`]: i,
+          [`k-rounded-${Ae[r] || r}`]: r,
+          [`k-picker-${a}`]: a,
+          "k-focus": le,
+          "k-disabled": u,
+          "k-invalid": !se,
+          "k-loading": m,
+          "k-required": this.required
+        }),
+        style: s ? {
+          ...e,
+          width: void 0
+        } : e,
+        dir: l,
+        onMousedown: O ? ee : q,
+        onFocusin: this.handleFocus,
+        onFocusout: this.handleBlur,
+        tabindex: we(I, u),
+        accesskey: this.$props.accessKey,
+        onKeydown: this.handleKeyDown,
+        onKeypress: this.handleKeyPress,
+        role: "combobox",
+        onClick: u ? q : this.handleWrapperClick,
+        "aria-disabled": u || void 0,
+        "aria-haspopup": !0,
+        "aria-expanded": O || !1,
+        "aria-owns": this.base.listBoxId,
+        "aria-activedescendant": O ? "option-" + this.base.guid + "-" + (oe + (o ? o.skip : 0)) : void 0,
+        "aria-label": this.$props.ariaLabel || this.$props.label,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedBy": this.dropDownListId,
+        title: this.$props.title
+      }, [de, m && n(Fe, {
+        name: "loading",
+        class: "k-input-loading-icon",
+        key: "loading"
+      }, null), n(U, {
+        type: "button",
+        tabIndex: -1,
+        size: i,
+        fillMode: a,
+        rounded: null,
+        ariaLabel: ae,
+        class: "k-input-button",
+        icon: g || "caret-alt-down",
+        svgIcon: p || ze,
+        iconClass: S
+      }, null), ue.call(this, H), !T && ve.call(this)]);
+    }.call(this), {
+      ...this.$attrs
+    }), T && ge.call(this)];
+    return s ? n("span", {
+      class: this.spanClassNames,
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur,
+      dir: this.$props.dir
+    }, [z, this.$props.label ? L ? n("label", {
+      for: L,
+      class: "k-floating-label"
+    }, [this.$props.label]) : n("span", {
+      class: "k-label"
+    }, [this.$props.label]) : null]) : z;
+  }
+});
+export {
+  dt as DropDownList
+};