@progress/kendo-vue-dropdowns 6.1.0-develop.1 → 6.1.0-develop.3

package/MultiSelect/MultiSelect.mjs

@@ -5,36 +5,36 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as $e, ref as Q, inject as Fe, h as _, createVNode as r, isVNode as Te } from "vue";
-import { guid as X, canUseDOM as Oe, getRef as Z, Keys as f, templateRendering as b, getListeners as I, classNames as R, setRef as Ve, kendoThemeMaps 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 { defineComponent as Fe, ref as Q, inject as Te, h as _, createVNode as r, isVNode as Oe } from "vue";
+import { guid as X, canUseDOM as Ve, getRef as Z, Keys as f, templateRendering as b, getListeners as I, classNames as R, setRef as we, kendoThemeMaps as Re, Icon as De } from "@progress/kendo-vue-common";
+import { ListContainer as Be } from "../common/ListContainer.mjs";
+import { List as Me } from "../common/List.mjs";
+import { TagList as Ae } from "./TagList.mjs";
 import { SearchBar as Le } from "../common/SearchBar.mjs";
-import Ae from "../common/DropDownBase.mjs";
+import He from "../common/DropDownBase.mjs";
 import { GroupStickyHeader as ee } from "../common/GroupStickyHeader.mjs";
-import { ClearButton as He } from "../common/ClearButton.mjs";
-import { ActiveDescendant as A } from "../common/settings.mjs";
-import { getItemValue as x, areSame as te, removeDataItems as H, isPresent as Ee, matchDataCollections as Pe, itemIndexStartsWith as Ne, preventDefaultNonInputs as Ke } from "../common/utils.mjs";
-import { xIcon as _e, plusIcon as ze } from "@progress/kendo-svg-icons";
-import { Button as z } from "@progress/kendo-vue-buttons";
-import { MOBILE_SMALL_DEVICE as se, MOBILE_MEDIUM_DEVICE as je } from "../common/constants.mjs";
-import { ActionSheet as We } from "@progress/kendo-vue-layout";
-import { ListFilter as Ge } from "../common/ListFilter.mjs";
-import { provideLocalizationService as qe } from "@progress/kendo-vue-intl";
+import { ClearButton as Ee } from "../common/ClearButton.mjs";
+import { ActiveDescendant as L } from "../common/settings.mjs";
+import { getItemValue as x, areSame as te, removeDataItems as H, isPresent as Pe, matchDataCollections as Ne, itemIndexStartsWith as Ke, preventDefaultNonInputs as _e } from "../common/utils.mjs";
+import { xIcon as je, plusIcon as ze } from "@progress/kendo-svg-icons";
+import { Button as j } from "@progress/kendo-vue-buttons";
+import { MOBILE_SMALL_DEVICE as se, MOBILE_MEDIUM_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 ie, messages as ne, adaptiveModeFooterApply as ae } from "../messages/main.mjs";
 const {
-  sizeMap: j,
-  roundedMap: Ue
-} = we;
+  sizeMap: z,
+  roundedMap: Ye
+} = Re;
 function E(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Te(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Oe(e);
 }
-const Ye = "Please enter a valid value!", Je = (e) => e.preventDefault(), oe = (e, t, s) => !!e != !!t || e.text !== t.text ? !1 : e === t || Pe(e.data, t.data, s), le = (e) => e === S.CustomItem;
+const Je = "Please enter a valid value!", Qe = (e) => e.preventDefault(), oe = (e, t, s) => !!e != !!t || e.text !== t.text ? !1 : e === t || Ne(e.data, t.data, s), le = (e) => e === S.CustomItem;
 var S = /* @__PURE__ */ function(e) {
   return e[e.None = 0] = "None", e[e.ListItem = 1] = "ListItem", e[e.CustomItem = 2] = "CustomItem", e;
 }(S || {});
-const mt = /* @__PURE__ */ $e({
+const vt = /* @__PURE__ */ Fe({
   name: "KendoMultiSelect",
   emits: {
     changemodel: null,
@@ -173,10 +173,11 @@ const mt = /* @__PURE__ */ $e({
     adaptiveTitle: {
       type: String,
       default: void 0
-    }
+    },
+    inputAttributes: Object
   },
   setup() {
-    const e = Q(null), t = Q(null), s = Fe("kendoLocalizationService", {});
+    const e = Q(null), t = Q(null), s = Te("kendoLocalizationService", {});
     return {
       inputRef: e,
       kendoAnchorRef: t,
@@ -208,11 +209,11 @@ const mt = /* @__PURE__ */ $e({
       return this.windowWidth <= se ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom";
     },
     adaptiveState() {
-      return this.windowWidth <= je && this.$props.adaptive;
+      return this.windowWidth <= We && this.$props.adaptive;
     }
   },
   created() {
-    this.observer = null, this.valuesItemsDuringOnChange = null, this._tags = [], this._skipFocusEvent = !1, this.scrollToFocused = !1, this.base = new Ae(this), this.anchor = X(), this.inputId = X();
+    this.observer = null, this.valuesItemsDuringOnChange = null, this._tags = [], this._skipFocusEvent = !1, this.scrollToFocused = !1, this.base = new He(this), this.anchor = X(), this.inputId = X();
   },
   inject: {
     kendoLocalizationService: {
@@ -233,7 +234,7 @@ const mt = /* @__PURE__ */ $e({
         last: ""
       },
       suggested: "",
-      activedescendant: A.PopupList,
+      activedescendant: L.PopupList,
       group: void 0,
       isScrolling: !1,
       itemHeight: 0,
@@ -282,7 +283,7 @@ const mt = /* @__PURE__ */ $e({
     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 = Z(this, "kendoAnchor"), this.element = Z(this, "kendoAnchor"), this.base.didMount(), this.searchBarRef(), this.setValidity();
+    this.observer = Ve && 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 = Z(this, "kendoAnchor"), this.element = Z(this, "kendoAnchor"), this.base.didMount(), this.searchBarRef(), this.setValidity();
   },
   methods: {
     clearFilter(e) {
@@ -354,7 +355,7 @@ const mt = /* @__PURE__ */ $e({
       } = this.$props, o = n ? n.skip : 0, l = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
         focusedIndex: d
       } = this.getFocusedState(), c = i && l, a = s[e - o];
-      a && d !== e ? this.currentFocusedIndex !== e && (t.data.currentFocusedIndex = e, t.data.activedescendant = A.PopupList) : c && e === -1 && this.currentFocusedIndex !== void 0 && (t.data.currentFocusedIndex = void 0), this.base.triggerPageChangeCornerItems(a, t);
+      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);
     },
     searchBarRef() {
       this.input && this.currentFocused && setTimeout(() => this.input.focus(), 0);
@@ -367,7 +368,7 @@ const mt = /* @__PURE__ */ $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;
-      Ee(i) && i !== "" && this.base.filterChanged("", s), this.currentText && (s.data.currentText = ""), this.applyState(s);
+      Pe(i) && i !== "" && this.base.filterChanged("", s), this.currentText && (s.data.currentText = ""), this.applyState(s);
     },
     onInputKeyDown(e) {
       this.isScrolling && (this.isScrolling = !1);
@@ -407,7 +408,7 @@ const mt = /* @__PURE__ */ $e({
           H(a, p.data, o), this.triggerOnChange(a, t);
         }
       }
-      d !== i && (t.data.currentFocusedTag = d, t.data.activedescendant = A.TagsList), this.applyState(t);
+      d !== i && (t.data.currentFocusedTag = d, t.data.activedescendant = L.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({
@@ -433,7 +434,7 @@ const mt = /* @__PURE__ */ $e({
         dataItemKey: n,
         virtual: o,
         textField: l,
-        focusedItemIndex: d = Ne
+        focusedItemIndex: d = Ke
       } = this.$props, c = o && o.skip || 0;
       let a;
       if (e !== void 0)
@@ -541,7 +542,7 @@ const mt = /* @__PURE__ */ $e({
       this.base.applyState(e), this.valuesItemsDuringOnChange = null;
     },
     setValidity() {
-      this.input && this.input.setCustomValidity && this.input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || Ye);
+      this.input && this.input.setCustomValidity && this.input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || Je);
     },
     focus() {
       this.input && this.input.focus();
@@ -594,12 +595,13 @@ const mt = /* @__PURE__ */ $e({
       adaptiveTitle: re,
       header: P,
       footer: W,
-      groupStickyHeaderItemRender: de,
+      inputAttributes: de,
+      groupStickyHeaderItemRender: ue,
       dataItems: F = []
-    } = this.$props, ue = this.currentFocused, D = Object.assign({}, {
+    } = this.$props, ce = 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)), L = this.isOpen, T = this.adaptiveState, q = qe(this);
+    }, this.$props.popupSettings), B = this.currentFocusedTag, G = this.computedValue(), M = (this.$props.filter !== void 0 ? this.$props.filter : this.currentText) || "", pe = !c && (!!M || G.length > 0), y = this.base.vs, N = this.$props.id || this.inputId, he = 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((h) => {
@@ -613,12 +615,12 @@ const mt = /* @__PURE__ */ $e({
         data: [u]
       });
     }) : v.push(...n), v.length > 0 && this.setItems(v, this._tags);
-    const he = !this.$props.validityStyles || this.validity().valid, fe = function(u) {
+    const fe = !this.$props.validityStyles || this.validity().valid, ge = function(u) {
       const h = this.activedescendant, {
         placeholder: k
       } = this.$props, {
         focusedIndex: O
-      } = this.getFocusedState(), C = v.length === 0 || G.length === 0 && !M ? k : void 0, V = h === A.TagsList && B !== void 0 ? `tag-${this.base.guid}-${B.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${O}`;
+      } = this.getFocusedState(), C = v.length === 0 || G.length === 0 && !M ? k : void 0, V = h === L.TagsList && B !== void 0 ? `tag-${this.base.guid}-${B.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${O}`;
       return r(Le, {
         id: u,
         size: Math.max((C || "").length, M.length, 1),
@@ -633,12 +635,13 @@ const mt = /* @__PURE__ */ $e({
           this.inputRef = w;
         },
         disabled: i,
-        expanded: L,
+        expanded: A,
         owns: this.base.listBoxId,
         activedescendant: V,
         "aria-describedBy": `tagslist-${this.base.guid}${this.$props.ariaDescribedBy ? " " + this.$props.ariaDescribedBy : ""}`,
         "aria-labelledBy": this.$props.ariaLabelledBy,
-        "aria-label": this.$props.ariaLabel
+        "aria-label": this.$props.ariaLabel,
+        inputAttributes: de
       }, null);
     }, U = function() {
       let u;
@@ -648,9 +651,9 @@ const mt = /* @__PURE__ */ $e({
         focusedIndex: w
       } = this.getFocusedState(), K = `translateY(${y.translate}px)`;
       let J = F;
-      return h && (J = this.base.getGroupedDataModernMode(F, h)), r(Be, {
+      return h && (J = this.base.getGroupedDataModernMode(F, h)), r(Me, {
         id: this.base.listBoxId,
-        show: L,
+        show: A,
         dataItems: J.slice(),
         focusedIndex: w,
         value: this.computedValue(),
@@ -673,15 +676,15 @@ const mt = /* @__PURE__ */ $e({
         noDataRender: C,
         groupField: h,
         onScroll: this.onScroll
-      }, E(u = ge.call(this)) ? u : {
+      }, E(u = me.call(this)) ? u : {
         default: () => [u]
       });
-    }, ge = function() {
+    }, me = function() {
       return y.enabled && r("div", {
         ref: "scrollElement",
         key: "scrollElementKey"
       }, null);
-    }, me = function() {
+    }, ve = function() {
       const u = this.base, {
         allowCustom: h
       } = 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, {
@@ -694,27 +697,27 @@ const mt = /* @__PURE__ */ $e({
         class: R("k-item k-custom-item", {
           "k-focus": le(w)
         })
-      }, [V, r(Re, {
+      }, [V, r(De, {
         name: "plus",
         icon: ze,
         style: {
           float: "right"
         }
       }, null)])]);
-      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = x(F[0], this.$props.groupField)), r(De, {
+      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = x(F[0], this.$props.groupField)), r(Be, {
         ref: "container",
-        onMousedown: Je,
+        onMousedown: Qe,
         dir: s !== void 0 ? s : u.dirCalculated,
         onBlur: this.handleBlur,
         width: this.popupWidth,
         popupSettings: {
           ...D,
           anchor: this.anchor,
-          show: L,
+          show: A,
           onOpen: this.onPopupOpened,
           onClose: this.onPopupClosed,
           popupClass: R(D.popupClass, "k-list", {
-            [`k-list-${j[a] || a}`]: a,
+            [`k-list-${z[a] || a}`]: a,
             "k-virtual-list": this.base.vs.enabled
           }),
           className: R("k-list-container", D.className)
@@ -730,9 +733,9 @@ const mt = /* @__PURE__ */ $e({
           class: "k-list-footer"
         }, [C]), d && P]
       });
-    }, ve = function() {
+    }, be = function() {
       const u = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
-      return this.$props.filterable && r(Ge, {
+      return this.$props.filterable && r(qe, {
         value: u,
         ref: "filterInput",
         onChange: this.onChangeHandler,
@@ -741,7 +744,7 @@ const mt = /* @__PURE__ */ $e({
         rounded: g,
         fillMode: p
       }, null);
-    }, be = () => [r("div", {
+    }, Ie = () => [r("div", {
       class: "k-actionsheet-titlebar-group k-hbox"
     }, [r("div", {
       class: "k-actionsheet-title"
@@ -751,7 +754,7 @@ const mt = /* @__PURE__ */ $e({
       class: "k-actionsheet-subtitle k-text-center"
     }, null)]), r("div", {
       class: "k-actionsheet-actions"
-    }, [r(z, {
+    }, [r(j, {
       tabIndex: 5,
       "aria-label": "Cancel",
       "aria-disabled": "false",
@@ -759,12 +762,12 @@ const mt = /* @__PURE__ */ $e({
       fillMode: "flat",
       onClick: this.onCancel,
       icon: "x",
-      svgIcon: _e
+      svgIcon: je
     }, null)])]), r("div", {
       class: "k-actionsheet-titlebar-group k-actionsheet-filter"
-    }, [ve.call(this)])], Ie = b.call(this, be, I.call(this)), Se = () => {
+    }, [be.call(this)])], Se = b.call(this, Ie, I.call(this)), ye = () => {
       const u = q.toLanguageString(ie, ne[ie]), h = q.toLanguageString(ae, ne[ae]);
-      return [r(z, {
+      return [r(j, {
         size: "large",
         "aria-label": u,
         "aria-disabled": "false",
@@ -772,7 +775,7 @@ const mt = /* @__PURE__ */ $e({
         onClick: this.onCancel
       }, E(u) ? u : {
         default: () => [u]
-      }), r(z, {
+      }), r(j, {
         themeColor: "primary",
         size: "large",
         "aria-label": h,
@@ -782,15 +785,15 @@ const mt = /* @__PURE__ */ $e({
       }, E(h) ? h : {
         default: () => [h]
       })];
-    }, ye = b.call(this, Se, I.call(this)), ke = () => {
-      const u = this.base.getTemplateDef.call(this, P, _), h = this.base.getTemplateDef.call(this, W, _), k = b.call(this, de, I.call(this));
+    }, ke = b.call(this, ye, I.call(this)), Ce = () => {
+      const u = this.base.getTemplateDef.call(this, P, _), h = this.base.getTemplateDef.call(this, W, _), k = b.call(this, ue, I.call(this));
       return r("div", {
         class: "k-list-container"
       }, [u && r("div", {
         class: "k-list-header"
       }, [u]), r("div", {
         class: R("k-list", {
-          [`k-list-${j[a] || a}`]: T ? !1 : a,
+          [`k-list-${z[a] || a}`]: T ? !1 : a,
           "k-list-lg": !!T,
           "k-virtual-list": y.enabled
         })
@@ -800,31 +803,31 @@ const mt = /* @__PURE__ */ $e({
       }, null), U.call(this), h && r("div", {
         class: "k-list-footer"
       }, [h])])]);
-    }, Ce = b.call(this, ke, I.call(this)), xe = function() {
-      return r(We, {
-        expand: L,
+    }, xe = b.call(this, Ce, I.call(this)), $e = function() {
+      return r(Ge, {
+        expand: A,
         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: Se,
+        content: xe,
+        footer: ke,
         onClose: this.onCancel,
         navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
       }, null);
     }, Y = [_(function() {
       let u;
       return r("span", {
-        ref: Ve(this, "kendoAnchor"),
+        ref: we(this, "kendoAnchor"),
         class: R("k-multiselect", "k-input", {
-          [`k-input-${j[a] || a}`]: a,
-          [`k-rounded-${Ue[g] || g}`]: g,
+          [`k-input-${z[a] || a}`]: a,
+          [`k-rounded-${Ye[g] || g}`]: g,
           [`k-input-${p}`]: p,
-          "k-focus": ue && !i,
+          "k-focus": ce && !i,
           "k-disabled": i,
-          "k-invalid": !he,
+          "k-invalid": !fe,
           "k-loading": c,
           "k-required": this.required
         }),
@@ -835,27 +838,27 @@ const mt = /* @__PURE__ */ $e({
         dir: s,
         onFocusin: this.handleFocus,
         onClick: this.handleWrapperClick,
-        onMousedown: Ke
-      }, [r(Me, {
+        onMousedown: _e
+      }, [r(Ae, {
         removeTagIcon: $,
         tagsRounded: m,
         size: a,
         fillMode: p,
-        tagRender: pe,
+        tagRender: he,
         onTagdelete: this.onTagDelete,
         dataItems: v,
         guid: this.base.guid,
         focused: B ? v.find((h) => oe(h, B, l)) : void 0
-      }, E(u = fe.call(this, N)) ? u : {
+      }, E(u = ge.call(this, N)) ? u : {
         default: () => [u]
-      }), v.length > 0 && ce && r(He, {
+      }), v.length > 0 && pe && r(Ee, {
         onClearclick: this.clearButtonClick
       }, null), r("span", {
         class: c ? "k-input-loading-icon k-icon k-i-loading" : void 0
-      }, null), !T && me.call(this)]);
+      }, null), !T && ve.call(this)]);
     }.call(this), {
       ...this.$attrs
-    }), T && xe.call(this)];
+    }), T && $e.call(this)];
     return t ? r("span", {
       class: this.spanClassNames,
       dir: this.$props.dir
@@ -868,5 +871,5 @@ const mt = /* @__PURE__ */ $e({
   }
 });
 export {
-  mt as MultiSelect
+  vt as MultiSelect
 };

package/common/SearchBar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),s=require("@progress/kendo-vue-common"),d=i.defineComponent({name:"search-bar",emits:{change:null,keydown:null,focus:null,blur:null},props:{value:String,id:String,placeholder:String,tabIndex:Number,size:{type:Number,default:void 0},suggestedText:String,focused:Boolean,disabled:Boolean,readOnly:Boolean,expanded:Boolean,owns:String,name:String,activedescendant:String,ariaDescribedBy:String,clearButton:Boolean,accessKey:String,ariaLabelledBy:String,ariaLabel:{type:String,default:void 0},onClearbuttonclick:Function},data(){return{prevValue:void 0,prevSuggestedText:void 0}},watch:{suggestedText:function(e,t){this.prevSuggestedText=t},value:function(e,t){this.prevValue=t}},updated(){const{value:e,suggestedText:t,focused:r}=this.$props;this.input||(this.input=this.$refs.input);const n=this.input,a=this.$data.prevValue!==e||t!==this.prevSuggestedText,o=a&&this.$data.prevValue&&this.$data.prevValue.startsWith(e)&&!(this.$data.prevSuggestedText&&t&&this.$data.prevSuggestedText.endsWith(t));r&&n&&s.canUseDOM&&document.activeElement!==n&&n.focus(),t&&a&&!o&&n&&n.setSelectionRange(e.length-t.length,e.length)},setup(){return{inputRef:i.ref(null)}},mounted(){this.input=s.getRef(this,"input")},methods:{onChange(e){this.$emit("change",e)},onBlur(e){this.$emit("blur",e)},onFocus(e){this.$emit("focus",e)},onKeyDown(e){this.$emit("keydown",e)},clearButtonClick(e){this.$emit("clearbuttonclick",e)}},render(){return i.createVNode("input",{autocomplete:"off",id:this.$props.id,type:"text",key:"searchbar",placeholder:this.$props.placeholder,class:"k-input-inner",tabindex:this.$props.tabIndex,accesskey:this.$props.accessKey,role:"combobox",name:this.$props.name,value:this.$props.value,size:this.$props.size?this.$props.size:20,onInput:this.onChange,ref:s.setRef(this,"input"),onKeydown:this.onKeyDown,onFocusin:this.onFocus,onBlur:this.onBlur,"aria-disabled":this.$props.disabled||void 0,disabled:this.$props.disabled||void 0,readonly:this.$props.readOnly||void 0,"aria-autocomplete":this.$props.suggestedText?"both":"list","aria-haspopup":"listbox","aria-expanded":this.$props.expanded||!1,"aria-controls":this.$props.owns,"aria-activedescendant":this.$props.expanded?this.$props.activedescendant:void 0,"aria-describedby":this.$props.ariaDescribedBy,"aria-labelledby":this.$props.ariaLabelledBy,"aria-label":this.$props.ariaLabel},null)}});exports.SearchBar=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),n=require("@progress/kendo-vue-common"),d=s.defineComponent({name:"search-bar",emits:{change:null,keydown:null,focus:null,blur:null},props:{value:String,id:String,placeholder:String,tabIndex:Number,size:{type:Number,default:void 0},suggestedText:String,focused:Boolean,disabled:Boolean,readOnly:Boolean,expanded:Boolean,owns:String,name:String,activedescendant:String,ariaDescribedBy:String,clearButton:Boolean,accessKey:String,ariaLabelledBy:String,ariaLabel:{type:String,default:void 0},onClearbuttonclick:Function,inputAttributes:Object},data(){return{prevValue:void 0,prevSuggestedText:void 0}},watch:{suggestedText:function(e,t){this.prevSuggestedText=t},value:function(e,t){this.prevValue=t}},updated(){const{value:e,suggestedText:t,focused:r}=this.$props;this.input||(this.input=this.$refs.input);const i=this.input,a=this.$data.prevValue!==e||t!==this.prevSuggestedText,o=a&&this.$data.prevValue&&this.$data.prevValue.startsWith(e)&&!(this.$data.prevSuggestedText&&t&&this.$data.prevSuggestedText.endsWith(t));r&&i&&n.canUseDOM&&document.activeElement!==i&&i.focus(),t&&a&&!o&&i&&i.setSelectionRange(e.length-t.length,e.length)},setup(){return{inputRef:s.ref(null)}},mounted(){this.input=n.getRef(this,"input")},methods:{onChange(e){this.$emit("change",e)},onBlur(e){this.$emit("blur",e)},onFocus(e){this.$emit("focus",e)},onKeyDown(e){this.$emit("keydown",e)},clearButtonClick(e){this.$emit("clearbuttonclick",e)}},render(){return s.createVNode("input",s.mergeProps({autocomplete:"off",id:this.$props.id,type:"text",key:"searchbar",placeholder:this.$props.placeholder,class:"k-input-inner",tabindex:this.$props.tabIndex,accesskey:this.$props.accessKey,role:"combobox",name:this.$props.name,value:this.$props.value,size:this.$props.size?this.$props.size:20,onInput:this.onChange,ref:n.setRef(this,"input"),onKeydown:this.onKeyDown,onFocusin:this.onFocus,onBlur:this.onBlur,"aria-disabled":this.$props.disabled||void 0,disabled:this.$props.disabled||void 0,readonly:this.$props.readOnly||void 0,"aria-autocomplete":this.$props.suggestedText?"both":"list","aria-haspopup":"listbox","aria-expanded":this.$props.expanded||!1,"aria-controls":this.$props.owns,"aria-activedescendant":this.$props.expanded?this.$props.activedescendant:void 0,"aria-describedby":this.$props.ariaDescribedBy,"aria-labelledby":this.$props.ariaLabelledBy,"aria-label":this.$props.ariaLabel},this.$props.inputAttributes),null)}});exports.SearchBar=d;

package/common/SearchBar.mjs

@@ -5,9 +5,9 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as r, ref as o, createVNode as d } from "vue";
-import { canUseDOM as p, getRef as l, setRef as u } from "@progress/kendo-vue-common";
-const g = /* @__PURE__ */ r({
+import { defineComponent as r, ref as o, createVNode as d, mergeProps as p } from "vue";
+import { canUseDOM as u, getRef as l, setRef as h } from "@progress/kendo-vue-common";
+const b = /* @__PURE__ */ r({
   name: "search-bar",
   emits: {
     change: null,
@@ -40,7 +40,8 @@ const g = /* @__PURE__ */ r({
       type: String,
       default: void 0
     },
-    onClearbuttonclick: Function
+    onClearbuttonclick: Function,
+    inputAttributes: Object
   },
   data() {
     return {
@@ -60,11 +61,11 @@ const g = /* @__PURE__ */ r({
     const {
       value: e,
       suggestedText: t,
-      focused: s
+      focused: n
     } = this.$props;
     this.input || (this.input = this.$refs.input);
-    const i = this.input, n = this.$data.prevValue !== e || t !== this.prevSuggestedText, a = n && this.$data.prevValue && this.$data.prevValue.startsWith(e) && !(this.$data.prevSuggestedText && t && this.$data.prevSuggestedText.endsWith(t));
-    s && i && p && document.activeElement !== i && i.focus(), t && n && !a && i && i.setSelectionRange(e.length - t.length, e.length);
+    const i = this.input, s = this.$data.prevValue !== e || t !== this.prevSuggestedText, a = s && this.$data.prevValue && this.$data.prevValue.startsWith(e) && !(this.$data.prevSuggestedText && t && this.$data.prevSuggestedText.endsWith(t));
+    n && i && u && document.activeElement !== i && i.focus(), t && s && !a && i && i.setSelectionRange(e.length - t.length, e.length);
   },
   setup() {
     return {
@@ -92,7 +93,7 @@ const g = /* @__PURE__ */ r({
     }
   },
   render() {
-    return d("input", {
+    return d("input", p({
       autocomplete: "off",
       id: this.$props.id,
       type: "text",
@@ -106,7 +107,7 @@ const g = /* @__PURE__ */ r({
       value: this.$props.value,
       size: this.$props.size ? this.$props.size : 20,
       onInput: this.onChange,
-      ref: u(this, "input"),
+      ref: h(this, "input"),
       onKeydown: this.onKeyDown,
       onFocusin: this.onFocus,
       onBlur: this.onBlur,
@@ -121,9 +122,9 @@ const g = /* @__PURE__ */ r({
       "aria-describedby": this.$props.ariaDescribedBy,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-label": this.$props.ariaLabel
-    }, null);
+    }, this.$props.inputAttributes), null);
   }
 });
 export {
-  g as SearchBar
+  b as SearchBar
 };