@progress/kendo-vue-inputs 6.1.0-develop.1 → 6.1.0-develop.2

package/numerictextbox/NumericTextBox.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 a=require("vue"),s=require("@progress/kendo-vue-common"),m=require("@progress/kendo-vue-intl"),f=require("@progress/kendo-vue-buttons"),r=require("../messages/main.js"),i=require("./utils/main.js"),S=require("../package-metadata.js"),p=require("@progress/kendo-svg-icons"),b="Please enter a valid value!",k=a.defineComponent({model:{event:"changemodel"},emits:{change:null,changemodel:null,"update:modelValue":null,focus:null,blur:null},props:{modelValue:Number,value:Number,defaultValue:Number,step:{type:Number,default:1},format:[String,Object],tabIndex:Number,accessKey:String,title:String,placeholder:String,min:Number,max:Number,spinners:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},dir:String,name:String,label:String,validationMessage:String,validityStyles:{type:Boolean,default:!0},valid:{type:Boolean,default:void 0},size:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large"].includes(t)}},rounded:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large","full"].includes(t)}},fillMode:{type:String,default:"solid",validator:function(t){return[null,"solid","flat","outline"].includes(t)}},required:{type:Boolean,default:!1},id:String,ariaLabel:String,iconName:String,inputPrefix:[String,Function],inputSuffix:[String,Function],showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,inputType:{type:String,default:"tel"},wrapperClass:String},inject:{kendoIntlService:{default:null},kendoLocalizationService:{default:null}},data(){return{hasMounted:!1,isInvalid:!1,isEmpty:!1,currentValue:0,valueDuringOnChange:0,currentLooseValue:"",selectionStart:0,selectionEnd:0,decimalSelect:!1,focused:!1,forceUpdate:!1}},created(){s.validatePackage(S.packageMetadata),this._textBeforeInput="",this._inputId=s.guid(),this.$data.currentLooseValue=null,this.$data.valueDuringOnChange=void 0,this._intl=m.provideIntlService(this),this._symbols=this._intl.numberSymbols(),this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$props.defaultValue!==void 0?this.$data.currentValue=this.$props.defaultValue:this.$data.currentValue=null},mounted(){this._input=s.getRef(this,"input"),this._elementWrapper=this.elementWrapperRef,this.$data.hasMounted=!0,this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},updated(){!(s.canUseDOM&&document.activeElement!==this._input||!this._input)&&this.$data.currentLooseValue!==null&&this.$data.forceUpdate&&this._input.type!=="number"&&(this._input.selectionStart=this.$data.selectionStart,this._input.selectionEnd=this.$data.selectionEnd,this.$data.forceUpdate=!1),this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},computed:{computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$data.currentValue},looseValue(){return i.formatValue(this.$data.focused?this.$data.currentLooseValue:i.getStateOrPropsValue(this.$props.value,this.$data.currentValue),this.$props.format,this._intl)},spanClassNames(){const t=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid,e=this.computedValue;return{"k-floating-label-container":!0,"k-focus":this.$data.focused,"k-empty":!(e===0||e||this.$props.placeholder),"k-invalid":!t&&t!==void 0,"k-rtl":this.$props.dir==="rtl",[this.inputClass]:this.inputClass}},wrapperClassNames(){const{size:t,fillMode:e,rounded:n,required:l,disabled:u}=this.$props,o=!this.$props.validityStyles||this.validity().valid;return{"k-input":!0,"k-numerictextbox":!0,[`k-input-${s.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${e}`]:e,[`k-rounded-${s.kendoThemeMaps.roundedMap[n]||n}`]:n,"k-invalid":!o,"k-required":l,"k-disabled":u,"k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,[this.inputClass]:this.inputClass}}},methods:{validity(){const t=this.$props.validationMessage!==void 0,e=!this.$data.valueIsOutOfRange&&(!this.$props.required||this.computedValue!==null),n=this.$props.valid!==void 0?this.$props.valid:e;return{customError:t,valid:n,valueMissing:this.computedValue===null}},clearClick(t){this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$data.currentValue=null,this.$emit("changemodel",null),this.$emit("update:modelValue",null),this.$emit("change",{event:t,value:null,component:this,target:{name:this.$props.name,value:null},validity:this.validity()})},focus(){this._input&&this._input.focus()},emitFocus(t){this.$data.currentLooseValue=this._prevLooseValue,this.$data.focused=!0,this.$emit("focus",t),this.$data.forceUpdate=!0},emitBlur(t){this.$data.eventValue=null,this.$data.prevLooseValue="",this.$data.currentLooseValue="",this.$data.focused=!1,this.$data.selectionStart=void 0,this.$data.selectionEnd=void 0,this.$data.decimalSelect=!1,this.$data.valueIsCorrected=!1,this.$data.valueIsOutOfRange=!1,this.$emit("blur",t),this.$data.forceUpdate=!0},handleFocus(t){this.$data.focused=!0},handleBlur(t){this.$data.focused=!1},setValidity(){this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||b)},getCurrentState(){return{eventValue:i.getStateOrPropsValue(this.$props.value,this.$data.currentValue),prevLooseValue:this._prevLooseValue,currentLooseValue:this._input.value,selectionStart:this._input.selectionStart,selectionEnd:this._input.selectionEnd,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1,isPaste:this._isPaste,focused:this.$data.focused}},parseNumber(t){return this._intl.parseNumber(t,this.$props.format)},elementChange(t){const e=this.getCurrentState();this._isPaste=!1,this.triggerChange(t,i.sanitizeNumber(e,this.$props.format,this._intl))},triggerChange(t,e){if(this.$props.disabled)return;this.$data.valueDuringOnChange=e.eventValue,this.$data.currentValue=e.eventValue;const n=i.formatValue(i.rangeValue(e.eventValue,this.$props.min,this.$props.max),this.$props.format,this._intl),l=i.rangeValue(this.parseNumber(n),this.$props.min,this.$props.max);if(l!==e.eventValue&&(e.valueIsOutOfRange=!0,e.eventValue=l,this.$data.valueDuringOnChange=l,this.$data.currentValue=l),e.valueIsCorrected){const o=this._elementWrapper;o&&o.className.indexOf("k-invalid")===-1&&(this.$data.isInvalid=!0,setTimeout(()=>{this.$data.isInvalid=!1},50))}const u=this.$props.value!==e.eventValue;this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$data.currentValue=this.$data.valueDuringOnChange,this.$data.prevLooseValue=e.prevLooseValue,this.$data.currentLooseValue=void 0,this.$data.currentLooseValue=e.currentLooseValue,this.$data.selectionStart=e.selectionStart,this.$data.selectionEnd=e.selectionEnd,this.$data.decimalSelect=e.decimalSelect,this.$data.valueIsCorrected=e.valueIsCorrected,this.$data.valueIsOutOfRange=e.valueIsOutOfRange,this.$data.focused=e.focused,this.$data.isPaste=e.isPaste,this.$data.forceUpdate=!this.$data.forceUpdate,u&&(this.$emit("changemodel",this.$data.valueDuringOnChange),this.$emit("update:modelValue",this.$data.valueDuringOnChange),this.$emit("change",{event:t,value:this.$data.valueDuringOnChange,component:this,target:{name:this.$props.name,value:this.$data.valueDuringOnChange},validity:this.validity()})),this.$data.valueDuringOnChange=void 0},onPasteHandler(t){this._isPaste=!0},increase(t){const e=this.getCurrentState();i.increaseValue(this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,e)},decrease(t){const e=this.getCurrentState();i.decreaseValue(this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,e)},wheel(t){!s.canUseDOM||document.activeElement!==this._input||!this._input||(t.deltaY<0&&(t.preventDefault(),this.increase(t)),t.deltaY>0&&(t.preventDefault(),this.decrease(t)))},keyDown(t){let e=this.getCurrentState(),n,l,u,o;const d=this.parseNumber(String(e.currentLooseValue));if(!(e.selectionEnd>e.selectionStart&&e.selectionEnd-e.selectionStart===String(e.currentLooseValue).length)){switch(t.keyCode){case 38:i.increaseValue(d,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 40:i.decreaseValue(d,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 13:n=i.formatValue(i.rangeValue(d,this.$props.min,this.$props.max),this.$props.format,this._intl),l=i.rangeValue(this.parseNumber(n),this.$props.min,this.$props.max),e.eventValue=l,e.currentLooseValue=i.formatValue(l,this.$props.format,this._intl),e.selectionStart=e.selectionEnd=e.currentLooseValue.length;break;case 110:u=this._input,o=this._intl.numberSymbols(),u&&(e.currentLooseValue=e.currentLooseValue.slice(0,e.selectionStart)+o.decimal+e.currentLooseValue.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=e.selectionStart+1,e=i.sanitizeNumber(e,this.$props.format,this._intl));break;default:return}t.preventDefault(),this.triggerChange(t,e)}},spinnersWrapperMouseDown(t){s.canUseDOM&&this._input&&(t.preventDefault(),document.activeElement!==this._input&&this._input.focus())}},setup(){const t=a.ref(null),e=a.ref(null),n=a.inject("kendoLocalizationService",{}),l=a.inject("kendoIntlService",{});return{inputRef:t,elementWrapperRef:e,kendoLocalizationService:n,kendoIntlService:l}},render(){const{iconName:t,showValidationIcon:e,showLoadingIcon:n,showClearButton:l}=this.$props,u=this.$props.id||this._inputId,o=s.getDefaultSlots(this),d=m.provideLocalizationService(this),c=this.validity().valid;this.$props.value!==void 0&&this.$props.value!==this.$data.currentValue?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0&&this.$props.modelValue!==this.$data.currentValue&&(this.$data.currentValue=this.$props.modelValue),this._prevLooseValue=this.$data.currentLooseValue?this.looseValue:this.looseValue;const $=s.templateRendering.call(this,this.$props.inputPrefix,s.getListeners.call(this)),V=s.templateRendering.call(this,this.$props.inputSuffix,s.getListeners.call(this)),g=s.getTemplate.call(this,{h:a.h,template:$,additionalProps:{value:this.computedValue,valid:c}}),v=s.getTemplate.call(this,{h:a.h,template:V,additionalProps:{value:this.computedValue,valid:c}}),h=a.createVNode("span",{dir:this.$props.dir,class:this.wrapperClassNames,style:this.$attrs.style},[t&&a.createVNode(s.Icon,{name:t,class:"k-input-icon"},null),this.$props.inputPrefix&&a.createVNode("span",{class:"k-input-prefix"},[g]),a.createVNode("input",{tabindex:this.$props.tabIndex,accesskey:this.$props.accessKey,disabled:this.$props.disabled,title:this.$props.title,"aria-label":this.$props.ariaLabel,"aria-valuemin":this.$props.min,"aria-valuemax":this.$props.max,"aria-disabled":this.$props.disabled?"true":void 0,placeholder:this.$props.placeholder,type:this.$props.inputType,spellcheck:!1,autocomplete:"off",autocorrect:"off",class:this.inputInnerClass,id:u,role:"spinbutton",value:this.looseValue,name:this.$props.name,onWheel:this.wheel,onKeydown:this.keyDown,onInput:this.elementChange,onFocus:this.emitFocus,onBlur:this.emitBlur,onPaste:this.onPasteHandler,ref:s.setRef(this,"input")},null),this.$props.inputSuffix&&a.createVNode("span",{class:"k-input-suffix"},[v]),e&&c&&a.createVNode(s.Icon,{name:"check",icon:p.checkIcon,class:"k-input-validation-icon"},null),e&&!c&&a.createVNode(s.Icon,{name:"exclamation-circle",icon:p.exclamationCircleIcon,class:"k-input-validation-icon"},null),n&&a.createVNode(s.Icon,{name:"loading",class:"k-input-loading-icon"},null),l&&this.computedValue!==void 0&&this.computedValue!==null&&a.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[a.createVNode(s.Icon,{name:"x",icon:p.xIcon},null)]),o,this.$props.spinners&&a.createVNode("span",{class:"k-input-spinner k-spin-button",onMousedown:this.spinnersWrapperMouseDown},[a.createVNode(f.Button,{type:"button",tabIndex:-1,icon:"caret-alt-up",svgIcon:p.caretAltUpIcon,class:"k-spinner-increase",rounded:null,"aria-label":d.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),title:d.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),onClick:this.increase},null),a.createVNode(f.Button,{type:"button",tabIndex:-1,class:"k-spinner-decrease",icon:"caret-alt-down",svgIcon:p.caretAltDownIcon,rounded:null,"aria-label":d.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),title:d.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),onClick:this.decrease},null)])]);return this.$props.label?a.createVNode("span",{class:this.spanClassNames,onFocusin:this.handleFocus,onFocusout:this.handleBlur,dir:this.$props.dir},[h,this.$props.label?u?a.createVNode("label",{for:u,class:"k-floating-label"},[this.$props.label]):a.createVNode("span",{class:"k-label"},[this.$props.label]):null]):h}});exports.NumericTextBox=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),s=require("@progress/kendo-vue-common"),f=require("@progress/kendo-vue-intl"),$=require("@progress/kendo-vue-buttons"),r=require("../messages/main.js"),i=require("./utils/main.js"),S=require("../package-metadata.js"),p=require("@progress/kendo-svg-icons"),k="Please enter a valid value!",C=a.defineComponent({model:{event:"changemodel"},emits:{change:null,changemodel:null,"update:modelValue":null,focus:null,blur:null},props:{modelValue:Number,value:Number,defaultValue:Number,step:{type:Number,default:1},format:[String,Object],tabIndex:Number,accessKey:String,title:String,placeholder:String,min:Number,max:Number,spinners:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},dir:String,name:String,label:String,validationMessage:String,validityStyles:{type:Boolean,default:!0},valid:{type:Boolean,default:void 0},size:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large"].includes(t)}},rounded:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large","full"].includes(t)}},fillMode:{type:String,default:"solid",validator:function(t){return[null,"solid","flat","outline"].includes(t)}},required:{type:Boolean,default:!1},id:String,ariaLabel:String,iconName:String,inputPrefix:[String,Function],inputSuffix:[String,Function],showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,inputType:{type:String,default:"tel"},wrapperClass:String,inputAttributes:Object},inject:{kendoIntlService:{default:null},kendoLocalizationService:{default:null}},data(){return{hasMounted:!1,isInvalid:!1,isEmpty:!1,currentValue:0,valueDuringOnChange:0,currentLooseValue:"",selectionStart:0,selectionEnd:0,decimalSelect:!1,focused:!1,forceUpdate:!1}},created(){s.validatePackage(S.packageMetadata),this._textBeforeInput="",this._inputId=s.guid(),this.$data.currentLooseValue=null,this.$data.valueDuringOnChange=void 0,this._intl=f.provideIntlService(this),this._symbols=this._intl.numberSymbols(),this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$props.defaultValue!==void 0?this.$data.currentValue=this.$props.defaultValue:this.$data.currentValue=null},mounted(){this._input=s.getRef(this,"input"),this._elementWrapper=this.elementWrapperRef,this.$data.hasMounted=!0,this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},updated(){!(s.canUseDOM&&document.activeElement!==this._input||!this._input)&&this.$data.currentLooseValue!==null&&this.$data.forceUpdate&&this._input.type!=="number"&&(this._input.selectionStart=this.$data.selectionStart,this._input.selectionEnd=this.$data.selectionEnd,this.$data.forceUpdate=!1),this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},computed:{computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$data.currentValue},looseValue(){return i.formatValue(this.$data.focused?this.$data.currentLooseValue:i.getStateOrPropsValue(this.$props.value,this.$data.currentValue),this.$props.format,this._intl)},spanClassNames(){const t=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid,e=this.computedValue;return{"k-floating-label-container":!0,"k-focus":this.$data.focused,"k-empty":!(e===0||e||this.$props.placeholder),"k-invalid":!t&&t!==void 0,"k-rtl":this.$props.dir==="rtl",[this.inputClass]:this.inputClass}},wrapperClassNames(){const{size:t,fillMode:e,rounded:n,required:l,disabled:o}=this.$props,u=!this.$props.validityStyles||this.validity().valid;return{"k-input":!0,"k-numerictextbox":!0,[`k-input-${s.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${e}`]:e,[`k-rounded-${s.kendoThemeMaps.roundedMap[n]||n}`]:n,"k-invalid":!u,"k-required":l,"k-disabled":o,"k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,[this.inputClass]:this.inputClass}}},methods:{validity(){const t=this.$props.validationMessage!==void 0,e=!this.$data.valueIsOutOfRange&&(!this.$props.required||this.computedValue!==null),n=this.$props.valid!==void 0?this.$props.valid:e;return{customError:t,valid:n,valueMissing:this.computedValue===null}},clearClick(t){this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$data.currentValue=null,this.$emit("changemodel",null),this.$emit("update:modelValue",null),this.$emit("change",{event:t,value:null,component:this,target:{name:this.$props.name,value:null},validity:this.validity()})},focus(){this._input&&this._input.focus()},emitFocus(t){this.$data.currentLooseValue=this._prevLooseValue,this.$data.focused=!0,this.$emit("focus",t),this.$data.forceUpdate=!0},emitBlur(t){this.$data.eventValue=null,this.$data.prevLooseValue="",this.$data.currentLooseValue="",this.$data.focused=!1,this.$data.selectionStart=void 0,this.$data.selectionEnd=void 0,this.$data.decimalSelect=!1,this.$data.valueIsCorrected=!1,this.$data.valueIsOutOfRange=!1,this.$emit("blur",t),this.$data.forceUpdate=!0},handleFocus(t){this.$data.focused=!0},handleBlur(t){this.$data.focused=!1},setValidity(){this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||k)},getCurrentState(){return{eventValue:i.getStateOrPropsValue(this.$props.value,this.$data.currentValue),prevLooseValue:this._prevLooseValue,currentLooseValue:this._input.value,selectionStart:this._input.selectionStart,selectionEnd:this._input.selectionEnd,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1,isPaste:this._isPaste,focused:this.$data.focused}},parseNumber(t){return this._intl.parseNumber(t,this.$props.format)},elementChange(t){const e=this.getCurrentState();this._isPaste=!1,this.triggerChange(t,i.sanitizeNumber(e,this.$props.format,this._intl))},triggerChange(t,e){if(this.$props.disabled)return;this.$data.valueDuringOnChange=e.eventValue,this.$data.currentValue=e.eventValue;const n=i.formatValue(i.rangeValue(e.eventValue,this.$props.min,this.$props.max),this.$props.format,this._intl),l=i.rangeValue(this.parseNumber(n),this.$props.min,this.$props.max);if(l!==e.eventValue&&(e.valueIsOutOfRange=!0,e.eventValue=l,this.$data.valueDuringOnChange=l,this.$data.currentValue=l),e.valueIsCorrected){const u=this._elementWrapper;u&&u.className.indexOf("k-invalid")===-1&&(this.$data.isInvalid=!0,setTimeout(()=>{this.$data.isInvalid=!1},50))}const o=this.$props.value!==e.eventValue;this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$data.currentValue=this.$data.valueDuringOnChange,this.$data.prevLooseValue=e.prevLooseValue,this.$data.currentLooseValue=void 0,this.$data.currentLooseValue=e.currentLooseValue,this.$data.selectionStart=e.selectionStart,this.$data.selectionEnd=e.selectionEnd,this.$data.decimalSelect=e.decimalSelect,this.$data.valueIsCorrected=e.valueIsCorrected,this.$data.valueIsOutOfRange=e.valueIsOutOfRange,this.$data.focused=e.focused,this.$data.isPaste=e.isPaste,this.$data.forceUpdate=!this.$data.forceUpdate,o&&(this.$emit("changemodel",this.$data.valueDuringOnChange),this.$emit("update:modelValue",this.$data.valueDuringOnChange),this.$emit("change",{event:t,value:this.$data.valueDuringOnChange,component:this,target:{name:this.$props.name,value:this.$data.valueDuringOnChange},validity:this.validity()})),this.$data.valueDuringOnChange=void 0},onPasteHandler(t){this._isPaste=!0},increase(t){const e=this.getCurrentState();i.increaseValue(this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,e)},decrease(t){const e=this.getCurrentState();i.decreaseValue(this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,e)},wheel(t){!s.canUseDOM||document.activeElement!==this._input||!this._input||(t.deltaY<0&&(t.preventDefault(),this.increase(t)),t.deltaY>0&&(t.preventDefault(),this.decrease(t)))},keyDown(t){let e=this.getCurrentState(),n,l,o,u;const d=this.parseNumber(String(e.currentLooseValue));if(!(e.selectionEnd>e.selectionStart&&e.selectionEnd-e.selectionStart===String(e.currentLooseValue).length)){switch(t.keyCode){case 38:i.increaseValue(d,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 40:i.decreaseValue(d,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 13:n=i.formatValue(i.rangeValue(d,this.$props.min,this.$props.max),this.$props.format,this._intl),l=i.rangeValue(this.parseNumber(n),this.$props.min,this.$props.max),e.eventValue=l,e.currentLooseValue=i.formatValue(l,this.$props.format,this._intl),e.selectionStart=e.selectionEnd=e.currentLooseValue.length;break;case 110:o=this._input,u=this._intl.numberSymbols(),o&&(e.currentLooseValue=e.currentLooseValue.slice(0,e.selectionStart)+u.decimal+e.currentLooseValue.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=e.selectionStart+1,e=i.sanitizeNumber(e,this.$props.format,this._intl));break;default:return}t.preventDefault(),this.triggerChange(t,e)}},spinnersWrapperMouseDown(t){s.canUseDOM&&this._input&&(t.preventDefault(),document.activeElement!==this._input&&this._input.focus())}},setup(){const t=a.ref(null),e=a.ref(null),n=a.inject("kendoLocalizationService",{}),l=a.inject("kendoIntlService",{});return{inputRef:t,elementWrapperRef:e,kendoLocalizationService:n,kendoIntlService:l}},render(){const{iconName:t,showValidationIcon:e,showLoadingIcon:n,showClearButton:l,inputAttributes:o}=this.$props,u=this.$props.id||this._inputId,d=s.getDefaultSlots(this),c=f.provideLocalizationService(this),h=this.validity().valid;this.$props.value!==void 0&&this.$props.value!==this.$data.currentValue?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0&&this.$props.modelValue!==this.$data.currentValue&&(this.$data.currentValue=this.$props.modelValue),this._prevLooseValue=this.$data.currentLooseValue?this.looseValue:this.looseValue;const V=s.templateRendering.call(this,this.$props.inputPrefix,s.getListeners.call(this)),g=s.templateRendering.call(this,this.$props.inputSuffix,s.getListeners.call(this)),v=s.getTemplate.call(this,{h:a.h,template:V,additionalProps:{value:this.computedValue,valid:h}}),b=s.getTemplate.call(this,{h:a.h,template:g,additionalProps:{value:this.computedValue,valid:h}}),m=a.createVNode("span",{dir:this.$props.dir,class:this.wrapperClassNames,style:this.$attrs.style},[t&&a.createVNode(s.Icon,{name:t,class:"k-input-icon"},null),this.$props.inputPrefix&&a.createVNode("span",{class:"k-input-prefix"},[v]),a.createVNode("input",a.mergeProps({tabindex:this.$props.tabIndex,accesskey:this.$props.accessKey,disabled:this.$props.disabled,title:this.$props.title,"aria-label":this.$props.ariaLabel,"aria-valuemin":this.$props.min,"aria-valuemax":this.$props.max,"aria-disabled":this.$props.disabled?"true":void 0,placeholder:this.$props.placeholder,type:this.$props.inputType,spellcheck:!1,autocomplete:"off",autocorrect:"off",class:this.inputInnerClass,id:u,role:"spinbutton",value:this.looseValue,name:this.$props.name,onWheel:this.wheel,onKeydown:this.keyDown,onInput:this.elementChange,onFocus:this.emitFocus,onBlur:this.emitBlur,onPaste:this.onPasteHandler,ref:s.setRef(this,"input")},o),null),this.$props.inputSuffix&&a.createVNode("span",{class:"k-input-suffix"},[b]),e&&h&&a.createVNode(s.Icon,{name:"check",icon:p.checkIcon,class:"k-input-validation-icon"},null),e&&!h&&a.createVNode(s.Icon,{name:"exclamation-circle",icon:p.exclamationCircleIcon,class:"k-input-validation-icon"},null),n&&a.createVNode(s.Icon,{name:"loading",class:"k-input-loading-icon"},null),l&&this.computedValue!==void 0&&this.computedValue!==null&&a.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[a.createVNode(s.Icon,{name:"x",icon:p.xIcon},null)]),d,this.$props.spinners&&a.createVNode("span",{class:"k-input-spinner k-spin-button",onMousedown:this.spinnersWrapperMouseDown},[a.createVNode($.Button,{type:"button",tabIndex:-1,icon:"caret-alt-up",svgIcon:p.caretAltUpIcon,class:"k-spinner-increase",rounded:null,"aria-label":c.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),title:c.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),onClick:this.increase},null),a.createVNode($.Button,{type:"button",tabIndex:-1,class:"k-spinner-decrease",icon:"caret-alt-down",svgIcon:p.caretAltDownIcon,rounded:null,"aria-label":c.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),title:c.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),onClick:this.decrease},null)])]);return this.$props.label?a.createVNode("span",{class:this.spanClassNames,onFocusin:this.handleFocus,onFocusout:this.handleBlur,dir:this.$props.dir},[m,this.$props.label?u?a.createVNode("label",{for:u,class:"k-floating-label"},[this.$props.label]):a.createVNode("span",{class:"k-label"},[this.$props.label]):null]):m}});exports.NumericTextBox=C;

package/numerictextbox/NumericTextBox.mjs

@@ -5,15 +5,15 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as B, ref as g, inject as v, h as V, createVNode as i } from "vue";
-import { validatePackage as P, guid as M, getRef as w, canUseDOM as f, kendoThemeMaps as S, getDefaultSlots as R, templateRendering as b, getListeners as _, getTemplate as C, Icon as u, setRef as F } from "@progress/kendo-vue-common";
-import { provideIntlService as z, provideLocalizationService as T } from "@progress/kendo-vue-intl";
-import { Button as k } from "@progress/kendo-vue-buttons";
-import { numericIncreaseValue as p, messages as d, numericDecreaseValue as h } from "../messages/main.mjs";
-import { formatValue as c, getStateOrPropsValue as y, sanitizeNumber as I, rangeValue as m, increaseValue as x, decreaseValue as L } from "./utils/main.mjs";
-import { packageMetadata as U } from "../package-metadata.mjs";
-import { checkIcon as W, exclamationCircleIcon as A, xIcon as q, caretAltUpIcon as j, caretAltDownIcon as K } from "@progress/kendo-svg-icons";
-const H = "Please enter a valid value!", ie = /* @__PURE__ */ B({
+import { defineComponent as P, ref as v, inject as V, h as b, createVNode as i, mergeProps as M } from "vue";
+import { validatePackage as w, guid as R, getRef as F, canUseDOM as $, kendoThemeMaps as S, getDefaultSlots as z, templateRendering as _, getListeners as C, getTemplate as k, Icon as u, setRef as T } from "@progress/kendo-vue-common";
+import { provideIntlService as U, provideLocalizationService as A } from "@progress/kendo-vue-intl";
+import { Button as y } from "@progress/kendo-vue-buttons";
+import { numericIncreaseValue as d, messages as h, numericDecreaseValue as c } from "../messages/main.mjs";
+import { formatValue as m, getStateOrPropsValue as I, sanitizeNumber as x, rangeValue as f, increaseValue as L, decreaseValue as O } from "./utils/main.mjs";
+import { packageMetadata as W } from "../package-metadata.mjs";
+import { checkIcon as j, exclamationCircleIcon as q, xIcon as K, caretAltUpIcon as H, caretAltDownIcon as Y } from "@progress/kendo-svg-icons";
+const G = "Please enter a valid value!", ae = /* @__PURE__ */ P({
   model: {
     event: "changemodel"
   },
@@ -97,7 +97,8 @@ const H = "Please enter a valid value!", ie = /* @__PURE__ */ B({
       type: String,
       default: "tel"
     },
-    wrapperClass: String
+    wrapperClass: String,
+    inputAttributes: Object
   },
   inject: {
     kendoIntlService: {
@@ -123,20 +124,20 @@ const H = "Please enter a valid value!", ie = /* @__PURE__ */ B({
     };
   },
   created() {
-    P(U), this._textBeforeInput = "", this._inputId = M(), this.$data.currentLooseValue = null, this.$data.valueDuringOnChange = void 0, this._intl = z(this), this._symbols = this._intl.numberSymbols(), this.$props.value !== void 0 ? this.$data.currentValue = this.$props.value : this.$props.modelValue !== void 0 ? this.$data.currentValue = this.$props.modelValue : this.$props.defaultValue !== void 0 ? this.$data.currentValue = this.$props.defaultValue : this.$data.currentValue = null;
+    w(W), this._textBeforeInput = "", this._inputId = R(), this.$data.currentLooseValue = null, this.$data.valueDuringOnChange = void 0, this._intl = U(this), this._symbols = this._intl.numberSymbols(), this.$props.value !== void 0 ? this.$data.currentValue = this.$props.value : this.$props.modelValue !== void 0 ? this.$data.currentValue = this.$props.modelValue : this.$props.defaultValue !== void 0 ? this.$data.currentValue = this.$props.defaultValue : this.$data.currentValue = null;
   },
   mounted() {
-    this._input = w(this, "input"), this._elementWrapper = this.elementWrapperRef, this.$data.hasMounted = !0, this._input && (this._textBeforeInput = this._input.value), this.setValidity();
+    this._input = F(this, "input"), this._elementWrapper = this.elementWrapperRef, this.$data.hasMounted = !0, this._input && (this._textBeforeInput = this._input.value), this.setValidity();
   },
   updated() {
-    !(f && document.activeElement !== this._input || !this._input) && this.$data.currentLooseValue !== null && this.$data.forceUpdate && this._input.type !== "number" && (this._input.selectionStart = this.$data.selectionStart, this._input.selectionEnd = this.$data.selectionEnd, this.$data.forceUpdate = !1), this._input && (this._textBeforeInput = this._input.value), this.setValidity();
+    !($ && document.activeElement !== this._input || !this._input) && this.$data.currentLooseValue !== null && this.$data.forceUpdate && this._input.type !== "number" && (this._input.selectionStart = this.$data.selectionStart, this._input.selectionEnd = this.$data.selectionEnd, this.$data.forceUpdate = !1), this._input && (this._textBeforeInput = this._input.value), this.setValidity();
   },
   computed: {
     computedValue() {
       return this.$data.valueDuringOnChange !== void 0 ? this.$data.valueDuringOnChange : this.$data.currentValue;
     },
     looseValue() {
-      return c(this.$data.focused ? this.$data.currentLooseValue : y(this.$props.value, this.$data.currentValue), this.$props.format, this._intl);
+      return m(this.$data.focused ? this.$data.currentLooseValue : I(this.$props.value, this.$data.currentValue), this.$props.format, this._intl);
     },
     spanClassNames() {
       const t = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid, e = this.computedValue;
@@ -155,17 +156,17 @@ const H = "Please enter a valid value!", ie = /* @__PURE__ */ B({
         fillMode: e,
         rounded: s,
         required: a,
-        disabled: n
-      } = this.$props, l = !this.$props.validityStyles || this.validity().valid;
+        disabled: l
+      } = this.$props, n = !this.$props.validityStyles || this.validity().valid;
       return {
         "k-input": !0,
         "k-numerictextbox": !0,
         [`k-input-${S.sizeMap[t] || t}`]: t,
         [`k-input-${e}`]: e,
         [`k-rounded-${S.roundedMap[s] || s}`]: s,
-        "k-invalid": !l,
+        "k-invalid": !n,
         "k-required": a,
-        "k-disabled": n,
+        "k-disabled": l,
         "k-loading": this.showLoadingIcon,
         [this.wrapperClass]: this.wrapperClass
       };
@@ -214,11 +215,11 @@ const H = "Please enter a valid value!", ie = /* @__PURE__ */ B({
       this.$data.focused = !1;
     },
     setValidity() {
-      this._input && this._input.setCustomValidity && this._input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || H);
+      this._input && this._input.setCustomValidity && this._input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || G);
     },
     getCurrentState() {
       return {
-        eventValue: y(this.$props.value, this.$data.currentValue),
+        eventValue: I(this.$props.value, this.$data.currentValue),
         prevLooseValue: this._prevLooseValue,
         currentLooseValue: this._input.value,
         selectionStart: this._input.selectionStart,
@@ -235,21 +236,21 @@ const H = "Please enter a valid value!", ie = /* @__PURE__ */ B({
     },
     elementChange(t) {
       const e = this.getCurrentState();
-      this._isPaste = !1, this.triggerChange(t, I(e, this.$props.format, this._intl));
+      this._isPaste = !1, this.triggerChange(t, x(e, this.$props.format, this._intl));
     },
     triggerChange(t, e) {
       if (this.$props.disabled)
         return;
       this.$data.valueDuringOnChange = e.eventValue, this.$data.currentValue = e.eventValue;
-      const s = c(m(e.eventValue, this.$props.min, this.$props.max), this.$props.format, this._intl), a = m(this.parseNumber(s), this.$props.min, this.$props.max);
+      const s = m(f(e.eventValue, this.$props.min, this.$props.max), this.$props.format, this._intl), a = f(this.parseNumber(s), this.$props.min, this.$props.max);
       if (a !== e.eventValue && (e.valueIsOutOfRange = !0, e.eventValue = a, this.$data.valueDuringOnChange = a, this.$data.currentValue = a), e.valueIsCorrected) {
-        const l = this._elementWrapper;
-        l && l.className.indexOf("k-invalid") === -1 && (this.$data.isInvalid = !0, setTimeout(() => {
+        const n = this._elementWrapper;
+        n && n.className.indexOf("k-invalid") === -1 && (this.$data.isInvalid = !0, setTimeout(() => {
           this.$data.isInvalid = !1;
         }, 50));
       }
-      const n = this.$props.value !== e.eventValue;
-      this.$props.value !== void 0 ? this.$data.currentValue = this.$props.value : this.$props.modelValue !== void 0 ? this.$data.currentValue = this.$props.modelValue : this.$data.currentValue = this.$data.valueDuringOnChange, this.$data.prevLooseValue = e.prevLooseValue, this.$data.currentLooseValue = void 0, this.$data.currentLooseValue = e.currentLooseValue, this.$data.selectionStart = e.selectionStart, this.$data.selectionEnd = e.selectionEnd, this.$data.decimalSelect = e.decimalSelect, this.$data.valueIsCorrected = e.valueIsCorrected, this.$data.valueIsOutOfRange = e.valueIsOutOfRange, this.$data.focused = e.focused, this.$data.isPaste = e.isPaste, this.$data.forceUpdate = !this.$data.forceUpdate, n && (this.$emit("changemodel", this.$data.valueDuringOnChange), this.$emit("update:modelValue", this.$data.valueDuringOnChange), this.$emit("change", {
+      const l = this.$props.value !== e.eventValue;
+      this.$props.value !== void 0 ? this.$data.currentValue = this.$props.value : this.$props.modelValue !== void 0 ? this.$data.currentValue = this.$props.modelValue : this.$data.currentValue = this.$data.valueDuringOnChange, this.$data.prevLooseValue = e.prevLooseValue, this.$data.currentLooseValue = void 0, this.$data.currentLooseValue = e.currentLooseValue, this.$data.selectionStart = e.selectionStart, this.$data.selectionEnd = e.selectionEnd, this.$data.decimalSelect = e.decimalSelect, this.$data.valueIsCorrected = e.valueIsCorrected, this.$data.valueIsOutOfRange = e.valueIsOutOfRange, this.$data.focused = e.focused, this.$data.isPaste = e.isPaste, this.$data.forceUpdate = !this.$data.forceUpdate, l && (this.$emit("changemodel", this.$data.valueDuringOnChange), this.$emit("update:modelValue", this.$data.valueDuringOnChange), this.$emit("change", {
         event: t,
         value: this.$data.valueDuringOnChange,
         component: this,
@@ -265,31 +266,31 @@ const H = "Please enter a valid value!", ie = /* @__PURE__ */ B({
     },
     increase(t) {
       const e = this.getCurrentState();
-      x(this.parseNumber(String(e.currentLooseValue)), e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl), this.triggerChange(t, e);
+      L(this.parseNumber(String(e.currentLooseValue)), e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl), this.triggerChange(t, e);
     },
     decrease(t) {
       const e = this.getCurrentState();
-      L(this.parseNumber(String(e.currentLooseValue)), e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl), this.triggerChange(t, e);
+      O(this.parseNumber(String(e.currentLooseValue)), e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl), this.triggerChange(t, e);
     },
     wheel(t) {
-      !f || document.activeElement !== this._input || !this._input || (t.deltaY < 0 && (t.preventDefault(), this.increase(t)), t.deltaY > 0 && (t.preventDefault(), this.decrease(t)));
+      !$ || document.activeElement !== this._input || !this._input || (t.deltaY < 0 && (t.preventDefault(), this.increase(t)), t.deltaY > 0 && (t.preventDefault(), this.decrease(t)));
     },
     keyDown(t) {
-      let e = this.getCurrentState(), s, a, n, l;
+      let e = this.getCurrentState(), s, a, l, n;
       const r = this.parseNumber(String(e.currentLooseValue));
       if (!(e.selectionEnd > e.selectionStart && e.selectionEnd - e.selectionStart === String(e.currentLooseValue).length)) {
         switch (t.keyCode) {
           case 38:
-            x(r, e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl);
+            L(r, e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl);
             break;
           case 40:
-            L(r, e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl);
+            O(r, e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl);
             break;
           case 13:
-            s = c(m(r, this.$props.min, this.$props.max), this.$props.format, this._intl), a = m(this.parseNumber(s), this.$props.min, this.$props.max), e.eventValue = a, e.currentLooseValue = c(a, this.$props.format, this._intl), e.selectionStart = e.selectionEnd = e.currentLooseValue.length;
+            s = m(f(r, this.$props.min, this.$props.max), this.$props.format, this._intl), a = f(this.parseNumber(s), this.$props.min, this.$props.max), e.eventValue = a, e.currentLooseValue = m(a, this.$props.format, this._intl), e.selectionStart = e.selectionEnd = e.currentLooseValue.length;
             break;
           case 110:
-            n = this._input, l = this._intl.numberSymbols(), n && (e.currentLooseValue = e.currentLooseValue.slice(0, e.selectionStart) + l.decimal + e.currentLooseValue.slice(e.selectionEnd), e.selectionStart = e.selectionEnd = e.selectionStart + 1, e = I(e, this.$props.format, this._intl));
+            l = this._input, n = this._intl.numberSymbols(), l && (e.currentLooseValue = e.currentLooseValue.slice(0, e.selectionStart) + n.decimal + e.currentLooseValue.slice(e.selectionEnd), e.selectionStart = e.selectionEnd = e.selectionStart + 1, e = x(e, this.$props.format, this._intl));
             break;
           default:
             return;
@@ -298,11 +299,11 @@ const H = "Please enter a valid value!", ie = /* @__PURE__ */ B({
       }
     },
     spinnersWrapperMouseDown(t) {
-      f && this._input && (t.preventDefault(), document.activeElement !== this._input && this._input.focus());
+      $ && this._input && (t.preventDefault(), document.activeElement !== this._input && this._input.focus());
     }
   },
   setup() {
-    const t = g(null), e = g(null), s = v("kendoLocalizationService", {}), a = v("kendoIntlService", {});
+    const t = v(null), e = v(null), s = V("kendoLocalizationService", {}), a = V("kendoIntlService", {});
     return {
       inputRef: t,
       elementWrapperRef: e,
@@ -315,24 +316,25 @@ const H = "Please enter a valid value!", ie = /* @__PURE__ */ B({
       iconName: t,
       showValidationIcon: e,
       showLoadingIcon: s,
-      showClearButton: a
-    } = this.$props, n = this.$props.id || this._inputId, l = R(this), r = T(this), o = this.validity().valid;
+      showClearButton: a,
+      inputAttributes: l
+    } = this.$props, n = this.$props.id || this._inputId, r = z(this), o = A(this), p = this.validity().valid;
     this.$props.value !== void 0 && this.$props.value !== this.$data.currentValue ? this.$data.currentValue = this.$props.value : this.$props.modelValue !== void 0 && this.$props.modelValue !== this.$data.currentValue && (this.$data.currentValue = this.$props.modelValue), this._prevLooseValue = this.$data.currentLooseValue ? this.looseValue : this.looseValue;
-    const O = b.call(this, this.$props.inputPrefix, _.call(this)), D = b.call(this, this.$props.inputSuffix, _.call(this)), N = C.call(this, {
-      h: V,
-      template: O,
+    const D = _.call(this, this.$props.inputPrefix, C.call(this)), N = _.call(this, this.$props.inputSuffix, C.call(this)), E = k.call(this, {
+      h: b,
+      template: D,
       additionalProps: {
         value: this.computedValue,
-        valid: o
+        valid: p
       }
-    }), E = C.call(this, {
-      h: V,
-      template: D,
+    }), B = k.call(this, {
+      h: b,
+      template: N,
       additionalProps: {
         value: this.computedValue,
-        valid: o
+        valid: p
       }
-    }), $ = i("span", {
+    }), g = i("span", {
       dir: this.$props.dir,
       class: this.wrapperClassNames,
       style: this.$attrs.style
@@ -341,7 +343,7 @@ const H = "Please enter a valid value!", ie = /* @__PURE__ */ B({
       class: "k-input-icon"
     }, null), this.$props.inputPrefix && i("span", {
       class: "k-input-prefix"
-    }, [N]), i("input", {
+    }, [E]), i("input", M({
       tabindex: this.$props.tabIndex,
       accesskey: this.$props.accessKey,
       disabled: this.$props.disabled,
@@ -366,16 +368,16 @@ const H = "Please enter a valid value!", ie = /* @__PURE__ */ B({
       onFocus: this.emitFocus,
       onBlur: this.emitBlur,
       onPaste: this.onPasteHandler,
-      ref: F(this, "input")
-    }, null), this.$props.inputSuffix && i("span", {
+      ref: T(this, "input")
+    }, l), null), this.$props.inputSuffix && i("span", {
       class: "k-input-suffix"
-    }, [E]), e && o && i(u, {
+    }, [B]), e && p && i(u, {
       name: "check",
-      icon: W,
+      icon: j,
       class: "k-input-validation-icon"
-    }, null), e && !o && i(u, {
+    }, null), e && !p && i(u, {
       name: "exclamation-circle",
-      icon: A,
+      icon: q,
       class: "k-input-validation-icon"
     }, null), s && i(u, {
       name: "loading",
@@ -385,29 +387,29 @@ const H = "Please enter a valid value!", ie = /* @__PURE__ */ B({
       class: "k-clear-value"
     }, [i(u, {
       name: "x",
-      icon: q
-    }, null)]), l, this.$props.spinners && i("span", {
+      icon: K
+    }, null)]), r, this.$props.spinners && i("span", {
       class: "k-input-spinner k-spin-button",
       onMousedown: this.spinnersWrapperMouseDown
-    }, [i(k, {
+    }, [i(y, {
       type: "button",
       tabIndex: -1,
       icon: "caret-alt-up",
-      svgIcon: j,
+      svgIcon: H,
       class: "k-spinner-increase",
       rounded: null,
-      "aria-label": r.toLanguageString(p, d[p]),
-      title: r.toLanguageString(p, d[p]),
+      "aria-label": o.toLanguageString(d, h[d]),
+      title: o.toLanguageString(d, h[d]),
       onClick: this.increase
-    }, null), i(k, {
+    }, null), i(y, {
       type: "button",
       tabIndex: -1,
       class: "k-spinner-decrease",
       icon: "caret-alt-down",
-      svgIcon: K,
+      svgIcon: Y,
       rounded: null,
-      "aria-label": r.toLanguageString(h, d[h]),
-      title: r.toLanguageString(h, d[h]),
+      "aria-label": o.toLanguageString(c, h[c]),
+      title: o.toLanguageString(c, h[c]),
       onClick: this.decrease
     }, null)])]);
     return this.$props.label ? i("span", {
@@ -415,14 +417,14 @@ const H = "Please enter a valid value!", ie = /* @__PURE__ */ B({
       onFocusin: this.handleFocus,
       onFocusout: this.handleBlur,
       dir: this.$props.dir
-    }, [$, this.$props.label ? n ? i("label", {
+    }, [g, this.$props.label ? n ? i("label", {
       for: n,
       class: "k-floating-label"
     }, [this.$props.label]) : i("span", {
       class: "k-label"
-    }, [this.$props.label]) : null]) : $;
+    }, [this.$props.label]) : null]) : g;
   }
 });
 export {
-  ie as NumericTextBox
+  ae as NumericTextBox
 };

package/package-metadata.mjs

@@ -9,7 +9,7 @@ const e = {
   name: "@progress/kendo-vue-inputs",
   productName: "Kendo UI for Vue",
   productCodes: ["KENDOUIVUE", "KENDOUICOMPLETE"],
-  publishDate: 1736868429,
+  publishDate: 1737372868,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-vue-inputs",
-  "version": "6.1.0-develop.1",
+  "version": "6.1.0-develop.2",
   "description": "TODO",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -17,13 +17,13 @@
   "peerDependencies": {
     "@progress/kendo-drawing": "^1.21.1",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-vue-animation": "6.1.0-develop.1",
-    "@progress/kendo-vue-buttons": "6.1.0-develop.1",
-    "@progress/kendo-vue-common": "6.1.0-develop.1",
-    "@progress/kendo-vue-dialogs": "6.1.0-develop.1",
-    "@progress/kendo-vue-intl": "6.1.0-develop.1",
-    "@progress/kendo-vue-labels": "6.1.0-develop.1",
-    "@progress/kendo-vue-popup": "6.1.0-develop.1",
+    "@progress/kendo-vue-animation": "6.1.0-develop.2",
+    "@progress/kendo-vue-buttons": "6.1.0-develop.2",
+    "@progress/kendo-vue-common": "6.1.0-develop.2",
+    "@progress/kendo-vue-dialogs": "6.1.0-develop.2",
+    "@progress/kendo-vue-intl": "6.1.0-develop.2",
+    "@progress/kendo-vue-labels": "6.1.0-develop.2",
+    "@progress/kendo-vue-popup": "6.1.0-develop.2",
     "@progress/kendo-svg-icons": "^4.0.0",
     "vue": "^3.0.2"
   },

package/textarea/TextArea.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 t=require("vue"),i=require("@progress/kendo-vue-common"),z=require("../package-metadata.js"),m=require("@progress/kendo-svg-icons"),d=require("./interfaces/TextAreaResize.js"),N=t.defineComponent({name:"KendoTextArea",model:{event:"changemodel"},emits:{input:null,change:null,changemodel:null,"update:modelValue":null,focus:null,blur:null},props:{title:String,ariaDescribedBy:String,ariaLabelledBy:String,autoSize:Boolean,modelValue:{type:[String,Array,Number],default:void 0},defaultValue:[String,Number],dir:String,disabled:Boolean,readOnly:Boolean,rows:Number,id:String,name:String,validationMessage:String,size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return[null,"solid","flat","outline"].includes(e)}},required:Boolean,placeholder:String,tabIndex:Number,valid:{type:Boolean,default:void 0},value:[String,Array,Number],validityStyles:{type:Boolean,default:!0},iconName:String,inputPrefix:[String,Function],inputSuffix:[String,Function],showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,wrapperClass:String,flow:{type:String,default:"horizontal",validator:function(e){return["horizontal","vertical"].includes(e)}},resizable:{type:String,default:"vertical",validator:function(e){return["both","horizontal","vertical","none"].includes(e)}}},created(){i.validatePackage(z.packageMetadata),this.calculatedId=i.guid()},computed:{resizableClass(){const{resizable:e,autoSize:s}=this.$props;return s||e===d.TextAreaResizeEnum.none?"k-resize-none":e===d.TextAreaResizeEnum.vertical?"k-resize-y":e===d.TextAreaResizeEnum.horizontal?"k-resize-x":"k-resize"},rootClassName(){const{size:e,fillMode:s,rounded:l,required:a,showLoadingIcon:n}=this.$props,r=this.validityStyles===!0?!this.isValid:!1;return{"k-input":!0,"k-textarea":!0,[`k-input-${i.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-input-${s}`]:s,[`k-rounded-${i.kendoThemeMaps.roundedMap[l]||l}`]:l,"k-disabled":this.$props.disabled,"k-invalid":r,"k-required":a,"k-loading":n,[this.resizableClass]:!0,"!k-flex-col":this.flow==="vertical","!k-flex-row":this.flow==="horizontal",[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,"!k-resize-none":!0,"!k-overflow-auto":!0,"k-flex":!0,[this.inputClass]:this.inputClass}},prefixRenderClass(){return{"k-input-prefix":!0,"!k-flex-col":this.flow==="horizontal","!k-flex-row":this.flow==="vertical","!k-align-items-start":this.flow==="horizontal"}},suffixRenderClass(){return{"k-input-suffix":!0,"!k-flex-col":this.flow==="horizontal","!k-flex-row":this.flow==="vertical","!k-align-items-start":this.flow==="horizontal"}},suffixIconWrapClass(){return{"k-flex-wrap":!0,"!k-align-items-start":!0}},computedValue(){return this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},isValid(){return this.valid!==void 0?this.valid:this.required?!!this.computedValue:!0}},data(){return{currentValue:this.$props.defaultValue,textAreaHeight:"auto",currentDir:"ltr"}},watch:{size(){this.textAreaHeight="auto"},computedValue(){this.textAreaHeight="auto"}},mounted(){this.element=this.elementRef,this.currentDir=this.$props.dir!==void 0?this.$props.dir:i.isRtl(this.$el)?"rtl":"ltr",this.setValidity()},updated(){this.element=this.elementRef,this.setValidity()},render(){const{ariaDescribedBy:e,ariaLabelledBy:s,autoSize:l,disabled:a,readOnly:n,required:r,rows:f,id:g,name:x,placeholder:k,tabIndex:V,iconName:o,showValidationIcon:u,showLoadingIcon:h,showClearButton:c,title:v}=this.$props,b={id:g||this.calculatedId,name:x,disabled:a,rows:f,title:v,placeholder:k,readOnly:n,required:r,tabIndex:i.getTabIndex(V,a),"aria-labelledby":s,"aria-describedby":e,"aria-multiline":!0,"aria-disabled":a||void 0,...this.$attrs},y=i.templateRendering.call(this,this.$props.inputPrefix,i.getListeners.call(this)),C=i.templateRendering.call(this,this.$props.inputSuffix,i.getListeners.call(this)),S=i.getTemplate.call(this,{h:t.h,template:y,additionalProps:{value:this.computedValue,valid:this.isValid}}),w=i.getTemplate.call(this,{h:t.h,template:C,additionalProps:{value:this.computedValue,valid:this.isValid}}),$=t.h("textarea",{...b,class:this.inputInnerClass,ref:I=>{this.elementRef=I},style:l?{overflow:"hidden",height:this.textAreaHeight}:{},value:this.computedValue,onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),p=[o&&t.createVNode("span",{class:"k-flex-wrap"},[t.createVNode(i.Icon,{name:o,class:"k-input-icon"},null)]),$,u&&this.isValid&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"check",class:"k-input-validation-icon"},null)]),u&&!this.isValid&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"exclamation-circle",icon:m.exclamationCircleIcon,class:"k-input-validation-icon"},null)]),h&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"loading",class:"k-input-loading-icon"},null)]),c&&this.computedValue&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[t.createVNode(i.Icon,{name:"x",icon:m.xIcon},null)])])];return t.createVNode("span",{class:this.rootClassName,dir:this.currentDir==="rtl"?this.currentDir:"",style:this.$attrs.style},[this.$props.inputPrefix&&t.createVNode("span",{class:this.prefixRenderClass},[S]),o||u||h||c?t.createVNode("span",{class:"k-hstack k-flex"},[p]):p,this.$props.inputSuffix&&t.createVNode("span",{class:this.suffixRenderClass},[w])])},methods:{setValidity(){this.element&&this.element.setCustomValidity&&this.element.setCustomValidity(this.isValid?"":this.validationMessage||""),this.element&&(this.textAreaHeight=`${this.element.scrollHeight}px`)},clearClick(e){this.emitUpdate(e,"change","")},focus(){this.element&&this.element.focus()},emitUpdate(e,s,l){const a=l;this.$props.disabled||(this.currentValue=a),this.$props.disabled||(this.$emit("changemodel",a),this.$emit("update:modelValue",a),this.$emit(s,{event:e,component:this,name:this.element.name,value:a}))},handleChange(e){this.emitUpdate(e,"change",e.target.value)},handleInput(e){this.emitUpdate(e,"input",e.target.value)},handleFocus(e){this.$props.disabled||this.$emit("focus",{event:e,component:this,name:this.element.name})},handleBlur(e){this.$props.disabled||this.$emit("blur",{event:e,component:this,name:this.element.name})}}});exports.TextArea=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),i=require("@progress/kendo-vue-common"),N=require("../package-metadata.js"),m=require("@progress/kendo-svg-icons"),d=require("./interfaces/TextAreaResize.js"),A=t.defineComponent({name:"KendoTextArea",model:{event:"changemodel"},emits:{input:null,change:null,changemodel:null,"update:modelValue":null,focus:null,blur:null},props:{title:String,ariaDescribedBy:String,ariaLabelledBy:String,autoSize:Boolean,modelValue:{type:[String,Array,Number],default:void 0},defaultValue:[String,Number],dir:String,disabled:Boolean,readOnly:Boolean,rows:Number,id:String,name:String,validationMessage:String,size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return[null,"solid","flat","outline"].includes(e)}},required:Boolean,placeholder:String,tabIndex:Number,valid:{type:Boolean,default:void 0},value:[String,Array,Number],validityStyles:{type:Boolean,default:!0},iconName:String,inputPrefix:[String,Function],inputSuffix:[String,Function],showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,wrapperClass:String,flow:{type:String,default:"horizontal",validator:function(e){return["horizontal","vertical"].includes(e)}},resizable:{type:String,default:"vertical",validator:function(e){return["both","horizontal","vertical","none"].includes(e)}},inputAttributes:Object},created(){i.validatePackage(N.packageMetadata),this.calculatedId=i.guid()},computed:{resizableClass(){const{resizable:e,autoSize:s}=this.$props;return s||e===d.TextAreaResizeEnum.none?"k-resize-none":e===d.TextAreaResizeEnum.vertical?"k-resize-y":e===d.TextAreaResizeEnum.horizontal?"k-resize-x":"k-resize"},rootClassName(){const{size:e,fillMode:s,rounded:l,required:a,showLoadingIcon:n}=this.$props,r=this.validityStyles===!0?!this.isValid:!1;return{"k-input":!0,"k-textarea":!0,[`k-input-${i.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-input-${s}`]:s,[`k-rounded-${i.kendoThemeMaps.roundedMap[l]||l}`]:l,"k-disabled":this.$props.disabled,"k-invalid":r,"k-required":a,"k-loading":n,[this.resizableClass]:!0,"!k-flex-col":this.flow==="vertical","!k-flex-row":this.flow==="horizontal",[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,"!k-resize-none":!0,"!k-overflow-auto":!0,"k-flex":!0,[this.inputClass]:this.inputClass}},prefixRenderClass(){return{"k-input-prefix":!0,"!k-flex-col":this.flow==="horizontal","!k-flex-row":this.flow==="vertical","!k-align-items-start":this.flow==="horizontal"}},suffixRenderClass(){return{"k-input-suffix":!0,"!k-flex-col":this.flow==="horizontal","!k-flex-row":this.flow==="vertical","!k-align-items-start":this.flow==="horizontal"}},suffixIconWrapClass(){return{"k-flex-wrap":!0,"!k-align-items-start":!0}},computedValue(){return this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},isValid(){return this.valid!==void 0?this.valid:this.required?!!this.computedValue:!0}},data(){return{currentValue:this.$props.defaultValue,textAreaHeight:"auto",currentDir:"ltr"}},watch:{size(){this.textAreaHeight="auto"},computedValue(){this.textAreaHeight="auto"}},mounted(){this.element=this.elementRef,this.currentDir=this.$props.dir!==void 0?this.$props.dir:i.isRtl(this.$el)?"rtl":"ltr",this.setValidity()},updated(){this.element=this.elementRef,this.setValidity()},render(){const{ariaDescribedBy:e,ariaLabelledBy:s,autoSize:l,disabled:a,readOnly:n,required:r,rows:f,id:g,name:x,placeholder:k,tabIndex:V,iconName:o,showValidationIcon:u,showLoadingIcon:c,showClearButton:h,title:v,inputAttributes:b}=this.$props,y={...b,id:g||this.calculatedId,name:x,disabled:a,rows:f,title:v,placeholder:k,readOnly:n,required:r,tabIndex:i.getTabIndex(V,a),"aria-labelledby":s,"aria-describedby":e,"aria-multiline":!0,"aria-disabled":a||void 0,...this.$attrs},C=i.templateRendering.call(this,this.$props.inputPrefix,i.getListeners.call(this)),S=i.templateRendering.call(this,this.$props.inputSuffix,i.getListeners.call(this)),w=i.getTemplate.call(this,{h:t.h,template:C,additionalProps:{value:this.computedValue,valid:this.isValid}}),$=i.getTemplate.call(this,{h:t.h,template:S,additionalProps:{value:this.computedValue,valid:this.isValid}}),I=t.h("textarea",{...y,class:this.inputInnerClass,ref:z=>{this.elementRef=z},style:l?{overflow:"hidden",height:this.textAreaHeight}:{},value:this.computedValue,onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),p=[o&&t.createVNode("span",{class:"k-flex-wrap"},[t.createVNode(i.Icon,{name:o,class:"k-input-icon"},null)]),I,u&&this.isValid&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"check",class:"k-input-validation-icon"},null)]),u&&!this.isValid&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"exclamation-circle",icon:m.exclamationCircleIcon,class:"k-input-validation-icon"},null)]),c&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"loading",class:"k-input-loading-icon"},null)]),h&&this.computedValue&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[t.createVNode(i.Icon,{name:"x",icon:m.xIcon},null)])])];return t.createVNode("span",{class:this.rootClassName,dir:this.currentDir==="rtl"?this.currentDir:"",style:this.$attrs.style},[this.$props.inputPrefix&&t.createVNode("span",{class:this.prefixRenderClass},[w]),o||u||c||h?t.createVNode("span",{class:"k-hstack k-flex"},[p]):p,this.$props.inputSuffix&&t.createVNode("span",{class:this.suffixRenderClass},[$])])},methods:{setValidity(){this.element&&this.element.setCustomValidity&&this.element.setCustomValidity(this.isValid?"":this.validationMessage||""),this.element&&(this.textAreaHeight=`${this.element.scrollHeight}px`)},clearClick(e){this.emitUpdate(e,"change","")},focus(){this.element&&this.element.focus()},emitUpdate(e,s,l){const a=l;this.$props.disabled||(this.currentValue=a),this.$props.disabled||(this.$emit("changemodel",a),this.$emit("update:modelValue",a),this.$emit(s,{event:e,component:this,name:this.element.name,value:a}))},handleChange(e){this.emitUpdate(e,"change",e.target.value)},handleInput(e){this.emitUpdate(e,"input",e.target.value)},handleFocus(e){this.$props.disabled||this.$emit("focus",{event:e,component:this,name:this.element.name})},handleBlur(e){this.$props.disabled||this.$emit("blur",{event:e,component:this,name:this.element.name})}}});exports.TextArea=A;

package/textarea/TextArea.mjs

@@ -5,12 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as R, h as d, createVNode as t } from "vue";
-import { validatePackage as M, guid as P, kendoThemeMaps as f, isRtl as T, getTabIndex as q, templateRendering as g, getListeners as x, getTemplate as k, Icon as s } from "@progress/kendo-vue-common";
-import { packageMetadata as D } from "../package-metadata.mjs";
-import { exclamationCircleIcon as H, xIcon as L } from "@progress/kendo-svg-icons";
+import { defineComponent as M, h as d, createVNode as t } from "vue";
+import { validatePackage as P, guid as T, kendoThemeMaps as f, isRtl as q, getTabIndex as D, templateRendering as g, getListeners as x, getTemplate as k, Icon as s } from "@progress/kendo-vue-common";
+import { packageMetadata as H } from "../package-metadata.mjs";
+import { exclamationCircleIcon as L, xIcon as W } from "@progress/kendo-svg-icons";
 import { TextAreaResizeEnum as h } from "./interfaces/TextAreaResize.mjs";
-const K = /* @__PURE__ */ R({
+const K = /* @__PURE__ */ M({
   name: "KendoTextArea",
   model: {
     event: "changemodel"
@@ -94,10 +94,11 @@ const K = /* @__PURE__ */ R({
       validator: function(e) {
         return ["both", "horizontal", "vertical", "none"].includes(e);
       }
-    }
+    },
+    inputAttributes: Object
   },
   created() {
-    M(D), this.calculatedId = P();
+    P(H), this.calculatedId = T();
   },
   computed: {
     resizableClass() {
@@ -185,7 +186,7 @@ const K = /* @__PURE__ */ R({
     }
   },
   mounted() {
-    this.element = this.elementRef, this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : T(this.$el) ? "rtl" : "ltr", this.setValidity();
+    this.element = this.elementRef, this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : q(this.$el) ? "rtl" : "ltr", this.setValidity();
   },
   updated() {
     this.element = this.elementRef, this.setValidity();
@@ -198,8 +199,8 @@ const K = /* @__PURE__ */ R({
       disabled: i,
       readOnly: n,
       required: r,
-      rows: v,
-      id: b,
+      rows: b,
+      id: v,
       name: C,
       placeholder: V,
       tabIndex: y,
@@ -207,41 +208,43 @@ const K = /* @__PURE__ */ R({
       showValidationIcon: u,
       showLoadingIcon: p,
       showClearButton: c,
-      title: w
-    } = this.$props, S = {
-      id: b || this.calculatedId,
+      title: w,
+      inputAttributes: S
+    } = this.$props, $ = {
+      ...S,
+      id: v || this.calculatedId,
       name: C,
       disabled: i,
-      rows: v,
+      rows: b,
       title: w,
       placeholder: V,
       readOnly: n,
       required: r,
-      tabIndex: q(y, i),
+      tabIndex: D(y, i),
       "aria-labelledby": a,
       "aria-describedby": e,
       "aria-multiline": !0,
       "aria-disabled": i || void 0,
       ...this.$attrs
-    }, $ = g.call(this, this.$props.inputPrefix, x.call(this)), z = g.call(this, this.$props.inputSuffix, x.call(this)), I = k.call(this, {
+    }, z = g.call(this, this.$props.inputPrefix, x.call(this)), I = g.call(this, this.$props.inputSuffix, x.call(this)), B = k.call(this, {
       h: d,
-      template: $,
+      template: z,
       additionalProps: {
         value: this.computedValue,
         valid: this.isValid
       }
-    }), B = k.call(this, {
+    }), A = k.call(this, {
       h: d,
-      template: z,
+      template: I,
       additionalProps: {
         value: this.computedValue,
         valid: this.isValid
       }
-    }), A = d("textarea", {
-      ...S,
+    }), N = d("textarea", {
+      ...$,
       class: this.inputInnerClass,
-      ref: (N) => {
-        this.elementRef = N;
+      ref: (R) => {
+        this.elementRef = R;
       },
       style: l ? {
         overflow: "hidden",
@@ -257,7 +260,7 @@ const K = /* @__PURE__ */ R({
     }, [t(s, {
       name: o,
       class: "k-input-icon"
-    }, null)]), A, u && this.isValid && t("span", {
+    }, null)]), N, u && this.isValid && t("span", {
       class: this.suffixIconWrapClass
     }, [t(s, {
       name: "check",
@@ -266,7 +269,7 @@ const K = /* @__PURE__ */ R({
       class: this.suffixIconWrapClass
     }, [t(s, {
       name: "exclamation-circle",
-      icon: H,
+      icon: L,
       class: "k-input-validation-icon"
     }, null)]), p && t("span", {
       class: this.suffixIconWrapClass
@@ -280,7 +283,7 @@ const K = /* @__PURE__ */ R({
       class: "k-clear-value"
     }, [t(s, {
       name: "x",
-      icon: L
+      icon: W
     }, null)])])];
     return t("span", {
       class: this.rootClassName,
@@ -288,11 +291,11 @@ const K = /* @__PURE__ */ R({
       style: this.$attrs.style
     }, [this.$props.inputPrefix && t("span", {
       class: this.prefixRenderClass
-    }, [I]), o || u || p || c ? t("span", {
+    }, [B]), o || u || p || c ? t("span", {
       class: "k-hstack k-flex"
     }, [m]) : m, this.$props.inputSuffix && t("span", {
       class: this.suffixRenderClass
-    }, [B])]);
+    }, [A])]);
   },
   methods: {
     setValidity() {