on-codemerge/dist/src/plugins/CalendarPlugin/components/EventForm.mjs

A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product

/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
var ve = Object.defineProperty;
var be = (d, n, o) => n in d ? ve(d, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : d[n] = o;
var l = (d, n, o) => be(d, typeof n != "symbol" ? n + "" : n, o);
import { createForm as fe, createContainer as t, createLabel as i, createInputField as r, createTextarea as ye, createSelectField as oe, createCheckbox as Ee, createFormSubmitHandler as Le } from "../../../utils/helpers.mjs";
class De {
  constructor(n, o, g, s) {
    l(this, "editor");
    l(this, "onSubmit");
    l(this, "event");
    l(this, "formElement");
    l(this, "categoryManager");
    this.editor = n, this.onSubmit = o, this.event = g, this.categoryManager = s;
  }
  getElement() {
    var B, G, J, K, Q, U, V, W, X, Y, Z, _, $, ee, te, ne, ie;
    const n = document.createElement("div");
    n.className = "event-form-container", this.formElement = fe("event-form", null, "POST");
    const o = t("form-group mb-4"), g = i(this.editor.t("Title"), "event-title"), s = r(
      "text",
      this.editor.t("Enter event title"),
      ((B = this.event) == null ? void 0 : B.title) || ""
    );
    s.id = "event-title", s.name = "title", s.required = !0, o.appendChild(g), o.appendChild(s), this.formElement.appendChild(o);
    const v = t("form-group mb-4"), re = i(this.editor.t("Description"), "event-description"), c = ye(
      this.editor.t("Enter event description"),
      ((G = this.event) == null ? void 0 : G.description) || ""
    );
    c.id = "event-description", c.name = "description", c.rows = 3, v.appendChild(re), v.appendChild(c), this.formElement.appendChild(v);
    const b = t("form-row grid grid-cols-2 gap-4 mb-4"), f = t("form-group"), ae = i(this.editor.t("Date"), "event-date"), h = r("date", "", ((J = this.event) == null ? void 0 : J.date) || "");
    h.id = "event-date", h.name = "date", h.required = !0, f.appendChild(ae), f.appendChild(h), b.appendChild(f);
    const y = t("form-group"), de = i(this.editor.t("Time"), "event-time"), u = r("time", "", ((K = this.event) == null ? void 0 : K.time) || "");
    u.id = "event-time", u.name = "time", u.required = !0, y.appendChild(de), y.appendChild(u), b.appendChild(y), this.formElement.appendChild(b);
    const E = t("form-row grid grid-cols-2 gap-4 mb-4"), L = t("form-group"), se = i(this.editor.t("Duration (minutes)"), "event-duration"), p = r("number", "", ((U = (Q = this.event) == null ? void 0 : Q.duration) == null ? void 0 : U.toString()) || "60");
    p.id = "event-duration", p.name = "duration", p.min = "15", p.step = "15", L.appendChild(se), L.appendChild(p), E.appendChild(L);
    const I = t("form-group"), le = i(this.editor.t("Color"), "event-color"), S = r("color", "", ((V = this.event) == null ? void 0 : V.color) || "#3b82f6");
    S.id = "event-color", S.name = "color", I.appendChild(le), I.appendChild(S), E.appendChild(I), this.formElement.appendChild(E);
    const D = t("form-row grid grid-cols-2 gap-4 mb-4"), x = t("form-group"), pe = i(this.editor.t("Priority"), "event-priority"), me = [
      { value: "low", label: this.editor.t("Low") },
      { value: "medium", label: this.editor.t("Medium") },
      { value: "high", label: this.editor.t("High") }
    ], w = oe(me, ((W = this.event) == null ? void 0 : W.priority) || "medium");
    w.id = "event-priority", w.name = "priority", x.appendChild(pe), x.appendChild(w), D.appendChild(x);
    const T = t("form-group"), ce = i(this.editor.t("Category"), "event-category");
    let A = [{ value: "", label: this.editor.t("Select category") }];
    if (this.categoryManager) {
      const e = this.categoryManager.getCategories();
      A = A.concat(
        e.map((C) => ({ value: C.id, label: C.name }))
      );
    }
    const F = oe(A, ((X = this.event) == null ? void 0 : X.category) || "");
    F.id = "event-category", F.name = "category", T.appendChild(ce), T.appendChild(F), D.appendChild(T), this.formElement.appendChild(D);
    const M = t("form-group mb-4"), he = i(this.editor.t("Location"), "event-location"), q = r(
      "text",
      this.editor.t("Enter event location"),
      ((Y = this.event) == null ? void 0 : Y.location) || ""
    );
    q.id = "event-location", q.name = "location", M.appendChild(he), M.appendChild(q), this.formElement.appendChild(M);
    const O = t("form-group mb-4"), ue = i(this.editor.t("Attendees"), "event-attendees"), j = r(
      "text",
      this.editor.t("Enter attendees (comma separated)"),
      ((_ = (Z = this.event) == null ? void 0 : Z.attendees) == null ? void 0 : _.join(", ")) || ""
    );
    j.id = "event-attendees", j.name = "attendees", O.appendChild(ue), O.appendChild(j), this.formElement.appendChild(O);
    const k = t("form-group mb-4"), Ce = i(this.editor.t("Tags"), "event-tags"), H = r(
      "text",
      this.editor.t("Enter tags (comma separated)"),
      ((ee = ($ = this.event) == null ? void 0 : $.tags) == null ? void 0 : ee.join(", ")) || ""
    );
    H.id = "event-tags", H.name = "tags", k.appendChild(Ce), k.appendChild(H), this.formElement.appendChild(k);
    const N = t("form-group mb-4"), ge = i(this.editor.t("Reminder (minutes before)"), "event-reminder"), m = r("number", "", ((ne = (te = this.event) == null ? void 0 : te.reminder) == null ? void 0 : ne.toString()) || "");
    m.id = "event-reminder", m.name = "reminder", m.min = "0", m.placeholder = this.editor.t("No reminder"), N.appendChild(ge), N.appendChild(m), this.formElement.appendChild(N);
    const P = t("form-group mb-4"), R = Ee(
      this.editor.t("All day event"),
      ((ie = this.event) == null ? void 0 : ie.isAllDay) || !1
    ), z = R.querySelector("input");
    return z.id = "event-all-day", z.name = "isAllDay", P.appendChild(R), this.formElement.appendChild(P), this.formElement.addEventListener(
      "submit",
      Le(this.formElement, (e) => {
        const C = {
          title: e.title,
          description: e.description,
          date: e.date,
          time: e.time,
          duration: e.duration,
          location: e.location,
          color: e.color,
          isAllDay: e.isAllDay,
          priority: e.priority,
          category: e.category,
          tags: e.tags ? e.tags.split(",").map((a) => a.trim()).filter((a) => a) : [],
          attendees: e.attendees ? e.attendees.split(",").map((a) => a.trim()).filter((a) => a) : [],
          reminder: e.reminder ? parseInt(e.reminder) : void 0
        };
        this.onSubmit(C);
      })
    ), n.appendChild(this.formElement), n;
  }
  submit() {
    if (!this.formElement) return !1;
    const n = new Event("submit", {
      bubbles: !0,
      cancelable: !0
    });
    return this.formElement.dispatchEvent(n), !0;
  }
}
export {
  De as EventForm
};