@progress/kendo-vue-dateinputs 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/dist/es/timepicker/TimePicker.js

@@ -1,679 +0,0 @@
-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/main';
-import { DateInput } from '../dateinput/DateInput';
-import { TimeSelector } from './TimeSelector';
-import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME, setTime } from '../utils';
-import { isInRange, isSmallerThanMin, isBiggerThanMax } from './utils';
-import { defaultFormatPlaceholder } from '../dateinput/utils';
-import { clockIcon } from '@progress/kendo-svg-icons';
-/**
- * @hidden
- */
-var TimePickerVue2 = {
-  name: 'KendoTimePicker',
-  // @ts-ignore
-  emits: {
-    'changemodel': null,
-    'update:modelValue': null,
-    'iconclick': null,
-    'change': null,
-    'focus': null,
-    'blur': null,
-    'keydown': null,
-    'open': null,
-    'close': 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');
-    }
-  },
-  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._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),
-        ariaHasPopup: 'grid',
-        ariaExpanded: this.computedShow,
-        ariaRole: "combobox",
-        ariaControls: this._popupId
-      },
-      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),
-      ariaHasPopup: 'grid',
-      ariaExpanded: this.computedShow,
-      ariaRole: "combobox",
-      ariaControls: this._popupId
-    }, 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',
-        svgIcon: clockIcon,
-        title: toggleTimeMessage,
-        rounded: null,
-        "aria-controls": this._popupId,
-        "aria-label": toggleClockMessage
-      },
-      tabIndex: -1,
-      icon: 'clock',
-      svgIcon: clockIcon,
-      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;
-      this.$emit(show ? 'open' : 'close', {
-        component: this
-      });
-    },
-    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.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;
-      this.setShow(false);
-    },
-    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 };