@saasquatch/squatch-js 2.6.0-4 → 2.6.0-6

package/dist/squatch.esm.js

@@ -211,7 +211,7 @@ class WidgetApi {
     this.npmCdn = clean.npmCdn;
   }
   /**
-   * Creates/upserts user.
+   * Creates/upserts user, requests widget template.
    *
    * @param {Object} params Parameters for request
    * @param {Object?} params.user The user details
@@ -253,7 +253,7 @@ class WidgetApi {
     return doPut(url, JSON.stringify(user), jwt);
   }
   /**
-   * Description here.
+   * Requests widget template
    *
    * @param {Object} params Parameters for request
    * @param {Object} params.user The user details
@@ -400,7 +400,7 @@ function _validateAnalyticsConfig(raw) {
 // @ts-check
 /** @hidden */
 
-var _log$7 = debug("squatch-js:widget");
+var _log$8 = debug("squatch-js:widget");
 /*
  * The Widget class is the base class for the different widget types available
  *
@@ -421,7 +421,7 @@ class Widget {
     this.npmCdn = void 0;
     this.container = void 0;
 
-    _log$7("widget initializing ...");
+    _log$8("widget initializing ...");
 
     this.content = params.content === "error" ? this._error(params.rsCode) : params.content;
     this.type = params.type;
@@ -431,7 +431,7 @@ class Widget {
       domain: params.domain
     });
     this.context = params.context;
-    this.container = params.container;
+    this.container = params.context.container;
   }
 
   _findElement() {
@@ -441,22 +441,22 @@ class Widget {
       // selector is a string
       element = document.querySelector(this.container);
 
-      _log$7("loading widget with selector", element); // selector is an HTML element
+      _log$8("loading widget with selector", element); // selector is an HTML element
 
     } else if (this.container instanceof HTMLElement) {
       element = this.container;
 
-      _log$7("loading widget with container", element); // garbage container found
+      _log$8("loading widget with container", element); // garbage container found
 
     } else if (this.container) {
       element = null;
 
-      _log$7("container must be an HTMLElement or string", this.container); // find element on page
+      _log$8("container must be an HTMLElement or string", this.container); // find element on page
 
     } else {
       element = document.querySelector("#squatchembed") || document.querySelector(".squatchembed");
 
-      _log$7("loading widget with default selector", element);
+      _log$8("loading widget with default selector", element);
     }
 
     if (!(element instanceof HTMLElement)) throw new Error("element with selector '" + (this.container || "#squatchembed or .squatchembed") + "' not found.'");
@@ -475,8 +475,7 @@ class Widget {
   }
 
   _findFrame() {
-    var element = this._findElement();
-
+    var element = this.container ? this._findElement() : document.body;
     var parent = element.shadowRoot || element;
     return parent.querySelector("iframe#squatchFrame");
   }
@@ -515,9 +514,9 @@ class Widget {
     }
 
     (_this$analyticsApi$pu = this.analyticsApi.pushAnalyticsLoadEvent(params)) == null ? void 0 : _this$analyticsApi$pu.then(response => {
-      _log$7(params.engagementMedium + " loaded event recorded.");
+      _log$8(params.engagementMedium + " loaded event recorded.");
     }).catch(ex => {
-      _log$7("ERROR: pushAnalyticsLoadEvent() " + ex);
+      _log$8("ERROR: pushAnalyticsLoadEvent() " + ex);
     });
   }
 
@@ -530,9 +529,9 @@ class Widget {
         engagementMedium: sqh.mode.widgetMode,
         shareMedium: medium
       }).then(response => {
-        _log$7(sqh.mode.widgetMode + " share " + medium + " event recorded. " + response);
+        _log$8(sqh.mode.widgetMode + " share " + medium + " event recorded. " + response);
       }).catch(ex => {
-        _log$7("ERROR: pushAnalyticsShareClickedEvent() " + ex);
+        _log$8("ERROR: pushAnalyticsShareClickedEvent() " + ex);
       });
     }
   } // TODO: CA: Refactor how error templates are shown
@@ -654,7 +653,7 @@ class Widget {
         message
       } = _ref3;
 
-      _log$7("" + message);
+      _log$8("" + message);
     });
   }
 
@@ -682,10 +681,7 @@ class Widget {
 
 function delay(duration) {
   return new Promise(function (resolve, reject) {
-    setTimeout(function () {
-      /* istanbul ignore next */
-      resolve(() => {});
-    }, duration);
+    setTimeout(resolve, duration);
   });
 }
 
@@ -714,12 +710,17 @@ function domready(targetDoc, fn) {
 
 // @ts-check
 
-var _log$6 = debug("squatch-js:EMBEDwidget");
+var _log$7 = debug("squatch-js:EMBEDwidget");
 /**
  * An EmbedWidget is displayed inline in part of your page.
  *
  * To create an EmbedWidget use {@link Widgets}
  *
+ * @example
+ * const widget = new EmbedWidget({ ... })
+ * widget.load() // Loads widget into the DOM
+ * widget.open() // Makes the iframe container visible
+ * widget.close() // Hides the iframe container
  */
 
 
@@ -728,6 +729,7 @@ class EmbedWidget extends Widget {
     super(params);
     this.show = this.open;
     this.hide = this.close;
+    if (container) this.container = container;
   }
 
   async load() {
@@ -771,6 +773,8 @@ class EmbedWidget extends Widget {
 
       frame.height = frameDoc.body.scrollHeight; // Adjust frame height when size of body changes
 
+      /* istanbul ignore next: hard to test */
+
       var ro = new contentWindow["ResizeObserver"](entries => {
         for (var entry of entries) {
           var {
@@ -780,12 +784,13 @@ class EmbedWidget extends Widget {
           frame.height = height;
         }
       });
-      ro.observe(await this._findInnerContainer(frame)); // Regular load - trigger event
+      var container = await this._findInnerContainer(frame);
+      ro.observe(container);
 
-      if (!this.container) {
+      if (this._shouldFireLoadEvent()) {
         this._loadEvent(_sqh);
 
-        _log$6("loaded");
+        _log$7("loaded");
       }
     });
   }
@@ -799,7 +804,7 @@ class EmbedWidget extends Widget {
 
     var frame = this._findFrame();
 
-    if (!frame) return _log$6("no target element to open");
+    if (!frame) return _log$7("no target element to open");
 
     var element = this._findElement();
 
@@ -810,15 +815,17 @@ class EmbedWidget extends Widget {
 
     var _sqh = (frame == null ? void 0 : (_frame$contentWindow = frame.contentWindow) == null ? void 0 : _frame$contentWindow.squatch) || (frame == null ? void 0 : (_frame$contentWindow2 = frame.contentWindow) == null ? void 0 : _frame$contentWindow2.widgetIdent);
 
-    this._loadEvent(_sqh);
+    if (this.context.user) {
+      this._loadEvent(_sqh);
 
-    _log$6("loaded");
+      _log$7("loaded");
+    }
   }
 
   close() {
     var frame = this._findFrame();
 
-    if (!frame) return _log$6("no target element to close");
+    if (!frame) return _log$7("no target element to close");
 
     var element = this._findElement();
 
@@ -826,7 +833,7 @@ class EmbedWidget extends Widget {
     element.style.height = "0";
     element.style["overflow-y"] = "hidden";
 
-    _log$6("Embed widget closed");
+    _log$7("Embed widget closed");
   }
 
   _error(rs, mode, style) {
@@ -841,11 +848,18 @@ class EmbedWidget extends Widget {
     return super._error(rs, mode, style);
   }
 
+  _shouldFireLoadEvent() {
+    var noContainer = !this.container;
+    var isComponent = this.container instanceof HTMLElement && this.container.tagName.startsWith("SQUATCH-");
+    var isVerified = !!this.context.user;
+    return isVerified && (noContainer || isComponent);
+  }
+
 }
 
 // @ts-check
 
-var _log$5 = debug("squatch-js:POPUPwidget");
+var _log$6 = debug("squatch-js:POPUPwidget");
 
 var popupId = 0;
 /**
@@ -854,6 +868,11 @@ var popupId = 0;
  *
  * To create a PopupWidget use {@link Widgets}
  *
+ * @example
+ * const widget = new PopupWidget({ ... })
+ * widget.load() // Loads the widget into a dialog element
+ * widget.open() // Opens the dialog element
+ * widget.close() // Hides the dialog element
  */
 
 class PopupWidget extends Widget {
@@ -879,7 +898,7 @@ class PopupWidget extends Widget {
     document.head.insertAdjacentHTML("beforeend", "<style>#" + this.id + "::-webkit-scrollbar { display: none; }</style>");
   }
 
-  _initialiseCTA(frame) {
+  _initialiseCTA() {
     if (!this.trigger) return;
     var triggerElement;
 
@@ -887,9 +906,9 @@ class PopupWidget extends Widget {
       triggerElement
       /* HTMLButton */
       = document.querySelector(this.trigger);
-      if (this.trigger && !triggerElement) _log$5("No element found with trigger selector", this.trigger);
+      if (this.trigger && !triggerElement) _log$6("No element found with trigger selector", this.trigger);
     } catch (_unused) {
-      _log$5("Not a valid selector", this.trigger);
+      _log$6("Not a valid selector", this.trigger);
     } // Trigger is optional
 
 
@@ -897,16 +916,7 @@ class PopupWidget extends Widget {
       triggerElement.onclick = () => {
         this.open();
       };
-    } // const element = this._findElement();
-    // If widget is loaded with CTA, look for a 'squatchpop' element to use
-    // that element as a trigger as well.
-    // const triggerWhenCTA = element.querySelector(".squatchpop") as HTMLElement;
-    // if (this.trigger === "#cta" && triggerWhenCTA) {
-    //   triggerWhenCTA.onclick = () => {
-    //     this.open(frame);
-    //   };
-    // }
-
+    }
   }
 
   _createPopupDialog() {
@@ -915,6 +925,7 @@ class PopupWidget extends Widget {
     dialog.setAttribute("style", "width: 100%; max-width: 500px; border: none; padding: 0;");
 
     var onClick = e => {
+      e.stopPropagation();
       if (e.target === dialog) dialog.close();
     };
 
@@ -927,10 +938,9 @@ class PopupWidget extends Widget {
 
     var frame = this._createFrame();
 
-    this._initialiseCTA(frame);
-
-    var element = this._findElement();
+    this._initialiseCTA();
 
+    var element = this.container ? this._findElement() : document.body;
     var dialogParent = element.shadowRoot || element;
 
     var dialog = this._createPopupDialog();
@@ -959,7 +969,7 @@ class PopupWidget extends Widget {
     frameDoc.write("<script src=\"" + this.npmCdn + "/resize-observer-polyfill@1.5.x\"></script>");
     frameDoc.close();
 
-    _log$5("Popup template loaded into iframe");
+    _log$6("Popup template loaded into iframe");
 
     this._setupResizeHandler(frame);
   }
@@ -996,8 +1006,7 @@ class PopupWidget extends Widget {
   }
 
   open() {
-    var element = this._findElement();
-
+    var element = this.container ? this._findElement() : document.body;
     var parent = element.shadowRoot || element;
     var dialog = parent.querySelector("#" + this.id);
     if (!dialog) throw new Error("Could not determine container div");
@@ -1019,21 +1028,22 @@ class PopupWidget extends Widget {
 
       (_frame$contentDocumen = frame.contentDocument) == null ? void 0 : _frame$contentDocumen.dispatchEvent(new CustomEvent("sq:refresh"));
 
-      this._loadEvent(_sqh);
+      if (this.context.user) {
+        this._loadEvent(_sqh);
 
-      _log$5("Popup opened");
+        _log$6("Popup opened");
+      }
     });
   }
 
   close() {
-    var element = this._findElement();
-
+    var element = this.container ? this._findElement() : document.body;
     var parent = element.shadowRoot || element;
     var dialog = parent.querySelector("#" + this.id);
     if (!dialog) throw new Error("Could not determine container div");
     dialog.close();
 
-    _log$5("Popup closed");
+    _log$6("Popup closed");
   }
 
   _clickedOutside(_ref) {
@@ -1054,16 +1064,33 @@ class PopupWidget extends Widget {
 
 }
 
-var _log$4 = debug("squatch-js:widgets");
+var _log$5 = debug("squatch-js:widgets");
 /**
- *
  * `Widgets` is a factory for creating widgets. It's possible to build your own widgets using the
  * {@link WidgetApi} but most people will prefer to use these easy methods.
- *
+ * @class
  */
 
 
 class Widgets {
+  /**
+   * Instance of {@link WidgetApi}
+   */
+
+  /**
+   * Tenant alias of SaaSquatch tenant.
+   */
+
+  /**
+   * SaaSquatch domain for API requests.
+   * @default "https://app.referralsaasquatch.com"
+   */
+
+  /**
+   * Hosted CDN for npm packages
+   * @default "https://fast.ssqt.io/npm"
+   */
+
   /**
    * Initialize a new {@link Widgets} instance.
    *
@@ -1089,7 +1116,7 @@ class Widgets {
     this.tenantAlias = config.tenantAlias;
     this.domain = config.domain;
     this.npmCdn = config.npmCdn;
-    this.api = new WidgetApi(config); // listens to a 'submit_email' event in the theme.
+    this.api = new WidgetApi(config);
   }
   /**
    * This function calls the {@link WidgetApi.upsertUser} method, and it renders
@@ -1126,7 +1153,7 @@ class Widgets {
         user: response.user
       };
     } catch (err) {
-      _log$4(err);
+      _log$5(err);
 
       if (err.apiErrorCode) {
         this._renderErrorWidget(err, config.engagementMedium);
@@ -1161,7 +1188,9 @@ class Widgets {
       return {
         widget: this._renderWidget(response, clean, {
           type: "passwordless",
-          engagementMedium: clean.engagementMedium
+          engagementMedium: clean.engagementMedium,
+          container: clean.container,
+          trigger: clean.trigger
         }),
         user: response.user
       };
@@ -1190,7 +1219,7 @@ class Widgets {
         var response = await this.api.squatchReferralCookie();
         input(response);
       } catch (e) {
-        _log$4("Autofill error", e);
+        _log$5("Autofill error", e);
 
         throw new Error(e);
       }
@@ -1206,7 +1235,7 @@ class Widgets {
       // Only use the first element found
       elem = elems[0];
     } else {
-      _log$4("Element id/class or function missing");
+      _log$5("Element id/class or function missing");
 
       throw new Error("Element id/class or function missing");
     }
@@ -1232,7 +1261,7 @@ class Widgets {
   _renderWidget(response, config, context) {
     var _opts$widget;
 
-    _log$4("Rendering Widget...");
+    _log$5("Rendering Widget...");
 
     if (!response) throw new Error("Unable to get a response");
     var widget;
@@ -1255,16 +1284,16 @@ class Widgets {
           if (rule.widgetType !== "CONVERSION_WIDGET" || (_response$user = response.user) != null && (_response$user$referr = _response$user.referredBy) != null && _response$user$referr.code) {
             displayOnLoad = rule.displayOnLoad;
 
-            _log$4("Display " + rule.widgetType + " on " + rule.url);
+            _log$5("Display " + rule.widgetType + " on " + rule.url);
           } else {
-            _log$4("Don't display " + rule.widgetType + " when no referral on widget rule match " + rule.url);
+            _log$5("Don't display " + rule.widgetType + " when no referral on widget rule match " + rule.url);
           }
         }
       });
     }
 
     if (opts.fuelTankAutofillUrls) {
-      _log$4("We found a fuel tank autofill!");
+      _log$5("We found a fuel tank autofill!");
 
       opts.fuelTankAutofillUrls.forEach(_ref => {
         var {
@@ -1275,7 +1304,7 @@ class Widgets {
         if (Widgets._matchesUrl(url)) {
           var _response$user2, _response$user2$refer;
 
-          _log$4("Fuel Tank URL matches");
+          _log$5("Fuel Tank URL matches");
 
           if ((_response$user2 = response.user) != null && (_response$user2$refer = _response$user2.referredBy) != null && _response$user2$refer.code) {
             var formAutofill = document.querySelector(formSelector);
@@ -1285,7 +1314,7 @@ class Widgets {
 
               formAutofill.value = ((_response$user$referr2 = response.user.referredBy.referredReward) == null ? void 0 : _response$user$referr2.fuelTankCode) || "";
             } else {
-              _log$4(new Error("Element with id/class " + formSelector + " was not found."));
+              _log$5(new Error("Element with id/class " + formSelector + " was not found."));
             }
           }
         }
@@ -1293,15 +1322,9 @@ class Widgets {
     }
 
     if (config.engagementMedium === "EMBED") {
-      widget = this._renderEmbedWidget(params, params.context.container);
-    } else if (config.engagementMedium === "POPUP") {
-      widget = this._renderPopupWidget(params);
-      if (displayOnLoad) widget.open();
+      widget = this._renderEmbedWidget(params);
     } else {
-      _log$4("display popup on load");
-
-      widget = new PopupWidget(params);
-      widget.load();
+      widget = this._renderPopupWidget(params);
       if (displayOnLoad) widget.open();
     }
 
@@ -1314,8 +1337,8 @@ class Widgets {
     return widget;
   }
 
-  _renderEmbedWidget(params, container) {
-    var widget = new EmbedWidget(params, container);
+  _renderEmbedWidget(params) {
+    var widget = new EmbedWidget(params, params.context.container);
     widget.load();
     return widget;
   }
@@ -1338,7 +1361,7 @@ class Widgets {
       message
     } = props;
 
-    _log$4(new Error(apiErrorCode + " (" + rsCode + ") " + message));
+    _log$5(new Error(apiErrorCode + " (" + rsCode + ") " + message));
 
     var params = {
       content: "error",
@@ -1370,9 +1393,6 @@ class Widgets {
 
   static _matchesUrl(rule) {
     // If there were no matches, null is returned.
-    console.log({
-      href: window.location.href
-    });
     return window.location.href.match(new RegExp(rule)) ? true : false;
   }
 
@@ -1477,7 +1497,7 @@ function asyncLoad() {
 
 /** @hidden */
 
-var _log$3 = debug("squatch-js");
+var _log$4 = debug("squatch-js");
 
 var isObject = item => typeof item === "object" && !Array.isArray(item);
 
@@ -1530,7 +1550,7 @@ function _pushCookie() {
     try {
       paramsJSON = JSON.parse(b64decode(refParam));
     } catch (error) {
-      _log$3("Unable to decode params", error); // don't merge invalid params
+      _log$4("Unable to decode params", error); // don't merge invalid params
 
 
       return;
@@ -1539,26 +1559,26 @@ function _pushCookie() {
     try {
       existingCookie = JSON.parse(b64decode(Cookies.get("_saasquatch")));
 
-      _log$3("existing cookie", existingCookie);
+      _log$4("existing cookie", existingCookie);
     } catch (error) {
-      _log$3("Unable to retrieve cookie", error);
+      _log$4("Unable to retrieve cookie", error);
     } // don't merge if there's no existing object
 
 
     try {
       var domain = getTopDomain();
 
-      _log$3("domain retrieved:", domain);
+      _log$4("domain retrieved:", domain);
 
       if (existingCookie) {
         var newCookie = deepMerge(existingCookie, paramsJSON);
         reEncodedCookie = b64encode(JSON.stringify(newCookie));
 
-        _log$3("cookie to store:", newCookie);
+        _log$4("cookie to store:", newCookie);
       } else {
         reEncodedCookie = b64encode(JSON.stringify(paramsJSON));
 
-        _log$3("cookie to store:", paramsJSON);
+        _log$4("cookie to store:", paramsJSON);
       }
 
       Cookies.set("_saasquatch", reEncodedCookie, {
@@ -1569,14 +1589,14 @@ function _pushCookie() {
         path: "/"
       });
     } catch (error) {
-      _log$3("Unable to set cookie", error);
+      _log$4("Unable to set cookie", error);
     }
   }
 }
 
 /** @hidden */
 
-var _log$2 = debug("squatch-js");
+var _log$3 = debug("squatch-js");
 
 function _getAutoConfig(configIn) {
   var queryString = window.location.search;
@@ -1584,7 +1604,7 @@ function _getAutoConfig(configIn) {
   var refParam = urlParams.get("_saasquatchExtra") || "";
 
   if (!refParam) {
-    _log$2("No _saasquatchExtra param");
+    _log$3("No _saasquatchExtra param");
 
     return;
   }
@@ -1594,7 +1614,7 @@ function _getAutoConfig(configIn) {
   try {
     raw = JSON.parse(b64decode(refParam));
   } catch (e) {
-    _log$2("Unable to decode _saasquatchExtra config");
+    _log$3("Unable to decode _saasquatchExtra config");
 
     return;
   }
@@ -1606,7 +1626,7 @@ function _getAutoConfig(configIn) {
   } = convertExtraToConfig(raw);
 
   if (!domain || !tenantAlias || !widgetConfig) {
-    _log$2("_saasquatchExtra did not have an expected structure");
+    _log$3("_saasquatchExtra did not have an expected structure");
 
     return undefined;
   }
@@ -1649,7 +1669,7 @@ function convertExtraToConfig(obj) {
   };
 }
 
-var _log$1 = debug("squatch-js:decodeJwt");
+var _log$2 = debug("squatch-js:decodeJwt");
 
 function decodeUserJwt(tokenStr) {
   try {
@@ -1660,15 +1680,69 @@ function decodeUserJwt(tokenStr) {
     var jsonStr = b64decode(base64Url);
     return (_JSON$parse = JSON.parse(jsonStr)) == null ? void 0 : _JSON$parse.user;
   } catch (e) {
-    _log$1(e);
+    _log$2(e);
 
     return null;
   }
 }
 
-debug$1("sqh:DeclarativeWidget");
+var _log$1 = debug$1("squatch-js:DeclarativeWidget");
+/**
+ * Abstract class for building web-components that render SaaSquatch widgets to the DOM.
+ * @abstract
+ * @example
+ * class TestWidgetElement extends DeclarativeWidget {}
+ * const testWidget = new TestWidgetElement()
+ * testWidget.widgetType = 'w/widget-type'
+ * testWidget.type = 'EMBED'
+ * testWidget.renderWidget()
+ */
+
 
 class DeclarativeWidget extends HTMLElement {
+  /**
+   * Configuration overrides
+   * @default window.squatchConfig
+   */
+
+  /**
+   * Signed JWT containing user information
+   * @default window.squatchToken
+   */
+
+  /**
+   * Tenant alias of SaaSquatch tenant
+   * @default window.squatchTenant
+   */
+
+  /**
+   * widgetType of widget to load
+   */
+
+  /**
+   * Locale to render the widget in
+   */
+
+  /**
+   * Instance of {@link WidgetApi}
+   */
+
+  /**
+   * Instance of {@link AnalyticsApi}
+   */
+
+  /**
+   * Instance of {@link EmbedWidget} or {@link PopupWidget}
+   */
+
+  /**
+   * Determines whether to render the widget as an embedding widget or popup widget.
+   */
+
+  /**
+   * Container element to contain the widget iframe
+   * @default this
+   */
   constructor() {
     super();
     this.config = void 0;
@@ -1678,8 +1752,8 @@ class DeclarativeWidget extends HTMLElement {
     this.locale = void 0;
     this.widgetApi = void 0;
     this.analyticsApi = void 0;
-    this.type = void 0;
     this.widgetInstance = void 0;
+    this.type = void 0;
     this.container = void 0;
     this.element = void 0;
 
@@ -1691,16 +1765,17 @@ class DeclarativeWidget extends HTMLElement {
         content: template,
         context: {
           type: config.type,
+          user: config.user,
+          container: this.container || this,
           engagementMedium: this.type
         },
         type: this.widgetType,
         domain: ((_this$config = this.config) == null ? void 0 : _this$config.domain) || DEFAULT_DOMAIN,
-        npmCdn: DEFAULT_NPM_CDN,
-        container: this.container || this
+        npmCdn: DEFAULT_NPM_CDN
       };
 
       if (this.type === "EMBED") {
-        return new EmbedWidget(params);
+        return new EmbedWidget(params, params.context.container);
       } else {
         return new PopupWidget(params, this.firstChild ? null : undefined);
       }
@@ -1713,16 +1788,16 @@ class DeclarativeWidget extends HTMLElement {
         api: this.widgetApi,
         content: "error",
         context: {
-          type: "error"
+          type: "error",
+          container: this.container || this
         },
         type: "ERROR_WIDGET",
         domain: ((_this$config2 = this.config) == null ? void 0 : _this$config2.domain) || DEFAULT_DOMAIN,
-        npmCdn: DEFAULT_NPM_CDN,
-        container: this.container || this
+        npmCdn: DEFAULT_NPM_CDN
       };
 
       if (this.type === "EMBED") {
-        return new EmbedWidget(params);
+        return new EmbedWidget(params, params.context.container);
       } else {
         return new PopupWidget(params, this.firstChild ? null : undefined);
       }
@@ -1738,13 +1813,12 @@ class DeclarativeWidget extends HTMLElement {
     this.token = window.squatchToken;
     this.tenant = window.squatchTenant;
     this.container = this;
-    this.locale = validateLocale(navigator.language.replace(/\-/g, "_"));
   }
 
   _setupApis(config) {
     var _this$config3, _this$config4;
 
-    if (!this.tenant) throw new Error("Requires tenantAlias");
+    if (!this.tenant) throw new Error("tenantAlias not provided");
     this.widgetApi = new WidgetApi({
       tenantAlias: (config == null ? void 0 : config.tenantAlias) || this.tenant,
       domain: (config == null ? void 0 : config.domain) || ((_this$config3 = this.config) == null ? void 0 : _this$config3.domain) || DEFAULT_DOMAIN
@@ -1755,16 +1829,14 @@ class DeclarativeWidget extends HTMLElement {
   }
 
   async renderPasswordlessVariant() {
-    var _configs$widgetConfig, _configs$widgetConfig2, _configs$widgetConfig3;
-
-    var configs = _getAutoConfig();
+    this._setupApis();
 
-    this._setupApis(configs == null ? void 0 : configs.squatchConfig);
+    _log$1("Rendering as an Instant Access widget");
 
     return await this.widgetApi.render({
-      engagementMedium: (configs == null ? void 0 : (_configs$widgetConfig = configs.widgetConfig) == null ? void 0 : _configs$widgetConfig.engagementMedium) || this.type,
-      widgetType: (configs == null ? void 0 : (_configs$widgetConfig2 = configs.widgetConfig) == null ? void 0 : _configs$widgetConfig2.widgetType) || this.widgetType,
-      locale: (configs == null ? void 0 : (_configs$widgetConfig3 = configs.widgetConfig) == null ? void 0 : _configs$widgetConfig3.locale) || this.locale
+      engagementMedium: this.type,
+      widgetType: this.widgetType,
+      locale: this.locale
     }).then(res => this._setWidget(res.template, {
       type: "passwordless"
     })).catch(this.setErrorWidget);
@@ -1774,7 +1846,13 @@ class DeclarativeWidget extends HTMLElement {
     this._setupApis();
 
     var userObj = decodeUserJwt(this.token);
-    if (!userObj) throw new Error("Could not load user information from jwt");
+
+    if (!userObj) {
+      return this.setErrorWidget(Error("No user object in token."));
+    }
+
+    _log$1("Rendering as a Verified widget");
+
     var widgetInstance = await this.widgetApi.upsertUser({
       user: userObj,
       locale: this.locale,
@@ -1782,11 +1860,17 @@ class DeclarativeWidget extends HTMLElement {
       widgetType: this.widgetType,
       jwt: this.token
     }).then(res => this._setWidget(res.template, {
-      type: "upsert"
+      type: "upsert",
+      user: userObj
     })).catch(this.setErrorWidget);
     return widgetInstance;
   }
 
+  /**
+   * Fetches widget content from SaaSquatch and builds a Widget instance to support rendering the widget in the DOM.
+   * @returns Instance of either {@link EmbedWidget} or {@link PopupWidget} depending on `this.type`
+   * @throws Throws an Error if `widgetType` is undefined
+   */
   async getWidgetInstance() {
     var widgetInstance;
     this.widgetType = this.getAttribute("widget") || undefined;
@@ -1799,15 +1883,23 @@ class DeclarativeWidget extends HTMLElement {
       widgetInstance = await this.renderUserUpsertVariant();
     }
 
-    if (!widgetInstance) throw new Error("Could not create widget.");
     this.widgetInstance = widgetInstance;
     return widgetInstance;
   }
+  /**
+   * Calls {@link getWidgetInstance} to build the Widget instance and loads the widget iframe into the DOM.
+   */
+
 
   async renderWidget() {
     await this.getWidgetInstance();
     await this.widgetInstance.load();
   }
+  /**
+   * Builds a Widget instance for the default error widget.
+   * @returns Instance of either {@link EmbedWidget} or {@link PopupWidget} depending on `this.type`
+   */
+
 
   /**
    * Calls `open` method of `widgetInstance`
@@ -1830,9 +1922,25 @@ class DeclarativeWidget extends HTMLElement {
 
 }
 
+/**
+ * Base class for `squatch-embed` web-component
+ * @extends {DeclarativeWidget}
+ * @class
+ * @example
+ * window.createCustomElement('squatch-embed', DeclarativeEmbedWidget)
+ * const widget = document.querySelector('squatch-embed') as DeclarativeEmbedWidget
+ * widget.open()
+ * widget.close()
+ * widget.reload()
+ */
+
 class DeclarativeEmbedWidget extends DeclarativeWidget {
   constructor() {
     super();
+    /**
+     * @static
+     */
+
     this.type = "EMBED";
   }
 
@@ -1861,14 +1969,29 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
   }
 
 }
+/**
+ * Base class for `squatch-popup` web-component
+ * @extends {DeclarativeWidget}
+ * @class
+ * @example
+ * window.createCustomElement('squatch-popup', DeclarativePopupWidget)
+ * const widget = document.querySelector('squatch-popup') as DeclarativePopupWidget
+ * widget.open()
+ * widget.close()
+ * widget.reload()
+ */
+
 class DeclarativePopupWidget extends DeclarativeWidget {
   constructor() {
     super();
+    /**
+     * @static
+     */
+
     this.type = "POPUP";
     this.addEventListener("click", e => {
-      e.stopPropagation(); // SQUATCH-POPUP target means something in the shadowDOM was clicked (i.e. the dialog element)
-
-      if (e.target.tagName !== "SQUATCH-POPUP") this.open();
+      e.stopPropagation();
+      this.open();
     });
   }
 
@@ -1888,6 +2011,7 @@ class DeclarativePopupWidget extends DeclarativeWidget {
   }
 
   async connectedCallback() {
+    this.container = this.getAttribute("container") || this;
     await this.renderWidget();
     if (this.getAttribute("open") !== null) this.open();
   }
@@ -1922,6 +2046,10 @@ var _events = null;
  * Read the {@link WidgetApi} docs.
  *
  * @returns WidgetApi static instance
+ * @example
+ * squatch.api().render({ ... })
+ * squatch.api().upsertUser({ ... })
+ * squatch.api().squatchReferralCookie()
  */
 
 function api() {
@@ -1934,6 +2062,10 @@ function api() {
  * Read the {@link Widgets} docs.
  *
  * @returns static instance
+ * @example
+ * squatch.widgets().render({ widgetType: "w/widget-type" })
+ * squatch.widgets().upsertUser({ user: { ... }, widgetType: "w/widget-type" })
+ * squatch.widgets().autofill(".referral-code")
  */
 
 function widgets() {
@@ -1946,6 +2078,9 @@ function widgets() {
  * Read the {@link EventsApi} docs.
  *
  * @returns EventsApi static instance
+ *
+ * @example
+ * squatch.events().track({ ... })
  */
 
 function events() {
@@ -1954,6 +2089,13 @@ function events() {
 }
 /**
  * Entry-point for high level API to render a widget using the instance of {@link Widgets} created when you call {@link #init init}.
+ *
+ * Read the {@link Widgets.render} docs.
+ *
+ * @example
+ * squatch.widget().then(res => {
+ *   const widget = res.widget
+ * }).catch(e => console.error("Did not render widget:", e))
  */
 
 function widget(widgetConfig) {
@@ -1963,6 +2105,9 @@ function widget(widgetConfig) {
 }
 /**
  * Extracts widget configuration from `_saasquatchExtra` UTM parameter. Initialises `squatch` and renders the widget as a {@link PopupWidget} via static instanct of {@link Widgets}.
+ *
+ * Called by default on startup via the loader script.
+ * @private
  */
 
 function _auto(configIn) {
@@ -1989,7 +2134,9 @@ function _auto(configIn) {
  * @param config Configuration details
  *
  * @example
- * squatch.init({tenantAlias:'test_basbtabstq51v'});
+ * squatch.init({
+ *   tenantAlias:'test_basbtabstq51v',
+ * });
  */
 
 function init(configIn) {
@@ -1998,6 +2145,8 @@ function init(configIn) {
 
   if (config.tenantAlias.match("^test") || config.debug) {
     debug.enable("squatch-js*");
+  } else {
+    debug.disable();
   }
 
   _log("initializing ...");
@@ -2034,6 +2183,10 @@ function ready(fn) {
  *
  * @param {string} selector Element class/id
  * @returns {void}
+ *
+ * @example
+ * squatch.autofill("input.referral-code")
+ * squatch.autofill("input#referral-code")
  */
 
 function autofill(selector) {