@forcecalendar/interface 1.0.60 → 1.0.61

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

@@ -2,7 +2,7 @@ var H = Object.defineProperty;
 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 {
+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);
     });
   }
   /**
@@ -149,7 +151,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();
   }
@@ -289,10 +291,10 @@ class T {
     return t;
   }
 }
-const U = new T();
-class V {
+const j = new S();
+class z {
   constructor(t = {}) {
-    this.eventBus = new T(), this.calendar = new F({
+    this.eventBus = new S(), this.calendar = new F({
       view: t.view || "month",
       date: t.date || /* @__PURE__ */ new Date(),
       weekStartsOn: t.weekStartsOn ?? 0,
@@ -1470,18 +1472,18 @@ class D {
    * @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", v = r ? 2 : 12, y = 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", 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: k } = i.get(t.id), $ = `(100% - ${v + y}px)`;
-      x = `calc(${v}px + ${C} * ${$} / ${k})`, w = `calc(${$} / ${k})`;
+      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 = `${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: ${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);
@@ -1591,7 +1593,7 @@ class _ extends D {
     }), this.attachCommonEventHandlers();
   }
 }
-class z extends D {
+class V extends D {
   constructor(t, e) {
     super(t, e), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
@@ -1876,7 +1878,7 @@ class B extends D {
     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",
@@ -2182,13 +2184,43 @@ class A extends M {
   }
 }
 customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form", A);
-const b = class b 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",
@@ -2197,7 +2229,7 @@ const b = class b 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 = [];
@@ -2883,23 +2915,23 @@ const b = class b extends M {
 };
 m(b, "RENDERERS", {
   month: _,
-  week: z,
+  week: V,
   day: B
 });
-let E = b;
-customElements.get("forcecal-main") || customElements.define("forcecal-main", E);
+let k = b;
+customElements.get("forcecal-main") || customElements.define("forcecal-main", k);
 export {
-  M as BaseComponent,
+  $ as BaseComponent,
   D as BaseViewRenderer,
   g as DOMUtils,
   u as DateUtils,
   B as DayViewRenderer,
-  T as EventBus,
-  E as ForceCalendar,
+  S as EventBus,
+  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