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

package/datepicker/DatePicker.mjs

@@ -0,0 +1,451 @@
+/**
+ * @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 ie, ref as _, inject as oe, createVNode as n, h as s, isVNode as le } 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 { 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);
+}
+const xe = /* @__PURE__ */ ie({
+  name: "DatePicker",
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  model: {
+    event: "changemodel"
+  },
+  emits: {
+    change: null,
+    changemodel: null,
+    "update:modelValue": null,
+    iconclick: null,
+    focus: null,
+    blur: null,
+    keydown: null,
+    open: null,
+    close: null
+  },
+  props: {
+    defaultShow: {
+      type: Boolean,
+      default: !1
+    },
+    modelValue: {
+      type: Date,
+      default: void 0
+    },
+    defaultValue: {
+      type: Date,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    dateInput: {
+      type: [String, Object, Function],
+      default: function() {
+      }
+    },
+    calendar: {
+      type: [String, Object, Function],
+      default: function() {
+      }
+    },
+    toggleButton: {
+      type: [String, Object, Function],
+      default: function() {
+      }
+    },
+    label: String,
+    placeholder: String,
+    popup: {
+      type: [String, Object, Function],
+      default: function() {
+      }
+    },
+    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);
+      }
+    },
+    focusedDate: Date,
+    format: {
+      type: [Object, String],
+      default: function() {
+        return "d";
+      }
+    },
+    formatPlaceholder: [Object, String],
+    id: String,
+    max: {
+      type: Date,
+      default: function() {
+        return d(ge);
+      }
+    },
+    min: {
+      type: Date,
+      default: function() {
+        return d($e);
+      }
+    },
+    name: String,
+    popupSettings: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    show: {
+      type: Boolean,
+      default: void 0
+    },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    title: {
+      type: String,
+      default: function() {
+        return "";
+      }
+    },
+    value: Date,
+    weekNumber: Boolean,
+    width: [Number, String],
+    validityStyles: {
+      type: Boolean,
+      default: !0
+    },
+    validationMessage: String,
+    required: Boolean,
+    validate: Boolean,
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    ariaLabel: String
+  },
+  data: function() {
+    return {
+      isFocused: !1,
+      currentValue: void 0,
+      currentShow: void 0,
+      valueDuringOnChange: void 0,
+      showDuringOnChange: void 0,
+      shouldFocusDateInput: !1
+    };
+  },
+  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;
+  },
+  mounted() {
+    this._dateInput = w(this, "dateInput"), (this.$refs.calendar || this.calendarRef) && (this._calendar = w(this, "calendar")), this.computedShow && this.$forceUpdate();
+  },
+  updated() {
+    (this.$refs.calendar || this.calendarRef) && (this._calendar = w(this, "calendar")), this.computedShow ? this._calendar && this._calendar.$el && !this._oldShow && this._calendar.focus({
+      preventScroll: !0
+    }) : this._dateInput && this._dateInput.$el && this.$data.shouldFocusDateInput && this._dateInput.focus({
+      preventScroll: !0
+    }), this.$data.shouldFocusDateInput = !1;
+  },
+  watch: {
+    show: function(e, t) {
+      this._oldShow = t;
+    },
+    currentShow: function(e, t) {
+      this._oldShow = t;
+    }
+  },
+  computed: {
+    computedValue() {
+      const e = this.$data.valueDuringOnChange !== void 0 ? this.$data.valueDuringOnChange : this.$props.value !== void 0 ? this.$props.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.$data.currentValue;
+      return e !== null ? d(e) : null;
+    },
+    computedShow() {
+      return this.$data.showDuringOnChange !== void 0 ? this.$data.showDuringOnChange : this.$props.show !== void 0 ? this.$props.show : this.$data.currentShow;
+    }
+  },
+  methods: {
+    focus() {
+      this._dateInput && this._dateInput.focus();
+    },
+    handleFocus(e) {
+      this._oldShow = this.computedShow, this.$data.isFocused = !0, this.$emit("focus", e);
+    },
+    handleBlur(e) {
+      this.$data.isFocused = !1, this.createBlurTimeout(), this.$emit("blur", e);
+    },
+    calendarBlur() {
+      this.$emit("blur", event), clearTimeout(this._blurTimeout), this.createBlurTimeout();
+    },
+    calendarFocus() {
+      this.$emit("focus", event), clearTimeout(this._blurTimeout);
+    },
+    createBlurTimeout() {
+      this._blurTimeout = setTimeout(() => {
+        this._dateInput && re && 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;
+      return {
+        customError: a,
+        rangeOverflow: e && this.$props.max.getTime() < e.getTime() || !1,
+        rangeUnderflow: e && e.getTime() < this.$props.min.getTime() || !1,
+        valid: f,
+        valueMissing: e === null
+      };
+    },
+    nextValue(e, t) {
+      return e.value !== void 0 ? e.value : t.value;
+    },
+    nextShow(e, t) {
+      return e.show !== void 0 ? e.show : t.show;
+    },
+    setShow(e) {
+      this.computedShow !== e && (this.$data.currentShow = e, this.$emit(e ? "open" : "close", {
+        component: this
+      }));
+    },
+    mergeTime(e) {
+      return this.computedValue && e ? we(e, this.computedValue) : e;
+    },
+    handleInputValueChange(e) {
+      this.handleValueChange(e.value, e);
+    },
+    handleCalendarValueChange(e) {
+      const t = this.mergeTime(e.value);
+      this.handleValueChange(t, e);
+    },
+    getDateInputText() {
+      return this.computedValue ? !0 : this._dateInput ? this._dateInput._element.value : "";
+    },
+    handleValueChange(e, t) {
+      this.$data.currentValue = d(e || void 0), this.$data.valueDuringOnChange = e, this.$data.showDuringOnChange = !1, this.$data.shouldFocusDateInput = !0, this.$emit("changemodel", this.computedValue), this.$emit("update:modelValue", this.computedValue), this.$emit("change", {
+        event: t.event,
+        value: this.computedValue,
+        show: this.computedShow,
+        component: this,
+        target: {
+          name: this.$props.name,
+          value: this.computedValue,
+          valueAsDate: this.computedValue
+        },
+        validity: this.validity()
+      }), this.$data.valueDuringOnChange = void 0, this.$data.showDuringOnChange = void 0, this.setShow(!1);
+    },
+    handleIconClick(e) {
+      e.stopPropagation(), e.preventDefault(), !this.$props.disabled && (this.$data.shouldFocusDateInput = !0, this.$emit("iconclick", e), this.setShow(!this.computedShow));
+    },
+    handleIconMouseDown(e) {
+      e.stopPropagation(), e.preventDefault();
+    },
+    handleKeyDown(e) {
+      const {
+        altKey: t,
+        keyCode: a
+      } = e;
+      if (a === i.tab && this._dateInput && e.target !== this._dateInput._element) {
+        e.preventDefault(), this.$data.shouldFocusDateInput = !0, this.setShow(!1);
+        return;
+      }
+      if (a === i.esc) {
+        this.$data.shouldFocusDateInput = !0, this.setShow(!1);
+        return;
+      }
+      t && (a === i.up || a === i.down) && (e.preventDefault(), e.stopPropagation(), this.$data.shouldFocusDateInput = a === i.up, this.setShow(a === i.down)), this.$emit("keydown", e);
+    }
+  },
+  setup() {
+    const e = _(null), t = _(null), a = oe("kendoLocalizationService", {});
+    return {
+      listRef: e,
+      kendoAnchorRef: t,
+      kendoLocalizationService: a
+    };
+  },
+  render() {
+    he(this);
+    const {
+      disabled: e,
+      tabIndex: t,
+      title: a,
+      id: o,
+      format: f,
+      formatPlaceholder: O,
+      min: D,
+      max: I,
+      weekNumber: M,
+      focusedDate: x,
+      width: j,
+      name: L,
+      validationMessage: z,
+      required: N,
+      validityStyles: P,
+      size: m,
+      fillMode: b,
+      rounded: g,
+      ariaLabel: A
+    } = 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, {
+      type: "button",
+      tabIndex: -1,
+      icon: "calendar",
+      svgIcon: k,
+      onMousedown: this.handleIconMouseDown,
+      onClick: this.handleIconClick,
+      title: B(this).toLanguageString(c, F[c]),
+      "aria-label": B(this).toLanguageString(c, F[c]),
+      rounded: null,
+      class: "k-input-button"
+    }, null), J = p.call(this, {
+      h: s,
+      template: X,
+      defaultRendering: G,
+      defaultSlots: n(pe, {
+        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, {
+      ref: v(this, "dateInput"),
+      placeholder: this.$props.placeholder,
+      disabled: e,
+      format: f,
+      formatPlaceholder: O,
+      id: o,
+      max: I,
+      min: D,
+      name: L,
+      size: null,
+      rounded: null,
+      fillMode: null,
+      onChange: this.handleInputValueChange,
+      required: N,
+      tabIndex: $ ? -1 : t,
+      title: a,
+      valid: this.validity().valid,
+      validationMessage: z,
+      validityStyles: P,
+      value: S,
+      ariaHasPopup: "grid",
+      ariaExpanded: $,
+      ariaRole: "combobox",
+      ariaControls: this._popupId,
+      ariaLabel: A
+    }, null), Y = 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, {
+      ref: v(this, "calendar"),
+      onKeydown: this.handleKeyDown,
+      onFocus: this.calendarFocus,
+      onBlur: this.calendarBlur,
+      disabled: e,
+      value: U,
+      min: D,
+      max: I,
+      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, {
+      show: $,
+      anchor: this._anchor,
+      class: H,
+      id: this._popupId,
+      anchorAlign: {
+        horizontal: "left",
+        vertical: "bottom"
+      },
+      popupAlign: {
+        horizontal: "left",
+        vertical: "top"
+      },
+      animate: q,
+      appendTo: E
+    }, R(l) ? l : {
+      default: () => [l]
+    }), ne = p.call(this, {
+      h: s,
+      template: te,
+      defaultRendering: ae,
+      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-rounded-${T.roundedMap[g] || g}`]: g,
+        "k-invalid": !y,
+        "k-required": this.required,
+        "k-disabled": this.$props.disabled,
+        "k-focus": this.$data.isFocused
+      }),
+      onKeydown: this.handleKeyDown,
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur
+    }, [Y, J, ne]);
+    return this.$props.label ? n(De, {
+      label: this.$props.label,
+      editorId: o,
+      editorValid: y,
+      editorValue: this.getDateInputText(),
+      editorPlaceholder: this.$props.placeholder,
+      editorDisabled: this.$props.disabled,
+      style: {
+        width: j
+      }
+    }, R(u) ? u : {
+      default: () => [u]
+    }) : u;
+  }
+});
+export {
+  xe as DatePicker
+};

package/datepicker/ToggleButton.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 t=require("@progress/kendo-vue-buttons"),e=t.Button;exports.ToggleButton=e;

package/datepicker/ToggleButton.mjs

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Button as o } from "@progress/kendo-vue-buttons";
+const n = o;
+export {
+  n as ToggleButton
+};

package/daterangepicker/DateRangePicker.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 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;