@saasquatch/squatch-js 2.8.2-16 → 2.8.2-18

package/dist/squatch.js

@@ -1121,104 +1121,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
     //Old code for testing
-    async load() {
-      var _a2, _b, _c, _d, _e;
-      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 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 });
-      const element = this._findElement();
-      if ((_d = this.context) == null ? void 0 : _d.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") {
-            element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
-          } else {
-            element.shadowRoot.appendChild(frame);
-          }
-        } else if (element.firstChild) {
-          element.replaceChild(frame, element.firstChild);
-        } else {
-          element.appendChild(frame);
-        }
-      } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
-        element.appendChild(frame);
-      }
-      const { contentWindow } = frame;
-      if (!contentWindow) {
-        throw new Error("Frame needs a content window");
-      }
-      const frameDoc = contentWindow.document;
-      frameDoc.open();
-      frameDoc.write(this.content);
-      frameDoc.write(
-        `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
-      );
-      frameDoc.close();
-      domready(frameDoc, async () => {
-        const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
-        frame.height = frameDoc.body.scrollHeight;
-        const ro = new contentWindow["ResizeObserver"]((entries) => {
-          for (const entry of entries) {
-            const { height } = entry.contentRect;
-            frame.height = height;
-          }
-        });
-        const container = await this._findInnerContainer(frame);
-        ro.observe(container);
-        if (this._shouldFireLoadEvent()) {
-          this._loadEvent(_sqh);
-          _log$7("loaded");
-        } else if (frameDoc) {
-          this._attachLoadEventListener(frameDoc, _sqh);
-        }
-      });
-    }
     // async load() {
     //   const brandingConfig = this.context.widgetConfig?.values?.brandingConfig;
-    //   // @ts-ignore
-    //   const initialHeight = brandingConfig?.loadingHeight;
-    //   const skeletonBackgroundColor =
-    //     brandingConfig?.color?.loadingSkeleton?.background;
-    //   const skeletonShimmerColor =
-    //     brandingConfig?.color?.loadingSkeleton?.animationBackground;
-    //   const borderColor = brandingConfig?.border?.borderColor;
     //   const sizes = brandingConfig?.widgetSize?.embeddedWidgets;
     //   const maxWidth = sizes?.maxWidth ? formatWidth(sizes.maxWidth) : "";
     //   const minWidth = sizes?.minWidth ? formatWidth(sizes.minWidth) : "";
-    //   console.log({
-    //     brandingConfig,
-    //     initialHeight,
-    //     widgetConfig: this.context.widgetConfig,
-    //   });
-    //   // const skeletonHTML = getSkeleton({
-    //   //   height: initialHeight,
-    //   //   skeletonBackgroundColor,
-    //   //   skeletonShimmerColor,
-    //   //   borderColor,
-    //   // });
-    //   // const skeletonContainer = document.createElement("div");
-    //   // skeletonContainer.innerHTML = skeletonHTML;
-    //   const frame = this._createFrame({
-    //     minWidth,
-    //     maxWidth,
-    //     initialHeight,
-    //   });
+    //   const frame = this._createFrame({ minWidth, maxWidth });
     //   const element = this._findElement();
-    //   // element.innerHTML = skeletonHTML;
-    //   // Hide frame initially
-    //   frame.style.display = "none";
-    //   const injectContents = (target: HTMLElement | ShadowRoot) => {
-    //     // Optional: Clear target to prevent duplicates if load() is called twice
-    //     // target.innerHTML = "";
-    //     // target.appendChild(skeletonContainer);
-    //     target.appendChild(frame);
-    //   };
     //   if (this.context?.container) {
     //     // Custom container is used
     //     element.style.visibility = "hidden";
@@ -1230,56 +1139,34 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     //       if (element.shadowRoot.lastChild?.nodeName === "IFRAME") {
     //         element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
     //       } else {
-    //         injectContents(element.shadowRoot);
+    //         element.shadowRoot.appendChild(frame);
     //       }
-    //     } else if (element.firstChild) {
-    //       // If replacing, wipe and reload
-    //       element.innerHTML = "";
-    //       injectContents(element);
+    //     }
+    //     // Widget reloaded - replace existing element
+    //     else if (element.firstChild) {
+    //       element.replaceChild(frame, element.firstChild);
+    //       // Add iframe for the first time
     //     } else {
-    //       injectContents(element);
+    //       element.appendChild(frame);
     //     }
+    //   } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
+    //     element.appendChild(frame);
     //   }
-    //   // else if (!element.firstChild || element.firstChild.nodeName === "#text") {
-    //   //   injectContents(element);
-    //   // }
     //   const { contentWindow } = frame;
     //   if (!contentWindow) {
     //     throw new Error("Frame needs a content window");
     //   }
     //   const frameDoc = contentWindow.document;
     //   frameDoc.open();
-    //   console.log({ content: this.content, context: this.context, this: this });
-    //   const domain = this.widgetApi.domain;
-    //   frameDoc.write(`
-    //     ${
-    //       brandingConfig?.main?.brandFont &&
-    //       `
-    //       <link rel="preconnect" href="https://fast${
-    //         domain === "https://staging.referralsaasquatch.com" && "-staging"
-    //       }.ssqt.io">
-    //       <link rel="preconnect" href="https://fonts.gstatic.com">
-    //       <link rel="preconnect" href="https://fonts.googleapis.com">
-    //       <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(
-    //         brandingConfig?.main?.brandFont
-    //       )}" as="style">`
-    //     }
-    //     <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
-    //     <style data-styles>
-    //       html { visibility:hidden;}
-    //     </style>
-    //     ${this.content}
-    //     `);
+    //   frameDoc.write(this.content);
+    //   frameDoc.write(
+    //     `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
+    //   );
     //   frameDoc.close();
     //   domready(frameDoc, async () => {
-    //     // if (skeletonContainer && skeletonContainer.parentNode) {
-    //     //   skeletonContainer.parentNode.removeChild(skeletonContainer);
-    //     // }
-    //     frame.style.display = "block";
     //     const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
     //     // @ts-ignore -- number will be cast to string by browsers
-    //     frame.height = initialHeight || frameDoc.body.scrollHeight;
-    //     console.log({ height: frameDoc.body.scrollHeight });
+    //     frame.height = frameDoc.body.scrollHeight;
     //     // Adjust frame height when size of body changes
     //     /* istanbul ignore next: hard to test */
     //     const ro = new contentWindow["ResizeObserver"]((entries) => {
@@ -1299,6 +1186,93 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     //     }
     //   });
     // }
+    async load() {
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+      const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
+      const initialHeight = brandingConfig == null ? void 0 : brandingConfig.loadingHeight;
+      (_d = (_c = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _c.loadingSkeleton) == null ? void 0 : _d.background;
+      (_f = (_e = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _e.loadingSkeleton) == null ? void 0 : _f.animationBackground;
+      (_g = brandingConfig == null ? void 0 : brandingConfig.border) == null ? void 0 : _g.borderColor;
+      const sizes = (_h = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _h.embeddedWidgets;
+      const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "";
+      const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "";
+      console.log({
+        brandingConfig,
+        initialHeight,
+        widgetConfig: this.context.widgetConfig
+      });
+      const frame = this._createFrame({
+        minWidth,
+        maxWidth,
+        initialHeight
+      });
+      const element = this._findElement();
+      const injectContents = (target) => {
+        target.appendChild(frame);
+      };
+      if ((_i = this.context) == null ? void 0 : _i.container) {
+        element.style.visibility = "hidden";
+        element.style.height = "0";
+        element.style["overflow-y"] = "hidden";
+      }
+      if (this.container) {
+        if (element.shadowRoot) {
+          if (((_j = element.shadowRoot.lastChild) == null ? void 0 : _j.nodeName) === "IFRAME") {
+            element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
+          } else {
+            injectContents(element.shadowRoot);
+          }
+        } else if (element.firstChild) {
+          element.replaceChild(frame, element.firstChild);
+        } else {
+          injectContents(element);
+        }
+      } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
+        injectContents(element);
+      }
+      const { contentWindow } = frame;
+      if (!contentWindow) {
+        throw new Error("Frame needs a content window");
+      }
+      const frameDoc = contentWindow.document;
+      frameDoc.open();
+      const domain = this.widgetApi.domain;
+      frameDoc.write(`
+      ${((_k = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _k.brandFont) && `
+        <link rel="preconnect" href="https://fast${domain === "https://staging.referralsaasquatch.com" && "-staging"}.ssqt.io">
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(
+        (_l = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _l.brandFont
+      )}" as="style">`}
+      <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
+      <style data-styles>
+        html { visibility:hidden;}
+      </style>
+      ${this.content}
+
+      `);
+      frameDoc.close();
+      domready(frameDoc, async () => {
+        const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
+        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;
+            frame.height = height;
+          }
+        });
+        const container = await this._findInnerContainer(frame);
+        ro.observe(container);
+        if (this._shouldFireLoadEvent()) {
+          this._loadEvent(_sqh);
+          _log$7("loaded");
+        } else if (frameDoc) {
+          this._attachLoadEventListener(frameDoc, _sqh);
+        }
+      });
+    }
     /**
      * Un-hide if element is available and refresh data
      */