@forcecalendar/interface 1.0.54 → 1.0.56

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

@@ -1,7 +1,7 @@
-var F = Object.defineProperty;
-var H = (h, t, e) => t in h ? F(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e;
-var v = (h, t, e) => H(h, typeof t != "symbol" ? t + "" : t, e);
-import { Calendar as I, DateUtils as L } from "@forcecalendar/core";
+var H = Object.defineProperty;
+var F = (h, t, e) => t in h ? H(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e;
+var v = (h, t, e) => F(h, typeof t != "symbol" ? t + "" : t, e);
+import { Calendar as L, DateUtils as I } from "@forcecalendar/core";
 class M extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this._listeners = [], this._state = null, this._props = /* @__PURE__ */ new Map(), this._initialized = !1;
@@ -252,7 +252,7 @@ class T {
 const U = new T();
 class V {
   constructor(t = {}) {
-    this.eventBus = new T(), this.calendar = new I({
+    this.eventBus = new T(), this.calendar = new L({
       view: t.view || "month",
       date: t.date || /* @__PURE__ */ new Date(),
       weekStartsOn: t.weekStartsOn ?? 0,
@@ -486,7 +486,7 @@ class V {
     this.subscribers.clear(), this._subscriberIds && (this._subscriberIds.clear(), this._subscriberIds = null), this.eventBus && (this.eventBus.clear(), this.eventBus = null), this.state = null, this.calendar = null;
   }
 }
-class u extends L {
+class u extends I {
   /**
    * Format date for display
    */
@@ -607,7 +607,7 @@ class u extends L {
     return s && (s.toLowerCase() === "pm" && n < 12 ? o = n + 12 : s.toLowerCase() === "am" && n === 12 && (o = 0)), r.setHours(o, a || 0, 0, 0), r;
   }
 }
-class k {
+class y {
   /**
    * Create element with attributes and children
    */
@@ -1284,7 +1284,7 @@ class E {
    * @returns {string}
    */
   escapeHTML(t) {
-    return t == null ? "" : k.escapeHTML(String(t));
+    return t == null ? "" : y.escapeHTML(String(t));
   }
   /**
    * Check if a date is today
@@ -1400,16 +1400,16 @@ class E {
    */
   renderTimedEvent(t, e = {}) {
     const { compact: r = !0, overlapLayout: i = null } = e, s = new Date(t.start), n = new Date(t.end), a = s.getHours() * 60 + s.getMinutes(), o = Math.max((n - s) / (1e3 * 60), r ? 20 : 30), c = this.getEventColor(t), l = this.getContrastingTextColor(c), d = r ? "4px 8px" : "8px 12px", p = r ? "11px" : "13px", g = r ? 2 : 12, b = r ? 2 : 24, S = r ? "4px" : "6px";
-    let y, x;
+    let x, w;
     if (i && i.has(t.id)) {
       const { column: C, totalColumns: _ } = i.get(t.id), $ = `(100% - ${g + b}px)`;
-      y = `calc(${g}px + ${C} * ${$} / ${_})`, x = `calc(${$} / ${_})`;
+      x = `calc(${g}px + ${C} * ${$} / ${_})`, w = `calc(${$} / ${_})`;
     } else
-      y = `${g}px`, x = `calc(100% - ${g + b}px)`;
+      x = `${g}px`, w = `calc(100% - ${g + b}px)`;
     return `
             <div class="fc-event fc-timed-event" data-event-id="${this.escapeHTML(t.id)}"
                  style="position: absolute; top: ${a}px; height: ${o}px;
-                        left: ${y}; width: ${x};
+                        left: ${x}; width: ${w};
                         background-color: ${c}; border-radius: ${S};
                         padding: ${d}; font-size: ${p};
                         font-weight: 500; color: ${l}; overflow: hidden;
@@ -1445,7 +1445,7 @@ class E {
     });
   }
 }
-class w extends E {
+class D extends E {
   constructor(t, e) {
     super(t, e), this.maxEventsToShow = 3;
   }
@@ -1465,7 +1465,7 @@ class w extends E {
     let s = `
             <div class="fc-month-view" style="display: flex; flex-direction: column; height: 100%; min-height: 400px; background: var(--fc-background); border: 1px solid var(--fc-border-color);">
                 <div class="fc-month-header" style="display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--fc-border-color); background: var(--fc-background-alt);">
-                    ${this._getDayNames(r).map((n) => `<div class="fc-month-header-cell" style="padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 600; color: var(--fc-text-light); text-transform: uppercase;">${n}</div>`).join("")}
+                    ${this._getDayNames(r).map((n) => `<div class="fc-month-header-cell" style="padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 600; color: var(--fc-text-light); text-transform: uppercase;">${this.escapeHTML(n)}</div>`).join("")}
                 </div>
                 <div class="fc-month-body" style="display: flex; flex-direction: column; flex: 1;">
         `;
@@ -1490,10 +1490,10 @@ class w extends E {
   _renderDay(t) {
     const e = !t.isCurrentMonth, r = t.isToday, i = e ? "var(--fc-background-hover)" : "var(--fc-background)", s = e ? "var(--fc-text-light)" : "var(--fc-text-color)", n = r ? "background: var(--fc-primary-color); color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;" : "", a = t.events || [], o = a.slice(0, this.maxEventsToShow), c = a.length - this.maxEventsToShow;
     return `
-            <div class="fc-month-day" data-date="${t.date}"
+            <div class="fc-month-day" data-date="${this.escapeHTML(t.date)}"
                  style="background: ${i}; border-right: 1px solid var(--fc-border-color); border-bottom: 1px solid var(--fc-border-color); padding: 4px; min-height: 80px; cursor: pointer; display: flex; flex-direction: column;">
                 <div class="fc-day-number" style="font-size: 13px; font-weight: 500; color: ${s}; padding: 2px 4px; margin-bottom: 4px; ${n}">
-                    ${t.dayOfMonth}
+                    ${this.escapeHTML(String(t.dayOfMonth))}
                 </div>
                 <div class="fc-day-events" style="display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden;">
                     ${o.map((l) => this._renderEvent(l)).join("")}
@@ -1564,10 +1564,10 @@ class z extends E {
       (e) => `
                     <div style="padding: 12px 8px; text-align: center; border-right: 1px solid var(--fc-border-color);">
                         <div style="font-size: 10px; font-weight: 700; color: var(--fc-text-light); text-transform: uppercase; letter-spacing: 0.1em;">
-                            ${e.dayName}
+                            ${this.escapeHTML(e.dayName)}
                         </div>
                         <div style="font-size: 16px; font-weight: 500; margin-top: 4px; ${e.isToday ? "background: var(--fc-danger-color); color: white; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;" : "color: var(--fc-text-color);"}">
-                            ${e.dayOfMonth}
+                            ${this.escapeHTML(String(e.dayOfMonth))}
                         </div>
                     </div>
                 `
@@ -1716,10 +1716,10 @@ class B extends E {
                 <div style="border-right: 1px solid var(--fc-border-color);"></div>
                 <div style="padding: 16px 24px;">
                     <div style="font-size: 12px; font-weight: 700; color: var(--fc-text-light); text-transform: uppercase; letter-spacing: 0.1em;">
-                        ${e}
+                        ${this.escapeHTML(e)}
                     </div>
                     <div style="font-size: 24px; font-weight: 600; margin-top: 4px; ${r ? "color: var(--fc-danger-color);" : "color: var(--fc-text-color);"}">
-                        ${t.getDate()}
+                        ${this.escapeHTML(String(t.getDate()))}
                     </div>
                 </div>
             </div>
@@ -2081,7 +2081,7 @@ class A extends M {
     });
   }
   open(t = /* @__PURE__ */ new Date()) {
-    this.hasAttribute("open") || this.setAttribute("open", ""), this.titleGroup.classList.remove("has-error"), this.endGroup.classList.remove("has-error"), this._formData.start = t, this._formData.end = new Date(t.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 && this._cleanupFocusTrap(), this._cleanupFocusTrap = k.trapFocus(this.modalContent));
+    this.hasAttribute("open") || this.setAttribute("open", ""), this.titleGroup.classList.remove("has-error"), this.endGroup.classList.remove("has-error"), this._formData.start = t, this._formData.end = new Date(t.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 && this._cleanupFocusTrap(), this._cleanupFocusTrap = y.trapFocus(this.modalContent));
   }
   close() {
     this.removeAttribute("open"), this._cleanupFocusTrap && (this._cleanupFocusTrap(), this._cleanupFocusTrap = null);
@@ -2216,7 +2216,7 @@ const m = class m extends M {
     if (t) {
       this._currentViewInstance && this._currentViewInstance.cleanup && this._currentViewInstance.cleanup();
       try {
-        const e = m.RENDERERS[this.currentView] || w, r = new e(t, this.stateManager);
+        const e = m.RENDERERS[this.currentView] || D, r = new e(t, this.stateManager);
         r._viewType = this.currentView, this._currentViewInstance = r, r.render();
       } catch (e) {
         console.error("[ForceCalendar] Error switching view:", e);
@@ -2637,7 +2637,7 @@ const m = class m extends M {
       return `
                 <div class="force-calendar">
                     <div class="fc-error">
-                        <p><strong>Error:</strong> ${k.escapeHTML(s.message || "An error occurred")}</p>
+                        <p><strong>Error:</strong> ${y.escapeHTML(s.message || "An error occurred")}</p>
                     </div>
                 </div>
             `;
@@ -2655,7 +2655,7 @@ const m = class m extends M {
                         <button class="fc-nav-arrow" data-action="previous" title="Previous">
                             ${this.getIcon("chevron-left")}
                         </button>
-                        <h2 class="fc-title">${n}</h2>
+                        <h2 class="fc-title">${y.escapeHTML(n)}</h2>
                         <button class="fc-nav-arrow" data-action="next" title="Next">
                             ${this.getIcon("chevron-right")}
                         </button>
@@ -2700,7 +2700,7 @@ const m = class m extends M {
         return;
       this._currentViewInstance && (this._currentViewInstance.cleanup && this._currentViewInstance.cleanup(), this._viewUnsubscribe && (this._viewUnsubscribe(), this._viewUnsubscribe = null));
       try {
-        const i = m.RENDERERS[this.currentView] || w, s = new i(t, this.stateManager);
+        const i = m.RENDERERS[this.currentView] || D, s = new i(t, this.stateManager);
         s._viewType = this.currentView, this._currentViewInstance = s, s.render();
       } catch (i) {
         console.error("[ForceCalendar] Error creating/rendering view:", i);
@@ -2811,21 +2811,21 @@ const m = class m extends M {
   }
 };
 v(m, "RENDERERS", {
-  month: w,
+  month: D,
   week: z,
   day: B
 });
-let D = m;
-customElements.get("forcecal-main") || customElements.define("forcecal-main", D);
+let k = m;
+customElements.get("forcecal-main") || customElements.define("forcecal-main", k);
 export {
   M as BaseComponent,
   E as BaseViewRenderer,
-  k as DOMUtils,
+  y as DOMUtils,
   u as DateUtils,
   B as DayViewRenderer,
   T as EventBus,
-  D as ForceCalendar,
-  w as MonthViewRenderer,
+  k as ForceCalendar,
+  D as MonthViewRenderer,
   V as StateManager,
   f as StyleUtils,
   z as WeekViewRenderer,