@progress/kendo-vue-dateinputs/daterangepicker/DateRangePicker.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 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 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 v } from "../dateinput/DateInput.mjs";
import { Calendar as et } from "../calendar/components/Calendar.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 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",
  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 u;
      }
    },
    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() {
      }
    },
    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;
  },
  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) || u;
    },
    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-${b.sizeMap[t] || t}`]: t,
        "k-button-flat": !0,
        "k-button-flat-base": !0,
        "k-icon-button": !0,
        [`k-rounded-${b.roundedMap[e] || e}`]: e
      };
    }
  },
  setup() {
    const t = Y(null), e = q("kendoLocalizationService", {});
    return {
      kendoAnchorRef: t,
      kendoLocalizationService: e
    };
  },
  render() {
    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($, 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,
      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,
      inputAttributes: this.$props.inputAttributes,
      ...this.$props.startDateInputSettings
    }, B = a(v, {
      ref: (s) => {
        this.startDateInputRef = s;
      },
      ...E,
      onChange: this.handleStartChange
    }), F = h.call(this, {
      h: a,
      template: k,
      defaultRendering: B,
      additionalListeners: {
        change: this.handleStartChange
      }
    }), A = this.$props.endDateInput ? l.call(this, this.$props.endDateInput, d.call(this)) : void 0, O = {
      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,
      inputAttributes: this.$props.inputAttributes,
      ...this.$props.endDateInputSettings
    }, x = a(v, {
      ref: (s) => {
        this.endDateInputRef = s;
      },
      ...O,
      onChange: this.handleEndChange
    }), L = h.call(this, {
      h: a,
      template: A,
      defaultRendering: x,
      additionalListeners: {
        change: this.handleEndChange
      }
    }), 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,
      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,
      ...T
    }), D = h.call(this, {
      h: a,
      template: M,
      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, r[p]),
      onMousedown: this.handleReverseMouseDown,
      onClick: this.handleReverseClick,
      "aria-controls": c + " " + R,
      "aria-label": I(this).toLanguageString(p, r[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, L, 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) || u;
    },
    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 || u;
      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
};