@forcecalendar/interface 1.0.55 → 1.0.57

package/package.json

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

package/src/components/ForceCalendar.js

@@ -676,7 +676,7 @@ export class ForceCalendar extends BaseComponent {
                         <button class="fc-nav-arrow" data-action="previous" title="Previous">
                             ${this.getIcon('chevron-left')}
                         </button>
-                        <h2 class="fc-title">${title}</h2>
+                        <h2 class="fc-title">${DOMUtils.escapeHTML(title)}</h2>
                         <button class="fc-nav-arrow" data-action="next" title="Next">
                             ${this.getIcon('chevron-right')}
                         </button>

package/src/core/BaseComponent.js

@@ -31,6 +31,8 @@ export class BaseComponent extends HTMLElement {
   disconnectedCallback() {
     this.unmount();
     this.cleanup();
+    this._styleEl = null;
+    this._contentWrapper = null;
   }
 
   // To be overridden by child classes
@@ -131,18 +133,102 @@ export class BaseComponent extends HTMLElement {
     // Clean up existing listeners before replacing DOM
     this.cleanup();
 
-    const styles = `
-            <style>
-                ${this.getBaseStyles()}
-                ${this.getStyles()}
-            </style>
-        `;
-
     const template = this.template();
-    this.shadowRoot.innerHTML = styles + template;
+
+    // First render: create style element and content wrapper
+    if (!this._styleEl) {
+      this._styleEl = document.createElement('style');
+      this.shadowRoot.appendChild(this._styleEl);
+      this._contentWrapper = document.createElement('div');
+      this._contentWrapper.setAttribute('id', 'fc-root');
+      this._contentWrapper.style.display = 'contents';
+      this.shadowRoot.appendChild(this._contentWrapper);
+    }
+
+    // Update styles on every render in case getStyles() depends on state
+    this._styleEl.textContent = this.getBaseStyles() + '\n' + this.getStyles();
+
+    // Save scroll positions and focused element before DOM replacement
+    const scrollPositions = this._saveScrollPositions();
+    const activeSelector = this._getActiveElementSelector();
+
+    this._contentWrapper.innerHTML = template;
+
+    // Restore scroll positions and focus
+    this._restoreScrollPositions(scrollPositions);
+    this._restoreFocus(activeSelector);
+
     this.afterRender();
   }
 
+  /**
+   * Save scroll positions of all scrollable containers within shadow DOM
+   * @returns {Map<string, {top: number, left: number}>}
+   */
+  _saveScrollPositions() {
+    const positions = new Map();
+    if (!this._contentWrapper) return positions;
+    const scrollables = this._contentWrapper.querySelectorAll('[id]');
+    scrollables.forEach(el => {
+      if (el.scrollTop !== 0 || el.scrollLeft !== 0) {
+        positions.set(el.id, { top: el.scrollTop, left: el.scrollLeft });
+      }
+    });
+    return positions;
+  }
+
+  /**
+   * Restore previously saved scroll positions
+   * @param {Map<string, {top: number, left: number}>} positions
+   */
+  _restoreScrollPositions(positions) {
+    if (!this._contentWrapper || positions.size === 0) return;
+    positions.forEach((pos, id) => {
+      const el = this._contentWrapper.querySelector(`[id="${CSS.escape(id)}"]`);
+      if (el) {
+        el.scrollTop = pos.top;
+        el.scrollLeft = pos.left;
+      }
+    });
+  }
+
+  /**
+   * Get a CSS selector for the currently focused element within shadow DOM
+   * @returns {string|null}
+   */
+  _getActiveElementSelector() {
+    const active = this.shadowRoot.activeElement;
+    if (!active || active === this._contentWrapper) return null;
+    if (active.id) return `[id="${CSS.escape(active.id)}"]`;
+    // Prefer data attributes over className to avoid invalid selectors
+    if (active.dataset && active.dataset.action) {
+      return `[data-action="${CSS.escape(active.dataset.action)}"]`;
+    }
+    if (active.dataset && active.dataset.view) {
+      return `[data-view="${CSS.escape(active.dataset.view)}"]`;
+    }
+    if (active.tagName) {
+      return active.tagName.toLowerCase();
+    }
+    return null;
+  }
+
+  /**
+   * Restore focus to a previously focused element
+   * @param {string|null} selector
+   */
+  _restoreFocus(selector) {
+    if (!selector || !this._contentWrapper) return;
+    try {
+      const el = this._contentWrapper.querySelector(selector);
+      if (el && typeof el.focus === 'function') {
+        el.focus();
+      }
+    } catch (_) {
+      // Invalid selector, ignore
+    }
+  }
+
   template() {
     // Override in child classes to provide component template
     return '';

package/src/renderers/DayViewRenderer.js

@@ -102,10 +102,10 @@ export class DayViewRenderer extends BaseViewRenderer {
                 <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: var(--fc-text-light); text-transform: uppercase; letter-spacing: 0.1em;">
-                        ${dayName}
+                        ${this.escapeHTML(dayName)}
                     </div>
                     <div style="font-size: 24px; font-weight: 600; margin-top: 4px; ${isToday ? 'color: var(--fc-danger-color);' : 'color: var(--fc-text-color);'}">
-                        ${dayDate.getDate()}
+                        ${this.escapeHTML(String(dayDate.getDate()))}
                     </div>
                 </div>
             </div>

package/src/renderers/MonthViewRenderer.js

@@ -37,7 +37,7 @@ export class MonthViewRenderer extends BaseViewRenderer {
     let html = `
             <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);">
-                    ${dayNames.map(d => `<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;">${d}</div>`).join('')}
+                    ${dayNames.map(d => `<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;">${this.escapeHTML(d)}</div>`).join('')}
                 </div>
                 <div class="fc-month-body" style="display: flex; flex-direction: column; flex: 1;">
         `;
@@ -87,10 +87,10 @@ export class MonthViewRenderer extends BaseViewRenderer {
     const moreCount = events.length - this.maxEventsToShow;
 
     return `
-            <div class="fc-month-day" data-date="${day.date}"
+            <div class="fc-month-day" data-date="${this.escapeHTML(day.date)}"
                  style="background: ${dayBg}; 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: ${dayNumColor}; padding: 2px 4px; margin-bottom: 4px; ${todayStyle}">
-                    ${day.dayOfMonth}
+                    ${this.escapeHTML(String(day.dayOfMonth))}
                 </div>
                 <div class="fc-day-events" style="display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden;">
                     ${visibleEvents.map(evt => this._renderEvent(evt)).join('')}

package/src/renderers/WeekViewRenderer.js

@@ -72,10 +72,10 @@ export class WeekViewRenderer extends BaseViewRenderer {
                     day => `
                     <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;">
-                            ${day.dayName}
+                            ${this.escapeHTML(day.dayName)}
                         </div>
                         <div style="font-size: 16px; font-weight: 500; margin-top: 4px; ${day.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);'}">
-                            ${day.dayOfMonth}
+                            ${this.escapeHTML(String(day.dayOfMonth))}
                         </div>
                     </div>
                 `