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

package/dist/esm/daterangepicker/DateRangePicker.js

@@ -0,0 +1,654 @@
+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 { Popup } from '@progress/kendo-vue-popup';
+import { cloneDate } from '@progress/kendo-date-math';
+import { guid, Keys, canUseDOM, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { validatePackage, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+import { DateInput } from '../dateinput/DateInput.js';
+import { Calendar } from '../calendar/components/Calendar.js';
+import { EMPTY_SELECTIONRANGE } from '../calendar/models.js';
+import { MIN_DATE, MAX_DATE } from '../defaults.js';
+import { swapStartEnd, start, end, separator, messages } from '../messages.js';
+var WRAPPER_STYLES = {
+  display: 'inline-block'
+};
+/**
+ * @hidden
+ */
+
+var DateRangePickerVue2 = {
+  name: 'KendoDateRangePicker',
+  // @ts-ignore
+  emits: {
+    blur: null,
+    change: null,
+    'changemodel': null,
+    'update:modelValue': null,
+    focus: null,
+    keydown: null
+  },
+  model: {
+    event: 'changemodel'
+  },
+  props: {
+    allowReverse: {
+      type: Boolean,
+      default: false
+    },
+    calendarSettings: Object,
+    defaultShow: {
+      type: Boolean,
+      default: false
+    },
+    defaultValue: {
+      type: Object,
+      default: function _default() {
+        return EMPTY_SELECTIONRANGE;
+      }
+    },
+    modelValue: {
+      type: Object,
+      default: undefined
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    popup: [String, Object, Function],
+    calendar: [String, Object, Function],
+    startDateInput: [String, Object, Function],
+    endDateInput: [String, Object, Function],
+    endDateInputSettings: Object,
+    focusedDate: Date,
+    format: {
+      type: [String, Object],
+      default: function _default() {
+        return 'd';
+      }
+    },
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    max: {
+      type: Date,
+      default: function _default() {
+        return MAX_DATE;
+      }
+    },
+    min: {
+      type: Date,
+      default: function _default() {
+        return MIN_DATE;
+      }
+    },
+    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);
+      }
+    },
+    popupSettings: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    show: {
+      type: Boolean,
+      default: undefined
+    },
+    startDateInputSettings: Object,
+    swapButton: {
+      type: Boolean,
+      default: false
+    },
+    tabIndex: Number,
+    value: {
+      type: Object,
+      default: function _default() {
+        return undefined;
+      }
+    }
+  },
+  created: function created() {
+    this._element = null;
+    this._wrapper = null;
+    this._calendar = null;
+    this._startDateInput = null;
+    this._endDateInput = null;
+    this._popupId = guid();
+    this._anchor = guid();
+    this._startInputId = guid();
+    this._endInputId = guid();
+    this._calendarId = guid();
+    validatePackage(packageMetadata);
+    this.currentShow = this.$props.show || this.$props.defaultShow;
+    this.currentValue = this.$props.value || this.$props.defaultValue;
+    this.initialAnimation = this.currentShow;
+  },
+  mounted: function mounted() {
+    this._calendar = this.v3 ? this.calendarRef : this.$refs.calendar;
+    this._startDateInput = this.v3 ? this.startDateInputRef : this.$refs.startDateInput;
+    this._endDateInput = this.v3 ? this.endDateInputRef : this.$refs.endDateInput;
+
+    if (this.computedShow) {
+      // If defaultShow is true during the initial render, the popup is not aligned.
+      this.$forceUpdate();
+      this.$nextTick(function () {
+        this.initialAnimation = false;
+      });
+    }
+  },
+  updated: function updated() {
+    this._calendar = this.v3 ? this.calendarRef : this.$refs.calendar;
+    this._startDateInput = this.v3 ? this.startDateInputRef : this.$refs.startDateInput;
+    this._endDateInput = this.v3 ? this.endDateInputRef : this.$refs.endDateInput;
+
+    if (this.shouldFocusCalendar) {
+      this.focusCalendarElement();
+    }
+
+    if (this.shouldFocusDateInput) {
+      this.focusDateInputElement();
+    }
+
+    this.shouldFocusCalendar = false;
+    this.shouldFocusDateInput = false;
+  },
+  data: function data() {
+    return {
+      currentShow: false,
+      currentValue: null,
+      valueDuringOnChange: undefined,
+      shouldFocusDateInput: false,
+      shouldFocusCalendar: false
+    };
+  },
+  computed: {
+    rootClassName: function rootClassName() {
+      var _a;
+
+      return _a = {
+        'k-daterangepicker': true
+      }, _a['k-disabled'] = this.$props.disabled, _a;
+    },
+    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.currentValue;
+      return value || EMPTY_SELECTIONRANGE;
+    },
+    computedShow: function computedShow() {
+      return this.$props.show !== undefined ? this.$props.show : this.currentShow;
+    },
+    swapButtonClass: function swapButtonClass() {
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          rounded = _b.rounded;
+      return _a = {
+        'k-button': true
+      }, _a["k-button-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a['k-button-flat'] = true, _a['k-button-flat-base'] = true, _a['k-icon-button'] = true, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a;
+    }
+  },
+  // @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 _this = this;
+
+    var h = gh || createElement;
+    var value = this.computedValue || EMPTY_SELECTIONRANGE;
+    var _a = this.$props,
+        size = _a.size,
+        fillMode = _a.fillMode,
+        rounded = _a.rounded;
+    var startDateInputId = (this.$props.startDateInputSettings || {}).id || this._startInputId;
+    var endDateInputId = (this.$props.endDateInputSettings || {}).id || this._endInputId;
+    var localizationService = provideLocalizationService(this);
+    var startMessage = localizationService.toLanguageString(start, messages[start]);
+    var endMessage = localizationService.toLanguageString(end, messages[end]);
+    var separatorMessage = localizationService.toLanguageString(separator, messages[separator]);
+    var startDateInputRender = this.$props.startDateInput ? templateRendering.call(this, this.$props.startDateInput, getListeners.call(this)) : undefined;
+
+    var startSettings = __assign({
+      label: startMessage,
+      format: this.$props.format,
+      min: this.min,
+      max: this.max,
+      id: this._startInputId,
+      disabled: this.$props.disabled,
+      valid: this.$props.valid,
+      size: size,
+      fillMode: fillMode,
+      rounded: rounded,
+      ariaHasPopup: true,
+      ariaExpanded: this.computedShow,
+      value: value.start
+    }, this.$props.startDateInputSettings);
+
+    var startDateInputDefaultRendering = h(DateInput, __assign(__assign({
+      ref: this.v3 ? function (el) {
+        _this.startDateInputRef = el;
+      } : 'startDateInput',
+      attrs: this.v3 ? undefined : startSettings
+    }, startSettings), {
+      onChange: this.handleEndChange,
+      on: this.v3 ? undefined : {
+        'change': this.handleEndChange
+      }
+    }));
+    var startDateInputRendering = getTemplate.call(this, {
+      h: h,
+      template: startDateInputRender,
+      defaultRendering: startDateInputDefaultRendering,
+      additionalListeners: {
+        change: this.handleStartChange
+      }
+    });
+    var endDateInputRender = this.$props.endDateInput ? templateRendering.call(this, this.$props.endDateInput, getListeners.call(this)) : undefined;
+
+    var endSettings = __assign({
+      label: endMessage,
+      format: this.$props.format,
+      min: this.min,
+      max: this.max,
+      id: this._endInputId,
+      size: size,
+      fillMode: fillMode,
+      rounded: rounded,
+      disabled: this.$props.disabled,
+      valid: this.$props.valid,
+      ariaHasPopup: true,
+      ariaExpanded: this.computedShow,
+      value: value.end
+    }, this.$props.endDateInputSettings);
+
+    var endDateInputDefaultRendering = h(DateInput, __assign(__assign({
+      ref: this.v3 ? function (el) {
+        _this.endDateInputRef = el;
+      } : 'endDateInput',
+      attrs: this.v3 ? undefined : endSettings
+    }, endSettings), {
+      onChange: this.handleEndChange,
+      on: this.v3 ? undefined : {
+        'change': this.handleEndChange
+      }
+    }));
+    var endDateInputRendering = getTemplate.call(this, {
+      h: h,
+      template: endDateInputRender,
+      defaultRendering: endDateInputDefaultRendering,
+      additionalListeners: {
+        change: this.handleEndChange
+      }
+    });
+    var calendarRender = this.$props.calendar ? templateRendering.call(this, this.$props.calendar, getListeners.call(this)) : undefined;
+
+    var calendarSettings = __assign({
+      id: this._calendarId,
+      min: this.min,
+      max: this.max,
+      views: 2,
+      allowReverse: this.$props.allowReverse,
+      mode: 'range',
+      focusedDate: this.$props.focusedDate,
+      disabled: this.$props.disabled,
+      value: value
+    }, this.$props.calendarSettings);
+
+    var calendarDefaultRendering = h(Calendar, __assign({
+      ref: this.v3 ? function (el) {
+        _this.calendarRef = el;
+      } : 'calendar',
+      attrs: this.v3 ? undefined : calendarSettings,
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        'keydown': this.handleKeyDown,
+        'focus': this.calendarFocus,
+        'blur': this.calendarBlur,
+        'change': this.handleCalendarChange
+      },
+      onFocus: this.calendarFocus,
+      onBlur: this.calendarBlur,
+      onChange: this.handleCalendarChange
+    }, calendarSettings));
+    var calendarRendering = getTemplate.call(this, {
+      h: h,
+      template: calendarRender,
+      defaultRendering: calendarDefaultRendering,
+      additionalListeners: {
+        change: this.handleCalendarChange,
+        keydown: this.handleKeyDown,
+        focus: this.calendarFocus,
+        blur: this.calendarBlur
+      }
+    });
+    var _b = this.$props.popupSettings,
+        popupClass = _b.popupClass,
+        animate = _b.animate;
+    var popupRender = this.$props.popup ? templateRendering.call(this, this.$props.popup, getListeners.call(this)) : undefined;
+
+    var popupSettings = __assign({
+      show: this.computedShow,
+      anchor: this._anchor,
+      id: this._popupId,
+      anchorAlign: {
+        horizontal: 'left',
+        vertical: 'bottom'
+      },
+      popupAlign: {
+        horizontal: 'left',
+        vertical: 'top'
+      },
+      animate: this.initialAnimation ? false : animate
+    }, this.$props.popupSettings);
+
+    var popupDefaultRendering = h(Popup, __assign({
+      attrs: this.v3 ? undefined : popupSettings,
+      'class': popupClass
+    }, popupSettings), this.v3 ? function () {
+      return [calendarRendering];
+    } : [calendarRendering]);
+    var popupRendering = getTemplate.call(this, {
+      h: h,
+      template: popupRender,
+      defaultRendering: popupDefaultRendering,
+      defaultSlots: calendarRendering
+    });
+    var reverseButton = h("button", {
+      "class": this.swapButtonClass,
+      role: "button",
+      attrs: this.v3 ? undefined : {
+        role: "button",
+        title: provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd]),
+        "aria-controls": startDateInputId + ' ' + endDateInputId,
+        "aria-label": provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd])
+      },
+      title: provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd]),
+      onMousedown: this.handleReverseMouseDown,
+      on: this.v3 ? undefined : {
+        "mousedown": this.handleReverseMouseDown,
+        "click": this.handleReverseClick
+      },
+      onClick: this.handleReverseClick,
+      "aria-controls": startDateInputId + ' ' + endDateInputId,
+      "aria-label": provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd])
+    }, [h("span", {
+      style: {
+        transform: 'rotate(90deg)'
+      },
+      "class": "k-icon k-button-icon k-i-arrows-swap"
+    })]);
+    return h("span", {
+      "class": this.rootClassName,
+      style: this.$attrs.style,
+      id: this.$props.id,
+      attrs: this.v3 ? undefined : {
+        id: this.$props.id,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        tabindex: this.$props.tabIndex
+      },
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      tabindex: this.$props.tabIndex,
+      onFocusin: this.handleFocus,
+      on: this.v3 ? undefined : {
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur,
+        "keydown": this.handleKeyDown
+      },
+      onFocusout: this.handleBlur,
+      onKeydown: this.handleKeyDown,
+      ref: this.v3 ? function (el) {
+        _this.kendoAnchorRef = el;
+      } : this._anchor
+    }, [startDateInputRendering, (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? reverseButton : separatorMessage, endDateInputRendering, popupRendering]);
+  },
+  methods: {
+    focus: function focus() {
+      var startInput = this.getStartInput();
+
+      if (startInput) {
+        startInput.focus();
+      }
+    },
+    focusCalendarElement: function focusCalendarElement() {
+      var calendar = this.getCalendar();
+
+      if (calendar) {
+        calendar.focus({
+          preventScroll: true
+        });
+      }
+    },
+    focusDateInputElement: function focusDateInputElement() {
+      var startInput = this.getStartInput();
+      var endInput = this.getEndInput();
+
+      if (!document || !startInput || !endInput) {
+        return;
+      }
+
+      if ((this.computedValue.start === null || this.computedValue.end !== null) && document.activeElement !== endInput) {
+        startInput.focus({
+          preventScroll: true
+        });
+      } else if (document.activeElement !== startInput) {
+        endInput.focus({
+          preventScroll: true
+        });
+      }
+    },
+    calculateValue: function calculateValue(props, state) {
+      var value = props.value !== undefined ? props.value : state.currentValue;
+      return value || EMPTY_SELECTIONRANGE;
+    },
+    calculateShow: function calculateShow(nextProps, nextState) {
+      return nextProps.show !== undefined ? nextProps.show : nextState.currentShow;
+    },
+    setShow: function setShow(show) {
+      if (this.currentShow === show) {
+        return;
+      }
+
+      this.currentShow = show;
+    },
+    handleReverseClick: function handleReverseClick(event) {
+      var value = {
+        start: this.computedValue.end,
+        end: this.computedValue.start
+      };
+      var args = {
+        event: event.event
+      };
+      this.handleChange(value, args);
+    },
+    handleReverseMouseDown: function handleReverseMouseDown(event) {
+      event.preventDefault();
+    },
+    handleFocus: function handleFocus(event) {
+      var startInput = this.getStartInput();
+      var endInput = this.getEndInput();
+
+      if (!this.shouldFocusDateInput) {
+        this.setShow(true);
+      }
+
+      if (startInput) {
+        startInput.classList.add('k-focus');
+      }
+
+      if (endInput) {
+        endInput.classList.add('k-focus');
+      }
+
+      this.$emit('focus', event);
+    },
+    calendarBlur: function calendarBlur() {
+      // this.$emit('blur', event);
+      clearTimeout(this._blurTimeout);
+      this.createBlurTimeout();
+    },
+    calendarFocus: function calendarFocus() {
+      // this.$emit('focus', event);
+      clearTimeout(this._blurTimeout);
+    },
+    createBlurTimeout: function createBlurTimeout() {
+      var _this = this;
+
+      this._blurTimeout = setTimeout(function () {
+        var startInput = _this.getStartInput();
+
+        var endInput = _this.getEndInput();
+
+        if (startInput) {
+          startInput.classList.remove('k-focus');
+        }
+
+        if (endInput) {
+          endInput.classList.remove('k-focus');
+        }
+
+        if (startInput && endInput && canUseDOM && startInput && document.activeElement !== endInput) {
+          _this.setShow(false);
+        }
+      }, 200);
+    },
+    getStartInput: function getStartInput() {
+      return this._startDateInput && this._startDateInput.element ? this._startDateInput.element() : document.getElementById(this._startInputId);
+    },
+    getEndInput: function getEndInput() {
+      return this._endDateInput && this._endDateInput.element ? this._endDateInput.element() : document.getElementById(this._endInputId);
+    },
+    getCalendar: function getCalendar() {
+      return this._calendar && this._calendar.element ? this._calendar : document.getElementById(this._calendarId);
+    },
+    handleBlur: function handleBlur(event) {
+      this.createBlurTimeout();
+      this.$emit('blur', event);
+    },
+    handleEndChange: function handleEndChange(event) {
+      var value = {
+        start: this.computedValue.start,
+        end: cloneDate(event.value || undefined)
+      };
+      this.handleChange(value, event);
+    },
+    handleStartChange: function handleStartChange(event) {
+      var value = {
+        start: cloneDate(event.value || undefined),
+        end: this.computedValue.end
+      };
+      this.handleChange(value, event);
+    },
+    extractRangeFromValue: function extractRangeFromValue(event) {
+      if (!Array.isArray(event.value) && !(event.value instanceof Date)) {
+        return event.value || EMPTY_SELECTIONRANGE;
+      }
+
+      var candidate = Array.isArray(event.value) ? event.value[0] : event.value;
+      return {
+        start: this.computedValue.end !== null ? candidate : this.computedValue.start,
+        end: this.computedValue.start !== null ? candidate : this.computedValue.end
+      };
+    },
+    handleCalendarChange: function handleCalendarChange(event) {
+      var value = this.extractRangeFromValue(event);
+      this.handleChange(value, event);
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      var keyCode = event.keyCode,
+          altKey = event.altKey;
+      var endInput = this.getEndInput();
+      var calendar = this.getCalendar();
+
+      if (keyCode === Keys.esc) {
+        event.preventDefault();
+        this.shouldFocusDateInput = true;
+        this.setShow(false);
+      } else if (altKey && keyCode === Keys.down) {
+        event.preventDefault();
+        this.shouldFocusCalendar = true;
+        this.setShow(true);
+      } else if (keyCode === Keys.tab && this.computedShow && calendar && endInput && document && document.activeElement === endInput) {
+        event.preventDefault();
+        this.focusCalendarElement();
+      }
+
+      this.$emit('keydown', event);
+    },
+    handleChange: function handleChange(value, event) {
+      this.currentValue = value;
+      this.valueDuringOnChange = value;
+      var args = {
+        event: event.event,
+        value: this.computedValue,
+        show: this.computedShow,
+        component: this,
+        target: {
+          name: this.$props.name,
+          value: this.computedValue,
+          show: this.computedShow
+        }
+      };
+      this.$emit('changemodel', this.computedValue);
+      this.$emit('update:modelValue', this.computedValue);
+      this.$emit('change', args);
+      this.valueDuringOnChange = undefined;
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var DateRangePicker = DateRangePickerVue2;
+export { DateRangePicker, DateRangePickerVue2 };

package/dist/esm/daterangepicker/models/DateRangePickerCalendarSettings.d.ts

@@ -0,0 +1,6 @@
+import { CalendarSettings } from '../../calendar/models/CalendarSettings';
+/**
+ * Represents the settings that can be passed to the Calendar inside the DateRangePicker.
+ */
+export interface DateRangePickerCalendarSettings extends CalendarSettings {
+}

package/dist/esm/daterangepicker/models/DateRangePickerCalendarSettings.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/daterangepicker/models/DateRangePickerDateInputSettings.d.ts

@@ -0,0 +1,6 @@
+import { DateInputSettings } from '../../dateinput/models/DateInputSettings';
+/**
+ * Represents the settings that can be passed to the DateInput inside the DateRangePicker.
+ */
+export interface DateRangePickerDateInputSettings extends DateInputSettings {
+}

package/dist/esm/daterangepicker/models/DateRangePickerDateInputSettings.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/daterangepicker/models/DateRangePickerPopupSettings.d.ts

@@ -0,0 +1,6 @@
+import { PopupSettings } from '@progress/kendo-vue-popup';
+/**
+ * Represents the settings that can be passed to the Popup inside the DateRangePicker.
+ */
+export interface DateRangePickerPopupSettings extends PopupSettings {
+}

package/dist/esm/daterangepicker/models/DateRangePickerPopupSettings.js

@@ -0,0 +1 @@
+export {};