@progress/kendo-vue-dateinputs/timepicker/TimeSelector.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 y, createVNode as a, inject as c, isVNode as C } from "vue";
import { Button as s } from "@progress/kendo-vue-buttons";
import { cloneDate as o } from "@progress/kendo-date-math";
import { Keys as D, canUseDOM as V, classNames as $ } from "@progress/kendo-vue-common";
import { provideLocalizationService as w, provideIntlService as j } from "@progress/kendo-vue-intl";
import { timePickerCancel as h, messages as d, timePickerSet as m } from "../messages/main.mjs";
import { MIDNIGHT_DATE as O, MIN_TIME as P, MAX_TIME as I } from "../utils.mjs";
import { getNow as u, valueMerger as A, generateGetters as N } from "./utils.mjs";
import { TimePart as F } from "./TimePart.mjs";
function p(t) {
  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !C(t);
}
const G = /* @__PURE__ */ y({
  name: "KendoTimeSelector",
  emits: {
    change: (t) => !0,
    focus: (t) => !0,
    blur: (t) => !0,
    keydown: (t) => !0,
    reject: (t) => !0
  },
  props: {
    cancelButton: {
      type: Boolean,
      default: !0
    },
    boundRange: {
      type: Boolean,
      default: !1
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    format: {
      type: [String, Object],
      default: function() {
        return "t";
      }
    },
    max: {
      type: Date,
      default: function() {
        return I;
      }
    },
    min: {
      type: Date,
      default: function() {
        return P;
      }
    },
    nowButton: Boolean,
    steps: {
      type: Object,
      default: function() {
        return {};
      }
    },
    smoothScroll: {
      type: Boolean,
      default: !0
    },
    tabIndex: Number,
    value: {
      type: Date,
      default: function() {
        return null;
      }
    },
    onChange: Function,
    onReject: Function,
    onKeydown: Function
  },
  created() {
    this.dateFormatParts = this.intl.splitDateFormat(this.$props.format), this.mergeValue = A(N(this.dateFormatParts)), this.hasActiveButton = this.hasActiveButton.bind(this), this.currentState = this.$props.value || O, this.currentValue = this.$props.value;
  },
  inject: {
    kendoIntlService: {
      default: null
    },
    kendoLocalizationService: {
      default: null
    }
  },
  data() {
    return {
      currentState: null,
      currentValue: null,
      valueDuringOnChange: void 0
    };
  },
  computed: {
    computedValue() {
      const t = this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.$props.value !== null ? this.$props.value : this.currentValue;
      return t !== null ? o(t) : null;
    },
    intl() {
      return j(this);
    },
    current() {
      return this.currentState !== null ? o(this.currentState) : null;
    }
  },
  mounted() {
    this.timePart = this.$refs.timePart, this._acceptButton = this.$refs.acceptButton, this._cancelButton = this.$refs.cancelButton;
  },
  setup() {
    const t = c("kendoIntlService", {}), e = c("kendoLocalizationService", {});
    return {
      kendoIntlService: t,
      kendoLocalizationService: e
    };
  },
  render() {
    const {
      format: t,
      cancelButton: e,
      disabled: r,
      tabIndex: f,
      smoothScroll: v,
      min: g,
      max: S,
      boundRange: B,
      nowButton: b,
      steps: k
    } = this.$props, l = w(this), n = l.toLanguageString(h, d[h]), i = l.toLanguageString(m, d[m]);
    return a("div", {
      tabindex: r ? void 0 : f || 0,
      class: $("k-timeselector", {
        "k-disabled": r
      }),
      onKeydown: this.handleKeyDown
    }, [a(F, {
      ref: "timePart",
      value: this.current,
      onChange: this.handleChange,
      onNowclick: this.handleNowClick,
      format: t,
      smoothScroll: v,
      min: g,
      max: S,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur,
      boundRange: B,
      disabled: r,
      nowButton: b,
      steps: k
    }, null), a("div", {
      class: "k-time-footer k-actions k-actions-stretched"
    }, [e && a(s, {
      type: "button",
      ref: "cancelButton",
      class: "k-time-cancel",
      onClick: this.handleReject,
      title: n,
      "aria-label": n
    }, p(n) ? n : {
      default: () => [n]
    }), a(s, {
      type: "button",
      ref: "acceptButton",
      themeColor: "primary",
      class: "k-time-accept",
      onClick: this.handleAccept,
      title: i,
      "aria-label": i
    }, p(i) ? i : {
      default: () => [i]
    })])]);
  },
  methods: {
    handleBlur(t) {
      this.$emit("blur", t);
    },
    handleFocus(t) {
      this.$emit("focus", t);
    },
    focusActiveList() {
      this.timePart && this.timePart.focus({
        preventScroll: !0
      });
    },
    hasActiveButton() {
      return this._acceptButton ? V && (document.activeElement === this._acceptButton.$el || document.activeElement === this._cancelButton.$el) : !1;
    },
    handleKeyDown(t) {
      const {
        keyCode: e
      } = t;
      switch (this.$emit("keydown", t), e) {
        case D.enter:
          this.hasActiveButton() || this.handleAccept(t);
          return;
        default:
          return;
      }
    },
    handleAccept(t) {
      const e = this.mergeValue(o(this.computedValue || u()), this.timePart ? this.timePart.computedValue : this.current);
      this.currentValue = e, this.valueDuringOnChange = e, this.$emit("change", {
        event: t,
        value: this.computedValue,
        target: this
      }), this.valueDuringOnChange = void 0;
    },
    handleReject(t) {
      this.currentState = this.computedValue, this.$emit("reject", t);
    },
    handleNowClick(t) {
      const e = this.mergeValue(o(this.computedValue || u()), u());
      this.currentState = e, this.currentValue = e, this.valueDuringOnChange = e, this.$emit("change", {
        event: t,
        value: this.computedValue,
        target: this
      }), this.valueDuringOnChange = void 0;
    },
    handleChange(t) {
      this.currentState = t;
    }
  }
});
export {
  G as TimeSelector
};