@forcecalendar/interface 1.0.59 → 1.0.61

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

@@ -1,8 +1,8 @@
 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 {
+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 $ extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this._listeners = [], this._state = null, this._props = /* @__PURE__ */ new Map(), this._initialized = !1;
   }
@@ -104,9 +104,11 @@ class M extends HTMLElement {
    * @param {Map<string, {top: number, left: number}>} positions
    */
   _restoreScrollPositions(t) {
-    !this._contentWrapper || t.size === 0 || t.forEach((e, r) => {
-      const i = this._contentWrapper.querySelector(`[id="${CSS.escape(r)}"]`);
-      i && (i.scrollTop = e.top, i.scrollLeft = e.left);
+    if (!this._contentWrapper || t.size === 0) return;
+    const e = typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape : (r) => String(r).replace(/["\\]/g, "\\$&");
+    t.forEach((r, i) => {
+      const s = this._contentWrapper.querySelector(`[id="${e(i)}"]`);
+      s && (s.scrollTop = r.top, s.scrollLeft = r.left);
     });
   }
   /**
@@ -289,10 +291,10 @@ class S {
     return t;
   }
 }
-const U = new S();
-class V {
+const j = new S();
+class z {
   constructor(t = {}) {
-    this.eventBus = new S(), this.calendar = new L({
+    this.eventBus = new S(), this.calendar = new F({
       view: t.view || "month",
       date: t.date || /* @__PURE__ */ new Date(),
       weekStartsOn: t.weekStartsOn ?? 0,
@@ -647,7 +649,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 +741,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 +764,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 +847,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 +865,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 +1054,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 +1097,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 +1209,7 @@ class f {
 /**
  * Default theme colors
  */
-v(f, "colors", {
+m(f, "colors", {
   primary: "#3B82F6",
   // Modern Blue
   secondary: "#64748B",
@@ -1209,7 +1242,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 +1310,7 @@ v(f, "cssVariables", {
 }), /**
  * Get responsive breakpoints
  */
-v(f, "breakpoints", {
+m(f, "breakpoints", {
   xs: "320px",
   sm: "576px",
   md: "768px",
@@ -1285,7 +1318,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 +1357,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,13 +1472,13 @@ 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, T = 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: E } = i.get(t.id), M = `(100% - ${v + y}px)`;
+      x = `calc(${v}px + ${C} * ${M} / ${E})`, w = `calc(${M} / ${E})`;
     } 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;
@@ -1485,7 +1518,7 @@ class k {
     });
   }
 }
-class _ extends k {
+class _ extends D {
   constructor(t, e) {
     super(t, e), this.maxEventsToShow = 3;
   }
@@ -1560,7 +1593,7 @@ class _ extends k {
     }), this.attachCommonEventHandlers();
   }
 }
-class z extends k {
+class V extends D {
   constructor(t, e) {
     super(t, e), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
@@ -1699,7 +1732,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 +1752,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)}
@@ -1845,7 +1878,7 @@ class B extends k {
     t && (t.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
   }
 }
-class A extends M {
+class A extends $ {
   constructor() {
     super(), this._isVisible = !1, this._cleanupFocusTrap = null, this.config = {
       title: "New Event",
@@ -2082,12 +2115,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 +2154,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,13 +2184,43 @@ 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 $ {
   static get observedAttributes() {
     return ["view", "date", "locale", "timezone", "week-starts-on", "height"];
   }
   constructor() {
     super(), this.stateManager = null, this.currentView = null, this._hasRendered = !1, this._busUnsubscribers = [];
   }
+  /**
+   * Route observed-attribute changes into the StateManager.
+   * Without this, attribute updates after mount (view, locale, timezone,
+   * week-starts-on, date) only re-rendered from stale state and had no
+   * visible effect. 'height' is presentational and picked up by render().
+   */
+  propChanged(t, e, r) {
+    if (!(!this.stateManager || e === r))
+      switch (t) {
+        case "view":
+          r && this.stateManager.setView(r);
+          break;
+        case "date": {
+          const i = r ? new Date(r) : null;
+          i && !isNaN(i.getTime()) && this.stateManager.setDate(i);
+          break;
+        }
+        case "locale":
+          r && this.stateManager.updateConfig({ locale: r });
+          break;
+        case "timezone":
+          r && this.stateManager.updateConfig({ timeZone: r });
+          break;
+        case "week-starts-on": {
+          const i = parseInt(r, 10);
+          Number.isNaN(i) || this.stateManager.updateConfig({ weekStartsOn: i });
+          break;
+        }
+      }
+  }
   initialize() {
     const t = {
       view: this.getAttribute("view") || "month",
@@ -2166,7 +2229,7 @@ const m = class m extends M {
       timeZone: this.getAttribute("timezone") || Intl.DateTimeFormat().resolvedOptions().timeZone,
       weekStartsOn: parseInt(this.getAttribute("week-starts-on") || "0")
     };
-    this.stateManager = new V(t), this._stateUnsubscribe = this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
+    this.stateManager = new z(t), this._stateUnsubscribe = this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
   }
   setupEventListeners() {
     this._busUnsubscribers.forEach((r) => r()), this._busUnsubscribers = [];
@@ -2256,7 +2319,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 +2740,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 +2758,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 +2803,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,25 +2913,25 @@ 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,
+  week: V,
   day: B
 });
-let D = m;
-customElements.get("forcecal-main") || customElements.define("forcecal-main", D);
+let k = b;
+customElements.get("forcecal-main") || customElements.define("forcecal-main", k);
 export {
-  M as BaseComponent,
-  k as BaseViewRenderer,
-  y as DOMUtils,
+  $ as BaseComponent,
+  D as BaseViewRenderer,
+  g as DOMUtils,
   u as DateUtils,
   B as DayViewRenderer,
   S as EventBus,
-  D as ForceCalendar,
+  k as ForceCalendar,
   _ as MonthViewRenderer,
-  V as StateManager,
+  z as StateManager,
   f as StyleUtils,
-  z as WeekViewRenderer,
-  U as eventBus
+  V as WeekViewRenderer,
+  j as eventBus
 };
 //# sourceMappingURL=force-calendar-interface.esm.js.map