@saasquatch/squatch-js 2.8.2-33 → 2.8.2-35

package/dist/squatch.js

@@ -1168,6 +1168,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(
         (_g = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _g.brandFont
       )}" as="style">` : ""}
+      <link rel="dns-prefetch" href="https://res.cloudinary.com">
+      <link rel="preconnect" href="https://res.cloudinary.com" crossorigin>
       <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
       <style data-styles>
         html { visibility:hidden;}
@@ -1275,11 +1277,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         };
       }
     }
-    _createPopupDialog() {
-      var _a2, _b, _c;
+    _createPopupDialog(brandingConfig) {
+      var _a2;
       const dialog = document.createElement("dialog");
-      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.popupWidgets;
+      const sizes = (_a2 = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _a2.popupWidgets;
       const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "auto";
       const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "500px";
       dialog.id = this.id;
@@ -1295,14 +1296,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return dialog;
     }
     async load() {
-      var _a2;
-      const frame = this._createFrame();
+      var _a2, _b, _c, _d, _e;
+      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;
+      const frame = this._createFrame({ initialHeight });
       this._initialiseCTA();
       const element = this.container ? this._findElement() : document.body;
       const dialogParent = element.shadowRoot || element;
-      const dialog = this._createPopupDialog();
+      const dialog = this._createPopupDialog(brandingConfig);
       dialog.appendChild(frame);
-      if (((_a2 = dialogParent.lastChild) == null ? void 0 : _a2.nodeName) === "DIALOG") {
+      if (((_c = dialogParent.lastChild) == null ? void 0 : _c.nodeName) === "DIALOG") {
         dialogParent.replaceChild(dialog, dialogParent.lastChild);
       } else {
         dialogParent.appendChild(dialog);
@@ -1313,27 +1316,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       const frameDoc = contentWindow.document;
       frameDoc.open();
-      frameDoc.write(this.content);
-      frameDoc.write(
-        `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
-      );
+      const domain = this.widgetApi.domain;
       frameDoc.write(`
-    <style>
-      body {
-        height: 600px; 
-        border: 2px solid #ccc;
-        background-color: #f9f9f9;
-        margin: 0; 
-        padding: 0; 
-        box-sizing: border-box; 
-      }
-    </style>
-  `);
+      ${((_d = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _d.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(
+        (_e = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _e.brandFont
+      )}" as="style">` : ""}
+      <link rel="dns-prefetch" href="https://res.cloudinary.com">
+      <link rel="preconnect" href="https://res.cloudinary.com" crossorigin>
+      <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
+      <style data-styles>
+        html { visibility:hidden;}
+      </style>
+      ${this.content}
+
+      `);
       frameDoc.close();
       _log$6("Popup template loaded into iframe");
-      await this._setupResizeHandler(frame);
+      await this._setupResizeHandler(frame, initialHeight);
     }
-    async _setupResizeHandler(frame) {
+    async _setupResizeHandler(frame, initialHeight) {
       const { contentWindow } = frame;
       if (!contentWindow) {
         throw new Error("Frame needs a content window");
@@ -1341,7 +1346,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const frameDoc = contentWindow.document;
       domready(frameDoc, async () => {
         frameDoc.body.style.overflowY = "hidden";
-        frame.height = `${frameDoc.body.offsetHeight}px`;
+        frame.height = initialHeight || frameDoc.body.offsetHeight;
         const ro = new contentWindow["ResizeObserver"]((entries) => {
           for (const entry of entries) {
             const { top, bottom } = entry.contentRect;