@progress/kendo-vue-dateinputs 3.5.0 → 3.5.1-dev.202208100944

package/dist/esm/timepicker/TimePicker.js

@@ -0,0 +1,685 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+var inject = allVue.inject;
+import { FloatingLabel } from '@progress/kendo-vue-labels';
+import { Popup } from '@progress/kendo-vue-popup';
+import { cloneDate } from '@progress/kendo-date-math';
+import { classNames, guid, Keys, templateRendering, getListeners, getTemplate, canUseDOM, kendoThemeMaps, getDefaultSlots } from '@progress/kendo-vue-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { messages, toggleTimeSelector, toggleClock } from '../messages.js';
+import { DateInput } from '../dateinput/DateInput.js';
+import { TimeSelector } from './TimeSelector.js';
+import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME, setTime } from '../utils.js';
+import { isInRange, isSmallerThanMin, isBiggerThanMax } from './utils.js';
+import { defaultFormatPlaceholder } from '../dateinput/utils.js';
+/**
+ * @hidden
+ */
+
+var TimePickerVue2 = {
+  name: 'KendoTimePicker',
+  // @ts-ignore
+  emits: {
+    'changemodel': null,
+    'update:modelValue': null,
+    'iconclick': null,
+    'change': null,
+    'focus': null,
+    'blur': null,
+    'keydown': null
+  },
+  model: {
+    event: 'changemodel'
+  },
+  props: {
+    cancelButton: {
+      type: Boolean,
+      default: true
+    },
+    nowButton: {
+      type: Boolean,
+      default: undefined
+    },
+    defaultShow: {
+      type: Boolean,
+      default: false
+    },
+    modelValue: {
+      type: Date,
+      default: undefined
+    },
+    defaultValue: {
+      type: Date,
+      default: function _default() {
+        return null;
+      }
+    },
+    dateInput: {
+      type: [String, Object, Function],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    popup: {
+      type: [String, Object, Function],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    format: {
+      type: [String, Object],
+      default: function _default() {
+        return 't';
+      }
+    },
+    formatPlaceholder: {
+      type: [String, Object],
+      default: function _default() {
+        return defaultFormatPlaceholder;
+      }
+    },
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return ['solid', 'flat', 'outline'].includes(value);
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large'].includes(value);
+      }
+    },
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    min: {
+      type: Date,
+      default: function _default() {
+        return MIN_TIME;
+      }
+    },
+    max: {
+      type: Date,
+      default: function _default() {
+        return MAX_TIME;
+      }
+    },
+    name: String,
+    label: String,
+    placeholder: String,
+    popupSettings: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    show: {
+      type: Boolean,
+      default: undefined
+    },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    steps: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    smoothScroll: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: function _default() {
+        return '';
+      }
+    },
+    value: {
+      type: Date,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    width: [Number, String],
+    validationMessage: String,
+    required: {
+      type: Boolean,
+      default: false
+    },
+    validityStyles: {
+      type: Boolean,
+      default: true
+    },
+    validate: Boolean,
+    valid: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  created: function created() {
+    this._anchor = guid();
+    this._popupId = 'popup' + guid();
+    this._element = null;
+    this._wrapper = null;
+    this._dateInput = null;
+    this._timeSelector = null;
+    this.shouldFocusDateInput = false;
+    this.currentValue = this.$props.defaultValue;
+    this.currentShow = this.$props.defaultShow;
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      currentValue: null,
+      currentShow: false,
+      valueDuringOnChange: undefined,
+      showDuringOnChange: undefined,
+      isFocused: false
+    };
+  },
+  computed: {
+    timeSelector: function timeSelector() {
+      return this._timeSelector;
+    },
+    computedValue: function computedValue() {
+      var value = this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.$data.currentValue;
+      return value !== null ? cloneDate(value) : null;
+    },
+    computedShow: function computedShow() {
+      return this.showDuringOnChange !== undefined ? this.showDuringOnChange : this.$props.show !== undefined ? this.$props.show : this.currentShow;
+    }
+  },
+  watch: {
+    show: function show(_newShow, oldShow) {
+      this._oldShow = oldShow;
+    },
+    currentShow: function currentShow(_newShow, oldShow) {
+      this._oldShow = oldShow;
+    }
+  },
+  mounted: function mounted() {
+    if (this.computedShow) {
+      // If defaultShow is true during the initial render, the popup is not aligned.
+      this.$forceUpdate();
+    }
+
+    this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
+    this._timeSelector = this.$refs.timeSelector;
+    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
+
+    if (this._dateInput && this._dateInput.element()) {
+      this._dateInput.element().setAttribute('aria-haspopup', 'true');
+
+      this._dateInput.element().setAttribute('aria-expanded', "".concat(this.computedShow));
+    }
+  },
+  updated: function updated() {
+    this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
+    this._timeSelector = this.$refs.timeSelector;
+    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
+
+    if (this._dateInput && this._dateInput.element()) {
+      this._dateInput.element().setAttribute('aria-expanded', "".concat(this.computedShow));
+    }
+
+    if (this._timeSelector && this.computedShow && !this._oldShow) {
+      this._timeSelector.focusActiveList();
+    } else if (this._dateInput && this._dateInput.element() && !this.computedShow && this.shouldFocusDateInput) {
+      this._dateInput.element().focus({
+        preventScroll: true
+      });
+    }
+
+    this.shouldFocusDateInput = false;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoAnchorRef = ref(null);
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoAnchorRef: kendoAnchorRef,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _a;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var _b = this.$props,
+        disabled = _b.disabled,
+        tabIndex = _b.tabIndex,
+        title = _b.title,
+        id = _b.id,
+        placeholder = _b.placeholder,
+        format = _b.format,
+        formatPlaceholder = _b.formatPlaceholder,
+        smoothScroll = _b.smoothScroll,
+        width = _b.width,
+        name = _b.name,
+        steps = _b.steps,
+        cancelButton = _b.cancelButton,
+        nowButton = _b.nowButton,
+        validationMessage = _b.validationMessage,
+        required = _b.required,
+        validityStyles = _b.validityStyles,
+        ariaLabelledBy = _b.ariaLabelledBy,
+        ariaDescribedBy = _b.ariaDescribedBy,
+        size = _b.size,
+        rounded = _b.rounded,
+        fillMode = _b.fillMode;
+    var _c = this.$props.popupSettings,
+        popupClass = _c.popupClass,
+        appendTo = _c.appendTo,
+        animate = _c.animate;
+    var isValid = !this.$props.validityStyles || this.validity().valid;
+    var wrapperClassNames = classNames('k-picker-wrap', {
+      'k-invalid': !isValid,
+      'k-disabled': disabled,
+      'k-focus': this.isFocused
+    });
+    var popupClassNames = classNames('k-group k-reset', popupClass);
+    var localizationService = provideLocalizationService(this);
+    var toggleClockMessage = localizationService.toLanguageString(toggleClock, messages[toggleClock]);
+    var toggleTimeMessage = localizationService.toLanguageString(toggleTimeSelector, messages[toggleTimeSelector]);
+    var dateInput = this.$props.dateInput ? templateRendering.call(this, this.$props.dateInput, getListeners.call(this)) : undefined;
+    var dateInputDefaultRendering = // @ts-ignore  function children
+    h(DateInput, {
+      ref: this.v3 ? function (el) {
+        _this.dateInputRef = el;
+      } : 'dateInput',
+      placeholder: placeholder,
+      attrs: this.v3 ? undefined : {
+        placeholder: placeholder,
+        disabled: disabled,
+        format: format,
+        formatPlaceholder: formatPlaceholder,
+        id: id,
+        size: null,
+        rounded: null,
+        fillMode: null,
+        ariaLabelledBy: ariaLabelledBy,
+        ariaDescribedBy: ariaDescribedBy,
+        max: this.normalizeTime(this.$props.max),
+        min: this.normalizeTime(this.$props.min),
+        name: name,
+        required: required,
+        steps: steps,
+        tabIndex: !this.computedShow ? tabIndex : -1,
+        title: title,
+        valid: this.validity().valid,
+        validationMessage: validationMessage,
+        validityStyles: validityStyles,
+        value: this.computedValue && this.normalizeTime(this.computedValue)
+      },
+      disabled: disabled,
+      format: format,
+      formatPlaceholder: formatPlaceholder,
+      id: id,
+      size: null,
+      rounded: null,
+      fillMode: null,
+      ariaLabelledBy: ariaLabelledBy,
+      ariaDescribedBy: ariaDescribedBy,
+      max: this.normalizeTime(this.$props.max),
+      min: this.normalizeTime(this.$props.min),
+      name: name,
+      onChange: this.handleInputValueChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleInputValueChange
+      },
+      required: required,
+      steps: steps,
+      tabIndex: !this.computedShow ? tabIndex : -1,
+      title: title,
+      valid: this.validity().valid,
+      validationMessage: validationMessage,
+      validityStyles: validityStyles,
+      value: this.computedValue && this.normalizeTime(this.computedValue)
+    }, this.v3 ? function () {
+      return [defaultSlot];
+    } : [defaultSlot]);
+    var timeSelector = // @ts-ignore  function children
+    h(TimeSelector, {
+      ref: 'timeSelector',
+      cancelButton: cancelButton,
+      attrs: this.v3 ? undefined : {
+        cancelButton: cancelButton,
+        disabled: disabled,
+        nowButton: nowButton,
+        format: format,
+        min: this.$props.min,
+        max: this.$props.max,
+        steps: steps,
+        smoothScroll: smoothScroll,
+        value: this.computedValue
+      },
+      disabled: disabled,
+      nowButton: nowButton,
+      format: format,
+      min: this.$props.min,
+      max: this.$props.max,
+      steps: steps,
+      smoothScroll: smoothScroll,
+      value: this.computedValue,
+      onChange: this.handleValueChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleValueChange,
+        "reject": this.handleValueReject,
+        "focus": this.timeFocus,
+        "blur": this.timeBlur,
+        "keydown": this.handleKeyDown
+      },
+      onReject: this.handleValueReject,
+      onFocus: this.timeFocus,
+      onBlur: this.timeBlur,
+      onKeydown: this.handleKeyDown
+    });
+    var dateInputRendering = getTemplate.call(this, {
+      h: h,
+      template: dateInput,
+      defaultRendering: dateInputDefaultRendering,
+      additionalListeners: {
+        change: this.handleInputValueChange
+      }
+    });
+    var popup = this.$props.popup ? templateRendering.call(this, this.$props.popup, getListeners.call(this)) : undefined;
+    var popupDefaultRendering = // @ts-ignore function children
+    h(Popup, {
+      show: this.computedShow,
+      attrs: this.v3 ? undefined : {
+        show: this.computedShow,
+        anchor: this._anchor,
+        id: this._popupId,
+        anchorAlign: {
+          horizontal: 'left',
+          vertical: 'bottom'
+        },
+        popupAlign: {
+          horizontal: 'left',
+          vertical: 'top'
+        },
+        appendTo: appendTo,
+        animate: animate
+      },
+      anchor: this._anchor,
+      "class": popupClassNames,
+      id: this._popupId,
+      anchorAlign: {
+        horizontal: 'left',
+        vertical: 'bottom'
+      },
+      popupAlign: {
+        horizontal: 'left',
+        vertical: 'top'
+      },
+      appendTo: appendTo,
+      animate: animate
+    }, this.v3 ? function () {
+      return [timeSelector];
+    } : [timeSelector]);
+    var popupRendering = getTemplate.call(this, {
+      h: h,
+      template: popup,
+      defaultRendering: popupDefaultRendering,
+      defaultSlots: timeSelector
+    });
+    var timePicker = h("div", {
+      "class": classNames('k-input', 'k-timepicker', (_a = {}, _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a['k-focus'] = this.isFocused, _a)),
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown,
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur
+      },
+      style: {
+        width: width
+      },
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur,
+      ref: this.v3 ? function (el) {
+        _this.kendoAnchorRef = el;
+      } : this._anchor
+    }, [dateInputRendering, // @ts-ignore
+    h(KButton, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        tabIndex: -1,
+        icon: 'clock',
+        title: toggleTimeMessage,
+        rounded: null,
+        "aria-controls": this._popupId,
+        "aria-label": toggleClockMessage
+      },
+      tabIndex: -1,
+      icon: 'clock',
+      onMousedown: this.handleIconMouseDown,
+      on: this.v3 ? undefined : {
+        "mousedown": this.handleIconMouseDown,
+        "click": this.handleIconClick
+      },
+      onClick: this.handleIconClick,
+      title: toggleTimeMessage,
+      rounded: null,
+      "class": "k-input-button",
+      "aria-controls": this._popupId,
+      "aria-label": toggleClockMessage
+    }), popupRendering]);
+    return this.$props.label ? // @ts-ignore function children
+    h(FloatingLabel, {
+      label: this.$props.label,
+      attrs: this.v3 ? undefined : {
+        label: this.$props.label,
+        editorId: id,
+        editorValid: isValid,
+        editorValue: this.getDateInputText(),
+        editorPlaceholder: this.$props.placeholder,
+        editorDisabled: this.$props.disabled
+      },
+      editorId: id,
+      editorValid: isValid,
+      editorValue: this.getDateInputText(),
+      editorPlaceholder: this.$props.placeholder,
+      editorDisabled: this.$props.disabled,
+      style: {
+        width: width
+      }
+    }, this.v3 ? function () {
+      return [timePicker];
+    } : [timePicker]) : timePicker;
+  },
+  methods: {
+    validity: function validity() {
+      var value = this.computedValue && this.normalizeTime(this.computedValue);
+      var min = this.normalizeTime(this.$props.min);
+      var max = this.normalizeTime(this.$props.max);
+      var inRange = isInRange(value, min, max);
+      var customError = this.$props.validationMessage !== undefined;
+      var isValid = (!this.$props.required || this.computedValue !== null) && inRange;
+      var valid = this.$props.valid !== undefined ? this.$props.valid : isValid;
+      return {
+        customError: customError,
+        rangeOverflow: isBiggerThanMax(value, max),
+        rangeUnderflow: isSmallerThanMin(value, min),
+        valid: valid,
+        valueMissing: this.computedValue === null
+      };
+    },
+    getDateInputText: function getDateInputText() {
+      return this.computedValue ? true : this._dateInput ? this._dateInput._element.value : '';
+    },
+    focus: function focus() {
+      if (this._dateInput) {
+        this._dateInput.focus();
+      }
+    },
+    normalizeTime: function normalizeTime(date) {
+      return setTime(MIDNIGHT_DATE, date);
+    },
+    setShow: function setShow(show) {
+      if (this.computedShow === show) {
+        return;
+      }
+
+      this.currentShow = show;
+    },
+    mergeTime: function mergeTime(value) {
+      return this.computedValue && value ? setTime(this.computedValue, value) : value;
+    },
+    handleInputValueChange: function handleInputValueChange(event) {
+      var value = this.mergeTime(event.value);
+      this.handleValueChange(__assign(__assign({}, event), {
+        value: value
+      }));
+    },
+    handleValueChange: function handleValueChange(event) {
+      this.currentValue = cloneDate(event.value);
+      this.currentShow = false;
+      this.valueDuringOnChange = event.value;
+      this.showDuringOnChange = false;
+      this.shouldFocusDateInput = true;
+      this.$emit('changemodel', this.computedValue);
+      this.$emit('update:modelValue', this.computedValue);
+      this.$emit('change', {
+        event: event.event,
+        value: this.computedValue,
+        show: this.computedShow,
+        component: this,
+        target: {
+          name: this.$props.name,
+          value: this.computedValue,
+          valueAsDate: this.computedValue
+        }
+      });
+      this.valueDuringOnChange = undefined;
+      this.showDuringOnChange = undefined;
+    },
+    handleFocus: function handleFocus(event) {
+      this._oldShow = this.computedShow;
+      this.isFocused = true;
+      this.$emit('focus', event);
+    },
+    handleBlur: function handleBlur(event) {
+      this.createBlurTimeout();
+      this.$emit('blur', event);
+    },
+    timeBlur: function timeBlur(event) {
+      this.$emit('blur', event);
+      clearTimeout(this._blurTimeout);
+      this.createBlurTimeout();
+    },
+    timeFocus: function timeFocus() {
+      clearTimeout(this._blurTimeout);
+    },
+    createBlurTimeout: function createBlurTimeout() {
+      var _this = this;
+
+      var that = this;
+      this._blurTimeout = setTimeout(function () {
+        _this.isFocused = false;
+        var isInPopup = document.activeElement && document.activeElement.closest("#".concat(that._popupId));
+
+        var isElementActive = that._dateInput && canUseDOM && document.activeElement !== that._dateInput.element();
+
+        if (isElementActive && !isInPopup) {
+          that.setShow(false);
+        }
+      }, 200);
+    },
+    handleValueReject: function handleValueReject(_) {
+      this.setShow(false);
+    },
+    handleIconClick: function handleIconClick(event) {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      this.shouldFocusDateInput = true;
+      this.setShow(!this.computedShow);
+      this.$emit('iconclick', event);
+    },
+    handleIconMouseDown: function handleIconMouseDown(event) {
+      event.preventDefault();
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      var altKey = event.altKey,
+          keyCode = event.keyCode;
+
+      if (keyCode === Keys.tab && this._dateInput && event.target !== this._dateInput._element) {
+        event.preventDefault();
+        this.shouldFocusDateInput = true;
+        this.setShow(false);
+        return;
+      }
+
+      if (keyCode === Keys.esc) {
+        this.shouldFocusDateInput = true;
+        this.setShow(false);
+        return;
+      }
+
+      if (altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.shouldFocusDateInput = keyCode === Keys.up;
+        this.setShow(keyCode === Keys.down);
+      }
+
+      this.$emit('keydown', event);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var TimePicker = TimePickerVue2;
+export { TimePicker, TimePickerVue2 };