@progress/kendo-vue-inputs 10.1.0 → 10.1.1-develop.2

package/numerictextbox/NumericTextBox.d.ts

@@ -120,6 +120,7 @@ declare const NumericTextBox: import('vue').DefineComponent<import('vue').Extrac
     focused: boolean;
     forceUpdate: boolean;
 }, {
+    isPlainNumberEditing(): boolean;
     computedValue(): number | undefined;
     looseValue(): string;
     spanClassNames(): {
@@ -167,12 +168,15 @@ declare const NumericTextBox: import('vue').DefineComponent<import('vue').Extrac
     };
     parseNumber(text: string): number;
     elementChange(event: any): void;
+    plainNumberChange(event: any): void;
     triggerChange(event: any, newState: NumericTextBoxData): void;
     onPasteHandler(_event: any): void;
     increase(event: any): void;
     decrease(event: any): void;
+    toPlainNumberState(newState: NumericTextBoxData): NumericTextBoxData;
     wheel(event: any): void;
     keyDown(event: any): void;
+    plainNumberKeyDown(event: any): void;
     spinnersWrapperMouseDown(e: any): void;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     change: (event: NumericTextBoxChangeEvent) => true;

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 s=require("vue"),i=require("@progress/kendo-vue-common"),$=require("@progress/kendo-vue-intl"),g=require("@progress/kendo-vue-buttons"),r=require("../messages/main.js"),a=require("./utils/main.js"),S=require("../package-metadata.js"),h=require("@progress/kendo-svg-icons"),k="Please enter a valid value!",y=s.defineComponent({model:{event:"changemodel"},emits:{change:t=>!0,changemodel:t=>!0,"update:modelValue":t=>!0,focus:t=>!0,blur:t=>!0},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,validator:function(t){return["small","medium","large"].includes(t)}},rounded:{type:String,validator:function(t){return["none","small","medium","large","full"].includes(t)}},fillMode:{type:String,validator:function(t){return["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(){i.validatePackage(S.packageMetadata),this._textBeforeInput="",this._inputId=i.guid(),this.$data.currentLooseValue=null,this.$data.valueDuringOnChange=void 0,this._intl=$.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=i.getRef(this,"input"),this._elementWrapper=this.elementWrapperRef,this.$data.hasMounted=!0,this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},updated(){!(i.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 a.formatValue(this.$data.focused?this.$data.currentLooseValue:a.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:p}=this.$props,u=!this.$props.validityStyles||this.validity().valid;return{"k-input":!0,"k-numerictextbox":!0,[`k-input-${i.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${e}`]:e,[`k-rounded-${i.kendoThemeMaps.roundedMap[n]||n}`]:n,"k-invalid":!u,"k-required":l,"k-disabled":p,"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",{event:t})},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",{event:t})},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:a.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,a.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=a.formatValue(a.rangeValue(e.eventValue,this.$props.min,this.$props.max),this.$props.format,this._intl),l=a.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 p=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,p&&(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();a.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();a.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){!i.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,p,u;const c=this.parseNumber(String(e.currentLooseValue));if(e.selectionEnd>e.selectionStart&&e.selectionEnd-e.selectionStart===String(e.currentLooseValue).length){const o=this._intl.numberSymbols(),d=o&&t.key===o.minusSign,m=o&&t.key===o.decimal;this.$data.isPaste=!d&&!m;return}switch(t.keyCode){case 38:a.increaseValue(c,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 40:a.decreaseValue(c,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 13:n=a.formatValue(a.rangeValue(c,this.$props.min,this.$props.max),this.$props.format,this._intl),l=a.rangeValue(this.parseNumber(n),this.$props.min,this.$props.max),e.eventValue=l,e.currentLooseValue=a.formatValue(l,this.$props.format,this._intl),e.selectionStart=e.selectionEnd=e.currentLooseValue.length;break;case 110:p=this._input,u=this._intl.numberSymbols(),p&&(e.currentLooseValue=e.currentLooseValue.slice(0,e.selectionStart)+u.decimal+e.currentLooseValue.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=e.selectionStart+1,e=a.sanitizeNumber(e,this.$props.format,this._intl));break;default:return}t.preventDefault(),this.triggerChange(t,e)},spinnersWrapperMouseDown(t){i.canUseDOM&&this._input&&(t.preventDefault(),document.activeElement!==this._input&&this._input.focus())}},setup(){const t=s.ref(null),e=s.ref(null),n=s.inject("kendoLocalizationService",{}),l=s.inject("kendoIntlService",{});return{inputRef:t,elementWrapperRef:e,kendoLocalizationService:n,kendoIntlService:l}},render(){const{iconName:t,showValidationIcon:e,showLoadingIcon:n,showClearButton:l,inputAttributes:p}=this.$props,u=this.$props.id||this._inputId,c=i.getDefaultSlots(this),o=$.provideLocalizationService(this),d=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.looseValue;const m=i.templateRendering.call(this,this.$props.inputPrefix,i.getListeners.call(this)),V=i.templateRendering.call(this,this.$props.inputSuffix,i.getListeners.call(this)),v=i.getTemplate.call(this,{h:s.h,template:m,additionalProps:{value:this.computedValue,valid:d}}),b=i.getTemplate.call(this,{h:s.h,template:V,additionalProps:{value:this.computedValue,valid:d}}),f=s.createVNode("span",{dir:this.$props.dir,class:this.wrapperClassNames,style:this.$attrs.style},[t&&s.createVNode(i.Icon,{name:t,class:"k-input-icon"},null),this.$props.inputPrefix&&s.createVNode("span",{class:"k-input-prefix k-input-prefix-horizontal"},[v]),this.$props.inputPrefix&&s.createVNode("span",{class:"k-input-separator k-input-separator-vertical"},null),s.createVNode("input",s.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:i.setRef(this,"input")},p),null),this.$props.inputSuffix&&s.createVNode("span",{class:"k-input-separator k-input-separator-vertical"},null),this.$props.inputSuffix&&s.createVNode("span",{class:"k-input-suffix k-input-suffix-horizontal"},[b]),e&&d&&s.createVNode(i.Icon,{name:"check",icon:h.checkIcon,class:"k-input-validation-icon"},null),e&&!d&&s.createVNode(i.Icon,{name:"exclamation-circle",icon:h.exclamationCircleIcon,class:"k-input-validation-icon"},null),n&&s.createVNode(i.Icon,{name:"loading",class:"k-input-loading-icon"},null),l&&this.computedValue!==void 0&&this.computedValue!==null&&s.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[s.createVNode(i.Icon,{name:"x",icon:h.xIcon},null)]),c,this.$props.spinners&&s.createVNode("span",{class:"k-input-spinner k-spin-button",onMousedown:this.spinnersWrapperMouseDown},[s.createVNode(g.Button,{type:"button",tabIndex:-1,icon:"chevron-up",svgIcon:h.chevronUpIcon,class:"k-spinner-increase",rounded:null,disabled:this.$props.disabled,"aria-label":o.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),title:o.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),onClick:this.increase},null),s.createVNode(g.Button,{type:"button",tabIndex:-1,class:"k-spinner-decrease",icon:"chevron-down",svgIcon:h.chevronDownIcon,rounded:null,disabled:this.$props.disabled,"aria-label":o.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),title:o.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),onClick:this.decrease},null)])]);return this.$props.label?s.createVNode("span",{class:this.spanClassNames,onFocusin:this.handleFocus,onFocusout:this.handleBlur,dir:this.$props.dir},[f,this.$props.label?u?s.createVNode("label",{for:u,class:"k-floating-label"},[this.$props.label]):s.createVNode("span",{class:"k-label"},[this.$props.label]):null]):f}});exports.NumericTextBox=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),n=require("@progress/kendo-vue-common"),$=require("@progress/kendo-vue-intl"),g=require("@progress/kendo-vue-buttons"),d=require("../messages/main.js"),a=require("./utils/main.js"),_=require("../package-metadata.js"),h=require("@progress/kendo-svg-icons"),S="Please enter a valid value!",k=i.defineComponent({model:{event:"changemodel"},emits:{change:t=>!0,changemodel:t=>!0,"update:modelValue":t=>!0,focus:t=>!0,blur:t=>!0},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,validator:function(t){return["small","medium","large"].includes(t)}},rounded:{type:String,validator:function(t){return["none","small","medium","large","full"].includes(t)}},fillMode:{type:String,validator:function(t){return["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(){n.validatePackage(_.packageMetadata),this._textBeforeInput="",this._inputId=n.guid(),this.$data.currentLooseValue=null,this.$data.valueDuringOnChange=void 0,this._intl=$.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=n.getRef(this,"input"),this._elementWrapper=this.elementWrapperRef,this.$data.hasMounted=!0,this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},updated(){!(n.canUseDOM&&document.activeElement!==this._input||!this._input)&&this.$data.currentLooseValue!==null&&this._input.type!=="number"&&(this._input.selectionStart=this.$data.selectionStart,this._input.selectionEnd=this.$data.selectionEnd),this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},computed:{isPlainNumberEditing(){return a.isCurrencyFormat(this.$props.format)},computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$data.currentValue},looseValue(){return a.formatValue(this.$data.focused?this.$data.currentLooseValue:a.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:s,required:l,disabled:r}=this.$props,u=!this.$props.validityStyles||this.validity().valid;return{"k-input":!0,"k-numerictextbox":!0,[`k-input-${n.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${e}`]:e,[`k-rounded-${n.kendoThemeMaps.roundedMap[s]||s}`]:s,"k-invalid":!u,"k-required":l,"k-disabled":r,"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),s=this.$props.valid!==void 0?this.$props.valid:e;return{customError:t,valid:s,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){if(this.isPlainNumberEditing){const e=a.formatInputValue(this.$data.currentValue,this._intl.numberSymbols().decimal);this.$data.currentLooseValue=e,this.$data.selectionStart=0,this.$data.selectionEnd=e.length,clearTimeout(this._selectAllTimeout),this._selectAllTimeout=setTimeout(()=>{this.$data.focused&&this._input&&this._input.setSelectionRange(0,this._input.value.length)})}else this.$data.currentLooseValue=this._prevLooseValue;this.$data.focused=!0,this.$emit("focus",{event:t})},emitBlur(t){if(clearTimeout(this._selectAllTimeout),this.isPlainNumberEditing&&this._input){const e=this.$data.currentValue,s=a.rangeValue(e,this.$props.min,this.$props.max);s!==e&&this.triggerChange(t,{...this.getCurrentState(),eventValue:s,currentLooseValue:a.formatInputValue(s,this._intl.numberSymbols().decimal)})}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",{event:t})},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||S)},getCurrentState(){return{eventValue:a.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){if(this.isPlainNumberEditing){this.plainNumberChange(t);return}const e=this.getCurrentState();this._isPaste=!1,this.triggerChange(t,a.sanitizeNumber(e,this.$props.format,this._intl))},plainNumberChange(t){const e=this._input,s=this._intl.numberSymbols().decimal,l=this._prevLooseValue||"",{selectionStart:r,selectionEnd:u}=e;let p=e.value;if(this._isPaste){this._isPaste=!1;const c=this._intl.parseNumber(p,this.$props.format);p=c===null?l:a.formatInputValue(c,s),e.value=p}if(!a.numericInputRegex(s).test(p)){e.value=l,e.setSelectionRange(r-1,u-1),this.$data.selectionStart=e.selectionStart,this.$data.selectionEnd=e.selectionEnd;return}const o=this.getCurrentState();o.currentLooseValue=p,o.eventValue=this._intl.parseNumber(p),this.triggerChange(t,o)},triggerChange(t,e){if(this.$props.disabled)return;if(this.$data.valueDuringOnChange=e.eventValue,this.$data.currentValue=e.eventValue,this.isPlainNumberEditing)e.valueIsOutOfRange=a.rangeValue(e.eventValue,this.$props.min,this.$props.max)!==e.eventValue;else{const r=a.formatValue(a.rangeValue(e.eventValue,this.$props.min,this.$props.max),this.$props.format,this._intl),u=a.rangeValue(this.parseNumber(r),this.$props.min,this.$props.max);u!==e.eventValue&&(e.valueIsOutOfRange=!0,e.eventValue=u,this.$data.valueDuringOnChange=u,this.$data.currentValue=u)}if(e.valueIsCorrected){const r=this._elementWrapper;r&&r.className.indexOf("k-invalid")===-1&&(this.$data.isInvalid=!0,setTimeout(()=>{this.$data.isInvalid=!1},50))}const s=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;const l=typeof e.currentLooseValue=="string"&&e.currentLooseValue===e.prevLooseValue;this._input&&(e.valueIsCorrected||l)&&(this._input.value=e.currentLooseValue,this._input.selectionStart=e.selectionStart,this._input.selectionEnd=e.selectionEnd),this.$data.forceUpdate=!this.$data.forceUpdate,s&&(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();a.increaseValue(this.isPlainNumberEditing?this.$data.currentValue:this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,this.toPlainNumberState(e))},decrease(t){const e=this.getCurrentState();a.decreaseValue(this.isPlainNumberEditing?this.$data.currentValue:this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,this.toPlainNumberState(e))},toPlainNumberState(t){return this.isPlainNumberEditing&&(t.currentLooseValue=a.formatInputValue(t.eventValue,this._intl.numberSymbols().decimal),t.selectionStart=t.selectionEnd=t.currentLooseValue.length),t},wheel(t){!n.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){if(this.isPlainNumberEditing){this.plainNumberKeyDown(t);return}let e=this.getCurrentState(),s,l,r,u;const p=this.parseNumber(String(e.currentLooseValue));if(e.selectionEnd>e.selectionStart&&e.selectionEnd-e.selectionStart===String(e.currentLooseValue).length){const o=this._intl.numberSymbols(),c=o&&t.key===o.minusSign,m=o&&t.key===o.decimal;this.$data.isPaste=!c&&!m;return}switch(t.keyCode){case 38:a.increaseValue(p,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 40:a.decreaseValue(p,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 13:s=a.formatValue(a.rangeValue(p,this.$props.min,this.$props.max),this.$props.format,this._intl),l=a.rangeValue(this.parseNumber(s),this.$props.min,this.$props.max),e.eventValue=l,e.currentLooseValue=a.formatValue(l,this.$props.format,this._intl),e.selectionStart=e.selectionEnd=e.currentLooseValue.length;break;case 110:r=this._input,u=this._intl.numberSymbols(),r&&(e.currentLooseValue=e.currentLooseValue.slice(0,e.selectionStart)+u.decimal+e.currentLooseValue.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=e.selectionStart+1,e=a.sanitizeNumber(e,this.$props.format,this._intl));break;default:return}t.preventDefault(),this.triggerChange(t,e)},plainNumberKeyDown(t){const e=this._input;switch(t.keyCode){case 38:t.preventDefault(),this.increase(t);break;case 40:t.preventDefault(),this.decrease(t);break;case 110:if(e){t.preventDefault();const{selectionStart:s,selectionEnd:l,value:r}=e;e.value=r.slice(0,s)+this._intl.numberSymbols().decimal+r.slice(l),e.setSelectionRange(s+1,s+1),this.plainNumberChange(t)}break}},spinnersWrapperMouseDown(t){n.canUseDOM&&this._input&&(t.preventDefault(),document.activeElement!==this._input&&this._input.focus())}},setup(){const t=i.ref(null),e=i.ref(null),s=i.inject("kendoLocalizationService",{}),l=i.inject("kendoIntlService",{});return{inputRef:t,elementWrapperRef:e,kendoLocalizationService:s,kendoIntlService:l}},render(){const{iconName:t,showValidationIcon:e,showLoadingIcon:s,showClearButton:l,inputAttributes:r}=this.$props,u=this.$props.id||this._inputId,p=n.getDefaultSlots(this),o=$.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.looseValue;const m=n.templateRendering.call(this,this.$props.inputPrefix,n.getListeners.call(this)),V=n.templateRendering.call(this,this.$props.inputSuffix,n.getListeners.call(this)),v=n.getTemplate.call(this,{h:i.h,template:m,additionalProps:{value:this.computedValue,valid:c}}),b=n.getTemplate.call(this,{h:i.h,template:V,additionalProps:{value:this.computedValue,valid:c}}),f=i.createVNode("span",{dir:this.$props.dir,class:this.wrapperClassNames,style:this.$attrs.style},[t&&i.createVNode(n.Icon,{name:t,class:"k-input-icon"},null),this.$props.inputPrefix&&i.createVNode("span",{class:"k-input-prefix k-input-prefix-horizontal"},[v]),this.$props.inputPrefix&&i.createVNode("span",{class:"k-input-separator k-input-separator-vertical"},null),i.createVNode("input",i.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:n.setRef(this,"input")},r),null),this.$props.inputSuffix&&i.createVNode("span",{class:"k-input-separator k-input-separator-vertical"},null),this.$props.inputSuffix&&i.createVNode("span",{class:"k-input-suffix k-input-suffix-horizontal"},[b]),e&&c&&i.createVNode(n.Icon,{name:"check",icon:h.checkIcon,class:"k-input-validation-icon"},null),e&&!c&&i.createVNode(n.Icon,{name:"exclamation-circle",icon:h.exclamationCircleIcon,class:"k-input-validation-icon"},null),s&&i.createVNode(n.Icon,{name:"loading",class:"k-input-loading-icon"},null),l&&this.computedValue!==void 0&&this.computedValue!==null&&i.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[i.createVNode(n.Icon,{name:"x",icon:h.xIcon},null)]),p,this.$props.spinners&&i.createVNode("span",{class:"k-input-spinner k-spin-button",onMousedown:this.spinnersWrapperMouseDown},[i.createVNode(g.Button,{type:"button",tabIndex:-1,icon:"chevron-up",svgIcon:h.chevronUpIcon,class:"k-spinner-increase",rounded:null,disabled:this.$props.disabled,"aria-label":o.toLanguageString(d.numericIncreaseValue,d.messages[d.numericIncreaseValue]),title:o.toLanguageString(d.numericIncreaseValue,d.messages[d.numericIncreaseValue]),onClick:this.increase},null),i.createVNode(g.Button,{type:"button",tabIndex:-1,class:"k-spinner-decrease",icon:"chevron-down",svgIcon:h.chevronDownIcon,rounded:null,disabled:this.$props.disabled,"aria-label":o.toLanguageString(d.numericDecreaseValue,d.messages[d.numericDecreaseValue]),title:o.toLanguageString(d.numericDecreaseValue,d.messages[d.numericDecreaseValue]),onClick:this.decrease},null)])]);return this.$props.label?i.createVNode("span",{class:this.spanClassNames,onFocusin:this.handleFocus,onFocusout:this.handleBlur,dir:this.$props.dir},[f,this.$props.label?u?i.createVNode("label",{for:u,class:"k-floating-label"},[this.$props.label]):i.createVNode("span",{class:"k-label"},[this.$props.label]):null]):f}});exports.NumericTextBox=k;

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, h as V, createVNode as i, mergeProps as M, ref as b, inject as S } from "vue";
-import { getDefaultSlots as w, templateRendering as k, getListeners as _, getTemplate as y, Icon as p, setRef as R, canUseDOM as v, kendoThemeMaps as C, getRef as z, validatePackage as F, guid as T } from "@progress/kendo-vue-common";
-import { provideLocalizationService as U, provideIntlService as W } from "@progress/kendo-vue-intl";
-import { Button as x } from "@progress/kendo-vue-buttons";
-import { numericIncreaseValue as d, messages as h, numericDecreaseValue as c } from "../messages/main.mjs";
-import { sanitizeNumber as I, formatValue as m, rangeValue as f, decreaseValue as L, increaseValue as O, getStateOrPropsValue as D } from "./utils/main.mjs";
-import { packageMetadata as A } from "../package-metadata.mjs";
-import { checkIcon as j, exclamationCircleIcon as q, xIcon as K, chevronUpIcon as H, chevronDownIcon as Y } from "@progress/kendo-svg-icons";
-const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
+import { defineComponent as M, h as b, createVNode as s, mergeProps as R, ref as _, inject as S } from "vue";
+import { getDefaultSlots as T, templateRendering as k, getListeners as y, getTemplate as C, Icon as h, setRef as z, canUseDOM as v, kendoThemeMaps as x, getRef as F, validatePackage as A, guid as W } from "@progress/kendo-vue-common";
+import { provideLocalizationService as j, provideIntlService as K } from "@progress/kendo-vue-intl";
+import { Button as I } from "@progress/kendo-vue-buttons";
+import { numericIncreaseValue as d, messages as c, numericDecreaseValue as m } from "../messages/main.mjs";
+import { sanitizeNumber as L, formatValue as f, rangeValue as p, decreaseValue as N, increaseValue as E, formatInputValue as $, numericInputRegex as U, getStateOrPropsValue as P, isCurrencyFormat as q } from "./utils/main.mjs";
+import { packageMetadata as H } from "../package-metadata.mjs";
+import { checkIcon as Y, exclamationCircleIcon as w, xIcon as G, chevronUpIcon as J, chevronDownIcon as Q } from "@progress/kendo-svg-icons";
+const X = "Please enter a valid value!", re = /* @__PURE__ */ M({
   model: {
     event: "changemodel"
   },
@@ -121,20 +121,23 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
     };
   },
   created() {
-    F(A), this._textBeforeInput = "", this._inputId = T(), this.$data.currentLooseValue = null, this.$data.valueDuringOnChange = void 0, this._intl = W(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;
+    A(H), this._textBeforeInput = "", this._inputId = W(), this.$data.currentLooseValue = null, this.$data.valueDuringOnChange = void 0, this._intl = K(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 = z(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() {
-    !(v && 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();
+    !(v && document.activeElement !== this._input || !this._input) && this.$data.currentLooseValue !== null && this._input.type !== "number" && (this._input.selectionStart = this.$data.selectionStart, this._input.selectionEnd = this.$data.selectionEnd), this._input && (this._textBeforeInput = this._input.value), this.setValidity();
   },
   computed: {
+    isPlainNumberEditing() {
+      return q(this.$props.format);
+    },
     computedValue() {
       return this.$data.valueDuringOnChange !== void 0 ? this.$data.valueDuringOnChange : this.$data.currentValue;
     },
     looseValue() {
-      return m(this.$data.focused ? this.$data.currentLooseValue : D(this.$props.value, this.$data.currentValue), this.$props.format, this._intl);
+      return f(this.$data.focused ? this.$data.currentLooseValue : P(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;
@@ -151,19 +154,19 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
       const {
         size: t,
         fillMode: e,
-        rounded: s,
+        rounded: i,
         required: a,
-        disabled: r
-      } = this.$props, n = !this.$props.validityStyles || this.validity().valid;
+        disabled: n
+      } = this.$props, l = !this.$props.validityStyles || this.validity().valid;
       return {
         "k-input": !0,
         "k-numerictextbox": !0,
-        [`k-input-${C.sizeMap[t] || t}`]: t,
+        [`k-input-${x.sizeMap[t] || t}`]: t,
         [`k-input-${e}`]: e,
-        [`k-rounded-${C.roundedMap[s] || s}`]: s,
-        "k-invalid": !n,
+        [`k-rounded-${x.roundedMap[i] || i}`]: i,
+        "k-invalid": !l,
         "k-required": a,
-        "k-disabled": r,
+        "k-disabled": n,
         "k-loading": this.showLoadingIcon,
         [this.wrapperClass]: this.wrapperClass
       };
@@ -177,10 +180,10 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
   },
   methods: {
     validity() {
-      const t = this.$props.validationMessage !== void 0, e = !this.$data.valueIsOutOfRange && (!this.$props.required || this.computedValue !== null), s = this.$props.valid !== void 0 ? this.$props.valid : e;
+      const t = this.$props.validationMessage !== void 0, e = !this.$data.valueIsOutOfRange && (!this.$props.required || this.computedValue !== null), i = this.$props.valid !== void 0 ? this.$props.valid : e;
       return {
         customError: t,
-        valid: s,
+        valid: i,
         valueMissing: this.computedValue === null
       };
     },
@@ -200,11 +203,26 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
       this._input && this._input.focus();
     },
     emitFocus(t) {
-      this.$data.currentLooseValue = this._prevLooseValue, this.$data.focused = !0, this.$emit("focus", {
+      if (this.isPlainNumberEditing) {
+        const e = $(this.$data.currentValue, this._intl.numberSymbols().decimal);
+        this.$data.currentLooseValue = e, this.$data.selectionStart = 0, this.$data.selectionEnd = e.length, clearTimeout(this._selectAllTimeout), this._selectAllTimeout = setTimeout(() => {
+          this.$data.focused && this._input && this._input.setSelectionRange(0, this._input.value.length);
+        });
+      } else
+        this.$data.currentLooseValue = this._prevLooseValue;
+      this.$data.focused = !0, this.$emit("focus", {
         event: t
       });
     },
     emitBlur(t) {
+      if (clearTimeout(this._selectAllTimeout), this.isPlainNumberEditing && this._input) {
+        const e = this.$data.currentValue, i = p(e, this.$props.min, this.$props.max);
+        i !== e && this.triggerChange(t, {
+          ...this.getCurrentState(),
+          eventValue: i,
+          currentLooseValue: $(i, this._intl.numberSymbols().decimal)
+        });
+      }
       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", {
         event: t
       });
@@ -216,11 +234,11 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
       this.$data.focused = !1;
     },
     setValidity() {
-      this._input && this._input.setCustomValidity && this._input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || G);
+      this._input && this._input.setCustomValidity && this._input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || X);
     },
     getCurrentState() {
       return {
-        eventValue: D(this.$props.value, this.$data.currentValue),
+        eventValue: P(this.$props.value, this.$data.currentValue),
         prevLooseValue: this._prevLooseValue,
         currentLooseValue: this._input.value,
         selectionStart: this._input.selectionStart,
@@ -236,22 +254,50 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
       return this._intl.parseNumber(t, this.$props.format);
     },
     elementChange(t) {
+      if (this.isPlainNumberEditing) {
+        this.plainNumberChange(t);
+        return;
+      }
       const e = this.getCurrentState();
-      this._isPaste = !1, this.triggerChange(t, I(e, this.$props.format, this._intl));
+      this._isPaste = !1, this.triggerChange(t, L(e, this.$props.format, this._intl));
+    },
+    plainNumberChange(t) {
+      const e = this._input, i = this._intl.numberSymbols().decimal, a = this._prevLooseValue || "", {
+        selectionStart: n,
+        selectionEnd: l
+      } = e;
+      let u = e.value;
+      if (this._isPaste) {
+        this._isPaste = !1;
+        const o = this._intl.parseNumber(u, this.$props.format);
+        u = o === null ? a : $(o, i), e.value = u;
+      }
+      if (!U(i).test(u)) {
+        e.value = a, e.setSelectionRange(n - 1, l - 1), this.$data.selectionStart = e.selectionStart, this.$data.selectionEnd = e.selectionEnd;
+        return;
+      }
+      const r = this.getCurrentState();
+      r.currentLooseValue = u, r.eventValue = this._intl.parseNumber(u), this.triggerChange(t, r);
     },
     triggerChange(t, e) {
       if (this.$props.disabled)
         return;
-      this.$data.valueDuringOnChange = e.eventValue, this.$data.currentValue = e.eventValue;
-      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) {
+      if (this.$data.valueDuringOnChange = e.eventValue, this.$data.currentValue = e.eventValue, this.isPlainNumberEditing)
+        e.valueIsOutOfRange = p(e.eventValue, this.$props.min, this.$props.max) !== e.eventValue;
+      else {
+        const n = f(p(e.eventValue, this.$props.min, this.$props.max), this.$props.format, this._intl), l = p(this.parseNumber(n), this.$props.min, this.$props.max);
+        l !== e.eventValue && (e.valueIsOutOfRange = !0, e.eventValue = l, this.$data.valueDuringOnChange = l, this.$data.currentValue = l);
+      }
+      if (e.valueIsCorrected) {
         const n = this._elementWrapper;
         n && n.className.indexOf("k-invalid") === -1 && (this.$data.isInvalid = !0, setTimeout(() => {
           this.$data.isInvalid = !1;
         }, 50));
       }
-      const r = 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, r && (this.$emit("changemodel", this.$data.valueDuringOnChange), this.$emit("update:modelValue", this.$data.valueDuringOnChange), this.$emit("change", {
+      const i = 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;
+      const a = typeof e.currentLooseValue == "string" && e.currentLooseValue === e.prevLooseValue;
+      this._input && (e.valueIsCorrected || a) && (this._input.value = e.currentLooseValue, this._input.selectionStart = e.selectionStart, this._input.selectionEnd = e.selectionEnd), this.$data.forceUpdate = !this.$data.forceUpdate, i && (this.$emit("changemodel", this.$data.valueDuringOnChange), this.$emit("update:modelValue", this.$data.valueDuringOnChange), this.$emit("change", {
         event: t,
         value: this.$data.valueDuringOnChange,
         component: this,
@@ -267,51 +313,80 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
     },
     increase(t) {
       const e = this.getCurrentState();
-      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);
+      E(this.isPlainNumberEditing ? this.$data.currentValue : this.parseNumber(String(e.currentLooseValue)), e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl), this.triggerChange(t, this.toPlainNumberState(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);
+      N(this.isPlainNumberEditing ? this.$data.currentValue : this.parseNumber(String(e.currentLooseValue)), e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl), this.triggerChange(t, this.toPlainNumberState(e));
+    },
+    toPlainNumberState(t) {
+      return this.isPlainNumberEditing && (t.currentLooseValue = $(t.eventValue, this._intl.numberSymbols().decimal), t.selectionStart = t.selectionEnd = t.currentLooseValue.length), t;
     },
     wheel(t) {
       !v || 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, r, n;
-      const o = this.parseNumber(String(e.currentLooseValue));
+      if (this.isPlainNumberEditing) {
+        this.plainNumberKeyDown(t);
+        return;
+      }
+      let e = this.getCurrentState(), i, a, n, l;
+      const u = this.parseNumber(String(e.currentLooseValue));
       if (e.selectionEnd > e.selectionStart && e.selectionEnd - e.selectionStart === String(e.currentLooseValue).length) {
-        const l = this._intl.numberSymbols(), u = l && t.key === l.minusSign, $ = l && t.key === l.decimal;
-        this.$data.isPaste = !u && !$;
+        const r = this._intl.numberSymbols(), o = r && t.key === r.minusSign, g = r && t.key === r.decimal;
+        this.$data.isPaste = !o && !g;
         return;
       }
       switch (t.keyCode) {
         case 38:
-          O(o, e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl);
+          E(u, e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl);
           break;
         case 40:
-          L(o, e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl);
+          N(u, e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl);
           break;
         case 13:
-          s = m(f(o, 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;
+          i = f(p(u, this.$props.min, this.$props.max), this.$props.format, this._intl), a = p(this.parseNumber(i), this.$props.min, this.$props.max), e.eventValue = a, e.currentLooseValue = f(a, this.$props.format, this._intl), e.selectionStart = e.selectionEnd = e.currentLooseValue.length;
           break;
         case 110:
-          r = this._input, n = this._intl.numberSymbols(), r && (e.currentLooseValue = e.currentLooseValue.slice(0, e.selectionStart) + n.decimal + e.currentLooseValue.slice(e.selectionEnd), e.selectionStart = e.selectionEnd = e.selectionStart + 1, e = I(e, this.$props.format, this._intl));
+          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 = L(e, this.$props.format, this._intl));
           break;
         default:
           return;
       }
       t.preventDefault(), this.triggerChange(t, e);
     },
+    plainNumberKeyDown(t) {
+      const e = this._input;
+      switch (t.keyCode) {
+        case 38:
+          t.preventDefault(), this.increase(t);
+          break;
+        case 40:
+          t.preventDefault(), this.decrease(t);
+          break;
+        case 110:
+          if (e) {
+            t.preventDefault();
+            const {
+              selectionStart: i,
+              selectionEnd: a,
+              value: n
+            } = e;
+            e.value = n.slice(0, i) + this._intl.numberSymbols().decimal + n.slice(a), e.setSelectionRange(i + 1, i + 1), this.plainNumberChange(t);
+          }
+          break;
+      }
+    },
     spinnersWrapperMouseDown(t) {
       v && this._input && (t.preventDefault(), document.activeElement !== this._input && this._input.focus());
     }
   },
   setup() {
-    const t = b(null), e = b(null), s = S("kendoLocalizationService", {}), a = S("kendoIntlService", {});
+    const t = _(null), e = _(null), i = S("kendoLocalizationService", {}), a = S("kendoIntlService", {});
     return {
       inputRef: t,
       elementWrapperRef: e,
-      kendoLocalizationService: s,
+      kendoLocalizationService: i,
       kendoIntlService: a
     };
   },
@@ -319,37 +394,37 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
     const {
       iconName: t,
       showValidationIcon: e,
-      showLoadingIcon: s,
+      showLoadingIcon: i,
       showClearButton: a,
-      inputAttributes: r
-    } = this.$props, n = this.$props.id || this._inputId, o = w(this), l = U(this), u = this.validity().valid;
+      inputAttributes: n
+    } = this.$props, l = this.$props.id || this._inputId, u = T(this), r = j(this), o = 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.looseValue;
-    const $ = k.call(this, this.$props.inputPrefix, _.call(this)), N = k.call(this, this.$props.inputSuffix, _.call(this)), P = y.call(this, {
-      h: V,
-      template: $,
+    const g = k.call(this, this.$props.inputPrefix, y.call(this)), O = k.call(this, this.$props.inputSuffix, y.call(this)), D = C.call(this, {
+      h: b,
+      template: g,
       additionalProps: {
         value: this.computedValue,
-        valid: u
+        valid: o
       }
-    }), E = y.call(this, {
-      h: V,
-      template: N,
+    }), B = C.call(this, {
+      h: b,
+      template: O,
       additionalProps: {
         value: this.computedValue,
-        valid: u
+        valid: o
       }
-    }), g = i("span", {
+    }), V = s("span", {
       dir: this.$props.dir,
       class: this.wrapperClassNames,
       style: this.$attrs.style
-    }, [t && i(p, {
+    }, [t && s(h, {
       name: t,
       class: "k-input-icon"
-    }, null), this.$props.inputPrefix && i("span", {
+    }, null), this.$props.inputPrefix && s("span", {
       class: "k-input-prefix k-input-prefix-horizontal"
-    }, [P]), this.$props.inputPrefix && i("span", {
+    }, [D]), this.$props.inputPrefix && s("span", {
       class: "k-input-separator k-input-separator-vertical"
-    }, null), i("input", M({
+    }, null), s("input", R({
       tabindex: this.$props.tabIndex,
       accesskey: this.$props.accessKey,
       disabled: this.$props.disabled,
@@ -364,7 +439,7 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
       autocomplete: "off",
       autocorrect: "off",
       class: this.inputInnerClass,
-      id: n,
+      id: l,
       role: "spinbutton",
       value: this.looseValue,
       name: this.$props.name,
@@ -374,67 +449,67 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
       onFocus: this.emitFocus,
       onBlur: this.emitBlur,
       onPaste: this.onPasteHandler,
-      ref: R(this, "input")
-    }, r), null), this.$props.inputSuffix && i("span", {
+      ref: z(this, "input")
+    }, n), null), this.$props.inputSuffix && s("span", {
       class: "k-input-separator k-input-separator-vertical"
-    }, null), this.$props.inputSuffix && i("span", {
+    }, null), this.$props.inputSuffix && s("span", {
       class: "k-input-suffix k-input-suffix-horizontal"
-    }, [E]), e && u && i(p, {
+    }, [B]), e && o && s(h, {
       name: "check",
-      icon: j,
+      icon: Y,
       class: "k-input-validation-icon"
-    }, null), e && !u && i(p, {
+    }, null), e && !o && s(h, {
       name: "exclamation-circle",
-      icon: q,
+      icon: w,
       class: "k-input-validation-icon"
-    }, null), s && i(p, {
+    }, null), i && s(h, {
       name: "loading",
       class: "k-input-loading-icon"
-    }, null), a && this.computedValue !== void 0 && this.computedValue !== null && i("span", {
+    }, null), a && this.computedValue !== void 0 && this.computedValue !== null && s("span", {
       onClick: this.clearClick,
       class: "k-clear-value"
-    }, [i(p, {
+    }, [s(h, {
       name: "x",
-      icon: K
-    }, null)]), o, this.$props.spinners && i("span", {
+      icon: G
+    }, null)]), u, this.$props.spinners && s("span", {
       class: "k-input-spinner k-spin-button",
       onMousedown: this.spinnersWrapperMouseDown
-    }, [i(x, {
+    }, [s(I, {
       type: "button",
       tabIndex: -1,
       icon: "chevron-up",
-      svgIcon: H,
+      svgIcon: J,
       class: "k-spinner-increase",
       rounded: null,
       disabled: this.$props.disabled,
-      "aria-label": l.toLanguageString(d, h[d]),
-      title: l.toLanguageString(d, h[d]),
+      "aria-label": r.toLanguageString(d, c[d]),
+      title: r.toLanguageString(d, c[d]),
       onClick: this.increase
-    }, null), i(x, {
+    }, null), s(I, {
       type: "button",
       tabIndex: -1,
       class: "k-spinner-decrease",
       icon: "chevron-down",
-      svgIcon: Y,
+      svgIcon: Q,
       rounded: null,
       disabled: this.$props.disabled,
-      "aria-label": l.toLanguageString(c, h[c]),
-      title: l.toLanguageString(c, h[c]),
+      "aria-label": r.toLanguageString(m, c[m]),
+      title: r.toLanguageString(m, c[m]),
       onClick: this.decrease
     }, null)])]);
-    return this.$props.label ? i("span", {
+    return this.$props.label ? s("span", {
       class: this.spanClassNames,
       onFocusin: this.handleFocus,
       onFocusout: this.handleBlur,
       dir: this.$props.dir
-    }, [g, this.$props.label ? n ? i("label", {
-      for: n,
+    }, [V, this.$props.label ? l ? s("label", {
+      for: l,
       class: "k-floating-label"
-    }, [this.$props.label]) : i("span", {
+    }, [this.$props.label]) : s("span", {
       class: "k-label"
-    }, [this.$props.label]) : null]) : g;
+    }, [this.$props.label]) : null]) : V;
   }
 });
 export {
-  ae as NumericTextBox
+  re as NumericTextBox
 };

package/numerictextbox/utils/main.d.ts

@@ -19,6 +19,19 @@ export declare const getStateOrPropsValue: (value: number | null | undefined, st
  * @hidden
  */
 export declare const formatValue: (value: string | number | null | undefined, format: string | NumberFormatOptions | undefined, intlService: any) => string;
+/**
+ * @hidden
+ * Currency formats are edited as a plain number while focused and formatted on blur.
+ */
+export declare const isCurrencyFormat: (format: string | NumberFormatOptions | undefined) => boolean;
+/**
+ * @hidden
+ */
+export declare const formatInputValue: (value: number | null | undefined, decimalSeparator: string) => string;
+/**
+ * @hidden
+ */
+export declare const numericInputRegex: (decimalSeparator: string) => RegExp;
 /**
  * @hidden
  */