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

package/dist/squatch.js

@@ -1110,351 +1110,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       setTimeout(resolve, duration);
     });
   }
-  const getSkeleton = ({
-    height = "500px",
-    skeletonBackgroundColor = "#e0e0e0",
-    skeletonShimmerColor = "#f5f5f5",
-    borderColor = "#ccc"
-  }) => {
-    return `
-    <style>
-        * {
-          box-sizing: border-box;
-          padding: 0;
-          margin: 0;
-        }
-
-			.widget-container {
-				background: white;
-				width: 100%;
-				max-width: 900px;
-				padding: 40px;
-				border-radius: 12px;
-				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-				box-sizing: border-box;
-			}
-
-			@keyframes shimmer {
-				0% {
-					background-position: -100% 0;
-				}
-				100% {
-					background-position: 100% 0;
-				}
-			}
-
-			.skeleton {
-				background: ${skeletonBackgroundColor};
-				background: linear-gradient(
-					90deg,
-					${skeletonBackgroundColor} 25%,
-					${skeletonShimmerColor} 50%,
-					${skeletonBackgroundColor} 75%
-				);
-				background-size: 200% 100%;
-				animation: shimmer 1.5s infinite linear;
-				border-radius: 6px;
-				margin-bottom: 12px;
-			}
-
-			.sk-title-lg {
-				height: 36px;
-				width: 50%;
-				margin-bottom: 16px;
-			}
-			.sk-title-md {
-				height: 28px;
-				width: 30%;
-				margin-bottom: 20px;
-				margin-top: 40px;
-			}
-			.sk-text {
-				height: 16px;
-				width: 80%;
-				margin-bottom: 8px;
-			}
-			.sk-text-short {
-				width: 40%;
-			}
-			.sk-label {
-				height: 14px;
-				width: 25%;
-				margin-bottom: 10px;
-			}
-
-			.hero-section {
-				display: flex;
-				gap: 40px;
-				margin-bottom: 40px;
-				border-bottom: 1px solid ${borderColor};
-				padding-bottom: 40px;
-				flex-direction: row;
-			}
-			.hero-content {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-			}
-			.hero-image {
-				flex: 1;
-				height: 300px;
-				border-radius: 12px;
-			}
-
-			.share-section {
-				margin-bottom: 40px;
-			}
-			.sk-input {
-				height: 50px;
-				width: 100%;
-				border-radius: 8px;
-				margin-bottom: 16px;
-			}
-			.social-buttons {
-				display: flex;
-				gap: 12px;
-			}
-			.sk-btn-social {
-				flex: 1;
-				height: 50px;
-				border-radius: 8px;
-			}
-
-			.stats-section {
-				display: flex;
-				gap: 24px;
-				margin-bottom: 40px;
-				padding: 30px 0;
-				border-top: 1px solid ${borderColor};
-				border-bottom: 1px solid ${borderColor};
-			}
-			.stat-card {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-			}
-			.stat-divider {
-				padding-left: 24px;
-			}
-
-			.sk-stat-num {
-				height: 48px;
-				width: 120px;
-				margin-bottom: 8px;
-			}
-			.sk-stat-label {
-				height: 18px;
-				width: 80px;
-			}
-
-			.table-header {
-				display: flex;
-				gap: 16px;
-				margin-bottom: 16px;
-			}
-			.sk-th {
-				height: 16px;
-			}
-			.table-row {
-				display: flex;
-				align-items: center;
-				gap: 16px;
-				padding: 16px 0;
-				border-bottom: 1px solid ${borderColor};
-			}
-
-			.col-user {
-				flex: 2;
-			}
-			.col-status {
-				flex: 1;
-			}
-			.col-reward {
-				flex: 2;
-			}
-			.col-date {
-				flex: 1;
-			}
-
-			.sk-badge {
-				height: 28px;
-				width: 90px;
-				border-radius: 14px;
-			}
-			.sk-reward-block {
-				height: 36px;
-				width: 100%;
-				border-radius: 6px;
-			}
-
-			.pagination {
-				display: flex;
-				justify-content: flex-end;
-				gap: 8px;
-				margin-top: 24px;
-			}
-			.sk-btn-page {
-				height: 36px;
-				width: 64px;
-				border-radius: 6px;
-				margin-bottom: 0;
-			}
-
-			@media (max-width: 768px) {
-				body {
-					padding: 20px;
-				}
-				.widget-container {
-					padding: 24px;
-				}
-
-				.hero-section {
-					flex-direction: column-reverse;
-					gap: 24px;
-				}
-				.hero-image {
-					height: 220px;
-					width: 100%;
-				}
-				.sk-title-lg {
-					width: 80%;
-				}
-
-				.col-date {
-					display: none;
-				}
-			}
-
-			@media (max-width: 480px) {
-				body {
-					padding: 10px;
-				}
-				.widget-container {
-					padding: 16px;
-				}
-
-				.sk-stat-num {
-					width: 80px;
-					height: 40px;
-				}
-
-				.col-reward {
-					display: none;
-				}
-
-				.col-user {
-					flex: 3;
-				}
-				.col-status {
-					flex: 2;
-					display: flex;
-					justify-content: flex-end;
-				}
-			}
-    </style>
-
-    <div class="widget-container">
-			<div class="hero-section">
-				<div class="hero-content">
-					<div class="skeleton sk-title-lg"></div>
-					<div class="skeleton sk-text"></div>
-					<div class="skeleton sk-text sk-text-short"></div>
-				</div>
-				<div class="skeleton hero-image"></div>
-			</div>
-
-			<div class="share-section">
-				<div class="skeleton sk-label"></div>
-				<div class="skeleton sk-input"></div>
-				<div class="social-buttons">
-					<div class="skeleton sk-btn-social"></div>
-					<div class="skeleton sk-btn-social"></div>
-					<div class="skeleton sk-btn-social"></div>
-					<div class="skeleton sk-btn-social"></div>
-				</div>
-			</div>
-
-			<div
-				class="skeleton sk-title-md"
-				style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"
-			></div>
-			<div
-				class="skeleton sk-text"
-				style="width: 60%; margin-left: auto; margin-right: auto"
-			></div>
-
-			<div class="stats-section">
-				<div class="stat-card">
-					<div class="skeleton sk-stat-num"></div>
-					<div class="skeleton sk-stat-label"></div>
-				</div>
-				<div class="stat-card stat-divider">
-					<div class="skeleton sk-stat-num"></div>
-					<div class="skeleton sk-stat-label"></div>
-				</div>
-			</div>
-
-			<div class="skeleton sk-title-md"></div>
-
-			<div class="table-header">
-				<div class="skeleton sk-th col-user"></div>
-				<div class="skeleton sk-th col-status"></div>
-				<div class="skeleton sk-th col-reward"></div>
-				<div class="skeleton sk-th col-date"></div>
-			</div>
-
-			<div class="table-row">
-				<div class="col-user">
-					<div class="skeleton sk-text" style="width: 70%; margin: 0"></div>
-				</div>
-				<div class="col-status">
-					<div class="skeleton sk-badge" style="margin: 0"></div>
-				</div>
-				<div class="col-reward">
-					<div class="skeleton sk-reward-block" style="margin: 0"></div>
-				</div>
-				<div class="col-date">
-					<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
-				</div>
-			</div>
-			<div class="table-row">
-				<div class="col-user">
-					<div class="skeleton sk-text" style="width: 60%; margin: 0"></div>
-				</div>
-				<div class="col-status">
-					<div class="skeleton sk-badge" style="margin: 0"></div>
-				</div>
-				<div class="col-reward">
-					<div class="skeleton sk-reward-block" style="margin: 0"></div>
-				</div>
-				<div class="col-date">
-					<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
-				</div>
-			</div>
-			<div class="table-row">
-				<div class="col-user">
-					<div class="skeleton sk-text" style="width: 75%; margin: 0"></div>
-				</div>
-				<div class="col-status">
-					<div class="skeleton sk-badge" style="margin: 0"></div>
-				</div>
-				<div class="col-reward">
-					<div class="skeleton sk-reward-block" style="margin: 0"></div>
-				</div>
-				<div class="col-date">
-					<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
-				</div>
-			</div>
-
-			<div class="pagination">
-				<div class="skeleton sk-btn-page"></div>
-				<div class="skeleton sk-btn-page"></div>
-			</div>
-		</div>
-  `;
-  };
   const _log$7 = browserExports.debug("squatch-js:EMBEDwidget");
   class EmbedWidget extends Widget {
     constructor(params, container) {
@@ -1465,61 +1120,34 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         this.container = container;
       }
     }
+    //Old code for testing
     async load() {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+      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 skeletonBackgroundColor = (_d = (_c = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _c.loadingSkeleton) == null ? void 0 : _d.background;
-      const skeletonShimmerColor = (_f = (_e = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _e.loadingSkeleton) == null ? void 0 : _f.animationBackground;
-      const borderColor = (_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 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) : "";
-      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;
-      frame.style.display = "none";
-      const injectContents = (target) => {
-        target.appendChild(skeletonContainer);
-        target.appendChild(frame);
-      };
-      if ((_i = this.context) == null ? void 0 : _i.container) {
+      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 (((_j = element.shadowRoot.lastChild) == null ? void 0 : _j.nodeName) === "IFRAME") {
+          if (((_e = element.shadowRoot.lastChild) == null ? void 0 : _e.nodeName) === "IFRAME") {
             element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
           } else {
-            injectContents(element.shadowRoot);
+            element.shadowRoot.appendChild(frame);
           }
         } else if (element.firstChild) {
-          element.innerHTML = "";
-          injectContents(element);
+          element.replaceChild(frame, element.firstChild);
         } else {
-          injectContents(element);
+          element.appendChild(frame);
         }
       } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
-        injectContents(element);
+        element.appendChild(frame);
       }
       const { contentWindow } = frame;
       if (!contentWindow) {
@@ -1527,32 +1155,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       const frameDoc = contentWindow.document;
       frameDoc.open();
-      console.log({ content: this.content, context: this.context, this: this });
-      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.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;
-        frame.height = initialHeight || frameDoc.body.scrollHeight;
-        console.log({ height: frameDoc.body.scrollHeight });
+        frame.height = frameDoc.body.scrollHeight;
         const ro = new contentWindow["ResizeObserver"]((entries) => {
           for (const entry of entries) {
             const { height } = entry.contentRect;
@@ -1569,6 +1179,126 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
       });
     }
+    // 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 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";
+    //     element.style.height = "0";
+    //     element.style["overflow-y"] = "hidden";
+    //   }
+    //   if (this.container) {
+    //     if (element.shadowRoot) {
+    //       if (element.shadowRoot.lastChild?.nodeName === "IFRAME") {
+    //         element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
+    //       } else {
+    //         injectContents(element.shadowRoot);
+    //       }
+    //     } else if (element.firstChild) {
+    //       // If replacing, wipe and reload
+    //       element.innerHTML = "";
+    //       injectContents(element);
+    //     } 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();
+    //   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.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 });
+    //     // Adjust frame height when size of body changes
+    //     /* istanbul ignore next: hard to test */
+    //     const ro = new contentWindow["ResizeObserver"]((entries) => {
+    //       for (const entry of entries) {
+    //         const { height } = entry.contentRect;
+    //         // @ts-ignore -- number will be cast to string by browsers
+    //         frame.height = height;
+    //       }
+    //     });
+    //     const container = await this._findInnerContainer(frame);
+    //     ro.observe(container);
+    //     if (this._shouldFireLoadEvent()) {
+    //       this._loadEvent(_sqh);
+    //       _log("loaded");
+    //     } else if (frameDoc) {
+    //       this._attachLoadEventListener(frameDoc, _sqh);
+    //     }
+    //   });
+    // }
     /**
      * Un-hide if element is available and refresh data
      */