@progress/kendo-vue-dateinputs/timepicker/TimeList.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 d, inject as m, createVNode as a, isVNode as f } from "vue";
import { cloneDate as c } from "@progress/kendo-date-math";
import { Keys as n, canUseDOM as v, noop as g } from "@progress/kendo-vue-common";
import { provideIntlService as $ } from "@progress/kendo-vue-intl";
import { Virtualization as x } from "../virtualization/Virtualization.mjs";
import { TIME_PART as l } from "./models/TimePart.mjs";
import { DayPeriodService as S } from "./services/DayPeriodService.mjs";
import { DOMService as I } from "./services/DOMService.mjs";
import { HoursService as T } from "./services/HoursService.mjs";
import { MinutesService as b } from "./services/MinutesService.mjs";
import { SecondsService as y } from "./services/SecondsService.mjs";
import { MAX_TIME as O, MIDNIGHT_DATE as H } from "../utils.mjs";
function k(t) {
  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !f(t);
}
const D = 2, u = 0.05, M = 0, z = {
  [n.end]: (t, e) => t[t.length - 1],
  [n.home]: (t, e) => t[0],
  [n.up]: (t, e) => t[e - 1],
  [n.down]: (t, e) => t[e + 1]
}, p = {
  [l.dayperiod]: S,
  [l.hour]: T,
  [l.minute]: b,
  [l.second]: y
}, F = /* @__PURE__ */ d({
  name: "KendoTimeList",
  emits: {
    change: null,
    focus: null,
    blur: null
  },
  props: {
    id: Number,
    boundRange: {
      type: Boolean,
      default: !1
    },
    max: {
      type: Date,
      default: function() {
        return O;
      }
    },
    min: {
      type: Date,
      default: function() {
        return H;
      }
    },
    part: Object,
    step: {
      type: Number,
      default: 1
    },
    value: Date,
    smoothScroll: {
      type: Boolean,
      default: !0
    },
    disabled: {
      type: Boolean,
      default: !1
    }
  },
  inject: {
    kendoIntlService: {
      default: null
    }
  },
  data() {
    return {
      animateToIndex: !1
    };
  },
  created() {
    this.topOffset = void 0, this.dom = new I();
  },
  computed: {
    animate() {
      return !!(this.$props.smoothScroll && this.animateToIndex);
    }
  },
  mounted() {
    this.virtualization = this.$refs.virtualization, Promise.resolve().then(() => {
      this.$el && (this.dom.calculateHeights(this.$el), this.$forceUpdate());
    });
  },
  updated() {
    if (!this.$refs.virtualization)
      return;
    this.virtualization = this.$refs.virtualization;
    const t = this.service.selectedIndex(this.$props.value);
    this.virtualization[this.animate ? "animateToIndex" : "scrollToIndex"](t), this.animateToIndex = !0;
  },
  setup() {
    return {
      kendoIntlService: m("kendoIntlService", {})
    };
  },
  render() {
    let t;
    if (!this.$props.part.type || !p[this.$props.part.type])
      return;
    this.calculateHeights(), this.intl = $(this), this.service = new p[this.$props.part.type](this.intl), this.configureServices();
    const e = this.service.data(this.$props.value), i = "translateY(" + this.topOffset + "px)", s = this.service.total(this.$props.value), o = function() {
      return a("ul", {
        style: {
          transform: i,
          msTransform: i
        },
        class: "k-reset"
      }, [e.map(function(r, h) {
        return a("li", {
          key: h,
          class: "k-item",
          onClick: () => {
            this.handleChange(r);
          }
        }, [a("span", null, [r.text])]);
      }, this)]);
    };
    return a("div", {
      class: "k-time-list",
      id: String(this.$props.id || ""),
      tabindex: this.$props.disabled ? -1 : 0,
      onKeydown: this.handleKeyDown,
      onFocusin: this.handleFocus,
      onFocusout: this.handleBlur,
      onMouseover: this.handleMouseOver
    }, [this.dom.didCalculate ? a(x, {
      bottomOffset: this.bottomOffset,
      class: "k-time-container",
      itemHeight: this.itemHeight,
      maxScrollDifference: this.listHeight,
      onScrollaction: this.handleScrollAction,
      ref: "virtualization",
      role: "presentation",
      skip: M,
      tabIndex: -1,
      take: s,
      topOffset: this.topOffset,
      total: s
    }, k(t = o.call(this)) ? t : {
      default: () => [t]
    }) : a("div", {
      class: "k-time-container"
    }, [o.call(this)])]);
  },
  methods: {
    focus(t) {
      Promise.resolve().then(() => {
        this.$el && this.$el.focus(t);
      });
    },
    itemOffset(t) {
      if (!this.virtualization)
        return -1;
      const e = this.service.selectedIndex(this.$props.value), i = this.virtualization.activeIndex(), s = this.virtualization.itemOffset(i), o = Math.abs(Math.ceil(t) - s);
      if (e === i && o < D)
        return s;
      const r = e > i;
      return r && o >= this.bottomThreshold || !r && o > this.topThreshold ? this.virtualization.itemOffset(i + 1) : s;
    },
    calculateHeights() {
      this.dom.didCalculate && (this.itemHeight = this.dom.itemHeight, this.listHeight = this.dom.timeListHeight, this.topOffset = (this.listHeight - this.itemHeight) / 2, this.bottomOffset = this.listHeight - this.itemHeight, this.topThreshold = this.itemHeight * u, this.bottomThreshold = this.itemHeight * (1 - u));
    },
    configureServices(t) {
      let {
        min: e,
        max: i,
        value: s
      } = t || this.$props;
      const [o, r] = this.service.limitRange(e || this.$props.min, i || this.$props.max, s || this.$props.value);
      this.service.configure(this.serviceSettings({
        min: o,
        max: r
      }));
    },
    serviceSettings(t) {
      const e = {
        boundRange: this.$props.boundRange,
        insertUndividedMax: !1,
        min: c(this.$props.min),
        max: c(this.$props.max),
        part: this.$props.part,
        step: this.$props.step
      }, i = Object.assign({}, e, t);
      return i.boundRange = i.part.type !== "hour" || this.$props.boundRange, i;
    },
    handleScrollAction({
      target: t,
      animationInProgress: e
    }) {
      if (this.virtualization && t && !e) {
        this.animateToIndex = !1;
        const i = this.virtualization.itemIndex(this.itemOffset(t.scrollTop)), s = this.service.data(this.$props.value)[i];
        this.handleChange(s);
      }
    },
    handleFocus(t) {
      this.$emit("focus", t);
    },
    handleBlur(t) {
      this.$emit("blur", t);
    },
    handleMouseOver() {
      this.$el && v && document.activeElement !== this.$el && this.$el.focus({
        preventScroll: !0
      });
    },
    handleKeyDown(t) {
      const {
        keyCode: e
      } = t;
      (e === n.down || e === n.up || e === n.end || e === n.home) && t.preventDefault();
      const s = (z[t.keyCode] || g)(this.service.data(this.$props.value), this.service.selectedIndex(this.$props.value));
      s && this.handleChange(s);
    },
    handleChange(t) {
      const e = this.service.apply(this.$props.value, t.value);
      this.$props.value.getTime() !== e.getTime() && (this.currentValue = e, this.$emit("change", e));
    }
  }
});
export {
  F as TimeList
};