@saasquatch/squatch-js 2.8.2-2 → 2.8.2-4

package/dist/squatch.cjs.js

@@ -1459,7 +1459,9 @@ class EmbedWidget extends Widget {
     super(params);
     __publicField(this, "show", this.open);
     __publicField(this, "hide", this.close);
-    if (container) this.container = container;
+    if (container) {
+      this.container = container;
+    }
   }
   async load() {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
@@ -1490,6 +1492,7 @@ class EmbedWidget extends Widget {
       initialHeight
     });
     const element = this._findElement();
+    element.innerHTML = skeletonHTML;
     frame.style.display = "none";
     const injectContents = (target) => {
       target.appendChild(skeletonContainer);
@@ -1531,7 +1534,7 @@ class EmbedWidget extends Widget {
         <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;}
@@ -2465,6 +2468,18 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
     var _a2, _b;
     this.loaded = true;
     this.container = this.getAttribute("container");
+    const dynamicContent = `
+    <div>
+      <h1>Dynamic Content</h1>
+      <p>This content was dynamically added to the widget before it loaded.</p>
+    </div>
+  `;
+    if (this.container) {
+      const containerElement = document.querySelector(this.container);
+      if (containerElement) {
+        containerElement.innerHTML = dynamicContent;
+      }
+    }
     await this.renderWidget();
     const slot = (_a2 = this.shadowRoot && Array.from(this.shadowRoot.children)) == null ? void 0 : _a2.find((c) => c.tagName === "SLOT");
     if (slot) (_b = this.shadowRoot) == null ? void 0 : _b.removeChild(slot);