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

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"),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,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},groupField:{type:String},adaptive:{type:Boolean,default:void 0},adaptiveTitle:{type:String,default:void 0},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;
+"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,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},groupField:{type:String},adaptive:{type:Boolean,default:void 0},adaptiveTitle:{type:String,default:void 0},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 b;const{dataItems:e=[],dataItemKey:t,virtual:a,groupField:r,textField:o}=this.$props,s=this.isOpen,u=this.prevOpened!==void 0?this.prevOpened:this.prevCurrentOpened,l=!u&&s,d=this.$refs.list,f=this.$refs.filterInput,g=this.$refs.scrollElement;if(this.$refs.scroller,d&&(this.base.vs.list=d.list,this.base.list=d.list),g&&(this.base.vs.scrollElement=g),f&&(this.filterInput=f),d&&e.length&&this.base.vs.scrollerRef(d.$el),this.$props.popupSettings.animate||l&&this.onPopupOpened(),a&&this.virtualTotalHasChanged)this.base.vs.calcScrollElementHeight(),this.base.vs.reset(),this.virtualTotalHasChanged=!1;else{const c=this.computedValue(),v=this.prevCurrentValue;let h=e.findIndex(y=>p.areSame(y,c,t));r&&(h=(b=this.base.getGroupedDataModernMode(e,r))==null?void 0:b.indexOf(c));const S=!p.areSame(v,c,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&&u&&c&&S&&!this._navigated?this.base.scrollToItem(h):s&&u&&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,u=r?r.skip:0,l=e===-1&&s!==void 0?s:a[e-u],d=!p.areSame(l,this.computedValue(),o);this.triggerOnChange(l,t),d&&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,u=this.base.vs,l=this.computedValue(),d=a.findIndex(g=>p.areSame(g,l,o)),f=this.base.navigation.navigate({current:s.skip+d,max:(u.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((y,x)=>({item:y,itemIndex:x}));const o=this.searchState.word,s=this.searchState.last,u=p.sameCharsOnly(o,s);let l=r.length,d=Math.max(0,t.findIndex(y=>p.areSame(y,this.computedValue(),a))),f;this.$props.defaultItem&&(f={item:this.$props.defaultItem,itemIndex:-1},l+=1,d+=1),d+=u?1:0,r=p.shuffleData(r,d,f);let g,b,c,v=0;const{textField:h,ignoreCase:S}=this.$props;for(;v<l;){if(g=p.getItemValue(r[v].item,h),b=u&&p.matchText(g,s,S),c=p.matchText(g,o,S),b||c){v=r[v].itemIndex;break}v++}if(v!==l){const y=this.base.initState();y.event=e,this.handleItemSelect(v,y),this.applyState(y),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,u=this.isOpen,l=e.keyCode,d=l===i.Keys.home||l===i.Keys.end,f=l===i.Keys.up||l===i.Keys.down,g=!u&&(e.altKey&&l===i.Keys.down||l===i.Keys.enter||l===i.Keys.space),b=u&&(e.altKey&&l===i.Keys.up||l===i.Keys.esc),c=a&&(l===i.Keys.left||l===i.Keys.right),v=f||!r&&(c||d),h=this.base.initState();if(h.event=e,!o){if(d&&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(u&&l===i.Keys.enter){const S=this.focusedIndex();S!==void 0&&this.handleItemSelect(S,h),this.base.togglePopup(h),e.preventDefault()}else g||b?(this.adaptiveState&&this.handleWrapperClick(e),this.base.togglePopup(h),e.preventDefault()):v&&(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,u=this.computedValue(),d=!(t.findIndex(f=>p.areSame(f,u,r))<0&&!this.$props.defaultItem);return!d&&e&&a.skip===0?s?s(t,e,o):t.indexOf(p.getFocusedItem(t,e,o)):!d&&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){var b;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,u;if(!o||!s.length)return;const l=a&&((b=a.querySelector(".k-list-item"))==null?void 0:b.offsetHeight)||0,d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:l),g=e.target.scrollTop-t.skip*d;o&&(s=this.base.getGroupedDataModernMode(s,o),u=s[0][o]);for(let c=1;c<s.length&&!(d*c>g);c++)s[c]&&s[c][o]&&(u=s[c][o]);u!==this.group&&(r.data.group=u,this.applyState(r))}},render(){const{style:e,className:t,label:a,dir:r,virtual:o={skip:0},size:s,rounded:u,fillMode:l,dataItemKey:d,dataItems:f=[],disabled:g,tabIndex:b,loading:c,icon:v,svgIcon:h,iconClassName:S,adaptiveTitle:y,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(m=>p.areSame(m,T,d)),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(m){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,m):m},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"},[y]),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 m=k.getTemplateDef.call(this,x,n.h),I=k.getTemplateDef.call(this,M,n.h),$=i.templateRendering.call(this,q,i.getListeners.call(this));return n.createVNode("div",{class:"k-list-container"},[m&&n.createVNode("div",{class:"k-list-header"},[m]),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),I&&n.createVNode("div",{class:"k-list-footer"},[I])])])},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:m,defaultItem:I}=this.$props;return I!==void 0&&n.createVNode(fe.ListDefaultItem,{defaultItem:I,textField:m,selected:p.areSame(this.computedValue(),I,d),key:"defaultitemkey",onDefaultitemclick:this.handleDefaultItemClick},null)},R=function(){let m;const{textField:I,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:I,valueField:d,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(m=ae.call(this))?m:{default:()=>[m]})},K=function(){const m=this.$props.filter!==void 0?this.$props.filter:this.currentText;return this.$props.filterable&&n.createVNode(he.ListFilter,{value:m,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 m=i.templateRendering.call(this,this.$props.groupStickyHeaderItemRender,i.getListeners.call(this)),I=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:m},null),I&&n.createVNode("div",{class:"k-list-header"},[I]),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[u]||u}`]:u,[`k-picker-${l}`]:l,"k-focus":U,"k-disabled":g,"k-invalid":!A,"k-loading":c,"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(b,g),accesskey:this.$props.accessKey,onKeydown:this.handleKeyDown,onKeypress:this.handleKeyPress,role:"combobox",onClick:g?i.noop:this.handleWrapperClick,"aria-disabled":g||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,c&&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:v||"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;

package/DropDownList/DropDownList.mjs

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as Se, createVNode as n, h as T, ref as N, isVNode as $e } from "vue";
-import { kendoThemeMaps as Ce, templateRendering as C, getListeners as x, getTemplate as xe, Keys as f, canUseDOM as Oe, getRef as A, guid as W, classNames as B, noop as G, getTabIndex as we, setRef as q, Icon as Fe } from "@progress/kendo-vue-common";
+import { kendoThemeMaps as Ce, templateRendering as C, getListeners as x, getTemplate as xe, Keys as m, canUseDOM as Oe, getRef as A, guid as W, classNames as B, noop as G, getTabIndex as we, setRef as q, Icon as Fe } from "@progress/kendo-vue-common";
 import { Button as U } from "@progress/kendo-vue-buttons";
 import { ListContainer as De } from "../common/ListContainer.mjs";
 import { ListFilter as Ve } from "../common/ListFilter.mjs";
@@ -17,8 +17,8 @@ import { GroupStickyHeader as Y } from "../common/GroupStickyHeader.mjs";
 import { selectButton as J, messages as Le } from "../messages/main.mjs";
 import { provideLocalizationService as Re } from "@progress/kendo-vue-intl";
 import { MOBILE_MEDIUM_DEVICE as Ne, MOBILE_SMALL_DEVICE as Ee } from "../common/constants.mjs";
-import { ActionSheet as Ke } from "@progress/kendo-vue-layout";
-import { getItemValue as F, areSame as y, isPresent as Q, getFocusedItem as He, sameCharsOnly as Pe, shuffleData as _e, matchText as X, preventDefaultNonInputs as Z } from "../common/utils.mjs";
+import { ActionSheet as He } from "@progress/kendo-vue-layout";
+import { getItemValue as F, areSame as I, isPresent as Q, getFocusedItem as Ke, sameCharsOnly as Pe, shuffleData as _e, matchText as X, preventDefaultNonInputs as Z } from "../common/utils.mjs";
 import { xIcon as je, caretAltDownIcon as ze } from "@progress/kendo-svg-icons";
 const {
   sizeMap: E,
@@ -234,22 +234,22 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
     this.observer = Oe && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.select = A(this, "select"), this.base.wrapper = A(this, "kendoAnchor"), this.base.didMount(), this.setValidity();
   },
   updated() {
-    var I;
+    var v;
     const {
       dataItems: e = [],
       dataItemKey: t,
       virtual: s,
       groupField: l,
       textField: o
-    } = this.$props, i = this.isOpen, r = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, a = !r && i, d = this.$refs.list, h = this.$refs.filterInput, p = this.$refs.scrollElement;
-    if (this.$refs.scroller, d && (this.base.vs.list = d.list, this.base.list = d.list), p && (this.base.vs.scrollElement = p), h && (this.filterInput = h), d && e.length && this.base.vs.scrollerRef(d.$el), this.$props.popupSettings.animate || a && this.onPopupOpened(), s && this.virtualTotalHasChanged)
+    } = this.$props, i = this.isOpen, d = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, a = !d && i, r = this.$refs.list, h = this.$refs.filterInput, c = this.$refs.scrollElement;
+    if (this.$refs.scroller, r && (this.base.vs.list = r.list, this.base.list = r.list), c && (this.base.vs.scrollElement = c), h && (this.filterInput = h), r && e.length && this.base.vs.scrollerRef(r.$el), this.$props.popupSettings.animate || a && this.onPopupOpened(), s && this.virtualTotalHasChanged)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset(), this.virtualTotalHasChanged = !1;
     else {
-      const g = this.computedValue(), m = this.prevCurrentValue;
-      let u = e.findIndex((v) => y(v, g, t));
-      l && (u = (I = this.base.getGroupedDataModernMode(e, l)) == null ? void 0 : I.indexOf(g));
-      const k = !y(m, g, t);
-      a && s ? (this.base.scrollToVirtualItem(s, u), this.prevCurrentOpened = !0) : a && !s ? (e && e.length !== 0 && this.base.resetGroupStickyHeader(e[0][l], this), this.base.scrollToItem(u), this.prevCurrentOpened = !0) : i && r && g && k && !this._navigated ? this.base.scrollToItem(u) : i && r && this._navigated && (this._navigated && s && s.skip === 0 ? this.base.vs.reset() : this._navigated && s && s.skip === s.total - s.pageSize && this.base.vs.scrollToEnd());
+      const p = this.computedValue(), g = this.prevCurrentValue;
+      let u = e.findIndex((b) => I(b, p, t));
+      l && (u = (v = this.base.getGroupedDataModernMode(e, l)) == null ? void 0 : v.indexOf(p));
+      const k = !I(g, p, t);
+      a && s ? (this.base.scrollToVirtualItem(s, u), this.prevCurrentOpened = !0) : a && !s ? (e && e.length !== 0 && this.base.resetGroupStickyHeader(e[0][l], this), this.base.scrollToItem(u), this.prevCurrentOpened = !0) : i && d && p && k && !this._navigated ? this.base.scrollToItem(u) : i && d && this._navigated && (this._navigated && s && s.skip === 0 ? this.base.vs.reset() : this._navigated && s && s.skip === s.total - s.pageSize && this.base.vs.scrollToEnd());
     }
     this._navigated = !1, this.prevCurrentValue = this.computedValue(), this.setValidity();
   },
@@ -259,7 +259,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         dataItems: e = [],
         dataItemKey: t
       } = this.$props, s = this.computedValue();
-      return e.findIndex((l) => y(l, s, t));
+      return e.findIndex((l) => I(l, s, t));
     },
     spanClassNames() {
       const e = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
@@ -321,8 +321,8 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         virtual: l,
         dataItemKey: o,
         defaultItem: i
-      } = this.$props, r = l ? l.skip : 0, a = e === -1 && i !== void 0 ? i : s[e - r], d = !y(a, this.computedValue(), o);
-      this.triggerOnChange(a, t), d && this.base.triggerPageChangeCornerItems(a, t);
+      } = this.$props, d = l ? l.skip : 0, a = e === -1 && i !== void 0 ? i : s[e - d], r = !I(a, this.computedValue(), o);
+      this.triggerOnChange(a, t), r && this.base.triggerPageChangeCornerItems(a, t);
     },
     onNavigate(e, t) {
       const {
@@ -334,9 +334,9 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
           total: 0,
           pageSize: 0
         }
-      } = this.$props, r = this.base.vs, a = this.computedValue(), d = s.findIndex((p) => y(p, a, o)), h = this.base.navigation.navigate({
-        current: i.skip + d,
-        max: (r.enabled ? i.total : s.length) - 1,
+      } = this.$props, d = this.base.vs, a = this.computedValue(), r = s.findIndex((c) => I(c, a, o)), h = this.base.navigation.navigate({
+        current: i.skip + r,
+        max: (d.enabled ? i.total : s.length) - 1,
         min: l !== void 0 ? -1 : 0,
         keyCode: t
       });
@@ -350,31 +350,31 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         dataItems: t = [],
         dataItemKey: s
       } = this.$props;
-      let l = t.map((v, D) => ({
-        item: v,
+      let l = t.map((b, D) => ({
+        item: b,
         itemIndex: D
       }));
-      const o = this.searchState.word, i = this.searchState.last, r = Pe(o, i);
-      let a = l.length, d = Math.max(0, t.findIndex((v) => y(v, this.computedValue(), s))), h;
+      const o = this.searchState.word, i = this.searchState.last, d = Pe(o, i);
+      let a = l.length, r = Math.max(0, t.findIndex((b) => I(b, this.computedValue(), s))), h;
       this.$props.defaultItem && (h = {
         item: this.$props.defaultItem,
         itemIndex: -1
-      }, a += 1, d += 1), d += r ? 1 : 0, l = _e(l, d, h);
-      let p, I, g, m = 0;
+      }, a += 1, r += 1), r += d ? 1 : 0, l = _e(l, r, h);
+      let c, v, p, g = 0;
       const {
         textField: u,
         ignoreCase: k
       } = this.$props;
-      for (; m < a; ) {
-        if (p = F(l[m].item, u), I = r && X(p, i, k), g = X(p, o, k), I || g) {
-          m = l[m].itemIndex;
+      for (; g < a; ) {
+        if (c = F(l[g].item, u), v = d && X(c, i, k), p = X(c, o, k), v || p) {
+          g = l[g].itemIndex;
           break;
         }
-        m++;
+        g++;
       }
-      if (m !== a) {
-        const v = this.base.initState();
-        v.event = e, this.handleItemSelect(m, v), this.applyState(v), this.valueDuringOnChange = void 0;
+      if (g !== a) {
+        const b = this.base.initState();
+        b.event = e, this.handleItemSelect(g, b), this.applyState(b), this.valueDuringOnChange = void 0;
       }
     },
     handleKeyDown(e) {
@@ -389,14 +389,14 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
           total: 0,
           pageSize: 0
         }
-      } = this.$props, r = this.isOpen, a = e.keyCode, d = a === f.home || a === f.end, h = a === f.up || a === f.down, p = !r && (e.altKey && a === f.down || a === f.enter || a === f.space), I = r && (e.altKey && a === f.up || a === f.esc), g = s && (a === f.left || a === f.right), m = h || !l && (g || d), u = this.base.initState();
+      } = this.$props, d = this.isOpen, a = e.keyCode, r = a === m.home || a === m.end, h = a === m.up || a === m.down, c = !d && (e.altKey && a === m.down || a === m.enter || a === m.space), v = d && (e.altKey && a === m.up || a === m.esc), p = s && (a === m.left || a === m.right), g = h || !l && (p || r), u = this.base.initState();
       if (u.event = e, !o) {
-        if (d && this.base.vs.enabled)
-          a === f.home ? i.skip !== 0 ? (this.base.triggerOnPageChange(u, 0, i.pageSize), this._navigated = !0) : this.triggerOnChange(t[0], u) : i.skip < i.total - i.pageSize ? (this.base.triggerOnPageChange(u, i.total - i.pageSize, i.pageSize), this._navigated = !0) : this.triggerOnChange(t[t.length - 1], u);
-        else if (r && a === f.enter) {
+        if (r && this.base.vs.enabled)
+          a === m.home ? i.skip !== 0 ? (this.base.triggerOnPageChange(u, 0, i.pageSize), this._navigated = !0) : this.triggerOnChange(t[0], u) : i.skip < i.total - i.pageSize ? (this.base.triggerOnPageChange(u, i.total - i.pageSize, i.pageSize), this._navigated = !0) : this.triggerOnChange(t[t.length - 1], u);
+        else if (d && a === m.enter) {
           const k = this.focusedIndex();
           k !== void 0 && this.handleItemSelect(k, u), this.base.togglePopup(u), e.preventDefault();
-        } else p || I ? (this.adaptiveState && this.handleWrapperClick(e), this.base.togglePopup(u), e.preventDefault()) : m && (this.onNavigate(u, a), e.preventDefault());
+        } else c || v ? (this.adaptiveState && this.handleWrapperClick(e), this.base.togglePopup(u), e.preventDefault()) : g && (this.onNavigate(u, a), e.preventDefault());
         this.applyState(u);
       }
     },
@@ -423,7 +423,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       t.event = e, this.currentFocused || (t.data.currentFocused = !0), this.base.togglePopup(t), this.applyState(t);
     },
     handleKeyPress(e) {
-      if (this.$props.filterable || e.keyCode === f.enter)
+      if (this.$props.filterable || e.keyCode === m.enter)
         return;
       let t = String.fromCharCode(e.charCode || e.keyCode);
       this.$props.ignoreCase && (t = t.toLowerCase()), t === " " && e.preventDefault(), this.searchState = {
@@ -452,8 +452,8 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         dataItemKey: l,
         textField: o,
         focusedItemIndex: i
-      } = this.$props, r = this.computedValue(), d = !(t.findIndex((h) => y(h, r, l)) < 0 && !this.$props.defaultItem);
-      return !d && e && s.skip === 0 ? i ? i(t, e, o) : t.indexOf(He(t, e, o)) : !d && s.skip === 0 ? 0 : void 0;
+      } = this.$props, d = this.computedValue(), r = !(t.findIndex((h) => I(h, d, l)) < 0 && !this.$props.defaultItem);
+      return !r && e && s.skip === 0 ? i ? i(t, e, o) : t.indexOf(Ke(t, e, o)) : !r && s.skip === 0 ? 0 : void 0;
     },
     focusElement(e) {
       this._skipFocusEvent = !0, e.focus(), setTimeout(() => this._skipFocusEvent = !1, 30);
@@ -462,7 +462,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       this.select && this.select.setCustomValidity && this.select.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || Ge);
     },
     triggerOnChange(e, t) {
-      y(this.computedValue(), e, this.$props.dataItemKey) || (this.$props.value === void 0 && (this.currentValue = e), this.valueDuringOnChange = e, t.events.push({
+      I(this.computedValue(), e, this.$props.dataItemKey) || (this.$props.value === void 0 && (this.currentValue = e), this.valueDuringOnChange = e, t.events.push({
         type: "change"
       }));
     },
@@ -477,6 +477,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       this.base.repositionPopup();
     },
     onScroll(e) {
+      var v;
       this.isScrolling = !0;
       const {
         vs: t,
@@ -488,14 +489,14 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       } = this.$props;
       let {
         dataItems: i = []
-      } = this.$props, r;
+      } = this.$props, d;
       if (!o || !i.length)
         return;
-      const a = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : s ? s.children[0].offsetHeight : 0), h = e.target.scrollTop - t.skip * a;
-      o && (i = this.base.getGroupedDataModernMode(i, o), r = i[0][o]);
-      for (let p = 1; p < i.length && !(a * p > h); p++)
-        i[p] && i[p][o] && (r = i[p][o]);
-      r !== this.group && (l.data.group = r, this.applyState(l));
+      const a = s && ((v = s.querySelector(".k-list-item")) == null ? void 0 : v.offsetHeight) || 0, r = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : a), c = e.target.scrollTop - t.skip * r;
+      o && (i = this.base.getGroupedDataModernMode(i, o), d = i[0][o]);
+      for (let p = 1; p < i.length && !(r * p > c); p++)
+        i[p] && i[p][o] && (d = i[p][o]);
+      d !== this.group && (l.data.group = d, this.applyState(l));
     }
   },
   render() {
@@ -508,19 +509,19 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         skip: 0
       },
       size: i,
-      rounded: r,
+      rounded: d,
       fillMode: a,
-      dataItemKey: d,
+      dataItemKey: r,
       dataItems: h = [],
-      disabled: p,
-      tabIndex: I,
-      loading: g,
-      icon: m,
+      disabled: c,
+      tabIndex: v,
+      loading: p,
+      icon: g,
       svgIcon: u,
       iconClassName: k,
-      adaptiveTitle: v,
+      adaptiveTitle: b,
       header: D,
-      footer: K,
+      footer: H,
       groupStickyHeaderItemRender: ee
     } = this.$props, O = this.isOpen, te = F(this.computedValue(), this.$props.textField), ie = !this.$props.validityStyles || this.validity().valid, S = this.base, w = S.vs, L = this.$props.id || this.inputId;
     w.enabled = this.$props.virtual !== void 0;
@@ -529,7 +530,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       height: "200px"
     }, this.$props.popupSettings), se = Re(this).toLanguageString(J, Le[J]), M = this.adaptiveState;
     this.group === void 0 && this.$props.groupField !== void 0 && (this.group = F(this.$props.dataItems[0], this.$props.groupField));
-    const ae = C.call(this, this.$props.valueRender, x.call(this)), ne = this.currentFocused, H = this.primitiveValue(), le = h.findIndex((c) => y(c, H, d)), oe = n("span", {
+    const ae = C.call(this, this.$props.valueRender, x.call(this)), ne = this.currentFocused, K = this.primitiveValue(), le = h.findIndex((f) => I(f, K, r)), oe = n("span", {
       class: "k-input-inner",
       id: this.dropDownListId
     }, [n("span", {
@@ -544,7 +545,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         ...this.$data
       }
     });
-    const de = function(c) {
+    const de = function(f) {
       return n("select", {
         name: this.$props.name,
         id: L,
@@ -561,7 +562,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
           left: "50%"
         }
       }, [n("option", {
-        value: this.$props.valueMap ? this.$props.valueMap.call(void 0, c) : c
+        value: this.$props.valueMap ? this.$props.valueMap.call(void 0, f) : f
       }, null)]);
     }, pe = () => [n("div", {
       class: "k-actionsheet-titlebar-group k-hbox"
@@ -569,7 +570,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       class: "k-actionsheet-title"
     }, [n("div", {
       class: "k-text-center"
-    }, [v]), n("div", {
+    }, [b]), n("div", {
       class: "k-actionsheet-subtitle k-text-center"
     }, null)]), n("div", {
       class: "k-actionsheet-actions"
@@ -585,12 +586,12 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
     }, null)])]), n("div", {
       class: "k-actionsheet-titlebar-group k-actionsheet-filter"
     }, [j.call(this)])], ue = C.call(this, pe, x.call(this)), he = () => {
-      const c = S.getTemplateDef.call(this, D, T), b = S.getTemplateDef.call(this, K, T), $ = C.call(this, ee, x.call(this));
+      const f = S.getTemplateDef.call(this, D, T), y = S.getTemplateDef.call(this, H, T), $ = C.call(this, ee, x.call(this));
       return n("div", {
         class: "k-list-container"
-      }, [c && n("div", {
+      }, [f && n("div", {
         class: "k-list-header"
-      }, [c]), n("div", {
+      }, [f]), n("div", {
         class: B("k-list", {
           [`k-list-${E[i] || i}`]: M ? !1 : i,
           "k-list-lg": !!M,
@@ -599,11 +600,11 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       }, [P.call(this), this.group && h.length !== 0 && n(Y, {
         group: this.group,
         render: $
-      }, null), _.call(this), b && n("div", {
+      }, null), _.call(this), y && n("div", {
         class: "k-list-footer"
-      }, [b])])]);
+      }, [y])])]);
     }, ce = C.call(this, he, x.call(this)), fe = function() {
-      return n(Ke, {
+      return n(He, {
         expand: O,
         animation: !0,
         animationStyles: this.animationStyles,
@@ -616,20 +617,20 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       }, null);
     }, P = function() {
       const {
-        textField: c,
-        defaultItem: b
+        textField: f,
+        defaultItem: y
       } = this.$props;
-      return b !== void 0 && n(Me, {
-        defaultItem: b,
-        textField: c,
-        selected: y(this.computedValue(), b, d),
+      return y !== void 0 && n(Me, {
+        defaultItem: y,
+        textField: f,
+        selected: I(this.computedValue(), y, r),
         key: "defaultitemkey",
         onDefaultitemclick: this.handleDefaultItemClick
       }, null);
     }, _ = function() {
-      let c;
+      let f;
       const {
-        textField: b,
+        textField: y,
         groupField: $
       } = this.$props;
       let R = this.$props.dataItems || [];
@@ -640,8 +641,8 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         dataItems: R.slice(),
         focusedIndex: this.focusedIndex(),
         value: this.computedValue(),
-        textField: b,
-        valueField: d,
+        textField: y,
+        valueField: r,
         optionsGuid: this.base.guid,
         ref: "list",
         wrapperStyle: {
@@ -659,13 +660,13 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         noDataRender: ye,
         groupField: $,
         onScroll: this.onScroll
-      }, We(c = me.call(this)) ? c : {
-        default: () => [c]
+      }, We(f = me.call(this)) ? f : {
+        default: () => [f]
       });
     }, j = function() {
-      const c = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
+      const f = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
       return this.$props.filterable && n(Ve, {
-        value: c,
+        value: f,
         ref: "filterInput",
         onChange: this.handleListFilterChange,
         onKeydown: this.handleKeyDown,
@@ -681,7 +682,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         key: "scrollElementKey"
       }, null);
     }, ge = function() {
-      const c = C.call(this, this.$props.groupStickyHeaderItemRender, x.call(this)), b = S.getTemplateDef.call(this, D), $ = S.getTemplateDef.call(this, K);
+      const f = C.call(this, this.$props.groupStickyHeaderItemRender, x.call(this)), y = S.getTemplateDef.call(this, D), $ = S.getTemplateDef.call(this, H);
       return n(De, {
         ref: "container",
         onMousedown: Z,
@@ -703,10 +704,10 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       }, {
         default: () => [j.call(this), P.call(this), this.group && h.length !== 0 && n(Y, {
           group: this.group,
-          render: c
-        }, null), b && n("div", {
+          render: f
+        }, null), y && n("div", {
           class: "k-list-header"
-        }, [b]), _.call(this), $ && n("div", {
+        }, [y]), _.call(this), $ && n("div", {
           class: "k-list-footer"
         }, [$])]
       });
@@ -717,12 +718,12 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         ref: q(this, "kendoAnchor"),
         class: B("k-dropdownlist k-picker", t, {
           [`k-picker-${E[i] || i}`]: i,
-          [`k-rounded-${Ae[r] || r}`]: r,
+          [`k-rounded-${Ae[d] || d}`]: d,
           [`k-picker-${a}`]: a,
           "k-focus": ne,
-          "k-disabled": p,
+          "k-disabled": c,
           "k-invalid": !ie,
-          "k-loading": g,
+          "k-loading": p,
           "k-required": this.required
         }),
         style: s ? {
@@ -733,13 +734,13 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         onMousedown: O ? Z : G,
         onFocusin: this.handleFocus,
         onFocusout: this.handleBlur,
-        tabindex: we(I, p),
+        tabindex: we(v, c),
         accesskey: this.$props.accessKey,
         onKeydown: this.handleKeyDown,
         onKeypress: this.handleKeyPress,
         role: "combobox",
-        onClick: p ? G : this.handleWrapperClick,
-        "aria-disabled": p || void 0,
+        onClick: c ? G : this.handleWrapperClick,
+        "aria-disabled": c || void 0,
         "aria-haspopup": !0,
         "aria-expanded": O || !1,
         "aria-owns": this.base.listBoxId,
@@ -748,7 +749,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedBy": this.dropDownListId,
         title: this.$props.title
-      }, [re, g && n(Fe, {
+      }, [re, p && n(Fe, {
         name: "loading",
         class: "k-input-loading-icon",
         key: "loading"
@@ -760,10 +761,10 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         rounded: null,
         ariaLabel: se,
         class: "k-input-button",
-        icon: m || "caret-alt-down",
+        icon: g || "caret-alt-down",
         svgIcon: u || ze,
         iconClass: k
-      }, null), de.call(this, H), !M && ge.call(this)]);
+      }, null), de.call(this, K), !M && ge.call(this)]);
     }.call(this), {
       ...this.$attrs
     }), M && fe.call(this)];