@progress/kendo-vue-dateinputs/datetimepicker/DateTimeSelector.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as F, createVNode as a, h as P, ref as N, inject as j, isVNode as A } from "vue";
import { provideLocalizationService as E } from "@progress/kendo-vue-intl";
import { date as c, messages as l, time as h, dateTimePickerCancel as m, dateTimePickerSet as d } from "../messages/main.mjs";
import { SegmentedControl as L, Button as p } from "@progress/kendo-vue-buttons";
import { Calendar as R } from "../calendar/components/Calendar.mjs";
import { TimePart as z } from "../timepicker/TimePart.mjs";
import { MAX_DATE as K, MIN_DATE as I, setTime as f, getToday as g, MAX_TIME as T, MIN_TIME as b } from "../utils.mjs";
import { isEqualDate as O } from "@progress/kendo-date-math";
import { Keys as o, canUseDOM as W, classNames as X, getTemplate as q, cloneDate as v } from "@progress/kendo-vue-common";
import { MIDNIGHT_DATE as u } from "../defaults.mjs";
import { getNow as k } from "../timepicker/utils.mjs";
function D(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !A(e);
}
const ne = /* @__PURE__ */ F({
  name: "KendoDateTimeSelector",
  props: {
    value: Date,
    disabled: {
      type: Boolean,
      default: !1
    },
    cancelButton: {
      type: Boolean,
      default: !0
    },
    min: {
      type: Date,
      default: I
    },
    max: {
      type: Date,
      default: K
    },
    maxTime: {
      type: Date,
      default: function() {
        return v(T);
      }
    },
    minTime: {
      type: Date,
      default: function() {
        return v(b);
      }
    },
    weekNumber: {
      type: Boolean,
      default: !1
    },
    steps: {
      type: Object,
      default: function() {
        return {};
      }
    },
    focusedDate: Date,
    format: [String, Object],
    calendar: Object,
    onChange: Function,
    onReject: Function,
    onFocus: Function,
    onBlur: Function,
    onKeydown: Function
  },
  created() {
    this._calendarWrap = null, this.currentTab = "date", this.dateValue = this.$props.value, this.timeValue = this.$props.value || u;
  },
  inject: {
    kendoLocalizationService: {
      default: null
    }
  },
  data() {
    return {
      currentTab: null,
      dateValue: null,
      timeValue: Date
    };
  },
  computed: {
    hasDateValue() {
      return this.dateValue !== null;
    },
    computedMinTime() {
      return this.$props.minTime !== void 0 ? this.$props.minTime : this.normalizeRange(this.$props.min, this.dateValue);
    },
    computedMaxTime() {
      return this.$props.maxTime !== void 0 ? this.$props.maxTime : this.normalizeRange(this.$props.max, this.dateValue);
    }
  },
  mounted() {
    this._acceptButton = this.$refs.acceptButton, this._calendar = this.$refs.calendar, this._calendarWrap = this.$refs.calendarWrap, this._cancelButton = this.$refs.cancelButton, this._timePart = this.$refs.timePart, this.focus({
      preventScroll: !0
    });
  },
  updated() {
    this.shouldFocusPart && this.focus({
      preventScroll: !0
    }), this.shouldFocusPart = !1;
  },
  setup() {
    const e = N(null), t = j("kendoLocalizationService", {});
    return {
      kendoAnchorRef: e,
      kendoLocalizationService: t
    };
  },
  render() {
    const {
      disabled: e,
      cancelButton: t,
      min: i,
      max: $,
      weekNumber: V,
      focusedDate: C,
      format: y,
      steps: B
    } = this.$props, _ = X({
      "k-date-tab": this.currentTab === "date",
      "k-time-tab": this.currentTab === "time",
      "k-disabled": e
    }, "k-datetime-wrap"), r = E(this), M = r.toLanguageString(c, l[c]), S = r.toLanguageString(h, l[h]), n = r.toLanguageString(m, l[m]), s = r.toLanguageString(d, l[d]), w = a(R, {
      ref: "calendar",
      min: i,
      max: $,
      weekNumber: V,
      focusedDate: C,
      disabled: e || this.currentTab !== "date",
      value: this.dateValue,
      onChange: this.handleCalendarValueChange,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur
    }, null), x = q.call(this, {
      h: P,
      template: this.$props.calendar,
      defaultRendering: w
    });
    return a("div", {
      onKeydown: this.handleKeyDown,
      class: _,
      tabindex: -1
    }, [a("div", {
      class: "k-datetime-buttongroup"
    }, [a(L, {
      layoutMode: "stretch",
      value: this.currentTab,
      items: [{
        value: "date",
        text: M
      }, {
        value: "time",
        text: S
      }],
      onChange: this.handleTabChange
    }, null)]), a("div", {
      class: "k-datetime-selector"
    }, [a("div", {
      class: "k-datetime-calendar-wrap",
      ref: "calendarWrap"
    }, [x]), a("div", {
      class: "k-datetime-time-wrap"
    }, [a(z, {
      key: 1,
      onNowclick: this.handleNowClick,
      disabled: e || this.currentTab !== "time",
      ref: "timePart",
      min: this.computedMinTime || b,
      max: this.computedMaxTime || T,
      value: this.timeValue,
      format: y,
      steps: B,
      onChange: this.handleTimeListContainerChange,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur
    }, null)])]), a("div", {
      class: "k-datetime-footer k-actions k-actions-stretched"
    }, [t && a(p, {
      type: "button",
      ref: "cancelButton",
      class: "k-time-cancel",
      onClick: this.handleReject,
      title: n,
      "aria-label": n
    }, D(n) ? n : {
      default: () => [n]
    }), a(p, {
      type: "button",
      ref: "acceptButton",
      disabled: !this.hasDateValue,
      themeColor: "primary",
      class: "k-time-accept",
      onClick: this.handleAccept,
      title: s,
      "aria-label": s
    }, D(s) ? s : {
      default: () => [s]
    })])]);
  },
  methods: {
    handleBlur(e) {
      this.$emit("blur", e);
    },
    handleFocus(e) {
      this.$emit("focus", e);
    },
    focus(e) {
      this.$nextTick(() => {
        this.currentTab === "time" && this._timePart && this._timePart.focus(e);
        const t = this.calendarElement();
        this.currentTab === "date" && t && t.focus(e);
      });
    },
    calendarElement() {
      return this._calendar && this._calendar.$el ? this._calendar : null;
    },
    normalizeRange(e, t) {
      return O(e, t || g()) ? e : null;
    },
    hasActiveButton() {
      return this._acceptButton ? W && (document.activeElement === this._acceptButton.$el || document.activeElement === this._cancelButton.$el) : !1;
    },
    mergeTime(e, t) {
      return e && t ? f(t, e) : t;
    },
    mergeDate(e, t) {
      return e ? f(e || g(), t) : t;
    },
    move(e) {
      if (e === "right" && this.currentTab === "time" || e === "left" && this.currentTab === "date")
        return;
      const t = e === "left" ? "date" : "time";
      this.shouldFocusPart = !0, this.currentTab = t;
    },
    handleReject(e) {
      this.dateValue = this.$props.value, this.timeValue = this.$props.value || u;
      const t = this.mergeDate(this.$props.value, this.$props.value || u), i = {
        event: e,
        target: this,
        value: t
      };
      this.$emit("reject", i);
    },
    handleAccept(e, t) {
      if (!this.dateValue || !this.timeValue || !this.hasDateValue)
        return;
      const i = this.mergeDate(this.dateValue, t || this.timeValue);
      this.$emit("change", {
        event: e,
        value: i,
        target: this
      });
    },
    handleNowClick(e) {
      this.timeValue = k(), this.handleAccept(e, k());
    },
    handleCalendarValueChange(e) {
      e.event.stopPropagation(), this.dateValue = e.value, this.currentTab = "time", this.shouldFocusPart = !0;
    },
    handleTimeListContainerChange(e) {
      this.timeValue = e;
    },
    handleTabChange(e) {
      e === "date" ? this.move("left") : e === "time" && this.move("right");
    },
    handleKeyDown(e) {
      const {
        keyCode: t,
        altKey: i
      } = e;
      switch (this.$emit("keydown", e), t) {
        case o.enter:
          !this.hasActiveButton() && this.hasDateValue && this.handleAccept(e);
          return;
        case o.left:
          if (!i)
            return;
          this.move("left");
          return;
        case o.right:
          if (!i)
            return;
          this.move("right");
          return;
        default:
          return;
      }
    },
    handleTimePartMount(e) {
      this.timeValue = e;
    }
  }
});
export {
  ne as DateTimeSelector
};