@myop/sdk 0.3.16 → 0.3.18

package/dist/cjs/{_WebComponentSDK.6f1a3255.js → _WebComponentSDK.26dff6f5.js}

@@ -1587,6 +1587,7 @@ var MyopIframeComponent = class extends BaseMyopComponent {
     this.componentConfig = componentConfig;
     this.container = container;
     this.IframeElement = IframeElement;
+    __publicField(this, "sizeMeta");
     __publicField(this, "cleanupInspect");
     __publicField(this, "setHeightBasedOnDocumentElement", () => {
       const cleanupHandler = this.send(new ExecuteScriptMessage(() => {
@@ -1619,7 +1620,7 @@ var MyopIframeComponent = class extends BaseMyopComponent {
      * @returns Cleanup function to stop observing
      */
     __publicField(this, "observeAutoSize", (options) => {
-      var _a;
+      var _a, _b, _c, _d, _e, _f, _g;
       const iframe = this.IframeElement;
       const doc = iframe.contentDocument;
       if (!doc) {
@@ -1643,14 +1644,28 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       const minHeight = parseSize(options == null ? void 0 : options.minHeight);
       const maxHeight = parseSize(options == null ? void 0 : options.maxHeight);
       const loaderMinHeight = (_a = options == null ? void 0 : options.loaderMinHeight) != null ? _a : 50;
-      const hasExplicitWidth = (options == null ? void 0 : options.explicitWidth) !== void 0;
-      const hasExplicitHeight = (options == null ? void 0 : options.explicitHeight) !== void 0;
+      const sizeMetaFillWidth = ((_b = this.sizeMeta) == null ? void 0 : _b.width) === "100%" ? "100%" : void 0;
+      const sizeMetaFillHeight = ((_c = this.sizeMeta) == null ? void 0 : _c.height) === "100%" ? "100%" : void 0;
+      const resolvedExplicitWidth = (_e = (_d = options == null ? void 0 : options.explicitWidth) != null ? _d : sizeMetaFillWidth) != null ? _e : "100%";
+      const resolvedExplicitHeight = (_f = options == null ? void 0 : options.explicitHeight) != null ? _f : sizeMetaFillHeight;
+      const hasExplicitWidth = resolvedExplicitWidth !== void 0;
+      const hasExplicitHeight = resolvedExplicitHeight !== void 0;
       const containerRect = this.container.getBoundingClientRect();
       const collapsedWidth = containerRect.width === 0;
       const collapsedHeight = containerRect.height === 0 || containerRect.height === loaderMinHeight;
       const shouldAutoWidth = (options == null ? void 0 : options.forceAutoSize) ? !hasExplicitWidth : collapsedWidth && !hasExplicitWidth;
       const shouldAutoHeight = (options == null ? void 0 : options.forceAutoSize) ? !hasExplicitHeight : collapsedHeight && !hasExplicitHeight;
       if (!shouldAutoWidth && !shouldAutoHeight) {
+        const explicitWidthPx = typeof resolvedExplicitWidth === "number" ? resolvedExplicitWidth : void 0;
+        const explicitHeightPx = typeof resolvedExplicitHeight === "number" ? resolvedExplicitHeight : void 0;
+        if (explicitWidthPx !== void 0 || explicitHeightPx !== void 0) {
+          (_g = options == null ? void 0 : options.onSizeChange) == null ? void 0 : _g.call(options, {
+            width: explicitWidthPx,
+            height: explicitHeightPx,
+            autoSizingWidth: false,
+            autoSizingHeight: false
+          });
+        }
         return () => {
         };
       }
@@ -1658,9 +1673,14 @@ var MyopIframeComponent = class extends BaseMyopComponent {
         var _a2;
         const contentDoc = iframe.contentDocument;
         if (contentDoc) {
-          const rect = contentDoc.documentElement.getBoundingClientRect();
-          const contentWidth = Math.ceil(rect.width);
-          const contentHeight = Math.ceil(rect.height);
+          if (shouldAutoHeight) {
+            iframe.style.height = "0px";
+          }
+          if (shouldAutoWidth) {
+            iframe.style.width = "0px";
+          }
+          const contentWidth = Math.ceil(contentDoc.documentElement.scrollWidth);
+          const contentHeight = Math.ceil(contentDoc.documentElement.scrollHeight);
           const width = clamp(contentWidth, minWidth, maxWidth);
           const height = clamp(contentHeight, minHeight, maxHeight);
           if (shouldAutoWidth) {
@@ -1671,8 +1691,8 @@ var MyopIframeComponent = class extends BaseMyopComponent {
           }
           const isWidthConstrained = shouldAutoWidth && maxWidth !== void 0 && contentWidth > maxWidth;
           const isHeightConstrained = shouldAutoHeight && maxHeight !== void 0 && contentHeight > maxHeight;
-          contentDoc.documentElement.style.overflowX = isWidthConstrained ? "auto" : "hidden";
-          contentDoc.documentElement.style.overflowY = isHeightConstrained ? "auto" : "hidden";
+          contentDoc.documentElement.style.overflowX = isWidthConstrained ? "auto" : "";
+          contentDoc.documentElement.style.overflowY = isHeightConstrained ? "auto" : "";
           (_a2 = options == null ? void 0 : options.onSizeChange) == null ? void 0 : _a2.call(options, {
             width,
             height,
@@ -1685,8 +1705,11 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       const resizeObserver = new ResizeObserver(updateSize);
       resizeObserver.observe(doc.body);
       resizeObserver.observe(doc.documentElement);
+      const mutationObserver = new MutationObserver(updateSize);
+      mutationObserver.observe(doc.body, { childList: true, subtree: true, characterData: true, attributes: true });
       return () => {
         resizeObserver.disconnect();
+        mutationObserver.disconnect();
       };
     });
     __publicField(this, "setSizeBasedOnDocumentElement", () => {
@@ -1948,7 +1971,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.3.16";
+var myop_sdk_version_default = "0.3.18";
 
 // src/host/embeddedSDK.ts
 var EMBEDDED_SDK_CONTENT = "";
@@ -2012,6 +2035,18 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
         IframeElement = this.appendChild(container, IframeElement, options);
         const doc = IframeElement.contentDocument || IframeElement.contentWindow.document;
         doc.open();
+        let parsedSizeMeta = null;
+        {
+          const _preParser = new DOMParser();
+          const _preDoc = _preParser.parseFromString(loaderConfig.HTML, "text/html");
+          const sizeMeta = _preDoc.querySelector('meta[name="myop:size"]');
+          if (sizeMeta) {
+            try {
+              parsedSizeMeta = JSON.parse(sizeMeta.getAttribute("content") || "{}");
+            } catch (e) {
+            }
+          }
+        }
         let HTML2Render = loaderConfig.HTML;
         if (options == null ? void 0 : options._inspection) {
           const parser = new DOMParser();
@@ -2025,7 +2060,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");
@@ -2046,6 +2081,7 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
         }
         doc.close();
         const comp = new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
+        comp.sizeMeta = parsedSizeMeta;
         if (loaderConfig.autoHeight) {
           IframeElement.onload = () => {
             comp.observeSizeBasedOnDocumentElement();