@forcecalendar/interface 1.0.5 → 1.0.7

package/package.json

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

package/src/components/ForceCalendar.js

@@ -430,10 +430,22 @@ export class ForceCalendar extends BaseComponent {
     }
 
     afterRender() {
-        // Set up view component
+        // Set up view component using global registry for Locker Service compatibility
         const viewElement = this.$('#calendar-view');
+        console.log('[ForceCalendar] afterRender - viewElement:', viewElement);
+        console.log('[ForceCalendar] afterRender - stateManager:', !!this.stateManager);
+
         if (viewElement && this.stateManager) {
-            viewElement.stateManager = this.stateManager;
+            // Store stateManager in global registry (bypasses Locker Service proxy issues)
+            const registryId = this._registryId || (this._registryId = 'fc-' + Math.random().toString(36).substr(2, 9));
+            window.__forceCalendarRegistry = window.__forceCalendarRegistry || {};
+            window.__forceCalendarRegistry[registryId] = this.stateManager;
+
+            // Pass registry ID via attribute (attributes work through Locker Service)
+            viewElement.setAttribute('data-state-registry', registryId);
+            console.log('[ForceCalendar] Set registry ID:', registryId);
+        } else {
+            console.log('[ForceCalendar] Could not set stateManager - viewElement:', !!viewElement, 'stateManager:', !!this.stateManager);
         }
 
         // Add event listeners for buttons using tracked addListener

package/src/components/views/DayView.js

@@ -10,6 +10,10 @@ import { StyleUtils } from '../../utils/StyleUtils.js';
 import { DOMUtils } from '../../utils/DOMUtils.js';
 
 export class DayView extends BaseComponent {
+    static get observedAttributes() {
+        return ['data-state-registry'];
+    }
+
     constructor() {
         super();
         this._stateManager = null;
@@ -17,7 +21,30 @@ export class DayView extends BaseComponent {
         this.hours = Array.from({ length: 24 }, (_, i) => i);
     }
 
+    connectedCallback() {
+        super.connectedCallback();
+        this._checkRegistry();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'data-state-registry' && newValue) {
+            this._checkRegistry();
+        }
+    }
+
+    _checkRegistry() {
+        const registryId = this.getAttribute('data-state-registry');
+        if (registryId && window.__forceCalendarRegistry && window.__forceCalendarRegistry[registryId]) {
+            this.setStateManager(window.__forceCalendarRegistry[registryId]);
+        }
+    }
+
     set stateManager(manager) {
+        this.setStateManager(manager);
+    }
+
+    setStateManager(manager) {
+        if (this._stateManager === manager) return;
         this._stateManager = manager;
         if (manager) {
             this.unsubscribe = manager.subscribe(this.handleStateUpdate.bind(this));

package/src/components/views/MonthView.js

@@ -10,6 +10,11 @@ import { DateUtils } from '../../utils/DateUtils.js';
 import { StyleUtils } from '../../utils/StyleUtils.js';
 
 export class MonthView extends BaseComponent {
+    // Observe data-state-registry attribute for Locker Service compatibility
+    static get observedAttributes() {
+        return ['data-state-registry'];
+    }
+
     constructor() {
         super();
         this._stateManager = null;
@@ -19,9 +24,45 @@ export class MonthView extends BaseComponent {
         };
     }
 
+    connectedCallback() {
+        super.connectedCallback();
+        // Check for registry ID on connect (may already be set)
+        this._checkRegistry();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        console.log('[MonthView] attributeChangedCallback:', name, oldValue, '->', newValue);
+        if (name === 'data-state-registry' && newValue) {
+            this._checkRegistry();
+        }
+    }
+
+    _checkRegistry() {
+        const registryId = this.getAttribute('data-state-registry');
+        console.log('[MonthView] Checking registry for ID:', registryId);
+        if (registryId && window.__forceCalendarRegistry && window.__forceCalendarRegistry[registryId]) {
+            const manager = window.__forceCalendarRegistry[registryId];
+            console.log('[MonthView] Found stateManager in registry');
+            this.setStateManager(manager);
+        }
+    }
+
     set stateManager(manager) {
+        console.log('[MonthView] stateManager setter called with:', !!manager);
+        this.setStateManager(manager);
+    }
+
+    // Method alternative for Salesforce Locker Service compatibility
+    setStateManager(manager) {
+        console.log('[MonthView] setStateManager method called with:', !!manager);
+        // Prevent re-initialization if same manager
+        if (this._stateManager === manager) {
+            console.log('[MonthView] stateManager already set, skipping');
+            return;
+        }
         this._stateManager = manager;
         if (manager) {
+            console.log('[MonthView] Subscribing to state changes and loading view data');
             // Subscribe to state changes
             this.unsubscribe = manager.subscribe(this.handleStateUpdate.bind(this));
             this.loadViewData();
@@ -67,11 +108,15 @@ export class MonthView extends BaseComponent {
     }
 
     loadViewData() {
+        console.log('[MonthView] loadViewData called, stateManager:', !!this.stateManager);
         if (!this.stateManager) return;
 
         const viewData = this.stateManager.getViewData();
+        console.log('[MonthView] viewData from stateManager:', viewData);
         this.viewData = this.processViewData(viewData);
+        console.log('[MonthView] processed viewData:', this.viewData);
         this.render();
+        console.log('[MonthView] render completed');
     }
 
     processViewData(viewData) {

package/src/components/views/WeekView.js

@@ -10,6 +10,10 @@ import { StyleUtils } from '../../utils/StyleUtils.js';
 import { DOMUtils } from '../../utils/DOMUtils.js';
 
 export class WeekView extends BaseComponent {
+    static get observedAttributes() {
+        return ['data-state-registry'];
+    }
+
     constructor() {
         super();
         this._stateManager = null;
@@ -17,7 +21,30 @@ export class WeekView extends BaseComponent {
         this.hours = Array.from({ length: 24 }, (_, i) => i); // 0-23
     }
 
+    connectedCallback() {
+        super.connectedCallback();
+        this._checkRegistry();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'data-state-registry' && newValue) {
+            this._checkRegistry();
+        }
+    }
+
+    _checkRegistry() {
+        const registryId = this.getAttribute('data-state-registry');
+        if (registryId && window.__forceCalendarRegistry && window.__forceCalendarRegistry[registryId]) {
+            this.setStateManager(window.__forceCalendarRegistry[registryId]);
+        }
+    }
+
     set stateManager(manager) {
+        this.setStateManager(manager);
+    }
+
+    setStateManager(manager) {
+        if (this._stateManager === manager) return;
         this._stateManager = manager;
         if (manager) {
             this.unsubscribe = manager.subscribe(this.handleStateUpdate.bind(this));