@returningai/widget-sdk 1.6.0 → 1.6.2

package/dist/rai-banner.js

@@ -1408,6 +1408,7 @@ function sanitizeBannerHtml(html2) {
   });
 }
 function resolveCssToken(token) {
+  const normalizedToken = token.startsWith("--") ? token : `--${token}`;
   const candidates = [
     document.documentElement,
     document.body,
@@ -1429,23 +1430,28 @@ function resolveCssToken(token) {
     )
   ].filter(Boolean);
   for (const node of candidates) {
-    const value = getComputedStyle(node).getPropertyValue(token).trim();
+    const value = getComputedStyle(node).getPropertyValue(normalizedToken).trim();
+    if (value) return value;
+  }
+  for (const node of Array.from(document.querySelectorAll("*"))) {
+    const value = getComputedStyle(node).getPropertyValue(normalizedToken).trim();
     if (value) return value;
   }
   return void 0;
 }
 const safeColor = (v) => {
   if (!v) return void 0;
-  if (/^(#|rgb|hsl)/i.test(v)) return v;
-  if (/^--[a-z0-9-]+$/i.test(v)) {
-    const resolved = resolveCssToken(v);
-    return resolved || `var(${v})`;
+  const value = v.trim();
+  if (/^(#|rgb|hsl)/i.test(value)) return value;
+  if (/^(--)?[a-z0-9-]+$/i.test(value)) {
+    const resolved = resolveCssToken(value);
+    return resolved;
   }
-  const varMatch = v.match(/^var\((--[a-z0-9-]+)\)$/i);
+  const varMatch = value.match(/^var\((--[a-z0-9-]+)\)$/i);
   if (varMatch) {
     const token = varMatch[1];
     const resolved = resolveCssToken(token);
-    return resolved || v;
+    return resolved;
   }
   return void 0;
 };
@@ -1471,6 +1477,11 @@ function imageAlign(pos) {
   if (pos === "right" || pos === "bottom") return "flex-end";
   return "center";
 }
+function imageObjectPosition(horizontal, vertical) {
+  const x = horizontal === "left" ? "left" : horizontal === "right" ? "right" : "center";
+  const y = vertical === "top" ? "top" : vertical === "bottom" ? "bottom" : "center";
+  return `${x} ${y}`;
+}
 function getCtaStyleValue(banner, keys) {
   var _a;
   const sources = [(_a = banner.cta) == null ? void 0 : _a.style, banner.cta, banner.ctaStyle];
@@ -1485,19 +1496,26 @@ function getCtaStyleValue(banner, keys) {
 function styleRichText(container) {
   container.querySelectorAll("p").forEach((p) => {
     p.style.margin = "0";
+    p.style.whiteSpace = "normal";
+    p.style.overflowWrap = "anywhere";
   });
   container.querySelectorAll("strong").forEach((strong) => {
     strong.style.fontWeight = "700";
+    strong.style.whiteSpace = "normal";
   });
   container.querySelectorAll("em").forEach((em) => {
     em.style.fontStyle = "italic";
+    em.style.whiteSpace = "normal";
   });
   container.querySelectorAll("u").forEach((u) => {
     u.style.textDecoration = "underline";
+    u.style.whiteSpace = "normal";
   });
   container.querySelectorAll("a").forEach((a) => {
     a.style.color = "#3b82f6";
     a.style.textDecoration = "underline";
+    a.style.whiteSpace = "normal";
+    a.style.overflowWrap = "anywhere";
     if (a.getAttribute("target") === "_blank") {
       a.setAttribute("rel", "noopener noreferrer");
     }
@@ -1507,8 +1525,21 @@ function styleRichText(container) {
     img.style.height = "auto";
   });
 }
+function readTextAlign(container) {
+  const aligned = container.querySelector(
+    '[style*="text-align"]'
+  );
+  const value = ((aligned == null ? void 0 : aligned.style.textAlign) || container.style.textAlign || "").toLowerCase().trim();
+  if (value === "center" || value === "right" || value === "justify") return value;
+  return "left";
+}
+function justifyFromTextAlign(align) {
+  if (align === "center") return "center";
+  if (align === "right") return "flex-end";
+  return "flex-start";
+}
 function renderBanner(banner, handlers) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const placement = banner.placement || {};
   const mode = placement.mode || "overlay";
   const position = placement.position || "top";
@@ -1522,20 +1553,21 @@ function renderBanner(banner, handlers) {
   const imageVertical = imageAlign((_d = banner.image) == null ? void 0 : _d.verticalAlignment);
   const imageHorizontalPosition = ((_e = banner.image) == null ? void 0 : _e.horizontalAlignment) || "center";
   const imageVerticalPosition = ((_f = banner.image) == null ? void 0 : _f.verticalAlignment) || "center";
+  const closeColor = imageBanner ? "#ffffff" : color;
   const root = el("div", {
     boxSizing: "border-box",
     fontFamily: "Roboto, sans-serif",
-    fontSize: "12px",
+    fontSize: "14px",
     lineHeight: "1.35",
     background: bg,
     color,
     borderRadius: isCard && !imageBanner ? "6px" : "0",
     boxShadow: isCard && !imageBanner ? "0 8px 24px rgba(0,0,0,0.22)" : "none",
-    padding: imageBanner ? "0" : isCard ? "12px 24px" : "8px 16px",
+    padding: imageBanner ? "0" : isCard ? "12px 42px 12px 24px" : "8px 42px 8px 16px",
     display: "flex",
     alignItems: imageBanner ? imageVertical : "flex-start",
     justifyContent: "center",
-    gap: imageBanner ? "4px" : "16px"
+    gap: imageBanner ? "0" : "16px"
   });
   root.setAttribute("role", isCard ? "dialog" : "region");
   root.setAttribute("aria-label", "community banner");
@@ -1544,12 +1576,12 @@ function renderBanner(banner, handlers) {
     Object.assign(root.style, {
       position: "fixed",
       left: "50%",
-      width: imageBanner ? "fit-content" : "fit-content",
-      maxWidth: imageBanner ? "min(85vw, 700px)" : "min(700px, 80vw)",
+      width: "fit-content",
+      maxWidth: imageBanner ? "70vw" : "min(700px, 80vw)",
       height: "auto",
       minHeight: imageBanner ? "0" : "80px",
-      maxHeight: "calc(100vh - 300px)",
-      overflowY: "auto",
+      maxHeight: imageBanner ? "70vh" : "calc(100vh - 300px)",
+      overflowY: imageBanner ? "visible" : "auto",
       zIndex
     });
     if (imageBanner) {
@@ -1590,7 +1622,7 @@ function renderBanner(banner, handlers) {
   }
   const contentWrap = el("div", {
     display: "flex",
-    width: imageBanner ? "auto" : "100%",
+    width: imageBanner || isCard ? "auto" : "100%",
     maxWidth: "100%",
     flexDirection: "column",
     gap: imageBanner ? "0" : "12px",
@@ -1598,16 +1630,19 @@ function renderBanner(banner, handlers) {
   });
   const contentRow = el("div", {
     display: "flex",
-    width: "100%",
+    width: imageBanner || isCard ? "auto" : "100%",
     justifyContent: imageBanner ? imageHorizontal : "space-between",
     alignItems: imageBanner ? imageVertical : "flex-start",
     gap: "12px"
   });
   const content = el("div", {
-    width: imageBanner ? "auto" : "100%",
-    maxWidth: "100%",
+    width: imageBanner || isCard ? "auto" : "100%",
+    maxWidth: imageBanner ? "70vw" : isCard ? "calc(min(700px, 80vw) - 66px)" : "100%",
     overflow: "hidden",
-    wordBreak: "break-word"
+    wordBreak: "normal",
+    overflowWrap: "anywhere",
+    whiteSpace: "normal",
+    color
   });
   const imageUrl = ((_g = banner.image) == null ? void 0 : _g.desktopUrl) || ((_h = banner.image) == null ? void 0 : _h.mobileUrl);
   if (imageBanner && imageUrl) {
@@ -1617,12 +1652,17 @@ function renderBanner(banner, handlers) {
       "img",
       {
         display: "block",
-        maxWidth: "100%",
-        maxHeight: "240px",
+        maxWidth: "70vw",
+        maxHeight: "70vh",
+        width: "auto",
         height: "auto",
         objectFit: "contain",
+        objectPosition: imageObjectPosition(
+          (_k = banner.image) == null ? void 0 : _k.horizontalAlignment,
+          (_l = banner.image) == null ? void 0 : _l.verticalAlignment
+        ),
         cursor: imageLinkUrl ? "pointer" : "",
-        borderRadius: ((_k = banner.image) == null ? void 0 : _k.cornerRadius) === "rounded" ? "8px" : "0"
+        borderRadius: ((_m = banner.image) == null ? void 0 : _m.cornerRadius) === "rounded" ? "8px" : "0"
       },
       { src: imageUrl, alt: banner.title || "banner" }
     );
@@ -1639,23 +1679,29 @@ function renderBanner(banner, handlers) {
   } else {
     content.innerHTML = sanitizeBannerHtml(banner.text);
     styleRichText(content);
+    const textAlign = readTextAlign(content);
+    content.style.textAlign = textAlign;
+    if (isCard) {
+      contentRow.style.justifyContent = justifyFromTextAlign(textAlign);
+    }
   }
-  if (!imageBanner && ((_l = banner.cta) == null ? void 0 : _l.enabled)) {
+  if (!imageBanner && ((_n = banner.cta) == null ? void 0 : _n.enabled)) {
     const ctaBg = safeColor(
       getCtaStyleValue(banner, ["backgroundColor", "buttonColor", "aColor"])
-    ) || safeColor((_m = banner.style) == null ? void 0 : _m.backgroundColor) || "#2f6df6";
+    ) || "#2f6df6";
     const ctaColor = safeColor(getCtaStyleValue(banner, ["textColor", "color"])) || "#ffffff";
     const btn = el("button", {
       cursor: "pointer",
       border: "none",
-      borderRadius: "4px",
+      borderRadius: "6px",
       height: "36px",
       minHeight: "36px",
       padding: "0 16px",
+      fontFamily: "Roboto, sans-serif",
       fontSize: "12px",
       fontWeight: "600",
       lineHeight: "20px",
-      background: ctaBg,
+      backgroundColor: ctaBg,
       color: ctaColor,
       boxSizing: "border-box",
       display: "inline-flex",
@@ -1694,7 +1740,10 @@ function renderBanner(banner, handlers) {
   }
   root.appendChild(contentWrap);
   const close = el("button", {
-    marginTop: imageBanner ? "0" : "8px",
+    position: isCard ? "absolute" : "",
+    top: isCard ? imageBanner ? "16px" : "12px" : "",
+    right: isCard ? imageBanner ? "16px" : "12px" : "",
+    marginTop: isCard ? "0" : "8px",
     width: "20px",
     minWidth: "20px",
     height: "20px",
@@ -1702,7 +1751,7 @@ function renderBanner(banner, handlers) {
     border: "none",
     borderRadius: "50%",
     background: "rgba(0,0,0,0.25)",
-    color,
+    color: closeColor,
     fontSize: "16px",
     lineHeight: "1",
     display: "flex",
@@ -1878,7 +1927,7 @@ class BannerRuntime extends HTMLElement {
     this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
   }
 }
-console.log(`[rai-banner] v${"1.6.0"}`);
+console.log(`[rai-banner] v${"1.6.2"}`);
 if (typeof customElements !== "undefined" && !customElements.get("rai-banner")) {
   customElements.define("rai-banner", BannerRuntime);
 }