@forcecalendar/interface 1.0.46 → 1.0.47

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

@@ -600,7 +600,7 @@ class p extends L {
     return i && (i.toLowerCase() === "pm" && n < 12 ? a = n + 12 : i.toLowerCase() === "am" && n === 12 && (a = 0)), r.setHours(a, o || 0, 0, 0), r;
   }
 }
-class E {
+class D {
   /**
    * Create element with attributes and children
    */
@@ -1241,7 +1241,7 @@ g(f, "breakpoints", {
   xl: "1200px",
   "2xl": "1400px"
 });
-class k {
+class E {
   /**
    * @param {HTMLElement} container - The DOM element to render into
    * @param {StateManager} stateManager - The state manager instance
@@ -1280,7 +1280,7 @@ class k {
    * @returns {string}
    */
   escapeHTML(t) {
-    return t == null ? "" : E.escapeHTML(String(t));
+    return t == null ? "" : D.escapeHTML(String(t));
   }
   /**
    * Check if a date is today
@@ -1341,7 +1341,7 @@ class k {
    */
   renderNowIndicator() {
     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: #dc2626; z-index: 15; pointer-events: none;"></div>`;
+    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>`;
   }
   /**
    * Compute overlap layout columns for a list of timed events.
@@ -1434,7 +1434,7 @@ class k {
     });
   }
 }
-class w extends k {
+class w extends E {
   constructor(t, e) {
     super(t, e), this.maxEventsToShow = 3;
   }
@@ -1442,7 +1442,7 @@ class w extends k {
     if (!this.container || !this.stateManager) return;
     const t = this.stateManager.getViewData();
     if (!t || !t.weeks) {
-      this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for month view.</div>';
+      this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--fc-text-secondary);">No data available for month view.</div>';
       return;
     }
     this.cleanup();
@@ -1452,9 +1452,9 @@ class w extends k {
   _renderMonthView(t, e) {
     const r = e.weekStartsOn || 0;
     let i = `
-            <div class="fc-month-view" style="display: flex; flex-direction: column; height: 100%; min-height: 400px; background: #fff; border: 1px solid #e5e7eb;">
-                <div class="fc-month-header" style="display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb;">
-                    ${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: #6b7280; text-transform: uppercase;">${n}</div>`).join("")}
+            <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("")}
                 </div>
                 <div class="fc-month-body" style="display: flex; flex-direction: column; flex: 1;">
         `;
@@ -1477,16 +1477,16 @@ class w extends k {
     }), e += "</div>", e;
   }
   _renderDay(t) {
-    const e = !t.isCurrentMonth, r = t.isToday, s = e ? "#f3f4f6" : "#fff", i = e ? "#9ca3af" : "#111827", n = r ? "background: #2563eb; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;" : "", o = t.events || [], a = o.slice(0, this.maxEventsToShow), c = o.length - this.maxEventsToShow;
+    const e = !t.isCurrentMonth, r = t.isToday, s = e ? "var(--fc-background-hover)" : "var(--fc-background)", i = 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;" : "", o = t.events || [], a = o.slice(0, this.maxEventsToShow), c = o.length - this.maxEventsToShow;
     return `
             <div class="fc-month-day" data-date="${t.date}"
-                 style="background: ${s}; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 4px; min-height: 80px; cursor: pointer; display: flex; flex-direction: column;">
+                 style="background: ${s}; 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: ${i}; padding: 2px 4px; margin-bottom: 4px; ${n}">
                     ${t.dayOfMonth}
                 </div>
                 <div class="fc-day-events" style="display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden;">
                     ${a.map((d) => this._renderEvent(d)).join("")}
-                    ${c > 0 ? `<div class="fc-more-events" style="font-size: 10px; color: #6b7280; padding: 2px 4px; font-weight: 500;">+${c} more</div>` : ""}
+                    ${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>
         `;
@@ -1509,7 +1509,7 @@ class w extends k {
     }), this.attachCommonEventHandlers();
   }
 }
-class I extends k {
+class I extends E {
   constructor(t, e) {
     super(t, e), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
@@ -1517,7 +1517,7 @@ class I extends k {
     if (!this.container || !this.stateManager) return;
     const t = this.stateManager.getViewData();
     if (!t || !t.days || t.days.length === 0) {
-      this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for week view.</div>';
+      this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--fc-text-secondary);">No data available for week view.</div>';
       return;
     }
     this.cleanup(), this._scrolled = !1;
@@ -1538,7 +1538,7 @@ class I extends k {
       };
     });
     return `
-            <div class="fc-week-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
+            <div class="fc-week-view" style="display: flex; flex-direction: column; height: 100%; background: var(--fc-background); overflow: hidden;">
                 ${this._renderHeader(n)}
                 ${this._renderAllDayRow(n)}
                 ${this._renderTimeGrid(n, i)}
@@ -1547,15 +1547,15 @@ class I extends k {
   }
   _renderHeader(t) {
     return `
-            <div class="fc-week-header" style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
-                <div style="border-right: 1px solid #e5e7eb;"></div>
+            <div class="fc-week-header" style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid var(--fc-border-color); background: var(--fc-background-alt); flex-shrink: 0;">
+                <div style="border-right: 1px solid var(--fc-border-color);"></div>
                 ${t.map(
       (e) => `
-                    <div style="padding: 12px 8px; text-align: center; border-right: 1px solid #e5e7eb;">
-                        <div style="font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em;">
+                    <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}
                         </div>
-                        <div style="font-size: 16px; font-weight: 500; margin-top: 4px; ${e.isToday ? "background: #dc2626; color: white; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;" : "color: #111827;"}">
+                        <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}
                         </div>
                     </div>
@@ -1566,13 +1566,13 @@ class I extends k {
   }
   _renderAllDayRow(t) {
     return `
-            <div class="fc-all-day-row" style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #fafafa; min-height: 32px; flex-shrink: 0;">
-                <div style="font-size: 9px; color: #6b7280; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e5e7eb; text-transform: uppercase; font-weight: 700;">
+            <div class="fc-all-day-row" style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid var(--fc-border-color); background: var(--fc-background-alt); min-height: 32px; flex-shrink: 0;">
+                <div style="font-size: 9px; color: var(--fc-text-light); display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--fc-border-color); text-transform: uppercase; font-weight: 700;">
                     All day
                 </div>
                 ${t.map(
       (e) => `
-                    <div class="fc-all-day-cell" data-date="${e.date.toISOString()}" style="border-right: 1px solid #e5e7eb; padding: 4px; display: flex; flex-direction: column; gap: 2px;">
+                    <div class="fc-all-day-cell" data-date="${e.date.toISOString()}" style="border-right: 1px solid var(--fc-border-color); padding: 4px; display: flex; flex-direction: column; gap: 2px;">
                         ${e.allDayEvents.map(
         (r) => `
                             <div class="fc-event fc-all-day-event" data-event-id="${this.escapeHTML(r.id)}"
@@ -1599,10 +1599,10 @@ class I extends k {
   }
   _renderTimeGutter(t) {
     return `
-            <div class="fc-time-gutter" style="border-right: 1px solid #e5e7eb; background: #fafafa;">
+            <div class="fc-time-gutter" style="border-right: 1px solid var(--fc-border-color); background: var(--fc-background-alt);">
                 ${t.map(
       (e) => `
-                    <div style="height: ${this.hourHeight}px; font-size: 10px; color: #6b7280; text-align: right; padding-right: 8px; font-weight: 500;">
+                    <div style="height: ${this.hourHeight}px; font-size: 10px; color: var(--fc-text-light); text-align: right; padding-right: 8px; font-weight: 500;">
                         ${e === 0 ? "" : this.formatHour(e)}
                     </div>
                 `
@@ -1612,9 +1612,9 @@ class I extends k {
   }
   _renderDayColumn(t, e) {
     return `
-            <div class="fc-week-day-column" data-date="${t.date.toISOString()}" style="border-right: 1px solid #e5e7eb; position: relative; cursor: pointer;">
+            <div class="fc-week-day-column" data-date="${t.date.toISOString()}" style="border-right: 1px solid var(--fc-border-color); position: relative; cursor: pointer;">
                 <!-- Hour grid lines -->
-                ${e.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid #f3f4f6;"></div>`).join("")}
+                ${e.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join("")}
 
                 <!-- Now indicator for today -->
                 ${t.isToday ? this.renderNowIndicator() : ""}
@@ -1646,7 +1646,7 @@ class I extends k {
     t && (t.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
   }
 }
-class z extends k {
+class z extends E {
   constructor(t, e) {
     super(t, e), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
@@ -1654,7 +1654,7 @@ class z extends k {
     if (!this.container || !this.stateManager) return;
     const t = this.stateManager.getViewData();
     if (!t) {
-      this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
+      this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--fc-text-secondary);">No data available for day view.</div>';
       return;
     }
     this.cleanup(), this._scrolled = !1;
@@ -1665,10 +1665,10 @@ class z extends k {
     var l, u;
     const r = ((u = (l = this.stateManager) == null ? void 0 : l.getState()) == null ? void 0 : u.currentDate) || /* @__PURE__ */ new Date(), s = this._extractDayData(t, r);
     if (!s)
-      return '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
+      return '<div style="padding: 20px; text-align: center; color: var(--fc-text-secondary);">No data available for day view.</div>';
     const { dayDate: i, dayName: n, isToday: o, allDayEvents: a, timedEvents: c } = s, d = Array.from({ length: 24 }, (m, b) => b);
     return `
-            <div class="fc-day-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
+            <div class="fc-day-view" style="display: flex; flex-direction: column; height: 100%; background: var(--fc-background); overflow: hidden;">
                 ${this._renderHeader(i, n, o)}
                 ${this._renderAllDayRow(a, i)}
                 ${this._renderTimeGrid(c, o, i, d)}
@@ -1699,13 +1699,13 @@ class z extends k {
   }
   _renderHeader(t, e, r) {
     return `
-            <div class="fc-day-header" style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
-                <div style="border-right: 1px solid #e5e7eb;"></div>
+            <div class="fc-day-header" style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid var(--fc-border-color); background: var(--fc-background-alt); flex-shrink: 0;">
+                <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: #6b7280; text-transform: uppercase; letter-spacing: 0.1em;">
+                    <div style="font-size: 12px; font-weight: 700; color: var(--fc-text-light); text-transform: uppercase; letter-spacing: 0.1em;">
                         ${e}
                     </div>
-                    <div style="font-size: 24px; font-weight: 600; margin-top: 4px; ${r ? "color: #dc2626;" : "color: #111827;"}">
+                    <div style="font-size: 24px; font-weight: 600; margin-top: 4px; ${r ? "color: var(--fc-danger-color);" : "color: var(--fc-text-color);"}">
                         ${t.getDate()}
                     </div>
                 </div>
@@ -1714,8 +1714,8 @@ class z extends k {
   }
   _renderAllDayRow(t, e) {
     return `
-            <div class="fc-all-day-row" style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #fafafa; min-height: 36px; flex-shrink: 0;">
-                <div style="font-size: 9px; color: #6b7280; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e5e7eb; text-transform: uppercase; font-weight: 700;">
+            <div class="fc-all-day-row" style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid var(--fc-border-color); background: var(--fc-background-alt); min-height: 36px; flex-shrink: 0;">
+                <div style="font-size: 9px; color: var(--fc-text-light); display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--fc-border-color); text-transform: uppercase; font-weight: 700;">
                     All day
                 </div>
                 <div class="fc-all-day-cell" data-date="${e.toISOString()}" style="padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px;">
@@ -1743,10 +1743,10 @@ class z extends k {
   }
   _renderTimeGutter(t) {
     return `
-            <div class="fc-time-gutter" style="border-right: 1px solid #e5e7eb; background: #fafafa;">
+            <div class="fc-time-gutter" style="border-right: 1px solid var(--fc-border-color); background: var(--fc-background-alt);">
                 ${t.map(
       (e) => `
-                    <div style="height: ${this.hourHeight}px; font-size: 11px; color: #6b7280; text-align: right; padding-right: 12px; font-weight: 500;">
+                    <div style="height: ${this.hourHeight}px; font-size: 11px; color: var(--fc-text-light); text-align: right; padding-right: 12px; font-weight: 500;">
                         ${e === 0 ? "" : this.formatHour(e)}
                     </div>
                 `
@@ -1758,7 +1758,7 @@ class z extends k {
     return `
             <div class="fc-day-column" data-date="${r.toISOString()}" style="position: relative; cursor: pointer;">
                 <!-- Hour grid lines -->
-                ${s.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid #f3f4f6;"></div>`).join("")}
+                ${s.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join("")}
 
                 <!-- Now indicator for today -->
                 ${e ? this.renderNowIndicator() : ""}
@@ -2066,7 +2066,7 @@ class B 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 = E.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 = D.trapFocus(this.modalContent));
   }
   close() {
     this.removeAttribute("open"), this._cleanupFocusTrap && (this._cleanupFocusTrap(), this._cleanupFocusTrap = null);
@@ -2622,7 +2622,7 @@ const v = class v extends M {
       return `
                 <div class="force-calendar">
                     <div class="fc-error">
-                        <p><strong>Error:</strong> ${E.escapeHTML(i.message || "An error occurred")}</p>
+                        <p><strong>Error:</strong> ${D.escapeHTML(i.message || "An error occurred")}</p>
                     </div>
                 </div>
             `;
@@ -2800,16 +2800,16 @@ g(v, "RENDERERS", {
   week: I,
   day: z
 });
-let D = v;
-customElements.get("forcecal-main") || customElements.define("forcecal-main", D);
+let k = v;
+customElements.get("forcecal-main") || customElements.define("forcecal-main", k);
 export {
   M as BaseComponent,
-  k as BaseViewRenderer,
-  E as DOMUtils,
+  E as BaseViewRenderer,
+  D as DOMUtils,
   p as DateUtils,
   z as DayViewRenderer,
   T as EventBus,
-  D as ForceCalendar,
+  k as ForceCalendar,
   w as MonthViewRenderer,
   V as StateManager,
   f as StyleUtils,