@progress/kendo-vue-scheduler 9.3.0-develop.4 → 9.3.0-develop.6

package/editors/SchedulerFormEditor.mjs

@@ -5,195 +5,95 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as he, createVNode as e, isVNode as me } from "vue";
-import { timezoneNames as fe } from "@progress/kendo-date-math";
-import { Label as l, Error as h } from "@progress/kendo-vue-labels";
-import { provideLocalizationService as ke } from "@progress/kendo-vue-intl";
-import { FormElement as pe, FieldWrapper as d, Field as t } from "@progress/kendo-vue-form";
-import { TextArea as be, Checkbox as T, TextBox as ge } from "@progress/kendo-vue-inputs";
-import { getDefaultSlots as Ee, templateRendering as i, getListeners as n } from "@progress/kendo-vue-common";
-import { editorValidationRequired as S, messages as c, editorEventTitle as y, editorEventStart as v, editorEventTimeZone as L, editorEventStartTimeZone as C, editorEventEnd as j, editorEventSeparateTimeZones as O, editorEventEndTimeZone as Z, editorEventAllDay as x, editorEventDescription as D } from "../messages/main.mjs";
-import { FilterableComboBox as w } from "./FilterableComboBox.mjs";
-import { RecurrenceEditor as ze } from "../recurrence/RecurrenceEditor.mjs";
-import { ResourceEditor as Fe } from "./ResourceEditor.mjs";
-import { ZonedDateTime as I } from "./ZonedDateTime.mjs";
-function u(o) {
-  return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !me(o);
+import { defineComponent as U, createVNode as e, Fragment as S, isVNode as X } from "vue";
+import { timezoneNames as ee } from "@progress/kendo-date-math";
+import { Label as u } from "@progress/kendo-vue-labels";
+import { provideLocalizationService as b, provideIntlService as te } from "@progress/kendo-vue-intl";
+import { FormElement as ie, FieldWrapper as m, Field as l } from "@progress/kendo-vue-form";
+import { TextArea as re, Switch as ne, TextBox as oe } from "@progress/kendo-vue-inputs";
+import { getDefaultSlots as le, SvgIcon as h } from "@progress/kendo-vue-common";
+import { rightDoubleQuotesIcon as se, clockIcon as ae, globeIcon as D, arrowRotateCwIcon as de, commentIcon as ce } from "@progress/kendo-svg-icons";
+import { Button as a } from "@progress/kendo-vue-buttons";
+import { Dialog as ue, DialogActionsBar as me } from "@progress/kendo-vue-dialogs";
+import { editorValidationRequired as E, messages as r, editorEventAllDay as L, editorEventTitle as f, editorEventStart as g, editorDateConnectorTo as p, editorEventEnd as k, editorStartTimeAriaLabel as w, editorDateConnectorFrom as y, editorSetTimezoneTitle as C, editorTimezoneButton as A, editorEventStartTimeZone as I, editorResetTimezoneAriaLabel as x, editorResetTimezoneTitle as B, editorEndTimeAriaLabel as j, editorEventEndTimeZone as O, editorEventDescription as T, resetTimezoneDialogTitle as M, resetTimezoneConfirmation as V, resetTimezoneNo as $, resetTimezoneYes as q, editorRecurrenceMakeRecurring as G } from "../messages/main.mjs";
+import { RecurrenceEditor as he } from "../recurrence/RecurrenceEditor.mjs";
+import { ResourceEditor as fe } from "./ResourceEditor.mjs";
+import { ZonedSplitDateTime as _ } from "./ZonedSplitDateTime.mjs";
+import { TimezoneDropDownList as N } from "./TimezoneDropDownList.mjs";
+import { SchedulerRecurrenceDialog as ge } from "./SchedulerRecurrenceDialog.mjs";
+import { RemoveRecurrenceConfirmDialog as pe } from "./RemoveRecurrenceConfirmDialog.mjs";
+import { getRecurrenceSummary as ke } from "../hooks/useRecurrenceSummary.mjs";
+function z(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !X(t);
 }
-const _e = /* @__PURE__ */ he({
+const Oe = /* @__PURE__ */ U({
   name: "KendoSchedulerFormEditor",
   props: {
     as: [String, Function, Object],
     id: String,
     tabIndex: Number,
-    titleLabel: {
-      type: [String, Function, Object],
-      default: function() {
-        return l;
-      }
-    },
-    titleError: {
-      type: [String, Function, Object],
-      default: function() {
-        return h;
-      }
-    },
     titleEditor: {
       type: [String, Function, Object],
       default: function() {
-        return ge;
-      }
-    },
-    startLabel: {
-      type: [String, Function, Object],
-      default: function() {
-        return l;
-      }
-    },
-    startError: {
-      type: [String, Function, Object],
-      default: function() {
-        return h;
+        return oe;
       }
     },
     startEditor: {
       type: [String, Function, Object],
       default: function() {
-        return I;
-      }
-    },
-    startTimezoneLabel: {
-      type: [String, Function, Object],
-      default: function() {
-        return l;
-      }
-    },
-    startTimezoneError: {
-      type: [String, Function, Object],
-      default: function() {
-        return h;
+        return _;
       }
     },
     startTimezoneEditor: {
       type: [String, Function, Object],
       default: function() {
-        return w;
-      }
-    },
-    startTimezoneCheckedLabel: {
-      type: [String, Function, Object],
-      default: function() {
-        return l;
-      }
-    },
-    startTimezoneCheckedEditor: {
-      type: [String, Function, Object],
-      default: function() {
-        return T;
-      }
-    },
-    endLabel: {
-      type: [String, Function, Object],
-      default: function() {
-        return l;
-      }
-    },
-    endError: {
-      type: [String, Function, Object],
-      default: function() {
-        return h;
+        return N;
       }
     },
     endEditor: {
       type: [String, Function, Object],
       default: function() {
-        return I;
-      }
-    },
-    endTimezoneLabel: {
-      type: [String, Function, Object],
-      default: function() {
-        return l;
-      }
-    },
-    endTimezoneError: {
-      type: [String, Function, Object],
-      default: function() {
-        return h;
+        return _;
       }
     },
     endTimezoneEditor: {
       type: [String, Function, Object],
       default: function() {
-        return w;
-      }
-    },
-    endTimezoneCheckedLabel: {
-      type: [String, Function, Object],
-      default: function() {
-        return l;
-      }
-    },
-    endTimezoneCheckedEditor: {
-      type: [String, Function, Object],
-      default: function() {
-        return T;
+        return N;
       }
     },
     allDayLabel: {
       type: [String, Function, Object],
       default: function() {
-        return l;
+        return "span";
       }
     },
     allDayEditor: {
       type: [String, Function, Object],
       default: function() {
-        return T;
+        return ne;
       }
     },
     recurrenceEditor: {
       type: [String, Function, Object],
       default: function() {
-        return ze;
-      }
-    },
-    descriptionLabel: {
-      type: [String, Function, Object],
-      default: function() {
-        return l;
-      }
-    },
-    descriptionError: {
-      type: [String, Function, Object],
-      default: function() {
-        return h;
+        return he;
       }
     },
     descriptionEditor: {
       type: [String, Function, Object],
       default: function() {
-        return be;
-      }
-    },
-    resourceLabel: {
-      type: [String, Function, Object],
-      default: function() {
-        return l;
-      }
-    },
-    resourcesError: {
-      type: [String, Function, Object],
-      default: function() {
-        return l;
+        return re;
       }
     },
     resourceEditor: {
       type: [String, Function, Object],
       default: function() {
-        return Fe;
+        return fe;
       }
     },
+    recurrenceButtonTextTemplate: [Object, Function],
+    recurrenceSummaryTemplate: [Object, Function],
     errors: Object,
     valid: Boolean,
     touched: Boolean,
@@ -218,268 +118,300 @@ const _e = /* @__PURE__ */ he({
     }
   },
   data() {
-    const o = this.kendoForm, s = this.ks;
+    const t = this.kendoForm, n = this.ks;
     return {
-      startZoneChecked: !!o.valueGetter(s.fields.startTimezone),
-      endZoneChecked: !!o.valueGetter(s.fields.endTimezone)
+      showTimezones: !!t.valueGetter(n.fields.startTimezone),
+      showTimezoneResetDialog: !1,
+      showRecurrenceDialog: !1,
+      showRemoveRecurrenceDialog: !1
     };
   },
+  computed: {
+    isAllDay() {
+      return !!this.kendoForm.valueGetter(this.ks.fields.isAllDay);
+    },
+    start() {
+      return this.kendoForm.valueGetter(this.ks.fields.start) || /* @__PURE__ */ new Date();
+    },
+    startTimezone() {
+      return this.kendoForm.valueGetter(this.ks.fields.startTimezone) || "";
+    },
+    recurrenceRule() {
+      return this.kendoForm.valueGetter(this.ks.fields.recurrenceRule);
+    },
+    recurrenceId() {
+      return this.kendoForm.valueGetter(this.ks.fields.recurrenceId);
+    },
+    isEditingOccurrence() {
+      return this.recurrenceId !== void 0 && this.recurrenceId !== null;
+    },
+    showRecurrenceButton() {
+      return !this.isEditingOccurrence;
+    },
+    recurrenceButtonText() {
+      const t = te(this), n = b(this), s = (c, i) => n.toLanguageString(c, i), d = n.toLanguageString(G, r[G]);
+      return this.recurrenceRule && ke(this.recurrenceRule, this.start, t, s) || d;
+    }
+  },
   render() {
-    let o, s, f, k, p, b, g, E, z;
-    const V = Ee(this), F = fe(), a = ke(this), {
-      as: Te,
-      ...Se
-    } = this.$props, {
-      startTimezoneCheckedLabel: _,
-      startTimezoneCheckedEditor: A,
-      endTimezoneCheckedLabel: B,
-      endTimezoneCheckedEditor: q
-    } = this.$props, R = i.call(this, this.titleLabel, n.call(this)), G = i.call(this, this.titleError, n.call(this)), $ = i.call(this, this.titleEditor, n.call(this)), N = i.call(this, this.startLabel, n.call(this)), M = i.call(this, this.startError, n.call(this)), K = i.call(this, this.startEditor, n.call(this)), W = i.call(this, this.startTimezoneLabel, n.call(this)), H = i.call(this, this.startTimezoneError, n.call(this)), J = i.call(this, this.startTimezoneEditor, n.call(this)), P = i.call(this, this.endLabel, n.call(this)), Q = i.call(this, this.endError, n.call(this)), U = i.call(this, this.endEditor, n.call(this)), X = i.call(this, this.endTimezoneLabel, n.call(this)), Y = i.call(this, this.endTimezoneError, n.call(this)), ee = i.call(this, this.endTimezoneEditor, n.call(this)), te = i.call(this, this.allDayLabel, n.call(this)), ie = i.call(this, this.allDayEditor, n.call(this)), ne = i.call(this, this.recurrenceEditor, n.call(this)), oe = i.call(this, this.descriptionLabel, n.call(this)), re = i.call(this, this.descriptionEditor, n.call(this)), le = i.call(this, this.descriptionError, n.call(this)), se = i.call(this, this.resourceLabel, n.call(this)), ae = i.call(this, this.resourceEditor, n.call(this)), de = this.kendoForm.valueGetter(this.ks.fields.start) || /* @__PURE__ */ new Date(), ce = this.kendoForm.valueGetter(this.ks.fields.startTimezone) || this.ks.timezone || "", ue = this.kendoForm.valueGetter(this.ks.fields.endTimezone) || this.ks.timezone || "";
-    this.requiredValidationMessage = a.toLanguageString(S, c[S]);
-    const m = this.ks.fields.title;
-    return e(pe, {
+    let t, n, s;
+    const d = le(this), c = ee(), i = b(this), v = this.$props.startEditor, F = this.$props.endEditor, Z = this.$props.startTimezoneEditor, K = this.$props.endTimezoneEditor, Q = this.$props.allDayEditor, W = this.$props.allDayLabel, Y = this.$props.descriptionEditor, H = this.$props.resourceEditor, J = this.$props.titleEditor, P = this.startTimezone;
+    this.requiredValidationMessage = i.toLanguageString(E, r[E]);
+    const R = i.toLanguageString(L, r[L]);
+    return e(S, null, [e(ie, {
+      horizontal: !0,
       class: "k-scheduler-edit-form"
     }, {
-      default: () => [e(d, null, {
-        default: () => [e(t, {
-          name: m,
-          component: R,
-          editorId: "k-scheduler-editor-title"
-        }, u(o = a.toLanguageString(y, c[y])) ? o : {
-          default: () => [o]
+      default: () => [e(m, null, {
+        default: () => [e(u, {
+          class: "k-form-label"
+        }, {
+          default: () => [e(h, {
+            icon: se,
+            size: "xlarge"
+          }, null)]
         }), e("div", {
           class: "k-form-field-wrap"
-        }, [e(t, {
+        }, [e(l, {
           id: "k-scheduler-editor-title",
-          name: m,
-          field: m,
-          component: $
-        }, null), this.kendoForm.errors[m] && e(t, {
-          name: m,
-          component: G
-        }, {
-          default: () => [this.kendoForm.errors[m]]
-        })])]
-      }), e(d, null, {
-        default: () => [e(t, {
-          name: this.ks.fields.start,
-          component: N,
-          editorId: "k-scheduler-editor-start",
+          name: this.ks.fields.title,
+          field: this.ks.fields.title,
+          component: J,
+          placeholder: i.toLanguageString(f, r[f]),
+          "aria-label": i.toLanguageString(f, r[f])
+        }, null)])]
+      }), e(m, null, {
+        default: () => [e(u, {
           class: "k-form-label"
-        }, u(s = a.toLanguageString(v, c[v])) ? s : {
-          default: () => [s]
+        }, {
+          default: () => [e(h, {
+            icon: ae,
+            size: "xlarge"
+          }, null)]
         }), e("div", {
           class: "k-form-field-wrap"
-        }, [e(t, {
-          id: "k-scheduler-editor-start",
+        }, [e("div", {
+          class: "k-scheduler-datetime-section"
+        }, [e("div", {
+          class: "k-scheduler-edit-form-row"
+        }, [e(l, {
+          name: this.ks.fields.isAllDay,
+          component: Q,
+          onLabel: "",
+          offLabel: ""
+        }, null), e(W, null, z(R) ? R : {
+          default: () => [R]
+        })]), e("div", {
+          class: "k-scheduler-datetime-grid"
+        }, [this.isAllDay ? e("div", {
+          class: "k-scheduler-edit-form-row"
+        }, [e(l, {
           name: this.ks.fields.start,
-          width: "auto",
-          component: K,
-          isAllDay: !!this.kendoForm.values.isAllDay,
+          component: v,
+          isAllDay: this.isAllDay,
+          fieldError: this.kendoForm.errors[this.ks.fields.start],
+          ariaLabel: i.toLanguageString(g, r[g]),
           timezone: this.ks.timezone
-        }, null), this.kendoForm.errors[this.ks.fields.start] && e(t, {
-          name: this.ks.fields.start,
-          component: M
-        }, {
-          default: () => [this.kendoForm.errors[this.ks.fields.start]]
-        })])]
-      }), e(d, null, {
-        default: () => [F.length > 0 && e("div", null, [e(A, {
-          id: "k-scheduler-editor-set-start-timezone",
-          onChange: this.handleStartZoneCheckboxChange,
-          value: this.startZoneChecked
-        }, null), e(_, {
-          class: "k-checkbox-label",
-          editorId: "k-scheduler-editor-set-start-timezone",
-          style: {
-            display: "inline-flex"
-          }
-        }, u(f = a.toLanguageString(L, c[L])) ? f : {
-          default: () => [f]
-        })])]
-      }), this.startZoneChecked && e(d, null, {
-        default: () => [e(t, {
+        }, null), e("span", {
+          class: "k-scheduler-datetime-label"
+        }, [i.toLanguageString(p, r[p])]), e(l, {
+          name: this.ks.fields.end,
+          component: F,
+          isAllDay: this.isAllDay,
+          fieldError: this.kendoForm.errors[this.ks.fields.end],
+          ariaLabel: i.toLanguageString(k, r[k]),
+          timezone: this.ks.timezone
+        }, null)]) : e(S, null, [e("div", {
+          class: "k-scheduler-edit-form-row"
+        }, [e(l, {
           name: this.ks.fields.start,
-          component: W
-        }, u(k = a.toLanguageString(C, c[C])) ? k : {
-          default: () => [k]
-        }), e("div", {
-          class: "k-form-field-wrap"
-        }, [e(t, {
-          component: J,
-          value: ce,
-          validator: this.startTimezoneValidator,
-          dataItems: F,
-          name: this.ks.fields.startTimezone
-        }, null), this.kendoForm.errors[this.ks.fields.startTimezone] && e(t, {
+          component: v,
+          isAllDay: this.isAllDay,
+          connector: i.toLanguageString(y, r[y]),
+          fieldError: this.kendoForm.errors[this.ks.fields.start],
+          ariaLabel: i.toLanguageString(g, r[g]),
+          timeAriaLabel: i.toLanguageString(w, r[w]),
+          timezone: this.ks.timezone
+        }, null)]), !this.showTimezones && e(a, {
+          class: "k-col-span-2",
+          fillMode: "flat",
+          themeColor: "primary",
+          title: i.toLanguageString(C, r[C]),
+          onClick: this.handleTimezoneToggle,
+          svgIcon: D
+        }, z(t = i.toLanguageString(A, r[A])) ? t : {
+          default: () => [t]
+        }), this.showTimezones && e(S, null, [e(l, {
           name: this.ks.fields.startTimezone,
-          component: H
-        }, {
-          default: () => [this.kendoForm.errors[this.ks.fields.startTimezone]]
-        })])]
-      }), e(d, null, {
-        default: () => [e(t, {
-          name: this.ks.fields.end,
-          component: P,
-          editorId: "k-scheduler-editor-end",
-          class: "k-form-label"
-        }, u(p = a.toLanguageString(j, c[j])) ? p : {
-          default: () => [p]
-        }), e("div", {
-          class: "k-form-field-wrap"
-        }, [e(t, {
-          id: "k-scheduler-editor-end",
+          component: Z,
+          dataItems: c,
+          value: P,
+          ariaLabel: i.toLanguageString(I, r[I])
+        }, null), e(a, {
+          title: i.toLanguageString(B, r[B]),
+          "aria-label": i.toLanguageString(x, r[x]),
+          onClick: this.handleTimezoneToggle,
+          svgIcon: D,
+          fillMode: "flat",
+          themeColor: "primary"
+        }, null)]), e("div", {
+          class: "k-scheduler-edit-form-row"
+        }, [e(l, {
           name: this.ks.fields.end,
-          width: "auto",
-          component: U,
-          isAllDay: !!this.kendoForm.values.isAllDay,
+          component: F,
+          isAllDay: this.isAllDay,
+          connector: i.toLanguageString(p, r[p]),
+          fieldError: this.kendoForm.errors[this.ks.fields.end],
+          ariaLabel: i.toLanguageString(k, r[k]),
+          timeAriaLabel: i.toLanguageString(j, r[j]),
           timezone: this.ks.timezone
-        }, null), this.kendoForm.errors[this.ks.fields.end] && e(t, {
-          name: this.ks.fields.end,
-          component: Q
-        }, {
-          default: () => [this.kendoForm.errors[this.ks.fields.end]]
-        })])]
-      }), this.startZoneChecked && e(d, null, {
-        default: () => [e("div", {
-          class: "k-form-field-wrap"
-        }, [e(q, {
-          id: "k-scheduler-editor-set-end-timezone",
-          onChange: this.handleEndZoneCheckboxChange,
-          value: this.endZoneChecked
-        }, null)]), e(B, {
-          class: "k-checkbox-label",
-          editorId: "k-scheduler-editor-set-end-timezone",
-          style: {
-            display: "inline-flex"
-          }
-        }, u(b = a.toLanguageString(O, c[O])) ? b : {
-          default: () => [b]
-        })]
-      }), this.endZoneChecked && e(d, null, {
-        default: () => [e(t, {
+        }, null)]), this.showTimezones && e(l, {
           name: this.ks.fields.endTimezone,
-          component: X,
-          class: "k-form-label"
-        }, u(g = a.toLanguageString(Z, c[Z])) ? g : {
-          default: () => [g]
-        }), e("div", {
-          class: "k-form-field-wrap"
-        }, [e(t, {
-          value: ue,
-          dataItems: F,
-          validator: this.endTimezoneValidator,
-          component: ee,
-          name: this.ks.fields.endTimezone
-        }, null), this.kendoForm.errors[this.ks.fields.endTimezone] && e(t, {
-          name: this.ks.fields.endTimezone,
-          component: Y
+          component: K,
+          dataItems: c,
+          value: this.kendoForm.valueGetter(this.ks.fields.endTimezone) || "",
+          ariaLabel: i.toLanguageString(O, r[O])
+        }, null)])]), this.showRecurrenceButton && e("div", {
+          class: "k-scheduler-edit-form-row"
+        }, [e(a, {
+          class: "k-scheduler-recurrence-button",
+          type: "button",
+          fillMode: "flat",
+          themeColor: "primary",
+          svgIcon: de,
+          onClick: this.handleMakeRecurringClick
         }, {
-          default: () => [this.kendoForm.errors[this.ks.fields.endTimezone]]
-        })])]
-      }), e(d, null, {
-        default: () => [e(t, {
-          name: this.ks.fields.isAllDay,
-          component: l,
+          default: () => [this.recurrenceButtonTextTemplate ? this.renderRecurrenceButtonTextTemplate() : this.recurrenceButtonText]
+        })])])])]
+      }), e(m, null, {
+        default: () => [e(u, {
           class: "k-form-label"
-        }, null), e("div", {
+        }, {
+          default: () => [e(h, {
+            icon: ce,
+            size: "xlarge"
+          }, null)]
+        }), e("div", {
           class: "k-form-field-wrap"
-        }, [e(t, {
-          id: "k-is-allday-checkbox",
-          name: this.ks.fields.isAllDay,
-          component: ie
-        }, null), e(t, {
-          name: this.ks.fields.isAllDay,
-          field: this.ks.fields.isAllDay,
-          editorId: "k-is-allday-checkbox",
-          class: "k-checkbox-label",
-          component: te
-        }, u(E = a.toLanguageString(x, c[x])) ? E : {
-          default: () => [E]
-        })])]
-      }), e("div", {
-        class: "k-recurrence-editor"
-      }, [e(t, {
-        component: ne,
-        changeOnInput: !1,
-        field: this.ks.fields.recurrenceRule,
-        name: this.ks.fields.recurrenceRule,
-        start: de
-      }, null)]), e(d, null, {
-        default: () => [e(t, {
+        }, [e(l, {
+          component: Y,
           name: this.ks.fields.description,
-          component: oe,
+          id: "k-event-description",
+          resizable: "vertical",
+          placeholder: i.toLanguageString(T, r[T]),
+          "aria-label": i.toLanguageString(T, r[T])
+        }, null)])]
+      }), (this.ks.props.resources || []).map((o) => e(m, {
+        key: o.field
+      }, {
+        default: () => [o.svgIcon && e(u, {
           class: "k-form-label"
-        }, u(z = a.toLanguageString(D, c[D])) ? z : {
-          default: () => [z]
+        }, {
+          default: () => [e(h, {
+            icon: o.svgIcon,
+            size: "xlarge"
+          }, null)]
         }), e("div", {
           class: "k-form-field-wrap"
-        }, [e(t, {
-          component: re,
-          name: this.ks.fields.description,
-          rows: 1,
-          id: "k-event-description"
-        }, null), this.kendoForm.errors[this.ks.fields.description] && e(t, {
-          name: this.ks.fields.description,
-          component: le
-        }, {
-          default: () => [this.kendoForm.errors[this.ks.fields.description]]
-        })])]
-      }), (this.ks.props.resources || []).map(function(r) {
-        return e(d, {
-          key: r.field
-        }, {
-          default: () => [e(t, {
-            name: r.field,
-            component: se,
-            class: "k-form-label"
-          }, null), e(l, {
-            class: "k-form-label"
-          }, {
-            default: () => [r.name]
-          }), e(t, {
-            name: r.field,
-            component: ae,
-            resource: r,
-            multiple: r.multiple,
-            dataItems: r.data,
-            textField: r.textField,
-            valueField: r.valueField,
-            colorField: r.colorField
-          }, null), this.kendoForm.errors[r.field] && e(t, {
-            name: r.field,
-            component: h
-          }, {
-            default: () => [this.kendoForm.errors[r.field]]
-          })]
-        });
-      }, this), V]
-    });
+        }, [e(l, {
+          name: o.field,
+          component: H,
+          resource: o,
+          multiple: o.multiple,
+          dataItems: o.data,
+          textField: o.textField,
+          valueField: o.valueField,
+          colorField: o.colorField,
+          ariaLabel: o.name || o.field
+        }, null)])]
+      })), d]
+    }), this.showRecurrenceDialog && e(ge, {
+      value: this.recurrenceRule,
+      start: this.start,
+      timezone: this.ks.timezone || "",
+      onSave: this.handleRecurrenceSave,
+      onCancel: this.handleRecurrenceCancel,
+      onRemoveRecurrence: this.handleRemoveRecurrenceClick,
+      recurrenceSummaryTemplate: this.recurrenceSummaryTemplate,
+      recurrenceEditor: this.recurrenceEditor
+    }, null), this.showRemoveRecurrenceDialog && e(pe, {
+      onConfirm: this.handleRemoveRecurrenceConfirm,
+      onCancel: this.handleRemoveRecurrenceCancel
+    }, null), this.showTimezoneResetDialog && e(ue, {
+      title: i.toLanguageString(M, r[M]),
+      onClose: this.handleTimezoneResetClose
+    }, {
+      default: () => [i.toLanguageString(V, r[V]), e(me, null, {
+        default: () => [e(a, {
+          onClick: this.handleTimezoneResetClose
+        }, z(n = i.toLanguageString($, r[$])) ? n : {
+          default: () => [n]
+        }), e(a, {
+          themeColor: "primary",
+          onClick: this.handleTimezoneResetConfirm
+        }, z(s = i.toLanguageString(q, r[q])) ? s : {
+          default: () => [s]
+        })]
+      })]
+    })]);
   },
   methods: {
-    handleStartZoneCheckboxChange(o) {
-      o.value || (this.$emit("change", this.ks.fields.startTimezone, {
-        value: null
-      }), this.$emit("change", this.ks.fields.endTimezone, {
-        value: null
-      }), this.endZoneChecked = o.value), this.startZoneChecked = o.value;
-    },
-    handleEndZoneCheckboxChange(o) {
-      o.value || this.$emit("change", this.ks.fields.endTimezone, {
-        value: null
-      }), this.endZoneChecked = o.value;
-    },
-    requiredValidator(o) {
-      return o ? void 0 : this.requiredValidationMessage;
-    },
-    startTimezoneValidator(o, s) {
-      return this.startZoneChecked ? this.requiredValidator(s(this.ks.fields.startTimezone)) : void 0;
-    },
-    endTimezoneValidator(o, s) {
-      return this.startZoneChecked && this.endZoneChecked ? this.requiredValidator(s(this.ks.fields.endTimezone)) || this.requiredValidator(s(this.ks.fields.startTimezone)) : void 0;
+    renderRecurrenceButtonTextTemplate() {
+      const t = this.recurrenceButtonTextTemplate;
+      return t ? e(t, {
+        recurrenceRule: this.recurrenceRule
+      }, null) : null;
+    },
+    handleTimezoneToggle(t) {
+      t.preventDefault(), this.showTimezones ? this.showTimezoneResetDialog = !0 : (this.updateFormField(this.ks.fields.startTimezone, null), this.updateFormField(this.ks.fields.endTimezone, null), this.showTimezones = !0);
+    },
+    handleTimezoneResetConfirm() {
+      this.updateFormField(this.ks.fields.startTimezone, null), this.updateFormField(this.ks.fields.endTimezone, null), this.showTimezones = !1, this.showTimezoneResetDialog = !1;
+    },
+    handleTimezoneResetClose() {
+      this.showTimezoneResetDialog = !1;
+    },
+    handleMakeRecurringClick() {
+      this.showRecurrenceDialog = !0;
+    },
+    handleRecurrenceSave(t) {
+      this.updateFormField(this.ks.fields.recurrenceRule, t), this.showRecurrenceDialog = !1;
+    },
+    handleRecurrenceCancel() {
+      this.showRecurrenceDialog = !1;
+    },
+    handleRemoveRecurrenceClick() {
+      this.showRemoveRecurrenceDialog = !0;
+    },
+    handleRemoveRecurrenceConfirm() {
+      this.updateFormField(this.ks.fields.recurrenceRule, null), this.updateFormField(this.ks.fields.recurrenceExceptions, null), this.showRemoveRecurrenceDialog = !1, this.showRecurrenceDialog = !1;
+    },
+    handleRemoveRecurrenceCancel() {
+      this.showRemoveRecurrenceDialog = !1;
+    },
+    updateFormField(t, n) {
+      this.kendoForm.onChange(t, {
+        value: n
+      }), this.$emit("change", t, {
+        value: n
+      });
+    },
+    requiredValidator(t) {
+      return t ? void 0 : this.requiredValidationMessage;
+    },
+    startTimezoneValidator(t, n) {
+      return this.showTimezones ? this.requiredValidator(n(this.ks.fields.startTimezone)) : void 0;
+    },
+    endTimezoneValidator(t, n) {
+      return this.showTimezones ? this.requiredValidator(n(this.ks.fields.endTimezone)) || this.requiredValidator(n(this.ks.fields.startTimezone)) : void 0;
+    }
+  },
+  watch: {
+    startTimezone(t, n) {
+      this.showTimezones && t && t !== n && this.updateFormField(this.ks.fields.endTimezone, t);
     }
   }
 });
 export {
-  _e as SchedulerFormEditor
+  Oe as SchedulerFormEditor
 };