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

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;

package/datetimepicker/DateTimeSelector.mjs

@@ -5,18 +5,18 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as F, createVNode as a, h as x, ref as N, inject as j, isVNode as A } from "vue";
+import { defineComponent as F, createVNode as a, h as P, ref as N, inject as j, isVNode as A } from "vue";
 import { provideLocalizationService as E } from "@progress/kendo-vue-intl";
-import { date as p, messages as l, time as f, dateTimePickerCancel as g, dateTimePickerSet as T } from "../messages/main.mjs";
-import { ButtonGroup as L, Button as o } from "@progress/kendo-vue-buttons";
+import { date as c, messages as l, time as h, dateTimePickerCancel as m, dateTimePickerSet as d } from "../messages/main.mjs";
+import { SegmentedControl as L, Button as p } from "@progress/kendo-vue-buttons";
 import { Calendar as R } from "../calendar/components/Calendar.mjs";
 import { TimePart as z } from "../timepicker/TimePart.mjs";
-import { MAX_DATE as K, MIN_DATE as I, setTime as b, getToday as k, MAX_TIME as v, MIN_TIME as D } from "../utils.mjs";
+import { MAX_DATE as K, MIN_DATE as I, setTime as f, getToday as g, MAX_TIME as T, MIN_TIME as b } from "../utils.mjs";
 import { isEqualDate as O } from "@progress/kendo-date-math";
-import { Keys as d, canUseDOM as W, classNames as G, getTemplate as X, cloneDate as $ } from "@progress/kendo-vue-common";
-import { MIDNIGHT_DATE as m } from "../defaults.mjs";
-import { getNow as C } from "../timepicker/utils.mjs";
-function u(e) {
+import { Keys as o, canUseDOM as W, classNames as X, getTemplate as q, cloneDate as v } from "@progress/kendo-vue-common";
+import { MIDNIGHT_DATE as u } from "../defaults.mjs";
+import { getNow as k } from "../timepicker/utils.mjs";
+function D(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !A(e);
 }
 const ne = /* @__PURE__ */ F({
@@ -42,13 +42,13 @@ const ne = /* @__PURE__ */ F({
     maxTime: {
       type: Date,
       default: function() {
-        return $(v);
+        return v(T);
       }
     },
     minTime: {
       type: Date,
       default: function() {
-        return $(D);
+        return v(b);
       }
     },
     weekNumber: {
@@ -71,7 +71,7 @@ const ne = /* @__PURE__ */ F({
     onKeydown: Function
   },
   created() {
-    this._calendarWrap = null, this.currentTab = "date", this.dateValue = this.$props.value, this.timeValue = this.$props.value || m;
+    this._calendarWrap = null, this.currentTab = "date", this.dateValue = this.$props.value, this.timeValue = this.$props.value || u;
   },
   inject: {
     kendoLocalizationService: {
@@ -118,87 +118,80 @@ const ne = /* @__PURE__ */ F({
       disabled: e,
       cancelButton: t,
       min: i,
-      max: V,
-      weekNumber: y,
-      focusedDate: B,
-      format: _,
-      steps: w
-    } = this.$props, M = G({
+      max: $,
+      weekNumber: V,
+      focusedDate: C,
+      format: y,
+      steps: B
+    } = this.$props, _ = X({
       "k-date-tab": this.currentTab === "date",
       "k-time-tab": this.currentTab === "time",
       "k-disabled": e
-    }, "k-datetime-wrap"), r = E(this), c = r.toLanguageString(p, l[p]), h = r.toLanguageString(f, l[f]), n = r.toLanguageString(g, l[g]), s = r.toLanguageString(T, l[T]), P = a(R, {
+    }, "k-datetime-wrap"), r = E(this), M = r.toLanguageString(c, l[c]), S = r.toLanguageString(h, l[h]), n = r.toLanguageString(m, l[m]), s = r.toLanguageString(d, l[d]), w = a(R, {
       ref: "calendar",
       min: i,
-      max: V,
-      weekNumber: y,
-      focusedDate: B,
+      max: $,
+      weekNumber: V,
+      focusedDate: C,
       disabled: e || this.currentTab !== "date",
       value: this.dateValue,
       onChange: this.handleCalendarValueChange,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur
-    }, null), S = X.call(this, {
-      h: x,
+    }, null), x = q.call(this, {
+      h: P,
       template: this.$props.calendar,
-      defaultRendering: P
+      defaultRendering: w
     });
     return a("div", {
       onKeydown: this.handleKeyDown,
-      class: M,
+      class: _,
       tabindex: -1
     }, [a("div", {
       class: "k-datetime-buttongroup"
     }, [a(L, {
-      width: "100%"
-    }, {
-      default: () => [a(o, {
-        type: "button",
-        selected: this.currentTab === "date",
-        togglable: !0,
-        onClick: this.handleDateClick
-      }, u(c) ? c : {
-        default: () => [c]
-      }), a(o, {
-        type: "button",
-        selected: this.currentTab === "time",
-        togglable: !0,
-        onClick: this.handleTimeClick
-      }, u(h) ? h : {
-        default: () => [h]
-      })]
-    })]), a("div", {
+      layoutMode: "stretch",
+      value: this.currentTab,
+      items: [{
+        value: "date",
+        text: M
+      }, {
+        value: "time",
+        text: S
+      }],
+      onChange: this.handleTabChange
+    }, null)]), a("div", {
       class: "k-datetime-selector"
     }, [a("div", {
       class: "k-datetime-calendar-wrap",
       ref: "calendarWrap"
-    }, [S]), a("div", {
+    }, [x]), a("div", {
       class: "k-datetime-time-wrap"
     }, [a(z, {
       key: 1,
       onNowclick: this.handleNowClick,
       disabled: e || this.currentTab !== "time",
       ref: "timePart",
-      min: this.computedMinTime || D,
-      max: this.computedMaxTime || v,
+      min: this.computedMinTime || b,
+      max: this.computedMaxTime || T,
       value: this.timeValue,
-      format: _,
-      steps: w,
+      format: y,
+      steps: B,
       onChange: this.handleTimeListContainerChange,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur
     }, null)])]), a("div", {
       class: "k-datetime-footer k-actions k-actions-stretched"
-    }, [t && a(o, {
+    }, [t && a(p, {
       type: "button",
       ref: "cancelButton",
       class: "k-time-cancel",
       onClick: this.handleReject,
       title: n,
       "aria-label": n
-    }, u(n) ? n : {
+    }, D(n) ? n : {
       default: () => [n]
-    }), a(o, {
+    }), a(p, {
       type: "button",
       ref: "acceptButton",
       disabled: !this.hasDateValue,
@@ -207,7 +200,7 @@ const ne = /* @__PURE__ */ F({
       onClick: this.handleAccept,
       title: s,
       "aria-label": s
-    }, u(s) ? s : {
+    }, D(s) ? s : {
       default: () => [s]
     })])]);
   },
@@ -229,16 +222,16 @@ const ne = /* @__PURE__ */ F({
       return this._calendar && this._calendar.$el ? this._calendar : null;
     },
     normalizeRange(e, t) {
-      return O(e, t || k()) ? e : null;
+      return O(e, t || g()) ? e : null;
     },
     hasActiveButton() {
       return this._acceptButton ? W && (document.activeElement === this._acceptButton.$el || document.activeElement === this._cancelButton.$el) : !1;
     },
     mergeTime(e, t) {
-      return e && t ? b(t, e) : t;
+      return e && t ? f(t, e) : t;
     },
     mergeDate(e, t) {
-      return e ? b(e || k(), t) : t;
+      return e ? f(e || g(), t) : t;
     },
     move(e) {
       if (e === "right" && this.currentTab === "time" || e === "left" && this.currentTab === "date")
@@ -247,8 +240,8 @@ const ne = /* @__PURE__ */ F({
       this.shouldFocusPart = !0, this.currentTab = t;
     },
     handleReject(e) {
-      this.dateValue = this.$props.value, this.timeValue = this.$props.value || m;
-      const t = this.mergeDate(this.$props.value, this.$props.value || m), i = {
+      this.dateValue = this.$props.value, this.timeValue = this.$props.value || u;
+      const t = this.mergeDate(this.$props.value, this.$props.value || u), i = {
         event: e,
         target: this,
         value: t
@@ -266,7 +259,7 @@ const ne = /* @__PURE__ */ F({
       });
     },
     handleNowClick(e) {
-      this.timeValue = C(), this.handleAccept(e, C());
+      this.timeValue = k(), this.handleAccept(e, k());
     },
     handleCalendarValueChange(e) {
       e.event.stopPropagation(), this.dateValue = e.value, this.currentTab = "time", this.shouldFocusPart = !0;
@@ -274,11 +267,8 @@ const ne = /* @__PURE__ */ F({
     handleTimeListContainerChange(e) {
       this.timeValue = e;
     },
-    handleDateClick(e) {
-      e.stopPropagation(), this.move("left");
-    },
-    handleTimeClick(e) {
-      e.stopPropagation(), this.move("right");
+    handleTabChange(e) {
+      e === "date" ? this.move("left") : e === "time" && this.move("right");
     },
     handleKeyDown(e) {
       const {
@@ -286,15 +276,15 @@ const ne = /* @__PURE__ */ F({
         altKey: i
       } = e;
       switch (this.$emit("keydown", e), t) {
-        case d.enter:
+        case o.enter:
           !this.hasActiveButton() && this.hasDateValue && this.handleAccept(e);
           return;
-        case d.left:
+        case o.left:
           if (!i)
             return;
           this.move("left");
           return;
-        case d.right:
+        case o.right:
           if (!i)
             return;
           this.move("right");