@forcecalendar/interface 1.0.50 → 1.0.52

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 L, DateUtils as V } from "@forcecalendar/core";
+import { Calendar as I, DateUtils as L } 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;
@@ -250,9 +250,9 @@ class T {
   }
 }
 const U = new T();
-class I {
+class V {
   constructor(t = {}) {
-    this.eventBus = new T(), this.calendar = new L({
+    this.eventBus = new T(), this.calendar = new I({
       view: t.view || "month",
       date: t.date || /* @__PURE__ */ new Date(),
       weekStartsOn: t.weekStartsOn ?? 0,
@@ -486,7 +486,7 @@ class I {
     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 p extends V {
+class u extends L {
   /**
    * Format date for display
    */
@@ -548,8 +548,8 @@ class p extends V {
    * Get relative time string (e.g., "2 hours ago", "in 3 days")
    */
   static getRelativeTime(t, e = /* @__PURE__ */ new Date(), r = "en-US") {
-    const i = new Intl.RelativeTimeFormat(r, { numeric: "auto" }), s = t - e, n = Math.floor(s / 1e3), a = Math.floor(n / 60), o = Math.floor(a / 60), c = Math.floor(o / 24), d = Math.floor(c / 7), l = Math.floor(c / 30), f = Math.floor(c / 365);
-    return Math.abs(n) < 60 ? i.format(n, "second") : Math.abs(a) < 60 ? i.format(a, "minute") : Math.abs(o) < 24 ? i.format(o, "hour") : Math.abs(c) < 7 ? i.format(c, "day") : Math.abs(d) < 4 ? i.format(d, "week") : Math.abs(l) < 12 ? i.format(l, "month") : i.format(f, "year");
+    const i = new Intl.RelativeTimeFormat(r, { numeric: "auto" }), s = t - e, n = Math.floor(s / 1e3), a = Math.floor(n / 60), o = Math.floor(a / 60), c = Math.floor(o / 24), l = Math.floor(c / 7), d = Math.floor(c / 30), p = Math.floor(c / 365);
+    return Math.abs(n) < 60 ? i.format(n, "second") : Math.abs(a) < 60 ? i.format(a, "minute") : Math.abs(o) < 24 ? i.format(o, "hour") : Math.abs(c) < 7 ? i.format(c, "day") : Math.abs(l) < 4 ? i.format(l, "week") : Math.abs(d) < 12 ? i.format(d, "month") : i.format(p, "year");
   }
   /**
    * Check if date is today
@@ -584,6 +584,13 @@ class p extends V {
     const r = new Date(2024, 0, 7 + t);
     return new Intl.DateTimeFormat(e, { weekday: "short" }).format(r);
   }
+  /**
+   * Get full day name
+   */
+  static getDayName(t, e = "en-US") {
+    const r = new Date(2024, 0, 7 + t);
+    return new Intl.DateTimeFormat(e, { weekday: "long" }).format(r);
+  }
   /**
    * Get month name
    */
@@ -600,7 +607,7 @@ class p extends V {
     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 D {
+class k {
   /**
    * Create element with attributes and children
    */
@@ -795,7 +802,7 @@ class D {
     return t.addEventListener("keydown", s), r == null || r.focus(), () => t.removeEventListener("keydown", s);
   }
 }
-class u {
+class f {
   /**
    * Get CSS variable value
    */
@@ -1132,7 +1139,7 @@ class u {
 /**
  * Default theme colors
  */
-v(u, "colors", {
+v(f, "colors", {
   primary: "#3B82F6",
   // Modern Blue
   secondary: "#64748B",
@@ -1165,7 +1172,7 @@ v(u, "colors", {
 }), /**
  * Common CSS variables
  */
-v(u, "cssVariables", {
+v(f, "cssVariables", {
   // "Pro" Palette - Functional & Sharp
   "--fc-primary-color": "#2563EB",
   // International Blue (Focus)
@@ -1233,7 +1240,7 @@ v(u, "cssVariables", {
 }), /**
  * Get responsive breakpoints
  */
-v(u, "breakpoints", {
+v(f, "breakpoints", {
   xs: "320px",
   sm: "576px",
   md: "768px",
@@ -1247,7 +1254,7 @@ class E {
    * @param {StateManager} stateManager - The state manager instance
    */
   constructor(t, e) {
-    this.container = t, this.stateManager = e, this._listeners = [], this._scrolled = !1;
+    this.container = t, this.stateManager = e, this._listeners = [], this._scrolled = !1, this._nowIndicatorTimer = null;
   }
   /**
    * Render the view into the container
@@ -1262,7 +1269,7 @@ class E {
   cleanup() {
     this._listeners.forEach(({ element: t, event: e, handler: r }) => {
       t.removeEventListener(e, r);
-    }), this._listeners = [];
+    }), this._listeners = [], this._nowIndicatorTimer && (clearInterval(this._nowIndicatorTimer), this._nowIndicatorTimer = null);
   }
   /**
    * Add an event listener with automatic cleanup tracking
@@ -1280,7 +1287,7 @@ class E {
    * @returns {string}
    */
   escapeHTML(t) {
-    return t == null ? "" : D.escapeHTML(String(t));
+    return t == null ? "" : k.escapeHTML(String(t));
   }
   /**
    * Check if a date is today
@@ -1325,7 +1332,7 @@ class E {
    * @returns {string} '#000000' or '#FFFFFF'
    */
   getContrastingTextColor(t) {
-    return !t || typeof t != "string" || t.charAt(0) !== "#" ? "white" : u.getContrastColor(t);
+    return !t || typeof t != "string" || t.charAt(0) !== "#" ? "white" : f.getContrastColor(t);
   }
   /**
    * Render the "now" indicator line for time-based views
@@ -1335,6 +1342,19 @@ class E {
     const t = /* @__PURE__ */ new Date();
     return `<div class="fc-now-indicator" style="position: absolute; left: 0; right: 0; top: ${t.getHours() * 60 + t.getMinutes()}px; height: 2px; background: var(--fc-danger-color); z-index: 15; pointer-events: none;"></div>`;
   }
+  /**
+   * Start a timer that updates the now indicator position every 60 seconds.
+   * Call this after render() in day/week views that show a now indicator.
+   */
+  startNowIndicatorTimer() {
+    this._nowIndicatorTimer && clearInterval(this._nowIndicatorTimer), this._nowIndicatorTimer = setInterval(() => {
+      const t = this.container.querySelector(".fc-now-indicator");
+      if (t) {
+        const e = /* @__PURE__ */ new Date();
+        t.style.top = `${e.getHours() * 60 + e.getMinutes()}px`;
+      }
+    }, 6e4);
+  }
   /**
    * Compute overlap layout columns for a list of timed events.
    * Returns a Map of event.id -> { column, totalColumns }.
@@ -1345,16 +1365,16 @@ class E {
   computeOverlapLayout(t) {
     if (!t || t.length === 0) return /* @__PURE__ */ new Map();
     const e = t.map((o) => {
-      const c = new Date(o.start), d = new Date(o.end), l = c.getHours() * 60 + c.getMinutes(), f = Math.max(l + 1, d.getHours() * 60 + d.getMinutes());
-      return { id: o.id, startMin: l, endMin: f };
+      const c = new Date(o.start), l = new Date(o.end), d = c.getHours() * 60 + c.getMinutes(), p = Math.max(d + 1, l.getHours() * 60 + l.getMinutes());
+      return { id: o.id, startMin: d, endMin: p };
     });
     e.sort((o, c) => o.startMin - c.startMin || c.endMin - c.startMin - (o.endMin - o.startMin));
     const r = [], i = /* @__PURE__ */ new Map();
     for (const o of e) {
       let c = !1;
-      for (let d = 0; d < r.length; d++)
-        if (r[d] <= o.startMin) {
-          r[d] = o.endMin, i.set(o.id, { column: d, totalColumns: 0 }), c = !0;
+      for (let l = 0; l < r.length; l++)
+        if (r[l] <= o.startMin) {
+          r[l] = o.endMin, i.set(o.id, { column: l, totalColumns: 0 }), c = !0;
           break;
         }
       c || (i.set(o.id, { column: r.length, totalColumns: 0 }), r.push(o.endMin));
@@ -1365,9 +1385,9 @@ class E {
       n.length === 0 || o.startMin < a ? (n.push(o), a = Math.max(a, o.endMin)) : (s.push(n), n = [o], a = o.endMin);
     n.length > 0 && s.push(n);
     for (const o of s) {
-      const c = Math.max(...o.map((d) => i.get(d.id).column)) + 1;
-      for (const d of o)
-        i.get(d.id).totalColumns = c;
+      const c = Math.max(...o.map((l) => i.get(l.id).column)) + 1;
+      for (const l of o)
+        i.get(l.id).totalColumns = c;
     }
     return i;
   }
@@ -1380,20 +1400,20 @@ 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), d = this.getContrastingTextColor(c), l = r ? "4px 8px" : "8px 12px", f = r ? "11px" : "13px", g = r ? 2 : 12, b = r ? 2 : 24, C = 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, S = r ? "4px" : "6px";
     let y, x;
     if (i && i.has(t.id)) {
-      const { column: S, totalColumns: _ } = i.get(t.id), $ = `(100% - ${g + b}px)`;
-      y = `calc(${g}px + ${S} * ${$} / ${_})`, x = `calc(${$} / ${_})`;
+      const { column: C, totalColumns: _ } = i.get(t.id), $ = `(100% - ${g + b}px)`;
+      y = `calc(${g}px + ${C} * ${$} / ${_})`, x = `calc(${$} / ${_})`;
     } else
       y = `${g}px`, x = `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: ${C};
-                        padding: ${l}; font-size: ${f};
-                        font-weight: 500; color: ${d}; overflow: hidden;
+                        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);
                         cursor: pointer; z-index: 5;">
                 <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
@@ -1411,7 +1431,7 @@ class E {
    * @returns {string}
    */
   getEventColor(t) {
-    return u.sanitizeColor(t == null ? void 0 : t.backgroundColor, "#2563eb");
+    return f.sanitizeColor(t == null ? void 0 : t.backgroundColor, "#2563eb");
   }
   /**
    * Attach common event handlers for day/event clicks
@@ -1455,10 +1475,10 @@ class w extends E {
     }), s += "</div></div>", s;
   }
   _getDayNames(t) {
-    const e = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], r = [];
+    const e = this.stateManager.getState().config.locale || "en-US", r = [];
     for (let i = 0; i < 7; i++) {
       const s = (t + i) % 7;
-      r.push(e[s]);
+      r.push(u.getDayAbbreviation(s, e));
     }
     return r;
   }
@@ -1477,7 +1497,7 @@ class w extends E {
                     ${t.dayOfMonth}
                 </div>
                 <div class="fc-day-events" style="display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden;">
-                    ${o.map((d) => this._renderEvent(d)).join("")}
+                    ${o.map((l) => this._renderEvent(l)).join("")}
                     ${c > 0 ? `<div class="fc-more-events" style="font-size: 10px; color: var(--fc-text-light); padding: 2px 4px; font-weight: 500;">+${c} more</div>` : ""}
                 </div>
             </div>
@@ -1514,19 +1534,19 @@ class z extends E {
     }
     this.cleanup(), this._scrolled = !1;
     const e = this.stateManager.getState().config, r = this._renderWeekView(t, e);
-    this.container.innerHTML = r, this._attachEventHandlers(), this._scrollToCurrentTime();
+    this.container.innerHTML = r, this._attachEventHandlers(), this._scrollToCurrentTime(), this.startNowIndicatorTimer();
   }
   _renderWeekView(t, e) {
-    const r = t.days, i = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], s = Array.from({ length: 24 }, (a, o) => o), n = r.map((a) => {
+    const r = t.days, i = this.stateManager.getState().config.locale || "en-US", s = Array.from({ length: 24 }, (a, o) => o), n = r.map((a) => {
       const o = new Date(a.date), c = a.events || [];
       return {
         ...a,
         date: o,
-        dayName: i[o.getDay()],
+        dayName: u.getDayAbbreviation(o.getDay(), i),
         dayOfMonth: o.getDate(),
         isToday: this.isToday(o),
-        timedEvents: c.filter((d) => !d.allDay),
-        allDayEvents: c.filter((d) => d.allDay)
+        timedEvents: c.filter((l) => !l.allDay),
+        allDayEvents: c.filter((l) => l.allDay)
       };
     });
     return `
@@ -1651,40 +1671,40 @@ class B extends E {
     }
     this.cleanup(), this._scrolled = !1;
     const e = this.stateManager.getState().config, r = this._renderDayView(t, e);
-    this.container.innerHTML = r, this._attachEventHandlers(), this._scrollToCurrentTime();
+    this.container.innerHTML = r, this._attachEventHandlers(), this._scrollToCurrentTime(), this.startNowIndicatorTimer();
   }
   _renderDayView(t, e) {
-    var l, f;
-    const r = ((f = (l = this.stateManager) == null ? void 0 : l.getState()) == null ? void 0 : f.currentDate) || /* @__PURE__ */ new Date(), i = this._extractDayData(t, r);
+    var d, p;
+    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, d = Array.from({ length: 24 }, (g, b) => b);
+    const { dayDate: s, dayName: n, isToday: a, allDayEvents: o, timedEvents: c } = i, l = Array.from({ length: 24 }, (g, b) => b);
     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)}
                 ${this._renderAllDayRow(o, s)}
-                ${this._renderTimeGrid(c, a, s, d)}
+                ${this._renderTimeGrid(c, a, s, l)}
             </div>
         `;
   }
   _extractDayData(t, e) {
     let r, i, s, n, a;
-    const o = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    const o = this.stateManager.getState().config.locale || "en-US";
     if (t.type === "day" && t.date)
-      if (r = new Date(t.date), i = t.dayName || o[r.getDay()], s = t.isToday !== void 0 ? t.isToday : this.isToday(r), n = t.allDayEvents || [], t.hours && Array.isArray(t.hours)) {
+      if (r = new Date(t.date), i = t.dayName || u.getDayName(r.getDay(), o), s = t.isToday !== void 0 ? t.isToday : this.isToday(r), n = t.allDayEvents || [], t.hours && Array.isArray(t.hours)) {
         const c = /* @__PURE__ */ new Map();
-        t.hours.forEach((d) => {
-          (d.events || []).forEach((l) => {
-            c.has(l.id) || c.set(l.id, l);
+        t.hours.forEach((l) => {
+          (l.events || []).forEach((d) => {
+            c.has(d.id) || c.set(d.id, d);
           });
         }), a = Array.from(c.values());
       } else
         a = [];
     else if (t.days && t.days.length > 0) {
-      const c = t.days.find((l) => this.isSameDay(new Date(l.date), e)) || t.days[0];
-      r = new Date(c.date), i = o[r.getDay()], s = this.isToday(r);
-      const d = c.events || [];
-      n = d.filter((l) => l.allDay), a = d.filter((l) => !l.allDay);
+      const c = t.days.find((d) => this.isSameDay(new Date(d.date), e)) || t.days[0];
+      r = new Date(c.date), i = u.getDayName(r.getDay(), o), s = this.isToday(r);
+      const l = c.events || [];
+      n = l.filter((d) => d.allDay), a = l.filter((d) => !d.allDay);
     } else
       return null;
     return { dayDate: r, dayName: i, isToday: s, allDayEvents: n, timedEvents: a };
@@ -1812,8 +1832,8 @@ class A extends M {
   }
   getStyles() {
     return `
-            ${u.getBaseStyles()}
-            ${u.getButtonStyles()}
+            ${f.getBaseStyles()}
+            ${f.getButtonStyles()}
 
             :host {
                 display: none;
@@ -2058,7 +2078,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 = D.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 = k.trapFocus(this.modalContent));
   }
   close() {
     this.removeAttribute("open"), this._cleanupFocusTrap && (this._cleanupFocusTrap(), this._cleanupFocusTrap = null);
@@ -2103,7 +2123,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 I(t), this._stateUnsubscribe = this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
+    this.stateManager = new V(t), this._stateUnsubscribe = this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
   }
   setupEventListeners() {
     this._busUnsubscribers.forEach((r) => r()), this._busUnsubscribers = [];
@@ -2222,10 +2242,10 @@ const m = class m extends M {
   getStyles() {
     const t = this.getAttribute("height") || "800px";
     return `
-            ${u.getBaseStyles()}
-            ${u.getButtonStyles()}
-            ${u.getGridStyles()}
-            ${u.getAnimations()}
+            ${f.getBaseStyles()}
+            ${f.getButtonStyles()}
+            ${f.getGridStyles()}
+            ${f.getAnimations()}
 
             :host {
                 --calendar-height: ${t};
@@ -2614,7 +2634,7 @@ const m = class m extends M {
       return `
                 <div class="force-calendar">
                     <div class="fc-error">
-                        <p><strong>Error:</strong> ${D.escapeHTML(s.message || "An error occurred")}</p>
+                        <p><strong>Error:</strong> ${k.escapeHTML(s.message || "An error occurred")}</p>
                     </div>
                 </div>
             `;
@@ -2722,15 +2742,15 @@ const m = class m extends M {
     const r = this.stateManager.getState().config.locale;
     switch (e) {
       case "month":
-        return p.formatDate(t, "month", r);
+        return u.formatDate(t, "month", r);
       case "week": {
-        const i = p.startOfWeek(t), s = p.endOfWeek(t);
-        return p.formatDateRange(i, s, r);
+        const i = u.startOfWeek(t), s = u.endOfWeek(t);
+        return u.formatDateRange(i, s, r);
       }
       case "day":
-        return p.formatDate(t, "long", r);
+        return u.formatDate(t, "long", r);
       default:
-        return p.formatDate(t, "month", r);
+        return u.formatDate(t, "month", r);
     }
   }
   getIcon(t) {
@@ -2792,19 +2812,19 @@ v(m, "RENDERERS", {
   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,
-  D as DOMUtils,
-  p as DateUtils,
+  k as DOMUtils,
+  u as DateUtils,
   B as DayViewRenderer,
   T as EventBus,
-  k as ForceCalendar,
+  D as ForceCalendar,
   w as MonthViewRenderer,
-  I as StateManager,
-  u as StyleUtils,
+  V as StateManager,
+  f as StyleUtils,
   z as WeekViewRenderer,
   U as eventBus
 };