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

package/AutoComplete/AutoComplete.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),N=require("../common/SearchBar.js"),w=require("../common/ListContainer.js"),M=require("../common/List.js"),L=require("../common/DropDownBase.js"),T=require("../common/GroupStickyHeader.js"),K=require("../common/ClearButton.js"),h=require("../common/utils.js"),a=require("@progress/kendo-vue-common"),{sizeMap:x,roundedMap:H}=a.kendoThemeMaps,q="Please enter a valid value!",A=r.defineComponent({name:"KendoAutoComplete",model:{event:"changemodel"},props:{id:String,defaultValue:{type:[String],default:void 0},name:String,modelValue:{type:[String],default:void 0},value:{type:[String],default:void 0},label:{type:String},placeholder:String,required:{type:Boolean,default:!1},valid:{type:Boolean,default:void 0},validationMessage:{type:String,default:void 0},validityStyles:{type:Boolean,default:!0},opened:{type:Boolean,default:void 0},disabled:Boolean,dir:{type:String,default:void 0},tabIndex:{type:Number,default:void 0},readonly:Boolean,accessKey:String,dataItems:Array,textField:String,loading:Boolean,popupSettings:{type:Object,default:function(){return{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],suggest:{type:[Boolean,String],default:!1},ariaLabel:{type:String,default:void 0},ariaLabelledBy: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}},data(){return{hasMounted:!1,currentText:"",currentValue:"",currentFocused:!1,currentOpened:!1,focusedItem:void 0,searchState:{word:"",last:""},valueDuringOnChange:{},suggested:"",group:void 0,isScrolling:!1,popupWidth:void 0,itemHeight:0}},created(){this.valueDuringOnChange=void 0,this.currentText=void 0,this.currentValue=void 0,this.currentFocused=void 0,this.currentOpened=void 0,this.base=new L(this),this.anchor=a.guid(),this.inputId=a.guid()},setup(){const e=r.ref(null),t=r.ref(null);return{inputRef:e,kendoAnchorRef:t}},mounted(){this.hasMounted=!0,this.input=this.inputRef.input,this.base.wrapper=a.getRef(this,"kendoAnchor"),this.element=a.getRef(this,"kendoAnchor"),this.base.didMount(),this.setValidity()},watch:{currentOpened:function(e,t){this.prevCurrentOpened=t},opened:function(e,t){this.prevOpened=t},dataItems:function(e,t){this.prevData=t},focusedItem:function(e,t){this.prevFocusedItem=t}},updated(){var g;const{groupField:e="",dataItems:t=[]}=this.$props,i=this.focusedIndex(),s=t[i],n=this.prevData!==t,o=s!==void 0&&this.prevFocusedItem!==s,l=this.$props.opened!==void 0?this.$props.opened:this.currentOpened,d=this.prevOpened!==void 0?this.prevOpened:this.prevCurrentOpened,u=!d&&l,p=this.$refs.list;if(p&&(this.base.vs.list=p.list,this.base.list=p.list),e==="")(l&&(o||n)||u)&&this.base.scrollToItem(i);else if(!this.isScrolling){let c=(g=this.base.getGroupedDataModernMode(t,e))==null?void 0:g.indexOf(s);u&&(t&&t.length!==0&&this.base.resetGroupStickyHeader(t[0][e],this),this.base.scrollToItem(c)),l&&d&&o&&this.base.scrollToItem(c)}this.setValidity()},computed:{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"}}},methods:{focus(){this.input&&this.input.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),e},primitiveValue(){const e=this.computedValue();return this.valuePrimitive?h.getItemValue(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,i=this.$props.valid!==void 0?this.$props.valid:t;return{customError:e,valid:i,valueMissing:this.computedValue()===null}},handleItemSelect(e,t){const{dataItems:i=[]}=this.$props,s=i[e],n=h.getItemValue(s,this.$props.textField);this.triggerOnChange(n,t,{item:s}),this.triggerOnSelect(t,{item:s})},itemFocus(e,t){const{dataItems:i=[],textField:s}=this.$props,n=i[e];h.areSame(this.$data.focusedItem,n,s)||(t.data.focusedItem=n)},togglePopup(e){this.base.togglePopup(e)},onNavigate(e,t){const i=this.computedValue(),{dataItems:s=[],textField:n,focusedItemIndex:o}=this.$props,l=this.$data.focusedItem!==void 0?s.findIndex(u=>h.areSame(u,this.$data.focusedItem,n)):o?o(s,i,n):s.indexOf(h.getFocusedItem(s,i,n)),d=this.base.navigation.navigate({keyCode:t,current:l,max:s.length-1,min:0});d!==void 0&&this.itemFocus(d,e),this.applyState(e)},applyInputValue(e,t,i){const s=this.$props.opened!==void 0?this.$props.opened:this.currentOpened,{dataItems:n=[],textField:o}=this.$props;if(this.suggested="",s&&i===a.Keys.enter){const l=n[this.focusedIndex(e)],d=h.getItemValue(l,o);this.triggerOnChange(d,t,{item:l}),this.triggerOnSelect(t,{item:l})}s&&this.togglePopup(t),this.applyState(t)},setValidity(){this.input&&this.input.setCustomValidity&&this.input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||q)},handleItemClick(e,t){this.base.handleItemClick(e,t),this.valueDuringOnChange=void 0},onChangeHandler(e){const i=this.base.initState(),s=e.target,n=s.value,o=s.selectionEnd===n.length;i.event=e;const l=this.suggested,d=this.computedValue(),u=d&&l&&d.substring(0,d.length-l.length),p=u&&u===n,g=u&&u.length>n.length,{suggest:c}=this.$props,y=this.$props.opened!==void 0?this.$props.opened:this.currentOpened;if(c!==void 0&&c!==!1){p||g||!o?this.suggested="":this.suggestValue(n);const k=n+this.suggested,b={userInput:n,value:this.suggested};this.triggerOnChange(k,i,{suggestion:b})}else this.suggested="",this.triggerOnChange(n,i);(!y&&n||y&&!n)&&this.togglePopup(i),i.data.focusedItem=void 0,this.prevData&&this.prevData.length!==this.$props.dataItems&&(i.data.group=void 0),this.applyState(i)},clearButtonClick(e){const i=this.base.initState(),s=this.$props.opened!==void 0?this.$props.opened:this.currentOpened;i.event=e;const n="";this.suggested="",this.triggerOnChange(n,i),this.$data.focusedItem!==void 0&&(i.data.focusedItem=void 0),s&&this.togglePopup(i),this.applyState(i)},onInputKeyDown(e){this.isScrolling&&(this.isScrolling=!1);const t=e.keyCode,i=this.$props.opened!==void 0?this.$props.opened:this.currentOpened,s=this.base.initState(),n=this.computedValue();s.event=e;const o=()=>{i&&e.preventDefault()};t===a.Keys.enter||i&&t===a.Keys.esc||e.altKey&&t===a.Keys.up?(o(),this.applyInputValue(e.currentTarget.value,s,e.keyCode)):!e.altKey&&(t===a.Keys.up||t===a.Keys.down)?(o(),this.onNavigate(s,t)):!i&&t===a.Keys.esc?this.clearButtonClick(e):!i&&n&&e.altKey&&t===a.Keys.down&&(this.togglePopup(s),this.applyState(s))},handleBlur(e){if(this.currentFocused){const t=this.base.initState();t.data.focused=!1,t.events.push({type:"blur"}),t.event=e,this.applyInputValue(e.currentTarget.value,t),this.currentFocused=!1}},triggerOnChange(e,t,i){this.computedValue()===e&&!i||(t.data.currentValue=e,this.valueDuringOnChange=e,t.events.push({type:"change",...i||{}}))},triggerOnSelect(e,t){e.events.push({type:"select",...t||{}})},applyState(e){this.base.applyState(e),this.valueDuringOnChange=void 0},suggestValue(e){if(this.suggested="",e){const{dataItems:t=[],textField:i}=this.$props,s=t[h.itemIndexStartsWith(t,e,i)];if(s){const n=h.getItemValue(s,i);e.toLowerCase()!==n.toLowerCase()&&(this.suggested=n.substring(e.length))}}},focusedIndex(e){const{dataItems:t=[],textField:i,focusedItemIndex:s}=this.$props,n=e!==void 0?e:this.computedValue();return this.$data.focusedItem!==void 0?t.findIndex(o=>h.areSame(o,this.$data.focusedItem,i)):s?s(t,n,i):Math.max(0,t.indexOf(h.getFocusedItem(t,n,i)))},repositionPopup(){this.base.repositionPopup()},onScroll(e){this.isScrolling=!0;const t=this.base.initState(),{list:i}=this.base,{groupField:s}=this.$props;let{dataItems:n=[]}=this.$props;if(!s||!n.length)return;let o=this.itemHeight||(i.children?i.children[0].offsetHeight:0);const d=e.target.scrollTop;s&&(n=this.base.getGroupedDataModernMode(n,s));let u=n[0][s];o===0&&(o=28);for(let p=1;p<n.length&&!(o*p>d);p++)n[p]&&n[p][s]&&(u=n[p][s]);u!==this.group&&(t.data.group=u,this.applyState(t))}},render(){const{dir:e,disabled:t,label:i,size:s,rounded:n,fillMode:o,style:l,loading:d,suggest:u}=this.$props,p=!this.$props.validityStyles||this.validity().valid,g=this.currentFocused,c=this.base,y=this.computedValue(),k=!d&&!!y,b=this.$props.id||this.inputId,C=Object.assign({},{animate:!0,height:"200px"},this.$props.popupSettings);typeof u=="string"&&(this.suggested=u);const F=function(I,f){const{placeholder:m,tabIndex:S,readonly:$}=this.$props,V=this.$props.opened!==void 0?this.$props.opened:this.currentOpened;return r.createVNode(N.SearchBar,{id:f,placeholder:m,tabIndex:S,accessKey:this.$props.accessKey,value:I,suggestedText:this.suggested,focused:g,name:this.$props.name,ref:v=>{this.inputRef=v},onKeydown:this.onInputKeyDown,onChange:this.onChangeHandler,onFocus:c.handleFocus,onBlur:this.handleBlur,disabled:t,readOnly:$,expanded:V,owns:c.listBoxId,activedescendant:"option-"+c.guid+"-"+this.focusedIndex(),onClearbuttonclick:this.clearButtonClick,ariaLabelledBy:this.$props.ariaLabelledBy,ariaDescribedBy:this.$props.ariaDescribedBy,ariaLabel:this.$props.ariaLabel},null)},B=function(){const{textField:I,groupField:f}=this.$props;let m=this.$props.dataItems||[];const S=a.templateRendering.call(this,this.$props.itemRender,a.getListeners.call(this)),$=a.templateRendering.call(this,this.$props.groupHeaderItemRender,a.getListeners.call(this)),V=a.templateRendering.call(this,this.$props.listNoDataRender,a.getListeners.call(this)),v=this.$props.opened!==void 0?this.$props.opened:this.currentOpened;return f&&(m=this.base.getGroupedDataModernMode(m,f)),r.createVNode(M.List,{id:c.listBoxId,show:v,dataItems:m.slice(),focusedIndex:this.focusedIndex(),value:y,textField:I,valueField:I,highlightSelected:!1,optionsGuid:c.guid,ref:"list",wrapperStyle:{maxHeight:C.height},wrapperCssClass:"k-list-content",onListclick:this.handleItemClick,itemRender:S,groupHeaderItemRender:$,noDataRender:V,groupField:f,onScroll:this.onScroll},null)},D=function(){const I=a.templateRendering.call(this,this.$props.header,a.getListeners.call(this)),f=a.templateRendering.call(this,this.$props.footer,a.getListeners.call(this)),m=a.templateRendering.call(this,this.$props.groupStickyHeaderItemRender,a.getListeners.call(this)),S=a.getTemplate.call(this,{h:r.h,template:I}),$=a.getTemplate.call(this,{h:r.h,template:f}),V=this.$props.opened!==void 0?this.$props.opened:this.currentOpened,v=this.$props.dataItems||[];return this.group===void 0&&this.$props.groupField!==void 0&&(this.group=h.getItemValue(v[0],this.$props.groupField)),r.createVNode(w.ListContainer,{onMousedown:R=>R.preventDefault(),width:this.popupWidth,ref:"container",popupSettings:{...C,anchor:this.anchor,show:V,popupClass:a.classNames(C.popupClass,"k-list",{[`k-list-${x[s]||s}`]:s}),className:a.classNames("k-list-container",C.className)},dir:e!==void 0?e:this.base.dirCalculated},{default:()=>[S&&r.createVNode("div",{class:"k-list-header"},[S]),this.group&&v.length!==0&&r.createVNode(T.GroupStickyHeader,{group:this.group,render:m},null),B.call(this),$&&r.createVNode("div",{class:"k-list-footer"},[$])]})},O=r.createVNode("span",{class:a.classNames("k-autocomplete k-input",{[`k-input-${x[s]||s}`]:s,[`k-rounded-${H[n]||n}`]:n,[`k-input-${o}`]:o,"k-invalid":!p,"k-focus":g&&!t,"k-loading":d,"k-required":this.required,"k-disabled":t}),ref:a.setRef(this,"kendoAnchor"),style:i?{...l,width:void 0}:l,dir:e},[F.call(this,y||"",b),k&&!d&&r.createVNode(K.ClearButton,{onClearclick:this.clearButtonClick},null),r.createVNode("span",{class:d?"k-input-loading-icon k-icon k-i-loading":void 0},null),D.call(this)]);return i?r.createVNode("span",{class:this.spanClassNames,dir:this.$props.dir},[O,this.$props.label?b?r.createVNode("label",{for:b,class:"k-floating-label"},[this.$props.label]):r.createVNode("span",{class:"k-label"},[this.$props.label]):null]):O}});exports.AutoComplete=A;

package/AutoComplete/AutoComplete.mjs

@@ -0,0 +1,526 @@
+/**
+ * @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 G, ref as w, createVNode as u, h as M } from "vue";
+import { SearchBar as E } from "../common/SearchBar.mjs";
+import { ListContainer as _ } from "../common/ListContainer.mjs";
+import { List as q } from "../common/List.mjs";
+import z from "../common/DropDownBase.mjs";
+import { GroupStickyHeader as W } from "../common/GroupStickyHeader.mjs";
+import { ClearButton as U } from "../common/ClearButton.mjs";
+import { getItemValue as O, areSame as F, getFocusedItem as R, itemIndexStartsWith as J } from "../common/utils.mjs";
+import { guid as T, getRef as H, Keys as h, classNames as D, setRef as Q, kendoThemeMaps as X, templateRendering as v, getListeners as b, getTemplate as L } from "@progress/kendo-vue-common";
+const {
+  sizeMap: N,
+  roundedMap: Y
+} = X, Z = "Please enter a valid value!", le = /* @__PURE__ */ G({
+  name: "KendoAutoComplete",
+  model: {
+    event: "changemodel"
+  },
+  props: {
+    id: String,
+    defaultValue: {
+      type: [String],
+      default: void 0
+    },
+    name: String,
+    modelValue: {
+      type: [String],
+      default: void 0
+    },
+    value: {
+      type: [String],
+      default: void 0
+    },
+    label: {
+      type: String
+    },
+    placeholder: String,
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    validationMessage: {
+      type: String,
+      default: void 0
+    },
+    validityStyles: {
+      type: Boolean,
+      default: !0
+    },
+    opened: {
+      type: Boolean,
+      default: void 0
+    },
+    disabled: Boolean,
+    dir: {
+      type: String,
+      default: void 0
+    },
+    tabIndex: {
+      type: Number,
+      default: void 0
+    },
+    readonly: Boolean,
+    accessKey: String,
+    dataItems: Array,
+    textField: String,
+    loading: Boolean,
+    popupSettings: {
+      type: Object,
+      default: function() {
+        return {
+          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],
+    suggest: {
+      type: [Boolean, String],
+      default: !1
+    },
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    ariaLabelledBy: 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
+    }
+  },
+  data() {
+    return {
+      hasMounted: !1,
+      currentText: "",
+      currentValue: "",
+      currentFocused: !1,
+      currentOpened: !1,
+      focusedItem: void 0,
+      searchState: {
+        word: "",
+        last: ""
+      },
+      valueDuringOnChange: {},
+      suggested: "",
+      group: void 0,
+      isScrolling: !1,
+      popupWidth: void 0,
+      itemHeight: 0
+    };
+  },
+  created() {
+    this.valueDuringOnChange = void 0, this.currentText = void 0, this.currentValue = void 0, this.currentFocused = void 0, this.currentOpened = void 0, this.base = new z(this), this.anchor = T(), this.inputId = T();
+  },
+  setup() {
+    const e = w(null), t = w(null);
+    return {
+      inputRef: e,
+      kendoAnchorRef: t
+    };
+  },
+  mounted() {
+    this.hasMounted = !0, this.input = this.inputRef.input, this.base.wrapper = H(this, "kendoAnchor"), this.element = H(this, "kendoAnchor"), this.base.didMount(), this.setValidity();
+  },
+  watch: {
+    currentOpened: function(e, t) {
+      this.prevCurrentOpened = t;
+    },
+    opened: function(e, t) {
+      this.prevOpened = t;
+    },
+    dataItems: function(e, t) {
+      this.prevData = t;
+    },
+    focusedItem: function(e, t) {
+      this.prevFocusedItem = t;
+    }
+  },
+  updated() {
+    var c;
+    const {
+      groupField: e = "",
+      dataItems: t = []
+    } = this.$props, i = this.focusedIndex(), s = t[i], n = this.prevData !== t, o = s !== void 0 && this.prevFocusedItem !== s, d = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened, a = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, r = !a && d, l = this.$refs.list;
+    if (l && (this.base.vs.list = l.list, this.base.list = l.list), e === "")
+      (d && (o || n) || r) && this.base.scrollToItem(i);
+    else if (!this.isScrolling) {
+      let p = (c = this.base.getGroupedDataModernMode(t, e)) == null ? void 0 : c.indexOf(s);
+      r && (t && t.length !== 0 && this.base.resetGroupStickyHeader(t[0][e], this), this.base.scrollToItem(p)), d && a && o && this.base.scrollToItem(p);
+    }
+    this.setValidity();
+  },
+  computed: {
+    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"
+      };
+    }
+  },
+  methods: {
+    focus() {
+      this.input && this.input.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), e;
+    },
+    primitiveValue() {
+      const e = this.computedValue();
+      return this.valuePrimitive ? O(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, i = this.$props.valid !== void 0 ? this.$props.valid : t;
+      return {
+        customError: e,
+        valid: i,
+        valueMissing: this.computedValue() === null
+      };
+    },
+    handleItemSelect(e, t) {
+      const {
+        dataItems: i = []
+      } = this.$props, s = i[e], n = O(s, this.$props.textField);
+      this.triggerOnChange(n, t, {
+        item: s
+      }), this.triggerOnSelect(t, {
+        item: s
+      });
+    },
+    itemFocus(e, t) {
+      const {
+        dataItems: i = [],
+        textField: s
+      } = this.$props, n = i[e];
+      F(this.$data.focusedItem, n, s) || (t.data.focusedItem = n);
+    },
+    togglePopup(e) {
+      this.base.togglePopup(e);
+    },
+    onNavigate(e, t) {
+      const i = this.computedValue(), {
+        dataItems: s = [],
+        textField: n,
+        focusedItemIndex: o
+      } = this.$props, d = this.$data.focusedItem !== void 0 ? s.findIndex((r) => F(r, this.$data.focusedItem, n)) : o ? o(s, i, n) : s.indexOf(R(s, i, n)), a = this.base.navigation.navigate({
+        keyCode: t,
+        current: d,
+        max: s.length - 1,
+        min: 0
+      });
+      a !== void 0 && this.itemFocus(a, e), this.applyState(e);
+    },
+    /**
+     * @hidden
+     */
+    applyInputValue(e, t, i) {
+      const s = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened, {
+        dataItems: n = [],
+        textField: o
+      } = this.$props;
+      if (this.suggested = "", s && i === h.enter) {
+        const d = n[this.focusedIndex(e)], a = O(d, o);
+        this.triggerOnChange(a, t, {
+          item: d
+        }), this.triggerOnSelect(t, {
+          item: d
+        });
+      }
+      s && this.togglePopup(t), this.applyState(t);
+    },
+    setValidity() {
+      this.input && this.input.setCustomValidity && this.input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || Z);
+    },
+    handleItemClick(e, t) {
+      this.base.handleItemClick(e, t), this.valueDuringOnChange = void 0;
+    },
+    onChangeHandler(e) {
+      const i = this.base.initState(), s = e.target, n = s.value, o = s.selectionEnd === n.length;
+      i.event = e;
+      const d = this.suggested, a = this.computedValue(), r = a && d && a.substring(0, a.length - d.length), l = r && r === n, c = r && r.length > n.length, {
+        suggest: p
+      } = this.$props, m = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened;
+      if (p !== void 0 && p !== !1) {
+        l || c || !o ? this.suggested = "" : this.suggestValue(n);
+        const V = n + this.suggested, k = {
+          userInput: n,
+          value: this.suggested
+        };
+        this.triggerOnChange(V, i, {
+          suggestion: k
+        });
+      } else
+        this.suggested = "", this.triggerOnChange(n, i);
+      (!m && n || m && !n) && this.togglePopup(i), i.data.focusedItem = void 0, this.prevData && this.prevData.length !== this.$props.dataItems && (i.data.group = void 0), this.applyState(i);
+    },
+    clearButtonClick(e) {
+      const i = this.base.initState(), s = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened;
+      i.event = e;
+      const n = "";
+      this.suggested = "", this.triggerOnChange(n, i), this.$data.focusedItem !== void 0 && (i.data.focusedItem = void 0), s && this.togglePopup(i), this.applyState(i);
+    },
+    onInputKeyDown(e) {
+      this.isScrolling && (this.isScrolling = !1);
+      const t = e.keyCode, i = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened, s = this.base.initState(), n = this.computedValue();
+      s.event = e;
+      const o = () => {
+        i && e.preventDefault();
+      };
+      t === h.enter || i && t === h.esc || e.altKey && t === h.up ? (o(), this.applyInputValue(e.currentTarget.value, s, e.keyCode)) : !e.altKey && (t === h.up || t === h.down) ? (o(), this.onNavigate(s, t)) : !i && t === h.esc ? this.clearButtonClick(e) : !i && n && e.altKey && t === h.down && (this.togglePopup(s), this.applyState(s));
+    },
+    handleBlur(e) {
+      if (this.currentFocused) {
+        const t = this.base.initState();
+        t.data.focused = !1, t.events.push({
+          type: "blur"
+        }), t.event = e, this.applyInputValue(e.currentTarget.value, t), this.currentFocused = !1;
+      }
+    },
+    triggerOnChange(e, t, i) {
+      this.computedValue() === e && !i || (t.data.currentValue = e, this.valueDuringOnChange = e, t.events.push({
+        type: "change",
+        ...i || {}
+      }));
+    },
+    triggerOnSelect(e, t) {
+      e.events.push({
+        type: "select",
+        ...t || {}
+      });
+    },
+    applyState(e) {
+      this.base.applyState(e), this.valueDuringOnChange = void 0;
+    },
+    suggestValue(e) {
+      if (this.suggested = "", e) {
+        const {
+          dataItems: t = [],
+          textField: i
+        } = this.$props, s = t[J(t, e, i)];
+        if (s) {
+          const n = O(s, i);
+          e.toLowerCase() !== n.toLowerCase() && (this.suggested = n.substring(e.length));
+        }
+      }
+    },
+    focusedIndex(e) {
+      const {
+        dataItems: t = [],
+        textField: i,
+        focusedItemIndex: s
+      } = this.$props, n = e !== void 0 ? e : this.computedValue();
+      return this.$data.focusedItem !== void 0 ? t.findIndex((o) => F(o, this.$data.focusedItem, i)) : s ? s(t, n, i) : Math.max(0, t.indexOf(R(t, n, i)));
+    },
+    repositionPopup() {
+      this.base.repositionPopup();
+    },
+    onScroll(e) {
+      this.isScrolling = !0;
+      const t = this.base.initState(), {
+        list: i
+      } = this.base, {
+        groupField: s
+      } = this.$props;
+      let {
+        dataItems: n = []
+      } = this.$props;
+      if (!s || !n.length)
+        return;
+      let o = this.itemHeight || (i.children ? i.children[0].offsetHeight : 0);
+      const a = e.target.scrollTop;
+      s && (n = this.base.getGroupedDataModernMode(n, s));
+      let r = n[0][s];
+      o === 0 && (o = 28);
+      for (let l = 1; l < n.length && !(o * l > a); l++)
+        n[l] && n[l][s] && (r = n[l][s]);
+      r !== this.group && (t.data.group = r, this.applyState(t));
+    }
+  },
+  render() {
+    const {
+      dir: e,
+      disabled: t,
+      label: i,
+      size: s,
+      rounded: n,
+      fillMode: o,
+      style: d,
+      loading: a,
+      suggest: r
+    } = this.$props, l = !this.$props.validityStyles || this.validity().valid, c = this.currentFocused, p = this.base, m = this.computedValue(), V = !a && !!m, k = this.$props.id || this.inputId, x = Object.assign({}, {
+      animate: !0,
+      height: "200px"
+    }, this.$props.popupSettings);
+    typeof r == "string" && (this.suggested = r);
+    const K = function(I, g) {
+      const {
+        placeholder: f,
+        tabIndex: y,
+        readonly: $
+      } = this.$props, C = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened;
+      return u(E, {
+        id: g,
+        placeholder: f,
+        tabIndex: y,
+        accessKey: this.$props.accessKey,
+        value: I,
+        suggestedText: this.suggested,
+        focused: c,
+        name: this.$props.name,
+        ref: (S) => {
+          this.inputRef = S;
+        },
+        onKeydown: this.onInputKeyDown,
+        onChange: this.onChangeHandler,
+        onFocus: p.handleFocus,
+        onBlur: this.handleBlur,
+        disabled: t,
+        readOnly: $,
+        expanded: C,
+        owns: p.listBoxId,
+        activedescendant: "option-" + p.guid + "-" + this.focusedIndex(),
+        onClearbuttonclick: this.clearButtonClick,
+        ariaLabelledBy: this.$props.ariaLabelledBy,
+        ariaDescribedBy: this.$props.ariaDescribedBy,
+        ariaLabel: this.$props.ariaLabel
+      }, null);
+    }, A = function() {
+      const {
+        textField: I,
+        groupField: g
+      } = this.$props;
+      let f = this.$props.dataItems || [];
+      const y = v.call(this, this.$props.itemRender, b.call(this)), $ = v.call(this, this.$props.groupHeaderItemRender, b.call(this)), C = v.call(this, this.$props.listNoDataRender, b.call(this)), S = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened;
+      return g && (f = this.base.getGroupedDataModernMode(f, g)), u(q, {
+        id: p.listBoxId,
+        show: S,
+        dataItems: f.slice(),
+        focusedIndex: this.focusedIndex(),
+        value: m,
+        textField: I,
+        valueField: I,
+        highlightSelected: !1,
+        optionsGuid: p.guid,
+        ref: "list",
+        wrapperStyle: {
+          maxHeight: x.height
+        },
+        wrapperCssClass: "k-list-content",
+        onListclick: this.handleItemClick,
+        itemRender: y,
+        groupHeaderItemRender: $,
+        noDataRender: C,
+        groupField: g,
+        onScroll: this.onScroll
+      }, null);
+    }, P = function() {
+      const I = v.call(this, this.$props.header, b.call(this)), g = v.call(this, this.$props.footer, b.call(this)), f = v.call(this, this.$props.groupStickyHeaderItemRender, b.call(this)), y = L.call(this, {
+        h: M,
+        template: I
+      }), $ = L.call(this, {
+        h: M,
+        template: g
+      }), C = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened, S = this.$props.dataItems || [];
+      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = O(S[0], this.$props.groupField)), u(_, {
+        onMousedown: (j) => j.preventDefault(),
+        width: this.popupWidth,
+        ref: "container",
+        popupSettings: {
+          ...x,
+          anchor: this.anchor,
+          show: C,
+          popupClass: D(x.popupClass, "k-list", {
+            [`k-list-${N[s] || s}`]: s
+          }),
+          className: D("k-list-container", x.className)
+        },
+        dir: e !== void 0 ? e : this.base.dirCalculated
+      }, {
+        default: () => [y && u("div", {
+          class: "k-list-header"
+        }, [y]), this.group && S.length !== 0 && u(W, {
+          group: this.group,
+          render: f
+        }, null), A.call(this), $ && u("div", {
+          class: "k-list-footer"
+        }, [$])]
+      });
+    }, B = u("span", {
+      class: D("k-autocomplete k-input", {
+        [`k-input-${N[s] || s}`]: s,
+        [`k-rounded-${Y[n] || n}`]: n,
+        [`k-input-${o}`]: o,
+        "k-invalid": !l,
+        "k-focus": c && !t,
+        "k-loading": a,
+        "k-required": this.required,
+        "k-disabled": t
+      }),
+      ref: Q(this, "kendoAnchor"),
+      style: i ? {
+        ...d,
+        width: void 0
+      } : d,
+      dir: e
+    }, [K.call(this, m || "", k), V && !a && u(U, {
+      onClearclick: this.clearButtonClick
+    }, null), u("span", {
+      class: a ? "k-input-loading-icon k-icon k-i-loading" : void 0
+    }, null), P.call(this)]);
+    return i ? u("span", {
+      class: this.spanClassNames,
+      dir: this.$props.dir
+    }, [B, this.$props.label ? k ? u("label", {
+      for: k,
+      class: "k-floating-label"
+    }, [this.$props.label]) : u("span", {
+      class: "k-label"
+    }, [this.$props.label]) : null]) : B;
+  }
+});
+export {
+  le as AutoComplete
+};

package/ComboBox/ComboBox.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),pe=require("../common/DropDownBase.js"),_=require("../common/GroupStickyHeader.js"),o=require("@progress/kendo-vue-common"),G=require("@progress/kendo-vue-buttons"),d=require("../common/utils.js"),he=require("../common/SearchBar.js"),ge=require("../common/ListContainer.js"),fe=require("../common/List.js"),me=require("../common/ClearButton.js"),ve=require("@progress/kendo-vue-intl"),E=require("../messages/main.js"),W=require("@progress/kendo-svg-icons"),K=require("../common/constants.js"),be=require("@progress/kendo-vue-layout"),Se=require("../common/ListFilter.js"),{sizeMap:P,roundedMap:Ie}=o.kendoThemeMaps;function ye(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const ke="Please enter a valid value!",Ve=n.defineComponent({name:"KendoComboBox",model:{event:"changemodel"},emits:{changemodel:null,"update:modelValue":null,filterchange:null,pagechange:null,change:null,focus:null,blur:null,open:null,close:null,scroll:null},props:{id: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},placeholder:String,required:{type:Boolean,default:!1},valid:{type:Boolean,default:void 0},validationMessage:{type:String,default:void 0},validityStyles:{type:Boolean,default:!0},iconClassName:String,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,className:String,loading:Boolean,popupSettings:{type:Object,default:function(){return{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},suggest:{type:Boolean,default:!1},allowCustom:{type:Boolean,default:!1},clearButton:{type:Boolean,default:!0},ariaLabel:{type:String,default:void 0},ariaLabelledBy:String,ariaDescribedBy:String,valueField:String,valuePrimitive:Boolean,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},onFilterchange:Function},inject:{kendoLocalizationService:{default:null}},data(){return{hasMounted:!1,currentText:"",currentValue:"",currentFocused:!1,currentOpened:!1,searchState:{word:"",last:""},_skipFocusEvent:!1,valueDuringOnChange:{},_navigated:!1,suggested:"",group:void 0,isScrolling:!1,itemHeight:0,state:void 0,popupWidth:void 0,windowWidth:0}},created(){this.observer=null,this.valueDuringOnChange=void 0,this.currentText=void 0,this.currentValue=void 0,this.currentFocused=void 0,this.currentOpened=void 0,this.prevCurrentValue=this.computedValue(),this.base=new pe(this),this.anchor=o.guid(),this.inputId=o.guid()},setup(){const e=n.ref(null),t=n.ref(null),s=n.ref(null),i=n.inject("kendoLocalizationService",{});return{inputRef:e,elementRef:t,kendoAnchorRef:s,kendoLocalizationService:i}},mounted(){this.observer=o.canUseDOM&&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=o.getRef(this,"kendoAnchor"),this.element=o.getRef(this,"kendoAnchor"),this.base.didMount(),this.setValidity()},updated(){var v;const{dataItems:e=[],dataItemKey:t,virtual:s,groupField:i,textField:a}=this.$props,r=this.isOpen,l=this.prevOpened!==void 0?this.prevOpened:this.prevCurrentOpened,u=!l&&r,c=this.$refs.list,p=this.$refs.scrollElement,f=this.computedValue();if(this.valueOnDidUpdate=f,c&&(this.base.vs.list=c.list,this.base.list=c.list),p&&(this.base.vs.scrollElement=p),c&&e.length&&this.base.vs.scrollerRef(c.$el),s&&this.virtualTotalHasChanged)this.base.vs.calcScrollElementHeight(),this.base.vs.reset(),this.virtualTotalHasChanged=!1;else{const b=this.prevCurrentValue;let I=e.findIndex(x=>d.areSame(x,f,t));i&&(I=(v=this.base.getGroupedDataModernMode(e,i))==null?void 0:v.indexOf(f));const O=!d.areSame(b,f,t);if(u&&s)this.base.scrollToVirtualItem(s,I),this.prevCurrentOpened=!0;else if(u&&!s)e&&e.length!==0&&this.base.resetGroupStickyHeader(e[0][i],this),this.base.scrollToItem(I),this.prevCurrentOpened=!0;else if(r&&l&&f&&O)this.base.scrollToItem(I);else if(r&&!f&&!this.isScrolling){let x=0;if(i&&this.getFocusedIndex()!==-1&&e.length>0){const C=e[this.getFocusedIndex()][a],B=this.base.getGroupedDataModernMode(e,i),L=B.findIndex(k=>k[a]===C);x=B.slice(0,L).filter(k=>Object.keys(k).length===1).length}this.base.scrollToItem(this.getFocusedIndex()+x)}}u&&this.input&&this.input.focus(),this.prevCurrentValue=this.computedValue(),this.setValidity()},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)}},computed:{index(){const{dataItems:e=[],dataItemKey:t}=this.$props,s=this.computedValue();return e.findIndex(i=>d.areSame(i,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"}},isOpen(){return this.$props.opened!==void 0?this.$props.opened:this.currentOpened},animationStyles(){return this.windowWidth<=K.MOBILE_SMALL_DEVICE?{top:0,width:"100%",height:"100%"}:void 0},classNameAdaptive(){return this.windowWidth<=K.MOBILE_SMALL_DEVICE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"},adaptiveState(){return this.windowWidth<=K.MOBILE_MEDIUM_DEVICE&&this.$props.adaptive}},methods:{focus(){this.input&&this.input.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),this.valuePrimitive&&this.findByFieldValue(this.valueField,e)||e},findByFieldValue(e,t){const s=this.dataItems.findIndex(i=>d.getItemValue(i,e)===t);return this.dataItems[s]},primitiveValue(){const e=this.computedValue();return this.valuePrimitive?d.getItemValue(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:i,dataItemKey:a}=this.$props,r=i?i.skip:0,l=s[e-r],u=!d.areSame(l,this.computedValue(),a);this.triggerOnChange(l,t),this.currentText!==void 0&&(t.data.currentText=void 0),u&&this.base.triggerPageChangeCornerItems(l,t)},onNavigate(e,t){const{dataItems:s=[],virtual:i={skip:0}}=this.$props,a=this.$props.filter?this.$props.filter:this.currentText,r=this.getFocusedIndex(),l=this.base.vs,u=this.computedValue();if(this.suggested="",r!==-1&&!d.isPresent(u))this.handleItemSelect(r,e);else if(a==="")this.handleItemSelect(0,e);else{let c=i.skip+r;const p=this.base.navigation.navigate({keyCode:t,current:c,max:(l.enabled?l.total:s.length)-1,min:0});p!==void 0&&this.handleItemSelect(p,e)}},toggleBtnClick(e){const t=this.base.initState(),s=this.isOpen,i=this.adaptiveState;t.event=e,this.base.togglePopup(t),!s&&i&&this.base.filterChanged("",t),this.applyState(t)},applyValueOnEnter(e,t){const{dataItems:s=[],textField:i,allowCustom:a}=this.$props,r=this.isOpen,u=d.getItemValue(this.computedValue(),i)===e?this.index:d.getItemIndexByText(s,e,i),c=u!==-1;let p;if(this.suggested="",c)p=s[u];else if(a)p=i!==void 0?{[i]:e}:e;else return this.selectFocusedItem(e,t);this.triggerOnChange(p,t),r&&this.base.togglePopup(t),this.$props.filter===void 0&&this.currentText!==void 0&&(t.data.currentText=void 0),this.applyState(t)},applyValueOnRejectSuggestions(e,t){const{dataItems:s=[],textField:i,allowCustom:a}=this.$props,r=this.isOpen,l=d.getItemValue(this.computedValue(),i);if(this.suggested="",e===l||e===""&&!d.isPresent(l))return r&&!this.adaptiveState&&this.base.togglePopup(t),this.applyState(t);const u=d.getItemIndexByText(s,e,i,!0),c=u!==-1;let p=null;c?p=s[u]:a&&(p=e?i?{[i]:e}:e:null),this.triggerOnChange(p,t),this.currentText!==void 0&&(t.data.currentText=void 0,this.base.filterChanged("",t)),r&&!this.adaptiveState&&this.base.togglePopup(t),this.applyState(t)},selectFocusedItem(e,t){const s=this.isOpen,{dataItems:i=[],textField:a,virtual:r={skip:0},focusedItemIndex:l=d.itemIndexStartsWith}=this.$props,u=r.skip,c=e===""&&u===0?0:l(i,e,a);return c!==-1?this.handleItemSelect(c+u,t):(this.triggerOnChange(null,t),this.currentText!==void 0&&(t.data.currentText=void 0)),s&&this.base.togglePopup(t),this.applyState(t)},handleItemClick(e,t){this.base.handleItemClick(e,t),this.valueDuringOnChange=void 0},handleFocus(e){this.$emit("focus",e)},handleBlur(e){if(this.currentFocused){const t=this.base.initState();t.data.currentFocused=!1,t.events.push({type:"blur"}),t.event=e,this.applyValueOnRejectSuggestions(e.currentTarget.value,t)}},onInputKeyDown(e){this.isScrolling&&(this.isScrolling=!1);const t=e.keyCode,s=this.isOpen,i=this.base.initState();if(i.event=e,!e.altKey&&(t===o.Keys.up||t===o.Keys.down)){e.preventDefault(),this.onNavigate(i,t),this.applyState(i);return}const a=()=>{e.preventDefault(),this.base.togglePopup(i),this.applyState(i)};s?e.altKey&&t===o.Keys.up?a():t===o.Keys.enter?(e.preventDefault(),this.applyValueOnEnter(e.currentTarget.value,i)):t===o.Keys.esc&&(this.adaptiveState&&this.toggleBtnClick(e),a()):e.altKey&&t===o.Keys.down?a():t===o.Keys.esc&&this.applyValueOnRejectSuggestions(e.currentTarget.value,i)},inputOnChange(e){const t=this.base.initState();t.event=e;const s=this.isOpen,i=e.currentTarget,a=i.value;if(this.$props.suggest){const r=i.selectionEnd===a.length;let l=this.$props.filter!==void 0?this.$props.filter:this.currentText;d.isPresent(l)||(l=d.getItemValue(this.computedValue(),this.$props.textField)||"");const u=l&&l===a,c=l&&l.length>a.length;u||c||!r?this.suggested="":this.suggestValue(a)}this.$props.filter===void 0&&(t.data.currentText=a),this.currentFocusedItem!==void 0&&(t.data.focusedItem=void 0),s||this.base.togglePopup(t),this.base.filterChanged(a,t),this.$props.filterable&&(t.data.group=void 0),this.applyState(t)},clearButtonClick(e){const t=this.base.initState();t.event=e,e.stopPropagation(),this.suggested="",this.base.filterChanged("",t),this.$props.filter===void 0&&this.currentText!==void 0&&(t.data.currentText=void 0),this.triggerOnChange(null,t),this.isOpen&&this.base.togglePopup(t),this.applyState(t)},getFocusedIndex(){const e=this.computedValue(),{dataItems:t=[],textField:s,dataItemKey:i,virtual:a={skip:0},focusedItemIndex:r=d.itemIndexStartsWith}=this.$props,l=this.$props.filter?this.$props.filter:this.currentText;return d.isPresent(e)&&l===void 0?t.findIndex(u=>d.areSame(u,e,i)):l?r(t,l,s):a.skip===0?0:-1},suggestValue(e){const{dataItems:t,textField:s}=this.$props;this.suggested=d.suggestValue(e,t,s)},setValidity(){this.input&&this.input.setCustomValidity&&this.input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||ke)},triggerOnChange(e,t){const s=this.computedValue();!d.isPresent(s)&&!d.isPresent(e)||d.areSame(s,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 i=this.base.initState(),{groupField:a}=this.$props;let{dataItems:r=[]}=this.$props,l;if(!a||!r.length)return;const u=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:s?s.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*u;a&&(r=this.base.getGroupedDataModernMode(r,a),l=r[0][a]);for(let f=1;f<r.length&&!(u*f>p);f++)r[f]&&r[f][a]&&(l=r[f][a]);l!==this.group&&(i.data.group=l,this.applyState(i))}},render(){let{dir:e,disabled:t,clearButton:s,label:i,textField:a,className:r,style:l,loading:u,icon:c,svgIcon:p,iconClassName:f,virtual:v,size:b,fillMode:I,rounded:O,adaptiveTitle:x,header:C,footer:B,groupStickyHeaderItemRender:L,placeholder:k}=this.$props;const U=this.currentFocused,Y=!this.$props.validityStyles||this.validity().valid,D=this.$props.filter!==void 0?this.$props.filter:this.currentText,j=d.getItemValue(this.computedValue(),a),A=d.isPresent(D)?D:j,J=s&&(!!A||d.isPresent(this.computedValue())),V=this.base,y=V.vs,R=this.$props.id||this.inputId,w=Object.assign({},{animate:!0,height:"200px"},this.$props.popupSettings),Q=ve.provideLocalizationService(this).toLanguageString(E.expandButton,E.messages[E.expandButton]),F=this.isOpen,T=this.adaptiveState;y.enabled=v!==void 0,v!==void 0&&(y.skip=v.skip,y.total=v.total,y.pageSize=v.pageSize),this.group===void 0&&this.$props.groupField!==void 0&&(this.group=d.getItemValue(this.$props.dataItems[0],this.$props.groupField));const X=h=>{const g=this.base.initState();g.event=h;const m=h.event.target.value;g.data.text=m,this.base.filterChanged(m,g),this.applyState(g)},Z=()=>[n.createVNode("div",{class:"k-actionsheet-titlebar-group k-hbox"},[n.createVNode("div",{class:"k-actionsheet-title"},[n.createVNode("div",{class:"k-text-center"},[x]),k&&n.createVNode("div",{class:"k-actionsheet-subtitle k-text-center"},[k])]),n.createVNode("div",{class:"k-actionsheet-actions"},[n.createVNode(G.Button,{tabIndex:5,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.toggleBtnClick,icon:"x",svgIcon:W.xIcon},null)])]),n.createVNode("div",{class:"k-actionsheet-titlebar-group k-actionsheet-filter"},[ne.call(this)])],ee=o.templateRendering.call(this,Z,o.getListeners.call(this)),te=()=>{const h=V.getTemplateDef.call(this,C,n.h),g=V.getTemplateDef.call(this,B,n.h),m=o.templateRendering.call(this,L,o.getListeners.call(this)),S=this.$props.dataItems||[];return n.createVNode("div",{class:"k-list-container"},[h&&n.createVNode("div",{class:"k-list-header"},[h]),n.createVNode("div",{class:o.classNames("k-list",{[`k-list-${P[b]||b}`]:T?!1:b,"k-list-lg":!!T,"k-virtual-list":y.enabled})},[C&&n.createVNode("div",{class:"k-list-header"},[C]),this.group&&S.length!==0&&n.createVNode(_.GroupStickyHeader,{group:this.group,render:m},null),q.call(this),g&&n.createVNode("div",{class:"k-list-footer"},[g])])])},ie=o.templateRendering.call(this,te,o.getListeners.call(this)),se=function(){return n.createVNode(be.ActionSheet,{expand:F,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,contentClassName:"!k-overflow-hidden",header:ee,content:ie,onClose:this.toggleBtnClick,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},ne=function(){const g=this.base.initState().data.text;return n.createVNode(Se.ListFilter,{adaptiveMode:!0,value:g,ref:"filterInput",onChange:m=>X(m),onKeydown:this.onInputKeyDown,size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode},null)},q=function(){let h;const{dataItemKey:g,groupField:m}=this.$props;let S=this.$props.dataItems||[];const $=o.templateRendering.call(this,this.$props.itemRender,o.getListeners.call(this)),M=o.templateRendering.call(this,this.$props.groupHeaderItemRender,o.getListeners.call(this)),H=o.templateRendering.call(this,this.$props.listNoDataRender,o.getListeners.call(this));v||(v={skip:0});const N=v.skip,de=`translateY(${y.translate}px)`,ue=F?this.getFocusedIndex():void 0,ce=d.isPresent(D)&&D!==j?null:this.computedValue();return m&&(S=this.base.getGroupedDataModernMode(S,m)),n.createVNode(fe.List,{id:V.listBoxId,show:F,dataItems:S,focusedIndex:ue,value:ce,textField:a,valueField:g,optionsGuid:V.guid,ref:"list",wrapperStyle:{maxHeight:T?void 0:w.height},wrapperCssClass:o.classNames("k-list-content",{"k-list-scroller":!this.$props.virtual}),listStyle:y.enabled?{transform:de}:void 0,key:"listkey",skip:N,onListclick:this.handleItemClick,itemRender:$,groupHeaderItemRender:M,noDataRender:H,groupField:m,onScroll:this.onScroll},ye(h=ae.call(this))?h:{default:()=>[h]})},ae=function(){return y.enabled&&n.createVNode("div",{ref:"scrollElement",key:"scrollElementKey"},null)},le=function(){const h=o.templateRendering.call(this,this.$props.groupStickyHeaderItemRender,o.getListeners.call(this)),g=V.getTemplateDef.call(this,C),m=V.getTemplateDef.call(this,B),S=this.$props.dataItems||[];return this.group===void 0&&this.$props.groupField!==void 0&&(this.group=d.getItemValue(S[0],this.$props.groupField)),n.createVNode(ge.ListContainer,{ref:"container",onMousedown:$=>$.preventDefault(),width:this.popupWidth,popupSettings:{...w,anchor:this.anchor,show:F,popupClass:o.classNames(w.popupClass,"k-list",{[`k-list-${P[b]||b}`]:b,"k-virtual-list":this.base.vs.enabled}),className:o.classNames("k-list-container",w.className)},dir:e!==void 0?e:this.base.dirCalculated},{default:()=>[g&&n.createVNode("div",{class:"k-list-header"},[g]),this.group&&S.length!==0&&n.createVNode(_.GroupStickyHeader,{group:this.group,render:h},null),q.call(this),m&&n.createVNode("div",{class:"k-list-footer"},[m])]})},oe=function(h,g){const{tabIndex:m,dataItems:S=[],dataItemKey:$}=this.$props;v||(v={skip:0});const M=this.computedValue(),H=Math.max(0,S.findIndex(N=>d.areSame(N,M,$)));return this.suggested&&!d.areSame(this.valueOnDidUpdate,M,$)&&(this.suggested=""),n.createVNode(he.SearchBar,{id:g,placeholder:k,tabIndex:m||void 0,accessKey:this.$props.accessKey,value:h+this.suggested,suggestedText:this.suggested,ref:N=>{this.inputRef=N},onKeydown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:t,expanded:F,owns:this.base.listBoxId,activedescendant:this.base.guid+"-"+(H+v.skip),ariaLabelledBy:this.$props.ariaLabelledBy,ariaDescribedBy:this.$props.ariaDescribedBy,ariaLabel:this.$props.ariaLabel},null)},re=function(){return n.createVNode("span",{class:o.classNames("k-combobox k-input",{[`k-input-${P[b]||b}`]:b,[`k-rounded-${Ie[O]||O}`]:O,[`k-input-${I}`]:I,"k-invalid":!Y,"k-loading":u,"k-required":this.required,"k-disabled":t,"k-focus":U&&!t},r),ref:o.setRef(this,"kendoAnchor"),style:i?{...l,width:void 0}:l,dir:e},[oe.call(this,A||"",R),J&&!u&&n.createVNode(me.ClearButton,{onClearclick:this.clearButtonClick,key:"clearbutton"},null),u&&n.createVNode(o.Icon,{name:"loading",class:"k-input-loading-icon",key:"loading"},null),n.createVNode(G.Button,{type:"button",tabIndex:-1,"aria-label":Q,size:b,fillMode:I,rounded:null,class:"k-input-button",icon:c||"caret-alt-down",svgIcon:p||W.caretAltDownIcon,iconClass:f,onClick:this.toggleBtnClick,onMousedown:h=>h.preventDefault()},null),!T&&le.call(this)])},z=[n.h(re.call(this),{...this.$attrs}),T&&se.call(this)];return i?n.createVNode("span",{class:this.spanClassNames,onFocusin:this.handleFocus,dir:this.$props.dir},[z,this.$props.label?R?n.createVNode("label",{for:R,class:"k-floating-label"},[this.$props.label]):n.createVNode("span",{class:"k-label"},[this.$props.label]):null]):z}});exports.ComboBox=Ve;