@saasquatch/squatch-js 2.7.0-4 → 2.8.0-0

package/dist/squatch.esm.js

@@ -754,6 +754,41 @@ function _buildParams({
   if (locale) queryParams.append("locale", locale);
   return `?${queryParams.toString()}`;
 }
+/*!
+ * domready (c) Dustin Diaz 2014 - License MIT
+ *
+ */
+function domready(targetDoc, fn) {
+  let fns = [];
+  let listener;
+  let doc = targetDoc;
+  let hack = doc.documentElement.doScroll;
+  let domContentLoaded = "DOMContentLoaded";
+  let loaded = (hack ? /^loaded|^c/ : /^loaded|^i|^c/).test(doc.readyState);
+  if (!loaded)
+    doc.addEventListener(
+      domContentLoaded,
+      listener = () => {
+        doc.removeEventListener(domContentLoaded, listener);
+        loaded = true;
+        while (listener = fns.shift()) listener();
+      }
+    );
+  return loaded ? setTimeout(fn, 0) : fns.push(fn);
+}
+function formatWidth({
+  value,
+  unit
+}) {
+  switch (unit) {
+    case "PX":
+      return `${value}px`;
+    case "%":
+      return `${value}%`;
+    default:
+      return `${value}px`;
+  }
+}
 class AnalyticsApi {
   /**
    * Initialize a new {@link AnalyticsApi} instance.
@@ -1062,28 +1097,6 @@ function delay(duration) {
     setTimeout(resolve, duration);
   });
 }
-/*!
- * domready (c) Dustin Diaz 2014 - License MIT
- *
- */
-function domready(targetDoc, fn) {
-  let fns = [];
-  let listener;
-  let doc = targetDoc;
-  let hack = doc.documentElement.doScroll;
-  let domContentLoaded = "DOMContentLoaded";
-  let loaded = (hack ? /^loaded|^c/ : /^loaded|^i|^c/).test(doc.readyState);
-  if (!loaded)
-    doc.addEventListener(
-      domContentLoaded,
-      listener = () => {
-        doc.removeEventListener(domContentLoaded, listener);
-        loaded = true;
-        while (listener = fns.shift()) listener();
-      }
-    );
-  return loaded ? setTimeout(fn, 0) : fns.push(fn);
-}
 const _log$7 = browserExports.debug("squatch-js:EMBEDwidget");
 class EmbedWidget extends Widget {
   constructor(params, container) {
@@ -1093,7 +1106,7 @@ class EmbedWidget extends Widget {
     if (container) this.container = container;
   }
   async load() {
-    var _a2, _b;
+    var _a2, _b, _c, _d, _e;
     const frame = this._createFrame();
     const element = this._findElement();
     if ((_a2 = this.context) == null ? void 0 : _a2.container) {
@@ -1101,9 +1114,15 @@ class EmbedWidget extends Widget {
       element.style.height = "0";
       element.style["overflow-y"] = "hidden";
     }
+    const brandingConfig = (_c = (_b = this.context.widgetConfig) == null ? void 0 : _b.values) == null ? void 0 : _c.brandingConfig;
+    const sizes = (_d = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _d.embedWidgets;
+    const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "100%";
+    const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "100%";
+    element.style.maxWidth = maxWidth;
+    element.style.minWidth = minWidth;
     if (this.container) {
       if (element.shadowRoot) {
-        if (((_b = element.shadowRoot.lastChild) == null ? void 0 : _b.nodeName) === "IFRAME") {
+        if (((_e = element.shadowRoot.lastChild) == null ? void 0 : _e.nodeName) === "IFRAME") {
           element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
         } else {
           element.shadowRoot.appendChild(frame);
@@ -1226,11 +1245,16 @@ class PopupWidget extends Widget {
     }
   }
   _createPopupDialog() {
+    var _a2, _b, _c;
     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 minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "100%";
+    const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "500px";
     dialog.id = this.id;
     dialog.setAttribute(
       "style",
-      "width: 100%; max-width: 500px; border: none; padding: 0;"
+      `width: 100%; min-width: ${minWidth}; max-width: ${maxWidth}; border: none; padding: 0;`
     );
     const onClick = (e) => {
       e.stopPropagation();
@@ -1859,16 +1883,17 @@ class DeclarativeWidget extends HTMLElement {
      * @hidden
      */
     __publicField(this, "loaded");
-    __publicField(this, "_setWidget", (template, config) => {
+    __publicField(this, "_setWidget", (res, config) => {
       var _a2;
       const params = {
         api: this.widgetApi,
-        content: template,
+        content: res.template,
         context: {
           type: config.type,
           user: config.user,
           container: this.container || void 0,
-          engagementMedium: this.type
+          engagementMedium: this.type,
+          config: res.widgetConfig
         },
         type: this.widgetType,
         domain: ((_a2 = this.config) == null ? void 0 : _a2.domain) || DEFAULT_DOMAIN,
@@ -1936,7 +1961,7 @@ class DeclarativeWidget extends HTMLElement {
       engagementMedium: this.type,
       widgetType: this.widgetType,
       locale: this.locale
-    }).then((res) => this._setWidget(res.template, { type: "passwordless" })).catch(this.setErrorWidget);
+    }).then((res) => this._setWidget(res, { type: "passwordless" })).catch(this.setErrorWidget);
   }
   async renderUserUpsertVariant() {
     this._setupApis();
@@ -1945,15 +1970,20 @@ class DeclarativeWidget extends HTMLElement {
       return this.setErrorWidget(Error("No user object in token."));
     }
     _log$1("Rendering as a Verified widget");
-    const widgetInstance = await this.widgetApi.upsertUser({
+    await this.widgetApi.upsertUser({
       user: userObj,
       locale: this.locale,
       engagementMedium: this.type,
       widgetType: this.widgetType,
       jwt: this.token
-    }).then(
-      (res) => this._setWidget(res.template, { type: "upsert", user: userObj })
-    ).catch(this.setErrorWidget);
+    });
+    const widgetInstance = await this.widgetApi.render({
+      locale: this.locale,
+      engagementMedium: this.type,
+      widgetType: this.widgetType
+    }).then((res) => {
+      return this._setWidget(res, { type: "upsert", user: userObj });
+    }).catch(this.setErrorWidget);
     return widgetInstance;
   }
   /**