@progress/kendo-vue-dateinputs 10.0.1-develop.3 → 10.0.1-develop.4

package/dateinput/DateInput.d.ts

@@ -113,6 +113,7 @@ declare const DateInput: import('vue').DefineComponent<import('vue').ExtractProp
     valueDuringOnChange: any;
     hasMounted: boolean;
     isEmpty: any;
+    isDeleting: boolean;
     lastSelectedSymbol: any;
     isFocused: boolean;
 }, {
@@ -128,16 +129,17 @@ declare const DateInput: import('vue').DefineComponent<import('vue').ExtractProp
     setValidity(): void;
     spinnersMouseDown(event: any): void;
     elementChange(event: any): void;
+    handleDelete(isBackspace: boolean, text: string, element: HTMLInputElement): void;
     elementClick(_: any): void;
     wheel(event: any): void;
     increasePart(event: any): void;
     decreasePart(event: any): void;
     elementKeyDown(event: any): void;
-    setSelection(selection: Selection): void;
+    setSelection(selection: Selection, preserveOnUpdate?: boolean): void;
     triggerChange(event: any, oldValue: Date | null): void;
     selectionBySymbol(symbol: string): Selection;
     selectionByIndex(index: number): Selection;
-    switchDateSegment(offset: number): void;
+    switchDateSegment(offset: number, selectionOverride?: Selection): void;
     modifyDateSegmentValue(offset: number, event: any): void;
     validity(): FormComponentValidity;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {

package/dateinput/DateInput.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 l=require("vue"),u=require("@progress/kendo-date-math"),y=require("@progress/kendo-vue-intl"),T=require("./models/kendo-date.js"),r=require("@progress/kendo-vue-common"),S=require("@progress/kendo-vue-buttons"),B=require("../package-metadata.js"),p=require("./utils.js"),v=require("../utils.js"),o=require("../messages/main.js"),P=require("../timepicker/utils.js"),D=require("../defaults.js"),_=require("@progress/kendo-vue-labels"),b=require("@progress/kendo-svg-icons");function q(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!l.isVNode(e)}const E="Please enter a valid value!",A=l.defineComponent({name:"DateInput",model:{event:"changemodel"},inject:{kendoIntlService:{default:null},kendoLocalizationService:{default:null}},emits:{change:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,focus:e=>!0,blur:e=>!0},props:{modelValue:Date,value:Date,defaultValue:Date,format:{type:[String,Object],default:function(){return p.defaultFormat}},formatPlaceholder:{type:[String,Object],default:function(){return p.defaultFormatPlaceholder}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},tabIndex:Number,title:String,steps:Object,placeholder:String,max:{type:Date,default:function(){return u.cloneDate(v.MAX_DATE)}},min:{type:Date,default:function(){return u.cloneDate(v.MIN_DATE)}},maxTime:{type:Date,default:function(){return u.cloneDate(D.MAX_TIME)}},minTime:{type:Date,default:function(){return u.cloneDate(D.MIN_TIME)}},disabled:{type:Boolean,default:!1},spinners:{type:Boolean,default:!1},name:String,dir:String,label:String,id:String,validationMessage:{type:String,default:E},required:{type:Boolean,default:!1},validityStyles:{type:Boolean,default:!0},validate:Boolean,valid:{type:Boolean,default:void 0},ariaRole:{type:String,default:void 0},ariaControls:String,ariaLabel:String,ariaExpanded:{type:Boolean,default:void 0},ariaHasPopup:{type:String,default:void 0},inputAttributes:Object},data(){return{kendoDate:null,currentFormat:void 0,valueDuringOnChange:void 0,hasMounted:!1,isEmpty:void 0,lastSelectedSymbol:void 0,isFocused:!1}},created(){r.validatePackage(B.packageMetadata);const{formatPlaceholder:e,format:t,value:a,defaultValue:i}=this.$props;this.kendoDate=new T.KendoDate(this.intl,e,t),this.kendoDate.setValue(null),this._emptyText=this.kendoDate.getTextAndFormat().text,this.kendoDate.setValue(a||i||null),this._element=null,this._inputId=r.guid()},computed:{computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.kendoDate&&this.kendoDate.getDateObject()},wrapperClassNames(){const e=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid,t=this.$props.disabled,{size:a,fillMode:i,rounded:n}=this.$props;return{"k-dateinput":!0,"k-input":!0,[`k-input-${r.kendoThemeMaps.sizeMap[a]||a}`]:a,[`k-input-${i}`]:i,[`k-rounded-${r.kendoThemeMaps.roundedMap[n]||n}`]:n,"k-disabled":t,"k-invalid":!e&&e!==void 0,"k-focus":this.isFocused,"k-rtl":this.$props.dir==="rtl"}}},methods:{selection(){let e={start:0,end:0};const t=this.element();return t!==null&&t.selectionStart!==void 0&&(e={start:t.selectionStart,end:t.selectionEnd}),e},element(){return this._element},focus(e){this._element&&this._element.focus(e)},handleFocus(e){this.$data.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.$data.isFocused=!1,this.$emit("blur",{event:e})},intl(){return y.provideIntlService(this)},setValidity(){const e=this.element();e&&e.setCustomValidity&&e.setCustomValidity(this.validity().valid?"":this.$props.validationMessage)},spinnersMouseDown(e){const t=this.element();e.preventDefault(),t&&r.canUseDOM&&document.activeElement!==t&&t.focus({preventScroll:!0})},elementChange(e){const t=this.element();if(!t||!this.kendoDate)return;const{text:a,format:i}=this.kendoDate.getTextAndFormat();this.$data.currentFormat=i;const n=this.computedValue,s=p.approximateStringMatching(a,this.$data.currentFormat,t.value,this.selection().start),c=s.length===1&&s[0][1]==="_";if(!c)for(let d=0;d<s.length;d++)this.kendoDate.parsePart(s[d][0],s[d][1]);s.length&&s[0][0]!=="_"&&this.setSelection(this.selectionBySymbol(s[0][0])),c&&this.switchDateSegment(1),this.triggerChange(e,n)},elementClick(e){this.setSelection(this.selectionByIndex(this.selection().start))},wheel(e){const t=this.element();r.canUseDOM&&document.activeElement!==t||(e.deltaY<0&&(e.preventDefault(),this.increasePart(e)),e.deltaY>0&&(e.preventDefault(),this.decreasePart(e)))},increasePart(e){e.preventDefault(),this.modifyDateSegmentValue(1,e)},decreasePart(e){e.preventDefault(),this.modifyDateSegmentValue(-1,e)},elementKeyDown(e){if(!e.altKey){switch(e.keyCode){case 37:this.switchDateSegment(-1);break;case 38:this.modifyDateSegmentValue(1,e);break;case 39:this.switchDateSegment(1);break;case 40:this.modifyDateSegmentValue(-1,e);break;default:return}e.preventDefault()}},setSelection(e){const t=this.element();this.$data.lastSelectedSymbol=this.$data.currentFormat[e.start],r.canUseDOM&&window.requestAnimationFrame(()=>{t&&r.canUseDOM&&document.activeElement===t&&t.setSelectionRange(e.start,e.end)})},triggerChange(e,t){this.$data.valueDuringOnChange=this.computedValue,u.isEqual(t,this.computedValue)||(this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:e,value:this.computedValue,component:this,target:{name:this.$props.name,value:this.$data.valueDuringOnChange,valueAsDate:this.$data.valueDuringOnChange},validity:this.validity()})),this.$data.valueDuringOnChange=void 0},selectionBySymbol(e){let t=-1,a=0;for(let i=0;i<this.$data.currentFormat.length;i++)this.$data.currentFormat[i]===e&&(a=i+1,t===-1&&(t=i));return t<0&&(t=0),{start:t,end:a}},selectionByIndex(e){let t={start:e,end:e};for(let a=e,i=e-1;a<this.$data.currentFormat.length||i>=0;a++,i--){if(a<this.$data.currentFormat.length&&this.$data.currentFormat[a]!=="_"){t=this.selectionBySymbol(this.$data.currentFormat[a]);break}if(i>=0&&this.$data.currentFormat[i]!=="_"){t=this.selectionBySymbol(this.$data.currentFormat[i]);break}}return t},switchDateSegment(e){const{start:t,end:a}=this.selection();if(t<a&&this.$data.currentFormat[t]!==this.$data.currentFormat[a-1]){this.setSelection(this.selectionByIndex(e>0?t:a-1));return}const i=this.$data.currentFormat[t];let n=t+e;for(;n>0&&n<this.$data.currentFormat.length&&!(this.$data.currentFormat[n]!==i&&this.$data.currentFormat[n]!=="_");)n+=e;if(this.$data.currentFormat[n]==="_")return;let s=n;for(;s>=0&&s<this.$data.currentFormat.length&&this.$data.currentFormat[s]===this.$data.currentFormat[n];)s+=e;n>s&&(s+1!==t||n+1!==a)?this.setSelection({start:s+1,end:n+1}):n<s&&(n!==t||s!==a)&&this.setSelection({start:n,end:s})},modifyDateSegmentValue(e,t){if(!this.kendoDate)return;const a=this.computedValue,i=this.$data.currentFormat[this.selection().start],n=this.kendoDate.symbolMap(i),s=((this.$props.steps||{})[n]||1)*e;this.kendoDate.modifyPart(i,s),this.setSelection(this.selectionBySymbol(i)),this.triggerChange(t,a)},validity(){const e=p.isInRange(this.computedValue,this.$props.min,this.$props.max)&&P.isInTimeRange(this.computedValue,this.$props.minTime,this.$props.maxTime),t=this.$props.validationMessage!==void 0,a=(!this.$props.required||this.computedValue!==null)&&e,i=this.$props.valid!==void 0?this.$props.valid:a;return{customError:t,rangeOverflow:this.computedValue&&this.$props.max.getTime()<this.computedValue.getTime()||!1,rangeUnderflow:this.computedValue&&this.computedValue.getTime()<this.$props.min.getTime()||!1,valid:i,valueMissing:this.computedValue===null}}},mounted(){this._element=r.getRef(this,"input"),this.setValidity(),this.$data.hasMounted=!0},updated(){this.$data.lastSelectedSymbol&&this.setSelection(this.selectionBySymbol(this.$data.lastSelectedSymbol)),this.setValidity()},setup(){const e=l.ref(null),t=l.inject("kendoIntlService",{}),a=l.inject("kendoLocalizationService",{});return{inputRef:e,kendoIntlService:t,kendoLocalizationService:a}},render(){const e=r.getDefaultSlots(this),t=y.provideLocalizationService(this),{formatPlaceholder:a,format:i,value:n,modelValue:s,name:c,label:d,id:k,ariaLabel:V,ariaExpanded:F,ariaHasPopup:M,ariaRole:I,ariaControls:C,inputAttributes:w}=this.$props,m=n!==void 0?n:s;this.kendoDate.format=i,this.kendoDate.formatPlaceholder=a,this.valueDuringOnChange=this.valueDuringOnChange?this.valueDuringOnChange:void 0,m!==void 0&&this.computedValue!==m&&this.kendoDate.setValue(m);const{text:f,format:x}=this.kendoDate.getTextAndFormat();this.$data.currentFormat=x,this.$data.isEmpty=f===this._emptyText;const g=this.$props.placeholder!==void 0&&this.$data.isEmpty&&!this.$data.isFocused?null:f,$=k||this._inputId,O=!this.$props.validityStyles||this.validity().valid,h=l.createVNode("span",{class:this.wrapperClassNames,dir:this.$props.dir},[l.createVNode("input",l.mergeProps({role:I,tabindex:this.$props.tabIndex,disabled:this.$props.disabled,title:this.$props.title!==void 0?this.$props.title:f,type:"text",spellcheck:!1,autocomplete:"off",autocorrect:"off",class:"k-input-inner",id:$,placeholder:this.$props.placeholder,onWheel:this.wheel,onClick:this.elementClick,onInput:this.elementChange,onKeydown:this.elementKeyDown,onChange:r.noop,onFocusin:this.handleFocus,onFocusout:this.handleBlur,value:g,name:c,"aria-label":V,"aria-expanded":F,"aria-haspopup":M,"aria-controls":C,"aria-disabled":this.$props.disabled||void 0,ref:r.setRef(this,"input")},w),null),e,this.$props.spinners&&l.createVNode("span",{class:"k-input-spinner k-spin-button",onMousedown:this.spinnersMouseDown},[l.createVNode(S.Button,{type:"button",tabIndex:-1,icon:"chevron-up",svgIcon:b.chevronUpIcon,size:this.$props.size,fillMode:this.$props.fillMode,class:"k-spinner-increase","aria-label":t.toLanguageString(o.increaseValue,o.messages[o.increaseValue]),title:t.toLanguageString(o.increaseValue,o.messages[o.increaseValue]),onClick:this.increasePart},null),l.createVNode(S.Button,{type:"button",tabIndex:-1,class:"k-spinner-decrease",icon:"chevron-down",svgIcon:b.chevronDownIcon,size:this.$props.size,fillMode:this.$props.fillMode,"aria-label":t.toLanguageString(o.decreaseValue,o.messages[o.decreaseValue]),title:t.toLanguageString(o.decreaseValue,o.messages[o.decreaseValue]),onClick:this.decreasePart},null)])]);return d?l.createVNode(_.FloatingLabel,{label:d,editorId:$,editorValue:g,editorPlaceholder:this.$props.placeholder,editorValid:O,editorDisabled:this.$props.disabled},q(h)?h:{default:()=>[h]}):h}});exports.DateInput=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue"),p=require("@progress/kendo-date-math"),V=require("@progress/kendo-vue-intl"),T=require("./models/kendo-date.js"),o=require("@progress/kendo-vue-common"),F=require("@progress/kendo-vue-buttons"),O=require("../package-metadata.js"),$=require("./utils.js"),M=require("../utils.js"),d=require("../messages/main.js"),P=require("../timepicker/utils.js"),w=require("../defaults.js"),_=require("@progress/kendo-vue-labels"),C=require("@progress/kendo-svg-icons");function E(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!u.isVNode(e)}const q="Please enter a valid value!",A=u.defineComponent({name:"DateInput",model:{event:"changemodel"},inject:{kendoIntlService:{default:null},kendoLocalizationService:{default:null}},emits:{change:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,focus:e=>!0,blur:e=>!0},props:{modelValue:Date,value:Date,defaultValue:Date,format:{type:[String,Object],default:function(){return $.defaultFormat}},formatPlaceholder:{type:[String,Object],default:function(){return $.defaultFormatPlaceholder}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},tabIndex:Number,title:String,steps:Object,placeholder:String,max:{type:Date,default:function(){return p.cloneDate(M.MAX_DATE)}},min:{type:Date,default:function(){return p.cloneDate(M.MIN_DATE)}},maxTime:{type:Date,default:function(){return p.cloneDate(w.MAX_TIME)}},minTime:{type:Date,default:function(){return p.cloneDate(w.MIN_TIME)}},disabled:{type:Boolean,default:!1},spinners:{type:Boolean,default:!1},name:String,dir:String,label:String,id:String,validationMessage:{type:String,default:q},required:{type:Boolean,default:!1},validityStyles:{type:Boolean,default:!0},validate:Boolean,valid:{type:Boolean,default:void 0},ariaRole:{type:String,default:void 0},ariaControls:String,ariaLabel:String,ariaExpanded:{type:Boolean,default:void 0},ariaHasPopup:{type:String,default:void 0},inputAttributes:Object},data(){return{kendoDate:null,currentFormat:void 0,valueDuringOnChange:void 0,hasMounted:!1,isEmpty:void 0,isDeleting:!1,lastSelectedSymbol:void 0,isFocused:!1}},created(){o.validatePackage(O.packageMetadata);const{formatPlaceholder:e,format:t,value:a,defaultValue:i}=this.$props;this.kendoDate=new T.KendoDate(this.intl,e,t),this.kendoDate.setValue(null),this._emptyText=this.kendoDate.getTextAndFormat().text,this.kendoDate.setValue(a||i||null),this._element=null,this._inputId=o.guid()},computed:{computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.kendoDate&&this.kendoDate.getDateObject()},wrapperClassNames(){const e=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid,t=this.$props.disabled,{size:a,fillMode:i,rounded:l}=this.$props;return{"k-dateinput":!0,"k-input":!0,[`k-input-${o.kendoThemeMaps.sizeMap[a]||a}`]:a,[`k-input-${i}`]:i,[`k-rounded-${o.kendoThemeMaps.roundedMap[l]||l}`]:l,"k-disabled":t,"k-invalid":!e&&e!==void 0,"k-focus":this.isFocused,"k-rtl":this.$props.dir==="rtl"}}},methods:{selection(){let e={start:0,end:0};const t=this.element();return t!==null&&t.selectionStart!==void 0&&(e={start:t.selectionStart,end:t.selectionEnd}),e},element(){return this._element},focus(e){this._element&&this._element.focus(e)},handleFocus(e){this.$data.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.$data.isFocused=!1,this.$data.isDeleting=!1,this.$emit("blur",{event:e})},intl(){return V.provideIntlService(this)},setValidity(){const e=this.element();e&&e.setCustomValidity&&e.setCustomValidity(this.validity().valid?"":this.$props.validationMessage)},spinnersMouseDown(e){const t=this.element();e.preventDefault(),t&&o.canUseDOM&&document.activeElement!==t&&t.focus({preventScroll:!0})},elementChange(e){var g;const t=this.element();if(!t||!this.kendoDate)return;const{text:a,format:i}=this.kendoDate.getTextAndFormat();this.$data.currentFormat=i;const l=this.computedValue,n=e.inputType==="deleteContentBackward",s=(g=e.inputType)==null?void 0:g.startsWith("delete"),r=$.approximateStringMatching(a,this.$data.currentFormat,t.value,this.selection().start),m=r.length===1&&r[0][1]==="_";let h=!1,f=!1;if(!m)for(let c=0;c<r.length;c++){const y=this.kendoDate.parsePart(r[c][0],r[c][1],s);h=!!y.switchToNext,f=!!y.isComplete}if(s){this.handleDelete(n,a,t);return}if(f){t.value=a,this.setSelection(this.selectionBySymbol(r[0][0]));return}if(r.length&&r[0][0]!=="_"&&!h&&this.setSelection(this.selectionBySymbol(r[0][0])),m)this.switchDateSegment(1);else if(h){const c=this.selectionBySymbol(r[0][0]);this.switchDateSegment(1,{start:c.start,end:c.start})}this.triggerChange(e,l)},handleDelete(e,t,a){if(this.$data.isDeleting=!0,!this.kendoDate.hasValue()){a.value=t,this.setSelection(this.selectionByIndex(0));return}e&&this.computedValue===null&&this.switchDateSegment(-1)},elementClick(e){this.setSelection(this.selectionByIndex(this.selection().start))},wheel(e){const t=this.element();o.canUseDOM&&document.activeElement!==t||(e.deltaY<0&&(e.preventDefault(),this.increasePart(e)),e.deltaY>0&&(e.preventDefault(),this.decreasePart(e)))},increasePart(e){e.preventDefault(),this.modifyDateSegmentValue(1,e)},decreasePart(e){e.preventDefault(),this.modifyDateSegmentValue(-1,e)},elementKeyDown(e){if(e.altKey||e.ctrlKey||e.metaKey)return;switch(e.keyCode||{Backspace:8,ArrowLeft:37,ArrowUp:38,ArrowRight:39,ArrowDown:40,Home:36,End:35}[e.key]){case 37:this.switchDateSegment(-1);break;case 38:this.modifyDateSegmentValue(1,e);break;case 39:this.switchDateSegment(1);break;case 40:this.modifyDateSegmentValue(-1,e);break;case 36:this.setSelection(this.selectionByIndex(0));break;case 35:this.setSelection(this.selectionByIndex(this.$data.currentFormat.length));break;default:return}e.preventDefault()},setSelection(e,t=!0){const a=this.element();t&&(this.$data.lastSelectedSymbol=this.$data.currentFormat[e.start]),o.canUseDOM&&window.requestAnimationFrame(()=>{a&&o.canUseDOM&&document.activeElement===a&&a.setSelectionRange(e.start,e.end)})},triggerChange(e,t){this.$data.valueDuringOnChange=this.computedValue,p.isEqual(t,this.computedValue)||(this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:e,value:this.computedValue,component:this,target:{name:this.$props.name,value:this.$data.valueDuringOnChange,valueAsDate:this.$data.valueDuringOnChange},validity:this.validity()})),this.$data.valueDuringOnChange=void 0},selectionBySymbol(e){let t=-1,a=0;for(let i=0;i<this.$data.currentFormat.length;i++)this.$data.currentFormat[i]===e&&(a=i+1,t===-1&&(t=i));return t<0&&(t=0),{start:t,end:a}},selectionByIndex(e){let t={start:e,end:e};for(let a=e,i=e-1;a<this.$data.currentFormat.length||i>=0;a++,i--){if(a<this.$data.currentFormat.length&&this.$data.currentFormat[a]!=="_"){t=this.selectionBySymbol(this.$data.currentFormat[a]);break}if(i>=0&&this.$data.currentFormat[i]!=="_"){t=this.selectionBySymbol(this.$data.currentFormat[i]);break}}return t},switchDateSegment(e,t){const{start:a,end:i}=t||this.selection();if(a<i&&this.$data.currentFormat[a]!==this.$data.currentFormat[i-1]){this.setSelection(this.selectionByIndex(e>0?a:i-1));return}const l=this.$data.currentFormat[a];let n=a+e;for(;n>0&&n<this.$data.currentFormat.length&&!(this.$data.currentFormat[n]!==l&&this.$data.currentFormat[n]!=="_");)n+=e;if(this.$data.currentFormat[n]==="_")return;let s=n;for(;s>=0&&s<this.$data.currentFormat.length&&this.$data.currentFormat[s]===this.$data.currentFormat[n];)s+=e;n>s&&(s+1!==a||n+1!==i)?this.setSelection({start:s+1,end:n+1}):n<s&&(n!==a||s!==i)&&this.setSelection({start:n,end:s})},modifyDateSegmentValue(e,t){if(!this.kendoDate)return;const a=this.computedValue,i=this.$data.currentFormat[this.selection().start],l=this.kendoDate.symbolMap(i),n=((this.$props.steps||{})[l]||1)*e;this.kendoDate.modifyPart(i,n),this.setSelection(this.selectionBySymbol(i)),this.triggerChange(t,a)},validity(){const e=$.isInRange(this.computedValue,this.$props.min,this.$props.max)&&P.isInTimeRange(this.computedValue,this.$props.minTime,this.$props.maxTime),t=this.$props.validationMessage!==void 0,a=(!this.$props.required||this.computedValue!==null)&&e,i=this.$props.valid!==void 0?this.$props.valid:a;return{customError:t,rangeOverflow:this.computedValue&&this.$props.max.getTime()<this.computedValue.getTime()||!1,rangeUnderflow:this.computedValue&&this.computedValue.getTime()<this.$props.min.getTime()||!1,valid:i,valueMissing:this.computedValue===null}}},mounted(){this._element=o.getRef(this,"input"),this.setValidity(),this.$data.hasMounted=!0},updated(){this.$data.lastSelectedSymbol&&this.setSelection(this.selectionBySymbol(this.$data.lastSelectedSymbol)),this.setValidity()},setup(){const e=u.ref(null),t=u.inject("kendoIntlService",{}),a=u.inject("kendoLocalizationService",{});return{inputRef:e,kendoIntlService:t,kendoLocalizationService:a}},render(){const e=o.getDefaultSlots(this),t=V.provideLocalizationService(this),{formatPlaceholder:a,format:i,value:l,modelValue:n,name:s,label:r,id:m,ariaLabel:h,ariaExpanded:f,ariaHasPopup:g,ariaRole:c,ariaControls:y,inputAttributes:I}=this.$props,D=l!==void 0?l:n;this.kendoDate.format=i,this.kendoDate.formatPlaceholder=a,this.valueDuringOnChange=this.valueDuringOnChange?this.valueDuringOnChange:void 0,D!==void 0&&this.computedValue!==D&&!this.$data.isDeleting&&this.kendoDate.setValue(D);const{text:v,format:B}=this.kendoDate.getTextAndFormat();this.$data.currentFormat=B,this.$data.isEmpty=v===this._emptyText;const k=this.$props.placeholder!==void 0&&this.$data.isEmpty&&!this.$data.isFocused?null:v,b=m||this._inputId,x=!this.$props.validityStyles||this.validity().valid,S=u.createVNode("span",{class:this.wrapperClassNames,dir:this.$props.dir},[u.createVNode("input",u.mergeProps({role:c,tabindex:this.$props.tabIndex,disabled:this.$props.disabled,title:this.$props.title!==void 0?this.$props.title:v,type:"text",spellcheck:!1,autocomplete:"off",autocorrect:"off",class:"k-input-inner",id:b,placeholder:this.$props.placeholder,onWheel:this.wheel,onClick:this.elementClick,onInput:this.elementChange,onKeydown:this.elementKeyDown,onChange:o.noop,onFocusin:this.handleFocus,onFocusout:this.handleBlur,value:k,name:s,"aria-label":h,"aria-expanded":f,"aria-haspopup":g,"aria-controls":y,"aria-disabled":this.$props.disabled||void 0,ref:o.setRef(this,"input")},I),null),e,this.$props.spinners&&u.createVNode("span",{class:"k-input-spinner k-spin-button",onMousedown:this.spinnersMouseDown},[u.createVNode(F.Button,{type:"button",tabIndex:-1,icon:"chevron-up",svgIcon:C.chevronUpIcon,size:this.$props.size,fillMode:this.$props.fillMode,class:"k-spinner-increase","aria-label":t.toLanguageString(d.increaseValue,d.messages[d.increaseValue]),title:t.toLanguageString(d.increaseValue,d.messages[d.increaseValue]),onClick:this.increasePart},null),u.createVNode(F.Button,{type:"button",tabIndex:-1,class:"k-spinner-decrease",icon:"chevron-down",svgIcon:C.chevronDownIcon,size:this.$props.size,fillMode:this.$props.fillMode,"aria-label":t.toLanguageString(d.decreaseValue,d.messages[d.decreaseValue]),title:t.toLanguageString(d.decreaseValue,d.messages[d.decreaseValue]),onClick:this.decreasePart},null)])]);return r?u.createVNode(_.FloatingLabel,{label:r,editorId:b,editorValue:k,editorPlaceholder:this.$props.placeholder,editorValid:x,editorDisabled:this.$props.disabled},E(S)?S:{default:()=>[S]}):S}});exports.DateInput=A;

package/dateinput/DateInput.mjs

@@ -5,24 +5,24 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as T, createVNode as o, mergeProps as _, ref as O, inject as S, isVNode as P } from "vue";
-import { isEqual as B, cloneDate as u } from "@progress/kendo-date-math";
+import { defineComponent as M, createVNode as d, mergeProps as T, ref as _, inject as F, isVNode as O } from "vue";
+import { isEqual as P, cloneDate as g } from "@progress/kendo-date-math";
 import { provideLocalizationService as E, provideIntlService as A } from "@progress/kendo-vue-intl";
-import { KendoDate as z } from "./models/kendo-date.mjs";
-import { getDefaultSlots as L, noop as j, setRef as R, getRef as N, canUseDOM as h, kendoThemeMaps as v, validatePackage as K, guid as q } from "@progress/kendo-vue-common";
-import { Button as D } from "@progress/kendo-vue-buttons";
-import { packageMetadata as H } from "../package-metadata.mjs";
-import { isInRange as U, approximateStringMatching as X, defaultFormatPlaceholder as Y, defaultFormat as G } from "./utils.mjs";
-import { MIN_DATE as W, MAX_DATE as J } from "../utils.mjs";
-import { increaseValue as c, messages as p, decreaseValue as m } from "../messages/main.mjs";
+import { KendoDate as L } from "./models/kendo-date.mjs";
+import { getDefaultSlots as z, noop as j, setRef as R, getRef as N, canUseDOM as y, kendoThemeMaps as w, validatePackage as K, guid as H } from "@progress/kendo-vue-common";
+import { Button as C } from "@progress/kendo-vue-buttons";
+import { packageMetadata as q } from "../package-metadata.mjs";
+import { isInRange as U, approximateStringMatching as W, defaultFormatPlaceholder as X, defaultFormat as Y } from "./utils.mjs";
+import { MIN_DATE as G, MAX_DATE as J } from "../utils.mjs";
+import { increaseValue as S, messages as $, decreaseValue as D } from "../messages/main.mjs";
 import { isInTimeRange as Q } from "../timepicker/utils.mjs";
 import { MIN_TIME as Z, MAX_TIME as ee } from "../defaults.mjs";
 import { FloatingLabel as te } from "@progress/kendo-vue-labels";
 import { chevronUpIcon as ie, chevronDownIcon as ae } from "@progress/kendo-svg-icons";
 function ne(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !P(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !O(e);
 }
-const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
+const se = "Please enter a valid value!", ve = /* @__PURE__ */ M({
   name: "DateInput",
   model: {
     event: "changemodel"
@@ -49,13 +49,13 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
     format: {
       type: [String, Object],
       default: function() {
-        return G;
+        return Y;
       }
     },
     formatPlaceholder: {
       type: [String, Object],
       default: function() {
-        return Y;
+        return X;
       }
     },
     rounded: {
@@ -83,25 +83,25 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
     max: {
       type: Date,
       default: function() {
-        return u(J);
+        return g(J);
       }
     },
     min: {
       type: Date,
       default: function() {
-        return u(W);
+        return g(G);
       }
     },
     maxTime: {
       type: Date,
       default: function() {
-        return u(ee);
+        return g(ee);
       }
     },
     minTime: {
       type: Date,
       default: function() {
-        return u(Z);
+        return g(Z);
       }
     },
     disabled: {
@@ -156,19 +156,20 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
       valueDuringOnChange: void 0,
       hasMounted: !1,
       isEmpty: void 0,
+      isDeleting: !1,
       lastSelectedSymbol: void 0,
       isFocused: !1
     };
   },
   created() {
-    K(H);
+    K(q);
     const {
       formatPlaceholder: e,
       format: t,
       value: i,
       defaultValue: a
     } = this.$props;
-    this.kendoDate = new z(this.intl, e, t), this.kendoDate.setValue(null), this._emptyText = this.kendoDate.getTextAndFormat().text, this.kendoDate.setValue(i || a || null), this._element = null, this._inputId = q();
+    this.kendoDate = new L(this.intl, e, t), this.kendoDate.setValue(null), this._emptyText = this.kendoDate.getTextAndFormat().text, this.kendoDate.setValue(i || a || null), this._element = null, this._inputId = H();
   },
   computed: {
     computedValue() {
@@ -178,14 +179,14 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
       const e = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid, t = this.$props.disabled, {
         size: i,
         fillMode: a,
-        rounded: n
+        rounded: r
       } = this.$props;
       return {
         "k-dateinput": !0,
         "k-input": !0,
-        [`k-input-${v.sizeMap[i] || i}`]: i,
+        [`k-input-${w.sizeMap[i] || i}`]: i,
         [`k-input-${a}`]: a,
-        [`k-rounded-${v.roundedMap[n] || n}`]: n,
+        [`k-rounded-${w.roundedMap[r] || r}`]: r,
         "k-disabled": t,
         "k-invalid": !e && e !== void 0,
         "k-focus": this.isFocused,
@@ -217,7 +218,7 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
       });
     },
     handleBlur(e) {
-      this.$data.isFocused = !1, this.$emit("blur", {
+      this.$data.isFocused = !1, this.$data.isDeleting = !1, this.$emit("blur", {
         event: e
       });
     },
@@ -230,11 +231,12 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
     },
     spinnersMouseDown(e) {
       const t = this.element();
-      e.preventDefault(), t && h && document.activeElement !== t && t.focus({
+      e.preventDefault(), t && y && document.activeElement !== t && t.focus({
         preventScroll: !0
       });
     },
     elementChange(e) {
+      var p;
       const t = this.element();
       if (!t || !this.kendoDate)
         return;
@@ -243,18 +245,45 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
         format: a
       } = this.kendoDate.getTextAndFormat();
       this.$data.currentFormat = a;
-      const n = this.computedValue, s = X(i, this.$data.currentFormat, t.value, this.selection().start), l = s.length === 1 && s[0][1] === "_";
-      if (!l)
-        for (let r = 0; r < s.length; r++)
-          this.kendoDate.parsePart(s[r][0], s[r][1]);
-      s.length && s[0][0] !== "_" && this.setSelection(this.selectionBySymbol(s[0][0])), l && this.switchDateSegment(1), this.triggerChange(e, n);
+      const r = this.computedValue, n = e.inputType === "deleteContentBackward", s = (p = e.inputType) == null ? void 0 : p.startsWith("delete"), o = W(i, this.$data.currentFormat, t.value, this.selection().start), c = o.length === 1 && o[0][1] === "_";
+      let u = !1, h = !1;
+      if (!c)
+        for (let l = 0; l < o.length; l++) {
+          const m = this.kendoDate.parsePart(o[l][0], o[l][1], s);
+          u = !!m.switchToNext, h = !!m.isComplete;
+        }
+      if (s) {
+        this.handleDelete(n, i, t);
+        return;
+      }
+      if (h) {
+        t.value = i, this.setSelection(this.selectionBySymbol(o[0][0]));
+        return;
+      }
+      if (o.length && o[0][0] !== "_" && !u && this.setSelection(this.selectionBySymbol(o[0][0])), c)
+        this.switchDateSegment(1);
+      else if (u) {
+        const l = this.selectionBySymbol(o[0][0]);
+        this.switchDateSegment(1, {
+          start: l.start,
+          end: l.start
+        });
+      }
+      this.triggerChange(e, r);
+    },
+    handleDelete(e, t, i) {
+      if (this.$data.isDeleting = !0, !this.kendoDate.hasValue()) {
+        i.value = t, this.setSelection(this.selectionByIndex(0));
+        return;
+      }
+      e && this.computedValue === null && this.switchDateSegment(-1);
     },
     elementClick(e) {
       this.setSelection(this.selectionByIndex(this.selection().start));
     },
     wheel(e) {
       const t = this.element();
-      h && document.activeElement !== t || (e.deltaY < 0 && (e.preventDefault(), this.increasePart(e)), e.deltaY > 0 && (e.preventDefault(), this.decreasePart(e)));
+      y && document.activeElement !== t || (e.deltaY < 0 && (e.preventDefault(), this.increasePart(e)), e.deltaY > 0 && (e.preventDefault(), this.decreasePart(e)));
     },
     increasePart(e) {
       e.preventDefault(), this.modifyDateSegmentValue(1, e);
@@ -263,34 +292,48 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
       e.preventDefault(), this.modifyDateSegmentValue(-1, e);
     },
     elementKeyDown(e) {
-      if (!e.altKey) {
-        switch (e.keyCode) {
-          case 37:
-            this.switchDateSegment(-1);
-            break;
-          case 38:
-            this.modifyDateSegmentValue(1, e);
-            break;
-          case 39:
-            this.switchDateSegment(1);
-            break;
-          case 40:
-            this.modifyDateSegmentValue(-1, e);
-            break;
-          default:
-            return;
-        }
-        e.preventDefault();
+      if (e.altKey || e.ctrlKey || e.metaKey)
+        return;
+      switch (e.keyCode || {
+        Backspace: 8,
+        ArrowLeft: 37,
+        ArrowUp: 38,
+        ArrowRight: 39,
+        ArrowDown: 40,
+        Home: 36,
+        End: 35
+      }[e.key]) {
+        case 37:
+          this.switchDateSegment(-1);
+          break;
+        case 38:
+          this.modifyDateSegmentValue(1, e);
+          break;
+        case 39:
+          this.switchDateSegment(1);
+          break;
+        case 40:
+          this.modifyDateSegmentValue(-1, e);
+          break;
+        case 36:
+          this.setSelection(this.selectionByIndex(0));
+          break;
+        case 35:
+          this.setSelection(this.selectionByIndex(this.$data.currentFormat.length));
+          break;
+        default:
+          return;
       }
+      e.preventDefault();
     },
-    setSelection(e) {
-      const t = this.element();
-      this.$data.lastSelectedSymbol = this.$data.currentFormat[e.start], h && window.requestAnimationFrame(() => {
-        t && h && document.activeElement === t && t.setSelectionRange(e.start, e.end);
+    setSelection(e, t = !0) {
+      const i = this.element();
+      t && (this.$data.lastSelectedSymbol = this.$data.currentFormat[e.start]), y && window.requestAnimationFrame(() => {
+        i && y && document.activeElement === i && i.setSelectionRange(e.start, e.end);
       });
     },
     triggerChange(e, t) {
-      this.$data.valueDuringOnChange = this.computedValue, B(t, this.computedValue) || (this.$emit("changemodel", this.computedValue), this.$emit("update:modelValue", this.computedValue), this.$emit("change", {
+      this.$data.valueDuringOnChange = this.computedValue, P(t, this.computedValue) || (this.$emit("changemodel", this.computedValue), this.$emit("update:modelValue", this.computedValue), this.$emit("change", {
         event: e,
         value: this.computedValue,
         component: this,
@@ -328,28 +371,28 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
       }
       return t;
     },
-    switchDateSegment(e) {
+    switchDateSegment(e, t) {
       const {
-        start: t,
-        end: i
-      } = this.selection();
-      if (t < i && this.$data.currentFormat[t] !== this.$data.currentFormat[i - 1]) {
-        this.setSelection(this.selectionByIndex(e > 0 ? t : i - 1));
+        start: i,
+        end: a
+      } = t || this.selection();
+      if (i < a && this.$data.currentFormat[i] !== this.$data.currentFormat[a - 1]) {
+        this.setSelection(this.selectionByIndex(e > 0 ? i : a - 1));
         return;
       }
-      const a = this.$data.currentFormat[t];
-      let n = t + e;
-      for (; n > 0 && n < this.$data.currentFormat.length && !(this.$data.currentFormat[n] !== a && this.$data.currentFormat[n] !== "_"); )
+      const r = this.$data.currentFormat[i];
+      let n = i + e;
+      for (; n > 0 && n < this.$data.currentFormat.length && !(this.$data.currentFormat[n] !== r && this.$data.currentFormat[n] !== "_"); )
         n += e;
       if (this.$data.currentFormat[n] === "_")
         return;
       let s = n;
       for (; s >= 0 && s < this.$data.currentFormat.length && this.$data.currentFormat[s] === this.$data.currentFormat[n]; )
         s += e;
-      n > s && (s + 1 !== t || n + 1 !== i) ? this.setSelection({
+      n > s && (s + 1 !== i || n + 1 !== a) ? this.setSelection({
         start: s + 1,
         end: n + 1
-      }) : n < s && (n !== t || s !== i) && this.setSelection({
+      }) : n < s && (n !== i || s !== a) && this.setSelection({
         start: n,
         end: s
       });
@@ -357,8 +400,8 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
     modifyDateSegmentValue(e, t) {
       if (!this.kendoDate)
         return;
-      const i = this.computedValue, a = this.$data.currentFormat[this.selection().start], n = this.kendoDate.symbolMap(a), s = ((this.$props.steps || {})[n] || 1) * e;
-      this.kendoDate.modifyPart(a, s), this.setSelection(this.selectionBySymbol(a)), this.triggerChange(t, i);
+      const i = this.computedValue, a = this.$data.currentFormat[this.selection().start], r = this.kendoDate.symbolMap(a), n = ((this.$props.steps || {})[r] || 1) * e;
+      this.kendoDate.modifyPart(a, n), this.setSelection(this.selectionBySymbol(a)), this.triggerChange(t, i);
     },
     validity() {
       const e = U(this.computedValue, this.$props.min, this.$props.max) && Q(this.computedValue, this.$props.minTime, this.$props.maxTime), t = this.$props.validationMessage !== void 0, i = (!this.$props.required || this.computedValue !== null) && e, a = this.$props.valid !== void 0 ? this.$props.valid : i;
@@ -378,7 +421,7 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
     this.$data.lastSelectedSymbol && this.setSelection(this.selectionBySymbol(this.$data.lastSelectedSymbol)), this.setValidity();
   },
   setup() {
-    const e = O(null), t = S("kendoIntlService", {}), i = S("kendoLocalizationService", {});
+    const e = _(null), t = F("kendoIntlService", {}), i = F("kendoLocalizationService", {});
     return {
       inputRef: e,
       kendoIntlService: t,
@@ -386,41 +429,41 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
     };
   },
   render() {
-    const e = L(this), t = E(this), {
+    const e = z(this), t = E(this), {
       formatPlaceholder: i,
       format: a,
-      value: n,
-      modelValue: s,
-      name: l,
-      label: r,
-      id: b,
-      ariaLabel: k,
-      ariaExpanded: V,
-      ariaHasPopup: F,
-      ariaRole: C,
-      ariaControls: I,
-      inputAttributes: M
-    } = this.$props, f = n !== void 0 ? n : s;
-    this.kendoDate.format = a, this.kendoDate.formatPlaceholder = i, this.valueDuringOnChange = this.valueDuringOnChange ? this.valueDuringOnChange : void 0, f !== void 0 && this.computedValue !== f && this.kendoDate.setValue(f);
+      value: r,
+      modelValue: n,
+      name: s,
+      label: o,
+      id: c,
+      ariaLabel: u,
+      ariaExpanded: h,
+      ariaHasPopup: p,
+      ariaRole: l,
+      ariaControls: m,
+      inputAttributes: I
+    } = this.$props, v = r !== void 0 ? r : n;
+    this.kendoDate.format = a, this.kendoDate.formatPlaceholder = i, this.valueDuringOnChange = this.valueDuringOnChange ? this.valueDuringOnChange : void 0, v !== void 0 && this.computedValue !== v && !this.$data.isDeleting && this.kendoDate.setValue(v);
     const {
-      text: g,
-      format: w
+      text: b,
+      format: x
     } = this.kendoDate.getTextAndFormat();
-    this.$data.currentFormat = w, this.$data.isEmpty = g === this._emptyText;
-    const $ = this.$props.placeholder !== void 0 && this.$data.isEmpty && !this.$data.isFocused ? null : g, y = b || this._inputId, x = !this.$props.validityStyles || this.validity().valid, d = o("span", {
+    this.$data.currentFormat = x, this.$data.isEmpty = b === this._emptyText;
+    const k = this.$props.placeholder !== void 0 && this.$data.isEmpty && !this.$data.isFocused ? null : b, V = c || this._inputId, B = !this.$props.validityStyles || this.validity().valid, f = d("span", {
       class: this.wrapperClassNames,
       dir: this.$props.dir
-    }, [o("input", _({
-      role: C,
+    }, [d("input", T({
+      role: l,
       tabindex: this.$props.tabIndex,
       disabled: this.$props.disabled,
-      title: this.$props.title !== void 0 ? this.$props.title : g,
+      title: this.$props.title !== void 0 ? this.$props.title : b,
       type: "text",
       spellcheck: !1,
       autocomplete: "off",
       autocorrect: "off",
       class: "k-input-inner",
-      id: y,
+      id: V,
       placeholder: this.$props.placeholder,
       onWheel: this.wheel,
       onClick: this.elementClick,
@@ -429,18 +472,18 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
       onChange: j,
       onFocusin: this.handleFocus,
       onFocusout: this.handleBlur,
-      value: $,
-      name: l,
-      "aria-label": k,
-      "aria-expanded": V,
-      "aria-haspopup": F,
-      "aria-controls": I,
+      value: k,
+      name: s,
+      "aria-label": u,
+      "aria-expanded": h,
+      "aria-haspopup": p,
+      "aria-controls": m,
       "aria-disabled": this.$props.disabled || void 0,
       ref: R(this, "input")
-    }, M), null), e, this.$props.spinners && o("span", {
+    }, I), null), e, this.$props.spinners && d("span", {
       class: "k-input-spinner k-spin-button",
       onMousedown: this.spinnersMouseDown
-    }, [o(D, {
+    }, [d(C, {
       type: "button",
       tabIndex: -1,
       icon: "chevron-up",
@@ -448,10 +491,10 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
       size: this.$props.size,
       fillMode: this.$props.fillMode,
       class: "k-spinner-increase",
-      "aria-label": t.toLanguageString(c, p[c]),
-      title: t.toLanguageString(c, p[c]),
+      "aria-label": t.toLanguageString(S, $[S]),
+      title: t.toLanguageString(S, $[S]),
       onClick: this.increasePart
-    }, null), o(D, {
+    }, null), d(C, {
       type: "button",
       tabIndex: -1,
       class: "k-spinner-decrease",
@@ -459,22 +502,22 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
       svgIcon: ae,
       size: this.$props.size,
       fillMode: this.$props.fillMode,
-      "aria-label": t.toLanguageString(m, p[m]),
-      title: t.toLanguageString(m, p[m]),
+      "aria-label": t.toLanguageString(D, $[D]),
+      title: t.toLanguageString(D, $[D]),
       onClick: this.decreasePart
     }, null)])]);
-    return r ? o(te, {
-      label: r,
-      editorId: y,
-      editorValue: $,
+    return o ? d(te, {
+      label: o,
+      editorId: V,
+      editorValue: k,
       editorPlaceholder: this.$props.placeholder,
-      editorValid: x,
+      editorValid: B,
       editorDisabled: this.$props.disabled
-    }, ne(d) ? d : {
-      default: () => [d]
-    }) : d;
+    }, ne(f) ? f : {
+      default: () => [f]
+    }) : f;
   }
 });
 export {
-  De as DateInput
+  ve as DateInput
 };

package/dateinput/interfaces/DateInputMethods.d.ts

@@ -21,6 +21,7 @@ export interface DateInputMethods {
     setValidity: () => void;
     spinnersMouseDown: (event: any) => void;
     elementChange: (event: any) => void;
+    handleDelete: (isBackspace: boolean, text: string, element: HTMLInputElement) => void;
     elementClick: (event: any) => void;
     wheel: (event: any) => void;
     increasePart: (event: any) => void;
@@ -31,7 +32,7 @@ export interface DateInputMethods {
     selection: () => Selection;
     selectionBySymbol: (symbol: string) => Selection;
     selectionByIndex: (index: number) => Selection;
-    switchDateSegment: (offset: number) => void;
+    switchDateSegment: (offset: number, selectionOverride?: Selection) => void;
     modifyDateSegmentValue: (offset: number, event: any) => void;
     validity: () => FormComponentValidity;
 }

package/dateinput/models/kendo-date.d.ts

@@ -12,6 +12,8 @@ import { IntlService, DateFormatOptions } from '@progress/kendo-vue-intl';
  */
 export interface DatePart {
     value: Date | null;
+    switchToNext?: boolean;
+    isComplete?: boolean;
 }
 /**
  * @hidden
@@ -47,7 +49,7 @@ export declare class KendoDate {
     getExisting(symbol: string): boolean;
     setExisting(symbol: string, value: boolean): void;
     modifyPart(symbol: string, offset: number): void;
-    parsePart(symbol: string, currentChar: string): DatePart;
+    parsePart(symbol: string, currentChar: string, isDelete?: boolean): DatePart;
     symbolMap(symbol: string): string;
     resetLeadingZero(): boolean;
     private isAbbrMonth;

package/dateinput/models/kendo-date.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("@progress/kendo-date-math"),p=require("./mask.js"),M=require("../utils.js");class y{constructor(t,e,s){this.year=!0,this.month=!0,this.date=!0,this.hours=!0,this.minutes=!0,this.seconds=!0,this.milliseconds=!0,this.leadingZero=null,this.typedMonthPart="",this.knownParts="adHhmMsEy",this.symbols={E:"E",H:"H",M:"M",a:"a",d:"d",h:"h",m:"m",s:"s",y:"y"},this._value=n.getDate(new Date),this.intlProvider=t,this.formatPlaceholder=e,this.format=s,this.monthNames=this.allFormatedMonths()}get intl(){return this.intlProvider()}get value(){return this._value}setValue(t){t?n.isEqual(t,this._value)||(this._value=n.cloneDate(t),this.modifyExisting(!0)):(this._value=n.getDate(new Date),this.modifyExisting(!1))}hasValue(){const t=(e,s)=>e||s.type!=="literal"&&s.type!=="dayperiod"&&this.getExisting(s.pattern[0]);return this.intl.splitDateFormat(this.format).reduce(t,!1)}getDateObject(){for(let t=0;t<this.knownParts.length;t++)if(!this.getExisting(this.knownParts[t]))return null;return n.cloneDate(this.value)}getTextAndFormat(){return this.merge(this.intl.formatDate(this.value,this.format),this.dateFormatString(this.value,this.format))}modifyExisting(t){const e=this.dateFormatString(this.value,this.format).symbols;for(let s=0;s<e.length;s++)this.setExisting(e[s],t)}getExisting(t){switch(t){case"y":return this.year;case"M":case"L":return this.month;case"d":return this.date;case"E":return this.date&&this.month&&this.year;case"h":case"H":return this.hours;case"m":return this.minutes;case"s":return this.seconds;default:return!0}}setExisting(t,e){switch(t){case"y":this.year=e,e===!1&&this._value.setFullYear(2e3);break;case"M":this.month=e,e===!1&&this._value.setMonth(0);break;case"d":this.date=e;break;case"h":case"H":this.hours=e;break;case"m":this.minutes=e;break;case"s":this.seconds=e;break;default:return}}modifyPart(t,e){let s=n.cloneDate(this.value);switch(t){case"y":s.setFullYear(s.getFullYear()+e);break;case"M":s=n.addMonths(this.value,e);break;case"d":case"E":s.setDate(s.getDate()+e);break;case"h":case"H":s.setHours(s.getHours()+e);break;case"m":s.setMinutes(s.getMinutes()+e);break;case"s":s.setSeconds(s.getSeconds()+e);break;case"a":s.setHours(s.getHours()+12*e);break}this.setExisting(t,!0),this._value=s}parsePart(t,e){if(this.resetLeadingZero(),!e)return this.setExisting(t,!1),{value:null};const s=this.intl.formatDate(this.value,this.format),h=this.dateFormatString(this.value,this.format),l=h.symbols;let o=!1,i="",r="",m="";for(let u=0;u<s.length;u++)l[u]===t?(r+=this.getExisting(t)?s[u]:"0",o=!0):o?m+=s[u]:i+=s[u];let a=null;const c=this.matchMonth(e);for(;r.length>0&&r.charAt(0)==="0";)r=r.slice(1);r.length>=4&&(r="");for(let u=0;u<2;u++){let g=r+e,f=parseInt(g,10);if(a=this.intl.parseDate(i+g+m,this.format),!a&&!isNaN(f)&&!isNaN(parseInt(e,10))){if(t==="M"&&!c){const d=f-1;d>-1&&d<12&&(a=n.cloneDate(this.value),a.setMonth(d),a.getMonth()!==d&&(a=n.lastDayOfMonth(n.addMonths(a,-1))))}t==="y"&&(a=n.createDate(parseInt(g,10),this.month?this.value.getMonth():0,this.date?this.value.getDate():1,this.hours?this.value.getHours():0,this.minutes?this.value.getMinutes():0,this.seconds?this.value.getSeconds():0,this.milliseconds?this.value.getMilliseconds():0),this.date&&a.getDate()!==this.value.getDate()&&(a=n.lastDayOfMonth(n.addMonths(a,-1))))}if(a)return this._value=a,this.setExisting(t,!0),{value:this.value};r=""}return c&&(a=this.intl.parseDate(i+c+m,this.format),a)?(this._value=a,this.setExisting(t,!0),{value:this.value}):(e==="0"&&(this.leadingZero=this.isAbbrMonth(h.partMap,t)?null:{[t]:!0},this.setExisting(t,!1)),{value:null})}symbolMap(t){return this.intl.splitDateFormat(this.format).reduce(M.dateSymbolMap,{})[t]}resetLeadingZero(){const t=this.leadingZero!==null;return this.leadingZero=null,t}isAbbrMonth(t,e){const s=this.partPattern(t,e);return s.type==="month"&&s.names}partPattern(t,e){return t.filter(s=>s.pattern.indexOf(e)!==-1)[0]}matchMonth(t){if(this.typedMonthPart+=t.toLowerCase(),this.monthNames.length===0)return"";for(;this.typedMonthPart.length>0;){for(let s=0;s<this.monthNames.length;s++)if(this.monthNames[s].toLowerCase().indexOf(this.typedMonthPart)===0)return this.monthNames[s];const e=parseInt(this.typedMonthPart,10);if(e>=1&&e<=12&&e.toString()===this.typedMonthPart)return this.monthNames[e-1];this.typedMonthPart=this.typedMonthPart.substring(1,this.typedMonthPart.length)}return""}allFormatedMonths(){const t=this.intl.splitDateFormat(this.format);for(let e=0;e<t.length;e++)if(t[e].type==="month"&&t[e].names)return this.intl.dateFormatNames(t[e].names);return[]}dateFormatString(t,e){const s=this.intl.splitDateFormat(e),h=[],l=[];for(let i=0;i<s.length;i++){let r=this.intl.formatDate(t,{pattern:s[i].pattern}).length;for(;r>0;)h.push(this.symbols[s[i].pattern[0]]||"_"),l.push(s[i]),r--}const o=new p.Mask;return o.symbols=h.join(""),o.partMap=l,o}merge(t,e){var o;let s="",h="",l=e.symbols;for(let i=l.length-1;i>=0;){if(this.knownParts.indexOf(l[i])===-1||this.getExisting(l[i]))s=t[i]+s,h=l[i]+h;else{const r=l[i];for(;i>=0&&r===l[i];)i--;for(i++,(o=this.leadingZero)!=null&&o[r]?s="0"+s:s=this.dateFieldName(e.partMap[i])+s;h.length<s.length;)h=l[i]+h}i--}return{text:s,format:h}}dateFieldName(t){const e=this.formatPlaceholder||"wide";return e[t.type]?e[t.type]:e==="formatPattern"?t.pattern:this.intl.dateFieldName(Object.assign(t,{nameType:e}))}}exports.KendoDate=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("@progress/kendo-date-math"),v=require("./mask.js"),P=require("../utils.js");class x{constructor(t,e,s){this.year=!0,this.month=!0,this.date=!0,this.hours=!0,this.minutes=!0,this.seconds=!0,this.milliseconds=!0,this.leadingZero=null,this.typedMonthPart="",this.knownParts="adHhmMsEy",this.symbols={E:"E",H:"H",M:"M",a:"a",d:"d",h:"h",m:"m",s:"s",y:"y"},this._value=h.getDate(new Date),this.intlProvider=t,this.formatPlaceholder=e,this.format=s,this.monthNames=this.allFormatedMonths()}get intl(){return this.intlProvider()}get value(){return this._value}setValue(t){t?h.isEqual(t,this._value)||(this._value=h.cloneDate(t),this.modifyExisting(!0)):(this._value=h.getDate(new Date),this.modifyExisting(!1))}hasValue(){const t=(e,s)=>e||s.type!=="literal"&&s.type!=="dayperiod"&&this.getExisting(s.pattern[0]);return this.intl.splitDateFormat(this.format).reduce(t,!1)}getDateObject(){for(let t=0;t<this.knownParts.length;t++)if(!this.getExisting(this.knownParts[t]))return null;return h.cloneDate(this.value)}getTextAndFormat(){return this.merge(this.intl.formatDate(this.value,this.format),this.dateFormatString(this.value,this.format))}modifyExisting(t){const e=this.dateFormatString(this.value,this.format).symbols;for(let s=0;s<e.length;s++)this.setExisting(e[s],t)}getExisting(t){switch(t){case"y":return this.year;case"M":case"L":return this.month;case"d":return this.date;case"E":return this.date&&this.month&&this.year;case"h":case"H":return this.hours;case"m":return this.minutes;case"s":return this.seconds;default:return!0}}setExisting(t,e){switch(t){case"y":this.year=e,e===!1&&this._value.setFullYear(2e3);break;case"M":this.month=e,e===!1&&this._value.setMonth(0);break;case"d":this.date=e;break;case"h":case"H":this.hours=e;break;case"m":this.minutes=e;break;case"s":this.seconds=e;break;default:return}}modifyPart(t,e){let s=h.cloneDate(this.value);switch(t){case"y":s.setFullYear(s.getFullYear()+e);break;case"M":s=h.addMonths(this.value,e);break;case"d":case"E":s.setDate(s.getDate()+e);break;case"h":case"H":s.setHours(s.getHours()+e);break;case"m":s.setMinutes(s.getMinutes()+e);break;case"s":s.setSeconds(s.getSeconds()+e);break;case"a":s.setHours(s.getHours()+12*e);break}this.setExisting(t,!0),this._value=s}parsePart(t,e,s=!1){if(this.resetLeadingZero(),!e)return this.setExisting(t,!1),{value:null};const r=this.intl.formatDate(this.value,this.format),n=this.dateFormatString(this.value,this.format),l=n.symbols;let i=!1,o="",u="",g="";for(let d=0;d<r.length;d++)l[d]===t?(u+=this.getExisting(t)?r[d]:"0",i=!0):i?g+=r[d]:o+=r[d];let a=null;const f=this.matchMonth(e);for(;u.length>0&&u.charAt(0)==="0";)u=u.slice(1);if(t==="y"&&u.length>=4&&!s)return{value:null,isComplete:!0};for(let d=0;d<2;d++){let p=u+e,c=parseInt(p,10);if(a=this.intl.parseDate(o+p+g,this.format),!a&&!isNaN(c)&&!isNaN(parseInt(e,10))){if(t==="M"&&!f){const m=c-1;m>-1&&m<12&&(a=h.cloneDate(this.value),a.setMonth(m),a.getMonth()!==m&&(a=h.lastDayOfMonth(h.addMonths(a,-1))))}t==="y"&&(a=h.createDate(parseInt(p,10),this.month?this.value.getMonth():0,this.date?this.value.getDate():1,this.hours?this.value.getHours():0,this.minutes?this.value.getMinutes():0,this.seconds?this.value.getSeconds():0,this.milliseconds?this.value.getMilliseconds():0),this.date&&a.getDate()!==this.value.getDate()&&(a=h.lastDayOfMonth(h.addMonths(a,-1))))}if(a){this._value=a,this.setExisting(t,!0);const m=l.split("").filter(D=>D===t).length,M=u.length+1;let y=M>=m;return t==="M"?y=c>=2||M>=2:t==="d"&&(y=c>=4||M>=2),{value:this.value,switchToNext:y}}u=""}return f&&(a=this.intl.parseDate(o+f+g,this.format),a)?(this._value=a,this.setExisting(t,!0),{value:this.value,switchToNext:!0}):(e==="0"&&(this.leadingZero=this.isAbbrMonth(n.partMap,t)?null:{[t]:!0},this.setExisting(t,!1)),{value:null})}symbolMap(t){return this.intl.splitDateFormat(this.format).reduce(P.dateSymbolMap,{})[t]}resetLeadingZero(){const t=this.leadingZero!==null;return this.leadingZero=null,t}isAbbrMonth(t,e){const s=this.partPattern(t,e);return s.type==="month"&&s.names}partPattern(t,e){return t.filter(s=>s.pattern.indexOf(e)!==-1)[0]}matchMonth(t){if(this.typedMonthPart+=t.toLowerCase(),this.monthNames.length===0)return"";for(;this.typedMonthPart.length>0;){for(let s=0;s<this.monthNames.length;s++)if(this.monthNames[s].toLowerCase().indexOf(this.typedMonthPart)===0)return this.monthNames[s];const e=parseInt(this.typedMonthPart,10);if(e>=1&&e<=12&&e.toString()===this.typedMonthPart)return this.monthNames[e-1];this.typedMonthPart=this.typedMonthPart.substring(1,this.typedMonthPart.length)}return""}allFormatedMonths(){const t=this.intl.splitDateFormat(this.format);for(let e=0;e<t.length;e++)if(t[e].type==="month"&&t[e].names)return this.intl.dateFormatNames(t[e].names);return[]}dateFormatString(t,e){const s=this.intl.splitDateFormat(e),r=[],n=[];for(let i=0;i<s.length;i++){let o=this.intl.formatDate(t,{pattern:s[i].pattern}).length;for(;o>0;)r.push(this.symbols[s[i].pattern[0]]||"_"),n.push(s[i]),o--}const l=new v.Mask;return l.symbols=r.join(""),l.partMap=n,l}merge(t,e){var l;let s="",r="",n=e.symbols;for(let i=n.length-1;i>=0;){if(this.knownParts.indexOf(n[i])===-1||this.getExisting(n[i]))s=t[i]+s,r=n[i]+r;else{const o=n[i];for(;i>=0&&o===n[i];)i--;for(i++,(l=this.leadingZero)!=null&&l[o]?s="0"+s:s=this.dateFieldName(e.partMap[i])+s;r.length<s.length;)r=n[i]+r}i--}return{text:s,format:r}}dateFieldName(t){const e=this.formatPlaceholder||"wide";return e[t.type]?e[t.type]:e==="formatPattern"?t.pattern:this.intl.dateFieldName(Object.assign(t,{nameType:e}))}}exports.KendoDate=x;