@trycourier/courier-ui-inbox 1.0.11-beta → 1.0.12-beta

package/dist/index.mjs

@@ -1578,7 +1578,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
 __publicField(_CourierInboxDatastore, "instance");
 let CourierInboxDatastore = _CourierInboxDatastore;
 class CourierInboxListItem extends CourierBaseElement {
-  constructor(themeManager) {
+  constructor(themeManager, canClick, _canLongPress) {
     super();
     // State
     __publicField(this, "_themeManager");
@@ -1586,6 +1586,8 @@ class CourierInboxListItem extends CourierBaseElement {
     __publicField(this, "_message", null);
     __publicField(this, "_feedType", "inbox");
     __publicField(this, "_isMobile", false);
+    __publicField(this, "_canClick", false);
+    // private _canLongPress: boolean = false; // Unused for now. But we can use this in the future if needed.
     // Elements
     __publicField(this, "_titleElement");
     __publicField(this, "_subtitleElement");
@@ -1600,6 +1602,7 @@ class CourierInboxListItem extends CourierBaseElement {
     __publicField(this, "onItemClick", null);
     __publicField(this, "onItemLongPress", null);
     __publicField(this, "onItemActionClick", null);
+    this._canClick = canClick;
     this._themeManager = themeManager;
     this._theme = themeManager.getTheme();
     this._isMobile = "ontouchstart" in window;
@@ -1635,6 +1638,7 @@ class CourierInboxListItem extends CourierBaseElement {
     this._menu.addEventListener("pointerdown", cancelPropagation);
     this._menu.addEventListener("click", cancelPropagation);
     this.addEventListener("click", (e) => {
+      if (!this._canClick) return;
       if (this._menu && (this._menu.contains(e.target) || e.composedPath().includes(this._menu))) {
         return;
       }
@@ -1644,6 +1648,9 @@ class CourierInboxListItem extends CourierBaseElement {
     });
     this._setupHoverBehavior();
     this._setupLongPressBehavior();
+    if (this._canClick) {
+      this.classList.add("clickable");
+    }
   }
   static getStyles(theme2) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
@@ -1656,7 +1663,7 @@ class CourierInboxListItem extends CourierBaseElement {
         justify-content: space-between;
         border-bottom: ${((_b = list == null ? void 0 : list.item) == null ? void 0 : _b.divider) ?? "1px solid red"};
         font-family: inherit;
-        cursor: pointer;
+        cursor: default;
         transition: background-color 0.2s ease;
         margin: 0;
         width: 100%;
@@ -1671,25 +1678,27 @@ class CourierInboxListItem extends CourierBaseElement {
         touch-action: manipulation;
       }
 
-      /* Base hover / active */
+      /* Only apply hover/active background if clickable */
       @media (hover: hover) {
-        ${CourierInboxListItem.id}:hover {
+        ${CourierInboxListItem.id}.clickable:hover {
+          cursor: pointer;
           background-color: ${((_d = list == null ? void 0 : list.item) == null ? void 0 : _d.hoverBackgroundColor) ?? "red"};
         }
       }
 
-      ${CourierInboxListItem.id}:active {
+      ${CourierInboxListItem.id}.clickable:active {
+        cursor: pointer;
         background-color: ${((_e = list == null ? void 0 : list.item) == null ? void 0 : _e.activeBackgroundColor) ?? "red"};
       }
 
       /* Menu hover / active */
       @media (hover: hover) {
-        ${CourierInboxListItem.id}:hover:has(courier-inbox-list-item-menu:hover, courier-inbox-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
+        ${CourierInboxListItem.id}.clickable:hover:has(courier-inbox-list-item-menu:hover, courier-inbox-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
           background-color: ${((_f = list == null ? void 0 : list.item) == null ? void 0 : _f.backgroundColor) ?? "transparent"};
         }
       }
 
-      ${CourierInboxListItem.id}:active:has(courier-inbox-list-item-menu:active, courier-inbox-list-item-menu *:active, courier-button:active, courier-button *:active) {
+      ${CourierInboxListItem.id}.clickable:active:has(courier-inbox-list-item-menu:active, courier-inbox-list-item-menu *:active, courier-button:active, courier-button *:active) {
         background-color: ${((_g = list == null ? void 0 : list.item) == null ? void 0 : _g.backgroundColor) ?? "transparent"};
       }
 
@@ -1922,6 +1931,7 @@ class CourierInboxListItem extends CourierBaseElement {
     }
     const actionsTheme = (_c = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.actions;
     if (this._actionsContainer && this._message.actions) {
+      this._actionsContainer.innerHTML = "";
       this._message.actions.forEach((action) => {
         var _a2, _b2, _c2, _d, _e;
         const actionButton = new CourierButton({
@@ -2204,6 +2214,8 @@ class CourierInboxList extends CourierBaseElement {
     __publicField(this, "_isLoading", true);
     __publicField(this, "_error", null);
     __publicField(this, "_canPaginate", false);
+    __publicField(this, "_canClickListItems", false);
+    __publicField(this, "_canLongPressListItems", false);
     // Callbacks
     __publicField(this, "_onMessageClick", null);
     __publicField(this, "_onMessageActionClick", null);
@@ -2254,6 +2266,12 @@ class CourierInboxList extends CourierBaseElement {
     (_b = this._listItemStyles) == null ? void 0 : _b.remove();
     (_c = this._listItemMenuStyles) == null ? void 0 : _c.remove();
   }
+  setCanClickListItems(canClick) {
+    this._canClickListItems = canClick;
+  }
+  setCanLongPressListItems(canLongPress) {
+    this._canLongPressListItems = canLongPress;
+  }
   static getStyles(theme2) {
     var _a;
     const list = (_a = theme2.inbox) == null ? void 0 : _a.list;
@@ -2428,7 +2446,7 @@ class CourierInboxList extends CourierBaseElement {
         list.appendChild(this._listItemFactory({ message, index }));
         return;
       }
-      const listItem = new CourierInboxListItem(this._themeSubscription.manager);
+      const listItem = new CourierInboxListItem(this._themeSubscription.manager, this._canClickListItems, this._canLongPressListItems);
       listItem.setMessage(message, this._feedType);
       listItem.setOnItemClick((message2) => {
         var _a2;
@@ -2748,31 +2766,27 @@ class CourierUnreadCountBadge extends CourierBaseElement {
     (_a = this._style) == null ? void 0 : _a.remove();
   }
   static getStyles(theme2) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
     return `
       ${CourierUnreadCountBadge.id} {
         display: inline-block;
       }
 
       ${CourierUnreadCountBadge.id} .unread-badge {
-        padding: 4px 8px;
+        padding: 3px 8px;
+        font-size: 12px;
         text-align: center;
         display: none;
         pointer-events: none;
-      }
-
-      ${CourierUnreadCountBadge.id} .button {
-        background-color: ${(_c = (_b = (_a = theme2.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.unreadIndicator) == null ? void 0 : _c.backgroundColor};
-        color: ${(_g = (_f = (_e = (_d = theme2.popup) == null ? void 0 : _d.button) == null ? void 0 : _e.unreadIndicator) == null ? void 0 : _f.font) == null ? void 0 : _g.color};
-        border-radius: ${(_j = (_i = (_h = theme2.popup) == null ? void 0 : _h.button) == null ? void 0 : _i.unreadIndicator) == null ? void 0 : _j.borderRadius};
-        font-size: ${(_n = (_m = (_l = (_k = theme2.popup) == null ? void 0 : _k.button) == null ? void 0 : _l.unreadIndicator) == null ? void 0 : _m.font) == null ? void 0 : _n.size};
+        min-width: 20px;
       }
 
       ${CourierUnreadCountBadge.id} .header {
-        background-color: ${(_r = (_q = (_p = (_o = theme2.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.filters) == null ? void 0 : _q.unreadIndicator) == null ? void 0 : _r.backgroundColor};
-        color: ${(_w = (_v = (_u = (_t = (_s = theme2.inbox) == null ? void 0 : _s.header) == null ? void 0 : _t.filters) == null ? void 0 : _u.unreadIndicator) == null ? void 0 : _v.font) == null ? void 0 : _w.color};
-        border-radius: ${(_A = (_z = (_y = (_x = theme2.inbox) == null ? void 0 : _x.header) == null ? void 0 : _y.filters) == null ? void 0 : _z.unreadIndicator) == null ? void 0 : _A.borderRadius};
-        font-size: ${(_F = (_E = (_D = (_C = (_B = theme2.inbox) == null ? void 0 : _B.header) == null ? void 0 : _C.filters) == null ? void 0 : _D.unreadIndicator) == null ? void 0 : _E.font) == null ? void 0 : _F.size};
+        background-color: ${(_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.unreadIndicator) == null ? void 0 : _d.backgroundColor};
+        color: ${(_i = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.unreadIndicator) == null ? void 0 : _h.font) == null ? void 0 : _i.color};
+        border-radius: ${(_m = (_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.header) == null ? void 0 : _k.filters) == null ? void 0 : _l.unreadIndicator) == null ? void 0 : _m.borderRadius};
+        font-size: ${(_r = (_q = (_p = (_o = (_n = theme2.inbox) == null ? void 0 : _n.header) == null ? void 0 : _o.filters) == null ? void 0 : _p.unreadIndicator) == null ? void 0 : _q.font) == null ? void 0 : _r.size};
+        padding: ${(_v = (_u = (_t = (_s = theme2.inbox) == null ? void 0 : _s.header) == null ? void 0 : _t.filters) == null ? void 0 : _u.unreadIndicator) == null ? void 0 : _v.padding};
       }
     `;
   }
@@ -3127,15 +3141,11 @@ const defaultLightTheme = {
       backgroundColor: "transparent",
       hoverBackgroundColor: CourierColors.black[50010],
       activeBackgroundColor: CourierColors.black[50020],
-      unreadIndicator: {
-        font: {
-          color: CourierColors.white[500],
-          size: "14px",
-          family: void 0,
-          weight: void 0
-        },
+      unreadDotIndicator: {
         backgroundColor: CourierColors.blue[500],
-        borderRadius: "12px"
+        borderRadius: "50%",
+        height: "8px",
+        width: "8px"
       }
     },
     window: {
@@ -3173,10 +3183,11 @@ const defaultLightTheme = {
           font: {
             color: CourierColors.white[500],
             family: void 0,
-            size: "14px"
+            size: "12px"
           },
           backgroundColor: CourierColors.blue[500],
-          borderRadius: "12px"
+          borderRadius: "4px",
+          padding: "2px 6px"
         }
       },
       menus: {
@@ -3374,15 +3385,11 @@ const defaultDarkTheme = {
       backgroundColor: "transparent",
       hoverBackgroundColor: CourierColors.white[50010],
       activeBackgroundColor: CourierColors.white[50020],
-      unreadIndicator: {
-        font: {
-          color: CourierColors.white[500],
-          size: "14px",
-          family: void 0,
-          weight: void 0
-        },
+      unreadDotIndicator: {
         backgroundColor: CourierColors.blue[500],
-        borderRadius: "12px"
+        borderRadius: "50%",
+        height: "8px",
+        width: "8px"
       }
     },
     window: {
@@ -3420,10 +3427,11 @@ const defaultDarkTheme = {
           font: {
             color: CourierColors.white[500],
             family: void 0,
-            size: "14px"
+            size: "12px"
           },
           backgroundColor: CourierColors.blue[500],
-          borderRadius: "12px"
+          borderRadius: "4px",
+          padding: "3px 8px"
         }
       },
       menus: {
@@ -3623,9 +3631,9 @@ const mergeTheme = (mode, theme2) => {
           ...(_d = (_c = defaultTheme.popup) == null ? void 0 : _c.button) == null ? void 0 : _d.icon,
           ...(_f = (_e = theme2.popup) == null ? void 0 : _e.button) == null ? void 0 : _f.icon
         },
-        unreadIndicator: {
-          ...(_h = (_g = defaultTheme.popup) == null ? void 0 : _g.button) == null ? void 0 : _h.unreadIndicator,
-          ...(_j = (_i = theme2.popup) == null ? void 0 : _i.button) == null ? void 0 : _j.unreadIndicator
+        unreadDotIndicator: {
+          ...(_h = (_g = defaultTheme.popup) == null ? void 0 : _g.button) == null ? void 0 : _h.unreadDotIndicator,
+          ...(_j = (_i = theme2.popup) == null ? void 0 : _i.button) == null ? void 0 : _j.unreadDotIndicator
         }
       },
       window: {
@@ -3950,6 +3958,8 @@ class CourierInbox extends CourierBaseElement {
     this.appendChild(this._header);
     this._list = new CourierInboxList({
       themeManager: this._themeManager,
+      canClickListItems: false,
+      canLongPressListItems: false,
       onRefresh: () => {
         this.refresh();
       },
@@ -4114,13 +4124,17 @@ class CourierInbox extends CourierBaseElement {
     (_a = this._list) == null ? void 0 : _a.setPaginationItemFactory(factory);
   }
   onMessageClick(handler) {
+    var _a;
     this._onMessageClick = handler;
+    (_a = this._list) == null ? void 0 : _a.setCanClickListItems(handler !== void 0);
   }
   onMessageActionClick(handler) {
     this._onMessageActionClick = handler;
   }
   onMessageLongPress(handler) {
+    var _a;
     this._onMessageLongPress = handler;
+    (_a = this._list) == null ? void 0 : _a.setCanLongPressListItems(handler !== void 0);
   }
   setFeedType(feedType) {
     var _a;
@@ -4227,7 +4241,7 @@ class CourierInboxMenuButton extends CourierFactoryElement {
     __publicField(this, "_style");
     __publicField(this, "_container");
     __publicField(this, "_triggerButton");
-    __publicField(this, "_unreadCountBadge");
+    __publicField(this, "_unreadBadge");
     this._themeSubscription = themeBus.subscribe((_) => {
       this.refreshTheme();
     });
@@ -4250,45 +4264,50 @@ class CourierInboxMenuButton extends CourierFactoryElement {
     this._container = document.createElement("div");
     this._container.className = "menu-button-container";
     this._triggerButton = new CourierIconButton(CourierIconSVGs.inbox);
-    this._unreadCountBadge = new CourierUnreadCountBadge({
-      themeBus: this._themeSubscription.manager,
-      location: "button"
-    });
-    this._unreadCountBadge.id = "unread-badge";
+    this._unreadBadge = document.createElement("div");
+    this._unreadBadge.className = "unread-badge";
+    this._unreadBadge.style.display = "none";
     this._container.appendChild(this._triggerButton);
-    this._container.appendChild(this._unreadCountBadge);
+    this._container.appendChild(this._unreadBadge);
     this.appendChild(this._container);
     this.refreshTheme();
     return this._container;
   }
-  static getStyles(_theme) {
+  static getStyles(theme2) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
     return `
       ${CourierInboxMenuButton.id} .menu-button-container {
         position: relative;
         display: inline-block;
       }
         
-      ${CourierInboxMenuButton.id} #unread-badge {
+      ${CourierInboxMenuButton.id} .unread-badge {
         position: absolute;
-        top: -8px;
-        left: 50%;
+        top: 2px;
+        right: 2px;
         pointer-events: none;
+        width: ${((_c = (_b = (_a = theme2.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.unreadDotIndicator) == null ? void 0 : _c.height) ?? "8px"};
+        height: ${((_f = (_e = (_d = theme2.popup) == null ? void 0 : _d.button) == null ? void 0 : _e.unreadDotIndicator) == null ? void 0 : _f.width) ?? "8px"};
+        background: ${((_i = (_h = (_g = theme2.popup) == null ? void 0 : _g.button) == null ? void 0 : _h.unreadDotIndicator) == null ? void 0 : _i.backgroundColor) ?? "red"};
+        border-radius: ${((_l = (_k = (_j = theme2.popup) == null ? void 0 : _j.button) == null ? void 0 : _k.unreadDotIndicator) == null ? void 0 : _l.borderRadius) ?? "50%"};
+        display: none;
+        z-index: 1;
       }
     `;
   }
   onUnreadCountChange(unreadCount) {
-    var _a;
-    (_a = this._unreadCountBadge) == null ? void 0 : _a.setCount(unreadCount);
+    if (this._unreadBadge) {
+      this._unreadBadge.style.display = unreadCount > 0 ? "block" : "none";
+    }
     this.refreshTheme();
   }
   refreshTheme() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
     (_e = this._triggerButton) == null ? void 0 : _e.updateIconColor(((_d = (_c = (_b = (_a = this.theme) == null ? void 0 : _a.popup) == null ? void 0 : _b.button) == null ? void 0 : _c.icon) == null ? void 0 : _d.color) ?? CourierColors.black[500]);
     (_j = this._triggerButton) == null ? void 0 : _j.updateIconSVG(((_i = (_h = (_g = (_f = this.theme) == null ? void 0 : _f.popup) == null ? void 0 : _g.button) == null ? void 0 : _h.icon) == null ? void 0 : _i.svg) ?? CourierIconSVGs.inbox);
     (_n = this._triggerButton) == null ? void 0 : _n.updateBackgroundColor(((_m = (_l = (_k = this.theme) == null ? void 0 : _k.popup) == null ? void 0 : _l.button) == null ? void 0 : _m.backgroundColor) ?? "transparent");
     (_r = this._triggerButton) == null ? void 0 : _r.updateHoverBackgroundColor(((_q = (_p = (_o = this.theme) == null ? void 0 : _o.popup) == null ? void 0 : _p.button) == null ? void 0 : _q.hoverBackgroundColor) ?? CourierColors.black[50010]);
     (_v = this._triggerButton) == null ? void 0 : _v.updateActiveBackgroundColor(((_u = (_t = (_s = this.theme) == null ? void 0 : _s.popup) == null ? void 0 : _t.button) == null ? void 0 : _u.activeBackgroundColor) ?? CourierColors.black[50020]);
-    (_w = this._unreadCountBadge) == null ? void 0 : _w.refreshTheme("button");
   }
 }
 registerElement(CourierInboxMenuButton);