@myop/sdk 0.3.15 → 0.3.17

package/dist/cjs/{_hostSDK.0fb0e40a.js → _hostSDK.8915b7f2.js}

@@ -1013,6 +1013,114 @@ var MyopRefComponent = class extends BaseMyopComponent {
   }
 };
 
+// src/host/components/myopExtractedWebComponent.ts
+var MyopExtractedWebComponent = class extends BaseMyopComponent {
+  constructor(componentDefinition, skin, container, customElement, tagName, options) {
+    super(componentDefinition, container, options);
+    this.container = container;
+    this.customElement = customElement;
+    this.tagName = tagName;
+    __publicField(this, "ctaCleanup");
+    __publicField(this, "_ctaHandler");
+    __publicField(this, "_ctaQueue", []);
+    __publicField(this, "cleanupInspect", () => {
+    });
+    /**
+     * For compatibility with message-based components.
+     * Web components don't use postMessage, so this is a no-op for most messages.
+     */
+    __publicField(this, "send", (message) => {
+      const cleanupHandler = super.send(message);
+      console.debug("[MyopExtractedWebComponent] send() called - web components use direct API instead", message);
+      return cleanupHandler;
+    });
+    __publicField(this, "dispose", () => {
+      var _a;
+      if (this.ctaCleanup) {
+        this.ctaCleanup();
+      }
+      super.dispose();
+      (_a = this.customElement.parentNode) == null ? void 0 : _a.removeChild(this.customElement);
+    });
+    this.element = customElement;
+    this.setInitiated();
+  }
+  inspect() {
+    this.cleanupInspect = setDebugStyle(this.id, "MyopExtractedWebComponent", 0, this.container, this.customElement, this.componentDefinition);
+    return this.cleanupInspect;
+  }
+  hide() {
+    this.customElement.style.opacity = "0";
+    this.customElement.style.position = "absolute";
+    this.customElement.style.pointerEvents = "none";
+    this.customElement.style.visibility = "hidden";
+    this.customElement.style.height = "0";
+    this.customElement.style.width = "0";
+  }
+  show() {
+    this.customElement.style.opacity = "1";
+    this.customElement.style.position = "unset";
+    this.customElement.style.pointerEvents = "all";
+    this.customElement.style.visibility = "visible";
+    this.customElement.style.height = "";
+    this.customElement.style.width = "";
+  }
+  /**
+   * Initialize the component with data by calling myop_init_interface directly
+   */
+  initWithData(data) {
+    if (typeof this.customElement.myop_init_interface === "function") {
+      this.customElement.myop_init_interface(data);
+    }
+  }
+  /**
+   * Get current data from the component
+   */
+  getData() {
+    if (typeof this.customElement.myop_init_interface === "function") {
+      return this.customElement.myop_init_interface();
+    }
+    return void 0;
+  }
+  /**
+   * Set CTA handler - unified API with iframe components.
+   * Called via props.myop_cta_handler = handler
+   */
+  setCtaHandler(handler) {
+    if (this.ctaCleanup) {
+      this.ctaCleanup();
+    }
+    this._ctaHandler = handler;
+    if (this._ctaQueue.length > 0) {
+      const queue = [...this._ctaQueue];
+      this._ctaQueue = [];
+      queue.forEach((item) => {
+        if (!this.markedForDisposed) {
+          handler(item.action, item.payload);
+        }
+      });
+    }
+    const listener = (e) => {
+      var _a;
+      const customEvent = e;
+      if ((_a = customEvent.detail) == null ? void 0 : _a.action) {
+        if (this._ctaHandler && !this.markedForDisposed) {
+          this._ctaHandler(customEvent.detail.action, customEvent.detail.payload);
+        } else if (!this._ctaHandler) {
+          this._ctaQueue.push({
+            action: customEvent.detail.action,
+            payload: customEvent.detail.payload
+          });
+        }
+      }
+    };
+    this.customElement.addEventListener("myop-cta", listener);
+    this.ctaCleanup = () => {
+      this.customElement.removeEventListener("myop-cta", listener);
+    };
+  }
+};
+
 // src/host/componentCore.ts
 var createDebugTitle = (text, top, componentDefinitionConfig) => {
   const titleEl = document.createElement("a");
@@ -1065,6 +1173,19 @@ var connectProps = (component, propsConfig, selectedSkin) => {
         return false;
       }
       if (propConfig.behavior.type === PropConfigBehaviorTypes.code) {
+        if (component instanceof MyopExtractedWebComponent) {
+          const typedPropBehavior = propConfig.behavior;
+          const propName = typedPropBehavior.remap || prop;
+          if (propName === "myop_init_interface") {
+            return (data) => {
+              if (data === void 0) {
+                return component.getData();
+              }
+              component.initWithData(data);
+            };
+          }
+          return void 0;
+        }
         if (selectedSkin.loader.type === SkinLoaders.HTMLLoader) {
           const typedLoader = selectedSkin.loader;
           if (typedLoader.shadowRootMode === ShadowRootModeType.localFrame) {
@@ -1099,6 +1220,18 @@ var connectProps = (component, propsConfig, selectedSkin) => {
         return false;
       }
       if (propConfig.behavior.type === PropConfigBehaviorTypes.code) {
+        if (component instanceof MyopExtractedWebComponent) {
+          const typedPropBehavior = propConfig.behavior;
+          const propName = typedPropBehavior.remap || prop;
+          if (propName === "myop_cta_handler") {
+            component.setCtaHandler(value);
+            return true;
+          }
+          if (propName === "myop_init_interface") {
+            component.initWithData(value);
+            return true;
+          }
+        }
         if (selectedSkin.loader.type === SkinLoaders.HTMLLoader) {
           const typedLoader = selectedSkin.loader;
           if (typedLoader.shadowRootMode === ShadowRootModeType.localFrame) {
@@ -1675,93 +1808,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.3.15";
-
-// src/host/components/myopExtractedWebComponent.ts
-var MyopExtractedWebComponent = class extends BaseMyopComponent {
-  constructor(componentDefinition, skin, container, customElement, tagName, options) {
-    super(componentDefinition, container, options);
-    this.container = container;
-    this.customElement = customElement;
-    this.tagName = tagName;
-    __publicField(this, "ctaCleanup");
-    __publicField(this, "cleanupInspect", () => {
-    });
-    /**
-     * For compatibility with message-based components.
-     * Web components don't use postMessage, so this is a no-op for most messages.
-     */
-    __publicField(this, "send", (message) => {
-      const cleanupHandler = super.send(message);
-      console.debug("[MyopExtractedWebComponent] send() called - web components use direct API instead", message);
-      return cleanupHandler;
-    });
-    __publicField(this, "dispose", () => {
-      var _a;
-      if (this.ctaCleanup) {
-        this.ctaCleanup();
-      }
-      super.dispose();
-      (_a = this.customElement.parentNode) == null ? void 0 : _a.removeChild(this.customElement);
-    });
-    this.element = customElement;
-    this.setInitiated();
-  }
-  inspect() {
-    this.cleanupInspect = setDebugStyle(this.id, "MyopExtractedWebComponent", 0, this.container, this.customElement, this.componentDefinition);
-    return this.cleanupInspect;
-  }
-  hide() {
-    this.customElement.style.opacity = "0";
-    this.customElement.style.position = "absolute";
-    this.customElement.style.pointerEvents = "none";
-    this.customElement.style.visibility = "hidden";
-    this.customElement.style.height = "0";
-    this.customElement.style.width = "0";
-  }
-  show() {
-    this.customElement.style.opacity = "1";
-    this.customElement.style.position = "unset";
-    this.customElement.style.pointerEvents = "all";
-    this.customElement.style.visibility = "visible";
-    this.customElement.style.height = "";
-    this.customElement.style.width = "";
-  }
-  /**
-   * Initialize the component with data by calling myop_init_interface directly
-   */
-  initWithData(data) {
-    if (typeof this.customElement.myop_init_interface === "function") {
-      this.customElement.myop_init_interface(data);
-    }
-  }
-  /**
-   * Get current data from the component
-   */
-  getData() {
-    if (typeof this.customElement.myop_init_interface === "function") {
-      return this.customElement.myop_init_interface();
-    }
-    return void 0;
-  }
-  /**
-   * Set up CTA handler to listen for myop-cta events
-   */
-  onCta(handler) {
-    const listener = (e) => {
-      const customEvent = e;
-      if (customEvent.detail && customEvent.detail.action) {
-        handler(customEvent.detail.action, customEvent.detail.payload);
-      }
-    };
-    this.customElement.addEventListener("myop-cta", listener);
-    const cleanup = () => {
-      this.customElement.removeEventListener("myop-cta", listener);
-    };
-    this.ctaCleanup = cleanup;
-    return cleanup;
-  }
-};
+var myop_sdk_version_default = "0.3.17";
 
 // src/webcomponent/messageHandlers/BaseWebComponentMessageHandler.ts
 var BaseWebComponentMessageHandler = class extends BaseContextMessageHandler {
@@ -2183,7 +2230,7 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
             _doc.head.insertBefore(_doc.importNode(node, true), _doc.head.firstChild);
           }
           HTML2Render = _doc.documentElement.outerHTML;
-        } else {
+        } else if ((options == null ? void 0 : options.data) !== void 0) {
           const parser = new DOMParser();
           const _doc = parser.parseFromString(loaderConfig.HTML, "text/html");
           const myop_preview_script = _doc.getElementById("myop_preview");