@forcecalendar/interface 1.0.58 → 1.0.60

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

@@ -1,7 +1,7 @@
 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";
+var L = (h, t, e) => t in h ? H(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e;
+var m = (h, t, e) => L(h, typeof t != "symbol" ? t + "" : t, e);
+import { Calendar as F, 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;
@@ -149,7 +149,7 @@ class M extends HTMLElement {
     this.setProp(t, r), this._initialized && this.render();
   }
 }
-class S {
+class T {
   constructor() {
     this.events = /* @__PURE__ */ new Map(), this.wildcardHandlers = /* @__PURE__ */ new Set();
   }
@@ -289,10 +289,10 @@ class S {
     return t;
   }
 }
-const U = new S();
+const U = new T();
 class V {
   constructor(t = {}) {
-    this.eventBus = new S(), this.calendar = new L({
+    this.eventBus = new T(), this.calendar = new F({
       view: t.view || "month",
       date: t.date || /* @__PURE__ */ new Date(),
       weekStartsOn: t.weekStartsOn ?? 0,
@@ -647,7 +647,7 @@ class u extends I {
     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 y {
+class g {
   /**
    * Create element with attributes and children
    */
@@ -739,13 +739,19 @@ class y {
   }
   /**
    * Wait for animation/transition to complete
-   */
-  static waitForAnimation(t, e = "animationend") {
-    return new Promise((r) => {
-      const i = () => {
-        t.removeEventListener(e, i), r();
+   * Resolves after `timeout` ms even if the event never fires (animation
+   * cancelled, element removed from DOM, etc.) so awaiting callers can't hang.
+   * @param {Element} element - Element to listen on
+   * @param {string} [eventType='animationend'] - Event to wait for
+   * @param {number} [timeout=3000] - Max wait in ms; 0 disables the timeout
+   */
+  static waitForAnimation(t, e = "animationend", r = 3e3) {
+    return new Promise((i) => {
+      let s = null;
+      const n = () => {
+        s !== null && clearTimeout(s), t.removeEventListener(e, n), i();
       };
-      t.addEventListener(e, i);
+      t.addEventListener(e, n), r > 0 && (s = setTimeout(n, r));
     });
   }
   /**
@@ -756,10 +762,30 @@ class y {
   }
   /**
    * Parse HTML string safely
-   */
-  static parseHTML(t) {
-    const e = document.createElement("template");
-    return e.innerHTML = t.trim(), e.content.firstChild;
+   * Sanitizes by default: strips script-capable elements, inline event
+   * handlers and javascript: URLs so the returned node is inert even if the
+   * input contains an XSS payload. Pass { sanitize: false } only for trusted,
+   * non-user-controlled markup.
+   */
+  static parseHTML(t, { sanitize: e = !0 } = {}) {
+    const r = document.createElement("template");
+    return r.innerHTML = t.trim(), e && this._sanitizeNode(r.content), r.content.firstChild;
+  }
+  /**
+   * Remove script-capable elements, on* handlers and javascript: URLs
+   * from a parsed DOM fragment (in place)
+   */
+  static _sanitizeNode(t) {
+    t.querySelectorAll("script, iframe, object, embed, link, meta, base").forEach((s) => s.remove());
+    const r = document.createTreeWalker(t, NodeFilter.SHOW_ELEMENT);
+    let i = r.nextNode();
+    for (; i; ) {
+      for (const s of Array.from(i.attributes)) {
+        const n = s.name.toLowerCase(), a = s.value.replace(/[\u0000-\u0020]/g, "").toLowerCase();
+        (n.startsWith("on") || a.startsWith("javascript:") || a.startsWith("data:text/html")) && i.removeAttribute(s.name);
+      }
+      i = r.nextNode();
+    }
   }
   /**
    * Escape HTML to prevent XSS
@@ -819,7 +845,10 @@ class y {
     };
   }
   /**
-   * Clone element with event listeners
+   * Clone an element. Event listeners are NOT copied — the Web Platform
+   * provides no way to enumerate listeners, so callers must re-attach their
+   * own handlers to the clone.
+   * @deprecated Use element.cloneNode(deep) directly and re-bind listeners.
    */
   static cloneWithEvents(t, e = !0) {
     return t.cloneNode(e);
@@ -834,7 +863,9 @@ class y {
     if (e.length === 0)
       return t.setAttribute("tabindex", "-1"), t.focus(), () => t.removeAttribute("tabindex");
     const r = e[0], i = e[e.length - 1], s = (n) => {
-      n.key === "Tab" && (n.shiftKey ? document.activeElement === r && (i == null || i.focus(), n.preventDefault()) : document.activeElement === i && (r == null || r.focus(), n.preventDefault()));
+      if (n.key !== "Tab") return;
+      const o = t.getRootNode().activeElement ?? document.activeElement;
+      n.shiftKey ? o === r && (i == null || i.focus(), n.preventDefault()) : o === i && (r == null || r.focus(), n.preventDefault());
     };
     return t.addEventListener("keydown", s), r == null || r.focus(), () => t.removeEventListener("keydown", s);
   }
@@ -1021,7 +1052,7 @@ class f {
    * Get contrast color (black or white) for background
    */
   static getContrastColor(t) {
-    const e = t.replace("#", ""), r = parseInt(e.substr(0, 2), 16), i = parseInt(e.substr(2, 2), 16), s = parseInt(e.substr(4, 2), 16);
+    const e = t.replace("#", ""), r = parseInt(e.substring(0, 2), 16), i = parseInt(e.substring(2, 4), 16), s = parseInt(e.substring(4, 6), 16);
     return (r * 299 + i * 587 + s * 114) / 1e3 >= 128 ? "#000000" : "#FFFFFF";
   }
   /**
@@ -1064,7 +1095,7 @@ class f {
    * Convert hex to rgba
    */
   static hexToRgba(t, e = 1) {
-    const r = t.replace("#", ""), i = parseInt(r.substr(0, 2), 16), s = parseInt(r.substr(2, 2), 16), n = parseInt(r.substr(4, 2), 16);
+    const r = t.replace("#", ""), i = parseInt(r.substring(0, 2), 16), s = parseInt(r.substring(2, 4), 16), n = parseInt(r.substring(4, 6), 16);
     return `rgba(${i}, ${s}, ${n}, ${e})`;
   }
   /**
@@ -1176,7 +1207,7 @@ class f {
 /**
  * Default theme colors
  */
-v(f, "colors", {
+m(f, "colors", {
   primary: "#3B82F6",
   // Modern Blue
   secondary: "#64748B",
@@ -1209,7 +1240,7 @@ v(f, "colors", {
 }), /**
  * Common CSS variables
  */
-v(f, "cssVariables", {
+m(f, "cssVariables", {
   // "Pro" Palette - Functional & Sharp
   "--fc-primary-color": "#2563EB",
   // International Blue (Focus)
@@ -1277,7 +1308,7 @@ v(f, "cssVariables", {
 }), /**
  * Get responsive breakpoints
  */
-v(f, "breakpoints", {
+m(f, "breakpoints", {
   xs: "320px",
   sm: "576px",
   md: "768px",
@@ -1285,7 +1316,7 @@ v(f, "breakpoints", {
   xl: "1200px",
   "2xl": "1400px"
 });
-class k {
+class D {
   /**
    * @param {HTMLElement} container - The DOM element to render into
    * @param {StateManager} stateManager - The state manager instance
@@ -1324,7 +1355,7 @@ class k {
    * @returns {string}
    */
   escapeHTML(t) {
-    return t == null ? "" : y.escapeHTML(String(t));
+    return t == null ? "" : g.escapeHTML(String(t));
   }
   /**
    * Check if a date is today
@@ -1439,18 +1470,18 @@ class k {
    * @returns {string} HTML string
    */
   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, T = r ? "4px" : "6px";
+    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", v = r ? 2 : 12, y = r ? 2 : 24, S = r ? "4px" : "6px";
     let x, w;
     if (i && i.has(t.id)) {
-      const { column: C, totalColumns: E } = i.get(t.id), $ = `(100% - ${g + b}px)`;
-      x = `calc(${g}px + ${C} * ${$} / ${E})`, w = `calc(${$} / ${E})`;
+      const { column: C, totalColumns: k } = i.get(t.id), $ = `(100% - ${v + y}px)`;
+      x = `calc(${v}px + ${C} * ${$} / ${k})`, w = `calc(${$} / ${k})`;
     } else
-      x = `${g}px`, w = `calc(100% - ${g + b}px)`;
+      x = `${v}px`, w = `calc(100% - ${v + y}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: ${x}; width: ${w};
-                        background-color: ${c}; border-radius: ${T};
+                        background-color: ${c}; border-radius: ${S};
                         padding: ${d}; font-size: ${p};
                         font-weight: 500; color: ${l}; overflow: hidden;
                         box-shadow: 0 1px 2px rgba(0,0,0,0.1);
@@ -1485,7 +1516,7 @@ class k {
     });
   }
 }
-class _ extends k {
+class _ extends D {
   constructor(t, e) {
     super(t, e), this.maxEventsToShow = 3;
   }
@@ -1560,7 +1591,7 @@ class _ extends k {
     }), this.attachCommonEventHandlers();
   }
 }
-class z extends k {
+class z extends D {
   constructor(t, e) {
     super(t, e), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
@@ -1699,7 +1730,7 @@ class z extends k {
     t && (t.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
   }
 }
-class B extends k {
+class B extends D {
   constructor(t, e) {
     super(t, e), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
@@ -1719,7 +1750,7 @@ class B extends k {
     const r = ((p = (d = this.stateManager) == null ? void 0 : d.getState()) == null ? void 0 : p.currentDate) || /* @__PURE__ */ new Date(), i = this._extractDayData(t, r);
     if (!i)
       return '<div style="padding: 20px; text-align: center; color: var(--fc-text-secondary);">No data available for day view.</div>';
-    const { dayDate: s, dayName: n, isToday: a, allDayEvents: o, timedEvents: c } = i, l = Array.from({ length: 24 }, (g, b) => b);
+    const { dayDate: s, dayName: n, isToday: a, allDayEvents: o, timedEvents: c } = i, l = Array.from({ length: 24 }, (v, y) => y);
     return `
             <div class="fc-day-view" style="display: flex; flex-direction: column; height: 100%; background: var(--fc-background); overflow: hidden;">
                 ${this._renderHeader(s, n, a)}
@@ -2082,12 +2113,12 @@ class A extends M {
                         <div class="color-options" id="color-picker" role="radiogroup" aria-labelledby="color-label">
                             ${this.config.colors.map(
       (t) => `
-                                <button type="button" 
-                                        class="color-btn ${t.color === this._formData.color ? "selected" : ""}" 
-                                        style="background-color: ${t.color}" 
-                                        data-color="${t.color}"
-                                        title="${t.label}"
-                                        aria-label="${t.label}"
+                                <button type="button"
+                                        class="color-btn ${t.color === this._formData.color ? "selected" : ""}"
+                                        style="background-color: ${f.sanitizeColor(t.color)}"
+                                        data-color="${g.escapeHTML(t.color)}"
+                                        title="${g.escapeHTML(t.label)}"
+                                        aria-label="${g.escapeHTML(t.label)}"
                                         aria-checked="${t.color === this._formData.color ? "true" : "false"}"
                                         role="radio"></button>
                             `
@@ -2121,7 +2152,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 = y.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 = g.trapFocus(this.modalContent));
   }
   close() {
     this.removeAttribute("open"), this._cleanupFocusTrap && (this._cleanupFocusTrap(), this._cleanupFocusTrap = null);
@@ -2151,7 +2182,7 @@ class A extends M {
   }
 }
 customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form", A);
-const m = class m extends M {
+const b = class b extends M {
   static get observedAttributes() {
     return ["view", "date", "locale", "timezone", "week-starts-on", "height"];
   }
@@ -2256,7 +2287,7 @@ const m = class m extends M {
     if (t) {
       this._currentViewInstance && this._currentViewInstance.cleanup && this._currentViewInstance.cleanup();
       try {
-        const e = m.RENDERERS[this.currentView] || _, r = new e(t, this.stateManager);
+        const e = b.RENDERERS[this.currentView] || _, r = new e(t, this.stateManager);
         r._viewType = this.currentView, this._currentViewInstance = r, r.render();
       } catch (e) {
         console.error("[ForceCalendar] Error switching view:", e);
@@ -2677,7 +2708,7 @@ const m = class m extends M {
       return `
                 <div class="force-calendar">
                     <div class="fc-error">
-                        <p><strong>Error:</strong> ${y.escapeHTML(s.message || "An error occurred")}</p>
+                        <p><strong>Error:</strong> ${g.escapeHTML(s.message || "An error occurred")}</p>
                     </div>
                 </div>
             `;
@@ -2695,7 +2726,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">${y.escapeHTML(n)}</h2>
+                        <h2 class="fc-title">${g.escapeHTML(n)}</h2>
                         <button class="fc-nav-arrow" data-action="next" title="Next">
                             ${this.getIcon("chevron-right")}
                         </button>
@@ -2740,7 +2771,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] || _, s = new i(t, this.stateManager);
+        const i = b.RENDERERS[this.currentView] || _, 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);
@@ -2850,21 +2881,21 @@ const m = class m extends M {
     this._busUnsubscribers.forEach((t) => t()), this._busUnsubscribers = [], this._stateUnsubscribe && (this._stateUnsubscribe(), this._stateUnsubscribe = null), this._currentViewInstance && this._currentViewInstance.cleanup && (this._currentViewInstance.cleanup(), this._currentViewInstance = null), this.stateManager && this.stateManager.destroy(), super.cleanup();
   }
 };
-v(m, "RENDERERS", {
+m(b, "RENDERERS", {
   month: _,
   week: z,
   day: B
 });
-let D = m;
-customElements.get("forcecal-main") || customElements.define("forcecal-main", D);
+let E = b;
+customElements.get("forcecal-main") || customElements.define("forcecal-main", E);
 export {
   M as BaseComponent,
-  k as BaseViewRenderer,
-  y as DOMUtils,
+  D as BaseViewRenderer,
+  g as DOMUtils,
   u as DateUtils,
   B as DayViewRenderer,
-  S as EventBus,
-  D as ForceCalendar,
+  T as EventBus,
+  E as ForceCalendar,
   _ as MonthViewRenderer,
   V as StateManager,
   f as StyleUtils,