@progress/kendo-vue-dropdowns 6.1.0-develop.5 → 6.1.0-develop.7

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"),he=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"),ge=require("../common/SearchBar.js"),fe=require("../common/ListContainer.js"),me=require("../common/List.js"),ve=require("../common/ClearButton.js"),be=require("@progress/kendo-vue-intl"),E=require("../messages/main.js"),W=require("@progress/kendo-svg-icons"),K=require("../common/constants.js"),Se=require("@progress/kendo-vue-layout"),Ie=require("../common/ListFilter.js"),{sizeMap:P,roundedMap:ye}=o.kendoThemeMaps;function ke(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const Ve="Please enter a valid value!",xe=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,inputAttributes:Object},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 he(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||Ve)},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,inputAttributes:U}=this.$props;const Y=this.currentFocused,J=!this.$props.validityStyles||this.validity().valid,D=this.$props.filter!==void 0?this.$props.filter:this.currentText,A=d.getItemValue(this.computedValue(),a),j=d.isPresent(D)?D:A,Q=s&&(!!j||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),X=be.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 Z=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)},ee=()=>[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"},[ae.call(this)])],te=o.templateRendering.call(this,ee,o.getListeners.call(this)),ie=()=>{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])])])},se=o.templateRendering.call(this,ie,o.getListeners.call(this)),ne=function(){return n.createVNode(Se.ActionSheet,{expand:F,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,contentClassName:"!k-overflow-hidden",header:te,content:se,onClose:this.toggleBtnClick,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},ae=function(){const g=this.base.initState().data.text;return n.createVNode(Ie.ListFilter,{adaptiveMode:!0,value:g,ref:"filterInput",onChange:m=>Z(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,ue=`translateY(${y.translate}px)`,ce=F?this.getFocusedIndex():void 0,pe=d.isPresent(D)&&D!==A?null:this.computedValue();return m&&(S=this.base.getGroupedDataModernMode(S,m)),n.createVNode(me.List,{id:V.listBoxId,show:F,dataItems:S,focusedIndex:ce,value:pe,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:ue}:void 0,key:"listkey",skip:N,onListclick:this.handleItemClick,itemRender:$,groupHeaderItemRender:M,noDataRender:H,groupField:m,onScroll:this.onScroll},ke(h=le.call(this))?h:{default:()=>[h]})},le=function(){return y.enabled&&n.createVNode("div",{ref:"scrollElement",key:"scrollElementKey"},null)},oe=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(fe.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])]})},re=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(ge.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,inputAttributes:U},null)},de=function(){return n.createVNode("span",{class:o.classNames("k-combobox k-input",{[`k-input-${P[b]||b}`]:b,[`k-rounded-${ye[O]||O}`]:O,[`k-input-${I}`]:I,"k-invalid":!J,"k-loading":u,"k-required":this.required,"k-disabled":t,"k-focus":Y&&!t},r),ref:o.setRef(this,"kendoAnchor"),style:i?{...l,width:void 0}:l,dir:e},[re.call(this,j||"",R),Q&&!u&&n.createVNode(ve.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":X,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&&oe.call(this)])},z=[n.h(de.call(this),{...this.$attrs}),T&&ne.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=xe;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),he=require("../common/DropDownBase.js"),z=require("../common/GroupStickyHeader.js"),o=require("@progress/kendo-vue-common"),G=require("@progress/kendo-vue-buttons"),d=require("../common/utils.js"),ge=require("../common/SearchBar.js"),fe=require("../common/ListContainer.js"),me=require("../common/List.js"),ve=require("../common/ClearButton.js"),be=require("@progress/kendo-vue-intl"),K=require("../messages/main.js"),_=require("@progress/kendo-svg-icons"),W=require("../common/constants.js"),Se=require("@progress/kendo-vue-layout"),ye=require("../common/ListFilter.js"),{sizeMap:P,roundedMap:Ie}=o.kendoThemeMaps;function ke(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const Ve="Please enter a valid value!",xe=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,inputAttributes:Object},inject:{kendoLocalizationService:{default:null},adaptiveModeBreakpoints:{default:{small:W.MOBILE_SMALL_DEVICE,medium:W.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 he(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 y=e.findIndex(x=>d.areSame(x,f,t));i&&(y=(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,y),this.prevCurrentOpened=!0;else if(u&&!s)e&&e.length!==0&&this.base.resetGroupStickyHeader(e[0][i],this),this.base.scrollToItem(y),this.prevCurrentOpened=!0;else if(r&&l&&f&&O)this.base.scrollToItem(y);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<=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 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||Ve)},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:y,rounded:O,adaptiveTitle:x,header:C,footer:B,groupStickyHeaderItemRender:L,placeholder:k,inputAttributes:U}=this.$props;const Y=this.currentFocused,J=!this.$props.validityStyles||this.validity().valid,D=this.$props.filter!==void 0?this.$props.filter:this.currentText,E=d.getItemValue(this.computedValue(),a),j=d.isPresent(D)?D:E,Q=s&&(!!j||d.isPresent(this.computedValue())),V=this.base,I=V.vs,R=this.$props.id||this.inputId,M=Object.assign({},{animate:!0,height:"200px"},this.$props.popupSettings),X=be.provideLocalizationService(this).toLanguageString(K.expandButton,K.messages[K.expandButton]),F=this.isOpen,T=this.adaptiveState;I.enabled=v!==void 0,v!==void 0&&(I.skip=v.skip,I.total=v.total,I.pageSize=v.pageSize),this.group===void 0&&this.$props.groupField!==void 0&&(this.group=d.getItemValue(this.$props.dataItems[0],this.$props.groupField));const Z=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)},ee=()=>[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:_.xIcon},null)])]),n.createVNode("div",{class:"k-actionsheet-titlebar-group k-actionsheet-filter"},[ae.call(this)])],te=o.templateRendering.call(this,ee,o.getListeners.call(this)),ie=()=>{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":I.enabled})},[C&&n.createVNode("div",{class:"k-list-header"},[C]),this.group&&S.length!==0&&n.createVNode(z.GroupStickyHeader,{group:this.group,render:m},null),A.call(this),g&&n.createVNode("div",{class:"k-list-footer"},[g])])])},se=o.templateRendering.call(this,ie,o.getListeners.call(this)),ne=function(){return n.createVNode(Se.ActionSheet,{expand:F,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,contentClassName:"!k-overflow-hidden",header:te,content:se,onClose:this.toggleBtnClick,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},ae=function(){const g=this.base.initState().data.text;return n.createVNode(ye.ListFilter,{adaptiveMode:!0,value:g,ref:"filterInput",onChange:m=>Z(m),onKeydown:this.onInputKeyDown,size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode},null)},A=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)),w=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,ue=`translateY(${I.translate}px)`,ce=F?this.getFocusedIndex():void 0,pe=d.isPresent(D)&&D!==E?null:this.computedValue();return m&&(S=this.base.getGroupedDataModernMode(S,m)),n.createVNode(me.List,{id:V.listBoxId,show:F,dataItems:S,focusedIndex:ce,value:pe,textField:a,valueField:g,optionsGuid:V.guid,ref:"list",wrapperStyle:{maxHeight:T?void 0:M.height},wrapperCssClass:o.classNames("k-list-content",{"k-list-scroller":!this.$props.virtual}),listStyle:I.enabled?{transform:ue}:void 0,key:"listkey",skip:N,onListclick:this.handleItemClick,itemRender:$,groupHeaderItemRender:w,noDataRender:H,groupField:m,onScroll:this.onScroll},ke(h=le.call(this))?h:{default:()=>[h]})},le=function(){return I.enabled&&n.createVNode("div",{ref:"scrollElement",key:"scrollElementKey"},null)},oe=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(fe.ListContainer,{ref:"container",onMousedown:$=>$.preventDefault(),width:this.popupWidth,popupSettings:{...M,anchor:this.anchor,show:F,popupClass:o.classNames(M.popupClass,"k-list",{[`k-list-${P[b]||b}`]:b,"k-virtual-list":this.base.vs.enabled}),className:o.classNames("k-list-container",M.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(z.GroupStickyHeader,{group:this.group,render:h},null),A.call(this),m&&n.createVNode("div",{class:"k-list-footer"},[m])]})},re=function(h,g){const{tabIndex:m,dataItems:S=[],dataItemKey:$}=this.$props;v||(v={skip:0});const w=this.computedValue(),H=Math.max(0,S.findIndex(N=>d.areSame(N,w,$)));return this.suggested&&!d.areSame(this.valueOnDidUpdate,w,$)&&(this.suggested=""),n.createVNode(ge.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,inputAttributes:U},null)},de=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-${y}`]:y,"k-invalid":!J,"k-loading":u,"k-required":this.required,"k-disabled":t,"k-focus":Y&&!t},r),ref:o.setRef(this,"kendoAnchor"),style:i?{...l,width:void 0}:l,dir:e},[re.call(this,j||"",R),Q&&!u&&n.createVNode(ve.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":X,size:b,fillMode:y,rounded:null,class:"k-input-button",icon:c||"caret-alt-down",svgIcon:p||_.caretAltDownIcon,iconClass:f,onClick:this.toggleBtnClick,onMousedown:h=>h.preventDefault()},null),!T&&oe.call(this)])},q=[n.h(de.call(this),{...this.$attrs}),T&&ne.call(this)];return i?n.createVNode("span",{class:this.spanClassNames,onFocusin:this.handleFocus,dir:this.$props.dir},[q,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]):q}});exports.ComboBox=xe;

package/ComboBox/ComboBox.mjs

@@ -5,30 +5,30 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as ke, ref as z, inject as xe, h as _, createVNode as o, isVNode as Ce } from "vue";
-import $e from "../common/DropDownBase.mjs";
+import { defineComponent as Ie, ref as z, inject as ke, h as _, createVNode as o, isVNode as xe } from "vue";
+import Ce from "../common/DropDownBase.mjs";
 import { GroupStickyHeader as J } from "../common/GroupStickyHeader.mjs";
-import { guid as Q, canUseDOM as Oe, getRef as X, Keys as $, templateRendering as O, getListeners as V, classNames as L, setRef as Ve, Icon as Fe, kendoThemeMaps as Te } from "@progress/kendo-vue-common";
+import { guid as Q, canUseDOM as $e, getRef as X, Keys as $, templateRendering as O, getListeners as V, classNames as L, setRef as Oe, Icon as Ve, kendoThemeMaps as Fe } from "@progress/kendo-vue-common";
 import { Button as Z } from "@progress/kendo-vue-buttons";
-import { areSame as I, getItemValue as k, isPresent as b, getItemIndexByText as ee, suggestValue as Be, itemIndexStartsWith as te } from "../common/utils.mjs";
-import { SearchBar as De } from "../common/SearchBar.mjs";
-import { ListContainer as we } from "../common/ListContainer.mjs";
-import { List as Me } from "../common/List.mjs";
-import { ClearButton as Re } from "../common/ClearButton.mjs";
-import { provideLocalizationService as He } from "@progress/kendo-vue-intl";
-import { expandButton as ie, messages as Le } from "../messages/main.mjs";
-import { xIcon as Ee, caretAltDownIcon as Ne } from "@progress/kendo-svg-icons";
-import { MOBILE_SMALL_DEVICE as se, MOBILE_MEDIUM_DEVICE as Ae } from "../common/constants.mjs";
+import { areSame as I, getItemValue as k, isPresent as b, getItemIndexByText as ee, suggestValue as Te, itemIndexStartsWith as te } from "../common/utils.mjs";
+import { SearchBar as Be } from "../common/SearchBar.mjs";
+import { ListContainer as De } from "../common/ListContainer.mjs";
+import { List as we } from "../common/List.mjs";
+import { ClearButton as Me } from "../common/ClearButton.mjs";
+import { provideLocalizationService as Re } from "@progress/kendo-vue-intl";
+import { expandButton as ie, messages as He } from "../messages/main.mjs";
+import { xIcon as Le, caretAltDownIcon as Ee } from "@progress/kendo-svg-icons";
+import { MOBILE_SMALL_DEVICE as Ne, MOBILE_MEDIUM_DEVICE as Ae } from "../common/constants.mjs";
 import { ActionSheet as je } from "@progress/kendo-vue-layout";
 import { ListFilter as Ke } from "../common/ListFilter.mjs";
 const {
   sizeMap: G,
   roundedMap: Pe
-} = Te;
+} = Fe;
 function ze(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Ce(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !xe(e);
 }
-const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
+const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
   name: "KendoComboBox",
   model: {
     event: "changemodel"
@@ -186,6 +186,12 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
   inject: {
     kendoLocalizationService: {
       default: null
+    },
+    adaptiveModeBreakpoints: {
+      default: {
+        small: Ne,
+        medium: Ae
+      }
     }
   },
   data() {
@@ -212,10 +218,10 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
     };
   },
   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 $e(this), this.anchor = Q(), this.inputId = Q();
+    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 Ce(this), this.anchor = Q(), this.inputId = Q();
   },
   setup() {
-    const e = z(null), t = z(null), s = z(null), i = xe("kendoLocalizationService", {});
+    const e = z(null), t = z(null), s = z(null), i = ke("kendoLocalizationService", {});
     return {
       inputRef: e,
       elementRef: t,
@@ -224,7 +230,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
     };
   },
   mounted() {
-    this.observer = Oe && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.input = this.inputRef.input, this.base.wrapper = X(this, "kendoAnchor"), this.element = X(this, "kendoAnchor"), this.base.didMount(), this.setValidity();
+    this.observer = $e && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.input = this.inputRef.input, this.base.wrapper = X(this, "kendoAnchor"), this.element = X(this, "kendoAnchor"), this.base.didMount(), this.setValidity();
   },
   updated() {
     var g;
@@ -298,17 +304,17 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
       return this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened;
     },
     animationStyles() {
-      return this.windowWidth <= se ? {
+      return this.windowWidth <= this.adaptiveModeBreakpoints.small ? {
         top: 0,
         width: "100%",
         height: "100%"
       } : void 0;
     },
     classNameAdaptive() {
-      return this.windowWidth <= se ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom";
+      return this.windowWidth <= this.adaptiveModeBreakpoints.small ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom";
     },
     adaptiveState() {
-      return this.windowWidth <= Ae && this.$props.adaptive;
+      return this.windowWidth <= this.adaptiveModeBreakpoints.medium && this.$props.adaptive;
     }
   },
   methods: {
@@ -471,7 +477,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
         dataItems: t,
         textField: s
       } = this.$props;
-      this.suggested = Be(e, t, s);
+      this.suggested = Te(e, t, s);
     },
     setValidity() {
       this.input && this.input.setCustomValidity && this.input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || _e);
@@ -536,19 +542,19 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
       footer: w,
       groupStickyHeaderItemRender: j,
       placeholder: x,
-      inputAttributes: ne
+      inputAttributes: se
     } = this.$props;
-    const ae = this.currentFocused, le = !this.$props.validityStyles || this.validity().valid, E = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, W = k(this.computedValue(), n), q = b(E) ? E : W, oe = s && (!!q || b(this.computedValue())), C = this.base, y = C.vs, K = this.$props.id || this.inputId, N = Object.assign({}, {
+    const ne = this.currentFocused, ae = !this.$props.validityStyles || this.validity().valid, E = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, W = k(this.computedValue(), n), q = b(E) ? E : W, le = s && (!!q || b(this.computedValue())), C = this.base, y = C.vs, K = this.$props.id || this.inputId, N = Object.assign({}, {
       animate: !0,
       height: "200px"
-    }, this.$props.popupSettings), re = He(this).toLanguageString(ie, Le[ie]), M = this.isOpen, R = this.adaptiveState;
+    }, this.$props.popupSettings), oe = Re(this).toLanguageString(ie, He[ie]), M = this.isOpen, R = this.adaptiveState;
     y.enabled = g !== void 0, g !== void 0 && (y.skip = g.skip, y.total = g.total, y.pageSize = g.pageSize), this.group === void 0 && this.$props.groupField !== void 0 && (this.group = k(this.$props.dataItems[0], this.$props.groupField));
-    const de = (p) => {
+    const re = (p) => {
       const c = this.base.initState();
       c.event = p;
       const f = p.event.target.value;
       c.data.text = f, this.base.filterChanged(f, c), this.applyState(c);
-    }, ue = () => [o("div", {
+    }, de = () => [o("div", {
       class: "k-actionsheet-titlebar-group k-hbox"
     }, [o("div", {
       class: "k-actionsheet-title"
@@ -566,10 +572,10 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
       fillMode: "flat",
       onClick: this.toggleBtnClick,
       icon: "x",
-      svgIcon: Ee
+      svgIcon: Le
     }, null)])]), o("div", {
       class: "k-actionsheet-titlebar-group k-actionsheet-filter"
-    }, [ge.call(this)])], pe = O.call(this, ue, V.call(this)), ce = () => {
+    }, [fe.call(this)])], ue = O.call(this, de, V.call(this)), pe = () => {
       const p = C.getTemplateDef.call(this, T, _), c = C.getTemplateDef.call(this, w, _), f = O.call(this, j, V.call(this)), v = this.$props.dataItems || [];
       return o("div", {
         class: "k-list-container"
@@ -589,25 +595,25 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
       }, null), U.call(this), c && o("div", {
         class: "k-list-footer"
       }, [c])])]);
-    }, he = O.call(this, ce, V.call(this)), fe = function() {
+    }, ce = O.call(this, pe, V.call(this)), he = function() {
       return o(je, {
         expand: M,
         animation: !0,
         animationStyles: this.animationStyles,
         className: this.classNameAdaptive,
         contentClassName: "!k-overflow-hidden",
-        header: pe,
-        content: he,
+        header: ue,
+        content: ce,
         onClose: this.toggleBtnClick,
         navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
       }, null);
-    }, ge = function() {
+    }, fe = function() {
       const c = this.base.initState().data.text;
       return o(Ke, {
         adaptiveMode: !0,
         value: c,
         ref: "filterInput",
-        onChange: (f) => de(f),
+        onChange: (f) => re(f),
         onKeydown: this.onInputKeyDown,
         size: this.$props.size,
         rounded: this.$props.rounded,
@@ -624,13 +630,13 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
       g || (g = {
         skip: 0
       });
-      const H = g.skip, Se = `translateY(${y.translate}px)`, ye = M ? this.getFocusedIndex() : void 0, Ie = b(E) && E !== W ? null : this.computedValue();
-      return f && (v = this.base.getGroupedDataModernMode(v, f)), o(Me, {
+      const H = g.skip, be = `translateY(${y.translate}px)`, Se = M ? this.getFocusedIndex() : void 0, ye = b(E) && E !== W ? null : this.computedValue();
+      return f && (v = this.base.getGroupedDataModernMode(v, f)), o(we, {
         id: C.listBoxId,
         show: M,
         dataItems: v,
-        focusedIndex: ye,
-        value: Ie,
+        focusedIndex: Se,
+        value: ye,
         textField: n,
         valueField: c,
         optionsGuid: C.guid,
@@ -642,7 +648,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
           "k-list-scroller": !this.$props.virtual
         }),
         listStyle: y.enabled ? {
-          transform: Se
+          transform: be
         } : void 0,
         key: "listkey",
         skip: H,
@@ -652,17 +658,17 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
         noDataRender: P,
         groupField: f,
         onScroll: this.onScroll
-      }, ze(p = me.call(this)) ? p : {
+      }, ze(p = ge.call(this)) ? p : {
         default: () => [p]
       });
-    }, me = function() {
+    }, ge = function() {
       return y.enabled && o("div", {
         ref: "scrollElement",
         key: "scrollElementKey"
       }, null);
-    }, ve = function() {
+    }, me = function() {
       const p = O.call(this, this.$props.groupStickyHeaderItemRender, V.call(this)), c = C.getTemplateDef.call(this, T), f = C.getTemplateDef.call(this, w), v = this.$props.dataItems || [];
-      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = k(v[0], this.$props.groupField)), o(we, {
+      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = k(v[0], this.$props.groupField)), o(De, {
         ref: "container",
         onMousedown: (B) => B.preventDefault(),
         width: this.popupWidth,
@@ -687,7 +693,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
           class: "k-list-footer"
         }, [f])]
       });
-    }, be = function(p, c) {
+    }, ve = function(p, c) {
       const {
         tabIndex: f,
         dataItems: v = [],
@@ -697,7 +703,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
         skip: 0
       });
       const A = this.computedValue(), P = Math.max(0, v.findIndex((H) => I(H, A, B)));
-      return this.suggested && !I(this.valueOnDidUpdate, A, B) && (this.suggested = ""), o(De, {
+      return this.suggested && !I(this.valueOnDidUpdate, A, B) && (this.suggested = ""), o(Be, {
         id: c,
         placeholder: x,
         tabIndex: f || void 0,
@@ -718,7 +724,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
         ariaLabelledBy: this.$props.ariaLabelledBy,
         ariaDescribedBy: this.$props.ariaDescribedBy,
         ariaLabel: this.$props.ariaLabel,
-        inputAttributes: ne
+        inputAttributes: se
       }, null);
     }, Y = [_(function() {
       return o("span", {
@@ -726,42 +732,42 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ ke({
           [`k-input-${G[m] || m}`]: m,
           [`k-rounded-${Pe[D] || D}`]: D,
           [`k-input-${S}`]: S,
-          "k-invalid": !le,
+          "k-invalid": !ae,
           "k-loading": r,
           "k-required": this.required,
           "k-disabled": t,
-          "k-focus": ae && !t
+          "k-focus": ne && !t
         }, l),
-        ref: Ve(this, "kendoAnchor"),
+        ref: Oe(this, "kendoAnchor"),
         style: i ? {
           ...a,
           width: void 0
         } : a,
         dir: e
-      }, [be.call(this, q || "", K), oe && !r && o(Re, {
+      }, [ve.call(this, q || "", K), le && !r && o(Me, {
         onClearclick: this.clearButtonClick,
         key: "clearbutton"
-      }, null), r && o(Fe, {
+      }, null), r && o(Ve, {
         name: "loading",
         class: "k-input-loading-icon",
         key: "loading"
       }, null), o(Z, {
         type: "button",
         tabIndex: -1,
-        "aria-label": re,
+        "aria-label": oe,
         size: m,
         fillMode: S,
         rounded: null,
         class: "k-input-button",
         icon: d || "caret-alt-down",
-        svgIcon: u || Ne,
+        svgIcon: u || Ee,
         iconClass: h,
         onClick: this.toggleBtnClick,
         onMousedown: (p) => p.preventDefault()
-      }, null), !R && ve.call(this)]);
+      }, null), !R && me.call(this)]);
     }.call(this), {
       ...this.$attrs
-    }), R && fe.call(this)];
+    }), R && he.call(this)];
     return i ? o("span", {
       class: this.spanClassNames,
       onFocusin: this.handleFocus,

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