@saasquatch/squatch-js 2.8.0 → 2.8.2-1

package/dist/squatch.esm.js

@@ -888,6 +888,9 @@ class Widget {
     if ((options == null ? void 0 : options.maxWidth) || (options == null ? void 0 : options.minWidth)) {
       frame.style.width = "100%";
     }
+    if (options == null ? void 0 : options.initialHeight) {
+      frame.height = options.initialHeight;
+    }
     return frame;
   }
   _findFrame() {
@@ -1111,21 +1114,31 @@ class EmbedWidget extends Widget {
     if (container) this.container = container;
   }
   async load() {
-    var _a2, _b, _c, _d, _e;
+    var _a2, _b, _c, _d, _e, _f, _g, _h;
     const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
-    const sizes = (_c = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _c.embeddedWidgets;
+    const initialHeight = (_e = (_d = (_c = this.context.widgetConfig) == null ? void 0 : _c.values) == null ? void 0 : _d.brandingConfig) == null ? void 0 : _e.loadingHeight;
+    const sizes = (_f = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _f.embeddedWidgets;
     const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "";
     const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "";
-    const frame = this._createFrame({ minWidth, maxWidth });
+    console.log({
+      brandingConfig,
+      initialHeight,
+      widgetConfig: this.context.widgetConfig
+    });
+    const frame = this._createFrame({
+      minWidth,
+      maxWidth,
+      initialHeight
+    });
     const element = this._findElement();
-    if ((_d = this.context) == null ? void 0 : _d.container) {
+    if ((_g = this.context) == null ? void 0 : _g.container) {
       element.style.visibility = "hidden";
       element.style.height = "0";
       element.style["overflow-y"] = "hidden";
     }
     if (this.container) {
       if (element.shadowRoot) {
-        if (((_e = element.shadowRoot.lastChild) == null ? void 0 : _e.nodeName) === "IFRAME") {
+        if (((_h = element.shadowRoot.lastChild) == null ? void 0 : _h.nodeName) === "IFRAME") {
           element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
         } else {
           element.shadowRoot.appendChild(frame);
@@ -1144,14 +1157,19 @@ class EmbedWidget extends Widget {
     }
     const frameDoc = contentWindow.document;
     frameDoc.open();
-    frameDoc.write(this.content);
-    frameDoc.write(
-      `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
-    );
+    console.log({ content: this.content });
+    frameDoc.write(`
+      <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
+      ${this.content}
+            <style data-styles>
+      html:not(.hydrated) { visibility:hidden; }
+      </style>
+      `);
     frameDoc.close();
     domready(frameDoc, async () => {
       const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
-      frame.height = frameDoc.body.scrollHeight;
+      frame.height = initialHeight || frameDoc.body.scrollHeight;
+      console.log({ height: frameDoc.body.scrollHeight });
       const ro = new contentWindow["ResizeObserver"]((entries) => {
         for (const entry of entries) {
           const { height } = entry.contentRect;