@progress/kendo-vue-dropdowns 8.0.0-develop.4 → 8.0.0-develop.5

package/AutoComplete/AutoComplete.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 r=require("vue"),w=require("../common/SearchBar.js"),M=require("../common/ListContainer.js"),L=require("../common/List.js"),T=require("../common/DropDownBase.js"),K=require("../common/GroupStickyHeader.js"),H=require("../common/ClearButton.js"),c=require("../common/utils.js"),a=require("@progress/kendo-vue-common"),{sizeMap:F,roundedMap:A}=a.kendoThemeMaps,q="Please enter a valid value!",P=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,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},groupField:{type:String},inputAttributes:Object},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 T(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 y;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 h=(y=this.base.getGroupedDataModernMode(t,e))==null?void 0:y.indexOf(s);u&&(t&&t.length!==0&&this.base.resetGroupStickyHeader(t[0][e],this),this.base.scrollToItem(h)),l&&d&&o&&this.base.scrollToItem(h)}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?c.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=c.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];c.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=>c.areSame(u,this.$data.focusedItem,n)):o?o(s,i,n):s.indexOf(c.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=c.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,y=u&&u.length>n.length,{suggest:h}=this.$props,g=this.$props.opened!==void 0?this.$props.opened:this.currentOpened;if(h!==void 0&&h!==!1){p||y||!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);(!g&&n||g&&!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[c.itemIndexStartsWith(t,e,i)];if(s){const n=c.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=>c.areSame(o,this.$data.focusedItem,i)):s?s(t,n,i):Math.max(0,t.indexOf(c.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,inputAttributes:p}=this.$props,y=!this.$props.validityStyles||this.validity().valid,h=this.currentFocused,g=this.base,v=this.computedValue(),k=!d&&!!v,O=this.$props.id||this.inputId,C=Object.assign({},{animate:!0,height:"200px"},this.$props.popupSettings);typeof u=="string"&&(this.suggested=u);const B=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(w.SearchBar,{id:f,placeholder:m,tabIndex:S,accessKey:this.$props.accessKey,value:I,suggestedText:this.suggested,focused:h,name:this.$props.name,ref:b=>{this.inputRef=b},onKeydown:this.onInputKeyDown,onChange:this.onChangeHandler,onFocus:g.handleFocus,onBlur:this.handleBlur,disabled:t,readOnly:$,expanded:V,owns:g.listBoxId,activedescendant:"option-"+g.guid+"-"+this.focusedIndex(),onClearbuttonclick:this.clearButtonClick,ariaLabelledBy:this.$props.ariaLabelledBy,ariaDescribedBy:this.$props.ariaDescribedBy,ariaLabel:this.$props.ariaLabel,inputAttributes:p},null)},D=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)),b=this.$props.opened!==void 0?this.$props.opened:this.currentOpened;return f&&(m=this.base.getGroupedDataModernMode(m,f)),r.createVNode(L.List,{id:g.listBoxId,show:b,dataItems:m.slice(),focusedIndex:this.focusedIndex(),value:v,textField:I,valueField:I,highlightSelected:!1,optionsGuid:g.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)},R=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,b=this.$props.dataItems||[];return this.group===void 0&&this.$props.groupField!==void 0&&(this.group=c.getItemValue(b[0],this.$props.groupField)),r.createVNode(M.ListContainer,{onMousedown:N=>N.preventDefault(),width:this.popupWidth,ref:"container",popupSettings:{...C,anchor:this.anchor,show:V,popupClass:a.classNames(C.popupClass,"k-list",{[`k-list-${F[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&&b.length!==0&&r.createVNode(K.GroupStickyHeader,{group:this.group,render:m},null),D.call(this),$&&r.createVNode("div",{class:"k-list-footer"},[$])]})},x=r.createVNode("span",{class:a.classNames("k-autocomplete k-input",{[`k-input-${F[s]||s}`]:s,[`k-rounded-${A[n]||n}`]:n,[`k-input-${o}`]:o,"k-invalid":!y,"k-focus":h&&!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},[B.call(this,v||"",O),k&&!d&&r.createVNode(H.ClearButton,{onClearclick:this.clearButtonClick},null),r.createVNode("span",{class:d?"k-input-loading-icon k-icon k-i-loading":void 0},null),R.call(this)]);return i?r.createVNode("span",{class:this.spanClassNames,dir:this.$props.dir},[x,this.$props.label?O?r.createVNode("label",{for:O,class:"k-floating-label"},[this.$props.label]):r.createVNode("span",{class:"k-label"},[this.$props.label]):null]):x}});exports.AutoComplete=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),w=require("../common/SearchBar.js"),M=require("../common/ListContainer.js"),L=require("../common/List.js"),T=require("../common/DropDownBase.js"),K=require("../common/GroupStickyHeader.js"),H=require("../common/ClearButton.js"),c=require("../common/utils.js"),a=require("@progress/kendo-vue-common"),{sizeMap:F,roundedMap:q}=a.kendoThemeMaps,A="Please enter a valid value!",P=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,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},groupField:{type:String},inputAttributes:Object},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 T(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 p;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,h=this.$refs.list;if(h&&(this.base.vs.list=h.list,this.base.list=h.list),e==="")(l&&(o||n)||u)&&this.base.scrollToItem(i);else if(!this.isScrolling){let g=(p=this.base.getGroupedDataModernMode(t,e))==null?void 0:p.indexOf(s);u&&(t&&t.length!==0&&this.base.resetGroupStickyHeader(t[0][e],this),this.base.scrollToItem(g)),l&&d&&o&&this.base.scrollToItem(g)}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?c.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=c.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];c.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=>c.areSame(u,this.$data.focusedItem,n)):o?o(s,i,n):s.indexOf(c.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=c.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||A)},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),h=u&&u===n,p=u&&u.length>n.length,{suggest:g}=this.$props,f=this.$props.opened!==void 0?this.$props.opened:this.currentOpened;if(g!==void 0&&g!==!1){h||p||!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);(!f&&n||f&&!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[c.itemIndexStartsWith(t,e,i)];if(s){const n=c.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=>c.areSame(o,this.$data.focusedItem,i)):s?s(t,n,i):Math.max(0,t.indexOf(c.getFocusedItem(t,n,i)))},repositionPopup(){this.base.repositionPopup()},onScroll(e){var h;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&&((h=i.querySelector(".k-list-item"))==null?void 0:h.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,inputAttributes:h}=this.$props,p=!this.$props.validityStyles||this.validity().valid,g=this.currentFocused,f=this.base,v=this.computedValue(),k=!d&&!!v,O=this.$props.id||this.inputId,C=Object.assign({},{animate:!0,height:"200px"},this.$props.popupSettings);typeof u=="string"&&(this.suggested=u);const B=function(I,m){const{placeholder:y,tabIndex:S,readonly:$}=this.$props,V=this.$props.opened!==void 0?this.$props.opened:this.currentOpened;return r.createVNode(w.SearchBar,{id:m,placeholder:y,tabIndex:S,accessKey:this.$props.accessKey,value:I,suggestedText:this.suggested,focused:g,name:this.$props.name,ref:b=>{this.inputRef=b},onKeydown:this.onInputKeyDown,onChange:this.onChangeHandler,onFocus:f.handleFocus,onBlur:this.handleBlur,disabled:t,readOnly:$,expanded:V,owns:f.listBoxId,activedescendant:"option-"+f.guid+"-"+this.focusedIndex(),onClearbuttonclick:this.clearButtonClick,ariaLabelledBy:this.$props.ariaLabelledBy,ariaDescribedBy:this.$props.ariaDescribedBy,ariaLabel:this.$props.ariaLabel,inputAttributes:h},null)},D=function(){const{textField:I,groupField:m}=this.$props;let y=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)),b=this.$props.opened!==void 0?this.$props.opened:this.currentOpened;return m&&(y=this.base.getGroupedDataModernMode(y,m)),r.createVNode(L.List,{id:f.listBoxId,show:b,dataItems:y.slice(),focusedIndex:this.focusedIndex(),value:v,textField:I,valueField:I,highlightSelected:!1,optionsGuid:f.guid,ref:"list",wrapperStyle:{maxHeight:C.height},wrapperCssClass:"k-list-content",onListclick:this.handleItemClick,itemRender:S,groupHeaderItemRender:$,noDataRender:V,groupField:m,onScroll:this.onScroll},null)},R=function(){const I=a.templateRendering.call(this,this.$props.header,a.getListeners.call(this)),m=a.templateRendering.call(this,this.$props.footer,a.getListeners.call(this)),y=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:m}),V=this.$props.opened!==void 0?this.$props.opened:this.currentOpened,b=this.$props.dataItems||[];return this.group===void 0&&this.$props.groupField!==void 0&&(this.group=c.getItemValue(b[0],this.$props.groupField)),r.createVNode(M.ListContainer,{onMousedown:N=>N.preventDefault(),width:this.popupWidth,ref:"container",popupSettings:{...C,anchor:this.anchor,show:V,popupClass:a.classNames(C.popupClass,"k-list",{[`k-list-${F[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&&b.length!==0&&r.createVNode(K.GroupStickyHeader,{group:this.group,render:y},null),D.call(this),$&&r.createVNode("div",{class:"k-list-footer"},[$])]})},x=r.createVNode("span",{class:a.classNames("k-autocomplete k-input",{[`k-input-${F[s]||s}`]:s,[`k-rounded-${q[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},[B.call(this,v||"",O),k&&!d&&r.createVNode(H.ClearButton,{onClearclick:this.clearButtonClick},null),r.createVNode("span",{class:d?"k-input-loading-icon k-icon k-i-loading":void 0},null),R.call(this)]);return i?r.createVNode("span",{class:this.spanClassNames,dir:this.$props.dir},[x,this.$props.label?O?r.createVNode("label",{for:O,class:"k-floating-label"},[this.$props.label]):r.createVNode("span",{class:"k-label"},[this.$props.label]):null]):x}});exports.AutoComplete=P;

package/AutoComplete/AutoComplete.mjs

@@ -5,19 +5,19 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as E, createVNode as u, ref as M, h as R } from "vue";
-import { SearchBar as _ } from "../common/SearchBar.mjs";
-import { ListContainer as q } from "../common/ListContainer.mjs";
+import { defineComponent as q, createVNode as u, ref as M, h as R } from "vue";
+import { SearchBar as E } from "../common/SearchBar.mjs";
+import { ListContainer as _ } from "../common/ListContainer.mjs";
 import { List as z } from "../common/List.mjs";
 import W from "../common/DropDownBase.mjs";
 import { GroupStickyHeader as U } from "../common/GroupStickyHeader.mjs";
 import { ClearButton as J } from "../common/ClearButton.mjs";
 import { areSame as D, getFocusedItem as T, itemIndexStartsWith as Q, getItemValue as O } from "../common/utils.mjs";
-import { setRef as X, classNames as B, kendoThemeMaps as Y, Keys as c, getRef as H, guid as L, templateRendering as S, getListeners as v, getTemplate as A } from "@progress/kendo-vue-common";
+import { setRef as X, classNames as B, kendoThemeMaps as Y, Keys as g, getRef as H, guid as L, templateRendering as b, getListeners as v, getTemplate as A } from "@progress/kendo-vue-common";
 const {
   sizeMap: N,
   roundedMap: Z
-} = Y, ee = "Please enter a valid value!", ue = /* @__PURE__ */ E({
+} = Y, ee = "Please enter a valid value!", ue = /* @__PURE__ */ q({
   name: "KendoAutoComplete",
   model: {
     event: "changemodel"
@@ -173,16 +173,16 @@ const {
     }
   },
   updated() {
-    var m;
+    var l;
     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 === "")
+    } = 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, p = this.$refs.list;
+    if (p && (this.base.vs.list = p.list, this.base.list = p.list), e === "")
       (d && (o || n) || r) && this.base.scrollToItem(i);
     else if (!this.isScrolling) {
-      let p = (m = this.base.getGroupedDataModernMode(t, e)) == null ? void 0 : m.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);
+      let h = (l = this.base.getGroupedDataModernMode(t, e)) == null ? void 0 : l.indexOf(s);
+      r && (t && t.length !== 0 && this.base.resetGroupStickyHeader(t[0][e], this), this.base.scrollToItem(h)), d && a && o && this.base.scrollToItem(h);
     }
     this.setValidity();
   },
@@ -259,7 +259,7 @@ const {
         dataItems: n = [],
         textField: o
       } = this.$props;
-      if (this.suggested = "", s && i === c.enter) {
+      if (this.suggested = "", s && i === g.enter) {
         const d = n[this.focusedIndex(e)], a = O(d, o);
         this.triggerOnChange(a, t, {
           item: d
@@ -278,11 +278,11 @@ const {
     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, m = r && r.length > n.length, {
-        suggest: p
-      } = this.$props, h = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened;
-      if (p !== void 0 && p !== !1) {
-        l || m || !o ? this.suggested = "" : this.suggestValue(n);
+      const d = this.suggested, a = this.computedValue(), r = a && d && a.substring(0, a.length - d.length), p = r && r === n, l = r && r.length > n.length, {
+        suggest: h
+      } = this.$props, c = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened;
+      if (h !== void 0 && h !== !1) {
+        p || l || !o ? this.suggested = "" : this.suggestValue(n);
         const k = n + this.suggested, V = {
           userInput: n,
           value: this.suggested
@@ -292,7 +292,7 @@ const {
         });
       } else
         this.suggested = "", this.triggerOnChange(n, i);
-      (!h && n || h && !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);
+      (!c && n || c && !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;
@@ -307,7 +307,7 @@ const {
       const o = () => {
         i && e.preventDefault();
       };
-      t === c.enter || i && t === c.esc || e.altKey && t === c.up ? (o(), this.applyInputValue(e.currentTarget.value, s, e.keyCode)) : !e.altKey && (t === c.up || t === c.down) ? (o(), this.onNavigate(s, t)) : !i && t === c.esc ? this.clearButtonClick(e) : !i && n && e.altKey && t === c.down && (this.togglePopup(s), this.applyState(s));
+      t === g.enter || i && t === g.esc || e.altKey && t === g.up ? (o(), this.applyInputValue(e.currentTarget.value, s, e.keyCode)) : !e.altKey && (t === g.up || t === g.down) ? (o(), this.onNavigate(s, t)) : !i && t === g.esc ? this.clearButtonClick(e) : !i && n && e.altKey && t === g.down && (this.togglePopup(s), this.applyState(s));
     },
     handleBlur(e) {
       if (this.currentFocused) {
@@ -356,6 +356,7 @@ const {
       this.base.repositionPopup();
     },
     onScroll(e) {
+      var p;
       this.isScrolling = !0;
       const t = this.base.initState(), {
         list: i
@@ -367,7 +368,7 @@ const {
       } = this.$props;
       if (!s || !n.length)
         return;
-      let o = this.itemHeight || (i.children ? i.children[0].offsetHeight : 0);
+      let o = this.itemHeight || i.children && ((p = i.querySelector(".k-list-item")) == null ? void 0 : p.offsetHeight) || 0;
       const a = e.target.scrollTop;
       s && (n = this.base.getGroupedDataModernMode(n, s));
       let r = n[0][s];
@@ -388,83 +389,83 @@ const {
       style: d,
       loading: a,
       suggest: r,
-      inputAttributes: l
-    } = this.$props, m = !this.$props.validityStyles || this.validity().valid, p = this.currentFocused, h = this.base, k = this.computedValue(), V = !a && !!k, F = this.$props.id || this.inputId, x = Object.assign({}, {
+      inputAttributes: p
+    } = this.$props, l = !this.$props.validityStyles || this.validity().valid, h = this.currentFocused, c = this.base, k = this.computedValue(), V = !a && !!k, F = 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 K = function(y, f) {
       const {
-        placeholder: f,
-        tabIndex: y,
+        placeholder: m,
+        tabIndex: I,
         readonly: $
       } = this.$props, C = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened;
-      return u(_, {
-        id: g,
-        placeholder: f,
-        tabIndex: y,
+      return u(E, {
+        id: f,
+        placeholder: m,
+        tabIndex: I,
         accessKey: this.$props.accessKey,
-        value: I,
+        value: y,
         suggestedText: this.suggested,
-        focused: p,
+        focused: h,
         name: this.$props.name,
-        ref: (b) => {
-          this.inputRef = b;
+        ref: (S) => {
+          this.inputRef = S;
         },
         onKeydown: this.onInputKeyDown,
         onChange: this.onChangeHandler,
-        onFocus: h.handleFocus,
+        onFocus: c.handleFocus,
         onBlur: this.handleBlur,
         disabled: t,
         readOnly: $,
         expanded: C,
-        owns: h.listBoxId,
-        activedescendant: "option-" + h.guid + "-" + this.focusedIndex(),
+        owns: c.listBoxId,
+        activedescendant: "option-" + c.guid + "-" + this.focusedIndex(),
         onClearbuttonclick: this.clearButtonClick,
         ariaLabelledBy: this.$props.ariaLabelledBy,
         ariaDescribedBy: this.$props.ariaDescribedBy,
         ariaLabel: this.$props.ariaLabel,
-        inputAttributes: l
+        inputAttributes: p
       }, null);
     }, P = function() {
       const {
-        textField: I,
-        groupField: g
+        textField: y,
+        groupField: f
       } = this.$props;
-      let f = this.$props.dataItems || [];
-      const y = S.call(this, this.$props.itemRender, v.call(this)), $ = S.call(this, this.$props.groupHeaderItemRender, v.call(this)), C = S.call(this, this.$props.listNoDataRender, v.call(this)), b = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened;
-      return g && (f = this.base.getGroupedDataModernMode(f, g)), u(z, {
-        id: h.listBoxId,
-        show: b,
-        dataItems: f.slice(),
+      let m = this.$props.dataItems || [];
+      const I = b.call(this, this.$props.itemRender, v.call(this)), $ = b.call(this, this.$props.groupHeaderItemRender, v.call(this)), C = b.call(this, this.$props.listNoDataRender, v.call(this)), S = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened;
+      return f && (m = this.base.getGroupedDataModernMode(m, f)), u(z, {
+        id: c.listBoxId,
+        show: S,
+        dataItems: m.slice(),
         focusedIndex: this.focusedIndex(),
         value: k,
-        textField: I,
-        valueField: I,
+        textField: y,
+        valueField: y,
         highlightSelected: !1,
-        optionsGuid: h.guid,
+        optionsGuid: c.guid,
         ref: "list",
         wrapperStyle: {
           maxHeight: x.height
         },
         wrapperCssClass: "k-list-content",
         onListclick: this.handleItemClick,
-        itemRender: y,
+        itemRender: I,
         groupHeaderItemRender: $,
         noDataRender: C,
-        groupField: g,
+        groupField: f,
         onScroll: this.onScroll
       }, null);
     }, j = function() {
-      const I = S.call(this, this.$props.header, v.call(this)), g = S.call(this, this.$props.footer, v.call(this)), f = S.call(this, this.$props.groupStickyHeaderItemRender, v.call(this)), y = A.call(this, {
+      const y = b.call(this, this.$props.header, v.call(this)), f = b.call(this, this.$props.footer, v.call(this)), m = b.call(this, this.$props.groupStickyHeaderItemRender, v.call(this)), I = A.call(this, {
         h: R,
-        template: I
+        template: y
       }), $ = A.call(this, {
         h: R,
-        template: g
-      }), C = this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened, b = this.$props.dataItems || [];
-      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = O(b[0], this.$props.groupField)), u(q, {
+        template: f
+      }), 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: (G) => G.preventDefault(),
         width: this.popupWidth,
         ref: "container",
@@ -479,11 +480,11 @@ const {
         },
         dir: e !== void 0 ? e : this.base.dirCalculated
       }, {
-        default: () => [y && u("div", {
+        default: () => [I && u("div", {
           class: "k-list-header"
-        }, [y]), this.group && b.length !== 0 && u(U, {
+        }, [I]), this.group && S.length !== 0 && u(U, {
           group: this.group,
-          render: f
+          render: m
         }, null), P.call(this), $ && u("div", {
           class: "k-list-footer"
         }, [$])]
@@ -493,8 +494,8 @@ const {
         [`k-input-${N[s] || s}`]: s,
         [`k-rounded-${Z[n] || n}`]: n,
         [`k-input-${o}`]: o,
-        "k-invalid": !m,
-        "k-focus": p && !t,
+        "k-invalid": !l,
+        "k-focus": h && !t,
         "k-loading": a,
         "k-required": this.required,
         "k-disabled": t

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