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

package/dist/es/datetimepicker/DateTimePicker.js

@@ -1,671 +0,0 @@
-// @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 { Button } from '@progress/kendo-vue-buttons';
-import { Popup } from '@progress/kendo-vue-popup';
-import { cloneDate } from '@progress/kendo-date-math';
-import { classNames, guid, Keys, templateRendering, getListeners, getTemplate, validatePackage, canUseDOM, kendoThemeMaps, getDefaultSlots } from '@progress/kendo-vue-common';
-import { DateInput } from '../dateinput/DateInput';
-import { packageMetadata } from '../package-metadata';
-import { MIN_DATE, MAX_DATE, isInDateRange, MAX_TIME } from '../utils';
-import { messages, toggleDateTimeSelector } from '../messages/main';
-import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { DateTimeSelector } from './DateTimeSelector';
-import { isInTimeRange } from '../timepicker/utils';
-import { MIN_TIME } from '../defaults';
-import { defaultFormatPlaceholder } from '../dateinput/utils';
-import { calendarIcon } from '@progress/kendo-svg-icons';
-/**
- * @hidden
- */
-var DateTimePickerVue2 = {
-  name: 'KendoDateTimePicker',
-  // @ts-ignore
-  emits: {
-    'changemodel': null,
-    'update:modelValue': null,
-    'iconclick': null,
-    'change': null,
-    'focus': null,
-    'blur': null,
-    'keydown': null,
-    'open': null,
-    'close': null
-  },
-  props: {
-    modelValue: {
-      type: Date,
-      default: undefined
-    },
-    defaultShow: {
-      type: Boolean,
-      default: false
-    },
-    defaultValue: {
-      type: Date,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    dateInput: {
-      type: [String, Object, Function],
-      default: function _default() {
-        return undefined;
-      }
-    },
-    popup: {
-      type: [String, Object, Function],
-      default: function _default() {
-        return undefined;
-      }
-    },
-    calendar: {
-      type: [String, Object, Function],
-      default: function _default() {
-        return undefined;
-      }
-    },
-    focusedDate: Date,
-    format: {
-      type: [String, Object],
-      default: function _default() {
-        return 'g';
-      }
-    },
-    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_DATE;
-      }
-    },
-    max: {
-      type: Date,
-      default: function _default() {
-        return MAX_DATE;
-      }
-    },
-    maxTime: {
-      type: Date,
-      default: function _default() {
-        return cloneDate(MAX_TIME);
-      }
-    },
-    minTime: {
-      type: Date,
-      default: function _default() {
-        return cloneDate(MIN_TIME);
-      }
-    },
-    name: String,
-    label: String,
-    placeholder: String,
-    popupSettings: {
-      type: Object,
-      default: function _default() {
-        return {};
-      }
-    },
-    show: {
-      type: Boolean,
-      default: undefined
-    },
-    tabIndex: {
-      type: Number,
-      default: 0
-    },
-    title: {
-      type: String,
-      default: function _default() {
-        return '';
-      }
-    },
-    steps: {
-      type: Object,
-      default: function _default() {
-        return {};
-      }
-    },
-    value: Date,
-    weekNumber: {
-      type: Boolean,
-      default: false
-    },
-    width: String,
-    validationMessage: String,
-    required: {
-      type: Boolean,
-      default: false
-    },
-    validityStyles: {
-      type: Boolean,
-      default: true
-    },
-    validate: Boolean,
-    valid: {
-      type: Boolean,
-      default: undefined
-    },
-    cancelButton: {
-      type: Boolean,
-      default: true
-    }
-  },
-  model: {
-    event: 'changemodel'
-  },
-  created: function created() {
-    this._anchor = guid();
-    this._popupId = 'popup' + guid();
-    this._wrapper = null;
-    this._dateInput = null;
-    this._dateTimeSelector = null;
-    validatePackage(packageMetadata);
-    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,
-      shouldFocusDateInput: false,
-      isFocused: false
-    };
-  },
-  computed: {
-    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();
-    }
-    var dateInputElement = this.dateInputElement();
-    this._dateTimeSelector = this.$refs.dateTimeSelector;
-    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
-    this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
-    if (dateInputElement) {
-      dateInputElement.setAttribute('aria-haspopup', 'true');
-    }
-  },
-  updated: function updated() {
-    var dateInputElement = this.dateInputElement();
-    this._dateTimeSelector = this.$refs.dateTimeSelector;
-    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
-    if (this._dateTimeSelector && this.computedShow && !this._oldShow) {
-      this._dateTimeSelector.focus({
-        preventScroll: true
-      });
-    }
-    if (dateInputElement && !this.computedShow && this.shouldFocusDateInput) {
-      this._dateInput.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,
-      format = _b.format,
-      formatPlaceholder = _b.formatPlaceholder,
-      min = _b.min,
-      max = _b.max,
-      weekNumber = _b.weekNumber,
-      focusedDate = _b.focusedDate,
-      width = _b.width,
-      name = _b.name,
-      steps = _b.steps,
-      placeholder = _b.placeholder,
-      validationMessage = _b.validationMessage,
-      required = _b.required,
-      validityStyles = _b.validityStyles,
-      cancelButton = _b.cancelButton,
-      minTime = _b.minTime,
-      maxTime = _b.maxTime,
-      ariaLabelledBy = _b.ariaLabelledBy,
-      ariaDescribedBy = _b.ariaDescribedBy,
-      size = _b.size,
-      fillMode = _b.fillMode,
-      rounded = _b.rounded;
-    var _c = this.$props.popupSettings,
-      popupClass = _c.popupClass,
-      appendTo = _c.appendTo,
-      animate = _c.animate;
-    var isValid = !this.$props.validityStyles || this.validity().valid;
-    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,
-        ariaLabelledBy: ariaLabelledBy,
-        ariaDescribedBy: ariaDescribedBy,
-        max: max,
-        min: min,
-        minTime: minTime,
-        maxTime: maxTime,
-        name: name,
-        size: null,
-        rounded: null,
-        fillMode: null,
-        required: required,
-        steps: steps,
-        tabIndex: !this.computedShow ? tabIndex : -1,
-        title: title,
-        valid: this.validity().valid,
-        validationMessage: validationMessage,
-        validityStyles: validityStyles,
-        value: this.computedValue,
-        ariaHasPopup: 'dialog',
-        ariaExpanded: this.computedShow,
-        ariaRole: "combobox",
-        ariaControls: this._popupId
-      },
-      disabled: disabled,
-      format: format,
-      formatPlaceholder: formatPlaceholder,
-      id: id,
-      ariaLabelledBy: ariaLabelledBy,
-      ariaDescribedBy: ariaDescribedBy,
-      max: max,
-      min: min,
-      minTime: minTime,
-      maxTime: maxTime,
-      name: name,
-      size: null,
-      rounded: null,
-      fillMode: null,
-      onChange: this.handleValueChange,
-      on: this.v3 ? undefined : {
-        "change": this.handleValueChange
-      },
-      required: required,
-      steps: steps,
-      tabIndex: !this.computedShow ? tabIndex : -1,
-      title: title,
-      valid: this.validity().valid,
-      validationMessage: validationMessage,
-      validityStyles: validityStyles,
-      value: this.computedValue,
-      ariaHasPopup: 'dialog',
-      ariaExpanded: this.computedShow,
-      ariaRole: "combobox",
-      ariaControls: this._popupId
-    }, this.v3 ? function () {
-      return [defaultSlot];
-    } : [defaultSlot]);
-    var dateInputRendering = getTemplate.call(this, {
-      h: h,
-      template: dateInput,
-      defaultRendering: dateInputDefaultRendering
-    });
-    var calendar = this.$props.calendar ? templateRendering.call(this, this.$props.calendar, getListeners.call(this)) : undefined;
-    var dataTimeSelector =
-    // @ts-ignore  function children
-    h(DateTimeSelector, {
-      ref: 'dateTimeSelector',
-      cancelButton: cancelButton,
-      attrs: this.v3 ? undefined : {
-        cancelButton: cancelButton,
-        value: this.computedValue,
-        disabled: disabled,
-        weekNumber: weekNumber,
-        min: this.$props.min,
-        max: this.$props.max,
-        minTime: minTime,
-        maxTime: maxTime,
-        focusedDate: focusedDate,
-        format: format,
-        calendar: calendar,
-        steps: steps
-      },
-      value: this.computedValue,
-      onChange: this.handleValueChange,
-      on: this.v3 ? undefined : {
-        "change": this.handleValueChange,
-        "reject": this.handleReject,
-        "focus": this.timeSelectorFocus,
-        "blur": this.timeSelectorBlur,
-        "keydown": this.handleKeyDown
-      },
-      onReject: this.handleReject,
-      disabled: disabled,
-      weekNumber: weekNumber,
-      min: this.$props.min,
-      max: this.$props.max,
-      minTime: minTime,
-      maxTime: maxTime,
-      focusedDate: focusedDate,
-      format: format,
-      calendar: calendar,
-      steps: steps,
-      onFocus: this.timeSelectorFocus,
-      onBlur: this.timeSelectorBlur,
-      onKeydown: this.handleKeyDown
-    });
-    var popupClassNames = classNames('k-datetime-container k-reset', popupClass);
-    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,
-        popupClass: popupClassNames,
-        id: this._popupId,
-        anchorAlign: {
-          horizontal: 'left',
-          vertical: 'bottom'
-        },
-        popupAlign: {
-          horizontal: 'left',
-          vertical: 'top'
-        },
-        appendTo: appendTo,
-        animate: animate
-      },
-      anchor: this._anchor,
-      popupClass: popupClassNames,
-      id: this._popupId,
-      anchorAlign: {
-        horizontal: 'left',
-        vertical: 'bottom'
-      },
-      popupAlign: {
-        horizontal: 'left',
-        vertical: 'top'
-      },
-      appendTo: appendTo,
-      animate: animate
-    }, this.v3 ? function () {
-      return [dataTimeSelector];
-    } : [dataTimeSelector]);
-    var popupRendering = getTemplate.call(this, {
-      h: h,
-      template: popup,
-      defaultRendering: popupDefaultRendering,
-      defaultSlots: dataTimeSelector
-    });
-    var dateTimePicker = h("div", {
-      "class": classNames('k-input', 'k-datetimepicker', (_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)),
-      ref: this.v3 ? function (el) {
-        _this.kendoAnchorRef = el;
-      } : this._anchor,
-      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
-    }, [dateInputRendering,
-    // @ts-ignore
-    h(Button, {
-      type: "button",
-      attrs: this.v3 ? undefined : {
-        type: "button",
-        tabIndex: -1,
-        icon: 'calendar',
-        svgIcon: calendarIcon,
-        title: provideLocalizationService(this).toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]),
-        rounded: null,
-        "aria-controls": this._popupId,
-        "aria-label": provideLocalizationService(this).toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])
-      },
-      tabIndex: -1,
-      icon: 'calendar',
-      svgIcon: calendarIcon,
-      onMousedown: this.handleIconMouseDown,
-      on: this.v3 ? undefined : {
-        "mousedown": this.handleIconMouseDown,
-        "click": this.handleDateIconClick
-      },
-      onClick: this.handleDateIconClick,
-      title: provideLocalizationService(this).toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]),
-      rounded: null,
-      "class": "k-input-button",
-      "aria-controls": this._popupId,
-      "aria-label": provideLocalizationService(this).toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])
-    }), 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 [dateTimePicker];
-    } : [dateTimePicker]) : dateTimePicker;
-  },
-  methods: {
-    validity: function validity() {
-      var inRange = isInDateRange(this.computedValue, this.$props.min, this.$props.max) && isInTimeRange(this.computedValue, this.$props.minTime || MIN_TIME, this.$props.maxTime || MAX_TIME);
-      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: this.computedValue && this.$props.max.getTime() < this.computedValue.getTime() || false,
-        rangeUnderflow: this.computedValue && this.computedValue.getTime() < this.$props.min.getTime() || false,
-        valid: valid,
-        valueMissing: this.computedValue === null
-      };
-    },
-    getDateInputText: function getDateInputText() {
-      return this.computedValue ? true : this._dateInput ? this._dateInput._element.value : '';
-    },
-    focus: function focus() {
-      var dateInputElement = this.dateInputElement();
-      if (dateInputElement) {
-        dateInputElement.focus();
-      }
-    },
-    setShow: function setShow(show) {
-      if (this.computedShow === show) {
-        return;
-      }
-      this.currentShow = show;
-      this.$emit(show ? 'open' : 'close', {
-        component: this
-      });
-    },
-    handleReject: function handleReject() {
-      this.setShow(false);
-    },
-    handleValueChange: function handleValueChange(event) {
-      this.currentValue = cloneDate(event.value || undefined);
-      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.isFocused = true;
-      this.$emit('focus', event);
-    },
-    handleBlur: function handleBlur(event) {
-      this.createBlurTimeout();
-      this.$emit('blur', event);
-    },
-    timeSelectorBlur: function timeSelectorBlur(event) {
-      this.$emit('blur', event);
-      clearTimeout(this._blurTimeout);
-      this.createBlurTimeout();
-    },
-    timeSelectorFocus: function timeSelectorFocus() {
-      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);
-    },
-    handleDateIconClick: function handleDateIconClick(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.$data.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);
-    },
-    dateInputElement: function dateInputElement() {
-      return this._dateInput && this._dateInput.$el || this._wrapper && this._wrapper.querySelector('.k-dateinput-wrap > input.k-input');
-    }
-  }
-};
-/**
- * @hidden
- */
-var DateTimePicker = DateTimePickerVue2;
-export { DateTimePicker, DateTimePickerVue2 };