@forcecalendar/interface 1.0.23 → 1.0.25

package/dist/force-calendar-interface.esm.js

@@ -1,6 +1,6 @@
 var W = Object.defineProperty;
-var j = (u, e, t) => e in u ? W(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
-var I = (u, e, t) => j(u, typeof e != "symbol" ? e + "" : e, t);
+var j = (g, e, t) => e in g ? W(g, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : g[e] = t;
+var I = (g, e, t) => j(g, typeof e != "symbol" ? e + "" : e, t);
 class O extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this._listeners = [], this._state = null, this._props = /* @__PURE__ */ new Map(), this._initialized = !1;
@@ -1046,7 +1046,7 @@ class w {
     // Backward-compatible alias for recurrenceRule
     timeZone: v = null,
     endTimeZone: M = null,
-    status: D = "confirmed",
+    status: x = "confirmed",
     visibility: T = "public",
     organizer: A = null,
     attendees: _ = [],
@@ -1061,7 +1061,7 @@ class w {
     ...V
     // Capture any extra properties
   }) {
-    const g = w.normalize({
+    const m = w.normalize({
       id: e,
       title: t,
       start: s,
@@ -1078,7 +1078,7 @@ class w {
       recurrence: b,
       timeZone: v,
       endTimeZone: M,
-      status: D,
+      status: x,
       visibility: T,
       organizer: A,
       attendees: _,
@@ -1093,7 +1093,7 @@ class w {
       ...V
       // Pass any extra properties
     });
-    w.validate(g), this.id = g.id, this.title = g.title, this._timezoneManager = C.getInstance(), this.timeZone = g.timeZone || this._timezoneManager.getSystemTimezone(), this.endTimeZone = g.endTimeZone || this.timeZone, this.start = g.start, this.end = g.end, this.startUTC = this._timezoneManager.toUTC(this.start, this.timeZone), this.endUTC = this._timezoneManager.toUTC(this.end, this.endTimeZone), this.allDay = g.allDay, this.description = g.description, this.location = g.location, this.color = g.color, this.backgroundColor = g.backgroundColor, this.borderColor = g.borderColor, this.textColor = g.textColor, this.recurring = g.recurring, this.recurrenceRule = g.recurrenceRule, this._originalTimeZone = g.timeZone || null, this.status = g.status, this.visibility = g.visibility, this.organizer = g.organizer, this.attendees = [...g.attendees], this.reminders = [...g.reminders], this.categories = g.categories ? [...g.categories] : [], this.attachments = [...g.attachments], this.conferenceData = g.conferenceData, this.metadata = { ...g.metadata }, this._cache = {}, this._validateAttendees(), this._validateReminders();
+    w.validate(m), this.id = m.id, this.title = m.title, this._timezoneManager = C.getInstance(), this.timeZone = m.timeZone || this._timezoneManager.getSystemTimezone(), this.endTimeZone = m.endTimeZone || this.timeZone, this.start = m.start, this.end = m.end, this.startUTC = this._timezoneManager.toUTC(this.start, this.timeZone), this.endUTC = this._timezoneManager.toUTC(this.end, this.endTimeZone), this.allDay = m.allDay, this.description = m.description, this.location = m.location, this.color = m.color, this.backgroundColor = m.backgroundColor, this.borderColor = m.borderColor, this.textColor = m.textColor, this.recurring = m.recurring, this.recurrenceRule = m.recurrenceRule, this._originalTimeZone = m.timeZone || null, this.status = m.status, this.visibility = m.visibility, this.organizer = m.organizer, this.attendees = [...m.attendees], this.reminders = [...m.reminders], this.categories = m.categories ? [...m.categories] : [], this.attachments = [...m.attachments], this.conferenceData = m.conferenceData, this.metadata = { ...m.metadata }, this._cache = {}, this._validateAttendees(), this._validateReminders();
   }
   /**
    * Get event duration in milliseconds
@@ -2237,13 +2237,13 @@ class K {
     const v = 3;
     for (; h <= s && d < i; ) {
       if (h >= t) {
-        const D = new Date(h), T = new Date(h.getTime() + o), A = l.getTimezoneOffset(D, c);
+        const x = new Date(h), T = new Date(h.getTime() + o), A = l.getTimezoneOffset(x, c);
         if (A !== p) {
           const _ = p - A;
-          D.setMinutes(D.getMinutes() + _), T.setMinutes(T.getMinutes() + _);
+          x.setMinutes(x.getMinutes() + _), T.setMinutes(T.getMinutes() + _);
         }
-        p = A, this.isException(D, n, e.id) || a.push({
-          start: D,
+        p = A, this.isException(x, n, e.id) || a.push({
+          start: x,
           end: T,
           recurringEventId: e.id,
           timezone: c,
@@ -4749,12 +4749,12 @@ class te {
         days: []
       };
       for (let b = 0; b < 7; b++) {
-        const v = new Date(l), M = v.getMonth() === s, D = f.isToday(v), T = v.getDay() === 0 || v.getDay() === 6;
+        const v = new Date(l), M = v.getMonth() === s, x = f.isToday(v), T = v.getDay() === 0 || v.getDay() === 6;
         p.days.push({
           date: v,
           dayOfMonth: v.getDate(),
           isCurrentMonth: M,
-          isToday: D,
+          isToday: x,
           isWeekend: T,
           events: this.getEventsForDate(v)
         }), l = f.addDays(l, 1);
@@ -5093,7 +5093,7 @@ class se {
     return e;
   }
 }
-const m = new se();
+const u = new se();
 class ie {
   constructor(e = {}) {
     this.calendar = new te({
@@ -5173,51 +5173,51 @@ class ie {
       (i) => e[i] !== t[i]
     );
     s.forEach((i) => {
-      m.emit(`state:${i}:changed`, {
+      u.emit(`state:${i}:changed`, {
         oldValue: e[i],
         newValue: t[i],
         state: t
       });
-    }), s.length > 0 && m.emit("state:changed", { oldState: e, newState: t, changedKeys: s });
+    }), s.length > 0 && u.emit("state:changed", { oldState: e, newState: t, changedKeys: s });
   }
   // Calendar operations
   setView(e) {
-    this.calendar.setView(e), this.setState({ view: e }), m.emit("view:changed", { view: e });
+    this.calendar.setView(e), this.setState({ view: e }), u.emit("view:changed", { view: e });
   }
   getView() {
     return this.state.view;
   }
   setDate(e) {
-    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("date:changed", { date: this.state.currentDate });
+    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), u.emit("date:changed", { date: this.state.currentDate });
   }
   getCurrentDate() {
     return this.state.currentDate;
   }
   // Navigation
   next() {
-    this.calendar.next(), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("navigation:next", { date: this.state.currentDate });
+    this.calendar.next(), this.setState({ currentDate: this.calendar.getCurrentDate() }), u.emit("navigation:next", { date: this.state.currentDate });
   }
   previous() {
-    this.calendar.previous(), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("navigation:previous", { date: this.state.currentDate });
+    this.calendar.previous(), this.setState({ currentDate: this.calendar.getCurrentDate() }), u.emit("navigation:previous", { date: this.state.currentDate });
   }
   today() {
-    this.calendar.today(), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("navigation:today", { date: this.state.currentDate });
+    this.calendar.today(), this.setState({ currentDate: this.calendar.getCurrentDate() }), u.emit("navigation:today", { date: this.state.currentDate });
   }
   goToDate(e) {
-    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("navigation:goto", { date: this.state.currentDate });
+    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), u.emit("navigation:goto", { date: this.state.currentDate });
   }
   // Event management
   addEvent(e) {
     const t = this.calendar.addEvent(e);
-    return t ? (this._syncEventsFromCore(), m.emit("event:added", { event: t }), t) : (console.error("Failed to add event to calendar"), m.emit("event:error", { action: "add", event: e, error: "Failed to add event" }), null);
+    return t ? (this._syncEventsFromCore(), u.emit("event:add", { event: t }), u.emit("event:added", { event: t }), t) : (console.error("Failed to add event to calendar"), u.emit("event:error", { action: "add", event: e, error: "Failed to add event" }), null);
   }
   updateEvent(e, t) {
     this._syncEventsFromCore({ silent: !0 });
     const s = this.calendar.updateEvent(e, t);
-    return s ? (this._syncEventsFromCore(), m.emit("event:updated", { event: s }), s) : (console.error(`Failed to update event: ${e}`), m.emit("event:error", { action: "update", eventId: e, updates: t, error: "Event not found in calendar" }), null);
+    return s ? (this._syncEventsFromCore(), u.emit("event:update", { event: s }), u.emit("event:updated", { event: s }), s) : (console.error(`Failed to update event: ${e}`), u.emit("event:error", { action: "update", eventId: e, updates: t, error: "Event not found in calendar" }), null);
   }
   deleteEvent(e) {
-    return this._syncEventsFromCore({ silent: !0 }), this.calendar.removeEvent(e) ? (this._syncEventsFromCore(), m.emit("event:deleted", { eventId: e }), !0) : (console.error(`Failed to delete event: ${e}`), m.emit("event:error", { action: "delete", eventId: e, error: "Event not found" }), !1);
+    return this._syncEventsFromCore({ silent: !0 }), this.calendar.removeEvent(e) ? (this._syncEventsFromCore(), u.emit("event:remove", { eventId: e }), u.emit("event:deleted", { eventId: e }), !0) : (console.error(`Failed to delete event: ${e}`), u.emit("event:error", { action: "delete", eventId: e, error: "Event not found" }), !1);
   }
   getEvents() {
     return this.calendar.getEvents() || [];
@@ -5268,20 +5268,20 @@ class ie {
   }
   // Selection management
   selectEvent(e) {
-    this.setState({ selectedEvent: e }), m.emit("event:selected", { event: e });
+    this.setState({ selectedEvent: e }), u.emit("event:selected", { event: e });
   }
   selectEventById(e) {
     const t = this.state.events.find((s) => s.id === e);
     t && this.selectEvent(t);
   }
   deselectEvent() {
-    this.setState({ selectedEvent: null }), m.emit("event:deselected", {});
+    this.setState({ selectedEvent: null }), u.emit("event:deselected", {});
   }
   selectDate(e) {
-    this.setState({ selectedDate: e }), m.emit("date:selected", { date: e });
+    this.setState({ selectedDate: e }), u.emit("date:selected", { date: e });
   }
   deselectDate() {
-    this.setState({ selectedDate: null }), m.emit("date:deselected", {});
+    this.setState({ selectedDate: null }), u.emit("date:deselected", {});
   }
   // Utility methods
   isToday(e) {
@@ -5301,7 +5301,7 @@ class ie {
   }
   // Error handling
   setError(e) {
-    this.setState({ error: e }), e && m.emit("error", { error: e });
+    this.setState({ error: e }), e && u.emit("error", { error: e });
   }
   clearError() {
     this.setState({ error: null });
@@ -5624,7 +5624,7 @@ class F {
     return e.addEventListener("keydown", r), s == null || s.focus(), () => e.removeEventListener("keydown", r);
   }
 }
-class x {
+class D {
   /**
    * Get CSS variable value
    */
@@ -5961,7 +5961,7 @@ class x {
 /**
  * Default theme colors
  */
-I(x, "colors", {
+I(D, "colors", {
   primary: "#3B82F6",
   // Modern Blue
   secondary: "#64748B",
@@ -5994,7 +5994,7 @@ I(x, "colors", {
 }), /**
  * Common CSS variables
  */
-I(x, "cssVariables", {
+I(D, "cssVariables", {
   // "Pro" Palette - Functional & Sharp
   "--fc-primary-color": "#2563EB",
   // International Blue (Focus)
@@ -6062,7 +6062,7 @@ I(x, "cssVariables", {
 }), /**
  * Get responsive breakpoints
  */
-I(x, "breakpoints", {
+I(D, "breakpoints", {
   xs: "320px",
   sm: "576px",
   md: "768px",
@@ -6179,7 +6179,7 @@ class H {
    * @returns {string} HTML string
    */
   renderTimedEvent(e, t = {}) {
-    const { compact: s = !0 } = t, i = new Date(e.start), r = new Date(e.end), n = i.getHours() * 60 + i.getMinutes(), a = Math.max((r - i) / (1e3 * 60), s ? 20 : 30), o = e.backgroundColor || "#2563eb", c = s ? "4px 8px" : "8px 12px", l = s ? "11px" : "13px", h = s ? "2px" : "12px", d = s ? "2px" : "24px", p = s ? "4px" : "6px";
+    const { compact: s = !0 } = t, i = new Date(e.start), r = new Date(e.end), n = i.getHours() * 60 + i.getMinutes(), a = Math.max((r - i) / (1e3 * 60), s ? 20 : 30), o = this.getEventColor(e), c = s ? "4px 8px" : "8px 12px", l = s ? "11px" : "13px", h = s ? "2px" : "12px", d = s ? "2px" : "24px", p = s ? "4px" : "6px";
     return `
             <div class="fc-event fc-timed-event" data-event-id="${this.escapeHTML(e.id)}"
                  style="position: absolute; top: ${n}px; height: ${a}px;
@@ -6198,6 +6198,14 @@ class H {
             </div>
         `;
   }
+  /**
+   * Get a safe, sanitized event color value.
+   * @param {Object} event
+   * @returns {string}
+   */
+  getEventColor(e) {
+    return D.sanitizeColor(e == null ? void 0 : e.backgroundColor, "#2563eb");
+  }
   /**
    * Attach common event handlers for day/event clicks
    */
@@ -6269,7 +6277,7 @@ class E extends H {
         `;
   }
   _renderEvent(e) {
-    const t = e.backgroundColor || "#2563eb";
+    const t = this.getEventColor(e);
     return `
             <div class="fc-event" data-event-id="${this.escapeHTML(e.id)}"
                  style="background-color: ${t}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
@@ -6350,7 +6358,7 @@ class z extends H {
                     <div class="fc-all-day-cell" data-date="${t.date.toISOString()}" style="border-right: 1px solid #e5e7eb; padding: 4px; display: flex; flex-direction: column; gap: 2px;">
                         ${t.allDayEvents.map((s) => `
                             <div class="fc-event fc-all-day-event" data-event-id="${this.escapeHTML(s.id)}"
-                                 style="background-color: ${s.backgroundColor || "#2563eb"}; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                                 style="background-color: ${this.getEventColor(s)}; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                 ${this.escapeHTML(s.title)}
                             </div>
                         `).join("")}
@@ -6484,7 +6492,7 @@ class L extends H {
                 <div class="fc-all-day-cell" data-date="${t.toISOString()}" style="padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px;">
                     ${e.map((s) => `
                         <div class="fc-event fc-all-day-event" data-event-id="${this.escapeHTML(s.id)}"
-                             style="background-color: ${s.backgroundColor || "#2563eb"}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
+                             style="background-color: ${this.getEventColor(s)}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
                             ${this.escapeHTML(s.title)}
                         </div>
                     `).join("")}
@@ -6572,8 +6580,8 @@ class re extends O {
   }
   getStyles() {
     return `
-            ${x.getBaseStyles()}
-            ${x.getButtonStyles()}
+            ${D.getBaseStyles()}
+            ${D.getButtonStyles()}
 
             :host {
                 display: none;
@@ -6864,14 +6872,28 @@ class ne extends O {
     this.stateManager = new ie(e), this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
   }
   setupEventListeners() {
-    this._busUnsubscribers.forEach((e) => e()), this._busUnsubscribers = [], this._busUnsubscribers.push(m.on("navigation:*", (e, t) => {
-      this.emit("calendar-navigate", { action: t.split(":")[1], ...e });
-    })), this._busUnsubscribers.push(m.on("view:changed", (e) => {
-      this.emit("calendar-view-change", e);
-    })), this._busUnsubscribers.push(m.on("event:*", (e, t) => {
-      this.emit(`calendar-event-${t.split(":")[1]}`, e);
-    })), this._busUnsubscribers.push(m.on("date:selected", (e) => {
-      this.emit("calendar-date-select", e);
+    this._busUnsubscribers.forEach((t) => t()), this._busUnsubscribers = [], this._busUnsubscribers.push(u.on("navigation:*", (t, s) => {
+      this.emit("calendar-navigate", { action: s.split(":")[1], ...t });
+    })), this._busUnsubscribers.push(u.on("view:changed", (t) => {
+      this.emit("calendar-view-change", t);
+    }));
+    const e = (t, s) => {
+      this.emit(`calendar-event-${t}`, s);
+    };
+    this._busUnsubscribers.push(u.on("event:add", (t) => {
+      e("add", t);
+    })), this._busUnsubscribers.push(u.on("event:update", (t) => {
+      e("update", t);
+    })), this._busUnsubscribers.push(u.on("event:remove", (t) => {
+      e("remove", t);
+    })), this._busUnsubscribers.push(u.on("event:added", (t) => {
+      e("add", t), this.emit("calendar-event-added", t);
+    })), this._busUnsubscribers.push(u.on("event:updated", (t) => {
+      e("update", t), this.emit("calendar-event-updated", t);
+    })), this._busUnsubscribers.push(u.on("event:deleted", (t) => {
+      e("remove", t), this.emit("calendar-event-deleted", t);
+    })), this._busUnsubscribers.push(u.on("date:selected", (t) => {
+      this.emit("calendar-date-select", t);
     }));
   }
   handleStateChange(e, t) {
@@ -6950,10 +6972,10 @@ class ne extends O {
   getStyles() {
     const e = this.getAttribute("height") || "800px";
     return `
-            ${x.getBaseStyles()}
-            ${x.getButtonStyles()}
-            ${x.getGridStyles()}
-            ${x.getAnimations()}
+            ${D.getBaseStyles()}
+            ${D.getButtonStyles()}
+            ${D.getGridStyles()}
+            ${D.getAnimations()}
 
             :host {
                 --calendar-height: ${e};
@@ -7541,8 +7563,8 @@ export {
   ne as ForceCalendar,
   E as MonthViewRenderer,
   ie as StateManager,
-  x as StyleUtils,
+  D as StyleUtils,
   z as WeekViewRenderer,
-  m as eventBus
+  u as eventBus
 };
 //# sourceMappingURL=force-calendar-interface.esm.js.map