@braze/web-sdk 5.9.0 → 6.0.0

package/src/InAppMessage/display/in-app-message-to-html.js

@@ -2,189 +2,195 @@ import {
   addPassiveEventListener as J,
   buildSvg as oe,
   detectSwipe as H,
-  DIRECTIONS as R,
+  DIRECTIONS as K,
 } from "../../util/dom-utils.js";
 import { createCloseButton as T } from "../../util/component-utils.js";
-import { isTransparent as ae, toRgba as le } from "../../util/color-utils.js";
+import { isTransparent as te, toRgba as ae } from "../../util/color-utils.js";
 import FullScreenMessage from "../models/full-screen-message.js";
 import HtmlMessage from "../models/html-message.js";
 import InAppMessage from "../models/in-app-message.js";
 import ModalMessage from "../models/modal-message.js";
 import SlideUpMessage from "../models/slide-up-message.js";
 import { logInAppMessageClick } from "../log-in-app-message-click.js";
-import { _handleBrazeAction as G } from "../../Core/handle-braze-action.js";
-import mt from "./html-message-to-html.js";
-import ce from "./modal-utils.js";
-import { logger as N, Guid as K } from "../../../shared-lib/index.js";
-export default function de(e, o, a, t, n, s, i, m = document.body, l = "ltr") {
+import { _handleBrazeAction as L } from "../../Core/handle-braze-action.js";
+import ct from "./html-message-to-html.js";
+import ne from "./modal-utils.js";
+import { logger as N, Guid as O } from "../../../shared-lib/index.js";
+import { KeyCodes as ie } from "../../util/key-codes.js";
+export default function le(e, o, t, a, n, i, s = document.body, m = "ltr") {
   if (((e.wo = document.activeElement), e instanceof HtmlMessage))
-    return mt(e, o, a, n, s, i);
-  const c = (function (e, o, a, t, n, s, i = document.body, m = "ltr") {
-    let l = null;
-    const c = document.createElement("div");
-    (c.dir = m),
-      (c.className = "ab-in-app-message ab-start-hidden ab-background"),
-      s && (c.style.zIndex = (s + 1).toString()),
+    return ct(e, o, a, n, i);
+  const l = (function (e, o, t, a, n, i = document.body, s = "ltr") {
+    let m = null;
+    const l = document.createElement("div");
+    (l.dir = s),
+      (l.className = "ab-in-app-message ab-start-hidden ab-background"),
+      n && (l.style.zIndex = (n + 1).toString()),
       e.vo() &&
-        ((c.className += " ab-modal-interactions"),
-        c.setAttribute("tabindex", "-1")),
+        ((l.className += " ab-modal-interactions"),
+        l.setAttribute("tabindex", "-1")),
       e.lo() ||
-        ((c.style.color = le(e.textColor)),
-        (c.style.backgroundColor = le(e.backgroundColor)),
-        ae(e.backgroundColor) && (c.className += " ab-no-shadow"));
-    const d = () => {
-        -1 !== c.className.indexOf("ab-start-hidden") &&
-          ((c.className = c.className.replace("ab-start-hidden", "")),
+        ((l.style.color = ae(e.textColor)),
+        (l.style.backgroundColor = ae(e.backgroundColor)),
+        te(e.backgroundColor) && (l.className += " ab-no-shadow"));
+    const c = () => {
+        -1 !== l.className.indexOf("ab-start-hidden") &&
+          ((l.className = l.className.replace("ab-start-hidden", "")),
           document.querySelectorAll(".ab-iam-img-loading").length > 0
             ? t(
                 `Cannot show in-app message ${e.message} because another message is being shown.`,
-                InAppMessage.Co.xo,
+                InAppMessage.xo.ko,
               )
-            : a(c));
+            : o(l));
       },
       r = (o = !0) => {
-        let a = document.querySelectorAll(".ab-iam-root");
-        (a && 0 !== a.length) || (a = i.querySelectorAll(".ab-iam-root")),
-          a &&
-            a.length > 0 &&
-            (a[0].classList.remove("ab-iam-img-loading"),
-            l && (clearTimeout(l), (l = null)),
+        let t = document.querySelectorAll(".ab-iam-root");
+        (t && 0 !== t.length) || (t = i.querySelectorAll(".ab-iam-root")),
+          t &&
+            t.length > 0 &&
+            (t[0].classList.remove("ab-iam-img-loading"),
+            m && (clearTimeout(m), (m = null)),
             o
-              ? d()
+              ? c()
               : N.error(
                   `Cannot show in-app message ${e.message} because the image failed to load.`,
                 ));
       };
-    e.imageStyle === InAppMessage.ImageStyle.GRAPHIC &&
-      (c.className += " graphic"),
+    if (
+      (e.imageStyle === InAppMessage.ImageStyle.GRAPHIC &&
+        (l.className += " graphic"),
       e.orientation === InAppMessage.Orientation.LANDSCAPE &&
-        (c.className += " landscape"),
-      null != e.buttons &&
-        0 === e.buttons.length &&
-        (e.clickAction !== InAppMessage.ClickAction.NONE &&
-          (c.className += " ab-clickable"),
-        (c.onclick = (a) => (
-          e.ll(c, () => {
-            logInAppMessageClick(e),
-              e.clickAction === InAppMessage.ClickAction.URI
-                ? G(
-                    e.uri || "",
-                    n || e.openTarget === InAppMessage.OpenTarget.BLANK,
-                    a,
-                  )
-                : e.clickAction === InAppMessage.ClickAction.NEWS_FEED && o();
-          }),
-          a.stopPropagation(),
-          !1
-        )));
-    const u = T(
+        (l.className += " landscape"),
+      null != e.buttons && 0 === e.buttons.length)
+    ) {
+      e.clickAction !== InAppMessage.ClickAction.NONE &&
+        (l.className += " ab-clickable");
+      const o = (o) => (
+        e.ll(l, () => {
+          logInAppMessageClick(e),
+            e.clickAction === InAppMessage.ClickAction.URI &&
+              L(
+                e.uri || "",
+                a || e.openTarget === InAppMessage.OpenTarget.BLANK,
+                o,
+              );
+        }),
+        o.stopPropagation(),
+        !1
+      );
+      (l.onclick = o),
+        l.addEventListener("keydown", (e) => {
+          if (e.keyCode === ie.Co || e.keyCode === ie.$o) return o(e);
+        });
+    }
+    const d = T(
       "Close Message",
-      e.lo() ? void 0 : le(e.closeButtonColor),
+      e.lo() ? void 0 : ae(e.closeButtonColor),
       () => {
-        e.ll(c);
+        e.ll(l);
       },
-      m,
+      s,
     );
-    c.appendChild(u), s && (u.style.zIndex = (s + 2).toString());
-    const b = document.createElement("div");
-    (b.className = "ab-message-text"), (b.dir = m);
-    const p = (e.messageAlignment || e.$o).toLowerCase();
-    b.className += " " + p + "-aligned";
-    let g = !1;
-    const f = document.createElement("div");
-    if (((f.className = "ab-image-area"), e.imageUrl)) {
-      if (e.cropType === InAppMessage.CropType.CENTER_CROP) {
-        const o = document.createElement("span");
-        (o.className = "ab-center-cropped-img"),
-          (o.style.backgroundImage = "url(" + e.imageUrl + ")"),
-          o.setAttribute("role", "img"),
-          o.setAttribute("aria-label", "Modal Image"),
-          e.ko(o),
-          f.appendChild(o);
-      } else {
-        const o = document.createElement("img");
-        if (
-          (o.setAttribute("src", e.imageUrl),
-          e.ko(o),
-          0 === document.querySelectorAll(".ab-iam-img-loading").length)
-        ) {
-          g = !0;
-          const e = document.querySelectorAll(".ab-iam-root");
-          e && e.length > 0 && e[0].classList.add("ab-iam-img-loading"),
-            (l = window.setTimeout(() => {
-              r(!1);
-            }, 6e4)),
-            (o.onload = () => {
-              r();
-            }),
-            (o.onerror = () => {
-              r(!1);
-            });
-        }
-        f.appendChild(o);
+    l.appendChild(d), n && (d.style.zIndex = (n + 2).toString());
+    const u = document.createElement("div");
+    (u.className = "ab-message-text"),
+      (u.dir = s),
+      u.setAttribute("role", "article");
+    const b = (e.messageAlignment || e.zo).toLowerCase();
+    u.className += " " + b + "-aligned";
+    let f = !1;
+    const p = document.createElement("div");
+    if (((p.className = "ab-image-area"), e.imageUrl)) {
+      const o = document.createElement("img");
+      if (
+        (o.setAttribute("src", e.imageUrl),
+        e.Lo(o),
+        0 === document.querySelectorAll(".ab-iam-img-loading").length)
+      ) {
+        f = !0;
+        const e = document.querySelectorAll(".ab-iam-root");
+        e && e.length > 0 && e[0].classList.add("ab-iam-img-loading"),
+          (m = window.setTimeout(() => {
+            r(!1);
+          }, 6e4)),
+          (o.onload = () => {
+            r();
+          }),
+          (o.onerror = () => {
+            r(!1);
+          });
       }
-      c.appendChild(f), (b.className += " ab-with-image");
+      if (e.cropType === InAppMessage.CropType.CENTER_CROP) {
+        const e = document.createElement("div");
+        (e.className = "ab-center-cropped-img"),
+          e.appendChild(o),
+          p.appendChild(e);
+      } else p.appendChild(o);
+      l.appendChild(p), (u.className += " ab-with-image");
     } else if (e.icon) {
-      f.className += " ab-icon-area";
+      p.className += " ab-icon-area";
       const o = document.createElement("span");
       (o.className = "ab-icon"),
         e.lo() ||
-          ((o.style.backgroundColor = le(e.iconBackgroundColor)),
-          (o.style.color = le(e.iconColor)));
-      const a = document.createElement("i");
-      (a.className = "fa"),
-        a.appendChild(document.createTextNode(e.icon)),
-        a.setAttribute("aria-hidden", "true"),
-        o.appendChild(a),
-        f.appendChild(o),
-        c.appendChild(f),
-        (b.className += " ab-with-icon");
+          ((o.style.backgroundColor = ae(e.iconBackgroundColor)),
+          (o.style.color = ae(e.iconColor)));
+      const t = document.createElement("i");
+      (t.className = "fa"),
+        t.appendChild(document.createTextNode(e.icon)),
+        t.setAttribute("aria-hidden", "true"),
+        o.appendChild(t),
+        p.appendChild(o),
+        l.appendChild(p),
+        (u.className += " ab-with-icon");
     }
-    if ((J(b, "touchstart"), e.header && e.header.length > 0)) {
+    if ((J(u, "touchstart"), e.header && e.header.length > 0)) {
       const o = document.createElement("h1");
-      (o.className = "ab-message-header"), (e.Mo = K.ce()), (o.id = e.Mo);
-      const a = (
+      (o.className = "ab-message-header"), (e.Mo = O.ce()), (o.id = e.Mo);
+      const t = (
         e.headerAlignment || InAppMessage.TextAlignment.CENTER
       ).toLowerCase();
-      (o.className += " " + a + "-aligned"),
-        e.lo() || (o.style.color = le(e.headerTextColor)),
+      (o.className += " " + t + "-aligned"),
+        e.lo() || (o.style.color = ae(e.headerTextColor)),
         o.appendChild(document.createTextNode(e.header)),
-        b.appendChild(o);
+        u.appendChild(o);
     }
-    return b.appendChild(e.zo()), c.appendChild(b), g || d(), (e.jo = c), c;
-  })(e, o, a, t, n, s, m, l);
+    const g = e.To();
+    return u.appendChild(g), l.appendChild(u), f || c(), (e.yo = l), l;
+  })(e, o, t, a, n, s, m);
   if (e instanceof FullScreenMessage || e instanceof ModalMessage) {
-    const a = e instanceof FullScreenMessage ? "ab-fullscreen" : "ab-modal";
-    (c.className += ` ${a} ab-centered`),
-      ce.Lo(e, o, c, n),
-      ce.Io(c),
-      ce.To(e.Mo, c);
+    const o = e instanceof FullScreenMessage ? "ab-fullscreen" : "ab-modal";
+    (l.className += ` ${o} ab-centered`),
+      ne.qo(e, l, a),
+      ne.Ao(l),
+      ne.Bo(e.Mo, l);
   } else if (e instanceof SlideUpMessage) {
-    c.className += " ab-slideup";
-    const o = c.getElementsByClassName("ab-close-button")[0];
+    (l.className += " ab-slideup"),
+      l.setAttribute("tabindex", "0"),
+      l.setAttribute("role", "alert");
+    const o = l.getElementsByClassName("ab-close-button")[0];
     if (null != o) {
-      const a = oe(
+      const t = oe(
         "0 0 11.38 19.44",
         "M11.38 9.72l-9.33 9.72L0 17.3l7.27-7.58L0 2.14 2.05 0l9.33 9.72z",
-        e.lo() ? void 0 : le(e.closeButtonColor),
+        e.lo() ? void 0 : ae(e.closeButtonColor),
       );
-      a.setAttribute("class", `ab-chevron ${l}`), o.appendChild(a);
+      t.setAttribute("class", `ab-chevron ${m}`), o.appendChild(t);
     }
-    let a, t;
-    H(c, R.ie, (e) => {
-      (c.className += " ab-swiped-left"),
+    let t, a;
+    H(l, K.ie, (e) => {
+      (l.className += " ab-swiped-left"),
         null != o && null != o.onclick && o.onclick(e);
     }),
-      H(c, R.de, (e) => {
-        (c.className += " ab-swiped-right"),
+      H(l, K.de, (e) => {
+        (l.className += " ab-swiped-right"),
           null != o && null != o.onclick && o.onclick(e);
       }),
       e.slideFrom === InAppMessage.SlideFrom.TOP
-        ? ((a = R.qo), (t = " ab-swiped-up"))
-        : ((a = R.yo), (t = " ab-swiped-down")),
-      H(c, a, (e) => {
-        (c.className += t), null != o && null != o.onclick && o.onclick(e);
+        ? ((t = K.Do), (a = " ab-swiped-up"))
+        : ((t = K.Eo), (a = " ab-swiped-down")),
+      H(l, t, (e) => {
+        (l.className += a), null != o && null != o.onclick && o.onclick(e);
       });
   }
-  return c;
+  return l;
 }

package/src/InAppMessage/display/modal-utils.js

@@ -1,14 +1,12 @@
 import InAppMessage from "../models/in-app-message.js";
-import { _handleBrazeAction as G } from "../../Core/handle-braze-action.js";
+import { _handleBrazeAction as L } from "../../Core/handle-braze-action.js";
 import { logInAppMessageButtonClick } from "../log-in-app-message-button-click.js";
-import { toRgba as le } from "../../util/color-utils.js";
+import { toRgba as ae } from "../../util/color-utils.js";
 import { addPassiveEventListener as J } from "../../util/dom-utils.js";
-import { KeyCodes as bt } from "../../util/key-codes.js";
-const ce = {
-  Io: (t) => {
-    const o = t.querySelectorAll(
-      ".ab-close-button, .ab-message-text, .ab-message-button",
-    );
+import { KeyCodes as ie } from "../../util/key-codes.js";
+const ne = {
+  Ao: (t) => {
+    const o = t.querySelectorAll(".ab-close-button, .ab-message-button");
     let e;
     for (let t = 0; t < o.length; t++) (e = o[t]), (e.tabIndex = 0);
     if (o.length > 0) {
@@ -16,7 +14,7 @@ const ce = {
         s = o[o.length - 1];
       t.addEventListener("keydown", (o) => {
         const a = document.activeElement;
-        o.keyCode === bt.Ao &&
+        o.keyCode === ie.Fo &&
           (o.shiftKey || (a !== s && a !== t)
             ? !o.shiftKey ||
               (a !== e && a !== t) ||
@@ -25,49 +23,49 @@ const ce = {
       });
     }
   },
-  To: (t, o) => {
+  Bo: (t, o) => {
     o.setAttribute("role", "dialog"),
       o.setAttribute("aria-modal", "true"),
-      o.setAttribute("aria-label", "Modal Message"),
-      t && o.setAttribute("aria-labelledby", t);
+      t
+        ? o.setAttribute("aria-labelledby", t)
+        : o.setAttribute("aria-label", "Modal Message");
   },
-  Lo: (t, o, e, s) => {
+  qo: (t, o, e) => {
     if (t.buttons && t.buttons.length > 0) {
-      const a = document.createElement("div");
-      (a.className = "ab-message-buttons"), e.appendChild(a);
-      const l = e.getElementsByClassName("ab-message-text")[0];
-      null != l && (l.className += " ab-with-buttons");
-      const n = (a) => (l) => (
-        t.ll(e, () => {
-          logInAppMessageButtonClick(a, t),
-            a.clickAction === InAppMessage.ClickAction.URI
-              ? G(
-                  a.uri || "",
-                  s || t.openTarget === InAppMessage.OpenTarget.BLANK,
-                  l,
-                )
-              : a.clickAction === InAppMessage.ClickAction.NEWS_FEED && o();
+      const s = document.createElement("div");
+      (s.className = "ab-message-buttons"), o.appendChild(s);
+      const a = o.getElementsByClassName("ab-message-text")[0];
+      null != a && (a.className += " ab-with-buttons");
+      const l = (s) => (a) => (
+        t.ll(o, () => {
+          logInAppMessageButtonClick(s, t),
+            s.clickAction === InAppMessage.ClickAction.URI &&
+              L(
+                s.uri || "",
+                e || t.openTarget === InAppMessage.OpenTarget.BLANK,
+                a,
+              );
         }),
-        l.stopPropagation(),
+        a.stopPropagation(),
         !1
       );
       for (let o = 0; o < t.buttons.length; o++) {
         const e = t.buttons[o],
-          s = document.createElement("button");
-        (s.className = "ab-message-button"),
-          s.setAttribute("type", "button"),
-          J(s, "touchstart");
-        let l = e.text;
-        "" === e.text && (l = " "),
-          s.appendChild(document.createTextNode(l)),
+          a = document.createElement("button");
+        (a.className = "ab-message-button"),
+          a.setAttribute("type", "button"),
+          J(a, "touchstart");
+        let n = e.text;
+        "" === e.text && (n = " "),
+          a.appendChild(document.createTextNode(n)),
           t.lo() ||
-            ((s.style.backgroundColor = le(e.backgroundColor)),
-            (s.style.color = le(e.textColor)),
-            (s.style.borderColor = le(e.borderColor))),
-          (s.onclick = n(e)),
-          a.appendChild(s);
+            ((a.style.backgroundColor = ae(e.backgroundColor)),
+            (a.style.color = ae(e.textColor)),
+            (a.style.borderColor = ae(e.borderColor))),
+          (a.onclick = l(e)),
+          s.appendChild(a);
       }
     }
   },
 };
-export default ce;
+export default ne;

package/src/InAppMessage/get-deferred-in-app-message.js

@@ -1,5 +1,5 @@
 import r from "../managers/braze-instance.js";
 import se from "./in-app-message-manager-factory.js";
 export function getDeferredInAppMessage() {
-  if (r.rr()) return se.ea().Ar();
+  if (r.rr()) return se.ea().zr();
 }

package/src/InAppMessage/in-app-message-factory.js

@@ -45,10 +45,12 @@ export function newInAppMessageFromJson(e) {
     q = e.css;
   (null != S && "" !== S && null != q && "" !== q) ||
     ((S = void 0), (q = void 0));
-  const B = e.message_extras;
-  let C;
-  if (o === ModalMessage.cs || o === InAppMessage.bo.Fo)
-    C = new ModalMessage(
+  const B = e.message_extras,
+    C = e.language,
+    D = e.image_alt;
+  let E;
+  if (o === ModalMessage.rs || o === InAppMessage.ho.Io)
+    E = new ModalMessage(
       s,
       n,
       t,
@@ -77,9 +79,11 @@ export function newInAppMessageFromJson(e) {
       S,
       q,
       B,
+      C,
+      D,
     );
-  else if (o === FullScreenMessage.cs)
-    C = new FullScreenMessage(
+  else if (o === FullScreenMessage.rs)
+    E = new FullScreenMessage(
       s,
       n,
       t,
@@ -109,9 +113,11 @@ export function newInAppMessageFromJson(e) {
       S,
       q,
       B,
+      C,
+      D,
     );
-  else if (o === SlideUpMessage.cs)
-    C = new SlideUpMessage(
+  else if (o === SlideUpMessage.rs)
+    E = new SlideUpMessage(
       s,
       n,
       r,
@@ -134,21 +140,23 @@ export function newInAppMessageFromJson(e) {
       S,
       q,
       B,
+      C,
+      D,
     );
   else {
     if (
-      o !== HtmlMessage.cs &&
-      o !== InAppMessage.bo.po &&
-      o !== InAppMessage.bo.Jo
+      o !== HtmlMessage.rs &&
+      o !== InAppMessage.ho.bo &&
+      o !== InAppMessage.ho.Jo
     )
       return void N.error("Ignoring message with unknown type " + o);
     {
       const o = e.message_fields;
-      (C = new HtmlMessage(s, t, m, p, u, z, J, A, S, q, o, B)),
-        (C.trusted = e.trusted || !1);
+      (E = new HtmlMessage(s, t, m, p, u, z, J, A, S, q, o, B)),
+        (E.trusted = e.trusted || !1);
     }
   }
-  return (C.uo = o), C;
+  return (E.po = o), E;
 }
 export function buttonsFromSerializedInAppMessage(e) {
   const o = [];