@forcecalendar/interface 1.0.56 → 1.0.58

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

@@ -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();
   }
@@ -211,9 +249,11 @@ class T {
   }
   /**
    * Check if event name matches a pattern
+   * Only `*` acts as a wildcard; all other characters match literally
    */
   matchesPattern(t, e) {
-    return new RegExp("^" + e.replace(/\*/g, ".*") + "$").test(t);
+    const r = e.replace(/[.+?^${}()|[\]\\]/g, "\\$&");
+    return new RegExp("^" + r.replace(/\*/g, ".*") + "$").test(t);
   }
   /**
    * Clear all event subscriptions
@@ -249,10 +289,10 @@ class T {
     return t;
   }
 }
-const U = new T();
+const U = new S();
 class V {
   constructor(t = {}) {
-    this.eventBus = new T(), this.calendar = new L({
+    this.eventBus = new S(), this.calendar = new L({
       view: t.view || "month",
       date: t.date || /* @__PURE__ */ new Date(),
       weekStartsOn: t.weekStartsOn ?? 0,
@@ -1245,7 +1285,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
@@ -1399,18 +1439,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";
+    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)`;
-      x = `calc(${g}px + ${C} * ${$} / ${_})`, w = `calc(${$} / ${_})`;
+      const { column: C, totalColumns: E } = i.get(t.id), $ = `(100% - ${g + b}px)`;
+      x = `calc(${g}px + ${C} * ${$} / ${E})`, w = `calc(${$} / ${E})`;
     } else
       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: ${x}; width: ${w};
-                        background-color: ${c}; border-radius: ${S};
+                        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 +1485,7 @@ class E {
     });
   }
 }
-class D extends E {
+class _ extends k {
   constructor(t, e) {
     super(t, e), this.maxEventsToShow = 3;
   }
@@ -1503,10 +1543,10 @@ class D extends E {
         `;
   }
   _renderEvent(t) {
-    const e = this.getEventColor(t);
+    const e = this.getEventColor(t), r = this.getContrastingTextColor(e);
     return `
             <div class="fc-event" data-event-id="${this.escapeHTML(t.id)}"
-                 style="background-color: ${e}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
+                 style="background-color: ${e}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: ${r}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
                 ${this.escapeHTML(t.title)}
             </div>
         `;
@@ -1520,7 +1560,7 @@ class D 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;
   }
@@ -1659,7 +1699,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;
   }
@@ -2216,7 +2256,7 @@ const m = class m extends M {
     if (t) {
       this._currentViewInstance && this._currentViewInstance.cleanup && this._currentViewInstance.cleanup();
       try {
-        const e = m.RENDERERS[this.currentView] || D, 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);
@@ -2700,7 +2740,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] || D, 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,21 +2851,21 @@ const m = class m extends M {
   }
 };
 v(m, "RENDERERS", {
-  month: D,
+  month: _,
   week: z,
   day: B
 });
-let k = m;
-customElements.get("forcecal-main") || customElements.define("forcecal-main", k);
+let D = m;
+customElements.get("forcecal-main") || customElements.define("forcecal-main", D);
 export {
   M as BaseComponent,
-  E as BaseViewRenderer,
+  k as BaseViewRenderer,
   y as DOMUtils,
   u as DateUtils,
   B as DayViewRenderer,
-  T as EventBus,
-  k as ForceCalendar,
-  D as MonthViewRenderer,
+  S as EventBus,
+  D as ForceCalendar,
+  _ as MonthViewRenderer,
   V as StateManager,
   f as StyleUtils,
   z as WeekViewRenderer,