@forcecalendar/interface 0.9.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "0.9.0",
+  "version": "1.0.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() {
@@ -107,11 +108,30 @@ export class MonthView extends BaseComponent {
     }
 
     getContrastingTextColor(bgColor) {
-        if (!bgColor) return 'white';
-        const color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
-        const r = parseInt(color.substring(0, 2), 16);
-        const g = parseInt(color.substring(2, 4), 16);
-        const b = parseInt(color.substring(4, 6), 16);
+        if (!bgColor || typeof bgColor !== 'string') return 'white';
+
+        // Extract hex color, removing # if present
+        const color = (bgColor.charAt(0) === '#') ? bgColor.substring(1) : bgColor;
+
+        // Validate hex format (3 or 6 characters)
+        if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(color)) {
+            return 'white'; // Fallback for invalid format
+        }
+
+        // Expand 3-char hex to 6-char
+        const fullColor = color.length === 3
+            ? color[0] + color[0] + color[1] + color[1] + color[2] + color[2]
+            : color;
+
+        const r = parseInt(fullColor.substring(0, 2), 16);
+        const g = parseInt(fullColor.substring(2, 4), 16);
+        const b = parseInt(fullColor.substring(4, 6), 16);
+
+        // Check for NaN (shouldn't happen with validation, but just in case)
+        if (isNaN(r) || isNaN(g) || isNaN(b)) {
+            return 'white';
+        }
+
         const uicolors = [r / 255, g / 255, b / 255];
         const c = uicolors.map((col) => {
             if (col <= 0.03928) {
@@ -455,7 +475,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/core/EventBus.js

@@ -102,13 +102,14 @@ class EventBus {
             }
         }
 
-        // Handle wildcard subscriptions
-        for (const subscription of this.wildcardHandlers) {
+        // Handle wildcard subscriptions (copy Set to avoid mutation during iteration)
+        const toRemove = [];
+        for (const subscription of [...this.wildcardHandlers]) {
             if (this.matchesPattern(eventName, subscription.pattern)) {
                 const { handler, once } = subscription;
 
                 if (once) {
-                    this.wildcardHandlers.delete(subscription);
+                    toRemove.push(subscription);
                 }
 
                 try {
@@ -121,6 +122,8 @@ class EventBus {
                 }
             }
         }
+        // Remove one-time handlers after iteration
+        toRemove.forEach(sub => this.wildcardHandlers.delete(sub));
 
         return Promise.all(promises);
     }

package/src/core/StateManager.js

@@ -145,33 +145,53 @@ class StateManager {
     // Event management
     addEvent(event) {
         const addedEvent = this.calendar.addEvent(event);
-        this.state.events.push(addedEvent);
-        this.setState({ events: [...this.state.events] });
+        if (!addedEvent) {
+            console.error('Failed to add event to calendar');
+            eventBus.emit('event:error', { action: 'add', event, error: 'Failed to add event' });
+            return null;
+        }
+        // Create new array to avoid mutation before setState
+        const newEvents = [...this.state.events, addedEvent];
+        this.setState({ events: newEvents });
         eventBus.emit('event:added', { event: addedEvent });
         return addedEvent;
     }
 
     updateEvent(eventId, updates) {
         const event = this.calendar.updateEvent(eventId, updates);
-        if (event) {
-            const index = this.state.events.findIndex(e => e.id === eventId);
-            if (index > -1) {
-                this.state.events[index] = event;
-                this.setState({ events: [...this.state.events] });
-                eventBus.emit('event:updated', { event });
-            }
+        if (!event) {
+            console.error(`Failed to update event: ${eventId}`);
+            eventBus.emit('event:error', { action: 'update', eventId, updates, error: 'Event not found in calendar' });
+            return null;
         }
+
+        const index = this.state.events.findIndex(e => e.id === eventId);
+        if (index === -1) {
+            console.error(`Event ${eventId} not found in state`);
+            eventBus.emit('event:error', { action: 'update', eventId, error: 'Event not found in state' });
+            return null;
+        }
+
+        // Create new array to avoid mutation before setState
+        const newEvents = [...this.state.events];
+        newEvents[index] = event;
+        this.setState({ events: newEvents });
+        eventBus.emit('event:updated', { event });
         return event;
     }
 
     deleteEvent(eventId) {
         const deleted = this.calendar.removeEvent(eventId);
-        if (deleted) {
-            this.state.events = this.state.events.filter(e => e.id !== eventId);
-            this.setState({ events: [...this.state.events] });
-            eventBus.emit('event:deleted', { eventId });
+        if (!deleted) {
+            console.error(`Failed to delete event: ${eventId}`);
+            eventBus.emit('event:error', { action: 'delete', eventId, error: 'Event not found' });
+            return false;
         }
-        return deleted;
+        // Create new array to avoid mutation before setState
+        const newEvents = this.state.events.filter(e => e.id !== eventId);
+        this.setState({ events: newEvents });
+        eventBus.emit('event:deleted', { eventId });
+        return true;
     }
 
     getEvents() {

package/src/utils/DOMUtils.js

@@ -255,6 +255,15 @@ export class DOMUtils {
         const focusableElements = container.querySelectorAll(
             'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
         );
+
+        // Handle case where there are no focusable elements
+        if (focusableElements.length === 0) {
+            // Make container focusable as fallback
+            container.setAttribute('tabindex', '-1');
+            container.focus();
+            return () => container.removeAttribute('tabindex');
+        }
+
         const firstFocusable = focusableElements[0];
         const lastFocusable = focusableElements[focusableElements.length - 1];
 
@@ -263,12 +272,12 @@ export class DOMUtils {
 
             if (e.shiftKey) {
                 if (document.activeElement === firstFocusable) {
-                    lastFocusable.focus();
+                    lastFocusable?.focus();
                     e.preventDefault();
                 }
             } else {
                 if (document.activeElement === lastFocusable) {
-                    firstFocusable.focus();
+                    firstFocusable?.focus();
                     e.preventDefault();
                 }
             }

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
      */