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

package/CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.7.0] - 2025-05-14
+
+### Changed
+
+- Updated package to use `vite` for the build instead of `webpack`
+  - Fixes issue where `define` in webpack's UMD build could have conflicts within certain environments
+
 ## [2.6.3] - 2024-06-10
 
 ### Fixed
@@ -363,7 +370,8 @@ No release notes.
 
 No release notes.
 
-[unreleased]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.6.3...HEAD
+[unreleased]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.7.0...HEAD
+[2.7.0]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.6.3...@saasquatch%2Fsquatch-js@2.7.0
 [2.6.3]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.6.2...@saasquatch%2Fsquatch-js@2.6.3
 [2.6.2]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.6.1...@saasquatch%2Fsquatch-js@2.6.2
 [2.6.1]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.6.0...@saasquatch%2Fsquatch-js@2.6.1

package/dist/squatch.cjs.js

@@ -756,6 +756,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.
@@ -1064,28 +1099,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) {
@@ -1095,7 +1108,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) {
@@ -1103,9 +1116,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);
@@ -1228,11 +1247,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();
@@ -1861,16 +1885,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,
@@ -1938,7 +1963,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();
@@ -1947,15 +1972,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;
   }
   /**