@forcecalendar/interface 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",

package/src/components/EventForm.js

@@ -300,7 +300,10 @@ export class EventForm extends BaseComponent {
             if (e.target === this) this.close();
         });
 
-        // Close on Escape key
+        // Close on Escape key - remove old listener before adding new one
+        if (this._handleKeyDown) {
+            window.removeEventListener('keydown', this._handleKeyDown);
+        }
         this._handleKeyDown = (e) => {
             if (e.key === 'Escape' && this.hasAttribute('open')) {
                 this.close();

package/src/components/ForceCalendar.js

@@ -436,13 +436,13 @@ export class ForceCalendar extends BaseComponent {
             viewElement.stateManager = this.stateManager;
         }
 
-        // Add event listeners for buttons
+        // Add event listeners for buttons using tracked addListener
         this.$$('[data-action]').forEach(button => {
-            button.addEventListener('click', this.handleNavigation.bind(this));
+            this.addListener(button, 'click', this.handleNavigation);
         });
 
         this.$$('[data-view]').forEach(button => {
-            button.addEventListener('click', this.handleViewChange.bind(this));
+            this.addListener(button, 'click', this.handleViewChange);
         });
 
         // Event Modal Handling
@@ -450,13 +450,13 @@ export class ForceCalendar extends BaseComponent {
         const createBtn = this.$('#create-event-btn');
 
         if (createBtn && modal) {
-            createBtn.addEventListener('click', () => {
+            this.addListener(createBtn, 'click', () => {
                 modal.open(new Date());
             });
         }
 
         // Listen for day clicks from the view
-        this.shadowRoot.addEventListener('day-click', (e) => {
+        this.addListener(this.shadowRoot, 'day-click', (e) => {
             if (modal) {
                 modal.open(e.detail.date);
             }
@@ -464,13 +464,13 @@ export class ForceCalendar extends BaseComponent {
 
         // Handle event saving
         if (modal) {
-            modal.addEventListener('save', (e) => {
+            this.addListener(modal, 'save', (e) => {
                 const eventData = e.detail;
                 // Robust Safari support check for randomUUID
-                const id = (window.crypto && typeof window.crypto.randomUUID === 'function') 
-                    ? window.crypto.randomUUID() 
+                const id = (window.crypto && typeof window.crypto.randomUUID === 'function')
+                    ? window.crypto.randomUUID()
                     : Math.random().toString(36).substring(2, 15);
-                    
+
                 this.stateManager.addEvent({
                     id,
                     ...eventData

package/src/components/views/DayView.js

@@ -318,18 +318,18 @@ export class DayView extends BaseComponent {
     renderTimedEvent(event) {
         const start = new Date(event.start);
         const end = new Date(event.end);
-        
+
         const startMinutes = start.getHours() * 60 + start.getMinutes();
         const durationMinutes = (end - start) / (1000 * 60);
-        
+
         const top = startMinutes;
         const height = Math.max(durationMinutes, 30);
-        
-        const color = event.backgroundColor || 'var(--fc-primary-color)';
-        const textColor = StyleUtils.getContrastColor(color);
+
+        const color = StyleUtils.sanitizeColor(event.backgroundColor);
+        const textColor = StyleUtils.sanitizeColor(StyleUtils.getContrastColor(color), 'white');
 
         return `
-            <div class="event-container" 
+            <div class="event-container"
                  style="top: ${top}px; height: ${height}px; background-color: ${color}; color: ${textColor};"
                  data-event-id="${event.id}">
                 <span class="event-title">${DOMUtils.escapeHTML(event.title)}</span>
@@ -339,11 +339,11 @@ export class DayView extends BaseComponent {
     }
 
     renderAllDayEvent(event) {
-        const color = event.backgroundColor || 'var(--fc-primary-color)';
-        const textColor = StyleUtils.getContrastColor(color);
-        
+        const color = StyleUtils.sanitizeColor(event.backgroundColor);
+        const textColor = StyleUtils.sanitizeColor(StyleUtils.getContrastColor(color), 'white');
+
         return `
-            <div class="event-item" 
+            <div class="event-item"
                  style="background-color: ${color}; color: ${textColor}; font-size: 12px; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-weight: 500; margin-bottom: 2px;"
                  data-event-id="${event.id}">
                 ${DOMUtils.escapeHTML(event.title)}

package/src/components/views/MonthView.js

@@ -7,6 +7,7 @@
 import { BaseComponent } from '../../core/BaseComponent.js';
 import { DOMUtils } from '../../utils/DOMUtils.js';
 import { DateUtils } from '../../utils/DateUtils.js';
+import { StyleUtils } from '../../utils/StyleUtils.js';
 
 export class MonthView extends BaseComponent {
     constructor() {
@@ -455,7 +456,9 @@ export class MonthView extends BaseComponent {
 
         let style = '';
         if (backgroundColor) {
-            style += `background-color: ${backgroundColor}; color: ${textColor};`;
+            const safeColor = StyleUtils.sanitizeColor(backgroundColor);
+            const safeTextColor = StyleUtils.sanitizeColor(textColor, 'white');
+            style += `background-color: ${safeColor}; color: ${safeTextColor};`;
         }
 
         let timeStr = '';

package/src/components/views/WeekView.js

@@ -326,18 +326,18 @@ export class WeekView extends BaseComponent {
     renderTimedEvent(event) {
         const start = new Date(event.start);
         const end = new Date(event.end);
-        
+
         const startMinutes = start.getHours() * 60 + start.getMinutes();
         const durationMinutes = (end - start) / (1000 * 60);
-        
-        const top = startMinutes; 
+
+        const top = startMinutes;
         const height = Math.max(durationMinutes, 20);
-        
-        const color = event.backgroundColor || 'var(--fc-primary-color)';
-        const textColor = StyleUtils.getContrastColor(color);
+
+        const color = StyleUtils.sanitizeColor(event.backgroundColor);
+        const textColor = StyleUtils.sanitizeColor(StyleUtils.getContrastColor(color), 'white');
 
         return `
-            <div class="event-container" 
+            <div class="event-container"
                  style="top: ${top}px; height: ${height}px; background-color: ${color}; color: ${textColor};"
                  data-event-id="${event.id}">
                 <span class="event-title">${DOMUtils.escapeHTML(event.title)}</span>
@@ -347,11 +347,11 @@ export class WeekView extends BaseComponent {
     }
 
     renderAllDayEvent(event) {
-        const color = event.backgroundColor || 'var(--fc-primary-color)';
-        const textColor = StyleUtils.getContrastColor(color);
-        
+        const color = StyleUtils.sanitizeColor(event.backgroundColor);
+        const textColor = StyleUtils.sanitizeColor(StyleUtils.getContrastColor(color), 'white');
+
         return `
-            <div class="event-item" 
+            <div class="event-item"
                  style="background-color: ${color}; color: ${textColor}; font-size: 10px; padding: 2px 4px; border-radius: 2px; cursor: pointer; margin-bottom: 2px;"
                  data-event-id="${event.id}">
                 ${DOMUtils.escapeHTML(event.title)}

package/src/core/BaseComponent.js

@@ -126,6 +126,9 @@ export class BaseComponent extends HTMLElement {
 
     // Template rendering
     render() {
+        // Clean up existing listeners before replacing DOM
+        this.cleanup();
+
         const styles = `
             <style>
                 ${this.getBaseStyles()}

package/src/utils/StyleUtils.js

@@ -312,6 +312,50 @@ export class StyleUtils {
         return yiq >= 128 ? '#000000' : '#FFFFFF';
     }
 
+    /**
+     * Sanitize color value to prevent CSS injection
+     * Returns the color if valid, or a fallback color if invalid
+     */
+    static sanitizeColor(color, fallback = 'var(--fc-primary-color)') {
+        if (!color || typeof color !== 'string') {
+            return fallback;
+        }
+
+        // Trim and check for dangerous characters that could break out of CSS
+        const trimmed = color.trim();
+        if (/[;{}()<>\"\'\\]/.test(trimmed)) {
+            return fallback;
+        }
+
+        // Allow hex colors (#RGB, #RRGGBB, #RRGGBBAA)
+        if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(trimmed)) {
+            return trimmed;
+        }
+
+        // Allow CSS variables
+        if (/^var\(--[a-zA-Z0-9-]+\)$/.test(trimmed)) {
+            return trimmed;
+        }
+
+        // Allow rgb/rgba with numbers only
+        if (/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*(0|1|0?\.\d+))?\s*\)$/.test(trimmed)) {
+            return trimmed;
+        }
+
+        // Allow safe CSS color keywords
+        const safeKeywords = [
+            'transparent', 'currentColor', 'inherit',
+            'black', 'white', 'red', 'green', 'blue', 'yellow', 'orange', 'purple',
+            'pink', 'brown', 'gray', 'grey', 'cyan', 'magenta', 'lime', 'navy',
+            'teal', 'aqua', 'maroon', 'olive', 'silver', 'fuchsia'
+        ];
+        if (safeKeywords.includes(trimmed.toLowerCase())) {
+            return trimmed;
+        }
+
+        return fallback;
+    }
+
     /**
      * Convert hex to rgba
      */