@progress/kendo-vue-dropdowns 9.3.0-develop.2 → 9.3.0-develop.3

package/MultiSelect/MultiSelect.mjs

@@ -5,36 +5,37 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as $e, h as _, createVNode as l, ref as Q, inject as Fe, isVNode as Te } from "vue";
-import { templateRendering as b, getListeners as I, Keys as f, canUseDOM as Oe, getRef as X, guid as Z, classNames as R, kendoThemeMaps as Ve, setRef as we, Icon as Re } from "@progress/kendo-vue-common";
-import { ListContainer as De } from "../common/ListContainer.mjs";
-import { List as Be } from "../common/List.mjs";
-import { TagList as Me } from "./TagList.mjs";
-import { SearchBar as Ae } from "../common/SearchBar.mjs";
-import Le from "../common/DropDownBase.mjs";
-import { GroupStickyHeader as ee } from "../common/GroupStickyHeader.mjs";
-import { ClearButton as He } from "../common/ClearButton.mjs";
-import { ActiveDescendant as L } from "../common/settings.mjs";
-import { getItemValue as x, itemIndexStartsWith as Ee, areSame as te, removeDataItems as H, isPresent as Pe, preventDefaultNonInputs as Ne, matchDataCollections as Ke } from "../common/utils.mjs";
-import { xIcon as _e, plusIcon as je } from "@progress/kendo-svg-icons";
-import { Button as j } from "@progress/kendo-vue-buttons";
-import { MOBILE_MEDIUM_DEVICE as ze, MOBILE_SMALL_DEVICE as We } from "../common/constants.mjs";
-import { ActionSheet as Ge } from "@progress/kendo-vue-layout";
-import { ListFilter as qe } from "../common/ListFilter.mjs";
-import { provideLocalizationService as Ue } from "@progress/kendo-vue-intl";
-import { adaptiveModeFooterCancel as se, messages as ie, adaptiveModeFooterApply as ne } from "../messages/main.mjs";
+import { defineComponent as Ve, h as q, createVNode as r, ref as ee, inject as we, isVNode as He, mergeProps as De } from "vue";
+import { templateRendering as C, getListeners as F, Keys as h, canUseDOM as Re, getRef as te, guid as se, classNames as B, kendoThemeMaps as Be, setRef as Me } from "@progress/kendo-vue-common";
+import { ListContainer as Le } from "../common/ListContainer.mjs";
+import { List as Pe } from "../common/List.mjs";
+import { TagList as Ee } from "./TagList.mjs";
+import { SearchBar as Ne } from "../common/SearchBar.mjs";
+import Ke from "../common/DropDownBase.mjs";
+import { GroupStickyHeader as ie } from "../common/GroupStickyHeader.mjs";
+import { ClearButton as ze } from "../common/ClearButton.mjs";
+import { ActiveDescendant as K } from "../common/settings.mjs";
+import { getItemValue as O, areSame as V, itemIndexStartsWith as _e, removeDataItems as z, isPresent as je, preventDefaultNonInputs as We, matchDataCollections as qe } from "../common/utils.mjs";
+import { xIcon as Ge } from "@progress/kendo-svg-icons";
+import { Button as G } from "@progress/kendo-vue-buttons";
+import { Checkbox as Ue } from "@progress/kendo-vue-inputs";
+import { MOBILE_MEDIUM_DEVICE as Ye, MOBILE_SMALL_DEVICE as Je } from "../common/constants.mjs";
+import { ActionSheet as Qe } from "@progress/kendo-vue-layout";
+import { ListFilter as Xe } from "../common/ListFilter.mjs";
+import { provideLocalizationService as Ze } from "@progress/kendo-vue-intl";
+import { itemsSelectedText as ne, messages as L, adaptiveModeFooterCancel as ae, adaptiveModeFooterApply as le, summaryTagText as oe, selectAllText as re } from "../messages/main.mjs";
 const {
-  sizeMap: z,
-  roundedMap: Ye
-} = Ve;
-function E(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Te(e);
+  sizeMap: U,
+  roundedMap: et
+} = Be;
+function _(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !He(e);
 }
-const Je = "Please enter a valid value!", Qe = (e) => e.preventDefault(), ae = (e, t, s) => !!e != !!t || e.text !== t.text ? !1 : e === t || Ke(e.data, t.data, s), oe = (e) => e === S.CustomItem;
-var S = /* @__PURE__ */ (function(e) {
+const tt = "Please enter a valid value!", de = (e) => e.preventDefault(), ce = (e, t, s) => !!e != !!t || e.text !== t.text ? !1 : e === t || qe(e.data, t.data, s), ue = (e) => e === k.CustomItem;
+var k = /* @__PURE__ */ (function(e) {
   return e[e.None = 0] = "None", e[e.ListItem = 1] = "ListItem", e[e.CustomItem = 2] = "CustomItem", e;
-})(S || {});
-const vt = /* @__PURE__ */ $e({
+})(k || {});
+const kt = /* @__PURE__ */ Ve({
   name: "KendoMultiSelect",
   emits: {
     changemodel: (e) => !0,
@@ -42,6 +43,7 @@ const vt = /* @__PURE__ */ $e({
     filterchange: (e) => !0,
     change: (e) => !0,
     pagechange: (e) => !0,
+    selectallchange: (e) => !0,
     focus: (e) => !0,
     blur: (e) => !0,
     open: (e) => !0,
@@ -170,10 +172,16 @@ const vt = /* @__PURE__ */ $e({
       type: String,
       default: void 0
     },
-    inputAttributes: Object
+    inputAttributes: Object,
+    selectAll: Boolean,
+    checkboxes: Boolean,
+    summarizeAfter: {
+      type: Number,
+      default: 10
+    }
   },
   setup() {
-    const e = Q(null), t = Q(null), s = Fe("kendoLocalizationService", {});
+    const e = ee(null), t = ee(null), s = we("kendoLocalizationService", {});
     return {
       inputRef: e,
       kendoAnchorRef: t,
@@ -182,7 +190,7 @@ const vt = /* @__PURE__ */ $e({
   },
   computed: {
     spanClassNames() {
-      const e = !this.hasMounted || !this.$props.validityStyles || this.validity().valid, t = this.currentText || x(this.computedValue()[0], this.$props.textField);
+      const e = !this.hasMounted || !this.$props.validityStyles || this.validity().valid, t = this.currentText || O(this.computedValue()[0], this.$props.textField);
       return {
         "k-floating-label-container": !0,
         "k-focus": this.currentFocused,
@@ -209,7 +217,7 @@ const vt = /* @__PURE__ */ $e({
     }
   },
   created() {
-    this.observer = null, this.valuesItemsDuringOnChange = null, this._tags = [], this._skipFocusEvent = !1, this.scrollToFocused = !1, this.base = new Le(this), this.anchor = Z(), this.inputId = Z();
+    this.observer = null, this.valuesItemsDuringOnChange = null, this._tags = [], this._skipFocusEvent = !1, this.scrollToFocused = !1, this.base = new Ke(this), this.anchor = se(), this.inputId = se();
   },
   inject: {
     kendoLocalizationService: {
@@ -217,8 +225,8 @@ const vt = /* @__PURE__ */ $e({
     },
     adaptiveModeBreakpoints: {
       default: {
-        small: We,
-        medium: ze
+        small: Je,
+        medium: Ye
       }
     }
   },
@@ -231,18 +239,20 @@ const vt = /* @__PURE__ */ $e({
       currentOpened: !1,
       currentFocusedIndex: void 0,
       currentFocusedTag: void 0,
+      currentSelectAllFocused: !1,
       searchState: {
         word: "",
         last: ""
       },
       suggested: "",
-      activedescendant: L.PopupList,
+      activedescendant: K.PopupList,
       group: void 0,
       isScrolling: !1,
       itemHeight: 0,
       windowWidth: 0,
       popupWidth: void 0,
-      initialAdaptiveRenderingValues: void 0
+      initialAdaptiveRenderingValues: void 0,
+      stickyHeadersHeight: 0
     };
   },
   watch: {
@@ -256,7 +266,7 @@ const vt = /* @__PURE__ */ $e({
       e && t && e.total !== t.total && (this.virtualTotalHasChanged = !0);
     },
     isOpen: function(e) {
-      e ? this.initialAdaptiveRenderingValues = this.base.component.currentValue : this.initialAdaptiveRenderingValues = void 0, setTimeout(() => {
+      e ? (this.initialAdaptiveRenderingValues = this.base.component.currentValue, this.isScrolling = !1) : (this.initialAdaptiveRenderingValues = void 0, this.currentSelectAllFocused = !1), setTimeout(() => {
         const t = document.querySelector(".k-list-item");
         this.itemHeight = this.base.getListItemHeight(t);
       }, 100);
@@ -268,24 +278,29 @@ const vt = /* @__PURE__ */ $e({
       virtual: e,
       groupField: t = "",
       dataItems: s = []
-    } = this.$props, i = e ? e.skip : 0, n = this.isOpen, o = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, r = !o && n, d = o && !n, c = Object.assign({}, {
+    } = this.$props, i = e ? e.skip : 0, n = this.isOpen, a = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, o = !a && n, d = a && !n, c = Object.assign({}, {
       animate: !0,
       height: "200px"
-    }, this.$props.popupSettings), a = this.$refs.list, h = this.$refs.scrollElement;
-    if (a && (this.base.vs.list = a.list, this.base.list = a.list), h && (this.base.vs.scrollElement = h), a && s.length && this.base.vs.scrollerRef(a.$el), !c.animate && d && this.onPopupClosed(), !this.isScrolling)
+    }, this.$props.popupSettings), l = this.$refs.list, f = this.$refs.scrollElement;
+    if (l && (this.base.vs.list = l.list, this.base.list = l.list), f && (this.base.vs.scrollElement = f), l && s.length && this.base.vs.scrollerRef(l.$el), n && this.stickyHeadersHeight === 0 && this.measureStickyHeadersHeight(), !c.animate && d && this.onPopupClosed(), !this.isScrolling)
       if (e && this.virtualTotalHasChanged)
         this.base.vs.calcScrollElementHeight(), this.base.vs.reset(), this.virtualTotalHasChanged = !1;
       else {
         let {
           focusedItem: m,
-          focusedIndex: $
+          focusedIndex: S
         } = this.getFocusedState();
-        t !== "" && ($ = (g = this.base.getGroupedDataModernMode(s, t)) == null ? void 0 : g.indexOf(m)), r && e ? (this.base.scrollToVirtualItem(e, $ - i), this.prevCurrentOpened = !0) : r && !e ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][t], this), this.base.scrollToItem($), this.prevCurrentOpened = !0) : n && o && m && this.base.scrollToItem($ - i);
+        t !== "" && (S = (g = this.base.getGroupedDataModernMode(s, t)) == null ? void 0 : g.indexOf(m)), o && e ? (this.base.vs.container ? (this.base.scrollToVirtualItem(e, S - i), this.base.vs.translate > 0 && S - i < 0 && (this.base.vs.container.scrollTop = this.base.vs.translate)) : this.$nextTick(() => {
+          const T = this.$refs.list;
+          T && (this.base.vs.list = T.list, this.base.list = T.list, this.base.vs.scrollerRef(T.$el));
+          const w = this.$refs.scrollElement;
+          w && (this.base.vs.scrollElement = w), this.base.scrollToVirtualItem(e, S - i), this.base.vs.translate > 0 && S - i < 0 && (this.base.vs.container.scrollTop = this.base.vs.translate);
+        }), this.prevCurrentOpened = !0) : o && !e ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][t], this), this.base.scrollToItem(S), this.prevCurrentOpened = !0) : n && a && m && this.scrollToFocused && this.base.scrollToItem(S - i);
       }
     this.scrollToFocused = !1, this.searchBarRef(), this.setValidity();
   },
   mounted() {
-    this.observer = Oe && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.input = this.inputRef.input, this.base.wrapper = X(this, "kendoAnchor"), this.element = X(this, "kendoAnchor"), this.base.didMount(), this.searchBarRef(), this.setValidity();
+    this.observer = Re && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.input = this.inputRef.input, this.base.wrapper = te(this, "kendoAnchor"), this.element = te(this, "kendoAnchor"), this.base.didMount(), this.searchBarRef(), this.setValidity();
   },
   methods: {
     clearFilter(e) {
@@ -297,12 +312,12 @@ const vt = /* @__PURE__ */ $e({
     },
     findByFieldValue(e, t) {
       return t.map((i) => {
-        const n = this.dataItems.findIndex((o) => x(o, e) === i);
+        const n = this.dataItems.findIndex((a) => O(a, e) === i);
         return this.dataItems[n] || i;
       });
     },
     primitiveValue() {
-      const e = this.computedValue(), t = e.map((s) => x(s, this.valueField));
+      const e = this.computedValue(), t = e.map((s) => O(s, this.valueField));
       return this.valuePrimitive ? t : e;
     },
     validity() {
@@ -314,38 +329,53 @@ const vt = /* @__PURE__ */ $e({
       };
     },
     handleItemSelect(e, t) {
+      this.currentSelectAllFocused && (t.data.currentSelectAllFocused = !1);
       const {
         dataItems: s = [],
         dataItemKey: i,
         virtual: n
-      } = this.$props, o = this.computedValue(), r = n ? n.skip : 0, d = s[e - r], c = o.findIndex((g) => te(g, d, i));
-      let a = [];
-      c !== -1 ? (a = o, a.splice(c, 1)) : a = [...o, d], (this.$props.filter !== void 0 ? this.$props.filter : this.currentText) && !this.adaptiveState && this.clearFilter(t), this.currentFocusedIndex !== void 0 && (t.data.currentFocusedIndex = void 0), this.triggerOnChange(a, t), this.base.triggerPageChangeCornerItems(d, t);
+      } = this.$props, a = this.computedValue(), o = n ? n.skip : 0, d = s[e - o], c = a.findIndex((g) => V(g, d, i));
+      this._lastSelectedOrDeselectedItemIndex = s.findIndex((g) => V(g, d, i));
+      let l = [];
+      c !== -1 ? (l = a, l.splice(c, 1)) : l = [...a, d], (this.$props.filter !== void 0 ? this.$props.filter : this.currentText) && !this.adaptiveState && !this.$props.checkboxes && this.clearFilter(t), t.data.currentFocusedIndex = e, this.triggerOnChange(l, t), this.base.triggerPageChangeCornerItems(d, t);
     },
     onTagDelete(e, t) {
       const s = this.isOpen, i = this.base.initState();
       i.event = t, s && this.base.togglePopup(i), this.currentFocused || (i.data.currentFocused = !0);
       const n = this.computedValue();
-      H(n, e, this.$props.dataItemKey), this.triggerOnChange(n, i), this.applyState(i);
+      z(n, e, this.$props.dataItemKey), this.triggerOnChange(n, i), this.applyState(i);
     },
     onNavigate(e, t) {
       const {
         allowCustom: s,
-        dataItems: i = []
-      } = this.$props, n = this.isOpen, o = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
-        focusedType: r,
-        focusedIndex: d
-      } = this.getFocusedState(), c = s && o, a = oe(r), h = this.base, g = h.vs;
-      if (n && t === f.up && a)
-        this.currentFocusedIndex !== void 0 && (e.data.currentFocusedIndex = void 0);
+        dataItems: i = [],
+        selectAll: n
+      } = this.$props, a = this.isOpen, o = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
+        focusedType: d,
+        focusedIndex: c
+      } = this.getFocusedState(), l = s && o, f = ue(d), g = this.base, m = g.vs;
+      if (this.currentSelectAllFocused) {
+        t === h.down && (e.data.currentSelectAllFocused = !1, l || (this.itemFocus(0, e), this.scrollToFocused = !0)), this.applyState(e);
+        return;
+      }
+      if (n && a && c === -1 && !f) {
+        t === h.down && (e.data.currentSelectAllFocused = !0), this.applyState(e);
+        return;
+      }
+      if (n && a && t === h.up && c === 0 && !l) {
+        e.data.currentSelectAllFocused = !0, e.data.currentFocusedIndex = void 0, this.applyState(e);
+        return;
+      }
+      if (a && t === h.up && f)
+        n && (e.data.currentSelectAllFocused = !0), this.currentFocusedIndex !== void 0 && (e.data.currentFocusedIndex = void 0);
       else {
-        const m = h.navigation.navigate({
+        const S = g.navigation.navigate({
           keyCode: t,
-          current: d,
-          max: (g.enabled ? g.total : i.length) - 1,
-          min: c ? -1 : 0
+          current: c,
+          max: (m.enabled ? m.total : i.length) - 1,
+          min: l ? -1 : 0
         });
-        m !== void 0 && (this.itemFocus(m, e), this.scrollToFocused = !0);
+        S !== void 0 && (this.itemFocus(S, e), this.scrollToFocused = !0);
       }
       this.applyState(e);
     },
@@ -354,68 +384,68 @@ const vt = /* @__PURE__ */ $e({
         dataItems: s = [],
         allowCustom: i,
         virtual: n
-      } = this.$props, o = n ? n.skip : 0, r = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
+      } = this.$props, a = n ? n.skip : 0, o = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
         focusedIndex: d
-      } = this.getFocusedState(), c = i && r, a = s[e - o];
-      a && d !== e ? this.currentFocusedIndex !== e && (t.data.currentFocusedIndex = e, t.data.activedescendant = L.PopupList) : c && e === -1 && this.currentFocusedIndex !== void 0 && (t.data.currentFocusedIndex = void 0), this.base.triggerPageChangeCornerItems(a, t);
+      } = this.getFocusedState(), c = i && o, l = s[e - a];
+      l && d !== e ? this.currentFocusedIndex !== e && (t.data.currentFocusedIndex = e, t.data.activedescendant = K.PopupList) : c && e === -1 && this.currentFocusedIndex !== void 0 && (t.data.currentFocusedIndex = void 0), this.base.triggerPageChangeCornerItems(l, t);
     },
     searchBarRef() {
       this.input && this.currentFocused && setTimeout(() => this.input.focus(), 0);
     },
     onChangeHandler(e) {
       const t = this.base.initState(), s = e && (e.currentTarget && e.currentTarget.value || e.value), i = this.isOpen;
-      t.event = e, this.$props.filter === void 0 && (t.data.currentText = s), t.data.currentFocusedIndex = void 0, i || this.base.togglePopup(t), this.base.filterChanged(s, t), this.$props.filterable && (t.data.group = void 0), this.applyState(t);
+      t.event = e, this.$props.filter === void 0 && (t.data.currentText = s), t.data.currentFocusedIndex = void 0, i ? this.scrollToFocused = !0 : this.base.togglePopup(t), this.base.filterChanged(s, t), this.$props.filterable && (t.data.group = void 0), this.applyState(t);
     },
     clearButtonClick(e) {
       const t = this.isOpen, s = this.base.initState();
       s.event = e, e.stopPropagation(), this.computedValue().length > 0 && this.triggerOnChange([], s), this.currentFocusedIndex !== void 0 && (s.data.currentFocusedIndex = void 0), t && this.base.togglePopup(s);
       const i = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
-      Pe(i) && i !== "" && this.base.filterChanged("", s), this.currentText && (s.data.currentText = ""), this.applyState(s);
+      je(i) && i !== "" && this.base.filterChanged("", s), this.currentText && (s.data.currentText = ""), this.applyState(s);
     },
     onInputKeyDown(e) {
       this.isScrolling && (this.isScrolling = !1);
       const t = e.keyCode, s = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, i = this.isOpen, {
         focusedItem: n
-      } = this.getFocusedState(), o = this.base.initState();
-      if (o.event = e, !s && this.computedValue().length > 0 && (t === f.left || t === f.right || t === f.home || t === f.end || t === f.delete || t === f.backspace))
-        return this.onTagsNavigate(e, o);
-      const r = () => {
-        e.preventDefault(), this.base.togglePopup(o), this.applyState(o);
+      } = this.getFocusedState(), a = this.base.initState();
+      if (a.event = e, !s && this.computedValue().length > 0 && (t === h.left || t === h.right || t === h.home || t === h.end || t === h.delete || t === h.backspace))
+        return this.onTagsNavigate(e, a);
+      const o = () => {
+        e.preventDefault(), this.base.togglePopup(a), this.applyState(a);
       };
-      i ? e.altKey && t === f.up ? r() : t === f.up || t === f.down ? (e.preventDefault(), this.onNavigate(o, t)) : t === f.enter ? (e.preventDefault(), this.$props.allowCustom && s && n === null ? this.customItemSelect(e) : this.selectFocusedItem(e)) : t === f.esc && (this.adaptiveState && this.handleWrapperClick(e), r()) : e.altKey && t === f.down && r();
+      i ? e.altKey && t === h.up ? o() : t === h.up || t === h.down ? (e.preventDefault(), this.onNavigate(a, t)) : t === h.enter || t === h.space && this.currentSelectAllFocused ? (e.preventDefault(), this.currentSelectAllFocused ? this.toggleSelectAll(e) : this.$props.allowCustom && s && n === null ? this.customItemSelect(e) : this.selectFocusedItem(e)) : t === h.esc && (this.adaptiveState && this.handleWrapperClick(e), o()) : (e.altKey && t === h.down || t === h.space && this.$props.selectAll) && o();
     },
     onTagsNavigate(e, t) {
-      const s = e.keyCode, i = this.currentFocusedTag, n = this._tags, o = this.$props.dataItemKey;
-      let r = i ? n.findIndex((a) => ae(a, i, o)) : -1, d;
-      const c = r !== -1;
-      if (s === f.left)
-        c ? r = Math.max(0, r - 1) : r = n.length - 1, d = n[r];
-      else if (s === f.right)
-        r === n.length - 1 ? d = void 0 : c && (r = Math.min(n.length - 1, r + 1), d = n[r]);
-      else if (s === f.home)
+      const s = e.keyCode, i = this.currentFocusedTag, n = this._tags, a = this.$props.dataItemKey;
+      let o = i ? n.findIndex((l) => ce(l, i, a)) : -1, d;
+      const c = o !== -1;
+      if (s === h.left)
+        c ? o = Math.max(0, o - 1) : o = n.length - 1, d = n[o];
+      else if (s === h.right)
+        o === n.length - 1 ? d = void 0 : c && (o = Math.min(n.length - 1, o + 1), d = n[o]);
+      else if (s === h.home)
         d = n[0];
-      else if (s === f.end)
+      else if (s === h.end)
         d = n[n.length - 1];
-      else if (s === f.delete) {
+      else if (s === h.delete) {
         if (c) {
-          const a = this.computedValue();
-          H(a, n[r].data, o), this.triggerOnChange(a, t);
+          const l = this.computedValue();
+          z(l, n[o].data, a), this.triggerOnChange(l, t);
         }
-      } else if (s === f.backspace) {
-        const a = this.computedValue();
+      } else if (s === h.backspace) {
+        const l = this.computedValue();
         if (c)
-          H(a, n[r].data, o), this.triggerOnChange(a, t);
+          z(l, n[o].data, a), this.triggerOnChange(l, t);
         else if (!c && n.length) {
-          const h = n.pop();
-          H(a, h.data, o), this.triggerOnChange(a, t);
+          const f = n.pop();
+          z(l, f.data, a), this.triggerOnChange(l, t);
         }
       }
-      d !== i && (t.data.currentFocusedTag = d, t.data.activedescendant = L.TagsList), this.applyState(t);
+      d !== i && (t.data.currentFocusedTag = d, t.data.activedescendant = K.TagsList), this.applyState(t);
     },
     triggerOnChange(e, t) {
       this.$props.value === void 0 && (t.data.currentValue = [...e]), this.valuesItemsDuringOnChange = [], this.setItems(e, this.valuesItemsDuringOnChange), t.events.push({
         type: "change"
-      });
+      }), this.base.repositionPopup();
     },
     selectFocusedItem(e) {
       const {
@@ -429,52 +459,81 @@ const vt = /* @__PURE__ */ $e({
     setItems(e, t) {
       t.length = 0, t.push(...e);
     },
+    shouldKeepNoFocusOnOpen(e, t) {
+      return this.$props.selectAll && t === void 0 && this.computedValue().length === 0 && !(this.$props.allowCustom && e);
+    },
     getFocusedState() {
-      const e = this.currentFocusedIndex, t = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
+      if (this.currentSelectAllFocused)
+        return {
+          focusedType: k.None,
+          focusedIndex: -1
+        };
+      const e = this.currentFocusedIndex, t = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
+      if (this.shouldKeepNoFocusOnOpen(t, e))
+        return {
+          focusedType: k.None,
+          focusedIndex: -1
+        };
+      const {
         allowCustom: s,
         dataItems: i = [],
         dataItemKey: n,
-        virtual: o,
-        textField: r,
-        focusedItemIndex: d = Ee
-      } = this.$props, c = o && o.skip || 0;
-      let a;
+        virtual: a,
+        textField: o,
+        focusedItemIndex: d = _e
+      } = this.$props, c = a && a.skip || 0;
+      let l;
       if (e !== void 0)
         return {
           focusedIndex: e,
           focusedItem: i[e - c],
-          focusedType: S.ListItem
+          focusedType: k.ListItem
         };
-      const h = this.computedValue();
+      const f = this.computedValue();
       if (s && t)
         return {
           focusedItem: null,
           focusedIndex: -1,
-          focusedType: S.CustomItem
+          focusedType: k.CustomItem
         };
       if (t)
-        return a = d(i, t, r), {
-          focusedItem: i[a],
-          focusedIndex: a + c,
-          focusedType: S.ListItem
+        return l = d(i, t, o), {
+          focusedItem: i[l],
+          focusedIndex: l + c,
+          focusedType: k.ListItem
         };
-      if (h.length) {
-        const g = h[h.length - 1];
-        return a = i.findIndex((m) => te(m, g, n)), i[a] !== void 0 ? {
-          focusedIndex: a + c,
-          focusedItem: i[a],
-          focusedType: S.ListItem
+      if (f.length) {
+        if (this.$props.selectAll) {
+          const m = f[f.length - 1], S = i.findIndex((T) => V(T, m, n));
+          return S !== -1 ? {
+            focusedIndex: S + c,
+            focusedItem: i[S],
+            focusedType: k.ListItem
+          } : c === 0 ? {
+            focusedItem: i[0],
+            focusedIndex: 0,
+            focusedType: k.ListItem
+          } : {
+            focusedType: k.None,
+            focusedIndex: -1
+          };
+        }
+        const g = f[f.length - 1];
+        return l = i.findIndex((m) => V(m, g, n)), i[l] !== void 0 ? {
+          focusedIndex: l + c,
+          focusedItem: i[l],
+          focusedType: k.ListItem
         } : {
-          focusedType: S.None,
+          focusedType: k.None,
           focusedIndex: -1
         };
       }
       return c === 0 ? {
         focusedItem: i[0],
         focusedIndex: 0,
-        focusedType: S.ListItem
+        focusedType: k.ListItem
       } : {
-        focusedType: S.None,
+        focusedType: k.None,
         focusedIndex: -1
       };
     },
@@ -490,8 +549,8 @@ const vt = /* @__PURE__ */ $e({
         [s]: t
       } : t;
       this.currentText !== void 0 && (i.data.currentText = ""), i.data.currentFocusedIndex = void 0, this.base.filterChanged("", i);
-      const o = [...this.computedValue(), n];
-      this.triggerOnChange(o, i), this.base.togglePopup(i), this.applyState(i);
+      const a = [...this.computedValue(), n];
+      this.triggerOnChange(a, i), this.base.togglePopup(i), this.applyState(i);
     },
     handleWrapperClick(e) {
       const t = this.isOpen, s = this.input;
@@ -499,7 +558,7 @@ const vt = /* @__PURE__ */ $e({
       const i = this.base.initState();
       i.event = e, this.currentFocused || (i.events.push({
         type: "focus"
-      }), i.data.currentFocused = !0), this.clearFilter(i), this.base.togglePopup(i), this.applyState(i);
+      }), i.data.currentFocused = !0), this.base.togglePopup(i), this.applyState(i);
     },
     onCancel(e) {
       const t = this.base.initState();
@@ -511,7 +570,7 @@ const vt = /* @__PURE__ */ $e({
     },
     handleItemClick(e, t) {
       const s = this.base.initState();
-      s.event = t, this.handleItemSelect(e, s), this.$props.autoClose && !this.adaptiveState && this.base.togglePopup(s), this.applyState(s);
+      s.event = t, this.handleItemSelect(e, s), this.$props.autoClose && !this.$props.checkboxes && !this.adaptiveState && this.base.togglePopup(s), this.applyState(s);
     },
     handleBlur(e) {
       if (!this.currentFocused || this._skipFocusEvent)
@@ -520,7 +579,7 @@ const vt = /* @__PURE__ */ $e({
         allowCustom: i,
         filterable: n
       } = this.$props;
-      s.event = e, s.data.currentFocused = !1, s.events.push({
+      s.event = e, s.data.currentFocused = !1, s.data.currentSelectAllFocused = !1, s.events.push({
         type: "blur"
       }), t && !this.adaptiveState && (this.currentOpened && (s.data.currentOpened = !1), s.events.push({
         type: "close"
@@ -530,12 +589,21 @@ const vt = /* @__PURE__ */ $e({
       this._skipFocusEvent || this.base.handleFocus(e);
     },
     onPopupOpened() {
-      this.input && this.currentFocused && this.focusElement(this.input);
+      this.input && this.currentFocused && this.focusElement(this.input), this.measureStickyHeadersHeight();
     },
     onPopupClosed() {
       this.currentFocused && setTimeout(() => {
         this.currentFocused && this.focusElement(this.input);
-      }, 0);
+      }, 0), this.stickyHeadersHeight = 0;
+    },
+    measureStickyHeadersHeight() {
+      let e = 0;
+      const t = document.getElementById(this.base.listBoxId), s = t == null ? void 0 : t.closest(".k-list");
+      if (s) {
+        const i = s.querySelector(".k-list-sticky-header"), n = s.querySelector(".k-list-group-sticky-header");
+        i && (e += i.offsetHeight), n && (e += n.offsetHeight);
+      }
+      this.stickyHeadersHeight = e;
     },
     focusElement(e) {
       this._skipFocusEvent = !0, e.focus(), setTimeout(() => this._skipFocusEvent = !1, 30);
@@ -544,7 +612,7 @@ const vt = /* @__PURE__ */ $e({
       this.base.applyState(e), this.valuesItemsDuringOnChange = null;
     },
     setValidity() {
-      this.input && this.input.setCustomValidity && this.input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || Je);
+      this.input && this.input.setCustomValidity && this.input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || tt);
     },
     focus() {
       this.input && this.input.focus();
@@ -568,15 +636,61 @@ const vt = /* @__PURE__ */ $e({
         groupField: n
       } = this.$props;
       let {
-        dataItems: o = []
-      } = this.$props, r;
-      if (!n || !o.length)
+        dataItems: a = []
+      } = this.$props, o;
+      if (!n || !a.length)
         return;
-      const d = s && ((g = s.querySelector(".k-list-item")) == null ? void 0 : g.offsetHeight) || 0, c = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : d), h = e.target.scrollTop - t.skip * c;
-      n && (o = this.base.getGroupedDataModernMode(o, n), o = this.base.getGroupedDataModernMode(o, n), r = o[0][n]);
-      for (let m = 1; m < o.length && !(c * m > h); m++)
-        o[m] && o[m][n] && (r = o[m][n]);
-      r !== this.group && (i.data.group = r, this.applyState(i));
+      const d = s && ((g = s.querySelector(".k-list-item")) == null ? void 0 : g.offsetHeight) || 0, c = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : d), f = e.target.scrollTop - t.skip * c;
+      n && (a = this.base.getGroupedDataModernMode(a, n), a = this.base.getGroupedDataModernMode(a, n), o = a[0][n]);
+      for (let m = 1; m < a.length && !(c * m > f); m++)
+        a[m] && a[m][n] && (o = a[m][n]);
+      o !== this.group && (i.data.group = o, this.applyState(i));
+    },
+    getSelectableItems() {
+      return (this.$props.dataItems || []).filter((t) => !(t != null && t.disabled));
+    },
+    areAllSelectableItemsSelected() {
+      const e = this.getSelectableItems();
+      if (e.length === 0 || !e.every((n) => this.computedValue().some((a) => V(a, n, this.$props.dataItemKey))))
+        return !1;
+      const {
+        virtual: s,
+        dataItemKey: i
+      } = this.$props;
+      return !(s && s.total !== void 0 && (i ? this.computedValue().filter((a) => (a == null ? void 0 : a[i]) !== void 0).length : this.computedValue().length) < s.total);
+    },
+    areSomeSelectableItemsSelected() {
+      return this.computedValue().length > 0;
+    },
+    handleSelectAllItemClick(e) {
+      e.stopPropagation(), this.toggleSelectAll(e);
+    },
+    handleSelectAllItemKeyDown(e) {
+      e.keyCode !== h.enter && e.keyCode !== h.space || (e.preventDefault(), this.toggleSelectAll(e));
+    },
+    toggleSelectAll(e) {
+      if (this.$props.disabled)
+        return;
+      const t = this.areAllSelectableItemsSelected(), s = this.getSelectableItems();
+      if (s.length === 0)
+        return;
+      const i = {
+        event: e,
+        target: this,
+        allSelected: !t,
+        defaultPrevented: !1,
+        preventDefault() {
+          this.defaultPrevented = !0;
+        }
+      };
+      if (this.$emit("selectallchange", i), i.defaultPrevented)
+        return;
+      const n = this.base.initState();
+      n.data.currentFocusedIndex = void 0;
+      let a = [];
+      t ? a = this.computedValue().filter((o) => !s.some((d) => V(d, o, this.$props.dataItemKey))) : (a = [...this.computedValue()], s.forEach((o) => {
+        a.some((c) => V(c, o, this.$props.dataItemKey)) || a.push(o);
+      })), n.data.currentSelectAllFocused = !0, this.triggerOnChange(a, n), this.applyState(n);
     }
   },
   render() {
@@ -586,178 +700,228 @@ const vt = /* @__PURE__ */ $e({
       dir: s,
       disabled: i,
       tags: n,
-      textField: o,
-      dataItemKey: r,
+      textField: a,
+      dataItemKey: o,
       virtual: d,
       loading: c,
-      size: a,
-      fillMode: h,
+      size: l,
+      fillMode: f,
       rounded: g,
       tagsRounded: m,
-      removeTagIcon: $,
-      adaptiveTitle: re,
-      header: P,
-      footer: W,
-      inputAttributes: le,
-      groupStickyHeaderItemRender: de,
-      dataItems: F = []
-    } = this.$props, ue = this.currentFocused, D = Object.assign({}, {
+      removeTagIcon: S,
+      adaptiveTitle: T,
+      header: w,
+      footer: Y,
+      inputAttributes: he,
+      groupStickyHeaderItemRender: pe,
+      dataItems: H = []
+    } = this.$props, fe = this.currentFocused, D = Object.assign({}, {
       animate: !0,
       height: "200px"
-    }, this.$props.popupSettings), B = this.currentFocusedTag, G = this.computedValue(), M = (this.$props.filter !== void 0 ? this.$props.filter : this.currentText) || "", ce = !c && (!!M || G.length > 0), y = this.base.vs, N = this.$props.id || this.inputId, pe = b.call(this, this.$props.tagRender, I.call(this)), A = this.isOpen, T = this.adaptiveState, q = Ue(this);
-    this.group === void 0 && this.$props.groupField !== void 0 && (this.group = x(this.$props.dataItems[0], this.$props.groupField)), y.enabled = d !== void 0, d !== void 0 && (y.skip = d.skip, y.total = d.total, y.pageSize = d.pageSize);
-    let v = [];
-    this.initialAdaptiveRenderingValues ? [...this.initialAdaptiveRenderingValues].forEach((p) => {
-      v.push({
-        text: x(p, o),
-        data: [p]
-      });
-    }) : n === void 0 ? this.computedValue().forEach((u) => {
-      v.push({
-        text: x(u, o),
-        data: [u]
+    }, this.$props.popupSettings), P = this.currentFocusedTag, J = this.computedValue(), E = (this.$props.filter !== void 0 ? this.$props.filter : this.currentText) || "", ge = !c && (!!E || J.length > 0), A = this.base.vs, j = this.$props.id || this.inputId, me = C.call(this, this.$props.tagRender, F.call(this)), N = this.isOpen, R = this.adaptiveState, M = Ze(this);
+    this.group === void 0 && this.$props.groupField !== void 0 && (this.group = O(this.$props.dataItems[0], this.$props.groupField)), A.enabled = d !== void 0, d !== void 0 && (A.skip = d.skip, A.total = d.total, A.pageSize = d.pageSize);
+    let x = [];
+    if (this.initialAdaptiveRenderingValues)
+      [...this.initialAdaptiveRenderingValues].forEach((p) => {
+        x.push({
+          text: O(p, a),
+          data: [p]
+        });
       });
-    }) : v.push(...n), v.length > 0 && this.setItems(v, this._tags);
-    const he = !this.$props.validityStyles || this.validity().valid, fe = function(u) {
+    else if (n === void 0) {
+      const {
+        allowCustom: u,
+        selectAll: p,
+        dataItemKey: v
+      } = this.$props;
+      if (u && p && v) {
+        const I = this.computedValue(), b = I.filter((y) => y[v] !== void 0), $ = I.filter((y) => y[v] === void 0);
+        if (b.length > 0) {
+          const y = M.toLanguageString(ne, L[ne]).replace("{0}", b.length.toString());
+          x.push({
+            text: y,
+            data: [...b]
+          });
+        }
+        $.forEach((y) => {
+          x.push({
+            text: O(y, a),
+            data: [y]
+          });
+        });
+      } else
+        this.computedValue().forEach((I) => {
+          x.push({
+            text: O(I, a),
+            data: [I]
+          });
+        });
+    } else
+      x.push(...n);
+    x.length > 0 && this.setItems(x, this._tags);
+    const ve = !this.$props.validityStyles || this.validity().valid, Se = function(u) {
       const p = this.activedescendant, {
-        placeholder: k
+        placeholder: v
       } = this.$props, {
-        focusedIndex: O
-      } = this.getFocusedState(), C = v.length === 0 || G.length === 0 && !M ? k : void 0, V = p === L.TagsList && B !== void 0 ? `tag-${this.base.guid}-${B.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${O}`;
-      return l(Ae, {
+        focusedIndex: I
+      } = this.getFocusedState(), b = x.length === 0 || J.length === 0 && !E ? v : void 0, $ = p === K.TagsList && P !== void 0 ? `tag-${this.base.guid}-${P.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${I}`;
+      return r(Ne, {
         id: u,
-        size: Math.max((C || "").length, M.length, 1),
+        size: Math.max((b || "").length, E.length, 1),
         tabIndex: this.$props.tabIndex,
         accessKey: this.$props.accessKey,
-        placeholder: C,
-        value: T ? "" : M,
+        placeholder: b,
+        value: R ? "" : E,
         onChange: this.onChangeHandler,
         onBlur: this.handleBlur,
         onKeydown: this.onInputKeyDown,
-        ref: (w) => {
-          this.inputRef = w;
+        ref: (y) => {
+          this.inputRef = y;
         },
         disabled: i,
-        expanded: A,
+        expanded: N,
         owns: this.base.listBoxId,
-        activedescendant: V,
+        activedescendant: $,
         "aria-describedBy": `tagslist-${this.base.guid}${this.$props.ariaDescribedBy ? " " + this.$props.ariaDescribedBy : ""}`,
         "aria-labelledBy": this.$props.ariaLabelledBy,
         "aria-label": this.$props.ariaLabel,
-        inputAttributes: le
+        inputAttributes: he
       }, null);
-    }, U = function() {
+    }, Ie = () => {
+      const {
+        checkboxes: u,
+        selectAll: p
+      } = this.$props;
+      if (!p)
+        return null;
+      const v = this.areAllSelectableItemsSelected(), I = !v && this.areSomeSelectableItemsSelected(), b = M.toLanguageString(re, L[re]), $ = this.currentSelectAllFocused;
+      return r("div", {
+        class: "k-list-sticky-header"
+      }, [r("div", De({
+        class: B("k-list-sticky-header-item", {
+          "k-selected": !u && v,
+          "k-focus": $
+        }),
+        "aria-label": b
+      }, !u && {
+        tabindex: 0,
+        "aria-selected": v
+      }, {
+        onClick: this.handleSelectAllItemClick,
+        onKeydown: this.handleSelectAllItemKeyDown
+      }), [u && r(Ue, {
+        checked: v,
+        value: I ? null : v,
+        tabIndex: -1
+      }, null), r("span", {
+        class: "k-list-item-text"
+      }, [b])])]);
+    }, Q = function() {
       let u;
       const {
         groupField: p
-      } = this.$props, k = b.call(this, this.$props.itemRender, I.call(this)), O = b.call(this, this.$props.groupHeaderItemRender, I.call(this)), C = b.call(this, this.$props.listNoDataRender, I.call(this)), V = d ? d.skip : 0, {
-        focusedIndex: w
-      } = this.getFocusedState(), K = `translateY(${y.translate}px)`;
-      let J = F;
-      return p && (J = this.base.getGroupedDataModernMode(F, p)), l(Be, {
+      } = this.$props, v = C.call(this, this.$props.itemRender, F.call(this)), I = C.call(this, this.$props.groupHeaderItemRender, F.call(this)), b = C.call(this, this.$props.listNoDataRender, F.call(this)), $ = d ? d.skip : 0, {
+        focusedIndex: y
+      } = this.getFocusedState(), W = `translateY(${A.translate}px)`;
+      let Z = H;
+      return p && (Z = this.base.getGroupedDataModernMode(H, p)), r(Pe, {
         id: this.base.listBoxId,
-        show: A,
-        dataItems: J.slice(),
-        focusedIndex: w,
+        show: N,
+        dataItems: Z.slice(),
+        focusedIndex: y,
         value: this.computedValue(),
-        textField: o,
-        valueField: r,
+        textField: a,
+        valueField: o,
         optionsGuid: this.base.guid,
         ref: "list",
         wrapperStyle: {
-          maxHeight: T ? void 0 : D.height
+          maxHeight: R ? void 0 : this.stickyHeadersHeight > 0 && D.height ? `calc(${D.height} - ${this.stickyHeadersHeight}px)` : D.height
         },
         wrapperCssClass: "k-list-content",
-        listStyle: y.enabled ? {
-          transform: K
+        listStyle: A.enabled ? {
+          transform: W
         } : void 0,
         key: "listKey",
-        skip: V,
+        skip: $,
         onListclick: this.handleItemClick,
-        itemRender: k,
-        groupHeaderItemRender: O,
-        noDataRender: C,
+        itemRender: v,
+        groupHeaderItemRender: I,
+        noDataRender: b,
         groupField: p,
-        onScroll: this.onScroll
-      }, E(u = ge.call(this)) ? u : {
+        onScroll: this.onScroll,
+        showSelectionCheckbox: this.$props.checkboxes
+      }, _(u = be.call(this)) ? u : {
         default: () => [u]
       });
-    }, ge = function() {
-      return y.enabled && l("div", {
+    }, be = function() {
+      return A.enabled && r("div", {
         ref: "scrollElement",
         key: "scrollElementKey"
       }, null);
-    }, me = function() {
+    }, ye = function() {
       const u = this.base, {
         allowCustom: p
-      } = this.$props, k = b.call(this, this.$props.groupStickyHeaderItemRender, I.call(this)), O = u.getTemplateDef.call(this, P), C = u.getTemplateDef.call(this, W), V = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
-        focusedType: w
-      } = this.getFocusedState(), K = p && V && l("div", {
-        class: "k-list",
+      } = this.$props, v = C.call(this, this.$props.groupStickyHeaderItemRender, F.call(this)), I = u.getTemplateDef.call(this, w), b = u.getTemplateDef.call(this, Y), $ = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
+        focusedType: y
+      } = this.getFocusedState(), W = p && $ && r("div", {
+        class: B("k-list-custom-value", {
+          "k-focus": ue(y)
+        }),
         key: "customitem",
-        onClick: this.customItemSelect
-      }, [l("div", {
-        class: R("k-item k-custom-item", {
-          "k-focus": oe(w)
-        })
-      }, [V, l(Re, {
-        name: "plus",
-        icon: je,
-        style: {
-          float: "right"
-        }
-      }, null)])]);
-      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = x(F[0], this.$props.groupField)), l(De, {
+        onClick: this.customItemSelect,
+        onMousedown: de
+      }, [$]);
+      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = O(H[0], this.$props.groupField)), r(Le, {
         ref: "container",
-        onMousedown: Qe,
+        onMousedown: de,
         dir: s !== void 0 ? s : u.dirCalculated,
         onBlur: this.handleBlur,
         width: this.popupWidth,
         popupSettings: {
           ...D,
           anchor: this.anchor,
-          show: A,
+          show: N,
           onOpen: this.onPopupOpened,
           onClose: this.onPopupClosed,
-          popupClass: R(D.popupClass, "k-list", {
-            [`k-list-${z[a] || a}`]: a,
+          popupClass: B(D.popupClass, "k-list", {
+            [`k-list-${U[l] || l}`]: l,
             "k-virtual-list": this.base.vs.enabled
           }),
-          className: R("k-list-container", D.className)
+          className: B("k-list-container", D.className)
         },
-        itemsCount: F.length
+        itemsCount: H.length
       }, {
-        default: () => [O && l("div", {
+        default: () => [I && r("div", {
           class: "k-list-header"
-        }, [O]), K, this.group && F.length !== 0 && l(ee, {
+        }, [I]), Ie.call(this), this.group && H.length !== 0 && r(ie, {
           group: this.group,
-          render: k
-        }, null), U.call(this), C && l("div", {
+          render: v
+        }, null), W, Q.call(this), b && r("div", {
           class: "k-list-footer"
-        }, [C]), d && P]
+        }, [b]), d && w]
       });
-    }, ve = function() {
+    }, ke = function() {
       const u = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
-      return this.$props.filterable && l(qe, {
+      return this.$props.filterable && r(Xe, {
         value: u,
         ref: "filterInput",
         onChange: this.onChangeHandler,
         onKeydown: this.onInputKeyDown,
-        size: a,
+        size: l,
         rounded: g,
-        fillMode: h
+        fillMode: f
       }, null);
-    }, be = () => [l("div", {
+    }, xe = () => [r("div", {
       class: "k-actionsheet-titlebar-group k-hbox"
-    }, [l("div", {
+    }, [r("div", {
       class: "k-actionsheet-title"
-    }, [l("div", {
+    }, [r("div", {
       class: "k-text-center"
-    }, [re]), l("div", {
+    }, [T]), r("div", {
       class: "k-actionsheet-subtitle k-text-center"
-    }, null)]), l("div", {
+    }, null)]), r("div", {
       class: "k-actionsheet-actions"
-    }, [l(j, {
+    }, [r(G, {
       tabIndex: 5,
       "aria-label": "Cancel",
       "aria-disabled": "false",
@@ -765,72 +929,72 @@ const vt = /* @__PURE__ */ $e({
       fillMode: "flat",
       onClick: this.onCancel,
       icon: "x",
-      svgIcon: _e
-    }, null)])]), l("div", {
+      svgIcon: Ge
+    }, null)])]), r("div", {
       class: "k-actionsheet-titlebar-group k-actionsheet-filter"
-    }, [ve.call(this)])], Ie = b.call(this, be, I.call(this)), Se = () => {
-      const u = q.toLanguageString(se, ie[se]), p = q.toLanguageString(ne, ie[ne]);
-      return [l(j, {
+    }, [ke.call(this)])], $e = C.call(this, xe, F.call(this)), Ce = () => {
+      const u = M.toLanguageString(ae, L[ae]), p = M.toLanguageString(le, L[le]);
+      return [r(G, {
         size: "large",
         "aria-label": u,
         "aria-disabled": "false",
         type: "button",
         onClick: this.onCancel
-      }, E(u) ? u : {
+      }, _(u) ? u : {
         default: () => [u]
-      }), l(j, {
+      }), r(G, {
         themeColor: "primary",
         size: "large",
         "aria-label": p,
         "aria-disabled": "false",
         type: "button",
         onClick: this.handleWrapperClick
-      }, E(p) ? p : {
+      }, _(p) ? p : {
         default: () => [p]
       })];
-    }, ye = b.call(this, Se, I.call(this)), ke = () => {
-      const u = this.base.getTemplateDef.call(this, P, _), p = this.base.getTemplateDef.call(this, W, _), k = b.call(this, de, I.call(this));
-      return l("div", {
+    }, Fe = C.call(this, Ce, F.call(this)), Te = () => {
+      const u = this.base.getTemplateDef.call(this, w, q), p = this.base.getTemplateDef.call(this, Y, q), v = C.call(this, pe, F.call(this));
+      return r("div", {
         class: "k-list-container"
-      }, [u && l("div", {
+      }, [u && r("div", {
         class: "k-list-header"
-      }, [u]), l("div", {
-        class: R("k-list", {
-          [`k-list-${z[a] || a}`]: T ? !1 : a,
-          "k-list-lg": !!T,
-          "k-virtual-list": y.enabled
+      }, [u]), r("div", {
+        class: B("k-list", {
+          [`k-list-${U[l] || l}`]: R ? !1 : l,
+          "k-list-lg": !!R,
+          "k-virtual-list": A.enabled
         })
-      }, [this.group && F.length !== 0 && l(ee, {
+      }, [this.group && H.length !== 0 && r(ie, {
         group: this.group,
-        render: k
-      }, null), U.call(this), p && l("div", {
+        render: v
+      }, null), Q.call(this), p && r("div", {
         class: "k-list-footer"
       }, [p])])]);
-    }, Ce = b.call(this, ke, I.call(this)), xe = function() {
-      return l(Ge, {
-        expand: A,
+    }, Ae = C.call(this, Te, F.call(this)), Oe = function() {
+      return r(Qe, {
+        expand: N,
         animation: !0,
         animationStyles: this.animationStyles,
         className: this.classNameAdaptive,
         contentClassName: "!k-overflow-hidden",
         footerClassName: "k-actions k-actions-stretched",
-        header: Ie,
-        content: Ce,
-        footer: ye,
+        header: $e,
+        content: Ae,
+        footer: Fe,
         onClose: this.onCancel,
         navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
       }, null);
-    }, Y = [_(function() {
+    }, X = [q(function() {
       let u;
-      return l("span", {
-        ref: we(this, "kendoAnchor"),
-        class: R("k-multiselect", "k-input", {
-          [`k-input-${z[a] || a}`]: a,
-          [`k-rounded-${Ye[g] || g}`]: g,
-          [`k-input-${h}`]: h,
-          "k-focus": ue && !i,
+      return r("span", {
+        ref: Me(this, "kendoAnchor"),
+        class: B("k-multiselect", "k-input", {
+          [`k-input-${U[l] || l}`]: l,
+          [`k-rounded-${et[g] || g}`]: g,
+          [`k-input-${f}`]: f,
+          "k-focus": fe && !i,
           "k-disabled": i,
-          "k-invalid": !he,
+          "k-invalid": !ve,
           "k-loading": c,
           "k-required": this.required
         }),
@@ -841,38 +1005,40 @@ const vt = /* @__PURE__ */ $e({
         dir: s,
         onFocusin: this.handleFocus,
         onClick: this.handleWrapperClick,
-        onMousedown: Ne
-      }, [l(Me, {
-        removeTagIcon: $,
+        onMousedown: We
+      }, [r(Ee, {
+        removeTagIcon: S,
         tagsRounded: m,
-        size: a,
-        fillMode: h,
-        tagRender: pe,
+        size: l,
+        fillMode: f,
+        tagRender: me,
         onTagdelete: this.onTagDelete,
-        dataItems: v,
+        dataItems: x,
         guid: this.base.guid,
-        focused: B ? v.find((p) => ae(p, B, r)) : void 0
-      }, E(u = fe.call(this, N)) ? u : {
+        summarizeAfter: this.$props.summarizeAfter,
+        summaryText: this.$props.summarizeAfter && x.length > this.$props.summarizeAfter ? M.toLanguageString(oe, L[oe]).replace("{0}", (x.length - this.$props.summarizeAfter).toString()) : void 0,
+        focused: P ? x.find((p) => ce(p, P, o)) : void 0
+      }, _(u = Se.call(this, j)) ? u : {
         default: () => [u]
-      }), v.length > 0 && ce && l(He, {
+      }), x.length > 0 && ge && r(ze, {
         onClearclick: this.clearButtonClick
-      }, null), l("span", {
+      }, null), r("span", {
         class: c ? "k-input-loading-icon k-icon k-i-loading" : void 0
-      }, null), !T && me.call(this)]);
+      }, null), !R && ye.call(this)]);
     }.call(this), {
       ...this.$attrs
-    }), T && xe.call(this)];
-    return t ? l("span", {
+    }), R && Oe.call(this)];
+    return t ? r("span", {
       class: this.spanClassNames,
       dir: this.$props.dir
-    }, [Y, this.$props.label ? N ? l("label", {
-      for: N,
+    }, [X, this.$props.label ? j ? r("label", {
+      for: j,
       class: "k-floating-label"
-    }, [this.$props.label]) : l("span", {
+    }, [this.$props.label]) : r("span", {
       class: "k-label"
-    }, [this.$props.label]) : null]) : Y;
+    }, [this.$props.label]) : null]) : X;
   }
 });
 export {
-  vt as MultiSelect
+  kt as MultiSelect
 };