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

package/datepicker/DatePicker.mjs

@@ -5,23 +5,23 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as ie, ref as _, inject as oe, createVNode as n, h as s, isVNode as le } from "vue";
+import { defineComponent as oe, ref as _, inject as le, createVNode as n, h as s, isVNode as ue } from "vue";
 import { calendarIcon as k } from "@progress/kendo-svg-icons";
-import { Popup as ue } from "@progress/kendo-vue-popup";
-import { cloneDate as d, getDate as se } from "@progress/kendo-date-math";
-import { validatePackage as de, guid as V, getRef as w, canUseDOM as re, Keys as i, getDefaultSlots as he, classNames as C, templateRendering as r, getListeners as h, getTemplate as p, Icon as pe, setRef as v, kendoThemeMaps as T } from "@progress/kendo-vue-common";
-import { packageMetadata as ce } from "../package-metadata.mjs";
-import { DateInput as fe } from "../dateinput/DateInput.mjs";
-import { Calendar as me } from "../calendar/components/Calendar.mjs";
-import { MAX_DATE as ge, MIN_DATE as $e, isInDateRange as Se, setTime as we } from "../utils.mjs";
+import { Popup as se } from "@progress/kendo-vue-popup";
+import { cloneDate as d, getDate as de } from "@progress/kendo-date-math";
+import { validatePackage as re, guid as V, getRef as w, canUseDOM as he, Keys as i, getDefaultSlots as pe, classNames as C, templateRendering as r, getListeners as h, getTemplate as p, Icon as ce, setRef as v, kendoThemeMaps as T } from "@progress/kendo-vue-common";
+import { packageMetadata as fe } from "../package-metadata.mjs";
+import { DateInput as me } from "../dateinput/DateInput.mjs";
+import { Calendar as ge } from "../calendar/components/Calendar.mjs";
+import { MAX_DATE as $e, MIN_DATE as Se, isInDateRange as we, setTime as ve } from "../utils.mjs";
 import { toggleCalendar as c, messages as F } from "../messages/main.mjs";
 import { provideLocalizationService as B } from "@progress/kendo-vue-intl";
-import { ToggleButton as ve } from "./ToggleButton.mjs";
-import { FloatingLabel as De } from "@progress/kendo-vue-labels";
-function R(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !le(e);
+import { ToggleButton as De } from "./ToggleButton.mjs";
+import { FloatingLabel as be } from "@progress/kendo-vue-labels";
+function O(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ue(e);
 }
-const xe = /* @__PURE__ */ ie({
+const je = /* @__PURE__ */ oe({
   name: "DatePicker",
   inject: {
     kendoLocalizationService: {
@@ -114,13 +114,13 @@ const xe = /* @__PURE__ */ ie({
     max: {
       type: Date,
       default: function() {
-        return d(ge);
+        return d($e);
       }
     },
     min: {
       type: Date,
       default: function() {
-        return d($e);
+        return d(Se);
       }
     },
     name: String,
@@ -158,7 +158,8 @@ const xe = /* @__PURE__ */ ie({
       type: Boolean,
       default: void 0
     },
-    ariaLabel: String
+    ariaLabel: String,
+    inputAttributes: Object
   },
   data: function() {
     return {
@@ -171,7 +172,7 @@ const xe = /* @__PURE__ */ ie({
     };
   },
   created() {
-    de(ce), this._popupId = V(), this._anchor = V(), this._dateInput = null, this._calendar = null, this.$data.currentValue = this.$props.defaultValue, this.$data.currentShow = this.$props.defaultShow;
+    re(fe), this._popupId = V(), this._anchor = V(), this._dateInput = null, this._calendar = null, this.$data.currentValue = this.$props.defaultValue, this.$data.currentShow = this.$props.defaultShow;
   },
   mounted() {
     this._dateInput = w(this, "dateInput"), (this.$refs.calendar || this.calendarRef) && (this._calendar = w(this, "calendar")), this.computedShow && this.$forceUpdate();
@@ -218,11 +219,11 @@ const xe = /* @__PURE__ */ ie({
     },
     createBlurTimeout() {
       this._blurTimeout = setTimeout(() => {
-        this._dateInput && re && document.activeElement !== this._dateInput._element && this.setShow(!1);
+        this._dateInput && he && document.activeElement !== this._dateInput._element && this.setShow(!1);
       }, 200);
     },
     validity() {
-      const e = this.computedValue, t = Se(e, this.$props.min, this.$props.max), a = this.$props.validationMessage !== void 0, o = (!this.$props.required || e !== null) && t, f = this.$props.valid !== void 0 ? this.$props.valid : o;
+      const e = this.computedValue, t = we(e, this.$props.min, this.$props.max), a = this.$props.validationMessage !== void 0, o = (!this.$props.required || e !== null) && t, f = this.$props.valid !== void 0 ? this.$props.valid : o;
       return {
         customError: a,
         rangeOverflow: e && this.$props.max.getTime() < e.getTime() || !1,
@@ -243,7 +244,7 @@ const xe = /* @__PURE__ */ ie({
       }));
     },
     mergeTime(e) {
-      return this.computedValue && e ? we(e, this.computedValue) : e;
+      return this.computedValue && e ? ve(e, this.computedValue) : e;
     },
     handleInputValueChange(e) {
       this.handleValueChange(e.value, e);
@@ -292,7 +293,7 @@ const xe = /* @__PURE__ */ ie({
     }
   },
   setup() {
-    const e = _(null), t = _(null), a = oe("kendoLocalizationService", {});
+    const e = _(null), t = _(null), a = le("kendoLocalizationService", {});
     return {
       listRef: e,
       kendoAnchorRef: t,
@@ -300,32 +301,33 @@ const xe = /* @__PURE__ */ ie({
     };
   },
   render() {
-    he(this);
+    pe(this);
     const {
       disabled: e,
       tabIndex: t,
       title: a,
       id: o,
       format: f,
-      formatPlaceholder: O,
+      formatPlaceholder: R,
       min: D,
-      max: I,
+      max: b,
       weekNumber: M,
       focusedDate: x,
       width: j,
       name: L,
       validationMessage: z,
-      required: N,
-      validityStyles: P,
+      required: A,
+      validityStyles: N,
       size: m,
-      fillMode: b,
+      fillMode: I,
       rounded: g,
-      ariaLabel: A
+      ariaLabel: P,
+      inputAttributes: K
     } = this.$props, {
-      popupClass: K,
-      animate: q,
-      appendTo: E
-    } = this.$props.popupSettings, $ = this.computedShow, S = this.computedValue, U = S && se(S), y = !this.$props.validityStyles || this.validity().valid, H = C("k-calendar-container k-group k-reset", K), X = this.$props.toggleButton ? r.call(this, this.$props.toggleButton, h.call(this)) : void 0, G = n(ve, {
+      popupClass: q,
+      animate: E,
+      appendTo: U
+    } = this.$props.popupSettings, $ = this.computedShow, S = this.computedValue, H = S && de(S), y = !this.$props.validityStyles || this.validity().valid, X = C("k-calendar-container k-group k-reset", q), G = this.$props.toggleButton ? r.call(this, this.$props.toggleButton, h.call(this)) : void 0, J = n(De, {
       type: "button",
       tabIndex: -1,
       icon: "calendar",
@@ -336,67 +338,68 @@ const xe = /* @__PURE__ */ ie({
       "aria-label": B(this).toLanguageString(c, F[c]),
       rounded: null,
       class: "k-input-button"
-    }, null), J = p.call(this, {
+    }, null), Q = p.call(this, {
       h: s,
-      template: X,
-      defaultRendering: G,
-      defaultSlots: n(pe, {
+      template: G,
+      defaultRendering: J,
+      defaultSlots: n(ce, {
         name: "calendar",
         icon: k
       }, null),
       additionalListeners: {
         click: this.handleIconClick
       }
-    }), Q = this.$props.dateInput ? r.call(this, this.$props.dateInput, h.call(this)) : void 0, W = n(fe, {
+    }), W = this.$props.dateInput ? r.call(this, this.$props.dateInput, h.call(this)) : void 0, Y = n(me, {
       ref: v(this, "dateInput"),
       placeholder: this.$props.placeholder,
       disabled: e,
       format: f,
-      formatPlaceholder: O,
+      formatPlaceholder: R,
       id: o,
-      max: I,
+      max: b,
       min: D,
       name: L,
       size: null,
       rounded: null,
       fillMode: null,
       onChange: this.handleInputValueChange,
-      required: N,
+      required: A,
       tabIndex: $ ? -1 : t,
       title: a,
       valid: this.validity().valid,
       validationMessage: z,
-      validityStyles: P,
+      validityStyles: N,
       value: S,
       ariaHasPopup: "grid",
       ariaExpanded: $,
       ariaRole: "combobox",
       ariaControls: this._popupId,
-      ariaLabel: A
-    }, null), Y = p.call(this, {
+      ariaLabel: P,
+      inputAttributes: K
+    }, null), Z = p.call(this, {
       h: s,
-      template: Q,
-      defaultRendering: W
-    }), Z = this.$props.calendar ? r.call(this, this.$props.calendar, h.call(this)) : void 0, ee = n(me, {
+      template: W,
+      defaultRendering: Y
+    }), ee = this.$props.calendar ? r.call(this, this.$props.calendar, h.call(this)) : void 0, te = n(ge, {
       ref: v(this, "calendar"),
       onKeydown: this.handleKeyDown,
       onFocus: this.calendarFocus,
       onBlur: this.calendarBlur,
       disabled: e,
-      value: U,
+      value: H,
       min: D,
-      max: I,
+      max: b,
       weekNumber: M,
       focusedDate: x,
       onChange: this.handleCalendarValueChange
     }, null), l = p.call(this, {
       h: s,
-      template: Z,
-      defaultRendering: ee
-    }), te = this.$props.popup ? r.call(this, this.$props.popup, h.call(this)) : void 0, ae = n(ue, {
+      template: ee,
+      defaultRendering: te
+    }), ae = this.$props.popup ? r.call(this, this.$props.popup, h.call(this)) : void 0, ne = n(se, {
       show: $,
       anchor: this._anchor,
-      class: H,
+      class: X,
       id: this._popupId,
       anchorAlign: {
         horizontal: "left",
@@ -406,21 +409,21 @@ const xe = /* @__PURE__ */ ie({
         horizontal: "left",
         vertical: "top"
       },
-      animate: q,
-      appendTo: E
-    }, R(l) ? l : {
+      animate: E,
+      appendTo: U
+    }, O(l) ? l : {
       default: () => [l]
-    }), ne = p.call(this, {
+    }), ie = p.call(this, {
       h: s,
-      template: te,
-      defaultRendering: ae,
+      template: ae,
+      defaultRendering: ne,
       defaultSlots: l
     }), u = n("span", {
       ref: v(this, "kendoAnchor"),
       role: "group",
       class: C("k-input", "k-datepicker", {
         [`k-input-${T.sizeMap[m] || m}`]: m,
-        [`k-input-${b}`]: b,
+        [`k-input-${I}`]: I,
         [`k-rounded-${T.roundedMap[g] || g}`]: g,
         "k-invalid": !y,
         "k-required": this.required,
@@ -430,8 +433,8 @@ const xe = /* @__PURE__ */ ie({
       onKeydown: this.handleKeyDown,
       onFocusin: this.handleFocus,
       onFocusout: this.handleBlur
-    }, [Y, J, ne]);
-    return this.$props.label ? n(De, {
+    }, [Z, Q, ie]);
+    return this.$props.label ? n(be, {
       label: this.$props.label,
       editorId: o,
       editorValid: y,
@@ -441,11 +444,11 @@ const xe = /* @__PURE__ */ ie({
       style: {
         width: j
       }
-    }, R(u) ? u : {
+    }, O(u) ? u : {
       default: () => [u]
     }) : u;
   }
 });
 export {
-  xe as DatePicker
+  je as DatePicker
 };

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"),x=require("../package-metadata.js"),m=require("../dateinput/DateInput.js"),j=require("../calendar/components/Calendar.js"),o=require("../calendar/models/SelectionRange.js"),g=require("../defaults.js"),a=require("../messages/main.js"),z=require("@progress/kendo-svg-icons"),P=s.defineComponent({name:"KendoDateRangePicker",emits:{blur:null,change:null,changemodel:null,"update:modelValue":null,focus:null,keydown:null,open:null,close:null},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 g.MAX_DATE}},min:{type:Date,default:function(){return g.MIN_DATE}},rounded:{type:String,default:"medium",validator:function(e){return["small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,default:"medium",validator:function(e){return["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(){}}},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(x.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:r}=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,w={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:r,ariaHasPopup:"grid",ariaExpanded:this.computedShow,value:e.start,ariaRole:"combobox",ariaControls:this._popupId,...this.$props.startDateInputSettings},b=s.h(m.DateInput,{ref:u=>{this.startDateInputRef=u},...w,onChange:this.handleStartChange}),$=n.getTemplate.call(this,{h:s.h,template:v,defaultRendering:b,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:r,disabled:this.$props.disabled,valid:this.$props.valid,ariaHasPopup:"grid",ariaExpanded:this.computedShow,value:e.end,ariaRole:"combobox",ariaControls:this._popupId,...this.$props.endDateInputSettings},y=s.h(m.DateInput,{ref:u=>{this.endDateInputRef=u},...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(j.Calendar,{ref:u=>{this.calendarRef=u},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,M={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},O=s.h(N.Popup,{class:T,...M},function(){return[p]}),F=n.getTemplate.call(this,{h:s.h,template:L,defaultRendering:O,defaultSlots:p}),A=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:u=>{this.kendoAnchorRef=u}},[$,(this.$props.allowReverse||this.$props.calendarSettings&&this.$props.calendarSettings.allowReverse)&&this.$props.swapButton?A:D,E,F])},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",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",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,r=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&&r&&document&&document.activeElement===r&&(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"),m=require("../dateinput/DateInput.js"),x=require("../calendar/components/Calendar.js"),o=require("../calendar/models/SelectionRange.js"),g=require("../defaults.js"),a=require("../messages/main.js"),z=require("@progress/kendo-svg-icons"),P=s.defineComponent({name:"KendoDateRangePicker",emits:{blur:null,change:null,changemodel:null,"update:modelValue":null,focus:null,keydown:null,open:null,close:null},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 g.MAX_DATE}},min:{type:Date,default:function(){return g.MIN_DATE}},rounded:{type:String,default:"medium",validator:function(e){return["small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,default:"medium",validator:function(e){return["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:r}=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:r,ariaHasPopup:"grid",ariaExpanded:this.computedShow,value:e.start,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:this.$props.inputAttributes,...this.$props.startDateInputSettings},w=s.h(m.DateInput,{ref:u=>{this.startDateInputRef=u},...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:r,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(m.DateInput,{ref:u=>{this.endDateInputRef=u},...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:u=>{this.calendarRef=u},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:u=>{this.kendoAnchorRef=u}},[$,(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",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",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,r=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&&r&&document&&document.activeElement===r&&(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,14 +8,14 @@
 import { defineComponent as X, ref as Y, inject as q, h as a, createVNode as f } from "vue";
 import { Popup as J } from "@progress/kendo-vue-popup";
 import { cloneDate as S } from "@progress/kendo-date-math";
-import { guid as o, validatePackage as Q, kendoThemeMaps as v, templateRendering as l, getListeners as d, getTemplate as h, Icon as W, canUseDOM as Z, Keys as g } from "@progress/kendo-vue-common";
+import { guid as o, validatePackage as Q, kendoThemeMaps as b, templateRendering as l, getListeners as d, getTemplate as h, Icon as W, canUseDOM as Z, Keys as g } from "@progress/kendo-vue-common";
 import { provideLocalizationService as I } from "@progress/kendo-vue-intl";
 import { packageMetadata as tt } from "../package-metadata.mjs";
-import { DateInput as w } from "../dateinput/DateInput.mjs";
+import { DateInput as v } from "../dateinput/DateInput.mjs";
 import { Calendar as et } from "../calendar/components/Calendar.mjs";
-import { EMPTY_SELECTIONRANGE as r } from "../calendar/models/SelectionRange.mjs";
+import { EMPTY_SELECTIONRANGE as u } from "../calendar/models/SelectionRange.mjs";
 import { MAX_DATE as nt, MIN_DATE as at } from "../defaults.mjs";
-import { start as $, messages as u, end as b, separator as C, swapStartEnd as p } from "../messages/main.mjs";
+import { start as $, messages as r, end as w, 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",
@@ -50,7 +50,7 @@ const It = /* @__PURE__ */ X({
     defaultValue: {
       type: Object,
       default: function() {
-        return r;
+        return u;
       }
     },
     modelValue: {
@@ -129,7 +129,8 @@ const It = /* @__PURE__ */ X({
       type: Object,
       default: function() {
       }
-    }
+    },
+    inputAttributes: Object
   },
   created() {
     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(), Q(tt), this.currentShow = this.$props.show || this.$props.defaultShow, this.currentValue = this.$props.value || this.$props.defaultValue, this.initialAnimation = this.currentShow;
@@ -159,7 +160,7 @@ const It = /* @__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) || r;
+      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) || u;
     },
     computedShow() {
       return this.$props.show !== void 0 ? this.$props.show : this.currentShow;
@@ -171,11 +172,11 @@ const It = /* @__PURE__ */ X({
       } = this.$props;
       return {
         "k-button": !0,
-        [`k-button-${v.sizeMap[t] || t}`]: t,
+        [`k-button-${b.sizeMap[t] || t}`]: t,
         "k-button-flat": !0,
         "k-button-flat-base": !0,
         "k-icon-button": !0,
-        [`k-rounded-${v.roundedMap[e] || e}`]: e
+        [`k-rounded-${b.roundedMap[e] || e}`]: e
       };
     }
   },
@@ -187,11 +188,11 @@ const It = /* @__PURE__ */ X({
     };
   },
   render() {
-    const t = this.computedValue || r, {
+    const t = this.computedValue || u, {
       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(b, u[b]), 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($, r[$]), _ = m.toLanguageString(w, r[w]), V = m.toLanguageString(C, r[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,
@@ -207,8 +208,9 @@ const It = /* @__PURE__ */ X({
       value: t.start,
       ariaRole: "combobox",
       ariaControls: this._popupId,
+      inputAttributes: this.$props.inputAttributes,
       ...this.$props.startDateInputSettings
-    }, B = a(w, {
+    }, B = a(v, {
       ref: (s) => {
         this.startDateInputRef = s;
       },
@@ -221,7 +223,7 @@ const It = /* @__PURE__ */ X({
       additionalListeners: {
         change: this.handleStartChange
       }
-    }), O = this.$props.endDateInput ? l.call(this, this.$props.endDateInput, d.call(this)) : void 0, x = {
+    }), A = this.$props.endDateInput ? l.call(this, this.$props.endDateInput, d.call(this)) : void 0, O = {
       label: _,
       format: this.$props.format,
       min: this.min,
@@ -237,21 +239,22 @@ const It = /* @__PURE__ */ X({
       value: t.end,
       ariaRole: "combobox",
       ariaControls: this._popupId,
+      inputAttributes: this.$props.inputAttributes,
       ...this.$props.endDateInputSettings
-    }, L = a(w, {
+    }, x = a(v, {
       ref: (s) => {
         this.endDateInputRef = s;
       },
-      ...x,
+      ...O,
       onChange: this.handleEndChange
-    }), M = h.call(this, {
+    }), L = h.call(this, {
       h: a,
-      template: O,
-      defaultRendering: L,
+      template: A,
+      defaultRendering: x,
       additionalListeners: {
         change: this.handleEndChange
       }
-    }), T = this.$props.calendar ? l.call(this, this.$props.calendar, d.call(this)) : void 0, A = {
+    }), M = this.$props.calendar ? l.call(this, this.$props.calendar, d.call(this)) : void 0, T = {
       id: this._calendarId,
       min: this.min,
       max: this.max,
@@ -270,10 +273,10 @@ const It = /* @__PURE__ */ X({
       onFocus: this.calendarFocus,
       onBlur: this.calendarBlur,
       onChange: this.handleCalendarChange,
-      ...A
+      ...T
     }), D = h.call(this, {
       h: a,
-      template: T,
+      template: M,
       defaultRendering: j,
       additionalListeners: {
         change: this.handleCalendarChange,
@@ -311,11 +314,11 @@ const It = /* @__PURE__ */ X({
     }), G = f("button", {
       class: this.swapButtonClass,
       role: "button",
-      title: I(this).toLanguageString(p, u[p]),
+      title: I(this).toLanguageString(p, r[p]),
       onMousedown: this.handleReverseMouseDown,
       onClick: this.handleReverseClick,
       "aria-controls": c + " " + R,
-      "aria-label": I(this).toLanguageString(p, u[p])
+      "aria-label": I(this).toLanguageString(p, r[p])
     }, [f(W, {
       name: "arrows-swap",
       icon: st,
@@ -337,7 +340,7 @@ const It = /* @__PURE__ */ X({
       ref: (s) => {
         this.kendoAnchorRef = s;
       }
-    }, [F, (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? G : V, M, U]);
+    }, [F, (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? G : V, L, U]);
   },
   methods: {
     focus() {
@@ -359,7 +362,7 @@ const It = /* @__PURE__ */ X({
       }));
     },
     calculateValue(t, e) {
-      return (t.value !== void 0 ? t.value : e.currentValue) || r;
+      return (t.value !== void 0 ? t.value : e.currentValue) || u;
     },
     calculateShow(t, e) {
       return t.show !== void 0 ? t.show : e.currentShow;
@@ -424,7 +427,7 @@ const It = /* @__PURE__ */ X({
     },
     extractRangeFromValue(t) {
       if (!Array.isArray(t.value) && !(t.value instanceof Date))
-        return t.value || r;
+        return t.value || u;
       const e = Array.isArray(t.value) ? t.value[0] : t.value;
       return {
         start: this.computedValue.end !== null ? e : this.computedValue.start,

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"),H=require("@progress/kendo-vue-labels"),G=require("@progress/kendo-vue-buttons"),J=require("@progress/kendo-vue-popup"),r=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),Q=require("../dateinput/DateInput.js"),W=require("../package-metadata.js"),u=require("../utils.js"),o=require("../messages/main.js"),T=require("@progress/kendo-vue-intl"),Y=require("./DateTimeSelector.js"),Z=require("../timepicker/utils.js"),$=require("../defaults.js"),ee=require("../dateinput/utils.js"),te=require("@progress/kendo-svg-icons");function m(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const ie=n.defineComponent({name:"KendoDateTimePicker",emits:{changemodel:null,"update:modelValue":null,iconclick:null,change:null,focus:null,blur:null,keydown:null,open:null,close:null},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 ee.defaultFormatPlaceholder}},rounded:{type:String,default:"medium",validator:function(e){return["small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,default:"medium",validator:function(e){return["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($.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}},model:{event:"changemodel"},created(){this._anchor=t.guid(),this._popupId="popup"+t.guid(),this._wrapper=null,this._dateInput=null,this._dateTimeSelector=null,t.validatePackage(W.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:b,min:k,max:V,weekNumber:_,focusedDate:M,width:S,name:B,steps:D,placeholder:C,validationMessage:q,required:F,validityStyles:O,cancelButton:R,minTime:w,maxTime:I,ariaLabelledBy:ne,ariaDescribedBy:ae,size:p,fillMode:y,rounded:c}=this.$props,{popupClass:x,appendTo:E,animate:N}=this.$props.popupSettings,v=!this.$props.validityStyles||this.validity().valid,j=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,P=n.createVNode(Q.DateInput,{ref:h=>{this.dateInputRef=h},placeholder:C,disabled:i,format:g,formatPlaceholder:b,id:f,max:V,min:k,minTime:w,maxTime:I,name:B,size:null,rounded:null,fillMode:null,onChange:this.handleValueChange,required:F,steps:D,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},m(e)?e:{default:()=>[e]}),A=t.getTemplate.call(this,{h:n.h,template:j,defaultRendering:P}),L=this.$props.calendar?t.templateRendering.call(this,this.$props.calendar,t.getListeners.call(this)):void 0,l=n.createVNode(Y.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:I,focusedDate:M,format:g,calendar:L,steps:D,onFocus:this.timeSelectorFocus,onBlur:this.timeSelectorBlur,onKeydown:this.handleKeyDown},null),K=t.classNames("k-datetime-container k-reset",x),z=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,U=n.createVNode(J.Popup,{show:this.computedShow,anchor:this._anchor,popupClass:K,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},appendTo:E,animate:N},m(l)?l:{default:()=>[l]}),X=t.getTemplate.call(this,{h:n.h,template:z,defaultRendering:U,defaultSlots:l}),s=n.createVNode("div",{class:t.classNames("k-input","k-datetimepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-input-${y}`]:y,[`k-rounded-${t.kendoThemeMaps.roundedMap[c]||c}`]:c,"k-invalid":!v,"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},[A,n.createVNode(G.Button,{type:"button",tabIndex:-1,icon:"calendar",svgIcon:te.calendarIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleDateIconClick,title:T.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector]),rounded:null,class:"k-input-button","aria-controls":this._popupId,"aria-label":T.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector])},null),X]);return this.$props.label?n.createVNode(H.FloatingLabel,{label:this.$props.label,editorId:f,editorValid:v,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:S}},m(s)?s:{default:()=>[s]}):s},methods:{validity(){const e=u.isInDateRange(this.computedValue,this.$props.min,this.$props.max)&&Z.isInTimeRange(this.computedValue,this.$props.minTime||$.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",e)},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",e)},timeSelectorBlur(e){this.$emit("blur",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=ie;
+"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"),T=require("@progress/kendo-vue-intl"),Z=require("./DateTimeSelector.js"),ee=require("../timepicker/utils.js"),b=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:null,"update:modelValue":null,iconclick:null,change:null,focus:null,blur:null,keydown:null,open:null,close:null},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,default:"medium",validator:function(e){return["small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,default:"medium",validator:function(e){return["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(b.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:D,placeholder:C,validationMessage:q,required:F,validityStyles:O,cancelButton:R,minTime:w,maxTime:I,ariaLabelledBy:ae,ariaDescribedBy:oe,size:p,fillMode:y,rounded:c,inputAttributes:x}=this.$props,{popupClass:E,appendTo:A,animate:j}=this.$props.popupSettings,v=!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:I,name:B,size:null,rounded:null,fillMode:null,onChange:this.handleValueChange,required:F,steps:D,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:w,maxTime:I,focusedDate:M,format:g,calendar:K,steps:D,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-${y}`]:y,[`k-rounded-${t.kendoThemeMaps.roundedMap[c]||c}`]:c,"k-invalid":!v,"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:T.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector]),rounded:null,class:"k-input-button","aria-controls":this._popupId,"aria-label":T.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:v,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||b.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",e)},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",e)},timeSelectorBlur(e){this.$emit("blur",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;