@forcecalendar/interface 1.4.0 → 1.5.0

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

@@ -677,7 +677,26 @@ var n = class extends HTMLElement {
 		};
 		return e.addEventListener("keydown", i), n?.focus(), () => e.removeEventListener("keydown", i);
 	}
-}, c = class {
+}, c = { slds: {
+	"--fc-primary-color": "#0176d3",
+	"--fc-primary-hover": "#014486",
+	"--fc-primary-light": "#eef4ff",
+	"--fc-accent-color": "#0b5cab",
+	"--fc-text-color": "#181818",
+	"--fc-text-secondary": "#706e6b",
+	"--fc-text-light": "#939393",
+	"--fc-border-color": "#e5e5e5",
+	"--fc-border-color-hover": "#c9c9c9",
+	"--fc-background": "#ffffff",
+	"--fc-background-alt": "#f3f3f3",
+	"--fc-background-hover": "#f3f3f3",
+	"--fc-background-active": "#d8e6fe",
+	"--fc-danger-color": "#ea001e",
+	"--fc-success-color": "#2e844a",
+	"--fc-border-radius": "0.25rem",
+	"--fc-border-radius-sm": "0.125rem",
+	"--fc-font-family": "'Salesforce Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+} }, l = class {
 	static colors = {
 		primary: "#3B82F6",
 		secondary: "#64748B",
@@ -882,7 +901,7 @@ var n = class extends HTMLElement {
 	static getAnimations() {
 		return "\n            @keyframes fc-fade-in {\n                from { opacity: 0; }\n                to { opacity: 1; }\n            }\n\n            @keyframes fc-slide-in-up {\n                from {\n                    opacity: 0;\n                    transform: translateY(10px);\n                }\n                to {\n                    opacity: 1;\n                    transform: translateY(0);\n                }\n            }\n\n            @keyframes fc-slide-in-down {\n                from {\n                    opacity: 0;\n                    transform: translateY(-10px);\n                }\n                to {\n                    opacity: 1;\n                    transform: translateY(0);\n                }\n            }\n\n            @keyframes fc-scale-in {\n                from {\n                    opacity: 0;\n                    transform: scale(0.95);\n                }\n                to {\n                    opacity: 1;\n                    transform: scale(1);\n                }\n            }\n\n            @keyframes fc-spin {\n                from { transform: rotate(0deg); }\n                to { transform: rotate(360deg); }\n            }\n\n            .fc-fade-in {\n                animation: fc-fade-in var(--fc-transition);\n            }\n\n            .fc-slide-in-up {\n                animation: fc-slide-in-up var(--fc-transition);\n            }\n\n            .fc-scale-in {\n                animation: fc-scale-in var(--fc-transition);\n            }\n        ";
 	}
-}, l = class {
+}, u = class {
 	constructor(e, t) {
 		this.container = e, this.stateManager = t, this._listeners = [], this._scrolled = !1, this._nowIndicatorTimer = null;
 	}
@@ -921,7 +940,7 @@ var n = class extends HTMLElement {
 		return n === 0 ? `${i} ${r}` : `${i}:${n.toString().padStart(2, "0")} ${r}`;
 	}
 	getContrastingTextColor(e) {
-		return !e || typeof e != "string" || e.charAt(0) !== "#" ? "white" : c.getContrastColor(e);
+		return !e || typeof e != "string" || e.charAt(0) !== "#" ? "white" : l.getContrastColor(e);
 	}
 	renderNowIndicator() {
 		let e = /* @__PURE__ */ new Date();
@@ -996,7 +1015,7 @@ var n = class extends HTMLElement {
         `;
 	}
 	getEventColor(e) {
-		return c.sanitizeColor(e?.backgroundColor, "#2563eb");
+		return l.sanitizeColor(e?.backgroundColor, "#2563eb");
 	}
 	attachCommonEventHandlers() {
 		this.addListener(this.container, "click", (e) => {
@@ -1099,18 +1118,18 @@ var n = class extends HTMLElement {
 			t && e.setAttribute("aria-label", `Event: ${t}`);
 		}
 	}
-}, u = 4, d = 15, f = 1;
-function p(e, t = d) {
+}, d = 4, f = 15, p = 1;
+function m(e, t = f) {
 	return Math.round(e / t) * t;
 }
-function m(e, t) {
+function h(e, t) {
 	return Math.max(0, Math.min(e, 1440 - t));
 }
-function h(e, t) {
+function g(e, t) {
 	let n = new Date(e);
 	return n.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), t.getMilliseconds()), n;
 }
-var g = class {
+var _ = class {
 	constructor(e) {
 		this.renderer = e, this.container = e.container, this.stateManager = e.stateManager, this._active = null, this._docListeners = [];
 	}
@@ -1188,7 +1207,7 @@ var g = class {
 		let t = this._active;
 		if (t) {
 			if (!t.dragging) {
-				if (Math.abs(e.clientX - t.startX) < u && Math.abs(e.clientY - t.startY) < u) return;
+				if (Math.abs(e.clientX - t.startX) < d && Math.abs(e.clientY - t.startY) < d) return;
 				t.dragging = !0, t.eventEl && t.eventEl.classList.add("fc-dragging");
 			}
 			e.preventDefault(), t.onDragMove(e);
@@ -1239,7 +1258,7 @@ var g = class {
 		if (!t) return;
 		let n = this.stateManager.getEvents().find((t) => t.id === e.eventId);
 		if (!n) return;
-		let r = new Date(n.start), i = h(new Date(t.dataset.date), r), a = i.getTime() - r.getTime();
+		let r = new Date(n.start), i = g(new Date(t.dataset.date), r), a = i.getTime() - r.getTime();
 		a !== 0 && this.stateManager.updateEvent(e.eventId, {
 			start: i,
 			end: new Date(new Date(n.end).getTime() + a)
@@ -1254,22 +1273,22 @@ var g = class {
 	}
 	_timeMoveDragMove(e) {
 		let t = this._active, n = this._columnAtPoint(e.clientX) || t.originColumn;
-		t.dropColumn = n, t.deltaMinutes = p((e.clientY - t.startY) / f);
+		t.dropColumn = n, t.deltaMinutes = m((e.clientY - t.startY) / p);
 		let r = t.originColumn.getBoundingClientRect(), i = n.getBoundingClientRect();
-		t.eventEl.style.transform = `translate(${i.left - r.left}px, ${t.deltaMinutes * f}px)`;
+		t.eventEl.style.transform = `translate(${i.left - r.left}px, ${t.deltaMinutes * p}px)`;
 	}
 	_timeMoveDrop() {
 		let e = this._active ?? {}, t = this.stateManager.getEvents().find((t) => t.id === e.eventId);
 		if (!t || !e.deltaMinutes && e.dropColumn === e.originColumn) return;
-		let n = new Date(t.start), r = new Date(t.end).getTime() - n.getTime(), i = h(e.dropColumn ? new Date(e.dropColumn.dataset.date) : n, n), a = m(i.getHours() * 60 + i.getMinutes() + (e.deltaMinutes || 0), Math.round(r / 6e4)), o = new Date(i);
+		let n = new Date(t.start), r = new Date(t.end).getTime() - n.getTime(), i = g(e.dropColumn ? new Date(e.dropColumn.dataset.date) : n, n), a = h(i.getHours() * 60 + i.getMinutes() + (e.deltaMinutes || 0), Math.round(r / 6e4)), o = new Date(i);
 		o.setHours(Math.floor(a / 60), a % 60, 0, 0), o.getTime() !== n.getTime() && this.stateManager.updateEvent(e.eventId, {
 			start: o,
 			end: new Date(o.getTime() + r)
 		});
 	}
 	_resizeDragMove(e) {
-		let t = this._active, n = p((e.clientY - t.startY) / f);
-		t.newHeight = Math.max(d, t.originHeight + n), t.newHeight = Math.min(t.newHeight, 1440 - t.originTop), t.eventEl.style.height = `${t.newHeight}px`;
+		let t = this._active, n = m((e.clientY - t.startY) / p);
+		t.newHeight = Math.max(f, t.originHeight + n), t.newHeight = Math.min(t.newHeight, 1440 - t.originTop), t.eventEl.style.height = `${t.newHeight}px`;
 	}
 	_resizeDrop() {
 		let e = this._active ?? {};
@@ -1281,7 +1300,7 @@ var g = class {
 	}
 	_createDragMove(e) {
 		let t = this._active, n = t.column.getBoundingClientRect(), r = t.startY - n.top, i = e.clientY - n.top;
-		t.fromMinutes = p(Math.min(r, i) / f), t.toMinutes = p(Math.max(r, i) / f), t.fromMinutes = Math.max(0, t.fromMinutes), t.toMinutes = Math.min(1440, Math.max(t.toMinutes, t.fromMinutes + d)), this._selectionEl || (this._selectionEl = this.container.ownerDocument.createElement("div"), this._selectionEl.className = "fc-drag-selection", t.column.appendChild(this._selectionEl)), this._selectionEl.style.top = `${t.fromMinutes * f}px`, this._selectionEl.style.height = `${(t.toMinutes - t.fromMinutes) * f}px`;
+		t.fromMinutes = m(Math.min(r, i) / p), t.toMinutes = m(Math.max(r, i) / p), t.fromMinutes = Math.max(0, t.fromMinutes), t.toMinutes = Math.min(1440, Math.max(t.toMinutes, t.fromMinutes + f)), this._selectionEl || (this._selectionEl = this.container.ownerDocument.createElement("div"), this._selectionEl.className = "fc-drag-selection", t.column.appendChild(this._selectionEl)), this._selectionEl.style.top = `${t.fromMinutes * p}px`, this._selectionEl.style.height = `${(t.toMinutes - t.fromMinutes) * p}px`;
 	}
 	_createDrop() {
 		let e = this._active ?? {};
@@ -1305,7 +1324,7 @@ var g = class {
 			t.className = "fc-resize-handle", t.setAttribute("aria-hidden", "true"), e.appendChild(t);
 		}
 	}
-}, _ = class extends l {
+}, v = class extends u {
 	constructor(e, t) {
 		super(e, t), this.maxEventsToShow = 3;
 	}
@@ -1438,7 +1457,7 @@ var g = class {
 				let e = new Date(t.dataset.date);
 				e.setDate(e.getDate() + (i - r)), this._pendingFocusMs = e.getTime(), i < 0 ? this.stateManager.previous() : this.stateManager.next();
 			}
-		}), this.attachCommonEventHandlers(), new g(this).enableMonthMove();
+		}), this.attachCommonEventHandlers(), new _(this).enableMonthMove();
 	}
 	_applyRovingTabindex(e = null) {
 		let t = Array.from(this.container.querySelectorAll(".fc-month-day"));
@@ -1448,7 +1467,7 @@ var g = class {
 		for (let e of t) e.setAttribute("tabindex", e === n ? "0" : "-1");
 		return n;
 	}
-}, v = class extends l {
+}, y = class extends u {
 	constructor(e, t) {
 		super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
 	}
@@ -1573,14 +1592,14 @@ var g = class {
 			day: "numeric",
 			year: "numeric"
 		}).format(n)}`;
-		this._enhanceTimeGridAccessibility(".fc-week-day-column", r), new g(this).enableTimeGrid(".fc-week-day-column");
+		this._enhanceTimeGridAccessibility(".fc-week-day-column", r), new _(this).enableTimeGrid(".fc-week-day-column");
 	}
 	_scrollToCurrentTime() {
 		if (this._scrolled) return;
 		let e = this.container.querySelector("#week-scroll-container");
 		e && (e.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
 	}
-}, y = class extends l {
+}, b = class extends u {
 	constructor(e, t) {
 		super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
 	}
@@ -1717,14 +1736,14 @@ var g = class {
 			day: "numeric",
 			year: "numeric"
 		}).format(t);
-		this._enhanceTimeGridAccessibility(".fc-day-column", n), new g(this).enableTimeGrid(".fc-day-column");
+		this._enhanceTimeGridAccessibility(".fc-day-column", n), new _(this).enableTimeGrid(".fc-day-column");
 	}
 	_scrollToCurrentTime() {
 		if (this._scrolled) return;
 		let e = this.container.querySelector("#day-scroll-container");
 		e && (e.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
 	}
-}, b = class extends n {
+}, x = class extends n {
 	constructor() {
 		super(), this._isVisible = !1, this._cleanupFocusTrap = null, this.config = {
 			title: "New Event",
@@ -1771,8 +1790,8 @@ var g = class {
 	}
 	getStyles() {
 		return `
-            ${c.getBaseStyles()}
-            ${c.getButtonStyles()}
+            ${l.getBaseStyles()}
+            ${l.getButtonStyles()}
 
             :host {
                 display: none;
@@ -1979,7 +1998,7 @@ var g = class {
                             ${this.config.colors.map((e) => `
                                 <button type="button"
                                         class="color-btn ${e.color === this._formData.color ? "selected" : ""}"
-                                        style="background-color: ${c.sanitizeColor(e.color)}"
+                                        style="background-color: ${l.sanitizeColor(e.color)}"
                                         data-color="${s.escapeHTML(e.color)}"
                                         title="${s.escapeHTML(e.label)}"
                                         aria-label="${s.escapeHTML(e.label)}"
@@ -2044,14 +2063,14 @@ var g = class {
 		this._cleanupFocusTrap && this._cleanupFocusTrap(), this._handleKeyDown && (window.removeEventListener("keydown", this._handleKeyDown), this._handleKeyDown = null, this._keydownListenerAdded = !1);
 	}
 };
-customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form", b);
+customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form", x);
 //#endregion
 //#region src/components/ForceCalendar.js
-var x = class e extends n {
+var S = class e extends n {
 	static RENDERERS = {
-		month: _,
-		week: v,
-		day: y
+		month: v,
+		week: y,
+		day: b
 	};
 	static get observedAttributes() {
 		return [
@@ -2060,7 +2079,8 @@ var x = class e extends n {
 			"locale",
 			"timezone",
 			"week-starts-on",
-			"height"
+			"height",
+			"theme"
 		];
 	}
 	constructor() {
@@ -2161,7 +2181,7 @@ var x = class e extends n {
 		if (t) {
 			this._currentViewInstance && this._currentViewInstance.cleanup && this._currentViewInstance.cleanup();
 			try {
-				let n = new (e.RENDERERS[this.currentView] || _)(t, this.stateManager);
+				let n = new (e.RENDERERS[this.currentView] || v)(t, this.stateManager);
 				n._viewType = this.currentView, this._currentViewInstance = n, n.render();
 			} catch (e) {
 				console.error("[ForceCalendar] Error switching view:", e);
@@ -2184,10 +2204,10 @@ var x = class e extends n {
 	getStyles() {
 		let e = this.getAttribute("height") || "800px";
 		return `
-            ${c.getBaseStyles()}
-            ${c.getButtonStyles()}
-            ${c.getGridStyles()}
-            ${c.getAnimations()}
+            ${l.getBaseStyles()}
+            ${l.getButtonStyles()}
+            ${l.getGridStyles()}
+            ${l.getAnimations()}
 
             :host {
                 --calendar-height: ${e};
@@ -2682,13 +2702,18 @@ var x = class e extends n {
 	renderView() {
 		return "<div id=\"calendar-view-container\"></div>";
 	}
+	_applyTheme(e) {
+		let t = c[e];
+		for (let e of Object.keys(c.slds)) t && t[e] ? this.style.setProperty(e, t[e]) : this.style.removeProperty(e);
+	}
 	afterRender() {
+		this._applyTheme(this.getAttribute("theme"));
 		let t = this.$("#calendar-view-container");
 		if (t && this.stateManager && this.currentView) {
 			if (this._currentViewInstance && this._currentViewInstance._viewType === this.currentView && t.children.length > 0) return;
 			this._currentViewInstance && (this._currentViewInstance.cleanup && this._currentViewInstance.cleanup(), this._viewUnsubscribe &&= (this._viewUnsubscribe(), null));
 			try {
-				let n = new (e.RENDERERS[this.currentView] || _)(t, this.stateManager);
+				let n = new (e.RENDERERS[this.currentView] || v)(t, this.stateManager);
 				n._viewType = this.currentView, this._currentViewInstance = n, n.render();
 			} catch (e) {
 				console.error("[ForceCalendar] Error creating/rendering view:", e);
@@ -2784,8 +2809,8 @@ var x = class e extends n {
 		this._busUnsubscribers.forEach((e) => e()), this._busUnsubscribers = [], this._stateUnsubscribe &&= (this._stateUnsubscribe(), null), this._currentViewInstance && this._currentViewInstance.cleanup && (this._currentViewInstance.cleanup(), this._currentViewInstance = null), this.stateManager && this.stateManager.destroy(), super.cleanup();
 	}
 };
-customElements.get("forcecal-main") || customElements.define("forcecal-main", x);
+customElements.get("forcecal-main") || customElements.define("forcecal-main", S);
 //#endregion
-export { n as BaseComponent, l as BaseViewRenderer, s as DOMUtils, o as DateUtils, y as DayViewRenderer, r as EventBus, x as ForceCalendar, _ as MonthViewRenderer, a as StateManager, c as StyleUtils, v as WeekViewRenderer, i as eventBus };
+export { n as BaseComponent, u as BaseViewRenderer, s as DOMUtils, o as DateUtils, b as DayViewRenderer, r as EventBus, S as ForceCalendar, v as MonthViewRenderer, a as StateManager, l as StyleUtils, y as WeekViewRenderer, i as eventBus };
 
 //# sourceMappingURL=force-calendar-interface.esm.js.map