@progress/kendo-vue-dateinputs 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/daterangepicker/DateRangePicker.mjs

@@ -0,0 +1,464 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+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 { 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 { Calendar as et } from "../calendar/components/Calendar.mjs";
+import { EMPTY_SELECTIONRANGE as r } 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 { arrowsSwapIcon as st } from "@progress/kendo-svg-icons";
+const It = /* @__PURE__ */ X({
+  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 r;
+      }
+    },
+    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 nt;
+      }
+    },
+    min: {
+      type: Date,
+      default: function() {
+        return at;
+      }
+    },
+    rounded: {
+      type: String,
+      default: "medium",
+      validator: function(t) {
+        return ["small", "medium", "large", "full"].includes(t);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: "solid",
+      validator: function(t) {
+        return ["solid", "flat", "outline"].includes(t);
+      }
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(t) {
+        return ["small", "medium", "large"].includes(t);
+      }
+    },
+    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 = 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;
+  },
+  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) || r;
+    },
+    computedShow() {
+      return this.$props.show !== void 0 ? this.$props.show : this.currentShow;
+    },
+    swapButtonClass() {
+      const {
+        size: t,
+        rounded: e
+      } = this.$props;
+      return {
+        "k-button": !0,
+        [`k-button-${v.sizeMap[t] || t}`]: t,
+        "k-button-flat": !0,
+        "k-button-flat-base": !0,
+        "k-icon-button": !0,
+        [`k-rounded-${v.roundedMap[e] || e}`]: e
+      };
+    }
+  },
+  setup() {
+    const t = Y(null), e = q("kendoLocalizationService", {});
+    return {
+      kendoAnchorRef: t,
+      kendoLocalizationService: e
+    };
+  },
+  render() {
+    const t = this.computedValue || r, {
+      size: e,
+      fillMode: n,
+      rounded: i
+    } = this.$props, c = (this.$props.startDateInputSettings || {}).id || this._startInputId, R = (this.$props.endDateInputSettings || {}).id || this._endInputId, m = I(this), y = m.toLanguageString($, u[$]), _ = m.toLanguageString(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 = {
+      label: y,
+      format: this.$props.format,
+      min: this.min,
+      max: this.max,
+      id: this._startInputId,
+      disabled: this.$props.disabled,
+      valid: this.$props.valid,
+      size: e,
+      fillMode: n,
+      rounded: i,
+      ariaHasPopup: "grid",
+      ariaExpanded: this.computedShow,
+      value: t.start,
+      ariaRole: "combobox",
+      ariaControls: this._popupId,
+      ...this.$props.startDateInputSettings
+    }, B = a(w, {
+      ref: (s) => {
+        this.startDateInputRef = s;
+      },
+      ...E,
+      onChange: this.handleStartChange
+    }), F = h.call(this, {
+      h: a,
+      template: k,
+      defaultRendering: B,
+      additionalListeners: {
+        change: this.handleStartChange
+      }
+    }), O = this.$props.endDateInput ? l.call(this, this.$props.endDateInput, d.call(this)) : void 0, x = {
+      label: _,
+      format: this.$props.format,
+      min: this.min,
+      max: this.max,
+      id: this._endInputId,
+      size: e,
+      fillMode: n,
+      rounded: i,
+      disabled: this.$props.disabled,
+      valid: this.$props.valid,
+      ariaHasPopup: "grid",
+      ariaExpanded: this.computedShow,
+      value: t.end,
+      ariaRole: "combobox",
+      ariaControls: this._popupId,
+      ...this.$props.endDateInputSettings
+    }, L = a(w, {
+      ref: (s) => {
+        this.endDateInputRef = s;
+      },
+      ...x,
+      onChange: this.handleEndChange
+    }), M = h.call(this, {
+      h: a,
+      template: O,
+      defaultRendering: L,
+      additionalListeners: {
+        change: this.handleEndChange
+      }
+    }), T = this.$props.calendar ? l.call(this, this.$props.calendar, d.call(this)) : void 0, A = {
+      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: t,
+      ...this.$props.calendarSettings
+    }, j = a(et, {
+      ref: (s) => {
+        this.calendarRef = s;
+      },
+      onKeydown: this.handleKeyDown,
+      onFocus: this.calendarFocus,
+      onBlur: this.calendarBlur,
+      onChange: this.handleCalendarChange,
+      ...A
+    }), D = h.call(this, {
+      h: a,
+      template: T,
+      defaultRendering: j,
+      additionalListeners: {
+        change: this.handleCalendarChange,
+        keydown: this.handleKeyDown,
+        focus: this.calendarFocus,
+        blur: this.calendarBlur
+      }
+    }), {
+      popupClass: z,
+      animate: K
+    } = this.$props.popupSettings, N = this.$props.popup ? l.call(this, this.$props.popup, d.call(this)) : void 0, P = {
+      show: this.computedShow,
+      anchor: this._anchor,
+      id: this._popupId,
+      anchorAlign: {
+        horizontal: "left",
+        vertical: "bottom"
+      },
+      popupAlign: {
+        horizontal: "left",
+        vertical: "top"
+      },
+      animate: this.initialAnimation ? !1 : K,
+      ...this.$props.popupSettings
+    }, H = a(J, {
+      class: z,
+      ...P
+    }, function() {
+      return [D];
+    }), U = h.call(this, {
+      h: a,
+      template: N,
+      defaultRendering: H,
+      defaultSlots: D
+    }), G = f("button", {
+      class: this.swapButtonClass,
+      role: "button",
+      title: I(this).toLanguageString(p, u[p]),
+      onMousedown: this.handleReverseMouseDown,
+      onClick: this.handleReverseClick,
+      "aria-controls": c + " " + R,
+      "aria-label": I(this).toLanguageString(p, u[p])
+    }, [f(W, {
+      name: "arrows-swap",
+      icon: st,
+      style: {
+        transform: "rotate(90deg)"
+      },
+      class: "k-button-icon"
+    }, null)]);
+    return f("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: (s) => {
+        this.kendoAnchorRef = s;
+      }
+    }, [F, (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? G : V, M, U]);
+  },
+  methods: {
+    focus() {
+      const t = this.getStartInput();
+      t && t.focus();
+    },
+    focusCalendarElement() {
+      const t = this.getCalendar();
+      t && t.focus({
+        preventScroll: !0
+      });
+    },
+    focusDateInputElement() {
+      const t = this.getStartInput(), e = this.getEndInput();
+      !document || !t || !e || ((this.computedValue.start === null || this.computedValue.end !== null) && document.activeElement !== e ? t.focus({
+        preventScroll: !0
+      }) : document.activeElement !== t && e.focus({
+        preventScroll: !0
+      }));
+    },
+    calculateValue(t, e) {
+      return (t.value !== void 0 ? t.value : e.currentValue) || r;
+    },
+    calculateShow(t, e) {
+      return t.show !== void 0 ? t.show : e.currentShow;
+    },
+    setShow(t) {
+      this.currentShow !== t && (this.currentShow = t, this.$emit(t ? "open" : "close", {
+        component: this
+      }));
+    },
+    handleReverseClick(t) {
+      const e = {
+        start: this.computedValue.end,
+        end: this.computedValue.start
+      }, n = {
+        event: t.event
+      };
+      this.handleChange(e, n);
+    },
+    handleReverseMouseDown(t) {
+      t.preventDefault();
+    },
+    handleFocus(t) {
+      this.shouldFocusDateInput || this.setShow(!0), this.$emit("focus", t);
+    },
+    calendarBlur() {
+      clearTimeout(this._blurTimeout), this.createBlurTimeout();
+    },
+    calendarFocus() {
+      clearTimeout(this._blurTimeout);
+    },
+    createBlurTimeout() {
+      this._blurTimeout = setTimeout(() => {
+        const t = this.getStartInput(), e = this.getEndInput();
+        t && e && Z && t && document.activeElement !== e && 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(t) {
+      this.createBlurTimeout(), this.$emit("blur", t);
+    },
+    handleEndChange(t) {
+      const e = {
+        start: this.computedValue.start,
+        end: S(t.value || void 0)
+      };
+      this.handleChange(e, t);
+    },
+    handleStartChange(t) {
+      const e = {
+        start: S(t.value || void 0),
+        end: this.computedValue.end
+      };
+      this.handleChange(e, t);
+    },
+    extractRangeFromValue(t) {
+      if (!Array.isArray(t.value) && !(t.value instanceof Date))
+        return t.value || r;
+      const e = Array.isArray(t.value) ? t.value[0] : t.value;
+      return {
+        start: this.computedValue.end !== null ? e : this.computedValue.start,
+        end: this.computedValue.start !== null ? e : this.computedValue.end
+      };
+    },
+    handleCalendarChange(t) {
+      const e = this.extractRangeFromValue(t);
+      this.handleChange(e, t);
+    },
+    handleKeyDown(t) {
+      const {
+        keyCode: e,
+        altKey: n
+      } = t, i = this.getEndInput(), c = this.getCalendar();
+      e === g.esc ? (t.preventDefault(), this.shouldFocusDateInput = !0, this.setShow(!1)) : n && e === g.down ? (t.preventDefault(), this.shouldFocusCalendar = !0, this.setShow(!0)) : e === g.tab && this.computedShow && c && i && document && document.activeElement === i && (t.preventDefault(), this.focusCalendarElement()), this.$emit("keydown", t);
+    },
+    handleChange(t, e) {
+      this.currentValue = t, this.valueDuringOnChange = t;
+      const n = {
+        event: e.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", n), this.valueDuringOnChange = void 0;
+    }
+  }
+});
+export {
+  It as DateRangePicker
+};

package/datetimepicker/DateTimePicker.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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;