@forcecalendar/interface 1.0.24 → 1.0.26

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

@@ -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: _ = [],
@@ -1078,7 +1078,7 @@ class w {
       recurrence: b,
       timeZone: v,
       endTimeZone: M,
-      status: D,
+      status: x,
       visibility: T,
       organizer: A,
       attendees: _,
@@ -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);
@@ -5315,7 +5315,7 @@ class ie {
     this.subscribers.clear(), this._subscriberIds && (this._subscriberIds.clear(), this._subscriberIds = null), this.state = null, this.calendar = null;
   }
 }
-class S extends f {
+class E extends f {
   /**
    * Format date for display
    */
@@ -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,20 +6198,28 @@ 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
    */
   attachCommonEventHandlers() {
-    this.container.querySelectorAll(".fc-event").forEach((e) => {
-      this.addListener(e, "click", (t) => {
-        t.stopPropagation();
-        const s = e.dataset.eventId, i = this.stateManager.getEvents().find((r) => r.id === s);
-        i && this.stateManager.selectEvent(i);
-      });
+    this.addListener(this.container, "click", (e) => {
+      const t = e.target.closest(".fc-event");
+      if (!t || !this.container.contains(t)) return;
+      e.stopPropagation();
+      const s = t.dataset.eventId, i = this.stateManager.getEvents().find((r) => r.id === s);
+      i && this.stateManager.selectEvent(i);
     });
   }
 }
-class E extends H {
+class S extends H {
   constructor(e, t) {
     super(e, t), this.maxEventsToShow = 3;
   }
@@ -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;">
@@ -6278,12 +6286,11 @@ class E extends H {
         `;
   }
   _attachEventHandlers() {
-    this.container.querySelectorAll(".fc-month-day").forEach((e) => {
-      this.addListener(e, "click", (t) => {
-        if (t.target.closest(".fc-event")) return;
-        const s = new Date(e.dataset.date);
-        this.stateManager.selectDate(s);
-      });
+    this.addListener(this.container, "click", (e) => {
+      const t = e.target.closest(".fc-month-day");
+      if (!t || !this.container.contains(t) || e.target.closest(".fc-event")) return;
+      const s = new Date(t.dataset.date);
+      this.stateManager.selectDate(s);
     }), this.attachCommonEventHandlers();
   }
 }
@@ -6350,7 +6357,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("")}
@@ -6395,12 +6402,11 @@ class z extends H {
         `;
   }
   _attachEventHandlers() {
-    this.container.querySelectorAll(".fc-week-day-column").forEach((e) => {
-      this.addListener(e, "click", (t) => {
-        if (t.target.closest(".fc-event")) return;
-        const s = new Date(e.dataset.date), i = e.getBoundingClientRect(), r = this.container.querySelector("#week-scroll-container"), n = t.clientY - i.top + (r ? r.scrollTop : 0);
-        s.setHours(Math.floor(n / this.hourHeight), Math.floor(n % this.hourHeight / (this.hourHeight / 60)), 0, 0), this.stateManager.selectDate(s);
-      });
+    this.addListener(this.container, "click", (e) => {
+      const t = e.target.closest(".fc-week-day-column");
+      if (!t || !this.container.contains(t) || e.target.closest(".fc-event")) return;
+      const s = new Date(t.dataset.date), i = t.getBoundingClientRect(), r = this.container.querySelector("#week-scroll-container"), n = e.clientY - i.top + (r ? r.scrollTop : 0);
+      s.setHours(Math.floor(n / this.hourHeight), Math.floor(n % this.hourHeight / (this.hourHeight / 60)), 0, 0), this.stateManager.selectDate(s);
     }), this.attachCommonEventHandlers();
   }
   _scrollToCurrentTime() {
@@ -6484,7 +6490,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("")}
@@ -6528,12 +6534,11 @@ class L extends H {
         `;
   }
   _attachEventHandlers() {
-    this.container.querySelectorAll(".fc-day-column").forEach((e) => {
-      this.addListener(e, "click", (t) => {
-        if (t.target.closest(".fc-event")) return;
-        const s = new Date(e.dataset.date), i = e.getBoundingClientRect(), r = this.container.querySelector("#day-scroll-container"), n = t.clientY - i.top + (r ? r.scrollTop : 0);
-        s.setHours(Math.floor(n / this.hourHeight), Math.floor(n % this.hourHeight / (this.hourHeight / 60)), 0, 0), this.stateManager.selectDate(s);
-      });
+    this.addListener(this.container, "click", (e) => {
+      const t = e.target.closest(".fc-day-column");
+      if (!t || !this.container.contains(t) || e.target.closest(".fc-event")) return;
+      const s = new Date(t.dataset.date), i = t.getBoundingClientRect(), r = this.container.querySelector("#day-scroll-container"), n = e.clientY - i.top + (r ? r.scrollTop : 0);
+      s.setHours(Math.floor(n / this.hourHeight), Math.floor(n % this.hourHeight / (this.hourHeight / 60)), 0, 0), this.stateManager.selectDate(s);
     }), this.attachCommonEventHandlers();
   }
   _scrollToCurrentTime() {
@@ -6572,8 +6577,8 @@ class re extends O {
   }
   getStyles() {
     return `
-            ${x.getBaseStyles()}
-            ${x.getButtonStyles()}
+            ${D.getBaseStyles()}
+            ${D.getButtonStyles()}
 
             :host {
                 display: none;
@@ -6932,10 +6937,10 @@ class ne extends O {
       this._currentViewInstance && this._currentViewInstance.cleanup && this._currentViewInstance.cleanup();
       try {
         const s = {
-          month: E,
+          month: S,
           week: z,
           day: L
-        }[this.currentView] || E, i = new s(e, this.stateManager);
+        }[this.currentView] || S, i = new s(e, this.stateManager);
         i._viewType = this.currentView, this._currentViewInstance = i, i.render();
       } catch (t) {
         console.error("[ForceCalendar] Error switching view:", t);
@@ -6964,10 +6969,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};
@@ -7420,10 +7425,10 @@ class ne extends O {
       this._currentViewInstance && (this._currentViewInstance.cleanup && this._currentViewInstance.cleanup(), this._viewUnsubscribe && (this._viewUnsubscribe(), this._viewUnsubscribe = null));
       try {
         const r = {
-          month: E,
+          month: S,
           week: z,
           day: L
-        }[this.currentView] || E, n = new r(e, this.stateManager);
+        }[this.currentView] || S, n = new r(e, this.stateManager);
         n._viewType = this.currentView, this._currentViewInstance = n, n.render();
       } catch (i) {
         console.error("[ForceCalendar] Error creating/rendering view:", i);
@@ -7455,10 +7460,10 @@ class ne extends O {
    */
   _createViewRenderer(e) {
     const s = {
-      month: E,
+      month: S,
       week: z,
       day: L
-    }[e] || E;
+    }[e] || S;
     return new s(null, null);
   }
   handleNavigation(e) {
@@ -7482,14 +7487,14 @@ class ne extends O {
     const s = this.stateManager.state.config.locale;
     switch (t) {
       case "month":
-        return S.formatDate(e, "month", s);
+        return E.formatDate(e, "month", s);
       case "week":
-        const i = S.startOfWeek(e), r = S.endOfWeek(e);
-        return S.formatDateRange(i, r, s);
+        const i = E.startOfWeek(e), r = E.endOfWeek(e);
+        return E.formatDateRange(i, r, s);
       case "day":
-        return S.formatDate(e, "long", s);
+        return E.formatDate(e, "long", s);
       default:
-        return S.formatDate(e, "month", s);
+        return E.formatDate(e, "month", s);
     }
   }
   getIcon(e) {
@@ -7549,13 +7554,13 @@ export {
   O as BaseComponent,
   H as BaseViewRenderer,
   F as DOMUtils,
-  S as DateUtils,
+  E as DateUtils,
   L as DayViewRenderer,
   se as EventBus,
   ne as ForceCalendar,
-  E as MonthViewRenderer,
+  S as MonthViewRenderer,
   ie as StateManager,
-  x as StyleUtils,
+  D as StyleUtils,
   z as WeekViewRenderer,
   u as eventBus
 };