@active-reach/web-sdk 1.43.4 → 1.43.5

package/dist/inapp/renderers/hero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../src/inapp/renderers/hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA2D7C;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,GAAG,OAAO,CA2JjF"}
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../src/inapp/renderers/hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiF7C;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,GAAG,OAAO,CAmLjF"}

package/dist/index.js

@@ -4028,14 +4028,20 @@ function safeColor(c, fallback) {
   return c && HEX.test(c) ? c : fallback;
 }
 const ASPECT = { "16:9": "16 / 9", "4:3": "4 / 3", "21:9": "21 / 9" };
+const HERO_DESKTOP_RATIO = "8 / 3";
+const HERO_PHONE_RATIO = "1 / 1";
+const HERO_PHONE_MAX_WIDTH_PX = 767;
 function _injectHeroResponsiveCss() {
   if (typeof document === "undefined") return;
   if (document.getElementById("aegis-hero-style")) return;
   const style = document.createElement("style");
   style.id = "aegis-hero-style";
-  style.textContent = ".aegis-hero-root{border-radius:16px;}@media (min-width:768px){.aegis-hero-root{border-radius:0;min-height:45vh;max-height:70vh;}}";
+  style.textContent = `.aegis-hero-root{border-radius:16px;}.aegis-hero-auto{min-height:300px;}@media (max-width:${HERO_PHONE_MAX_WIDTH_PX}px){.aegis-hero-auto.aegis-hero-phone-square{min-height:0;aspect-ratio:${HERO_PHONE_RATIO};}}@media (min-width:${HERO_PHONE_MAX_WIDTH_PX + 1}px){.aegis-hero-root{border-radius:0;min-height:0;max-height:70vh;aspect-ratio:${HERO_DESKTOP_RATIO} !important;}}`;
   document.head.appendChild(style);
 }
+function srcsetUrl(url) {
+  return url.replace(/\s/g, "%20").replace(/,/g, "%2C");
+}
 function cardHeadline(c) {
   return c.headline ?? c.title ?? "";
 }
@@ -4084,9 +4090,13 @@ function renderHeroInline(ctx, target) {
     return true;
   }
   _injectHeroResponsiveCss();
+  const explicitRatio = chrome.aspect_ratio ? ASPECT[chrome.aspect_ratio] : void 0;
+  const hasPhoneImage = cards.some(
+    (c) => !c.video_url && c.media_type !== "video" && !!c.image_url_mobile && !!sanitizeUrl(c.image_url_mobile)
+  );
   const root = document.createElement("div");
-  root.className = "aegis-hero-root";
-  root.style.cssText = `position:relative;width:100%;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,0.06);${chrome.aspect_ratio && ASPECT[chrome.aspect_ratio] ? `aspect-ratio:${ASPECT[chrome.aspect_ratio]};` : "min-height:300px;"}`;
+  root.className = explicitRatio ? "aegis-hero-root" : `aegis-hero-root aegis-hero-auto${hasPhoneImage ? " aegis-hero-phone-square" : ""}`;
+  root.style.cssText = `position:relative;width:100%;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,0.06);${explicitRatio ? `aspect-ratio:${explicitRatio};` : ""}`;
   root.setAttribute("data-campaign-id", campaign.id);
   const track = document.createElement("div");
   track.style.cssText = "display:flex;height:100%;width:100%;transition:transform 0.5s ease;";
@@ -4099,7 +4109,7 @@ function renderHeroInline(ctx, target) {
     slide.style.cssText = "position:relative;flex:0 0 100%;width:100%;height:100%;min-height:inherit;background:#f1f5f9;";
     const videoUrl = c.video_url ? sanitizeUrl(c.video_url) ?? "" : "";
     const isVideo = !!videoUrl || c.media_type === "video";
-    const mediaUrl = isVideo ? videoUrl || sanitizeUrl(c.media_url ?? "") : sanitizeUrl(c.image_url ?? c.media_url ?? "");
+    const mediaUrl = isVideo ? videoUrl || sanitizeUrl(c.media_url ?? "") : sanitizeUrl(c.image_url ?? c.media_url ?? "") ?? (c.image_url_mobile ? sanitizeUrl(c.image_url_mobile) : null);
     if (mediaUrl) {
       if (isVideo) {
         const v = document.createElement("video");
@@ -4111,9 +4121,21 @@ function renderHeroInline(ctx, target) {
         v.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:cover;";
         slide.appendChild(v);
       } else {
-        const img = document.createElement("div");
-        img.style.cssText = `position:absolute;inset:0;background:url("${mediaUrl}") center/cover no-repeat;`;
-        slide.appendChild(img);
+        const picture = document.createElement("picture");
+        const phoneUrl = c.image_url_mobile ? sanitizeUrl(c.image_url_mobile) : null;
+        if (phoneUrl) {
+          const source = document.createElement("source");
+          source.setAttribute("media", `(max-width:${HERO_PHONE_MAX_WIDTH_PX}px)`);
+          source.setAttribute("srcset", srcsetUrl(phoneUrl));
+          picture.appendChild(source);
+        }
+        const img = document.createElement("img");
+        img.src = mediaUrl;
+        img.alt = "";
+        img.decoding = "async";
+        img.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;";
+        picture.appendChild(img);
+        slide.appendChild(picture);
       }
     }
     if (overlayCss) {
@@ -15055,7 +15077,7 @@ const _AegisMessageRuntime = class _AegisMessageRuntime {
     this.initialized = false;
     this.armedInAppTriggers = /* @__PURE__ */ new Set();
     {
-      const v = "1.43.4";
+      const v = "1.43.5";
       try {
         globalThis.__AEGIS_SDK_VERSION__ = v;
       } catch {