@forcecalendar/interface 1.0.59 → 1.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.0.59",
+  "version": "1.0.61",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",
@@ -54,7 +54,7 @@
   "devDependencies": {
     "@babel/core": "^7.28.5",
     "@babel/preset-env": "^7.28.5",
-    "@forcecalendar/core": "^2.1.54",
+    "@forcecalendar/core": "^2.1.68",
     "babel-jest": "^30.2.0",
     "eslint": "^8.57.1",
     "jest": "^30.2.0",

package/src/components/EventForm.js

@@ -253,12 +253,12 @@ export class EventForm extends BaseComponent {
                             ${this.config.colors
                               .map(
                                 c => `
-                                <button type="button" 
-                                        class="color-btn ${c.color === this._formData.color ? 'selected' : ''}" 
-                                        style="background-color: ${c.color}" 
-                                        data-color="${c.color}"
-                                        title="${c.label}"
-                                        aria-label="${c.label}"
+                                <button type="button"
+                                        class="color-btn ${c.color === this._formData.color ? 'selected' : ''}"
+                                        style="background-color: ${StyleUtils.sanitizeColor(c.color)}"
+                                        data-color="${DOMUtils.escapeHTML(c.color)}"
+                                        title="${DOMUtils.escapeHTML(c.label)}"
+                                        aria-label="${DOMUtils.escapeHTML(c.label)}"
                                         aria-checked="${c.color === this._formData.color ? 'true' : 'false'}"
                                         role="radio"></button>
                             `

package/src/components/ForceCalendar.js

@@ -37,6 +37,38 @@ export class ForceCalendar extends BaseComponent {
     this._busUnsubscribers = [];
   }
 
+  /**
+   * Route observed-attribute changes into the StateManager.
+   * Without this, attribute updates after mount (view, locale, timezone,
+   * week-starts-on, date) only re-rendered from stale state and had no
+   * visible effect. 'height' is presentational and picked up by render().
+   */
+  propChanged(name, oldValue, newValue) {
+    if (!this.stateManager || oldValue === newValue) return;
+
+    switch (name) {
+      case 'view':
+        if (newValue) this.stateManager.setView(newValue);
+        break;
+      case 'date': {
+        const date = newValue ? new Date(newValue) : null;
+        if (date && !isNaN(date.getTime())) this.stateManager.setDate(date);
+        break;
+      }
+      case 'locale':
+        if (newValue) this.stateManager.updateConfig({ locale: newValue });
+        break;
+      case 'timezone':
+        if (newValue) this.stateManager.updateConfig({ timeZone: newValue });
+        break;
+      case 'week-starts-on': {
+        const day = parseInt(newValue, 10);
+        if (!Number.isNaN(day)) this.stateManager.updateConfig({ weekStartsOn: day });
+        break;
+      }
+    }
+  }
+
   initialize() {
     // Initialize state manager with config from attributes
     const config = {

package/src/core/BaseComponent.js

@@ -183,8 +183,13 @@ export class BaseComponent extends HTMLElement {
    */
   _restoreScrollPositions(positions) {
     if (!this._contentWrapper || positions.size === 0) return;
+    // CSS.escape may be absent in sandboxed or test environments
+    const escapeId =
+      typeof CSS !== 'undefined' && typeof CSS.escape === 'function'
+        ? CSS.escape
+        : id => String(id).replace(/["\\]/g, '\\$&');
     positions.forEach((pos, id) => {
-      const el = this._contentWrapper.querySelector(`[id="${CSS.escape(id)}"]`);
+      const el = this._contentWrapper.querySelector(`[id="${escapeId(id)}"]`);
       if (el) {
         el.scrollTop = pos.top;
         el.scrollLeft = pos.left;

package/src/utils/DOMUtils.js

@@ -129,14 +129,24 @@ export class DOMUtils {
 
   /**
    * Wait for animation/transition to complete
+   * Resolves after `timeout` ms even if the event never fires (animation
+   * cancelled, element removed from DOM, etc.) so awaiting callers can't hang.
+   * @param {Element} element - Element to listen on
+   * @param {string} [eventType='animationend'] - Event to wait for
+   * @param {number} [timeout=3000] - Max wait in ms; 0 disables the timeout
    */
-  static waitForAnimation(element, eventType = 'animationend') {
+  static waitForAnimation(element, eventType = 'animationend', timeout = 3000) {
     return new Promise(resolve => {
+      let timeoutId = null;
       const handler = () => {
+        if (timeoutId !== null) clearTimeout(timeoutId);
         element.removeEventListener(eventType, handler);
         resolve();
       };
       element.addEventListener(eventType, handler);
+      if (timeout > 0) {
+        timeoutId = setTimeout(handler, timeout);
+      }
     });
   }
 
@@ -149,13 +159,48 @@ export class DOMUtils {
 
   /**
    * Parse HTML string safely
+   * Sanitizes by default: strips script-capable elements, inline event
+   * handlers and javascript: URLs so the returned node is inert even if the
+   * input contains an XSS payload. Pass { sanitize: false } only for trusted,
+   * non-user-controlled markup.
    */
-  static parseHTML(htmlString) {
+  static parseHTML(htmlString, { sanitize = true } = {}) {
     const template = document.createElement('template');
     template.innerHTML = htmlString.trim();
+    if (sanitize) {
+      this._sanitizeNode(template.content);
+    }
     return template.content.firstChild;
   }
 
+  /**
+   * Remove script-capable elements, on* handlers and javascript: URLs
+   * from a parsed DOM fragment (in place)
+   */
+  static _sanitizeNode(root) {
+    const DANGEROUS_TAGS = 'script, iframe, object, embed, link, meta, base';
+    root.querySelectorAll(DANGEROUS_TAGS).forEach(el => el.remove());
+
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+    let node = walker.nextNode();
+    while (node) {
+      for (const attr of Array.from(node.attributes)) {
+        const name = attr.name.toLowerCase();
+        // Browsers ignore control chars/whitespace inside URL schemes,
+        // so strip them before checking for javascript:/data: payloads
+        const value = attr.value.replace(/[\u0000-\u0020]/g, '').toLowerCase();
+        if (
+          name.startsWith('on') ||
+          value.startsWith('javascript:') ||
+          value.startsWith('data:text/html')
+        ) {
+          node.removeAttribute(attr.name);
+        }
+      }
+      node = walker.nextNode();
+    }
+  }
+
   /**
    * Escape HTML to prevent XSS
    */
@@ -234,14 +279,13 @@ export class DOMUtils {
   }
 
   /**
-   * Clone element with event listeners
+   * Clone an element. Event listeners are NOT copied — the Web Platform
+   * provides no way to enumerate listeners, so callers must re-attach their
+   * own handlers to the clone.
+   * @deprecated Use element.cloneNode(deep) directly and re-bind listeners.
    */
   static cloneWithEvents(element, deep = true) {
-    const clone = element.cloneNode(deep);
-
-    // Copy event listeners (Note: This is a simplified version)
-    // In production, you'd need a more robust event copying mechanism
-    return clone;
+    return element.cloneNode(deep);
   }
 
   /**
@@ -266,13 +310,18 @@ export class DOMUtils {
     const handleKeyDown = e => {
       if (e.key !== 'Tab') return;
 
+      // Inside Shadow DOM, document.activeElement reports the host element;
+      // the shadow root's own activeElement gives the truly focused node.
+      const root = container.getRootNode();
+      const activeElement = root.activeElement ?? document.activeElement;
+
       if (e.shiftKey) {
-        if (document.activeElement === firstFocusable) {
+        if (activeElement === firstFocusable) {
           lastFocusable?.focus();
           e.preventDefault();
         }
       } else {
-        if (document.activeElement === lastFocusable) {
+        if (activeElement === lastFocusable) {
           firstFocusable?.focus();
           e.preventDefault();
         }

package/src/utils/StyleUtils.js

@@ -321,9 +321,9 @@ export class StyleUtils {
    */
   static getContrastColor(bgColor) {
     const color = bgColor.replace('#', '');
-    const r = parseInt(color.substr(0, 2), 16);
-    const g = parseInt(color.substr(2, 2), 16);
-    const b = parseInt(color.substr(4, 2), 16);
+    const r = parseInt(color.substring(0, 2), 16);
+    const g = parseInt(color.substring(2, 4), 16);
+    const b = parseInt(color.substring(4, 6), 16);
     const yiq = (r * 299 + g * 587 + b * 114) / 1000;
     return yiq >= 128 ? '#000000' : '#FFFFFF';
   }
@@ -398,9 +398,9 @@ export class StyleUtils {
    */
   static hexToRgba(hex, alpha = 1) {
     const color = hex.replace('#', '');
-    const r = parseInt(color.substr(0, 2), 16);
-    const g = parseInt(color.substr(2, 2), 16);
-    const b = parseInt(color.substr(4, 2), 16);
+    const r = parseInt(color.substring(0, 2), 16);
+    const g = parseInt(color.substring(2, 4), 16);
+    const b = parseInt(color.substring(4, 6), 16);
     return `rgba(${r}, ${g}, ${b}, ${alpha})`;
   }