@forcecalendar/interface 1.0.27 → 1.0.29

package/README.md

@@ -0,0 +1,9 @@
+# @forcecalendar/interface
+
+[![Tests](https://github.com/forceCalendar/interface/actions/workflows/test.yml/badge.svg)](https://github.com/forceCalendar/interface/actions/workflows/test.yml)
+[![Code Quality](https://github.com/forceCalendar/interface/actions/workflows/code-quality.yml/badge.svg)](https://github.com/forceCalendar/interface/actions/workflows/code-quality.yml)
+[![npm version](https://img.shields.io/npm/v/@forcecalendar/interface.svg)](https://www.npmjs.com/package/@forcecalendar/interface)
+[![npm downloads](https://img.shields.io/npm/dt/@forcecalendar/interface.svg)](https://www.npmjs.com/package/@forcecalendar/interface)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+Official interface layer for forceCalendar Core — enterprise calendar components for Salesforce and the web.

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

@@ -55,11 +55,13 @@ class O extends HTMLElement {
     e.addEventListener(t, i), this._listeners.push({ element: e, event: t, handler: i });
   }
   emit(e, t = {}) {
-    this.dispatchEvent(new CustomEvent(e, {
-      detail: t,
-      bubbles: !0,
-      composed: !0
-    }));
+    this.dispatchEvent(
+      new CustomEvent(e, {
+        detail: t,
+        bubbles: !0,
+        composed: !0
+      })
+    );
   }
   // Style management
   getStyles() {
@@ -5227,9 +5229,7 @@ class ie {
     });
   }
   emitStateChange(e, t) {
-    const s = Object.keys(t).filter(
-      (i) => e[i] !== t[i]
-    );
+    const s = Object.keys(t).filter((i) => e[i] !== t[i]);
     s.forEach((i) => {
       u.emit(`state:${i}:changed`, {
         oldValue: e[i],
@@ -5272,7 +5272,12 @@ class ie {
   updateEvent(e, t) {
     this._syncEventsFromCore({ silent: !0 });
     const s = this.calendar.updateEvent(e, t);
-    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);
+    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(), 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);
@@ -5487,7 +5492,7 @@ class E extends f {
     return r && (r.toLowerCase() === "pm" && n < 12 ? o = n + 12 : r.toLowerCase() === "am" && n === 12 && (o = 0)), s.setHours(o, a || 0, 0, 0), s;
   }
 }
-class F {
+class H {
   /**
    * Create element with attributes and children
    */
@@ -6128,7 +6133,7 @@ I(D, "breakpoints", {
   xl: "1200px",
   "2xl": "1400px"
 });
-class H {
+class F {
   /**
    * @param {HTMLElement} container - The DOM element to render into
    * @param {StateManager} stateManager - The state manager instance
@@ -6167,7 +6172,7 @@ class H {
    * @returns {string}
    */
   escapeHTML(e) {
-    return e == null ? "" : F.escapeHTML(String(e));
+    return e == null ? "" : H.escapeHTML(String(e));
   }
   /**
    * Check if a date is today
@@ -6277,7 +6282,7 @@ class H {
     });
   }
 }
-class S extends H {
+class S extends F {
   constructor(e, t) {
     super(e, t), this.maxEventsToShow = 3;
   }
@@ -6352,7 +6357,7 @@ class S extends H {
     }), this.attachCommonEventHandlers();
   }
 }
-class z extends H {
+class z extends F {
   constructor(e, t) {
     super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
@@ -6392,7 +6397,8 @@ class z extends H {
     return `
             <div class="fc-week-header" style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
                 <div style="border-right: 1px solid #e5e7eb;"></div>
-                ${e.map((t) => `
+                ${e.map(
+      (t) => `
                     <div style="padding: 12px 8px; text-align: center; border-right: 1px solid #e5e7eb;">
                         <div style="font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em;">
                             ${t.dayName}
@@ -6401,7 +6407,8 @@ class z extends H {
                             ${t.dayOfMonth}
                         </div>
                     </div>
-                `).join("")}
+                `
+    ).join("")}
             </div>
         `;
   }
@@ -6411,16 +6418,20 @@ class z extends H {
                 <div style="font-size: 9px; color: #6b7280; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e5e7eb; text-transform: uppercase; font-weight: 700;">
                     All day
                 </div>
-                ${e.map((t) => `
+                ${e.map(
+      (t) => `
                     <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) => `
+                        ${t.allDayEvents.map(
+        (s) => `
                             <div class="fc-event fc-all-day-event" data-event-id="${this.escapeHTML(s.id)}"
                                  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("")}
+                        `
+      ).join("")}
                     </div>
-                `).join("")}
+                `
+    ).join("")}
             </div>
         `;
   }
@@ -6437,11 +6448,13 @@ class z extends H {
   _renderTimeGutter(e) {
     return `
             <div class="fc-time-gutter" style="border-right: 1px solid #e5e7eb; background: #fafafa;">
-                ${e.map((t) => `
+                ${e.map(
+      (t) => `
                     <div style="height: ${this.hourHeight}px; font-size: 10px; color: #6b7280; text-align: right; padding-right: 8px; font-weight: 500;">
                         ${t === 0 ? "" : this.formatHour(t)}
                     </div>
-                `).join("")}
+                `
+    ).join("")}
             </div>
         `;
   }
@@ -6464,7 +6477,12 @@ class z extends H {
       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);
+      s.setHours(
+        Math.floor(n / this.hourHeight),
+        Math.floor(n % this.hourHeight / (this.hourHeight / 60)),
+        0,
+        0
+      ), this.stateManager.selectDate(s);
     }), this.attachCommonEventHandlers();
   }
   _scrollToCurrentTime() {
@@ -6473,7 +6491,7 @@ class z extends H {
     e && (e.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
   }
 }
-class L extends H {
+class L extends F {
   constructor(e, t) {
     super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
@@ -6546,12 +6564,14 @@ class L extends H {
                     All day
                 </div>
                 <div class="fc-all-day-cell" data-date="${t.toISOString()}" style="padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px;">
-                    ${e.map((s) => `
+                    ${e.map(
+      (s) => `
                         <div class="fc-event fc-all-day-event" data-event-id="${this.escapeHTML(s.id)}"
                              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("")}
+                    `
+    ).join("")}
                 </div>
             </div>
         `;
@@ -6569,11 +6589,13 @@ class L extends H {
   _renderTimeGutter(e) {
     return `
             <div class="fc-time-gutter" style="border-right: 1px solid #e5e7eb; background: #fafafa;">
-                ${e.map((t) => `
+                ${e.map(
+      (t) => `
                     <div style="height: ${this.hourHeight}px; font-size: 11px; color: #6b7280; text-align: right; padding-right: 12px; font-weight: 500;">
                         ${t === 0 ? "" : this.formatHour(t)}
                     </div>
-                `).join("")}
+                `
+    ).join("")}
             </div>
         `;
   }
@@ -6596,7 +6618,12 @@ class L extends H {
       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);
+      s.setHours(
+        Math.floor(n / this.hourHeight),
+        Math.floor(n % this.hourHeight / (this.hourHeight / 60)),
+        0,
+        0
+      ), this.stateManager.selectDate(s);
     }), this.attachCommonEventHandlers();
   }
   _scrollToCurrentTime() {
@@ -6840,7 +6867,8 @@ class re extends O {
                     <div class="form-group">
                         <label id="color-label">Color</label>
                         <div class="color-options" id="color-picker" role="radiogroup" aria-labelledby="color-label">
-                            ${this.config.colors.map((e) => `
+                            ${this.config.colors.map(
+      (e) => `
                                 <button type="button" 
                                         class="color-btn ${e.color === this._formData.color ? "selected" : ""}" 
                                         style="background-color: ${e.color}" 
@@ -6849,7 +6877,8 @@ class re extends O {
                                         aria-label="${e.label}"
                                         aria-checked="${e.color === this._formData.color ? "true" : "false"}"
                                         role="radio"></button>
-                            `).join("")}
+                            `
+    ).join("")}
                         </div>
                     </div>
                 </div>
@@ -6879,7 +6908,7 @@ class re extends O {
     });
   }
   open(e = /* @__PURE__ */ new Date()) {
-    this.hasAttribute("open") || this.setAttribute("open", ""), this.titleGroup.classList.remove("has-error"), this.endGroup.classList.remove("has-error"), this._formData.start = e, this._formData.end = new Date(e.getTime() + this.config.defaultDuration * 60 * 1e3), this._formData.title = "", this._formData.color = this.config.colors[0].color, this.startInput && (this.titleInput.value = "", this.startInput.value = this.formatDateForInput(this._formData.start), this.endInput.value = this.formatDateForInput(this._formData.end), this.updateColorSelection(), this._cleanupFocusTrap = F.trapFocus(this.modalContent));
+    this.hasAttribute("open") || this.setAttribute("open", ""), this.titleGroup.classList.remove("has-error"), this.endGroup.classList.remove("has-error"), this._formData.start = e, this._formData.end = new Date(e.getTime() + this.config.defaultDuration * 60 * 1e3), this._formData.title = "", this._formData.color = this.config.colors[0].color, this.startInput && (this.titleInput.value = "", this.startInput.value = this.formatDateForInput(this._formData.start), this.endInput.value = this.formatDateForInput(this._formData.end), this.updateColorSelection(), this._cleanupFocusTrap = H.trapFocus(this.modalContent));
   }
   close() {
     this.removeAttribute("open"), this._cleanupFocusTrap && (this._cleanupFocusTrap(), this._cleanupFocusTrap = null);
@@ -6927,29 +6956,47 @@ class ne extends O {
     this.stateManager = new ie(e), this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
   }
   setupEventListeners() {
-    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);
-    }));
+    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);
-    }));
+    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;
@@ -7419,7 +7466,7 @@ class ne extends O {
       return `
                 <div class="force-calendar">
                     <div class="fc-error">
-                        <p><strong>Error:</strong> ${F.escapeHTML(r.message || "An error occurred")}</p>
+                        <p><strong>Error:</strong> ${H.escapeHTML(r.message || "An error occurred")}</p>
                     </div>
                 </div>
             `;
@@ -7610,8 +7657,8 @@ customElements.get("forcecal-main") || customElements.define("forcecal-main", ne
 typeof window < "u" && typeof customElements < "u" && console.log("Force Calendar Interface loading...");
 export {
   O as BaseComponent,
-  H as BaseViewRenderer,
-  F as DOMUtils,
+  F as BaseViewRenderer,
+  H as DOMUtils,
   E as DateUtils,
   L as DayViewRenderer,
   se as EventBus,