@trycourier/courier-ui-toast 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1080 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { CourierColors, CourierIconSVGs, CourierThemeManager, registerElement, CourierBaseElement, CourierIcon, CourierButton, injectGlobalStyle } from "@trycourier/courier-ui-core";
+import { Courier, InboxMessageEvent } from "@trycourier/courier-js";
+import { Courier as Courier2 } from "@trycourier/courier-js";
+const defaultLightTheme = {
+  item: {
+    backgroundColor: CourierColors.white[500],
+    hoverBackgroundColor: CourierColors.gray[200],
+    activeBackgroundColor: CourierColors.gray[500],
+    shadow: `0px 4px 8px -2px ${CourierColors.black[50020]}`,
+    border: `1px solid ${CourierColors.gray[500]}`,
+    borderRadius: "8px",
+    title: {
+      size: "11pt",
+      weight: "400",
+      color: CourierColors.black[500]
+    },
+    body: {
+      size: "11pt",
+      weight: "400",
+      color: CourierColors.gray[600]
+    },
+    icon: {
+      color: CourierColors.black[500],
+      svg: CourierIconSVGs.inbox
+    },
+    dismissIcon: {
+      color: CourierColors.black[500],
+      svg: CourierIconSVGs.remove
+    },
+    autoDismissBarColor: CourierColors.blue[400],
+    actions: {
+      backgroundColor: "transparent",
+      hoverBackgroundColor: CourierColors.gray[200],
+      activeBackgroundColor: CourierColors.gray[500],
+      border: `1px solid ${CourierColors.gray[500]}`,
+      borderRadius: "4px",
+      shadow: "0px 1px 2px 0px rgba(0, 0, 0, 0.06)",
+      font: {
+        color: CourierColors.black[500],
+        size: "14px"
+      }
+    }
+  }
+};
+const defaultDarkTheme = {
+  item: {
+    backgroundColor: CourierColors.black[500],
+    hoverBackgroundColor: CourierColors.gray[400],
+    activeBackgroundColor: CourierColors.gray[600],
+    shadow: `0px 4px 8px -2px ${CourierColors.gray[400]}`,
+    border: `1px solid ${CourierColors.black[500]}`,
+    borderRadius: "8px",
+    title: {
+      size: "11pt",
+      weight: "400",
+      color: CourierColors.white[500]
+    },
+    body: {
+      size: "11pt",
+      weight: "400",
+      color: CourierColors.gray[500]
+    },
+    icon: {
+      color: CourierColors.white[500],
+      svg: CourierIconSVGs.inbox
+    },
+    dismissIcon: {
+      color: CourierColors.white[500],
+      svg: CourierIconSVGs.remove
+    },
+    autoDismissBarColor: CourierColors.blue[400],
+    actions: {
+      backgroundColor: CourierColors.black[400],
+      hoverBackgroundColor: CourierColors.white[50010],
+      activeBackgroundColor: CourierColors.white[50020],
+      border: `1px solid ${CourierColors.gray[400]}`,
+      borderRadius: "4px",
+      shadow: `0px 1px 2px 0px ${CourierColors.white[50010]}`,
+      font: {
+        color: CourierColors.white[500],
+        size: "14px"
+      }
+    }
+  }
+};
+const mergeTheme = (mode, theme) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const defaultTheme = mode === "light" ? defaultLightTheme : defaultDarkTheme;
+  return {
+    item: {
+      ...defaultTheme.item,
+      ...theme.item,
+      title: {
+        ...(_a = defaultTheme.item) == null ? void 0 : _a.title,
+        ...(_b = theme.item) == null ? void 0 : _b.title
+      },
+      body: {
+        ...(_c = defaultTheme.item) == null ? void 0 : _c.body,
+        ...(_d = theme.item) == null ? void 0 : _d.body
+      },
+      icon: {
+        ...(_e = defaultTheme.item) == null ? void 0 : _e.icon,
+        ...(_f = theme.item) == null ? void 0 : _f.icon
+      },
+      dismissIcon: {
+        ...(_g = defaultTheme.item) == null ? void 0 : _g.dismissIcon,
+        ...(_h = theme.item) == null ? void 0 : _h.dismissIcon
+      }
+    }
+  };
+};
+class CourierToastThemeManager extends CourierThemeManager {
+  constructor(initialTheme) {
+    super(initialTheme);
+    // Event ID for toast theme changes
+    __publicField(this, "THEME_CHANGE_EVENT", "courier_toast_theme_change");
+  }
+  /**
+   * Get the default light theme for toast
+   */
+  getDefaultLightTheme() {
+    return defaultLightTheme;
+  }
+  /**
+   * Get the default dark theme for toast
+   */
+  getDefaultDarkTheme() {
+    return defaultDarkTheme;
+  }
+  /**
+   * Merge the toast theme with defaults
+   */
+  mergeTheme(mode, theme) {
+    return mergeTheme(mode, theme);
+  }
+  /**
+   * Subscribe to toast theme changes
+   * @param callback - Function to run when the theme changes
+   * @returns Object with unsubscribe method to stop listening
+   */
+  subscribe(callback) {
+    const baseSubscription = super.subscribe(callback);
+    return {
+      ...baseSubscription,
+      manager: this
+    };
+  }
+}
+const _CourierToastItem = class _CourierToastItem extends CourierBaseElement {
+  constructor(props) {
+    super();
+    __publicField(this, "_themeManager");
+    __publicField(this, "_themeSubscription");
+    __publicField(this, "_message");
+    __publicField(this, "_customToastItemContent");
+    /** Whether this toast item is auto-dismissed. */
+    __publicField(this, "_autoDismiss");
+    /** The timeout before the toast item is auto-dismissed, applicable if _autoDismiss is true. */
+    __publicField(this, "_autoDismissTimeoutMs");
+    // Callbacks
+    __publicField(this, "_onItemDismissedCallback", null);
+    __publicField(this, "_onToastItemClickCallback", null);
+    __publicField(this, "_onToastItemActionClickCallback", null);
+    this._message = props.message;
+    this._autoDismiss = props.autoDismiss;
+    this._autoDismissTimeoutMs = props.autoDismissTimeoutMs;
+    this._themeManager = props.themeManager;
+    this._themeSubscription = this._themeManager.subscribe((_) => {
+      this.render();
+    });
+  }
+  /**
+   * Registers a handler called when the item is dismissed.
+   *
+   * @param handler - A function to be called when the item is dismissed.
+   */
+  onItemDismissed(handler) {
+    this._onItemDismissedCallback = handler;
+  }
+  /**
+   * Registers a handler for item click events.
+   *
+   * @param handler - A function to be called when the item is clicked.
+   */
+  onToastItemClick(handler) {
+    this._onToastItemClickCallback = handler;
+    this.render();
+  }
+  /**
+   * Registers a handler for item click events.
+   *
+   * @param handler - A function to be called when the item is clicked.
+   */
+  onToastItemActionClick(handler) {
+    this._onToastItemActionClickCallback = handler;
+    this.render();
+  }
+  /**
+   * Set a custom content element for the toast item, reusing the {@link CourierToastItem}
+   * container, which provides styling, animations, and event handling.
+   *
+   * @param factory - Function that returns an `HTMLElement` to render as the content.
+   */
+  setToastItemContent(factory) {
+    this._customToastItemContent = factory;
+  }
+  /**
+   * Dismiss the toast item.
+   *
+   * By default the toast fades out before it's removed. Set `timeoutMs` to
+   * `0` to remove the item immediately.
+   *
+   * @param timeoutMs - the animation duration to fade out the toast item
+   */
+  dismiss(timeoutMs = _CourierToastItem.dismissAnimationTimeoutMs) {
+    this.classList.add("dismissing");
+    setTimeout(() => {
+      this.remove();
+      if (this._onItemDismissedCallback) {
+        this._onItemDismissedCallback({ message: this._message });
+      }
+    }, timeoutMs);
+  }
+  /** @override */
+  onComponentMounted() {
+    this.render();
+  }
+  /** @override */
+  onComponentUnmounted() {
+    this._themeSubscription.unsubscribe();
+  }
+  get theme() {
+    return this._themeManager.getTheme();
+  }
+  /**
+   * @override
+   */
+  static get id() {
+    return "courier-toast-item";
+  }
+  /**
+   * @override
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Render a toast item, either with default content or custom content if
+   * a content factory function is provided.
+   *
+   * Note: Styles for the toast item are set in {@link CourierToast} since
+   * toasts are ephemeral by nature and we want to avoid adding/removing/duplicating
+   * styles as {@link CourierToastItem}s enter/exit.
+   */
+  render() {
+    var _a, _b, _c, _d;
+    while (this.firstChild) {
+      this.removeChild(this.firstChild);
+    }
+    this.removeEventListener("click", this.onClick);
+    const overflowHiddenContainer = document.createElement("div");
+    overflowHiddenContainer.classList.add("overflow-hidden-container");
+    this.appendChild(overflowHiddenContainer);
+    if (this._autoDismiss) {
+      const autoDismiss = document.createElement("div");
+      autoDismiss.classList.add("auto-dismiss");
+      overflowHiddenContainer.append(autoDismiss);
+    }
+    if (this._customToastItemContent) {
+      overflowHiddenContainer.appendChild(this._customToastItemContent({ message: this._message, autoDismiss: this._autoDismiss, autoDismissTimeoutMs: this._autoDismissTimeoutMs }));
+    } else {
+      overflowHiddenContainer.appendChild(this.createDefaultContent());
+    }
+    if (this._onToastItemClickCallback) {
+      this.classList.add("clickable");
+    }
+    this.addEventListener("click", this.onClick);
+    const dismiss = new CourierIcon(
+      (_b = (_a = this.theme.item) == null ? void 0 : _a.dismissIcon) == null ? void 0 : _b.color,
+      (_d = (_c = this.theme.item) == null ? void 0 : _c.dismissIcon) == null ? void 0 : _d.svg
+    );
+    dismiss.classList.add("dismiss");
+    dismiss.addEventListener("click", (event) => {
+      event.stopPropagation();
+      this.remove();
+      if (this._onItemDismissedCallback) {
+        this._onItemDismissedCallback({ message: this._message });
+      }
+    });
+    this.appendChild(dismiss);
+  }
+  /** Create the default content for this item. */
+  createDefaultContent() {
+    var _a, _b, _c, _d, _e;
+    const content = document.createElement("div");
+    content.classList.add("content");
+    this.append(content);
+    const icon = new CourierIcon(
+      (_b = (_a = this.theme.item) == null ? void 0 : _a.icon) == null ? void 0 : _b.color,
+      (_d = (_c = this.theme.item) == null ? void 0 : _c.icon) == null ? void 0 : _d.svg
+    );
+    icon.classList.add("icon");
+    content.appendChild(icon);
+    const textContent = document.createElement("div");
+    textContent.classList.add("text-content");
+    content.appendChild(textContent);
+    const title = document.createElement("p");
+    title.classList.add("title");
+    title.textContent = this._message.title ?? "";
+    textContent.appendChild(title);
+    const body = document.createElement("p");
+    body.classList.add("body");
+    body.textContent = this._message.preview ?? this._message.body ?? "";
+    textContent.appendChild(body);
+    if (this.messageHasActions) {
+      const actionsContainer = document.createElement("div");
+      actionsContainer.classList.add("actions-container");
+      textContent.appendChild(actionsContainer);
+      (_e = this._message.actions) == null ? void 0 : _e.forEach((action) => {
+        const button = this.createActionButton(action);
+        actionsContainer.appendChild(button);
+      });
+    }
+    return content;
+  }
+  get messageHasActions() {
+    return this._message.actions && this._message.actions.length > 0;
+  }
+  createActionButton(action) {
+    var _a, _b, _c, _d, _e;
+    const actionsTheme = (_a = this._themeManager.getTheme().item) == null ? void 0 : _a.actions;
+    return new CourierButton({
+      mode: this._themeManager.mode,
+      text: action.content,
+      variant: "secondary",
+      backgroundColor: actionsTheme == null ? void 0 : actionsTheme.backgroundColor,
+      hoverBackgroundColor: actionsTheme == null ? void 0 : actionsTheme.hoverBackgroundColor,
+      activeBackgroundColor: actionsTheme == null ? void 0 : actionsTheme.activeBackgroundColor,
+      border: actionsTheme == null ? void 0 : actionsTheme.border,
+      borderRadius: actionsTheme == null ? void 0 : actionsTheme.borderRadius,
+      shadow: actionsTheme == null ? void 0 : actionsTheme.shadow,
+      fontFamily: (_b = actionsTheme == null ? void 0 : actionsTheme.font) == null ? void 0 : _b.family,
+      fontSize: (_c = actionsTheme == null ? void 0 : actionsTheme.font) == null ? void 0 : _c.size,
+      fontWeight: (_d = actionsTheme == null ? void 0 : actionsTheme.font) == null ? void 0 : _d.weight,
+      textColor: (_e = actionsTheme == null ? void 0 : actionsTheme.font) == null ? void 0 : _e.color,
+      onClick: () => {
+        if (this._onToastItemActionClickCallback) {
+          this._onToastItemActionClickCallback({ message: this._message, action });
+        }
+      }
+    });
+  }
+  onClick(event) {
+    event.stopPropagation();
+    if (this._onToastItemClickCallback) {
+      this._onToastItemClickCallback({ message: this._message });
+    }
+  }
+};
+/** The animation duration to fade out a dismissed toast before its element is removed. */
+__publicField(_CourierToastItem, "dismissAnimationTimeoutMs", 300);
+let CourierToastItem = _CourierToastItem;
+registerElement(CourierToastItem);
+const _CourierToastDatastore = class _CourierToastDatastore {
+  /** Access the shared instance with {@link CourierToastDatastore.shared}. */
+  // Prevent instantiation via constructor.
+  constructor() {
+    /** FIFO stack of toast messages. The end of the array is index 0 of the stack. */
+    __publicField(this, "_dataset", []);
+    /** Set of listeners whose handlers will be called when the datastore changes. */
+    __publicField(this, "_datastoreListeners", []);
+  }
+  /** The shared instance of CourierToastDatastore, used to access all public methods. */
+  static get shared() {
+    if (!_CourierToastDatastore.instance) {
+      _CourierToastDatastore.instance = new _CourierToastDatastore();
+    }
+    return _CourierToastDatastore.instance;
+  }
+  /**
+   * Add a listener whose handlers are called when there are changes to the datastore.
+   *
+   * @param listener - an implementation of {@link CourierToastDatastoreListener}
+   */
+  addDatastoreListener(listener) {
+    this._datastoreListeners.push(listener);
+  }
+  /**
+   * Remove a previously added listener.
+   *
+   * Note: the `listener` param is matched by object reference, so callers must pass
+   * the same object previously passed to {@link CourierToastDatastore.addDatastoreListener}.
+   *
+   * See also: {@link CourierToastDatastoreListener.remove}
+   *
+   * @param listener - a previously added listener implementation
+   */
+  removeDatastoreListener(listener) {
+    this._datastoreListeners = this._datastoreListeners.filter((l) => l !== listener);
+  }
+  /**
+   * Start listening for toast messages.
+   *
+   * Calling this method will open a WebSocket connection to the Courier backend if one
+   * is not already open.
+   *
+   * See also: {@link @trycourier/courier-js#Courier.shared.signIn} and {@link @trycourier/courier-js#Courier.shared.signOut}
+   */
+  async listenForMessages() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    try {
+      const socketClient = (_a = Courier.shared.client) == null ? void 0 : _a.inbox.socket;
+      if (!socketClient) {
+        (_c = (_b = Courier.shared.client) == null ? void 0 : _b.options.logger) == null ? void 0 : _c.info("CourierInbox socket not available");
+        return;
+      }
+      socketClient.addMessageEventListener((messageEvent) => {
+        if (messageEvent.event === InboxMessageEvent.NewMessage) {
+          const message = messageEvent.data;
+          this.addMessage(message);
+        }
+      });
+      if (socketClient.isConnecting || socketClient.isOpen) {
+        (_f = (_d = Courier.shared.client) == null ? void 0 : _d.options.logger) == null ? void 0 : _f.info(`Inbox socket already connecting or open for client ID: [${(_e = Courier.shared.client) == null ? void 0 : _e.options.connectionId}]`);
+        return;
+      }
+      socketClient.connect();
+    } catch (error) {
+      (_g = Courier.shared.client) == null ? void 0 : _g.options.logger.error("Error listening for messages:", error);
+      this._datastoreListeners.forEach((listener) => {
+        var _a2, _b2;
+        (_b2 = (_a2 = listener.events).onError) == null ? void 0 : _b2.call(_a2, error);
+      });
+    }
+  }
+  /**
+   * Find the position of an {@link @trycourier/courier-js#InboxMessage} in the toast stack.
+   *
+   * Notes:
+   *  - Since the stack is an array, with the last item being the "top" of the stack,
+   *    a toast's position in the underlying array is the inverse of its stack position.
+   *  - `message` is matched by {@link @trycourier/courier-js#InboxMessage.messageId}, not by object reference.
+   *
+   * @param message - the {@link @trycourier/courier-js#InboxMessage} to find in the stack
+   */
+  toastIndexOfMessage(message) {
+    const position = this._dataset.findIndex((m) => m.messageId === message.messageId);
+    if (position < 0) {
+      return position;
+    }
+    return this._dataset.length - position - 1;
+  }
+  /**
+   * Add an {@link @trycourier/courier-js#InboxMessage} toast item to the datastore.
+   *
+   * Calling this directly is useful to send test messages while developing with the Courier SDK.</p>
+   *
+   * @example
+   * ```
+   * CourierToastDatastore.shared.addMessage({
+   *  title: 'Lorem ipsum dolor sit',
+   *  body: 'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet',
+   *  messageId: '1'
+   * });
+   * ```
+   *
+   * @param message - the message to add as a toast item.
+   */
+  addMessage(message) {
+    this._dataset.push(message);
+    this._datastoreListeners.forEach((listener) => {
+      if (listener.events.onMessageAdd) {
+        listener.events.onMessageAdd(message);
+      }
+    });
+  }
+  /**
+   * Remove an {@link @trycourier/courier-js#InboxMessage} from the datastore.
+   *
+   * Note: `message` is matched by {@link @trycourier/courier-js#InboxMessage.messageId}, not by object reference
+   */
+  removeMessage(message) {
+    const index = this._dataset.findIndex((m) => m.messageId === message.messageId);
+    if (index < 0) {
+      return;
+    }
+    this._dataset.splice(
+      index,
+      /* deleteCount */
+      1
+    );
+    this._datastoreListeners.forEach((listener) => {
+      if (listener.events.onMessageRemove) {
+        listener.events.onMessageRemove(message);
+      }
+    });
+  }
+};
+/** Shared instance. Access via {@link CourierToastDatastore.shared}. */
+__publicField(_CourierToastDatastore, "instance");
+let CourierToastDatastore = _CourierToastDatastore;
+class CourierToastDatastoreListener {
+  constructor(events) {
+    this.events = events;
+  }
+  /** Remove this listener. Callbacks will no longer be invoked after remove is called. */
+  remove() {
+    CourierToastDatastore.shared.removeDatastoreListener(this);
+  }
+}
+const _CourierToast = class _CourierToast extends CourierBaseElement {
+  constructor(props) {
+    super();
+    // Internally-maintained state
+    __publicField(this, "_themeManager");
+    __publicField(this, "_themeSubscription");
+    __publicField(this, "_toastStyle");
+    __publicField(this, "_authListener");
+    __publicField(this, "_datastoreListener");
+    // Consumer-provided options
+    __publicField(this, "_autoDismiss", false);
+    __publicField(this, "_autoDismissTimeoutMs", 5e3);
+    __publicField(this, "_dismissButtonOption", "auto");
+    __publicField(this, "_customToastItem");
+    __publicField(this, "_customToastItemContent");
+    // Consumer-provided callbacks
+    __publicField(this, "_onItemClick");
+    __publicField(this, "_onItemActionClick");
+    /** Default layout props. */
+    __publicField(this, "_defaultLayoutProps", {
+      position: "fixed",
+      width: "380px",
+      top: "30px",
+      right: "30px",
+      zIndex: 999
+    });
+    this._themeManager = (props == null ? void 0 : props.themeManager) ?? new CourierToastThemeManager(defaultLightTheme);
+    this._themeSubscription = this._themeManager.subscribe((_) => {
+      this.refreshStyles();
+    });
+    this._datastoreListener = new CourierToastDatastoreListener({
+      onMessageAdd: this.datastoreAddMessageListener.bind(this),
+      onMessageRemove: this.datastoreRemoveMessageListener.bind(this)
+    });
+  }
+  /** Set the handler invoked when a toast item is clicked. */
+  onToastItemClick(handler) {
+    this._onItemClick = handler;
+  }
+  /** Set the handler invoked when a toast item action button is clicked. */
+  onToastItemActionClick(handler) {
+    this._onItemActionClick = handler;
+  }
+  /** Enable auto-dismiss for toast items. */
+  enableAutoDismiss() {
+    this._autoDismiss = true;
+  }
+  /** Disable auto-dismiss for toast items. */
+  disableAutoDismiss() {
+    this._autoDismiss = false;
+  }
+  /**
+   * Set the timeout before auto-dismissing toasts.
+   * Only applicable if auto-dismiss is enabled.
+   * @param timeoutMs - The timeout in milliseconds before a toast is dismissed.
+   */
+  setAutoDismissTimeoutMs(timeoutMs) {
+    this._autoDismissTimeoutMs = timeoutMs;
+  }
+  /**
+   * Set the light theme for the toast.
+   * @param theme - The light theme object to set.
+   */
+  setLightTheme(theme) {
+    this._themeManager.setLightTheme(theme);
+  }
+  /**
+   * Set the dark theme for the toast.
+   * @param theme - The dark theme object to set.
+   */
+  setDarkTheme(theme) {
+    this._themeManager.setDarkTheme(theme);
+  }
+  /**
+   * Set the dismiss button display option.
+   *
+   * @param option - a value of {@link CourierToastDismissButtonOption}
+   */
+  setDismissButton(option) {
+    this._dismissButtonOption = option;
+    this.refreshStyles();
+  }
+  /**
+   * Set the theme mode.
+   *
+   * @param mode - The theme mode, one of "dark", "light", or "system".
+   */
+  setMode(mode) {
+    this._themeManager.setMode(mode);
+  }
+  /**
+   * Set a factory function that renders a toast item.
+   *
+   * See {@link CourierToast.setToastItemContent} to set the content while preserving the toast item's
+   * container and stack styling.
+   */
+  setToastItem(factory) {
+    this._customToastItem = factory;
+  }
+  /**
+   * Set a factory function that renders a toast item's content.
+   *
+   * The toast item's container, including the stack, auto-dismiss timer, and dismiss button
+   * and all events are still present when custom content is set.
+   *
+   * See {@link CourierToast.setDismissButton} to customize the dismiss button's visibility and
+   * {@link CourierToast.setToastItem} to customize the entire toast item, including
+   * its container.
+   */
+  setToastItemContent(factory) {
+    this._customToastItemContent = factory;
+  }
+  /**
+   * Dismiss the toast item(s) associated with a particular {@link @trycourier/courier-js#InboxMessage}.
+   *
+   * Toast items are matched to messages by the field {@link @trycourier/courier-js#InboxMessage.messageId}.
+   * If the item is an instance of {@link CourierToastItem} it will be animated out
+   * before removal, otherwise custom items are removed immediately.
+   *
+   * If there are multiple toast items matching the message, all items will be dismissed.
+   *
+   * @example
+   * Using dismissToastForMessage with setToastItem to dismiss a custom element.
+   * ```ts
+   * // Get a reference to the toast component
+   * const toast = document.getElementById("my-toast");
+   *
+   * toast.setToastItem((props) => {
+   *   const el = document.createElement("div");
+   *   el.addEventListener("click", () => toast.dismissToastForMessage(props.message));
+   *   return el;
+   * });
+   * ```
+   *
+   * @param message - the {@link @trycourier/courier-js#InboxMessage} for which toast items should be dismissed
+   */
+  dismissToastForMessage(message) {
+    this.childNodes.forEach((node) => {
+      const nodeMessageId = node.dataset.courierMessageId;
+      if (nodeMessageId !== message.messageId) {
+        return;
+      }
+      if (node instanceof CourierToastItem) {
+        node.dismiss();
+      } else {
+        node.remove();
+      }
+    });
+  }
+  /**
+   * @override
+   */
+  onComponentMounted() {
+    this._toastStyle = injectGlobalStyle(_CourierToast.id, this.getStyles(this.theme));
+    CourierToastDatastore.shared.addDatastoreListener(this._datastoreListener);
+    Courier.shared.addAuthenticationListener(this.authChangedCallback.bind(this));
+    CourierToastDatastore.shared.listenForMessages();
+  }
+  /**
+   * @override
+   */
+  onComponentUnmounted() {
+    var _a, _b;
+    this._datastoreListener.remove();
+    (_a = this._authListener) == null ? void 0 : _a.remove();
+    (_b = this._toastStyle) == null ? void 0 : _b.remove();
+    this._themeManager.cleanup();
+    this._themeSubscription.unsubscribe();
+  }
+  /**
+   * Lifecycle callback invoked when an observed attribute changes.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes
+   */
+  attributeChangedCallback(name, _, newValue) {
+    switch (name) {
+      case "auto-dismiss":
+        if (newValue === "false") {
+          this.disableAutoDismiss();
+        } else {
+          this.enableAutoDismiss();
+        }
+        break;
+      case "auto-dismiss-timeout-ms":
+        this.setAutoDismissTimeoutMs(parseInt(
+          newValue,
+          /* base= */
+          10
+        ));
+        break;
+      case "dismiss-button":
+        if (newValue && _CourierToast.isDismissButtonOption(newValue)) {
+          this.setDismissButton(newValue);
+        } else {
+          this.setDismissButton("auto");
+        }
+        break;
+      case "light-theme":
+        if (newValue) {
+          this.setLightTheme(JSON.parse(newValue));
+        }
+        break;
+      case "dark-theme":
+        if (newValue) {
+          this.setDarkTheme(JSON.parse(newValue));
+        }
+        break;
+      case "mode":
+        this._themeManager.setMode(newValue);
+        break;
+    }
+  }
+  get theme() {
+    return this._themeManager.getTheme();
+  }
+  /** Refresh the styles tag, if it exists, with the current theme. */
+  refreshStyles() {
+    if (this._toastStyle) {
+      this._toastStyle.textContent = this.getStyles(this.theme);
+    }
+  }
+  authChangedCallback() {
+    this.removeAllItems();
+    CourierToastDatastore.shared.listenForMessages();
+  }
+  removeAllItems() {
+    while (this.firstChild) {
+      this.removeChild(this.firstChild);
+    }
+  }
+  addToastItem(message) {
+    const toastItem = this.createToastItem(message);
+    toastItem.dataset.courierMessageId = message.messageId;
+    this.appendChild(toastItem);
+    this.resizeContainerToHeight(this.topStackItemHeight);
+    return toastItem;
+  }
+  createToastItem(message) {
+    if (this._customToastItem) {
+      return this.createCustomToastItem(message);
+    }
+    return this.createDefaultToastItem(message);
+  }
+  createDefaultToastItem(message) {
+    const item = new CourierToastItem({
+      message,
+      autoDismiss: this._autoDismiss,
+      autoDismissTimeoutMs: this._autoDismissTimeoutMs,
+      themeManager: this._themeManager
+    });
+    item.onItemDismissed((_) => {
+      this.resizeContainerToHeight(this.topStackItemHeight);
+    });
+    if (this._customToastItemContent) {
+      item.setToastItemContent(this._customToastItemContent);
+    }
+    if (this._onItemClick) {
+      item.onToastItemClick(this._onItemClick);
+    }
+    if (this._onItemActionClick) {
+      item.onToastItemActionClick(this._onItemActionClick);
+    }
+    if (this._autoDismiss) {
+      setTimeout(item.dismiss.bind(item), this._autoDismissTimeoutMs);
+    }
+    return item;
+  }
+  createCustomToastItem(message) {
+    if (!this._customToastItem) {
+      throw Error("Attempted to create customToastItem, but none is set");
+    }
+    const customItem = this._customToastItem({
+      message,
+      autoDismiss: this._autoDismiss,
+      autoDismissTimeoutMs: this._autoDismissTimeoutMs
+    });
+    if (this._autoDismiss) {
+      setTimeout(() => {
+        this.removeChild(customItem);
+      }, this._autoDismissTimeoutMs);
+    }
+    customItem.addEventListener("click", () => {
+      if (this._onItemClick) {
+        this._onItemClick({ message });
+      }
+    });
+    return customItem;
+  }
+  datastoreAddMessageListener(message) {
+    this.addToastItem(message);
+  }
+  datastoreRemoveMessageListener(message) {
+    this.dismissToastForMessage(message);
+  }
+  getStyles(theme) {
+    var _a, _b, _c, _d, _e, _f;
+    const item = theme.item;
+    const toastStyles = `
+      ${_CourierToast.id} {
+        position: ${this._defaultLayoutProps.position};
+        z-index: ${this._defaultLayoutProps.zIndex};
+        top: ${this._defaultLayoutProps.top};
+        right: ${this._defaultLayoutProps.right};
+        width: ${this._defaultLayoutProps.width};
+      }
+    `;
+    const toastStackStyles = `
+      ${CourierToastItem.id}:last-child {
+        top: 0;
+        right: 0;
+      }
+
+      ${CourierToastItem.id}:nth-last-child(2) {
+        top: 12px;
+        bottom: -12px;
+        --scale: 0.95
+      }
+
+      ${CourierToastItem.id}:nth-last-child(3) {
+        top: 24px;
+        bottom: -24px;
+        --scale: 0.9;
+      }
+
+      ${CourierToastItem.id}:nth-last-child(n+4) {
+        top: 24px;
+        bottom: -24px;
+        --scale: 0.9;
+        visibility: hidden;
+      }
+
+      ${CourierToastItem.id}:nth-last-child(n+2) > .overflow-hidden-container {
+        opacity: 0;
+      }
+    `;
+    const toastItemStyles = `
+      ${CourierToastItem.id} {
+        position: absolute;
+        box-sizing: border-box;
+        width: 100%;
+        background-color: ${item == null ? void 0 : item.backgroundColor};
+        box-shadow: ${item == null ? void 0 : item.shadow};
+        border: ${item == null ? void 0 : item.border};
+        border-radius: ${item == null ? void 0 : item.borderRadius};
+        transition: 0.2s ease-in-out;
+        cursor: default;
+
+        opacity: 0;
+        transform: translate(0, -10px) scaleX(var(--scale, 1));
+        animation: show 0.3s ease-in-out forwards;
+      }
+
+      ${CourierToastItem.id} > .overflow-hidden-container {
+        height: 100%;
+        width: 100%;
+        border-radius: ${item == null ? void 0 : item.borderRadius};
+        overflow: hidden;
+      }
+
+      ${CourierToastItem.id}.dismissing {
+        animation: hide 0.3s ease-in-out forwards;
+      }
+
+      @keyframes show {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+          transform: scaleX(var(--scale, 1));
+        }
+      }
+
+      @keyframes hide {
+        0% {
+          opacity: 1;
+          transform: scaleX(var(--scale, 1));
+        }
+
+        100% {
+          opacity: 0;
+          transform: scaleX(var(--scale, 1));
+        }
+      }
+
+      ${CourierToastItem.id}.clickable:last-child {
+        cursor: pointer;
+      }
+
+      ${CourierToastItem.id}.clickable:last-child:hover {
+        background-color: ${item == null ? void 0 : item.hoverBackgroundColor};
+      }
+
+      ${CourierToastItem.id}.clickable:last-child:active {
+        background-color: ${item == null ? void 0 : item.activeBackgroundColor};
+      }
+
+      ${CourierToastItem.id}.clickable:nth-last-child(n+2) {
+        pointer-events: none;
+      }
+    `;
+    const dismissStyles = `
+      ${CourierToastItem.id} > .dismiss {
+        position: absolute;
+        visibility: hidden;
+        opacity: 0%;
+        top: -10px;
+        right: -10px;
+        background-color: ${item == null ? void 0 : item.backgroundColor};
+        border: ${item == null ? void 0 : item.border};
+        padding: 3px;
+        border-radius: 50%;
+        font-size: 12pt;
+        box-shadow: ${item == null ? void 0 : item.shadow};
+        cursor: pointer;
+        transition: 0.2s ease-in-out;
+      }
+
+      ${CourierToastItem.id} > .dismiss:hover {
+        background-color: ${item == null ? void 0 : item.hoverBackgroundColor};
+      }
+
+      ${CourierToastItem.id} > .dismiss:active {
+        background-color: ${item == null ? void 0 : item.activeBackgroundColor};
+      }
+
+      ${CourierToastItem.id}:last-child${this.showDismissOnHover ? ":hover" : ""} > .dismiss {
+        visibility: ${this.showDismiss ? "visible" : "hidden"};
+        opacity: 100%;
+        transition: 0.2s ease-in-out;
+      }
+    `;
+    const autoDismissStyles = `
+      ${CourierToastItem.id} > .overflow-hidden-container > .auto-dismiss {
+        width: 100%;
+        height: 5px;
+        background-color: ${item == null ? void 0 : item.autoDismissBarColor};
+        animation: auto-dismiss ${this._autoDismissTimeoutMs}ms ease-in-out forwards;
+      }
+
+      @keyframes auto-dismiss {
+        100% {
+          width: 0px;
+        }
+      }
+    `;
+    const contentStyles = `
+      ${CourierToastItem.id} > .overflow-hidden-container > .content {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        align-self: stretch;
+        box-sizing: border-box;
+        padding: 12px;
+      }
+
+      ${CourierToastItem.id} > .overflow-hidden-container > .content > .text-content {
+      }
+
+      ${CourierToastItem.id} > .overflow-hidden-container > .content > .icon {
+      }
+
+      ${CourierToastItem.id} > .overflow-hidden-container > .content > .text-content > .title {
+        margin: 0;
+        font-weight: ${(_a = item == null ? void 0 : item.title) == null ? void 0 : _a.weight};
+        font-size: ${(_b = item == null ? void 0 : item.title) == null ? void 0 : _b.size};
+        color: ${(_c = item == null ? void 0 : item.title) == null ? void 0 : _c.color};
+      }
+
+      ${CourierToastItem.id} > .overflow-hidden-container > .content > .text-content > .body {
+        margin: 8px 0 0 0;
+        font-weight: ${(_d = item == null ? void 0 : item.body) == null ? void 0 : _d.weight};
+        font-size: ${(_e = item == null ? void 0 : item.body) == null ? void 0 : _e.size};
+        line-height: 150%;
+        color: ${(_f = item == null ? void 0 : item.body) == null ? void 0 : _f.color};
+      }
+    `;
+    const actionStyles = `
+      ${CourierToastItem.id} > .overflow-hidden-container > .content > .text-content > .actions-container {
+        display: flex;
+        gap: 8px;
+        margin-top: 12px;
+      }
+    `;
+    return [
+      toastStyles,
+      toastStackStyles,
+      toastItemStyles,
+      dismissStyles,
+      autoDismissStyles,
+      contentStyles,
+      actionStyles
+    ].join("");
+  }
+  /** Get the top item's (i.e. the fully visible item's) height. */
+  get topStackItemHeight() {
+    if (this.lastChild) {
+      const height = this.lastChild.getBoundingClientRect().height;
+      return `${height}px`;
+    }
+    return "0px";
+  }
+  resizeContainerToHeight(height) {
+    this.style.height = height;
+  }
+  /** Whether the dismiss button should only be shown on hover. */
+  get showDismissOnHover() {
+    if (this._autoDismiss && this._dismissButtonOption === "auto") {
+      return true;
+    }
+    if (this._dismissButtonOption === "hover") {
+      return true;
+    }
+    return false;
+  }
+  /** Whether to show the dismiss button. The button is visible (either always or on hover) if not explicitly disabled. */
+  get showDismiss() {
+    return this._dismissButtonOption !== "hidden";
+  }
+  /** @override */
+  static get id() {
+    return "courier-toast";
+  }
+  static isDismissButtonOption(value) {
+    const validOptions = ["visible", "hidden", "hover", "auto"];
+    return validOptions.includes(value);
+  }
+};
+/**
+ * The names of all attributes for which the web component needs change notifications.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes
+ */
+__publicField(_CourierToast, "observedAttributes", [
+  "auto-dismiss",
+  "auto-dismiss-timeout-ms",
+  "dismiss-button",
+  "light-theme",
+  "dark-theme",
+  "mode"
+]);
+let CourierToast = _CourierToast;
+registerElement(CourierToast);
+class CourierToastDatastoreEvents {
+  onMessageAdd(_) {
+  }
+  onMessageRemove(_) {
+  }
+  onError(_) {
+  }
+}
+Courier.shared.courierUserAgentName = "courier-ui-toast";
+Courier.shared.courierUserAgentVersion = "1.0.0";
+export {
+  Courier2 as Courier,
+  CourierToast,
+  CourierToastDatastore,
+  CourierToastDatastoreEvents,
+  CourierToastDatastoreListener,
+  CourierToastItem,
+  CourierToastThemeManager,
+  defaultDarkTheme,
+  defaultLightTheme,
+  mergeTheme
+};
+//# sourceMappingURL=index.mjs.map