@forcecalendar/interface 1.0.22 → 1.0.24

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 _ = (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;
@@ -1049,7 +1049,7 @@ class w {
     status: D = "confirmed",
     visibility: T = "public",
     organizer: A = null,
-    attendees: I = [],
+    attendees: _ = [],
     reminders: R = [],
     category: B,
     // Support singular category (no default)
@@ -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,
@@ -1081,7 +1081,7 @@ class w {
       status: D,
       visibility: T,
       organizer: A,
-      attendees: I,
+      attendees: _,
       reminders: R,
       category: B,
       // Pass category to normalize
@@ -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
@@ -2239,8 +2239,8 @@ class K {
       if (h >= t) {
         const D = new Date(h), T = new Date(h.getTime() + o), A = l.getTimezoneOffset(D, c);
         if (A !== p) {
-          const I = p - A;
-          D.setMinutes(D.getMinutes() + I), T.setMinutes(T.getMinutes() + I);
+          const _ = p - A;
+          D.setMinutes(D.getMinutes() + _), T.setMinutes(T.getMinutes() + _);
         }
         p = A, this.isException(D, n, e.id) || a.push({
           start: D,
@@ -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 });
@@ -5961,7 +5961,7 @@ class x {
 /**
  * Default theme colors
  */
-_(x, "colors", {
+I(x, "colors", {
   primary: "#3B82F6",
   // Modern Blue
   secondary: "#64748B",
@@ -5994,7 +5994,7 @@ _(x, "colors", {
 }), /**
  * Common CSS variables
  */
-_(x, "cssVariables", {
+I(x, "cssVariables", {
   // "Pro" Palette - Functional & Sharp
   "--fc-primary-color": "#2563EB",
   // International Blue (Focus)
@@ -6062,7 +6062,7 @@ _(x, "cssVariables", {
 }), /**
  * Get responsive breakpoints
  */
-_(x, "breakpoints", {
+I(x, "breakpoints", {
   xs: "320px",
   sm: "576px",
   md: "768px",
@@ -6864,25 +6864,43 @@ 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) {
     var o, c;
     if (!this._hasRendered)
       return;
-    const s = e.view !== (t == null ? void 0 : t.view), i = ((o = e.currentDate) == null ? void 0 : o.getTime()) !== ((c = t == null ? void 0 : t.currentDate) == null ? void 0 : c.getTime()), r = e.events !== (t == null ? void 0 : t.events), n = e.loading !== (t == null ? void 0 : t.loading), a = e.error !== (t == null ? void 0 : t.error);
-    if (n || a) {
+    const s = e.view !== (t == null ? void 0 : t.view), i = ((o = e.currentDate) == null ? void 0 : o.getTime()) !== ((c = t == null ? void 0 : t.currentDate) == null ? void 0 : c.getTime()), r = e.events !== (t == null ? void 0 : t.events), n = e.loading !== (t == null ? void 0 : t.loading);
+    if (e.error !== (t == null ? void 0 : t.error)) {
       this.render();
       return;
     }
+    if (n) {
+      this._updateLoadingState(e.loading);
+      return;
+    }
     s && (this.currentView = e.view), s ? (this._updateTitle(), this._updateViewButtons(), this._switchView()) : i ? (this._updateTitle(), this._updateViewContent()) : r && this._updateViewContent();
   }
   /**
@@ -6930,11 +6948,18 @@ class ne extends O {
   _updateViewContent() {
     this._currentViewInstance && this._currentViewInstance.render && this._currentViewInstance.render();
   }
+  /**
+   * Toggle loading overlay without rebuilding the component tree.
+   */
+  _updateLoadingState(e) {
+    const t = this.$(".fc-loading"), s = this.$(".fc-view-container");
+    t && (t.style.display = e ? "flex" : "none"), s && (s.style.display = e ? "none" : "flex");
+  }
   mount() {
-    super.mount(), this.loadView(this.stateManager.getView());
+    this.currentView = this.stateManager.getView(), super.mount();
   }
   loadView(e) {
-    this.currentView = e, this.render();
+    !e || this.currentView === e || (this.currentView = e, this._switchView(), this._updateViewButtons(), this._updateTitle());
   }
   getStyles() {
     const e = this.getAttribute("height") || "800px";
@@ -7371,16 +7396,13 @@ class ne extends O {
                 </header>
 
                 <div class="fc-body">
-                    ${i ? `
-                        <div class="fc-loading">
-                            <div class="fc-spinner"></div>
-                            <span>Loading...</span>
-                        </div>
-                    ` : `
-                        <div class="fc-view-container">
-                            ${this.renderView()}
-                        </div>
-                    `}
+                    <div class="fc-loading" style="display: ${i ? "flex" : "none"};">
+                        <div class="fc-spinner"></div>
+                        <span>Loading...</span>
+                    </div>
+                    <div class="fc-view-container" style="display: ${i ? "none" : "flex"};">
+                        ${this.renderView()}
+                    </div>
                 </div>
                 
                 <forcecal-event-form id="event-modal"></forcecal-event-form>
@@ -7535,6 +7557,6 @@ export {
   ie as StateManager,
   x as StyleUtils,
   z as WeekViewRenderer,
-  m as eventBus
+  u as eventBus
 };
 //# sourceMappingURL=force-calendar-interface.esm.js.map