@progress/kendo-vue-scheduler 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/recurrence/RecurrenceEditor.js

@@ -0,0 +1,772 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var inject = allVue.inject;
+import { provideLocalizationService, provideIntlService } from '@progress/kendo-vue-intl';
+import { messages, recurrenceEditorEndLabel, recurrenceEditorEndAfter, recurrenceEditorEndNever, recurrenceEditorEndOccurrence, recurrenceEditorEndOn, recurrenceEditorWeeklyRepeatOn, recurrenceEditorYearlyRepeatOn, recurrenceEditorMonthlyRepeatOn, recurrenceEditorMonthlyDay, recurrenceEditorYearlyOf, recurrenceEditorRepeat } from '../messages.js';
+import { serializeRule } from '@progress/kendo-recurrence';
+import { toLocalDate, ZonedDate } from '@progress/kendo-date-math';
+import { RecurrenceFrequencyEditor } from './RecurrenceFrequencyEditor.js';
+import { RecurrenceRepeatOnWeekEditor } from './RecurrenceRepeatOnWeekEditor.js';
+import { getRule, getUntil, getMonths, getWeekDays, getExtendedWeekDays, getEndRule, getMonthDay, getRepeatOnRule, weekDayRuleFromString, getOffsets, capitalize, getFrequencies, getFrequency, getWeekDay, getMonth, getOffset } from './common.js';
+import { Label } from '@progress/kendo-vue-labels';
+import { NumericTextBox, RadioGroup } from '@progress/kendo-vue-inputs';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+/**
+ * @hidden
+ */
+
+var RecurrenceEditorVue2 = {
+  name: 'KendoRecurrenceEditor',
+  // @ts-ignore
+  emits: {
+    change: null
+  },
+  props: {
+    name: String,
+    value: {
+      type: String,
+      default: ''
+    },
+    start: Date,
+    timezone: String
+  },
+  inject: {
+    ks: {
+      default: null
+    },
+    kendoLocalizationService: {
+      default: null
+    },
+    kendoIntlService: {
+      default: null
+    }
+  },
+  computed: {
+    rrule: function rrule() {
+      return getRule(this.$props.value);
+    },
+    frequencies: function frequencies() {
+      return getFrequencies(this.localizeMessage);
+    },
+    frequency: function frequency() {
+      return getFrequency(this.rrule);
+    },
+    extendedWeekDays: function extendedWeekDays() {
+      return getExtendedWeekDays(this.intl, this.localizeMessage);
+    },
+    weekDay: function weekDay() {
+      return getWeekDay(this.extendedWeekDays, this.rrule, this.$props.start);
+    },
+    months: function months() {
+      return getMonths(this.intl);
+    },
+    month: function month() {
+      return getMonth(this.months, this.rrule);
+    },
+    offsets: function offsets() {
+      return getOffsets(this.localizeMessage);
+    },
+    offset: function offset() {
+      return getOffset(this.offsets, this.rrule);
+    },
+    endRule: function endRule() {
+      return getEndRule(this.rrule);
+    },
+    monthDay: function monthDay() {
+      return getMonthDay(this.rrule, this.$props.start);
+    },
+    until: function until() {
+      return getUntil(this.rrule);
+    },
+    weekDays: function weekDays() {
+      return getWeekDays(this.intl);
+    },
+    repeatOnRule: function repeatOnRule() {
+      return getRepeatOnRule(this.rrule);
+    }
+  },
+  data: function data() {
+    return {
+      defaultCount: 1,
+      defaultUntil: ZonedDate.fromUTCDate(this.$props.start)
+    };
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var h = gh || createElement;
+    var that = this;
+    this.intl = provideIntlService(this);
+    this.localization = provideLocalizationService(this);
+    var timezone = this.ks.timezone;
+    var itemStyle = {
+      display: 'flex',
+      alignItems: 'center',
+      minHeight: 30
+    };
+
+    var monthlyWeekDay = function monthlyWeekDay() {
+      return [h(DropDownList, {
+        key: "weekday-offset",
+        textField: "text",
+        attrs: this.v3 ? undefined : {
+          textField: "text",
+          dataItemKey: "value",
+          disabled: this.repeatOnRule !== 'weekday',
+          dataItems: this.offsets,
+          value: this.offset
+        },
+        dataItemKey: "value",
+        disabled: this.repeatOnRule !== 'weekday',
+        dataItems: this.offsets,
+        value: this.offset,
+        onChange: this.handleOffsetChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleOffsetChange
+        },
+        style: {
+          width: 'auto'
+        }
+      }), h(DropDownList, {
+        key: "weekday-value",
+        disabled: this.repeatOnRule !== 'weekday',
+        attrs: this.v3 ? undefined : {
+          disabled: this.repeatOnRule !== 'weekday',
+          value: this.weekDay,
+          dataItem: this.extendedWeekDays,
+          textField: "text",
+          dataItemKey: "value"
+        },
+        value: this.weekDay,
+        dataItem: this.extendedWeekDays,
+        onChange: this.handleWeekDayChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleWeekDayChange
+        },
+        textField: "text",
+        dataItemKey: "value",
+        style: {
+          width: 'auto'
+        }
+      })];
+    };
+
+    var monthlyMonthDay = function monthlyMonthDay() {
+      return h(NumericTextBox, {
+        key: 'weekday-day',
+        min: 1,
+        attrs: this.v3 ? undefined : {
+          min: 1,
+          max: 31,
+          disabled: this.repeatOnRule !== 'monthday',
+          value: this.rrule && this.rrule.byMonthDay && this.rrule.byMonthDay[0],
+          width: 'auto'
+        },
+        max: 31,
+        disabled: this.repeatOnRule !== 'monthday',
+        value: this.rrule && this.rrule.byMonthDay && this.rrule.byMonthDay[0],
+        onChange: this.handleMonthDayChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleMonthDayChange
+        },
+        width: 'auto'
+      });
+    };
+
+    var yearlyMonthDay = function yearlyMonthDay() {
+      return [h(DropDownList, {
+        key: "monthday-month",
+        disabled: this.repeatOnRule !== 'monthday',
+        attrs: this.v3 ? undefined : {
+          disabled: this.repeatOnRule !== 'monthday',
+          value: this.month,
+          dataItems: this.months,
+          textField: "text",
+          dataItemKey: "value"
+        },
+        value: this.month,
+        dataItems: this.months,
+        textField: "text",
+        dataItemKey: "value",
+        onChange: this.handleMonthChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleMonthChange
+        },
+        style: {
+          width: 'auto'
+        }
+      }), h(NumericTextBox, {
+        key: "monthday-day",
+        min: 1,
+        attrs: this.v3 ? undefined : {
+          min: 1,
+          max: 31,
+          disabled: this.repeatOnRule !== 'monthday',
+          value: this.monthDay
+        },
+        max: 31,
+        disabled: this.repeatOnRule !== 'monthday',
+        value: this.monthDay,
+        onChange: this.handleMonthDayChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleMonthDayChange
+        },
+        style: {
+          width: 'auto'
+        }
+      })];
+    };
+
+    var yearlyWeekDay = function yearlyWeekDay() {
+      return [h(DropDownList, {
+        key: "yearly-weekday-offset",
+        textField: "text",
+        attrs: this.v3 ? undefined : {
+          textField: "text",
+          dataItemKey: "value",
+          disabled: this.repeatOnRule !== 'weekday',
+          dataItems: this.offsets,
+          value: this.offset
+        },
+        dataItemKey: "value",
+        disabled: this.repeatOnRule !== 'weekday',
+        dataItems: this.offsets,
+        value: this.offset,
+        onChange: this.handleOffsetChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleOffsetChange
+        },
+        style: {
+          width: 'auto'
+        }
+      }), h(DropDownList, {
+        key: "yearly-weekday-day",
+        textField: "text",
+        attrs: this.v3 ? undefined : {
+          textField: "text",
+          dataItemKey: "value",
+          disabled: this.repeatOnRule !== 'weekday',
+          value: this.weekDay,
+          dataItems: this.extendedWeekDays
+        },
+        dataItemKey: "value",
+        disabled: this.repeatOnRule !== 'weekday',
+        value: this.weekDay,
+        dataItems: this.extendedWeekDays,
+        onChange: this.handleWeekDayChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleWeekDayChange
+        },
+        style: {
+          width: 'auto'
+        }
+      }), h("span", {
+        key: "yearly-weekday-of-label"
+      }, [this.localizeMessage(recurrenceEditorYearlyOf, true)]), h(DropDownList, {
+        key: "yearly-weekday-month",
+        textField: "text",
+        attrs: this.v3 ? undefined : {
+          textField: "text",
+          dataItemKey: "value",
+          disabled: this.repeatOnRule !== 'weekday',
+          value: this.month,
+          dataItems: this.months
+        },
+        dataItemKey: "value",
+        disabled: this.repeatOnRule !== 'weekday',
+        value: this.month,
+        dataItems: this.months,
+        onChange: this.handleMonthChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleMonthChange
+        },
+        style: {
+          width: 'auto'
+        }
+      })];
+    };
+
+    var count = function count() {
+      var _this = this;
+
+      return [h(NumericTextBox, {
+        key: "endrule-after-editor",
+        id: "k-endrule-after",
+        attrs: this.v3 ? undefined : {
+          id: "k-endrule-after",
+          min: 1,
+          width: '70px',
+          value: this.endRule === 'count' ? this.rrule.count : this.defaultCount,
+          disabled: this.endRule !== 'count'
+        },
+        min: 1,
+        width: '70px',
+        value: this.endRule === 'count' ? this.rrule.count : this.defaultCount,
+        onChange: this.handleCountChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleCountChange
+        },
+        disabled: this.endRule !== 'count'
+      }), // @ts-ignore function children
+      h(Label, {
+        key: "endrule-after-label",
+        "class": 'k-radio-label',
+        editorId: 'k-endrule-after',
+        attrs: this.v3 ? undefined : {
+          editorId: 'k-endrule-after'
+        }
+      }, this.v3 ? function () {
+        return [_this.localizeMessage(recurrenceEditorEndOccurrence, true)];
+      } : [_this.localizeMessage(recurrenceEditorEndOccurrence, true)])];
+    };
+
+    var dpUntil = function dpUntil() {
+      return (// @ts-ignore 
+        h(DatePicker, {
+          key: "k-endrule-until-editor",
+          id: "k-endrule-until",
+          attrs: this.v3 ? undefined : {
+            id: "k-endrule-until",
+            disabled: that.endRule !== 'until',
+            min: that.$props.start,
+            value: that.endRule === 'until' ? that.until : toLocalDate(that.defaultUntil)
+          },
+          disabled: that.endRule !== 'until',
+          min: that.$props.start,
+          value: that.endRule === 'until' ? that.until : toLocalDate(that.defaultUntil),
+          onChange: that.handleUntilChange,
+          on: this.v3 ? undefined : {
+            "change": that.handleUntilChange
+          },
+          style: {
+            width: 'auto'
+          }
+        })
+      );
+    };
+
+    return (// fragment
+      h("div", [h("div", {
+        "class": "k-form-field"
+      }, [// @ts-ignore function children
+      h(Label, this.v3 ? function () {
+        return [_this2.localization.toLanguageString(recurrenceEditorRepeat, messages[recurrenceEditorRepeat])];
+      } : [_this2.localization.toLanguageString(recurrenceEditorRepeat, messages[recurrenceEditorRepeat])]), h("div", {
+        "class": "k-form-field-wrap"
+      }, [h(RecurrenceFrequencyEditor, {
+        value: this.frequency,
+        attrs: this.v3 ? undefined : {
+          value: this.frequency,
+          dataItems: this.frequencies
+        },
+        dataItems: this.frequencies,
+        onChange: this.handleFrequencyChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleFrequencyChange
+        }
+      })])]), this.frequency !== 'never' && h("div", {
+        "class": 'k-form-field'
+      }, [// @ts-ignore function children
+      h(Label, {
+        editorId: "interval-editor",
+        attrs: this.v3 ? undefined : {
+          editorId: "interval-editor"
+        }
+      }, this.v3 ? function () {
+        return [_this2.localizeMessage(capitalize(_this2.frequency) + 'RepeatEvery')];
+      } : [_this2.localizeMessage(capitalize(_this2.frequency) + 'RepeatEvery')]), h("div", {
+        "class": "k-form-field-wrap"
+      }, [h("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        }
+      }, [h(NumericTextBox, {
+        min: 1,
+        attrs: this.v3 ? undefined : {
+          min: 1,
+          step: 1,
+          defaultValue: 1,
+          value: this.rrule.interval,
+          id: "interval-editor"
+        },
+        step: 1,
+        defaultValue: 1,
+        value: this.rrule.interval,
+        onChange: this.handleIntervalChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleIntervalChange
+        },
+        id: "interval-editor"
+      }), // @ts-ignore function children
+      h(Label, {
+        editorId: "interval-editor",
+        attrs: this.v3 ? undefined : {
+          editorId: "interval-editor"
+        }
+      }, this.v3 ? function () {
+        return [_this2.localizeMessage(capitalize(_this2.frequency) + 'Interval')];
+      } : [_this2.localizeMessage(capitalize(_this2.frequency) + 'Interval')])])])]), this.frequency === 'weekly' && h("div", {
+        "class": "k-form-field"
+      }, [// @ts-ignore function children
+      h(Label, this.v3 ? function () {
+        return [_this2.localizeMessage(recurrenceEditorWeeklyRepeatOn, true)];
+      } : [_this2.localizeMessage(recurrenceEditorWeeklyRepeatOn, true)]), h("div", {
+        "class": "k-form-field-wrap"
+      }, [h(RecurrenceRepeatOnWeekEditor, {
+        dataItems: this.weekDays,
+        attrs: this.v3 ? undefined : {
+          dataItems: this.weekDays,
+          value: (this.rrule.byWeekDay || []).map(function (_a) {
+            var day = _a.day;
+            return day;
+          })
+        },
+        value: (this.rrule.byWeekDay || []).map(function (_a) {
+          var day = _a.day;
+          return day;
+        }),
+        onChange: this.handleWeekDaysChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleWeekDaysChange
+        }
+      })])]), this.frequency === 'monthly' && h("div", {
+        "class": "k-form-field"
+      }, [// @ts-ignore function children
+      h(Label, {
+        key: "recurrence-repeat-on-monthly-label"
+      }, this.v3 ? function () {
+        return [_this2.localizeMessage(recurrenceEditorMonthlyRepeatOn, true)];
+      } : [_this2.localizeMessage(recurrenceEditorMonthlyRepeatOn, true)]), h("div", {
+        "class": "k-form-field-wrap"
+      }, [h(RadioGroup, {
+        value: this.repeatOnRule,
+        attrs: this.v3 ? undefined : {
+          value: this.repeatOnRule,
+          dataItems: [{
+            value: 'monthday',
+            style: itemStyle,
+            label: this.localizeMessage(recurrenceEditorMonthlyDay, true),
+            content: monthlyMonthDay.call(this)
+          }, {
+            value: 'weekday',
+            style: itemStyle,
+            label: ' ',
+            content: monthlyWeekDay.call(this)
+          }]
+        },
+        onChange: this.handleRepeatOnRuleChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleRepeatOnRuleChange
+        },
+        "class": "k-reset",
+        dataItems: [{
+          value: 'monthday',
+          style: itemStyle,
+          label: this.localizeMessage(recurrenceEditorMonthlyDay, true),
+          content: monthlyMonthDay.call(this)
+        }, {
+          value: 'weekday',
+          style: itemStyle,
+          label: ' ',
+          content: monthlyWeekDay.call(this)
+        }]
+      })])]), this.frequency === 'yearly' && h("div", {
+        "class": "k-form-field"
+      }, [// @ts-ignore function children
+      h(Label, this.v3 ? function () {
+        return [_this2.localizeMessage(recurrenceEditorYearlyRepeatOn, true)];
+      } : [_this2.localizeMessage(recurrenceEditorYearlyRepeatOn, true)]), h("div", {
+        "class": "k-form-field-wrap"
+      }, [h(RadioGroup, {
+        value: this.repeatOnRule,
+        attrs: this.v3 ? undefined : {
+          value: this.repeatOnRule,
+          dataItems: [{
+            value: 'monthday',
+            label: ' ',
+            style: itemStyle,
+            content: yearlyMonthDay.call(this)
+          }, {
+            value: 'weekday',
+            label: ' ',
+            style: itemStyle,
+            content: yearlyWeekDay.call(this)
+          }]
+        },
+        onChange: this.handleRepeatOnRuleChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleRepeatOnRuleChange
+        },
+        "class": "k-reset",
+        dataItems: [{
+          value: 'monthday',
+          label: ' ',
+          style: itemStyle,
+          content: yearlyMonthDay.call(this)
+        }, {
+          value: 'weekday',
+          label: ' ',
+          style: itemStyle,
+          content: yearlyWeekDay.call(this)
+        }]
+      })])]), this.frequency !== 'never' && h("div", {
+        "class": "k-form-field"
+      }, [// @ts-ignore function children
+      h(Label, this.v3 ? function () {
+        return [_this2.localizeMessage(recurrenceEditorEndLabel, true)];
+      } : [_this2.localizeMessage(recurrenceEditorEndLabel, true)]), h("div", {
+        "class": "k-form-field-wrap"
+      }, [h(RadioGroup, {
+        value: this.endRule,
+        attrs: this.v3 ? undefined : {
+          value: this.endRule,
+          dataItems: [{
+            value: 'never',
+            style: itemStyle,
+            label: this.localizeMessage(recurrenceEditorEndNever, true)
+          }, {
+            value: 'count',
+            style: itemStyle,
+            label: this.localizeMessage(recurrenceEditorEndAfter, true),
+            content: count.call(this)
+          }, {
+            value: 'until',
+            style: itemStyle,
+            label: this.localizeMessage(recurrenceEditorEndOn, true),
+            content: dpUntil.call(this)
+          }]
+        },
+        onChange: this.handleEndRuleChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleEndRuleChange
+        },
+        dataItems: [{
+          value: 'never',
+          style: itemStyle,
+          label: this.localizeMessage(recurrenceEditorEndNever, true)
+        }, {
+          value: 'count',
+          style: itemStyle,
+          label: this.localizeMessage(recurrenceEditorEndAfter, true),
+          content: count.call(this)
+        }, {
+          value: 'until',
+          style: itemStyle,
+          label: this.localizeMessage(recurrenceEditorEndOn, true),
+          content: dpUntil.call(this)
+        }]
+      })])])])
+    );
+  },
+  methods: {
+    localizeMessage: function localizeMessage(baseMassage, removePrepend) {
+      var message = removePrepend ? baseMassage : 'scheduler.recurrenceEditor' + baseMassage;
+      return this.localization.toLanguageString(message, messages[message]);
+    },
+    onChangeHandler: function onChangeHandler(newRrule) {
+      if (newRrule.freq === 'never') {
+        this.$emit('change', {
+          value: null
+        });
+      } else {
+        if (newRrule.weekStart === undefined) {
+          newRrule.weekStart = this.intl.firstDay();
+        }
+
+        this.$emit('change', {
+          value: serializeRule(newRrule, this.$props.timezone)
+        });
+      }
+    },
+    handleFrequencyChange: function handleFrequencyChange(newFreq) {
+      var newRrule = {};
+      newRrule.freq = newFreq;
+      newRrule.interval = 1;
+
+      if (newFreq === 'weekly') {
+        newRrule.byWeekDay = [{
+          day: ZonedDate.fromLocalDate(this.$props.start, this.timezone).getDay(),
+          offset: 0
+        }];
+      }
+
+      if (newFreq === 'monthly' || newFreq === 'yearly') {
+        newRrule.byMonthDay = [this.$props.start.getDate()];
+      }
+
+      if (newFreq === 'yearly') {
+        newRrule.byMonth = [this.$props.start.getMonth() + 1];
+      }
+
+      this.onChangeHandler(newRrule);
+    },
+    handleIntervalChange: function handleIntervalChange(event) {
+      var newInterval = event.value;
+      this.onChangeHandler(Object.assign({}, this.rrule, {
+        interval: newInterval
+      }));
+    },
+    handleCountChange: function handleCountChange(event) {
+      var newCount = event.value;
+      this.onChangeHandler(Object.assign({}, this.rrule, {
+        count: newCount
+      }));
+
+      if (newCount !== null) {
+        this.defaultCount = newCount;
+      }
+    },
+    handleUntilChange: function handleUntilChange(event) {
+      var newUntil = event.value;
+
+      if (!newUntil) {
+        return;
+      }
+
+      var value = ZonedDate.fromLocalDate(newUntil, this.$props.timezone);
+      this.onChangeHandler(Object.assign({}, this.rrule, {
+        until: value
+      }));
+      this.defaultUntil = value;
+    },
+    handleWeekDaysChange: function handleWeekDaysChange(newWeekDays) {
+      this.onChangeHandler(Object.assign({}, this.rrule, {
+        byWeekDay: this.weekDays.filter(function (wd) {
+          return newWeekDays.some(function (nwd) {
+            return nwd === wd.value;
+          });
+        }).map(function (wd) {
+          return {
+            offset: 0,
+            day: wd.value
+          };
+        })
+      }));
+    },
+    handleWeekDayChange: function handleWeekDayChange(event) {
+      var newRrule = Object.assign({}, this.rrule);
+      var newWeekDay = event.target.value;
+
+      if (typeof newWeekDay.value === 'string') {
+        /* day, weekday or weekend */
+        newRrule.byWeekDay = weekDayRuleFromString(newWeekDay.value);
+        newRrule.bySetPosition = [this.offset.value];
+      } else {
+        /* specific weekday */
+        newRrule.byWeekDay = [{
+          day: newWeekDay.value,
+          offset: this.offset.value
+        }];
+      }
+
+      this.onChangeHandler(newRrule);
+    },
+    handleMonthDayChange: function handleMonthDayChange(event) {
+      this.onChangeHandler(Object.assign({}, this.rrule, {
+        byMonthDay: [event.value]
+      }));
+    },
+    handleMonthChange: function handleMonthChange(event) {
+      var newMonth = event.value;
+      this.onChangeHandler(Object.assign({}, this.rrule, {
+        byMonth: [newMonth.value]
+      }));
+    },
+    handleEndRuleChange: function handleEndRuleChange(event) {
+      var newEnd = event.value;
+      var newRrule = Object.assign({}, this.rrule);
+
+      switch (newEnd) {
+        case 'never':
+          newRrule.until = undefined;
+          newRrule.count = undefined;
+          break;
+
+        case 'count':
+          newRrule.until = undefined;
+          newRrule.count = this.defaultCount;
+          break;
+
+        case 'until':
+          newRrule.until = this.defaultUntil;
+          newRrule.count = undefined;
+          break;
+
+        default:
+          break;
+      }
+
+      this.onChangeHandler(newRrule);
+    },
+    handleRepeatOnRuleChange: function handleRepeatOnRuleChange(event) {
+      var newRrule = Object.assign({}, this.rrule);
+
+      if (event.value === 'monthday') {
+        newRrule.byWeekDay = undefined;
+        newRrule.bySetPosition = undefined;
+        newRrule.byMonthDay = [this.monthDay];
+      } else if (event.value === 'weekday') {
+        // weekDays
+        newRrule.byMonthDay = undefined;
+
+        if (typeof this.weekDay.value === 'string') {
+          /* day, weekday or weekend */
+          newRrule.bySetPosition = [this.offset.value];
+          newRrule.byWeekDay = weekDayRuleFromString(this.weekDay.value);
+        } else {
+          /* specific weekday */
+          newRrule.byWeekDay = [{
+            day: this.weekDay.value,
+            offset: this.offset.value
+          }];
+        }
+      }
+
+      this.onChangeHandler(newRrule);
+    },
+    handleOffsetChange: function handleOffsetChange(event) {
+      var newRrule = Object.assign({}, this.rrule);
+      var newOffset = event.value;
+
+      if (newRrule.byWeekDay) {
+        var weekDaysCount = newRrule.byWeekDay.length;
+
+        switch (weekDaysCount) {
+          case 7:
+          case 5:
+          case 2:
+            newRrule.bySetPosition = [newOffset.value];
+            break;
+
+          case 1:
+            newRrule.byWeekDay[0].offset = newOffset.value;
+            break;
+
+          default:
+            break;
+        }
+      }
+
+      this.onChangeHandler(newRrule);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var RecurrenceEditor = RecurrenceEditorVue2;
+export { RecurrenceEditor, RecurrenceEditorVue2 };