@saasquatch/squatch-js 2.8.2-24 → 2.8.2-26

package/dist/squatch.esm.js

@@ -1877,10 +1877,7 @@ const getSkeleton = ({
 			.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;
 			}
 
@@ -2220,7 +2217,7 @@ function decodeUserJwt(tokenStr) {
 }
 const _log$1 = debug("squatch-js:DeclarativeWidget");
 class DeclarativeWidget extends HTMLElement {
-  constructor() {
+  constructor(res) {
     super();
     /**
      * Configuration overrides
@@ -2267,6 +2264,7 @@ class DeclarativeWidget extends HTMLElement {
      */
     __publicField(this, "container");
     __publicField(this, "element");
+    __publicField(this, "widgetConfig");
     /**
      * Flag for if the component has been loaded or not
      * @hidden
@@ -2330,6 +2328,7 @@ class DeclarativeWidget extends HTMLElement {
     this.config = getConfig();
     this.token = getToken();
     this.tenant = window.squatchTenant;
+    this.widgetConfig = res.widgetConfig;
     this.container = this;
   }
   _setupApis(config) {
@@ -2420,8 +2419,8 @@ class DeclarativeWidget extends HTMLElement {
   }
 }
 class DeclarativeEmbedWidget extends DeclarativeWidget {
-  constructor() {
-    super();
+  constructor(res) {
+    super(res);
     this.type = "EMBED";
     this.loaded = false;
   }
@@ -2440,6 +2439,8 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
   async connectedCallback() {
     this.loaded = true;
     this.container = this.getAttribute("container");
+    const brandingConfig = this.widgetConfig.values.brandingConfig;
+    console.log("THIS IS THE BRANDING CONFIG", brandingConfig);
     const skeletonHTML = getSkeleton({ height: "100%" });
     const skeletonContainer = document.createElement("div");
     skeletonContainer.id = "loading-skeleton";
@@ -2456,8 +2457,8 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
   }
 }
 class DeclarativePopupWidget extends DeclarativeWidget {
-  constructor() {
-    super();
+  constructor(res) {
+    super(res);
     this.type = "POPUP";
     this.loaded = false;
     this.addEventListener("click", (e) => {
@@ -2478,26 +2479,17 @@ class DeclarativePopupWidget extends DeclarativeWidget {
     }
   }
   async connectedCallback() {
-    var _a2;
     this.loaded = true;
     this.container = this.getAttribute("container");
-    const skeletonHTML = `
-    <div>
-      <h1>Dynamic Content</h1>
-      <p>This content was dynamically added to the widget before it loaded.</p>
-    </div>
-  `;
+    const skeletonHTML = getSkeleton({ height: "100%" });
     const skeletonContainer = document.createElement("div");
     skeletonContainer.id = "loading-skeleton";
     skeletonContainer.innerHTML = skeletonHTML;
-    if (!this.shadowRoot) {
-      this.attachShadow({ mode: "open" });
-    }
-    if (this.shadowRoot) {
-      this.shadowRoot.innerHTML = skeletonHTML;
-    }
+    const root = this.shadowRoot || this.attachShadow({ mode: "open" });
+    root.innerHTML = "";
+    root.appendChild(skeletonContainer);
     await this.renderWidget();
-    const loadingElement = (_a2 = this.shadowRoot) == null ? void 0 : _a2.getElementById("loading-skeleton");
+    const loadingElement = root.getElementById("loading-skeleton");
     if (loadingElement) {
       loadingElement.remove();
     }