@saasquatch/squatch-js 2.8.0-3 → 2.8.0-5

package/CHANGELOG.md

@@ -7,6 +7,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.8.0] - 2025-10-22
+
+### Added
+
+- Added support for branding configuration to control widget sizing
+  - Embedded widgets now support configurable `minWidth` and `maxWidth` through `brandingConfig.widgetSize.embeddedWidgets`
+  - Popup widgets now support configurable `minWidth` and `maxWidth` through `brandingConfig.widgetSize.popupWidgets`
+  - Added new `WidgetValueConfig` interface to pass branding configuration to widgets
+  - Added `widgetConfig` parameter to `UpsertWidgetContext` and `BaseWidgetContext` types
+  - Created `formatWidth` utility function to handle width formatting with px and % units
+
+### Changed
+
+- Updated widget rendering flow to include branding configuration from API responses
+- Modified `EmbedWidget` and `PopupWidget` to apply dynamic sizing based on branding configuration
+- Enhanced declarative widgets to support branding configuration through the widget API
+
 ## [2.7.0] - 2025-05-14
 
 ### Changed
@@ -370,7 +387,8 @@ No release notes.
 
 No release notes.
 
-[unreleased]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.7.0...HEAD
+[unreleased]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.8.0...HEAD
+[2.8.0]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.7.0...@saasquatch%2Fsquatch-js@2.8.0
 [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

package/dist/async.d.ts

@@ -14,7 +14,6 @@ declare global {
         squatchConfig: Omit<ConfigOptions, "tenantAlias">;
         impactToken: string;
         impactConfig: Omit<ConfigOptions, "tenantAlias">;
-        SquatchBrandingConfig: any;
     }
 }
 /** @hidden */

package/dist/squatch.cjs.js

@@ -874,11 +874,13 @@ class Widget {
       );
     return element;
   }
-  _createFrame() {
+  _createFrame(options) {
     const frame = document.createElement("iframe");
     frame["squatchJsApi"] = this;
     frame.id = "squatchFrame";
     frame.width = "100%";
+    if (options == null ? void 0 : options.minWidth) frame.style.minWidth = options.minWidth;
+    if (options == null ? void 0 : options.maxWidth) frame.style.maxWidth = options.maxWidth;
     frame.src = "about:blank";
     frame.scrolling = "no";
     frame.setAttribute(
@@ -1108,23 +1110,21 @@ class EmbedWidget extends Widget {
     if (container) this.container = container;
   }
   async load() {
-    var _a2, _b, _c;
-    const frame = this._createFrame();
+    var _a2, _b, _c, _d, _e;
+    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.embeddedWidgets;
+    const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "";
+    const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "";
+    const frame = this._createFrame({ minWidth, maxWidth });
     const element = this._findElement();
-    if ((_a2 = this.context) == null ? void 0 : _a2.container) {
+    if ((_d = this.context) == null ? void 0 : _d.container) {
       element.style.visibility = "hidden";
       element.style.height = "0";
       element.style["overflow-y"] = "hidden";
     }
-    const brandingConfig = window.SquatchBrandingConfig;
-    const sizes = (_b = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _b.embeddedWidgets;
-    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 (((_c = element.shadowRoot.lastChild) == null ? void 0 : _c.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);
@@ -1247,11 +1247,11 @@ class PopupWidget extends Widget {
     }
   }
   _createPopupDialog() {
-    var _a2;
+    var _a2, _b, _c;
     const dialog = document.createElement("dialog");
-    const brandingConfig = window.SquatchBrandingConfig;
-    const sizes = (_a2 = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _a2.popupWidgets;
-    const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "100%";
+    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) : "auto";
     const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "500px";
     dialog.id = this.id;
     dialog.setAttribute(
@@ -1423,7 +1423,12 @@ class Widgets {
           user: clean.user,
           engagementMedium: config.engagementMedium,
           container: config.container,
-          trigger: config.trigger
+          trigger: config.trigger,
+          widgetConfig: {
+            values: {
+              brandingConfig: response == null ? void 0 : response.brandingConfig
+            }
+          }
         }),
         user: response.user
       };
@@ -1460,7 +1465,12 @@ class Widgets {
           type: "passwordless",
           engagementMedium: clean.engagementMedium,
           container: clean.container,
-          trigger: clean.trigger
+          trigger: clean.trigger,
+          widgetConfig: {
+            values: {
+              brandingConfig: response == null ? void 0 : response.brandingConfig
+            }
+          }
         }),
         user: response.user
       };
@@ -1887,7 +1897,6 @@ class DeclarativeWidget extends HTMLElement {
     __publicField(this, "loaded");
     __publicField(this, "_setWidget", (res, config) => {
       var _a2;
-      console.log({ res });
       const params = {
         api: this.widgetApi,
         content: res.template,
@@ -1895,7 +1904,8 @@ class DeclarativeWidget extends HTMLElement {
           type: config.type,
           user: config.user,
           container: this.container || void 0,
-          engagementMedium: this.type
+          engagementMedium: this.type,
+          widgetConfig: res.widgetConfig
         },
         type: this.widgetType,
         domain: ((_a2 = this.config) == null ? void 0 : _a2.domain) || DEFAULT_DOMAIN,