@myop/sdk 0.3.15 → 0.3.16

package/dist/bundled-declarations.d.ts

@@ -588,6 +588,8 @@ declare module "@myop/sdk/host/components/myopExtractedWebComponent" {
         private customElement;
         private tagName;
         private ctaCleanup?;
+        private _ctaHandler?;
+        private _ctaQueue;
         constructor(componentDefinition: IComponentDefinitionConfig, skin: ISkinConfig, container: HTMLElement, customElement: HTMLElement, tagName: string, options?: loaderOptions);
         cleanupInspect: CleanupHandler;
         inspect(): CleanupHandler;
@@ -602,9 +604,10 @@ declare module "@myop/sdk/host/components/myopExtractedWebComponent" {
          */
         getData(): unknown;
         /**
-         * Set up CTA handler to listen for myop-cta events
+         * Set CTA handler - unified API with iframe components.
+         * Called via props.myop_cta_handler = handler
          */
-        onCta(handler: (action: string, payload: unknown) => void): () => void;
+        setCtaHandler(handler: (action: string, payload: unknown) => void): void;
         /**
          * For compatibility with message-based components.
          * Web components don't use postMessage, so this is a no-op for most messages.

package/dist/cjs/{_IframeSDK.9748f61d.js → _IframeSDK.0e315746.js}

@@ -1156,6 +1156,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");
@@ -1208,6 +1316,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) {
@@ -1242,6 +1363,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) {
@@ -1818,93 +1951,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.16";
 
 // src/webcomponent/messageHandlers/BaseWebComponentMessageHandler.ts
 var BaseWebComponentMessageHandler = class extends BaseContextMessageHandler {