@forcecalendar/interface 1.0.55 → 1.0.57

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;
@@ -11,7 +11,7 @@ class M extends HTMLElement {
     this._initialized || (this.initialize(), this._initialized = !0), this.mount();
   }
   disconnectedCallback() {
-    this.unmount(), this.cleanup();
+    this.unmount(), this.cleanup(), this._styleEl = null, this._contentWrapper = null;
   }
   // To be overridden by child classes
   initialize() {
@@ -83,13 +83,51 @@ class M extends HTMLElement {
   // Template rendering
   render() {
     this.cleanup();
-    const t = `
-            <style>
-                ${this.getBaseStyles()}
-                ${this.getStyles()}
-            </style>
-        `, e = this.template();
-    this.shadowRoot.innerHTML = t + e, this.afterRender();
+    const t = this.template();
+    this._styleEl || (this._styleEl = document.createElement("style"), this.shadowRoot.appendChild(this._styleEl), this._contentWrapper = document.createElement("div"), this._contentWrapper.setAttribute("id", "fc-root"), this._contentWrapper.style.display = "contents", this.shadowRoot.appendChild(this._contentWrapper)), this._styleEl.textContent = this.getBaseStyles() + `
+` + this.getStyles();
+    const e = this._saveScrollPositions(), r = this._getActiveElementSelector();
+    this._contentWrapper.innerHTML = t, this._restoreScrollPositions(e), this._restoreFocus(r), this.afterRender();
+  }
+  /**
+   * Save scroll positions of all scrollable containers within shadow DOM
+   * @returns {Map<string, {top: number, left: number}>}
+   */
+  _saveScrollPositions() {
+    const t = /* @__PURE__ */ new Map();
+    return this._contentWrapper && this._contentWrapper.querySelectorAll("[id]").forEach((r) => {
+      (r.scrollTop !== 0 || r.scrollLeft !== 0) && t.set(r.id, { top: r.scrollTop, left: r.scrollLeft });
+    }), t;
+  }
+  /**
+   * Restore previously saved scroll positions
+   * @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);
+    });
+  }
+  /**
+   * Get a CSS selector for the currently focused element within shadow DOM
+   * @returns {string|null}
+   */
+  _getActiveElementSelector() {
+    const t = this.shadowRoot.activeElement;
+    return !t || t === this._contentWrapper ? null : t.id ? `[id="${CSS.escape(t.id)}"]` : t.dataset && t.dataset.action ? `[data-action="${CSS.escape(t.dataset.action)}"]` : t.dataset && t.dataset.view ? `[data-view="${CSS.escape(t.dataset.view)}"]` : t.tagName ? t.tagName.toLowerCase() : null;
+  }
+  /**
+   * Restore focus to a previously focused element
+   * @param {string|null} selector
+   */
+  _restoreFocus(t) {
+    if (!(!t || !this._contentWrapper))
+      try {
+        const e = this._contentWrapper.querySelector(t);
+        e && typeof e.focus == "function" && e.focus();
+      } catch {
+      }
   }
   template() {
     return "";
@@ -111,7 +149,7 @@ class M extends HTMLElement {
     this.setProp(t, r), this._initialized && this.render();
   }
 }
-class T {
+class S {
   constructor() {
     this.events = /* @__PURE__ */ new Map(), this.wildcardHandlers = /* @__PURE__ */ new Set();
   }
@@ -249,10 +287,10 @@ class T {
     return t;
   }
 }
-const U = new T();
+const U = new S();
 class V {
   constructor(t = {}) {
-    this.eventBus = new T(), this.calendar = new I({
+    this.eventBus = new S(), this.calendar = new L({
       view: t.view || "month",
       date: t.date || /* @__PURE__ */ new Date(),
       weekStartsOn: t.weekStartsOn ?? 0,
@@ -486,7 +524,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 +645,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
    */
@@ -1245,7 +1283,7 @@ v(f, "breakpoints", {
   xl: "1200px",
   "2xl": "1400px"
 });
-class E {
+class k {
   /**
    * @param {HTMLElement} container - The DOM element to render into
    * @param {StateManager} stateManager - The state manager instance
@@ -1284,7 +1322,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
@@ -1399,18 +1437,18 @@ class E {
    * @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, S = r ? "4px" : "6px";
-    let y, x;
+    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";
+    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(${$} / ${_})`;
+      const { column: C, totalColumns: E } = i.get(t.id), $ = `(100% - ${g + b}px)`;
+      x = `calc(${g}px + ${C} * ${$} / ${E})`, w = `calc(${$} / ${E})`;
     } 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};
-                        background-color: ${c}; border-radius: ${S};
+                        left: ${x}; width: ${w};
+                        background-color: ${c}; border-radius: ${T};
                         padding: ${d}; font-size: ${p};
                         font-weight: 500; color: ${l}; overflow: hidden;
                         box-shadow: 0 1px 2px rgba(0,0,0,0.1);
@@ -1445,7 +1483,7 @@ class E {
     });
   }
 }
-class w extends E {
+class _ extends k {
   constructor(t, e) {
     super(t, e), this.maxEventsToShow = 3;
   }
@@ -1465,7 +1503,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 +1528,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("")}
@@ -1520,7 +1558,7 @@ class w extends E {
     }), this.attachCommonEventHandlers();
   }
 }
-class z extends E {
+class z extends k {
   constructor(t, e) {
     super(t, e), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
@@ -1564,10 +1602,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>
                 `
@@ -1659,7 +1697,7 @@ class z extends E {
     t && (t.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
   }
 }
-class B extends E {
+class B extends k {
   constructor(t, e) {
     super(t, e), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
@@ -1716,10 +1754,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 +2119,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 +2254,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] || _, 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 +2675,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 +2693,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 +2738,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] || _, 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,7 +2849,7 @@ const m = class m extends M {
   }
 };
 v(m, "RENDERERS", {
-  month: w,
+  month: _,
   week: z,
   day: B
 });
@@ -2819,13 +2857,13 @@ let D = m;
 customElements.get("forcecal-main") || customElements.define("forcecal-main", D);
 export {
   M as BaseComponent,
-  E as BaseViewRenderer,
-  k as DOMUtils,
+  k as BaseViewRenderer,
+  y as DOMUtils,
   u as DateUtils,
   B as DayViewRenderer,
-  T as EventBus,
+  S as EventBus,
   D as ForceCalendar,
-  w as MonthViewRenderer,
+  _ as MonthViewRenderer,
   V as StateManager,
   f as StyleUtils,
   z as WeekViewRenderer,