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

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/squatch.cjs.js

@@ -874,7 +874,7 @@ class Widget {
       );
     return element;
   }
-  _createFrame() {
+  _createFrame(options) {
     const frame = document.createElement("iframe");
     frame["squatchJsApi"] = this;
     frame.id = "squatchFrame";
@@ -885,6 +885,11 @@ class Widget {
       "style",
       "border: 0; background-color: none; width: 1px; min-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;
+    if ((options == null ? void 0 : options.maxWidth) || (options == null ? void 0 : options.minWidth)) {
+      frame.style.width = "100%";
+    }
     return frame;
   }
   _findFrame() {
@@ -1109,19 +1114,18 @@ class EmbedWidget extends Widget {
   }
   async load() {
     var _a2, _b, _c, _d, _e;
-    const frame = this._createFrame();
+    const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
+    console.log({ 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 = (_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.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 (((_e = element.shadowRoot.lastChild) == null ? void 0 : _e.nodeName) === "IFRAME") {
@@ -1251,7 +1255,7 @@ class PopupWidget extends Widget {
     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 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(