@progress/kendo-vue-dateinputs 8.4.0-develop.3 → 8.4.0-develop.5

package/daterangepicker/DateRangePicker.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"),N=require("@progress/kendo-vue-popup"),c=require("@progress/kendo-date-math"),n=require("@progress/kendo-vue-common"),h=require("@progress/kendo-vue-intl"),j=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),x=require("../calendar/components/Calendar.js"),o=require("../calendar/models/SelectionRange.js"),m=require("../defaults.js"),a=require("../messages/main.js"),z=require("@progress/kendo-svg-icons"),P=s.defineComponent({name:"KendoDateRangePicker",emits:{blur:e=>!0,change:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,focus:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},inject:{kendoLocalizationService:{default:null}},model:{event:"changemodel"},props:{allowReverse:{type:Boolean,default:!1},calendarSettings:Object,defaultShow:{type:Boolean,default:!1},defaultValue:{type:Object,default:function(){return o.EMPTY_SELECTIONRANGE}},modelValue:{type:Object,default:void 0},disabled:{type:Boolean,default:!1},popup:[String,Object,Function],calendar:[String,Object,Function],startDateInput:[String,Object,Function],endDateInput:[String,Object,Function],endDateInputSettings:Object,focusedDate:Date,format:{type:[String,Object],default:function(){return"d"}},id:String,ariaLabelledBy:String,ariaDescribedBy:String,max:{type:Date,default:function(){return m.MAX_DATE}},min:{type:Date,default:function(){return m.MIN_DATE}},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["none","small","medium","large"].includes(e)}},popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},startDateInputSettings:Object,swapButton:{type:Boolean,default:!1},tabIndex:Number,value:{type:Object,default:function(){}},inputAttributes:Object},created(){this._element=null,this._wrapper=null,this._calendar=null,this._startDateInput=null,this._endDateInput=null,this._popupId=n.guid(),this._anchor=n.guid(),this._startInputId=n.guid(),this._endInputId=n.guid(),this._calendarId=n.guid(),n.validatePackage(j.packageMetadata),this.currentShow=this.$props.show||this.$props.defaultShow,this.currentValue=this.$props.value||this.$props.defaultValue,this.initialAnimation=this.currentShow},mounted(){this._calendar=this.calendarRef,this._startDateInput=this.startDateInputRef,this._endDateInput=this.endDateInputRef,this.computedShow&&(this.$forceUpdate(),this.$nextTick(function(){this.initialAnimation=!1}))},updated(){this._calendar=this.calendarRef,this._startDateInput=this.startDateInputRef,this._endDateInput=this.endDateInputRef,this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1},data(){return{currentShow:!1,currentValue:null,valueDuringOnChange:void 0,shouldFocusDateInput:!1,shouldFocusCalendar:!1}},computed:{rootClassName(){return{"k-daterangepicker":!0,"k-disabled":this.$props.disabled}},computedValue(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue)||o.EMPTY_SELECTIONRANGE},computedShow(){return this.$props.show!==void 0?this.$props.show:this.currentShow},swapButtonClass(){const{size:e,rounded:t}=this.$props;return{"k-button":!0,[`k-button-${n.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-button-flat":!0,"k-button-flat-base":!0,"k-icon-button":!0,[`k-rounded-${n.kendoThemeMaps.roundedMap[t]||t}`]:t}}},setup(){const e=s.ref(null),t=s.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:t}},render(){const e=this.computedValue||o.EMPTY_SELECTIONRANGE,{size:t,fillMode:i,rounded:u}=this.$props,l=(this.$props.startDateInputSettings||{}).id||this._startInputId,f=(this.$props.endDateInputSettings||{}).id||this._endInputId,d=h.provideLocalizationService(this),I=d.toLanguageString(a.start,a.messages[a.start]),S=d.toLanguageString(a.end,a.messages[a.end]),D=d.toLanguageString(a.separator,a.messages[a.separator]),v=this.$props.startDateInput?n.templateRendering.call(this,this.$props.startDateInput,n.getListeners.call(this)):void 0,b={label:I,format:this.$props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.$props.disabled,valid:this.$props.valid,size:t,fillMode:i,rounded:u,ariaHasPopup:"grid",ariaExpanded:this.computedShow,value:e.start,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:this.$props.inputAttributes,...this.$props.startDateInputSettings},w=s.h(g.DateInput,{ref:r=>{this.startDateInputRef=r},...b,onChange:this.handleStartChange}),$=n.getTemplate.call(this,{h:s.h,template:v,defaultRendering:w,additionalListeners:{change:this.handleStartChange}}),C=this.$props.endDateInput?n.templateRendering.call(this,this.$props.endDateInput,n.getListeners.call(this)):void 0,R={label:S,format:this.$props.format,min:this.min,max:this.max,id:this._endInputId,size:t,fillMode:i,rounded:u,disabled:this.$props.disabled,valid:this.$props.valid,ariaHasPopup:"grid",ariaExpanded:this.computedShow,value:e.end,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:this.$props.inputAttributes,...this.$props.endDateInputSettings},y=s.h(g.DateInput,{ref:r=>{this.endDateInputRef=r},...R,onChange:this.handleEndChange}),E=n.getTemplate.call(this,{h:s.h,template:C,defaultRendering:y,additionalListeners:{change:this.handleEndChange}}),_=this.$props.calendar?n.templateRendering.call(this,this.$props.calendar,n.getListeners.call(this)):void 0,k={id:this._calendarId,min:this.min,max:this.max,views:2,allowReverse:this.$props.allowReverse,mode:"range",focusedDate:this.$props.focusedDate,disabled:this.$props.disabled,value:e,...this.$props.calendarSettings},V=s.h(x.Calendar,{ref:r=>{this.calendarRef=r},onKeydown:this.handleKeyDown,onFocus:this.calendarFocus,onBlur:this.calendarBlur,onChange:this.handleCalendarChange,...k}),p=n.getTemplate.call(this,{h:s.h,template:_,defaultRendering:V,additionalListeners:{change:this.handleCalendarChange,keydown:this.handleKeyDown,focus:this.calendarFocus,blur:this.calendarBlur}}),{popupClass:T,animate:B}=this.$props.popupSettings,L=this.$props.popup?n.templateRendering.call(this,this.$props.popup,n.getListeners.call(this)):void 0,O={show:this.computedShow,anchor:this._anchor,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},animate:this.initialAnimation?!1:B,...this.$props.popupSettings},A=s.h(N.Popup,{class:n.classNames("k-calendar-container",T),...O},function(){return[p]}),M=n.getTemplate.call(this,{h:s.h,template:L,defaultRendering:A,defaultSlots:p}),F=s.createVNode("button",{class:this.swapButtonClass,role:"button",title:h.provideLocalizationService(this).toLanguageString(a.swapStartEnd,a.messages[a.swapStartEnd]),onMousedown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":l+" "+f,"aria-label":h.provideLocalizationService(this).toLanguageString(a.swapStartEnd,a.messages[a.swapStartEnd])},[s.createVNode(n.Icon,{name:"arrows-swap",icon:z.arrowsSwapIcon,style:{transform:"rotate(90deg)"},class:"k-button-icon"},null)]);return s.createVNode("span",{class:this.rootClassName,style:this.$attrs.style,id:this.$props.id,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,tabindex:this.$props.tabIndex,onFocusin:this.handleFocus,onFocusout:this.handleBlur,onKeydown:this.handleKeyDown,ref:r=>{this.kendoAnchorRef=r}},[$,(this.$props.allowReverse||this.$props.calendarSettings&&this.$props.calendarSettings.allowReverse)&&this.$props.swapButton?F:D,E,M])},methods:{focus(){const e=this.getStartInput();e&&e.focus()},focusCalendarElement(){const e=this.getCalendar();e&&e.focus({preventScroll:!0})},focusDateInputElement(){const e=this.getStartInput(),t=this.getEndInput();!document||!e||!t||((this.computedValue.start===null||this.computedValue.end!==null)&&document.activeElement!==t?e.focus({preventScroll:!0}):document.activeElement!==e&&t.focus({preventScroll:!0}))},calculateValue(e,t){return(e.value!==void 0?e.value:t.currentValue)||o.EMPTY_SELECTIONRANGE},calculateShow(e,t){return e.show!==void 0?e.show:t.currentShow},setShow(e){this.currentShow!==e&&(this.currentShow=e,this.$emit(e?"open":"close",{component:this}))},handleReverseClick(e){const t={start:this.computedValue.end,end:this.computedValue.start},i={event:e.event};this.handleChange(t,i)},handleReverseMouseDown(e){e.preventDefault()},handleFocus(e){this.shouldFocusDateInput||this.setShow(!0),this.$emit("focus",{event:e})},calendarBlur(){clearTimeout(this._blurTimeout),this.createBlurTimeout()},calendarFocus(){clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{const e=this.getStartInput(),t=this.getEndInput();e&&t&&n.canUseDOM&&e&&document.activeElement!==t&&this.setShow(!1)},200)},getStartInput(){return this._startDateInput&&this._startDateInput.element?this._startDateInput.element():document.getElementById(this._startInputId)},getEndInput(){return this._endDateInput&&this._endDateInput.element?this._endDateInput.element():document.getElementById(this._endInputId)},getCalendar(){return this._calendar&&this._calendar.element?this._calendar:document.getElementById(this._calendarId)},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",{event:e})},handleEndChange(e){const t={start:this.computedValue.start,end:c.cloneDate(e.value||void 0)};this.handleChange(t,e)},handleStartChange(e){const t={start:c.cloneDate(e.value||void 0),end:this.computedValue.end};this.handleChange(t,e)},extractRangeFromValue(e){if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||o.EMPTY_SELECTIONRANGE;const t=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.computedValue.end!==null?t:this.computedValue.start,end:this.computedValue.start!==null?t:this.computedValue.end}},handleCalendarChange(e){const t=this.extractRangeFromValue(e);this.handleChange(t,e)},handleKeyDown(e){const{keyCode:t,altKey:i}=e,u=this.getEndInput(),l=this.getCalendar();t===n.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):i&&t===n.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0)):t===n.Keys.tab&&this.computedShow&&l&&u&&document&&document.activeElement===u&&(e.preventDefault(),this.focusCalendarElement()),this.$emit("keydown",e)},handleChange(e,t){this.currentValue=e,this.valueDuringOnChange=e;const i={event:t.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,show:this.computedShow}};this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",i),this.valueDuringOnChange=void 0}}});exports.DateRangePicker=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),N=require("@progress/kendo-vue-popup"),c=require("@progress/kendo-date-math"),n=require("@progress/kendo-vue-common"),h=require("@progress/kendo-vue-intl"),j=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),x=require("../calendar/components/Calendar.js"),o=require("../calendar/models/SelectionRange.js"),m=require("../defaults.js"),a=require("../messages/main.js"),z=require("@progress/kendo-svg-icons"),P=s.defineComponent({name:"KendoDateRangePicker",emits:{blur:e=>!0,change:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,focus:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},inject:{kendoLocalizationService:{default:null}},model:{event:"changemodel"},props:{allowReverse:{type:Boolean,default:!1},calendarSettings:Object,defaultShow:{type:Boolean,default:!1},defaultValue:{type:Object,default:function(){return o.EMPTY_SELECTIONRANGE}},modelValue:{type:Object,default:void 0},disabled:{type:Boolean,default:!1},popup:[String,Object,Function],calendar:[String,Object,Function],startDateInput:[String,Object,Function],endDateInput:[String,Object,Function],endDateInputSettings:Object,focusedDate:Date,format:{type:[String,Object],default:function(){return"d"}},id:String,ariaLabelledBy:String,ariaDescribedBy:String,max:{type:Date,default:function(){return m.MAX_DATE}},min:{type:Date,default:function(){return m.MIN_DATE}},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["none","small","medium","large"].includes(e)}},popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},startDateInputSettings:Object,swapButton:{type:Boolean,default:!1},tabIndex:Number,value:{type:Object,default:function(){}},inputAttributes:Object},created(){this._element=null,this._wrapper=null,this._calendar=null,this._startDateInput=null,this._endDateInput=null,this._popupId=n.guid(),this._anchor=n.guid(),this._startInputId=n.guid(),this._endInputId=n.guid(),this._calendarId=n.guid(),n.validatePackage(j.packageMetadata),this.currentShow=this.$props.show||this.$props.defaultShow,this.currentValue=this.$props.value||this.$props.defaultValue,this.initialAnimation=this.currentShow},mounted(){this._calendar=this.calendarRef,this._startDateInput=this.startDateInputRef,this._endDateInput=this.endDateInputRef,this.computedShow&&(this.$forceUpdate(),this.$nextTick(function(){this.initialAnimation=!1}))},updated(){this._calendar=this.calendarRef,this._startDateInput=this.startDateInputRef,this._endDateInput=this.endDateInputRef,this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1},data(){return{currentShow:!1,currentValue:null,valueDuringOnChange:void 0,shouldFocusDateInput:!1,shouldFocusCalendar:!1}},computed:{rootClassName(){return{"k-daterangepicker":!0,"k-disabled":this.$props.disabled}},computedValue(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue)||o.EMPTY_SELECTIONRANGE},computedShow(){return this.$props.show!==void 0?this.$props.show:this.currentShow},swapButtonClass(){const{size:e,rounded:t}=this.$props;return{"k-button":!0,[`k-button-${n.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-button-flat":!0,"k-button-flat-base":!0,"k-icon-button":!0,[`k-rounded-${n.kendoThemeMaps.roundedMap[t]||t}`]:t}}},setup(){const e=s.ref(null),t=s.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:t}},render(){const e=this.computedValue||o.EMPTY_SELECTIONRANGE,{size:t,fillMode:i,rounded:u}=this.$props,l=(this.$props.startDateInputSettings||{}).id||this._startInputId,f=(this.$props.endDateInputSettings||{}).id||this._endInputId,d=h.provideLocalizationService(this),I=d.toLanguageString(a.start,a.messages[a.start]),S=d.toLanguageString(a.end,a.messages[a.end]),D=d.toLanguageString(a.separator,a.messages[a.separator]),v=this.$props.startDateInput?n.templateRendering.call(this,this.$props.startDateInput,n.getListeners.call(this)):void 0,b={label:I,format:this.$props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.$props.disabled,valid:this.$props.valid,size:t,fillMode:i,rounded:u,ariaHasPopup:"grid",ariaExpanded:this.computedShow,value:e.start,ariaRole:"combobox",ariaControls:this.computedShow?this._popupId:void 0,inputAttributes:this.$props.inputAttributes,...this.$props.startDateInputSettings},w=s.h(g.DateInput,{ref:r=>{this.startDateInputRef=r},...b,onChange:this.handleStartChange}),$=n.getTemplate.call(this,{h:s.h,template:v,defaultRendering:w,additionalListeners:{change:this.handleStartChange}}),C=this.$props.endDateInput?n.templateRendering.call(this,this.$props.endDateInput,n.getListeners.call(this)):void 0,R={label:S,format:this.$props.format,min:this.min,max:this.max,id:this._endInputId,size:t,fillMode:i,rounded:u,disabled:this.$props.disabled,valid:this.$props.valid,ariaHasPopup:"grid",ariaExpanded:this.computedShow,value:e.end,ariaRole:"combobox",ariaControls:this.computedShow?this._popupId:void 0,inputAttributes:this.$props.inputAttributes,...this.$props.endDateInputSettings},y=s.h(g.DateInput,{ref:r=>{this.endDateInputRef=r},...R,onChange:this.handleEndChange}),E=n.getTemplate.call(this,{h:s.h,template:C,defaultRendering:y,additionalListeners:{change:this.handleEndChange}}),_=this.$props.calendar?n.templateRendering.call(this,this.$props.calendar,n.getListeners.call(this)):void 0,V={id:this._calendarId,min:this.min,max:this.max,views:2,allowReverse:this.$props.allowReverse,mode:"range",focusedDate:this.$props.focusedDate,disabled:this.$props.disabled,value:e,...this.$props.calendarSettings},k=s.h(x.Calendar,{ref:r=>{this.calendarRef=r},onKeydown:this.handleKeyDown,onFocus:this.calendarFocus,onBlur:this.calendarBlur,onChange:this.handleCalendarChange,...V}),p=n.getTemplate.call(this,{h:s.h,template:_,defaultRendering:k,additionalListeners:{change:this.handleCalendarChange,keydown:this.handleKeyDown,focus:this.calendarFocus,blur:this.calendarBlur}}),{popupClass:T,animate:B}=this.$props.popupSettings,L=this.$props.popup?n.templateRendering.call(this,this.$props.popup,n.getListeners.call(this)):void 0,O={show:this.computedShow,anchor:this._anchor,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},animate:this.initialAnimation?!1:B,...this.$props.popupSettings},A=s.h(N.Popup,{class:T,...O},function(){return[p]}),M=n.getTemplate.call(this,{h:s.h,template:L,defaultRendering:A,defaultSlots:p}),F=s.createVNode("button",{class:this.swapButtonClass,role:"button",title:h.provideLocalizationService(this).toLanguageString(a.swapStartEnd,a.messages[a.swapStartEnd]),onMousedown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":l+" "+f,"aria-label":h.provideLocalizationService(this).toLanguageString(a.swapStartEnd,a.messages[a.swapStartEnd])},[s.createVNode(n.Icon,{name:"arrows-swap",icon:z.arrowsSwapIcon,style:{transform:"rotate(90deg)"},class:"k-button-icon"},null)]);return s.createVNode("span",{class:this.rootClassName,style:this.$attrs.style,id:this.$props.id,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,tabindex:this.$props.tabIndex,onFocusin:this.handleFocus,onFocusout:this.handleBlur,onKeydown:this.handleKeyDown,ref:r=>{this.kendoAnchorRef=r}},[$,(this.$props.allowReverse||this.$props.calendarSettings&&this.$props.calendarSettings.allowReverse)&&this.$props.swapButton?F:D,E,M])},methods:{focus(){const e=this.getStartInput();e&&e.focus()},focusCalendarElement(){const e=this.getCalendar();e&&e.focus({preventScroll:!0})},focusDateInputElement(){const e=this.getStartInput(),t=this.getEndInput();!document||!e||!t||((this.computedValue.start===null||this.computedValue.end!==null)&&document.activeElement!==t?e.focus({preventScroll:!0}):document.activeElement!==e&&t.focus({preventScroll:!0}))},calculateValue(e,t){return(e.value!==void 0?e.value:t.currentValue)||o.EMPTY_SELECTIONRANGE},calculateShow(e,t){return e.show!==void 0?e.show:t.currentShow},setShow(e){this.currentShow!==e&&(this.currentShow=e,this.$emit(e?"open":"close",{component:this}))},handleReverseClick(e){const t={start:this.computedValue.end,end:this.computedValue.start},i={event:e.event};this.handleChange(t,i)},handleReverseMouseDown(e){e.preventDefault()},handleFocus(e){this.shouldFocusDateInput||this.setShow(!0),this.$emit("focus",{event:e})},calendarBlur(){clearTimeout(this._blurTimeout),this.createBlurTimeout()},calendarFocus(){clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{const e=this.getStartInput(),t=this.getEndInput();e&&t&&n.canUseDOM&&e&&document.activeElement!==t&&this.setShow(!1)},200)},getStartInput(){return this._startDateInput&&this._startDateInput.element?this._startDateInput.element():document.getElementById(this._startInputId)},getEndInput(){return this._endDateInput&&this._endDateInput.element?this._endDateInput.element():document.getElementById(this._endInputId)},getCalendar(){return this._calendar&&this._calendar.element?this._calendar:document.getElementById(this._calendarId)},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",{event:e})},handleEndChange(e){const t={start:this.computedValue.start,end:c.cloneDate(e.value||void 0)};this.handleChange(t,e)},handleStartChange(e){const t={start:c.cloneDate(e.value||void 0),end:this.computedValue.end};this.handleChange(t,e)},extractRangeFromValue(e){if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||o.EMPTY_SELECTIONRANGE;const t=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.computedValue.end!==null?t:this.computedValue.start,end:this.computedValue.start!==null?t:this.computedValue.end}},handleCalendarChange(e){const t=this.extractRangeFromValue(e);this.handleChange(t,e)},handleKeyDown(e){const{keyCode:t,altKey:i}=e,u=this.getEndInput(),l=this.getCalendar();t===n.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):i&&t===n.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0)):t===n.Keys.tab&&this.computedShow&&l&&u&&document&&document.activeElement===u&&(e.preventDefault(),this.focusCalendarElement()),this.$emit("keydown",e)},handleChange(e,t){this.currentValue=e,this.valueDuringOnChange=e;const i={event:t.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,show:this.computedShow}};this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",i),this.valueDuringOnChange=void 0}}});exports.DateRangePicker=P;

package/daterangepicker/DateRangePicker.mjs

@@ -8,16 +8,16 @@
 import { defineComponent as X, h as a, createVNode as f, ref as Y, inject as q } from "vue";
 import { Popup as J } from "@progress/kendo-vue-popup";
 import { cloneDate as S } from "@progress/kendo-date-math";
-import { Keys as g, canUseDOM as Q, templateRendering as l, getListeners as d, getTemplate as h, classNames as W, Icon as Z, kendoThemeMaps as v, guid as r, validatePackage as tt } from "@progress/kendo-vue-common";
+import { Keys as g, canUseDOM as Q, templateRendering as l, getListeners as d, getTemplate as h, Icon as W, kendoThemeMaps as v, guid as o, validatePackage as Z } from "@progress/kendo-vue-common";
 import { provideLocalizationService as I } from "@progress/kendo-vue-intl";
-import { packageMetadata as et } from "../package-metadata.mjs";
+import { packageMetadata as tt } from "../package-metadata.mjs";
 import { DateInput as b } from "../dateinput/DateInput.mjs";
-import { Calendar as nt } from "../calendar/components/Calendar.mjs";
-import { EMPTY_SELECTIONRANGE as o } from "../calendar/models/SelectionRange.mjs";
-import { MIN_DATE as at, MAX_DATE as st } from "../defaults.mjs";
-import { start as $, messages as u, end as w, separator as C, swapStartEnd as p } from "../messages/main.mjs";
-import { arrowsSwapIcon as it } from "@progress/kendo-svg-icons";
-const Dt = /* @__PURE__ */ X({
+import { Calendar as et } from "../calendar/components/Calendar.mjs";
+import { EMPTY_SELECTIONRANGE as r } from "../calendar/models/SelectionRange.mjs";
+import { MIN_DATE as nt, MAX_DATE as at } from "../defaults.mjs";
+import { start as w, messages as u, end as $, separator as C, swapStartEnd as p } from "../messages/main.mjs";
+import { arrowsSwapIcon as st } from "@progress/kendo-svg-icons";
+const It = /* @__PURE__ */ X({
   name: "KendoDateRangePicker",
   emits: {
     blur: (t) => !0,
@@ -50,7 +50,7 @@ const Dt = /* @__PURE__ */ X({
     defaultValue: {
       type: Object,
       default: function() {
-        return o;
+        return r;
       }
     },
     modelValue: {
@@ -79,13 +79,13 @@ const Dt = /* @__PURE__ */ X({
     max: {
       type: Date,
       default: function() {
-        return st;
+        return at;
       }
     },
     min: {
       type: Date,
       default: function() {
-        return at;
+        return nt;
       }
     },
     rounded: {
@@ -130,7 +130,7 @@ const Dt = /* @__PURE__ */ X({
     inputAttributes: Object
   },
   created() {
-    this._element = null, this._wrapper = null, this._calendar = null, this._startDateInput = null, this._endDateInput = null, this._popupId = r(), this._anchor = r(), this._startInputId = r(), this._endInputId = r(), this._calendarId = r(), tt(et), this.currentShow = this.$props.show || this.$props.defaultShow, this.currentValue = this.$props.value || this.$props.defaultValue, this.initialAnimation = this.currentShow;
+    this._element = null, this._wrapper = null, this._calendar = null, this._startDateInput = null, this._endDateInput = null, this._popupId = o(), this._anchor = o(), this._startInputId = o(), this._endInputId = o(), this._calendarId = o(), Z(tt), this.currentShow = this.$props.show || this.$props.defaultShow, this.currentValue = this.$props.value || this.$props.defaultValue, this.initialAnimation = this.currentShow;
   },
   mounted() {
     this._calendar = this.calendarRef, this._startDateInput = this.startDateInputRef, this._endDateInput = this.endDateInputRef, this.computedShow && (this.$forceUpdate(), this.$nextTick(function() {
@@ -157,7 +157,7 @@ const Dt = /* @__PURE__ */ X({
       };
     },
     computedValue() {
-      return (this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.$props.value !== void 0 ? this.$props.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.currentValue) || o;
+      return (this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.$props.value !== void 0 ? this.$props.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.currentValue) || r;
     },
     computedShow() {
       return this.$props.show !== void 0 ? this.$props.show : this.currentShow;
@@ -185,11 +185,11 @@ const Dt = /* @__PURE__ */ X({
     };
   },
   render() {
-    const t = this.computedValue || o, {
+    const t = this.computedValue || r, {
       size: e,
       fillMode: n,
       rounded: i
-    } = this.$props, c = (this.$props.startDateInputSettings || {}).id || this._startInputId, R = (this.$props.endDateInputSettings || {}).id || this._endInputId, m = I(this), y = m.toLanguageString($, u[$]), _ = m.toLanguageString(w, u[w]), V = m.toLanguageString(C, u[C]), k = this.$props.startDateInput ? l.call(this, this.$props.startDateInput, d.call(this)) : void 0, E = {
+    } = this.$props, c = (this.$props.startDateInputSettings || {}).id || this._startInputId, R = (this.$props.endDateInputSettings || {}).id || this._endInputId, m = I(this), y = m.toLanguageString(w, u[w]), _ = m.toLanguageString($, u[$]), V = m.toLanguageString(C, u[C]), k = this.$props.startDateInput ? l.call(this, this.$props.startDateInput, d.call(this)) : void 0, E = {
       label: y,
       format: this.$props.format,
       min: this.min,
@@ -204,7 +204,7 @@ const Dt = /* @__PURE__ */ X({
       ariaExpanded: this.computedShow,
       value: t.start,
       ariaRole: "combobox",
-      ariaControls: this._popupId,
+      ariaControls: this.computedShow ? this._popupId : void 0,
       inputAttributes: this.$props.inputAttributes,
       ...this.$props.startDateInputSettings
     }, B = a(b, {
@@ -235,7 +235,7 @@ const Dt = /* @__PURE__ */ X({
       ariaExpanded: this.computedShow,
       value: t.end,
       ariaRole: "combobox",
-      ariaControls: this._popupId,
+      ariaControls: this.computedShow ? this._popupId : void 0,
       inputAttributes: this.$props.inputAttributes,
       ...this.$props.endDateInputSettings
     }, x = a(b, {
@@ -262,7 +262,7 @@ const Dt = /* @__PURE__ */ X({
       disabled: this.$props.disabled,
       value: t,
       ...this.$props.calendarSettings
-    }, j = a(nt, {
+    }, j = a(et, {
       ref: (s) => {
         this.calendarRef = s;
       },
@@ -299,7 +299,7 @@ const Dt = /* @__PURE__ */ X({
       animate: this.initialAnimation ? !1 : K,
       ...this.$props.popupSettings
     }, H = a(J, {
-      class: W("k-calendar-container", z),
+      class: z,
       ...P
     }, function() {
       return [D];
@@ -316,9 +316,9 @@ const Dt = /* @__PURE__ */ X({
       onClick: this.handleReverseClick,
       "aria-controls": c + " " + R,
       "aria-label": I(this).toLanguageString(p, u[p])
-    }, [f(Z, {
+    }, [f(W, {
       name: "arrows-swap",
-      icon: it,
+      icon: st,
       style: {
         transform: "rotate(90deg)"
       },
@@ -359,7 +359,7 @@ const Dt = /* @__PURE__ */ X({
       }));
     },
     calculateValue(t, e) {
-      return (t.value !== void 0 ? t.value : e.currentValue) || o;
+      return (t.value !== void 0 ? t.value : e.currentValue) || r;
     },
     calculateShow(t, e) {
       return t.show !== void 0 ? t.show : e.currentShow;
@@ -428,7 +428,7 @@ const Dt = /* @__PURE__ */ X({
     },
     extractRangeFromValue(t) {
       if (!Array.isArray(t.value) && !(t.value instanceof Date))
-        return t.value || o;
+        return t.value || r;
       const e = Array.isArray(t.value) ? t.value[0] : t.value;
       return {
         start: this.computedValue.end !== null ? e : this.computedValue.start,
@@ -464,5 +464,5 @@ const Dt = /* @__PURE__ */ X({
   }
 });
 export {
-  Dt as DateRangePicker
+  It as DateRangePicker
 };

package/datetimepicker/DateTimePicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),G=require("@progress/kendo-vue-labels"),J=require("@progress/kendo-vue-buttons"),Q=require("@progress/kendo-vue-popup"),r=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),W=require("../dateinput/DateInput.js"),Y=require("../package-metadata.js"),u=require("../utils.js"),o=require("../messages/main.js"),b=require("@progress/kendo-vue-intl"),Z=require("./DateTimeSelector.js"),ee=require("../timepicker/utils.js"),T=require("../defaults.js"),te=require("../dateinput/utils.js"),ie=require("@progress/kendo-svg-icons");function m(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const ne=n.defineComponent({name:"KendoDateTimePicker",emits:{changemodel:e=>!0,"update:modelValue":e=>!0,iconclick:e=>!0,change:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},props:{modelValue:{type:Date,default:void 0},defaultShow:{type:Boolean,default:!1},defaultValue:{type:Date,default:null},disabled:{type:Boolean,default:!1},dateInput:{type:[String,Object,Function],default:function(){}},popup:{type:[String,Object,Function],default:function(){}},calendar:{type:[String,Object,Function],default:function(){}},focusedDate:Date,format:{type:[String,Object],default:function(){return"g"}},formatPlaceholder:{type:[String,Object],default:function(){return te.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["none","small","medium","large"].includes(e)}},id:String,ariaLabelledBy:String,ariaDescribedBy:String,min:{type:Date,default:function(){return u.MIN_DATE}},max:{type:Date,default:function(){return u.MAX_DATE}},maxTime:{type:Date,default:function(){return r.cloneDate(u.MAX_TIME)}},minTime:{type:Date,default:function(){return r.cloneDate(T.MIN_TIME)}},name:String,label:String,placeholder:String,popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},tabIndex:{type:Number,default:0},title:{type:String,default:function(){return""}},steps:{type:Object,default:function(){return{}}},value:Date,weekNumber:{type:Boolean,default:!1},width:String,validationMessage:String,required:{type:Boolean,default:!1},validityStyles:{type:Boolean,default:!0},validate:Boolean,valid:{type:Boolean,default:void 0},cancelButton:{type:Boolean,default:!0},inputAttributes:Object},model:{event:"changemodel"},created(){this._anchor=t.guid(),this._popupId="popup"+t.guid(),this._wrapper=null,this._dateInput=null,this._dateTimeSelector=null,t.validatePackage(Y.packageMetadata),this.currentValue=this.$props.defaultValue,this.currentShow=this.$props.defaultShow},inject:{kendoLocalizationService:{default:null}},data(){return{currentValue:null,currentShow:!1,valueDuringOnChange:void 0,showDuringOnChange:void 0,shouldFocusDateInput:!1,isFocused:!1}},computed:{computedValue(){const e=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentValue;return e!==null?r.cloneDate(e):null},computedShow(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.$props.show!==void 0?this.$props.show:this.currentShow}},watch:{show:function(e,i){this._oldShow=i},currentShow:function(e,i){this._oldShow=i}},mounted(){this.computedShow&&this.$forceUpdate();const e=this.dateInputElement();this._dateTimeSelector=this.$refs.dateTimeSelector,this._wrapper=this.kendoAnchorRef,this._dateInput=this.dateInputRef,e&&e.setAttribute("aria-haspopup","dialog")},updated(){const e=this.dateInputElement();this._dateTimeSelector=this.$refs.dateTimeSelector,this._wrapper=this.kendoAnchorRef,this._dateTimeSelector&&this.computedShow&&!this._oldShow&&this._dateTimeSelector.focus({preventScroll:!0}),e&&!this.computedShow&&this.shouldFocusDateInput&&this._dateInput.focus({preventScroll:!0}),this.shouldFocusDateInput=!1},setup(){const e=n.ref(null),i=n.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:i}},render(){const e=t.getDefaultSlots(this),{disabled:i,tabIndex:a,title:d,id:f,format:g,formatPlaceholder:$,min:k,max:V,weekNumber:_,focusedDate:M,width:S,name:B,steps:v,placeholder:C,validationMessage:q,required:F,validityStyles:O,cancelButton:R,minTime:D,maxTime:w,ariaLabelledBy:ae,ariaDescribedBy:oe,size:p,fillMode:I,rounded:c,inputAttributes:x}=this.$props,{popupClass:E,appendTo:A,animate:j}=this.$props.popupSettings,y=!this.$props.validityStyles||this.validity().valid,N=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,P=n.createVNode(W.DateInput,{ref:h=>{this.dateInputRef=h},placeholder:C,disabled:i,format:g,formatPlaceholder:$,id:f,max:V,min:k,minTime:D,maxTime:w,name:B,size:null,rounded:null,fillMode:null,onChange:this.handleValueChange,required:F,steps:v,tabIndex:this.computedShow?-1:a,title:d,valid:this.validity().valid,validationMessage:q,validityStyles:O,value:this.computedValue,ariaHasPopup:"dialog",ariaExpanded:this.computedShow,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:x},m(e)?e:{default:()=>[e]}),L=t.getTemplate.call(this,{h:n.h,template:N,defaultRendering:P}),K=this.$props.calendar?t.templateRendering.call(this,this.$props.calendar,t.getListeners.call(this)):void 0,s=n.createVNode(Z.DateTimeSelector,{ref:"dateTimeSelector",cancelButton:R,value:this.computedValue,onChange:this.handleValueChange,onReject:this.handleReject,disabled:i,weekNumber:_,min:this.$props.min,max:this.$props.max,minTime:D,maxTime:w,focusedDate:M,format:g,calendar:K,steps:v,onFocus:this.timeSelectorFocus,onBlur:this.timeSelectorBlur,onKeydown:this.handleKeyDown},null),z=t.classNames("k-calendar-container k-datetime-container k-reset",E),U=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,X=n.createVNode(Q.Popup,{show:this.computedShow,anchor:this._anchor,popupClass:z,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},appendTo:A,animate:j},m(s)?s:{default:()=>[s]}),H=t.getTemplate.call(this,{h:n.h,template:U,defaultRendering:X,defaultSlots:s}),l=n.createVNode("div",{class:t.classNames("k-input","k-datetimepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-input-${I}`]:I,[`k-rounded-${t.kendoThemeMaps.roundedMap[c]||c}`]:c,"k-invalid":!y,"k-required":this.required,"k-disabled":this.$props.disabled}),ref:h=>{this.kendoAnchorRef=h},onKeydown:this.handleKeyDown,style:{width:S},onFocusin:this.handleFocus,onFocusout:this.handleBlur},[L,n.createVNode(J.Button,{type:"button",tabIndex:-1,icon:"calendar",svgIcon:ie.calendarIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleDateIconClick,title:b.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector]),rounded:null,disabled:i,class:"k-input-button","aria-controls":this._popupId,"aria-label":b.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector])},null),H]);return this.$props.label?n.createVNode(G.FloatingLabel,{label:this.$props.label,editorId:f,editorValid:y,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:S}},m(l)?l:{default:()=>[l]}):l},methods:{validity(){const e=u.isInDateRange(this.computedValue,this.$props.min,this.$props.max)&&ee.isInTimeRange(this.computedValue,this.$props.minTime||T.MIN_TIME,this.$props.maxTime||u.MAX_TIME),i=this.$props.validationMessage!==void 0,a=(!this.$props.required||this.computedValue!==null)&&e,d=this.$props.valid!==void 0?this.$props.valid:a;return{customError:i,rangeOverflow:this.computedValue&&this.$props.max.getTime()<this.computedValue.getTime()||!1,rangeUnderflow:this.computedValue&&this.computedValue.getTime()<this.$props.min.getTime()||!1,valid:d,valueMissing:this.computedValue===null}},getDateInputText(){return this.computedValue?!0:this._dateInput?this._dateInput._element.value:""},focus(){const e=this.dateInputElement();e&&e.focus()},setShow(e){this.computedShow!==e&&(this.currentShow=e,this.$emit(e?"open":"close",{component:this}))},handleReject(){this.setShow(!1)},handleValueChange(e){this.currentValue=r.cloneDate(e.value||void 0),this.valueDuringOnChange=e.value,this.showDuringOnChange=!1,this.shouldFocusDateInput=!0,this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:e.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,valueAsDate:this.computedValue}}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},handleFocus(e){this.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",{event:e})},timeSelectorBlur(e){this.$emit("blur",{event:e}),clearTimeout(this._blurTimeout),this.createBlurTimeout()},timeSelectorFocus(){clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{this.isFocused=!1;const e=document.activeElement&&document.activeElement.closest(`#${this._popupId}`);this._dateInput&&t.canUseDOM&&document.activeElement!==this._dateInput.element()&&!e&&this.setShow(!1)},200)},handleDateIconClick(e){this.$props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.computedShow),this.$emit("iconclick",e))},handleIconMouseDown(e){e.preventDefault()},handleKeyDown(e){const{altKey:i,keyCode:a}=e;if(a===t.Keys.tab&&this._dateInput&&e.target!==this._dateInput._element){e.preventDefault(),this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}if(a===t.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(a===t.Keys.up||a===t.Keys.down)&&(e.preventDefault(),e.stopPropagation(),this.shouldFocusDateInput=a===t.Keys.up,this.setShow(a===t.Keys.down)),this.$emit("keydown",e)},dateInputElement(){return this._dateInput&&this._dateInput.$el||this._wrapper&&this._wrapper.querySelector(".k-dateinput-wrap > input.k-input")}}});exports.DateTimePicker=ne;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),G=require("@progress/kendo-vue-labels"),J=require("@progress/kendo-vue-buttons"),Q=require("@progress/kendo-vue-popup"),r=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),W=require("../dateinput/DateInput.js"),Y=require("../package-metadata.js"),u=require("../utils.js"),o=require("../messages/main.js"),b=require("@progress/kendo-vue-intl"),Z=require("./DateTimeSelector.js"),ee=require("../timepicker/utils.js"),T=require("../defaults.js"),te=require("../dateinput/utils.js"),ie=require("@progress/kendo-svg-icons");function m(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const ne=n.defineComponent({name:"KendoDateTimePicker",emits:{changemodel:e=>!0,"update:modelValue":e=>!0,iconclick:e=>!0,change:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},props:{modelValue:{type:Date,default:void 0},defaultShow:{type:Boolean,default:!1},defaultValue:{type:Date,default:null},disabled:{type:Boolean,default:!1},dateInput:{type:[String,Object,Function],default:function(){}},popup:{type:[String,Object,Function],default:function(){}},calendar:{type:[String,Object,Function],default:function(){}},focusedDate:Date,format:{type:[String,Object],default:function(){return"g"}},formatPlaceholder:{type:[String,Object],default:function(){return te.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["none","small","medium","large"].includes(e)}},id:String,ariaLabelledBy:String,ariaDescribedBy:String,min:{type:Date,default:function(){return u.MIN_DATE}},max:{type:Date,default:function(){return u.MAX_DATE}},maxTime:{type:Date,default:function(){return r.cloneDate(u.MAX_TIME)}},minTime:{type:Date,default:function(){return r.cloneDate(T.MIN_TIME)}},name:String,label:String,placeholder:String,popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},tabIndex:{type:Number,default:0},title:{type:String,default:function(){return""}},steps:{type:Object,default:function(){return{}}},value:Date,weekNumber:{type:Boolean,default:!1},width:String,validationMessage:String,required:{type:Boolean,default:!1},validityStyles:{type:Boolean,default:!0},validate:Boolean,valid:{type:Boolean,default:void 0},cancelButton:{type:Boolean,default:!0},inputAttributes:Object},model:{event:"changemodel"},created(){this._anchor=t.guid(),this._popupId="popup"+t.guid(),this._wrapper=null,this._dateInput=null,this._dateTimeSelector=null,t.validatePackage(Y.packageMetadata),this.currentValue=this.$props.defaultValue,this.currentShow=this.$props.defaultShow},inject:{kendoLocalizationService:{default:null}},data(){return{currentValue:null,currentShow:!1,valueDuringOnChange:void 0,showDuringOnChange:void 0,shouldFocusDateInput:!1,isFocused:!1}},computed:{computedValue(){const e=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentValue;return e!==null?r.cloneDate(e):null},computedShow(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.$props.show!==void 0?this.$props.show:this.currentShow}},watch:{show:function(e,i){this._oldShow=i},currentShow:function(e,i){this._oldShow=i}},mounted(){this.computedShow&&this.$forceUpdate();const e=this.dateInputElement();this._dateTimeSelector=this.$refs.dateTimeSelector,this._wrapper=this.kendoAnchorRef,this._dateInput=this.dateInputRef,e&&e.setAttribute("aria-haspopup","true")},updated(){const e=this.dateInputElement();this._dateTimeSelector=this.$refs.dateTimeSelector,this._wrapper=this.kendoAnchorRef,this._dateTimeSelector&&this.computedShow&&!this._oldShow&&this._dateTimeSelector.focus({preventScroll:!0}),e&&!this.computedShow&&this.shouldFocusDateInput&&this._dateInput.focus({preventScroll:!0}),this.shouldFocusDateInput=!1},setup(){const e=n.ref(null),i=n.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:i}},render(){const e=t.getDefaultSlots(this),{disabled:i,tabIndex:a,title:d,id:f,format:g,formatPlaceholder:$,min:k,max:V,weekNumber:_,focusedDate:M,width:S,name:B,steps:v,placeholder:C,validationMessage:q,required:F,validityStyles:O,cancelButton:R,minTime:w,maxTime:D,ariaLabelledBy:ae,ariaDescribedBy:oe,size:p,fillMode:I,rounded:c,inputAttributes:x}=this.$props,{popupClass:E,appendTo:A,animate:j}=this.$props.popupSettings,y=!this.$props.validityStyles||this.validity().valid,N=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,P=n.createVNode(W.DateInput,{ref:h=>{this.dateInputRef=h},placeholder:C,disabled:i,format:g,formatPlaceholder:$,id:f,max:V,min:k,minTime:w,maxTime:D,name:B,size:null,rounded:null,fillMode:null,onChange:this.handleValueChange,required:F,steps:v,tabIndex:this.computedShow?-1:a,title:d,valid:this.validity().valid,validationMessage:q,validityStyles:O,value:this.computedValue,ariaHasPopup:"dialog",ariaExpanded:this.computedShow,ariaRole:"combobox",ariaControls:this.computedShow?this._popupId:void 0,inputAttributes:x},m(e)?e:{default:()=>[e]}),L=t.getTemplate.call(this,{h:n.h,template:N,defaultRendering:P}),K=this.$props.calendar?t.templateRendering.call(this,this.$props.calendar,t.getListeners.call(this)):void 0,s=n.createVNode(Z.DateTimeSelector,{ref:"dateTimeSelector",cancelButton:R,value:this.computedValue,onChange:this.handleValueChange,onReject:this.handleReject,disabled:i,weekNumber:_,min:this.$props.min,max:this.$props.max,minTime:w,maxTime:D,focusedDate:M,format:g,calendar:K,steps:v,onFocus:this.timeSelectorFocus,onBlur:this.timeSelectorBlur,onKeydown:this.handleKeyDown},null),z=t.classNames("k-datetime-container k-reset",E),U=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,X=n.createVNode(Q.Popup,{show:this.computedShow,anchor:this._anchor,popupClass:z,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},appendTo:A,animate:j},m(s)?s:{default:()=>[s]}),H=t.getTemplate.call(this,{h:n.h,template:U,defaultRendering:X,defaultSlots:s}),l=n.createVNode("div",{class:t.classNames("k-input","k-datetimepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-input-${I}`]:I,[`k-rounded-${t.kendoThemeMaps.roundedMap[c]||c}`]:c,"k-invalid":!y,"k-required":this.required,"k-disabled":this.$props.disabled}),ref:h=>{this.kendoAnchorRef=h},onKeydown:this.handleKeyDown,style:{width:S},onFocusin:this.handleFocus,onFocusout:this.handleBlur},[L,n.createVNode(J.Button,{type:"button",tabIndex:-1,icon:"calendar",svgIcon:ie.calendarIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleDateIconClick,title:b.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector]),rounded:null,disabled:i,class:"k-input-button","aria-controls":this._popupId,"aria-label":b.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector])},null),H]);return this.$props.label?n.createVNode(G.FloatingLabel,{label:this.$props.label,editorId:f,editorValid:y,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:S}},m(l)?l:{default:()=>[l]}):l},methods:{validity(){const e=u.isInDateRange(this.computedValue,this.$props.min,this.$props.max)&&ee.isInTimeRange(this.computedValue,this.$props.minTime||T.MIN_TIME,this.$props.maxTime||u.MAX_TIME),i=this.$props.validationMessage!==void 0,a=(!this.$props.required||this.computedValue!==null)&&e,d=this.$props.valid!==void 0?this.$props.valid:a;return{customError:i,rangeOverflow:this.computedValue&&this.$props.max.getTime()<this.computedValue.getTime()||!1,rangeUnderflow:this.computedValue&&this.computedValue.getTime()<this.$props.min.getTime()||!1,valid:d,valueMissing:this.computedValue===null}},getDateInputText(){return this.computedValue?!0:this._dateInput?this._dateInput._element.value:""},focus(){const e=this.dateInputElement();e&&e.focus()},setShow(e){this.computedShow!==e&&(this.currentShow=e,this.$emit(e?"open":"close",{component:this}))},handleReject(){this.setShow(!1)},handleValueChange(e){this.currentValue=r.cloneDate(e.value||void 0),this.valueDuringOnChange=e.value,this.showDuringOnChange=!1,this.shouldFocusDateInput=!0,this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:e.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,valueAsDate:this.computedValue}}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},handleFocus(e){this.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",{event:e})},timeSelectorBlur(e){this.$emit("blur",{event:e}),clearTimeout(this._blurTimeout),this.createBlurTimeout()},timeSelectorFocus(){clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{this.isFocused=!1;const e=document.activeElement&&document.activeElement.closest(`#${this._popupId}`);this._dateInput&&t.canUseDOM&&document.activeElement!==this._dateInput.element()&&!e&&this.setShow(!1)},200)},handleDateIconClick(e){this.$props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.computedShow),this.$emit("iconclick",e))},handleIconMouseDown(e){e.preventDefault()},handleKeyDown(e){const{altKey:i,keyCode:a}=e;if(a===t.Keys.tab&&this._dateInput&&e.target!==this._dateInput._element){e.preventDefault(),this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}if(a===t.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(a===t.Keys.up||a===t.Keys.down)&&(e.preventDefault(),e.stopPropagation(),this.shouldFocusDateInput=a===t.Keys.up,this.setShow(a===t.Keys.down)),this.$emit("keydown",e)},dateInputElement(){return this._dateInput&&this._dateInput.$el||this._wrapper&&this._wrapper.querySelector(".k-dateinput-wrap > input.k-input")}}});exports.DateTimePicker=ne;

package/datetimepicker/DateTimePicker.mjs

@@ -5,12 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as ie, createVNode as n, h as $, ref as ne, inject as ae, isVNode as oe } from "vue";
+import { defineComponent as ie, createVNode as n, h as $, ref as ne, inject as oe, isVNode as ae } from "vue";
 import { FloatingLabel as ue } from "@progress/kendo-vue-labels";
 import { Button as se } from "@progress/kendo-vue-buttons";
 import { Popup as le } from "@progress/kendo-vue-popup";
 import { cloneDate as s } from "@progress/kendo-date-math";
-import { Keys as a, canUseDOM as re, getDefaultSlots as de, templateRendering as c, getListeners as m, getTemplate as T, classNames as _, kendoThemeMaps as k, guid as V, validatePackage as pe } from "@progress/kendo-vue-common";
+import { Keys as o, canUseDOM as re, getDefaultSlots as de, templateRendering as c, getListeners as m, getTemplate as T, classNames as _, kendoThemeMaps as k, guid as V, validatePackage as pe } from "@progress/kendo-vue-common";
 import { DateInput as he } from "../dateinput/DateInput.mjs";
 import { packageMetadata as ce } from "../package-metadata.mjs";
 import { isInDateRange as me, MAX_TIME as B, MAX_DATE as fe, MIN_DATE as ge } from "../utils.mjs";
@@ -22,7 +22,7 @@ import { MIN_TIME as M } from "../defaults.mjs";
 import { defaultFormatPlaceholder as we } from "../dateinput/utils.mjs";
 import { calendarIcon as Ie } from "@progress/kendo-svg-icons";
 function f(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !oe(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ae(e);
 }
 const Pe = /* @__PURE__ */ ie({
   name: "KendoDateTimePicker",
@@ -223,7 +223,7 @@ const Pe = /* @__PURE__ */ ie({
   mounted() {
     this.computedShow && this.$forceUpdate();
     const e = this.dateInputElement();
-    this._dateTimeSelector = this.$refs.dateTimeSelector, this._wrapper = this.kendoAnchorRef, this._dateInput = this.dateInputRef, e && e.setAttribute("aria-haspopup", "dialog");
+    this._dateTimeSelector = this.$refs.dateTimeSelector, this._wrapper = this.kendoAnchorRef, this._dateInput = this.dateInputRef, e && e.setAttribute("aria-haspopup", "true");
   },
   updated() {
     const e = this.dateInputElement();
@@ -234,7 +234,7 @@ const Pe = /* @__PURE__ */ ie({
     }), this.shouldFocusDateInput = !1;
   },
   setup() {
-    const e = ne(null), t = ae("kendoLocalizationService", {});
+    const e = ne(null), t = oe("kendoLocalizationService", {});
     return {
       kendoAnchorRef: e,
       kendoLocalizationService: t
@@ -301,7 +301,7 @@ const Pe = /* @__PURE__ */ ie({
       ariaHasPopup: "dialog",
       ariaExpanded: this.computedShow,
       ariaRole: "combobox",
-      ariaControls: this._popupId,
+      ariaControls: this.computedShow ? this._popupId : void 0,
       inputAttributes: q
     }, f(e) ? e : {
       default: () => [e]
@@ -309,7 +309,7 @@ const Pe = /* @__PURE__ */ ie({
       h: $,
       template: G,
       defaultRendering: J
-    }), W = this.$props.calendar ? c.call(this, this.$props.calendar, m.call(this)) : void 0, o = n(Se, {
+    }), W = this.$props.calendar ? c.call(this, this.$props.calendar, m.call(this)) : void 0, a = n(Se, {
       ref: "dateTimeSelector",
       cancelButton: K,
       value: this.computedValue,
@@ -328,7 +328,7 @@ const Pe = /* @__PURE__ */ ie({
       onFocus: this.timeSelectorFocus,
       onBlur: this.timeSelectorBlur,
       onKeydown: this.handleKeyDown
-    }, null), Y = _("k-calendar-container k-datetime-container k-reset", U), Z = this.$props.popup ? c.call(this, this.$props.popup, m.call(this)) : void 0, ee = n(le, {
+    }, null), Y = _("k-datetime-container k-reset", U), Z = this.$props.popup ? c.call(this, this.$props.popup, m.call(this)) : void 0, ee = n(le, {
       show: this.computedShow,
       anchor: this._anchor,
       popupClass: Y,
@@ -343,13 +343,13 @@ const Pe = /* @__PURE__ */ ie({
       },
       appendTo: X,
       animate: H
-    }, f(o) ? o : {
-      default: () => [o]
+    }, f(a) ? a : {
+      default: () => [a]
     }), te = T.call(this, {
       h: $,
       template: Z,
       defaultRendering: ee,
-      defaultSlots: o
+      defaultSlots: a
     }), u = n("div", {
       class: _("k-input", "k-datetimepicker", {
         [`k-input-${k.sizeMap[d] || d}`]: d,
@@ -471,15 +471,15 @@ const Pe = /* @__PURE__ */ ie({
         altKey: t,
         keyCode: i
       } = e;
-      if (i === a.tab && this._dateInput && e.target !== this._dateInput._element) {
+      if (i === o.tab && this._dateInput && e.target !== this._dateInput._element) {
         e.preventDefault(), this.$data.shouldFocusDateInput = !0, this.setShow(!1);
         return;
       }
-      if (i === a.esc) {
+      if (i === o.esc) {
         this.shouldFocusDateInput = !0, this.setShow(!1);
         return;
       }
-      t && (i === a.up || i === a.down) && (e.preventDefault(), e.stopPropagation(), this.shouldFocusDateInput = i === a.up, this.setShow(i === a.down)), this.$emit("keydown", e);
+      t && (i === o.up || i === o.down) && (e.preventDefault(), e.stopPropagation(), this.shouldFocusDateInput = i === o.up, this.setShow(i === o.down)), this.$emit("keydown", e);
     },
     dateInputElement() {
       return this._dateInput && this._dateInput.$el || this._wrapper && this._wrapper.querySelector(".k-dateinput-wrap > input.k-input");

package/datetimepicker/DateTimeSelector.d.ts

@@ -129,8 +129,7 @@ declare const DateTimeSelector: import('vue').DefineComponent<import('vue').Extr
     handleNowClick(event: any): void;
     handleCalendarValueChange(event: CalendarChangeEvent): void;
     handleTimeListContainerChange(candidate: Date): void;
-    handleDateClick(event: any): void;
-    handleTimeClick(event: any): void;
+    handleTabChange(value: string): void;
     handleKeyDown(event: any): void;
     handleTimePartMount(value: Date): void;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{

package/datetimepicker/DateTimeSelector.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),C=require("@progress/kendo-vue-intl"),i=require("../messages/main.js"),c=require("@progress/kendo-vue-buttons"),N=require("../calendar/components/Calendar.js"),$=require("../timepicker/TimePart.js"),n=require("../utils.js"),B=require("@progress/kendo-date-math"),r=require("@progress/kendo-vue-common"),p=require("../defaults.js"),f=require("../timepicker/utils.js");function d(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!a.isVNode(e)}const M=a.defineComponent({name:"KendoDateTimeSelector",props:{value:Date,disabled:{type:Boolean,default:!1},cancelButton:{type:Boolean,default:!0},min:{type:Date,default:n.MIN_DATE},max:{type:Date,default:n.MAX_DATE},maxTime:{type:Date,default:function(){return r.cloneDate(n.MAX_TIME)}},minTime:{type:Date,default:function(){return r.cloneDate(n.MIN_TIME)}},weekNumber:{type:Boolean,default:!1},steps:{type:Object,default:function(){return{}}},focusedDate:Date,format:[String,Object],calendar:Object,onChange:Function,onReject:Function,onFocus:Function,onBlur:Function,onKeydown:Function},created(){this._calendarWrap=null,this.currentTab="date",this.dateValue=this.$props.value,this.timeValue=this.$props.value||p.MIDNIGHT_DATE},inject:{kendoLocalizationService:{default:null}},data(){return{currentTab:null,dateValue:null,timeValue:Date}},computed:{hasDateValue(){return this.dateValue!==null},computedMinTime(){return this.$props.minTime!==void 0?this.$props.minTime:this.normalizeRange(this.$props.min,this.dateValue)},computedMaxTime(){return this.$props.maxTime!==void 0?this.$props.maxTime:this.normalizeRange(this.$props.max,this.dateValue)}},mounted(){this._acceptButton=this.$refs.acceptButton,this._calendar=this.$refs.calendar,this._calendarWrap=this.$refs.calendarWrap,this._cancelButton=this.$refs.cancelButton,this._timePart=this.$refs.timePart,this.focus({preventScroll:!0})},updated(){this.shouldFocusPart&&this.focus({preventScroll:!0}),this.shouldFocusPart=!1},setup(){const e=a.ref(null),t=a.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:t}},render(){const{disabled:e,cancelButton:t,min:s,max:g,weekNumber:T,focusedDate:b,format:k,steps:V}=this.$props,v=r.classNames({"k-date-tab":this.currentTab==="date","k-time-tab":this.currentTab==="time","k-disabled":e},"k-datetime-wrap"),u=C.provideLocalizationService(this),h=u.toLanguageString(i.date,i.messages[i.date]),m=u.toLanguageString(i.time,i.messages[i.time]),o=u.toLanguageString(i.dateTimePickerCancel,i.messages[i.dateTimePickerCancel]),l=u.toLanguageString(i.dateTimePickerSet,i.messages[i.dateTimePickerSet]),D=a.createVNode(N.Calendar,{ref:"calendar",min:s,max:g,weekNumber:T,focusedDate:b,disabled:e||this.currentTab!=="date",value:this.dateValue,onChange:this.handleCalendarValueChange,onFocus:this.handleFocus,onBlur:this.handleBlur},null),y=r.getTemplate.call(this,{h:a.h,template:this.$props.calendar,defaultRendering:D});return a.createVNode("div",{onKeydown:this.handleKeyDown,class:v,tabindex:-1},[a.createVNode("div",{class:"k-datetime-buttongroup"},[a.createVNode(c.ButtonGroup,{width:"100%"},{default:()=>[a.createVNode(c.Button,{type:"button",selected:this.currentTab==="date",togglable:!0,onClick:this.handleDateClick},d(h)?h:{default:()=>[h]}),a.createVNode(c.Button,{type:"button",selected:this.currentTab==="time",togglable:!0,onClick:this.handleTimeClick},d(m)?m:{default:()=>[m]})]})]),a.createVNode("div",{class:"k-datetime-selector"},[a.createVNode("div",{class:"k-datetime-calendar-wrap",ref:"calendarWrap"},[y]),a.createVNode("div",{class:"k-datetime-time-wrap"},[a.createVNode($.TimePart,{key:1,onNowclick:this.handleNowClick,disabled:e||this.currentTab!=="time",ref:"timePart",min:this.computedMinTime||n.MIN_TIME,max:this.computedMaxTime||n.MAX_TIME,value:this.timeValue,format:k,steps:V,onChange:this.handleTimeListContainerChange,onFocus:this.handleFocus,onBlur:this.handleBlur},null)])]),a.createVNode("div",{class:"k-datetime-footer k-actions k-actions-stretched"},[t&&a.createVNode(c.Button,{type:"button",ref:"cancelButton",class:"k-time-cancel",onClick:this.handleReject,title:o,"aria-label":o},d(o)?o:{default:()=>[o]}),a.createVNode(c.Button,{type:"button",ref:"acceptButton",disabled:!this.hasDateValue,themeColor:"primary",class:"k-time-accept",onClick:this.handleAccept,title:l,"aria-label":l},d(l)?l:{default:()=>[l]})])])},methods:{handleBlur(e){this.$emit("blur",e)},handleFocus(e){this.$emit("focus",e)},focus(e){this.$nextTick(()=>{this.currentTab==="time"&&this._timePart&&this._timePart.focus(e);const t=this.calendarElement();this.currentTab==="date"&&t&&t.focus(e)})},calendarElement(){return this._calendar&&this._calendar.$el?this._calendar:null},normalizeRange(e,t){return B.isEqualDate(e,t||n.getToday())?e:null},hasActiveButton(){return this._acceptButton?r.canUseDOM&&(document.activeElement===this._acceptButton.$el||document.activeElement===this._cancelButton.$el):!1},mergeTime(e,t){return e&&t?n.setTime(t,e):t},mergeDate(e,t){return e?n.setTime(e||n.getToday(),t):t},move(e){if(e==="right"&&this.currentTab==="time"||e==="left"&&this.currentTab==="date")return;const t=e==="left"?"date":"time";this.shouldFocusPart=!0,this.currentTab=t},handleReject(e){this.dateValue=this.$props.value,this.timeValue=this.$props.value||p.MIDNIGHT_DATE;const t=this.mergeDate(this.$props.value,this.$props.value||p.MIDNIGHT_DATE),s={event:e,target:this,value:t};this.$emit("reject",s)},handleAccept(e,t){if(!this.dateValue||!this.timeValue||!this.hasDateValue)return;const s=this.mergeDate(this.dateValue,t||this.timeValue);this.$emit("change",{event:e,value:s,target:this})},handleNowClick(e){this.timeValue=f.getNow(),this.handleAccept(e,f.getNow())},handleCalendarValueChange(e){e.event.stopPropagation(),this.dateValue=e.value,this.currentTab="time",this.shouldFocusPart=!0},handleTimeListContainerChange(e){this.timeValue=e},handleDateClick(e){e.stopPropagation(),this.move("left")},handleTimeClick(e){e.stopPropagation(),this.move("right")},handleKeyDown(e){const{keyCode:t,altKey:s}=e;switch(this.$emit("keydown",e),t){case r.Keys.enter:!this.hasActiveButton()&&this.hasDateValue&&this.handleAccept(e);return;case r.Keys.left:if(!s)return;this.move("left");return;case r.Keys.right:if(!s)return;this.move("right");return;default:return}},handleTimePartMount(e){this.timeValue=e}}});exports.DateTimeSelector=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),$=require("@progress/kendo-vue-intl"),i=require("../messages/main.js"),c=require("@progress/kendo-vue-buttons"),C=require("../calendar/components/Calendar.js"),N=require("../timepicker/TimePart.js"),n=require("../utils.js"),M=require("@progress/kendo-date-math"),r=require("@progress/kendo-vue-common"),h=require("../defaults.js"),d=require("../timepicker/utils.js");function m(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!a.isVNode(e)}const B=a.defineComponent({name:"KendoDateTimeSelector",props:{value:Date,disabled:{type:Boolean,default:!1},cancelButton:{type:Boolean,default:!0},min:{type:Date,default:n.MIN_DATE},max:{type:Date,default:n.MAX_DATE},maxTime:{type:Date,default:function(){return r.cloneDate(n.MAX_TIME)}},minTime:{type:Date,default:function(){return r.cloneDate(n.MIN_TIME)}},weekNumber:{type:Boolean,default:!1},steps:{type:Object,default:function(){return{}}},focusedDate:Date,format:[String,Object],calendar:Object,onChange:Function,onReject:Function,onFocus:Function,onBlur:Function,onKeydown:Function},created(){this._calendarWrap=null,this.currentTab="date",this.dateValue=this.$props.value,this.timeValue=this.$props.value||h.MIDNIGHT_DATE},inject:{kendoLocalizationService:{default:null}},data(){return{currentTab:null,dateValue:null,timeValue:Date}},computed:{hasDateValue(){return this.dateValue!==null},computedMinTime(){return this.$props.minTime!==void 0?this.$props.minTime:this.normalizeRange(this.$props.min,this.dateValue)},computedMaxTime(){return this.$props.maxTime!==void 0?this.$props.maxTime:this.normalizeRange(this.$props.max,this.dateValue)}},mounted(){this._acceptButton=this.$refs.acceptButton,this._calendar=this.$refs.calendar,this._calendarWrap=this.$refs.calendarWrap,this._cancelButton=this.$refs.cancelButton,this._timePart=this.$refs.timePart,this.focus({preventScroll:!0})},updated(){this.shouldFocusPart&&this.focus({preventScroll:!0}),this.shouldFocusPart=!1},setup(){const e=a.ref(null),t=a.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:t}},render(){const{disabled:e,cancelButton:t,min:s,max:p,weekNumber:f,focusedDate:g,format:T,steps:b}=this.$props,v=r.classNames({"k-date-tab":this.currentTab==="date","k-time-tab":this.currentTab==="time","k-disabled":e},"k-datetime-wrap"),u=$.provideLocalizationService(this),V=u.toLanguageString(i.date,i.messages[i.date]),k=u.toLanguageString(i.time,i.messages[i.time]),l=u.toLanguageString(i.dateTimePickerCancel,i.messages[i.dateTimePickerCancel]),o=u.toLanguageString(i.dateTimePickerSet,i.messages[i.dateTimePickerSet]),D=a.createVNode(C.Calendar,{ref:"calendar",min:s,max:p,weekNumber:f,focusedDate:g,disabled:e||this.currentTab!=="date",value:this.dateValue,onChange:this.handleCalendarValueChange,onFocus:this.handleFocus,onBlur:this.handleBlur},null),y=r.getTemplate.call(this,{h:a.h,template:this.$props.calendar,defaultRendering:D});return a.createVNode("div",{onKeydown:this.handleKeyDown,class:v,tabindex:-1},[a.createVNode("div",{class:"k-datetime-buttongroup"},[a.createVNode(c.SegmentedControl,{layoutMode:"stretch",value:this.currentTab,items:[{value:"date",text:V},{value:"time",text:k}],onChange:this.handleTabChange},null)]),a.createVNode("div",{class:"k-datetime-selector"},[a.createVNode("div",{class:"k-datetime-calendar-wrap",ref:"calendarWrap"},[y]),a.createVNode("div",{class:"k-datetime-time-wrap"},[a.createVNode(N.TimePart,{key:1,onNowclick:this.handleNowClick,disabled:e||this.currentTab!=="time",ref:"timePart",min:this.computedMinTime||n.MIN_TIME,max:this.computedMaxTime||n.MAX_TIME,value:this.timeValue,format:T,steps:b,onChange:this.handleTimeListContainerChange,onFocus:this.handleFocus,onBlur:this.handleBlur},null)])]),a.createVNode("div",{class:"k-datetime-footer k-actions k-actions-stretched"},[t&&a.createVNode(c.Button,{type:"button",ref:"cancelButton",class:"k-time-cancel",onClick:this.handleReject,title:l,"aria-label":l},m(l)?l:{default:()=>[l]}),a.createVNode(c.Button,{type:"button",ref:"acceptButton",disabled:!this.hasDateValue,themeColor:"primary",class:"k-time-accept",onClick:this.handleAccept,title:o,"aria-label":o},m(o)?o:{default:()=>[o]})])])},methods:{handleBlur(e){this.$emit("blur",e)},handleFocus(e){this.$emit("focus",e)},focus(e){this.$nextTick(()=>{this.currentTab==="time"&&this._timePart&&this._timePart.focus(e);const t=this.calendarElement();this.currentTab==="date"&&t&&t.focus(e)})},calendarElement(){return this._calendar&&this._calendar.$el?this._calendar:null},normalizeRange(e,t){return M.isEqualDate(e,t||n.getToday())?e:null},hasActiveButton(){return this._acceptButton?r.canUseDOM&&(document.activeElement===this._acceptButton.$el||document.activeElement===this._cancelButton.$el):!1},mergeTime(e,t){return e&&t?n.setTime(t,e):t},mergeDate(e,t){return e?n.setTime(e||n.getToday(),t):t},move(e){if(e==="right"&&this.currentTab==="time"||e==="left"&&this.currentTab==="date")return;const t=e==="left"?"date":"time";this.shouldFocusPart=!0,this.currentTab=t},handleReject(e){this.dateValue=this.$props.value,this.timeValue=this.$props.value||h.MIDNIGHT_DATE;const t=this.mergeDate(this.$props.value,this.$props.value||h.MIDNIGHT_DATE),s={event:e,target:this,value:t};this.$emit("reject",s)},handleAccept(e,t){if(!this.dateValue||!this.timeValue||!this.hasDateValue)return;const s=this.mergeDate(this.dateValue,t||this.timeValue);this.$emit("change",{event:e,value:s,target:this})},handleNowClick(e){this.timeValue=d.getNow(),this.handleAccept(e,d.getNow())},handleCalendarValueChange(e){e.event.stopPropagation(),this.dateValue=e.value,this.currentTab="time",this.shouldFocusPart=!0},handleTimeListContainerChange(e){this.timeValue=e},handleTabChange(e){e==="date"?this.move("left"):e==="time"&&this.move("right")},handleKeyDown(e){const{keyCode:t,altKey:s}=e;switch(this.$emit("keydown",e),t){case r.Keys.enter:!this.hasActiveButton()&&this.hasDateValue&&this.handleAccept(e);return;case r.Keys.left:if(!s)return;this.move("left");return;case r.Keys.right:if(!s)return;this.move("right");return;default:return}},handleTimePartMount(e){this.timeValue=e}}});exports.DateTimeSelector=B;