npm - @trycourier/courier-ui-toast - Versions diffs - 1.0.0 - Mend

@trycourier/courier-ui-toast 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/README.md +46 -0
package/dist/components/__tests__/courier-toast-item.test.d.ts +1 -0
package/dist/components/__tests__/courier-toast.test.d.ts +1 -0
package/dist/components/courier-toast-item.d.ts +95 -0
package/dist/components/courier-toast.d.ts +167 -0
package/dist/datastore/__tests__/toast-datastore.test.d.ts +1 -0
package/dist/datastore/toast-datastore-events.d.ts +11 -0
package/dist/datastore/toast-datastore-listener.d.ts +12 -0
package/dist/datastore/toast-datastore.d.ts +81 -0
package/dist/index.d.ts +12 -0
package/dist/index.js +2 -0
package/dist/index.js.map +1 -0
package/dist/index.mjs +1080 -0
package/dist/index.mjs.map +1 -0
package/dist/jest.setup.d.ts +0 -0
package/dist/types/courier-toast-theme-manager.d.ts +36 -0
package/dist/types/courier-toast-theme.d.ts +42 -0
package/dist/types/toast.d.ts +45 -0
package/package.json +41 -0

package/README.md ADDED Viewed

@@ -0,0 +1,46 @@
+# @trycourier/courier-ui-toast
+Toast notification components for the Courier web UI.
+**Using React?** Use the [@trycourier/courier-react](../courier-react/) package.
+## Installation
+```sh
+npm install @trycourier/courier-ui-toast
+```
+## Usage
+Check out the [Courier documentation](https://www.courier.com/docs/sdk-libraries/courier-ui-toast-web) for a full guide to Courier Toast Web Components.
+## Examples
+### `courier-toast`
+```html
+<body>
+  <courier-toast id="toast"></courier-toast>
+  <script type="module">
+    import { Courier } from '@trycourier/courier-ui-toast';
+    // Generate a JWT for your user (do this on your backend server)
+    const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
+    // Authenticate the user
+    Courier.shared.signIn({
+      userId: $YOUR_USER_ID,
+      jwt: jwt
+    });
+  </script>
+</body>
+```
+## Share feedback with Courier
+Have an idea or feedback about our SDKs? Let us know!
+Open an issue: [Courier Web Issues](https://github.com/trycourier/courier-web/issues)

package/dist/components/__tests__/courier-toast-item.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/__tests__/courier-toast.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/courier-toast-item.d.ts ADDED Viewed

@@ -0,0 +1,95 @@
+import { CourierBaseElement } from '@trycourier/courier-ui-core';
+import { CourierToastThemeManager } from '../types/courier-toast-theme-manager';
+import { CourierToastTheme } from '../types/courier-toast-theme';
+import { InboxMessage } from '@trycourier/courier-js';
+import { CourierToastItemActionClickEvent, CourierToastItemClickEvent, CourierToastItemFactoryProps } from '../types/toast';
+/**
+ * Default implementation of a Toast item.
+ *
+ * @see {@link CourierToast}
+ * @public
+ */
+export declare class CourierToastItem extends CourierBaseElement {
+    /** The animation duration to fade out a dismissed toast before its element is removed. */
+    private static readonly dismissAnimationTimeoutMs;
+    private _themeManager;
+    private _themeSubscription;
+    private _message;
+    private _customToastItemContent?;
+    /** Whether this toast item is auto-dismissed. */
+    private readonly _autoDismiss;
+    /** The timeout before the toast item is auto-dismissed, applicable if _autoDismiss is true. */
+    private readonly _autoDismissTimeoutMs;
+    private _onItemDismissedCallback;
+    private _onToastItemClickCallback;
+    private _onToastItemActionClickCallback;
+    constructor(props: {
+        message: InboxMessage;
+        autoDismiss: boolean;
+        autoDismissTimeoutMs: number;
+        themeManager: CourierToastThemeManager;
+    });
+    /**
+     * Registers a handler called when the item is dismissed.
+     *
+     * @param handler - A function to be called when the item is dismissed.
+     */
+    onItemDismissed(handler: (props: {
+        message: InboxMessage;
+    }) => void): void;
+    /**
+     * Registers a handler for item click events.
+     *
+     * @param handler - A function to be called when the item is clicked.
+     */
+    onToastItemClick(handler: (props: CourierToastItemClickEvent) => void): void;
+    /**
+     * Registers a handler for item click events.
+     *
+     * @param handler - A function to be called when the item is clicked.
+     */
+    onToastItemActionClick(handler: (props: CourierToastItemActionClickEvent) => void): void;
+    /**
+     * 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?: (props: CourierToastItemFactoryProps) => HTMLElement): void;
+    /**
+     * 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?: number): void;
+    /** @override */
+    protected onComponentMounted(): void;
+    /** @override */
+    protected onComponentUnmounted(): void;
+    get theme(): CourierToastTheme;
+    /**
+     * @override
+     */
+    static get id(): string;
+    /**
+     * @override
+     */
+    static get observedAttributes(): string[];
+    /**
+     * 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.
+     */
+    private render;
+    /** Create the default content for this item. */
+    private createDefaultContent;
+    private get messageHasActions();
+    private createActionButton;
+    private onClick;
+}

package/dist/components/courier-toast.d.ts ADDED Viewed

@@ -0,0 +1,167 @@
+import { CourierBaseElement, CourierComponentThemeMode } from '@trycourier/courier-ui-core';
+import { CourierToastThemeManager } from '../types/courier-toast-theme-manager';
+import { CourierToastTheme } from '../types/courier-toast-theme';
+import { CourierToastItemActionClickEvent, CourierToastItemClickEvent, CourierToastItemFactoryProps, CourierToastDismissButtonOption } from '../types/toast';
+/**
+ * An embeddable and customizable toast component, fed by data from Courier Inbox.
+ *
+ * @example
+ *
+ * Embedding the default toast component on a webpage.
+ * ```
+ * <html>
+ * <body>
+ * <courier-toast></courier-toast>
+ *
+ * <script type="module">
+ * import { Courier } from "@trycourier/courier-ui-toast";
+ *
+ * // Authenticate the user
+ * Courier.shared.signIn({ userId, jwt });
+ * </script>
+ * </body>
+ * </html>
+ * ```
+ *
+ * @public
+ */
+export declare class CourierToast extends CourierBaseElement {
+    private _themeManager;
+    private _themeSubscription;
+    private _toastStyle?;
+    private _authListener?;
+    private _datastoreListener;
+    private _autoDismiss;
+    private _autoDismissTimeoutMs;
+    private _dismissButtonOption;
+    private _customToastItem?;
+    private _customToastItemContent?;
+    private _onItemClick?;
+    private _onItemActionClick?;
+    /** Default layout props. */
+    private readonly _defaultLayoutProps;
+    /**
+     * 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
+     */
+    static observedAttributes: string[];
+    constructor(props: {
+        themeManager?: CourierToastThemeManager;
+    });
+    /** Set the handler invoked when a toast item is clicked. */
+    onToastItemClick(handler?: (props: CourierToastItemClickEvent) => void): void;
+    /** Set the handler invoked when a toast item action button is clicked. */
+    onToastItemActionClick(handler?: (props: CourierToastItemActionClickEvent) => void): void;
+    /** Enable auto-dismiss for toast items. */
+    enableAutoDismiss(): void;
+    /** Disable auto-dismiss for toast items. */
+    disableAutoDismiss(): void;
+    /**
+     * 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: number): void;
+    /**
+     * Set the light theme for the toast.
+     * @param theme - The light theme object to set.
+     */
+    setLightTheme(theme: CourierToastTheme): void;
+    /**
+     * Set the dark theme for the toast.
+     * @param theme - The dark theme object to set.
+     */
+    setDarkTheme(theme: CourierToastTheme): void;
+    /**
+     * Set the dismiss button display option.
+     *
+     * @param option - a value of {@link CourierToastDismissButtonOption}
+     */
+    setDismissButton(option: CourierToastDismissButtonOption): void;
+    /**
+     * Set the theme mode.
+     *
+     * @param mode - The theme mode, one of "dark", "light", or "system".
+     */
+    setMode(mode: CourierComponentThemeMode): void;
+    /**
+     * 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?: (props: CourierToastItemFactoryProps) => HTMLElement): void;
+    /**
+     * 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?: (props: CourierToastItemFactoryProps) => HTMLElement): void;
+    /**
+     * 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
+     */
+    private dismissToastForMessage;
+    /**
+     * @override
+     */
+    protected onComponentMounted(): void;
+    /**
+     * @override
+     */
+    protected onComponentUnmounted(): void;
+    /**
+     * 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
+     */
+    protected attributeChangedCallback(name: string, _: string, newValue: string): void;
+    private get theme();
+    /** Refresh the styles tag, if it exists, with the current theme. */
+    private refreshStyles;
+    private authChangedCallback;
+    private removeAllItems;
+    private addToastItem;
+    private createToastItem;
+    private createDefaultToastItem;
+    private createCustomToastItem;
+    private datastoreAddMessageListener;
+    private datastoreRemoveMessageListener;
+    private getStyles;
+    /** Get the top item's (i.e. the fully visible item's) height. */
+    private get topStackItemHeight();
+    private resizeContainerToHeight;
+    /** Whether the dismiss button should only be shown on hover. */
+    private get showDismissOnHover();
+    /** Whether to show the dismiss button. The button is visible (either always or on hover) if not explicitly disabled. */
+    private get showDismiss();
+    /** @override */
+    static get id(): string;
+    private static isDismissButtonOption;
+}

package/dist/datastore/__tests__/toast-datastore.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/datastore/toast-datastore-events.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { InboxMessage } from '@trycourier/courier-js';
+/**
+ * The set of {@link CourierToastDatastore} events for which listeners can be added.
+ *
+ * @public
+ */
+export declare class CourierToastDatastoreEvents {
+    onMessageAdd?(_: InboxMessage): void;
+    onMessageRemove?(_: InboxMessage): void;
+    onError?(_: Error): void;
+}

package/dist/datastore/toast-datastore-listener.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { CourierToastDatastoreEvents } from './toast-datastore-events';
+/**
+ * Listener containing callbacks for {@link CourierToastDatastore} events.
+ *
+ * @public
+ */
+export declare class CourierToastDatastoreListener {
+    readonly events: CourierToastDatastoreEvents;
+    constructor(events: CourierToastDatastoreEvents);
+    /** Remove this listener. Callbacks will no longer be invoked after remove is called. */
+    remove(): void;
+}

package/dist/datastore/toast-datastore.d.ts ADDED Viewed

@@ -0,0 +1,81 @@
+import { InboxMessage } from '@trycourier/courier-js';
+import { CourierToastDatastoreListener } from './toast-datastore-listener';
+/**
+ * Shared datastore for Courier toasts.
+ *
+ * This datastore listens to and stores Courier Inbox messages.
+ *
+ * @public
+ */
+export declare class CourierToastDatastore {
+    /** Shared instance. Access via {@link CourierToastDatastore.shared}. */
+    private static instance;
+    /** FIFO stack of toast messages. The end of the array is index 0 of the stack. */
+    private _dataset;
+    /** Set of listeners whose handlers will be called when the datastore changes. */
+    private _datastoreListeners;
+    /** The shared instance of CourierToastDatastore, used to access all public methods. */
+    static get shared(): CourierToastDatastore;
+    /**
+     * Add a listener whose handlers are called when there are changes to the datastore.
+     *
+     * @param listener - an implementation of {@link CourierToastDatastoreListener}
+     */
+    addDatastoreListener(listener: CourierToastDatastoreListener): void;
+    /**
+     * 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: CourierToastDatastoreListener): void;
+    /**
+     * 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}
+     */
+    listenForMessages(): Promise<void>;
+    /**
+     * 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: InboxMessage): number;
+    /**
+     * 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: InboxMessage): void;
+    /**
+     * 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: InboxMessage): void;
+    /** Access the shared instance with {@link CourierToastDatastore.shared}. */
+    private constructor();
+}

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Courier } from '@trycourier/courier-js';
+export * from './components/courier-toast';
+export * from './components/courier-toast-item';
+export * from './types/courier-toast-theme';
+export * from './types/courier-toast-theme-manager';
+export * from './types/toast';
+export * from './datastore/toast-datastore';
+export * from './datastore/toast-datastore-listener';
+export * from './datastore/toast-datastore-events';
+export { Courier };
+export type { CourierProps, CourierClientOptions, CourierBrand, CourierApiUrls, CourierUserPreferences, CourierUserPreferencesStatus, CourierUserPreferencesChannel, CourierUserPreferencesPaging, CourierUserPreferencesTopic, CourierUserPreferencesTopicResponse, CourierDevice, CourierToken, CourierGetInboxMessageResponse, CourierGetInboxMessagesResponse, InboxMessage, InboxAction, InboxMessageEventEnvelope, } from '@trycourier/courier-js';
+export type { CourierComponentThemeMode } from '@trycourier/courier-ui-core';

package/dist/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@trycourier/courier-ui-core"),require("@trycourier/courier-js")):"function"==typeof define&&define.amd?define(["exports","@trycourier/courier-ui-core","@trycourier/courier-js"],e):e((t="undefined"!=typeof globalThis?globalThis:t\|\|self).CourierUIToast={},t.CourierUICore,t.CourierJS)}(this,(function(t,e,s){"use strict";var i=Object.defineProperty,o=(t,e,s)=>((t,e,s)=>e in t?i(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s)(t,"symbol"!=typeof e?e+"":e,s);const n={item:{backgroundColor:e.CourierColors.white[500],hoverBackgroundColor:e.CourierColors.gray[200],activeBackgroundColor:e.CourierColors.gray[500],shadow:`0px 4px 8px -2px ${e.CourierColors.black[50020]}`,border:`1px solid ${e.CourierColors.gray[500]}`,borderRadius:"8px",title:{size:"11pt",weight:"400",color:e.CourierColors.black[500]},body:{size:"11pt",weight:"400",color:e.CourierColors.gray[600]},icon:{color:e.CourierColors.black[500],svg:e.CourierIconSVGs.inbox},dismissIcon:{color:e.CourierColors.black[500],svg:e.CourierIconSVGs.remove},autoDismissBarColor:e.CourierColors.blue[400],actions:{backgroundColor:"transparent",hoverBackgroundColor:e.CourierColors.gray[200],activeBackgroundColor:e.CourierColors.gray[500],border:`1px solid ${e.CourierColors.gray[500]}`,borderRadius:"4px",shadow:"0px 1px 2px 0px rgba(0, 0, 0, 0.06)",font:{color:e.CourierColors.black[500],size:"14px"}}}},r={item:{backgroundColor:e.CourierColors.black[500],hoverBackgroundColor:e.CourierColors.gray[400],activeBackgroundColor:e.CourierColors.gray[600],shadow:`0px 4px 8px -2px ${e.CourierColors.gray[400]}`,border:`1px solid ${e.CourierColors.black[500]}`,borderRadius:"8px",title:{size:"11pt",weight:"400",color:e.CourierColors.white[500]},body:{size:"11pt",weight:"400",color:e.CourierColors.gray[500]},icon:{color:e.CourierColors.white[500],svg:e.CourierIconSVGs.inbox},dismissIcon:{color:e.CourierColors.white[500],svg:e.CourierIconSVGs.remove},autoDismissBarColor:e.CourierColors.blue[400],actions:{backgroundColor:e.CourierColors.black[400],hoverBackgroundColor:e.CourierColors.white[50010],activeBackgroundColor:e.CourierColors.white[50020],border:`1px solid ${e.CourierColors.gray[400]}`,borderRadius:"4px",shadow:`0px 1px 2px 0px ${e.CourierColors.white[50010]}`,font:{color:e.CourierColors.white[500],size:"14px"}}}},a=(t,e)=>{var s,i,o,a,l,d,h,c;const u="light"===t?n:r;return{item:{...u.item,...e.item,title:{...null==(s=u.item)?void 0:s.title,...null==(i=e.item)?void 0:i.title},body:{...null==(o=u.item)?void 0:o.body,...null==(a=e.item)?void 0:a.body},icon:{...null==(l=u.item)?void 0:l.icon,...null==(d=e.item)?void 0:d.icon},dismissIcon:{...null==(h=u.item)?void 0:h.dismissIcon,...null==(c=e.item)?void 0:c.dismissIcon}}}};class l extends e.CourierThemeManager{constructor(t){super(t),o(this,"THEME_CHANGE_EVENT","courier_toast_theme_change")}getDefaultLightTheme(){return n}getDefaultDarkTheme(){return r}mergeTheme(t,e){return a(t,e)}subscribe(t){return{...super.subscribe(t),manager:this}}}const d=class t extends e.CourierBaseElement{constructor(t){super(),o(this,"_themeManager"),o(this,"_themeSubscription"),o(this,"_message"),o(this,"_customToastItemContent"),o(this,"_autoDismiss"),o(this,"_autoDismissTimeoutMs"),o(this,"_onItemDismissedCallback",null),o(this,"_onToastItemClickCallback",null),o(this,"_onToastItemActionClickCallback",null),this._message=t.message,this._autoDismiss=t.autoDismiss,this._autoDismissTimeoutMs=t.autoDismissTimeoutMs,this._themeManager=t.themeManager,this._themeSubscription=this._themeManager.subscribe((t=>{this.render()}))}onItemDismissed(t){this._onItemDismissedCallback=t}onToastItemClick(t){this._onToastItemClickCallback=t,this.render()}onToastItemActionClick(t){this._onToastItemActionClickCallback=t,this.render()}setToastItemContent(t){this._customToastItemContent=t}dismiss(e=t.dismissAnimationTimeoutMs){this.classList.add("dismissing"),setTimeout((()=>{this.remove(),this._onItemDismissedCallback&&this._onItemDismissedCallback({message:this._message})}),e)}onComponentMounted(){this.render()}onComponentUnmounted(){this._themeSubscription.unsubscribe()}get theme(){return this._themeManager.getTheme()}static get id(){return"courier-toast-item"}static get observedAttributes(){return[]}render(){for(var t,s,i,o;this.firstChild;)this.removeChild(this.firstChild);this.removeEventListener("click",this.onClick);const n=document.createElement("div");if(n.classList.add("overflow-hidden-container"),this.appendChild(n),this._autoDismiss){const t=document.createElement("div");t.classList.add("auto-dismiss"),n.append(t)}this._customToastItemContent?n.appendChild(this._customToastItemContent({message:this._message,autoDismiss:this._autoDismiss,autoDismissTimeoutMs:this._autoDismissTimeoutMs})):n.appendChild(this.createDefaultContent()),this._onToastItemClickCallback&&this.classList.add("clickable"),this.addEventListener("click",this.onClick);const r=new e.CourierIcon(null==(s=null==(t=this.theme.item)?void 0:t.dismissIcon)?void 0:s.color,null==(o=null==(i=this.theme.item)?void 0:i.dismissIcon)?void 0:o.svg);r.classList.add("dismiss"),r.addEventListener("click",(t=>{t.stopPropagation(),this.remove(),this._onItemDismissedCallback&&this._onItemDismissedCallback({message:this._message})})),this.appendChild(r)}createDefaultContent(){var t,s,i,o,n;const r=document.createElement("div");r.classList.add("content"),this.append(r);const a=new e.CourierIcon(null==(s=null==(t=this.theme.item)?void 0:t.icon)?void 0:s.color,null==(o=null==(i=this.theme.item)?void 0:i.icon)?void 0:o.svg);a.classList.add("icon"),r.appendChild(a);const l=document.createElement("div");l.classList.add("text-content"),r.appendChild(l);const d=document.createElement("p");d.classList.add("title"),d.textContent=this._message.title??"",l.appendChild(d);const h=document.createElement("p");if(h.classList.add("body"),h.textContent=this._message.preview??this._message.body??"",l.appendChild(h),this.messageHasActions){const t=document.createElement("div");t.classList.add("actions-container"),l.appendChild(t),null==(n=this._message.actions)\|\|n.forEach((e=>{const s=this.createActionButton(e);t.appendChild(s)}))}return r}get messageHasActions(){return this._message.actions&&this._message.actions.length>0}createActionButton(t){var s,i,o,n,r;const a=null==(s=this._themeManager.getTheme().item)?void 0:s.actions;return new e.CourierButton({mode:this._themeManager.mode,text:t.content,variant:"secondary",backgroundColor:null==a?void 0:a.backgroundColor,hoverBackgroundColor:null==a?void 0:a.hoverBackgroundColor,activeBackgroundColor:null==a?void 0:a.activeBackgroundColor,border:null==a?void 0:a.border,borderRadius:null==a?void 0:a.borderRadius,shadow:null==a?void 0:a.shadow,fontFamily:null==(i=null==a?void 0:a.font)?void 0:i.family,fontSize:null==(o=null==a?void 0:a.font)?void 0:o.size,fontWeight:null==(n=null==a?void 0:a.font)?void 0:n.weight,textColor:null==(r=null==a?void 0:a.font)?void 0:r.color,onClick:()=>{this._onToastItemActionClickCallback&&this._onToastItemActionClickCallback({message:this._message,action:t})}})}onClick(t){t.stopPropagation(),this._onToastItemClickCallback&&this._onToastItemClickCallback({message:this._message})}};o(d,"dismissAnimationTimeoutMs",300);let h=d;e.registerElement(h);const c=class t{constructor(){o(this,"_dataset",[]),o(this,"_datastoreListeners",[])}static get shared(){return t.instance\|\|(t.instance=new t),t.instance}addDatastoreListener(t){this._datastoreListeners.push(t)}removeDatastoreListener(t){this._datastoreListeners=this._datastoreListeners.filter((e=>e!==t))}async listenForMessages(){var t,e,i,o,n,r,a;try{const a=null==(t=s.Courier.shared.client)?void 0:t.inbox.socket;if(!a)return void(null==(i=null==(e=s.Courier.shared.client)?void 0:e.options.logger)\|\|i.info("CourierInbox socket not available"));if(a.addMessageEventListener((t=>{if(t.event===s.InboxMessageEvent.NewMessage){const e=t.data;this.addMessage(e)}})),a.isConnecting\|\|a.isOpen)return void(null==(r=null==(o=s.Courier.shared.client)?void 0:o.options.logger)\|\|r.info(`Inbox socket already connecting or open for client ID: [${null==(n=s.Courier.shared.client)?void 0:n.options.connectionId}]`));a.connect()}catch(l){null==(a=s.Courier.shared.client)\|\|a.options.logger.error("Error listening for messages:",l),this._datastoreListeners.forEach((t=>{var e,s;null==(s=(e=t.events).onError)\|\|s.call(e,l)}))}}toastIndexOfMessage(t){const e=this._dataset.findIndex((e=>e.messageId===t.messageId));return e<0?e:this._dataset.length-e-1}addMessage(t){this._dataset.push(t),this._datastoreListeners.forEach((e=>{e.events.onMessageAdd&&e.events.onMessageAdd(t)}))}removeMessage(t){const e=this._dataset.findIndex((e=>e.messageId===t.messageId));e<0\|\|(this._dataset.splice(e,1),this._datastoreListeners.forEach((e=>{e.events.onMessageRemove&&e.events.onMessageRemove(t)})))}};o(c,"instance");let u=c;class m{constructor(t){this.events=t}remove(){u.shared.removeDatastoreListener(this)}}const g=class t extends e.CourierBaseElement{constructor(t){super(),o(this,"_themeManager"),o(this,"_themeSubscription"),o(this,"_toastStyle"),o(this,"_authListener"),o(this,"_datastoreListener"),o(this,"_autoDismiss",!1),o(this,"_autoDismissTimeoutMs",5e3),o(this,"_dismissButtonOption","auto"),o(this,"_customToastItem"),o(this,"_customToastItemContent"),o(this,"_onItemClick"),o(this,"_onItemActionClick"),o(this,"_defaultLayoutProps",{position:"fixed",width:"380px",top:"30px",right:"30px",zIndex:999}),this._themeManager=(null==t?void 0:t.themeManager)??new l(n),this._themeSubscription=this._themeManager.subscribe((t=>{this.refreshStyles()})),this._datastoreListener=new m({onMessageAdd:this.datastoreAddMessageListener.bind(this),onMessageRemove:this.datastoreRemoveMessageListener.bind(this)})}onToastItemClick(t){this._onItemClick=t}onToastItemActionClick(t){this._onItemActionClick=t}enableAutoDismiss(){this._autoDismiss=!0}disableAutoDismiss(){this._autoDismiss=!1}setAutoDismissTimeoutMs(t){this._autoDismissTimeoutMs=t}setLightTheme(t){this._themeManager.setLightTheme(t)}setDarkTheme(t){this._themeManager.setDarkTheme(t)}setDismissButton(t){this._dismissButtonOption=t,this.refreshStyles()}setMode(t){this._themeManager.setMode(t)}setToastItem(t){this._customToastItem=t}setToastItemContent(t){this._customToastItemContent=t}dismissToastForMessage(t){this.childNodes.forEach((e=>{e.dataset.courierMessageId===t.messageId&&(e instanceof h?e.dismiss():e.remove())}))}onComponentMounted(){this._toastStyle=e.injectGlobalStyle(t.id,this.getStyles(this.theme)),u.shared.addDatastoreListener(this._datastoreListener),s.Courier.shared.addAuthenticationListener(this.authChangedCallback.bind(this)),u.shared.listenForMessages()}onComponentUnmounted(){var t,e;this._datastoreListener.remove(),null==(t=this._authListener)\|\|t.remove(),null==(e=this._toastStyle)\|\|e.remove(),this._themeManager.cleanup(),this._themeSubscription.unsubscribe()}attributeChangedCallback(e,s,i){switch(e){case"auto-dismiss":"false"===i?this.disableAutoDismiss():this.enableAutoDismiss();break;case"auto-dismiss-timeout-ms":this.setAutoDismissTimeoutMs(parseInt(i,10));break;case"dismiss-button":i&&t.isDismissButtonOption(i)?this.setDismissButton(i):this.setDismissButton("auto");break;case"light-theme":i&&this.setLightTheme(JSON.parse(i));break;case"dark-theme":i&&this.setDarkTheme(JSON.parse(i));break;case"mode":this._themeManager.setMode(i)}}get theme(){return this._themeManager.getTheme()}refreshStyles(){this._toastStyle&&(this._toastStyle.textContent=this.getStyles(this.theme))}authChangedCallback(){this.removeAllItems(),u.shared.listenForMessages()}removeAllItems(){for(;this.firstChild;)this.removeChild(this.firstChild)}addToastItem(t){const e=this.createToastItem(t);return e.dataset.courierMessageId=t.messageId,this.appendChild(e),this.resizeContainerToHeight(this.topStackItemHeight),e}createToastItem(t){return this._customToastItem?this.createCustomToastItem(t):this.createDefaultToastItem(t)}createDefaultToastItem(t){const e=new h({message:t,autoDismiss:this._autoDismiss,autoDismissTimeoutMs:this._autoDismissTimeoutMs,themeManager:this._themeManager});return e.onItemDismissed((t=>{this.resizeContainerToHeight(this.topStackItemHeight)})),this._customToastItemContent&&e.setToastItemContent(this._customToastItemContent),this._onItemClick&&e.onToastItemClick(this._onItemClick),this._onItemActionClick&&e.onToastItemActionClick(this._onItemActionClick),this._autoDismiss&&setTimeout(e.dismiss.bind(e),this._autoDismissTimeoutMs),e}createCustomToastItem(t){if(!this._customToastItem)throw Error("Attempted to create customToastItem, but none is set");const e=this._customToastItem({message:t,autoDismiss:this._autoDismiss,autoDismissTimeoutMs:this._autoDismissTimeoutMs});return this._autoDismiss&&setTimeout((()=>{this.removeChild(e)}),this._autoDismissTimeoutMs),e.addEventListener("click",(()=>{this._onItemClick&&this._onItemClick({message:t})})),e}datastoreAddMessageListener(t){this.addToastItem(t)}datastoreRemoveMessageListener(t){this.dismissToastForMessage(t)}getStyles(e){var s,i,o,n,r,a;const l=e.item;return[`\n ${t.id} {\n position: ${this._defaultLayoutProps.position};\n z-index: ${this._defaultLayoutProps.zIndex};\n top: ${this._defaultLayoutProps.top};\n right: ${this._defaultLayoutProps.right};\n width: ${this._defaultLayoutProps.width};\n }\n `,`\n ${h.id}:last-child {\n top: 0;\n right: 0;\n }\n\n ${h.id}:nth-last-child(2) {\n top: 12px;\n bottom: -12px;\n --scale: 0.95\n }\n\n ${h.id}:nth-last-child(3) {\n top: 24px;\n bottom: -24px;\n --scale: 0.9;\n }\n\n ${h.id}:nth-last-child(n+4) {\n top: 24px;\n bottom: -24px;\n --scale: 0.9;\n visibility: hidden;\n }\n\n ${h.id}:nth-last-child(n+2) > .overflow-hidden-container {\n opacity: 0;\n }\n `,`\n ${h.id} {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n background-color: ${null==l?void 0:l.backgroundColor};\n box-shadow: ${null==l?void 0:l.shadow};\n border: ${null==l?void 0:l.border};\n border-radius: ${null==l?void 0:l.borderRadius};\n transition: 0.2s ease-in-out;\n cursor: default;\n\n opacity: 0;\n transform: translate(0, -10px) scaleX(var(--scale, 1));\n animation: show 0.3s ease-in-out forwards;\n }\n\n ${h.id} > .overflow-hidden-container {\n height: 100%;\n width: 100%;\n border-radius: ${null==l?void 0:l.borderRadius};\n overflow: hidden;\n }\n\n ${h.id}.dismissing {\n animation: hide 0.3s ease-in-out forwards;\n }\n\n @keyframes show {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n transform: scaleX(var(--scale, 1));\n }\n }\n\n @keyframes hide {\n 0% {\n opacity: 1;\n transform: scaleX(var(--scale, 1));\n }\n\n 100% {\n opacity: 0;\n transform: scaleX(var(--scale, 1));\n }\n }\n\n ${h.id}.clickable:last-child {\n cursor: pointer;\n }\n\n ${h.id}.clickable:last-child:hover {\n background-color: ${null==l?void 0:l.hoverBackgroundColor};\n }\n\n ${h.id}.clickable:last-child:active {\n background-color: ${null==l?void 0:l.activeBackgroundColor};\n }\n\n ${h.id}.clickable:nth-last-child(n+2) {\n pointer-events: none;\n }\n `,`\n ${h.id} > .dismiss {\n position: absolute;\n visibility: hidden;\n opacity: 0%;\n top: -10px;\n right: -10px;\n background-color: ${null==l?void 0:l.backgroundColor};\n border: ${null==l?void 0:l.border};\n padding: 3px;\n border-radius: 50%;\n font-size: 12pt;\n box-shadow: ${null==l?void 0:l.shadow};\n cursor: pointer;\n transition: 0.2s ease-in-out;\n }\n\n ${h.id} > .dismiss:hover {\n background-color: ${null==l?void 0:l.hoverBackgroundColor};\n }\n\n ${h.id} > .dismiss:active {\n background-color: ${null==l?void 0:l.activeBackgroundColor};\n }\n\n ${h.id}:last-child${this.showDismissOnHover?":hover":""} > .dismiss {\n visibility: ${this.showDismiss?"visible":"hidden"};\n opacity: 100%;\n transition: 0.2s ease-in-out;\n }\n `,`\n ${h.id} > .overflow-hidden-container > .auto-dismiss {\n width: 100%;\n height: 5px;\n background-color: ${null==l?void 0:l.autoDismissBarColor};\n animation: auto-dismiss ${this._autoDismissTimeoutMs}ms ease-in-out forwards;\n }\n\n @keyframes auto-dismiss {\n 100% {\n width: 0px;\n }\n }\n `,`\n ${h.id} > .overflow-hidden-container > .content {\n display: flex;\n gap: 12px;\n align-items: center;\n align-self: stretch;\n box-sizing: border-box;\n padding: 12px;\n }\n\n ${h.id} > .overflow-hidden-container > .content > .text-content {\n }\n\n ${h.id} > .overflow-hidden-container > .content > .icon {\n }\n\n ${h.id} > .overflow-hidden-container > .content > .text-content > .title {\n margin: 0;\n font-weight: ${null==(s=null==l?void 0:l.title)?void 0:s.weight};\n font-size: ${null==(i=null==l?void 0:l.title)?void 0:i.size};\n color: ${null==(o=null==l?void 0:l.title)?void 0:o.color};\n }\n\n ${h.id} > .overflow-hidden-container > .content > .text-content > .body {\n margin: 8px 0 0 0;\n font-weight: ${null==(n=null==l?void 0:l.body)?void 0:n.weight};\n font-size: ${null==(r=null==l?void 0:l.body)?void 0:r.size};\n line-height: 150%;\n color: ${null==(a=null==l?void 0:l.body)?void 0:a.color};\n }\n `,`\n ${h.id} > .overflow-hidden-container > .content > .text-content > .actions-container {\n display: flex;\n gap: 8px;\n margin-top: 12px;\n }\n `].join("")}get topStackItemHeight(){if(this.lastChild){return`${this.lastChild.getBoundingClientRect().height}px`}return"0px"}resizeContainerToHeight(t){this.style.height=t}get showDismissOnHover(){return!(!this._autoDismiss\|\|"auto"!==this._dismissButtonOption)\|\|"hover"===this._dismissButtonOption}get showDismiss(){return"hidden"!==this._dismissButtonOption}static get id(){return"courier-toast"}static isDismissButtonOption(t){return["visible","hidden","hover","auto"].includes(t)}};o(g,"observedAttributes",["auto-dismiss","auto-dismiss-timeout-ms","dismiss-button","light-theme","dark-theme","mode"]);let C=g;e.registerElement(C);s.Courier.shared.courierUserAgentName="courier-ui-toast",s.Courier.shared.courierUserAgentVersion="1.0.0",Object.defineProperty(t,"Courier",{enumerable:!0,get:()=>s.Courier}),t.CourierToast=C,t.CourierToastDatastore=u,t.CourierToastDatastoreEvents=class{onMessageAdd(t){}onMessageRemove(t){}onError(t){}},t.CourierToastDatastoreListener=m,t.CourierToastItem=h,t.CourierToastThemeManager=l,t.defaultDarkTheme=r,t.defaultLightTheme=n,t.mergeTheme=a,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));
2	+ //# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../src/types/courier-toast-theme.ts","../src/types/courier-toast-theme-manager.ts","../src/components/courier-toast-item.ts","../src/datastore/toast-datastore.ts","../src/datastore/toast-datastore-listener.ts","../src/components/courier-toast.ts","../src/index.ts","../src/datastore/toast-datastore-events.ts"],"sourcesContent":["import { CourierColors, CourierIconSVGs, SystemThemeMode, CourierFontTheme, CourierIconTheme } from \"@trycourier/courier-ui-core\";\r\n\r\n// Re-export common types from core for convenience\r\n\r\n/** @public */\r\nexport type CourierToastFontTheme = CourierFontTheme;\r\n\r\n/** @public */\r\nexport type CourierToastIconTheme = CourierIconTheme;\r\n\r\n/** @public */\r\nexport type CourierToastItemTheme = {\r\n backgroundColor?: string;\r\n hoverBackgroundColor?: string;\r\n activeBackgroundColor?: string;\r\n autoDismissBarColor?: string;\r\n title?: CourierToastFontTheme;\r\n body?: CourierToastFontTheme;\r\n icon?: CourierToastIconTheme;\r\n dismissIcon?: CourierToastIconTheme;\r\n shadow?: string;\r\n border?: string;\r\n borderRadius?: string;\r\n actions?: {\r\n backgroundColor?: string;\r\n hoverBackgroundColor?: string;\r\n activeBackgroundColor?: string;\r\n border?: string;\r\n borderRadius?: string;\r\n shadow?: string;\r\n font?: CourierToastFontTheme;\r\n }\r\n}\r\n\r\n/** @public */\r\nexport type CourierToastTheme = {\r\n item?: CourierToastItemTheme;\r\n};\r\n\r\n/** @public */\r\nexport const defaultLightTheme: CourierToastTheme = {\r\n item: {\r\n backgroundColor: CourierColors.white[500],\r\n hoverBackgroundColor: CourierColors.gray[200],\r\n activeBackgroundColor: CourierColors.gray[500],\r\n shadow: `0px 4px 8px -2px ${CourierColors.black[500_20]}`,\r\n border: `1px solid ${CourierColors.gray[500]}`,\r\n borderRadius: '8px',\r\n title: {\r\n size: '11pt',\r\n weight: '400',\r\n color: CourierColors.black[500],\r\n },\r\n body: {\r\n size: '11pt',\r\n weight: '400',\r\n color: CourierColors.gray[600],\r\n },\r\n icon: {\r\n color: CourierColors.black[500],\r\n svg: CourierIconSVGs.inbox,\r\n },\r\n dismissIcon: {\r\n color: CourierColors.black[500],\r\n svg: CourierIconSVGs.remove,\r\n },\r\n autoDismissBarColor: CourierColors.blue[400],\r\n actions: {\r\n backgroundColor: 'transparent',\r\n hoverBackgroundColor: CourierColors.gray[200],\r\n activeBackgroundColor: CourierColors.gray[500],\r\n border: `1px solid ${CourierColors.gray[500]}`,\r\n borderRadius: '4px',\r\n shadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.06)',\r\n font: {\r\n color: CourierColors.black[500],\r\n size: '14px',\r\n }\r\n }\r\n }\r\n};\r\n\r\n/** @public */\r\nexport const defaultDarkTheme: CourierToastTheme = {\r\n item: {\r\n backgroundColor: CourierColors.black[500],\r\n hoverBackgroundColor: CourierColors.gray[400],\r\n activeBackgroundColor: CourierColors.gray[600],\r\n shadow: `0px 4px 8px -2px ${CourierColors.gray[400]}`,\r\n border: `1px solid ${CourierColors.black[500]}`,\r\n borderRadius: '8px',\r\n title: {\r\n size: '11pt',\r\n weight: '400',\r\n color: CourierColors.white[500],\r\n },\r\n body: {\r\n size: '11pt',\r\n weight: '400',\r\n color: CourierColors.gray[500],\r\n },\r\n icon: {\r\n color: CourierColors.white[500],\r\n svg: CourierIconSVGs.inbox,\r\n },\r\n dismissIcon: {\r\n color: CourierColors.white[500],\r\n svg: CourierIconSVGs.remove,\r\n },\r\n autoDismissBarColor: CourierColors.blue[400],\r\n actions: {\r\n backgroundColor: CourierColors.black[400],\r\n hoverBackgroundColor: CourierColors.white[500_10],\r\n activeBackgroundColor: CourierColors.white[500_20],\r\n border: `1px solid ${CourierColors.gray[400]}`,\r\n borderRadius: '4px',\r\n shadow: `0px 1px 2px 0px ${CourierColors.white[500_10]}`,\r\n font: {\r\n color: CourierColors.white[500],\r\n size: '14px'\r\n }\r\n }\r\n }\r\n};\r\n\r\n/**\r\n * Deep merge themes, only overwriting non-optional properties.\r\n *\r\n * @public\r\n */\r\nexport const mergeTheme = (mode: SystemThemeMode, theme: CourierToastTheme): CourierToastTheme => {\r\n const defaultTheme = mode === 'light' ? defaultLightTheme : defaultDarkTheme;\r\n return {\r\n item: {\r\n ...defaultTheme.item,\r\n ...theme.item,\r\n title: {\r\n ...defaultTheme.item?.title,\r\n ...theme.item?.title\r\n },\r\n body: {\r\n ...defaultTheme.item?.body,\r\n ...theme.item?.body\r\n },\r\n icon: {\r\n ...defaultTheme.item?.icon,\r\n ...theme.item?.icon\r\n },\r\n dismissIcon: {\r\n ...defaultTheme.item?.dismissIcon,\r\n ...theme.item?.dismissIcon\r\n }\r\n }\r\n };\r\n};\r\n","import { CourierThemeManager, CourierThemeSubscription, SystemThemeMode } from \"@trycourier/courier-ui-core\";\r\nimport { CourierToastTheme, defaultDarkTheme, defaultLightTheme, mergeTheme } from \"./courier-toast-theme\";\r\n\r\n/**\r\n * @public\r\n */\r\nexport interface CourierToastThemeSubscription extends CourierThemeSubscription<CourierToastTheme> {\r\n manager: CourierToastThemeManager;\r\n}\r\n\r\n/**\r\n * Toast-specific theme manager that extends the abstract CourierThemeManager.\r\n * Provides toast theme management with light/dark mode support.\r\n *\r\n * @public\r\n */\r\nexport class CourierToastThemeManager extends CourierThemeManager<CourierToastTheme> {\r\n\r\n // Event ID for toast theme changes\r\n protected readonly THEME_CHANGE_EVENT: string = 'courier_toast_theme_change';\r\n\r\n constructor(initialTheme: CourierToastTheme) {\r\n super(initialTheme);\r\n }\r\n\r\n /**\r\n * Get the default light theme for toast\r\n */\r\n protected getDefaultLightTheme(): CourierToastTheme {\r\n return defaultLightTheme;\r\n }\r\n\r\n /**\r\n * Get the default dark theme for toast\r\n */\r\n protected getDefaultDarkTheme(): CourierToastTheme {\r\n return defaultDarkTheme;\r\n }\r\n\r\n /**\r\n * Merge the toast theme with defaults\r\n */\r\n protected mergeTheme(mode: SystemThemeMode, theme: CourierToastTheme): CourierToastTheme {\r\n return mergeTheme(mode, theme);\r\n }\r\n\r\n /**\r\n * Subscribe to toast theme changes\r\n * @param callback - Function to run when the theme changes\r\n * @returns Object with unsubscribe method to stop listening\r\n */\r\n public subscribe(callback: (theme: CourierToastTheme) => void): CourierToastThemeSubscription {\r\n const baseSubscription = super.subscribe(callback);\r\n return {\r\n ...baseSubscription,\r\n manager: this\r\n };\r\n }\r\n\r\n}\r\n","import { CourierBaseElement, CourierButton, CourierIcon, registerElement } from \"@trycourier/courier-ui-core\";\nimport { CourierToastThemeManager, CourierToastThemeSubscription } from \"../types/courier-toast-theme-manager\";\nimport { CourierToastTheme } from \"../types/courier-toast-theme\";\nimport { InboxAction, InboxMessage } from \"@trycourier/courier-js\";\nimport { CourierToastItemActionClickEvent, CourierToastItemClickEvent, CourierToastItemFactoryProps } from \"../types/toast\";\n\n/**\n * Default implementation of a Toast item.\n *\n * @see {@link CourierToast}\n * @public\n */\nexport class CourierToastItem extends CourierBaseElement {\n /** The animation duration to fade out a dismissed toast before its element is removed. */\n private static readonly dismissAnimationTimeoutMs = 300;\n\n private _themeManager: CourierToastThemeManager;\n private _themeSubscription: CourierToastThemeSubscription;\n private _message: InboxMessage;\n private _customToastItemContent?: (props: CourierToastItemFactoryProps) => HTMLElement;\n\n /** Whether this toast item is auto-dismissed. */\n private readonly _autoDismiss: boolean;\n\n /** The timeout before the toast item is auto-dismissed, applicable if _autoDismiss is true. */\n private readonly _autoDismissTimeoutMs: number;\n\n // Callbacks\n private _onItemDismissedCallback: ((props: { message: InboxMessage }) => void) | null = null;\n private _onToastItemClickCallback: ((props: CourierToastItemClickEvent) => void) | null = null;\n private _onToastItemActionClickCallback: ((props: CourierToastItemActionClickEvent) => void) | null = null;\n\n constructor(props: {\n message: InboxMessage,\n autoDismiss: boolean,\n autoDismissTimeoutMs: number,\n themeManager: CourierToastThemeManager,\n }) {\n\n super();\n this._message = props.message;\n this._autoDismiss = props.autoDismiss;\n this._autoDismissTimeoutMs = props.autoDismissTimeoutMs;\n\n this._themeManager = props.themeManager;\n this._themeSubscription = this._themeManager.subscribe((_: CourierToastTheme) => {\n this.render();\n });\n }\n\n /**\n * Registers a handler called when the item is dismissed.\n *\n * @param handler - A function to be called when the item is dismissed.\n */\n public onItemDismissed(handler: (props: { message: InboxMessage }) => void): void {\n this._onItemDismissedCallback = handler;\n }\n\n /**\n * Registers a handler for item click events.\n *\n * @param handler - A function to be called when the item is clicked.\n */\n public onToastItemClick(handler: (props: CourierToastItemClickEvent) => void): void {\n this._onToastItemClickCallback = handler;\n\n // Re-render to set/un-set the .clickable class\n this.render();\n }\n\n /**\n * Registers a handler for item click events.\n *\n * @param handler - A function to be called when the item is clicked.\n */\n public onToastItemActionClick(handler: (props: CourierToastItemActionClickEvent) => void): void {\n this._onToastItemActionClickCallback = handler;\n\n // Re-render to set/un-set the .clickable class\n this.render();\n }\n\n\n /**\n * Set a custom content element for the toast item, reusing the {@link CourierToastItem}\n * container, which provides styling, animations, and event handling.\n *\n * @param factory - Function that returns an `HTMLElement` to render as the content.\n */\n public setToastItemContent(factory?: (props: CourierToastItemFactoryProps) => HTMLElement) {\n this._customToastItemContent = factory;\n }\n\n /**\n * Dismiss the toast item.\n *\n * By default the toast fades out before it's removed. Set `timeoutMs` to\n * `0` to remove the item immediately.\n *\n * @param timeoutMs - the animation duration to fade out the toast item\n */\n public dismiss(timeoutMs: number = CourierToastItem.dismissAnimationTimeoutMs) {\n this.classList.add('dismissing');\n\n setTimeout(() => {\n this.remove();\n\n if (this._onItemDismissedCallback) {\n this._onItemDismissedCallback({ message: this._message });\n }\n }, timeoutMs);\n }\n\n /** @override */\n protected onComponentMounted(): void {\n this.render();\n }\n\n /** @override */\n protected onComponentUnmounted(): void {\n this._themeSubscription.unsubscribe();\n }\n\n get theme(): CourierToastTheme {\n return this._themeManager.getTheme();\n }\n\n /**\n * @override\n */\n static get id(): string {\n return 'courier-toast-item';\n }\n\n /**\n * @override\n */\n static get observedAttributes(): string[] {\n return [];\n }\n\n /**\n * Render a toast item, either with default content or custom content if\n * a content factory function is provided.\n *\n * Note: Styles for the toast item are set in {@link CourierToast} since\n * toasts are ephemeral by nature and we want to avoid adding/removing/duplicating\n * styles as {@link CourierToastItem}s enter/exit.\n */\n private render(): void {\n // Reset existing content and top-level listeners\n while (this.firstChild) {\n this.removeChild(this.firstChild);\n }\n this.removeEventListener('click', this.onClick);\n\n // Content and the auto-dismiss bar are wrapped in a container that hides overflow.\n // The standard dismiss button overflows the toast.\n const overflowHiddenContainer = document.createElement('div');\n overflowHiddenContainer.classList.add('overflow-hidden-container');\n this.appendChild(overflowHiddenContainer);\n\n // Auto-dismiss\n if (this._autoDismiss) {\n const autoDismiss = document.createElement('div');\n autoDismiss.classList.add('auto-dismiss');\n overflowHiddenContainer.append(autoDismiss);\n }\n\n // Content\n if (this._customToastItemContent) {\n overflowHiddenContainer.appendChild(this._customToastItemContent({ message: this._message, autoDismiss: this._autoDismiss, autoDismissTimeoutMs: this._autoDismissTimeoutMs }));\n } else {\n overflowHiddenContainer.appendChild(this.createDefaultContent());\n }\n\n // Click-ability\n if (this._onToastItemClickCallback) {\n this.classList.add('clickable');\n }\n\n this.addEventListener('click', this.onClick);\n\n // Dismiss button\n const dismiss = new CourierIcon(\n this.theme.item?.dismissIcon?.color,\n this.theme.item?.dismissIcon?.svg,\n );\n dismiss.classList.add('dismiss');\n dismiss.addEventListener('click', (event) => {\n event.stopPropagation();\n this.remove();\n\n if (this._onItemDismissedCallback) {\n this._onItemDismissedCallback({ message: this._message });\n }\n });\n this.appendChild(dismiss);\n }\n\n /** Create the default content for this item. */\n private createDefaultContent(): HTMLElement {\n const content = document.createElement('div');\n content.classList.add('content');\n this.append(content);\n\n const icon = new CourierIcon(\n this.theme.item?.icon?.color,\n this.theme.item?.icon?.svg,\n );\n icon.classList.add('icon');\n content.appendChild(icon);\n\n const textContent = document.createElement('div');\n textContent.classList.add('text-content');\n content.appendChild(textContent);\n\n const title = document.createElement('p');\n title.classList.add('title');\n title.textContent = this._message.title ?? '';\n textContent.appendChild(title);\n\n const body = document.createElement('p');\n body.classList.add('body');\n body.textContent = this._message.preview ?? this._message.body ?? '';\n textContent.appendChild(body);\n\n if (this.messageHasActions) {\n const actionsContainer = document.createElement('div');\n actionsContainer.classList.add('actions-container');\n textContent.appendChild(actionsContainer);\n\n this._message.actions?.forEach(action => {\n const button = this.createActionButton(action);\n actionsContainer.appendChild(button);\n });\n }\n\n return content;\n }\n\n private get messageHasActions() {\n return this._message.actions && this._message.actions.length > 0;\n }\n\n private createActionButton(action: InboxAction): CourierButton {\n const actionsTheme = this._themeManager.getTheme().item?.actions;\n\n return new CourierButton({\n mode: this._themeManager.mode,\n text: action.content,\n variant: 'secondary',\n backgroundColor: actionsTheme?.backgroundColor,\n hoverBackgroundColor: actionsTheme?.hoverBackgroundColor,\n activeBackgroundColor: actionsTheme?.activeBackgroundColor,\n border: actionsTheme?.border,\n borderRadius: actionsTheme?.borderRadius,\n shadow: actionsTheme?.shadow,\n fontFamily: actionsTheme?.font?.family,\n fontSize: actionsTheme?.font?.size,\n fontWeight: actionsTheme?.font?.weight,\n textColor: actionsTheme?.font?.color,\n onClick: () => {\n if (this._onToastItemActionClickCallback) {\n this._onToastItemActionClickCallback({ message: this._message, action });\n }\n }\n });\n\n\n }\n\n private onClick(event: Event) {\n event.stopPropagation();\n if (this._onToastItemClickCallback) {\n this._onToastItemClickCallback({ message: this._message });\n }\n }\n}\n\nregisterElement(CourierToastItem);\n","import { Courier, InboxMessage, InboxMessageEvent, InboxMessageEventEnvelope } from \"@trycourier/courier-js\";\nimport { CourierToastDatastoreListener } from \"./toast-datastore-listener\";\n\n/**\n * Shared datastore for Courier toasts.\n *\n * This datastore listens to and stores Courier Inbox messages.\n *\n * @public\n */\nexport class CourierToastDatastore {\n /** Shared instance. Access via {@link CourierToastDatastore.shared}. */\n private static instance: CourierToastDatastore;\n\n /** FIFO stack of toast messages. The end of the array is index 0 of the stack. */\n private _dataset: InboxMessage[] = [];\n\n /** Set of listeners whose handlers will be called when the datastore changes. */\n private _datastoreListeners: CourierToastDatastoreListener[] = [];\n\n /** The shared instance of CourierToastDatastore, used to access all public methods. */\n public static get shared(): CourierToastDatastore {\n if (!CourierToastDatastore.instance) {\n CourierToastDatastore.instance = new CourierToastDatastore();\n }\n\n return CourierToastDatastore.instance;\n }\n\n /**\n * Add a listener whose handlers are called when there are changes to the datastore.\n *\n * @param listener - an implementation of {@link CourierToastDatastoreListener}\n */\n public addDatastoreListener(listener: CourierToastDatastoreListener) {\n this._datastoreListeners.push(listener);\n }\n\n /**\n * Remove a previously added listener.\n *\n * Note: the `listener` param is matched by object reference, so callers must pass\n * the same object previously passed to {@link CourierToastDatastore.addDatastoreListener}.\n *\n * See also: {@link CourierToastDatastoreListener.remove}\n *\n * @param listener - a previously added listener implementation\n */\n public removeDatastoreListener(listener: CourierToastDatastoreListener) {\n this._datastoreListeners = this._datastoreListeners.filter(l => l !== listener);\n }\n\n /**\n * Start listening for toast messages.\n *\n * Calling this method will open a WebSocket connection to the Courier backend if one\n * is not already open.\n *\n * See also: {@link @trycourier/courier-js#Courier.shared.signIn} and {@link @trycourier/courier-js#Courier.shared.signOut}\n */\n public async listenForMessages() {\n try {\n const socketClient = Courier.shared.client?.inbox.socket;\n\n if (!socketClient) {\n Courier.shared.client?.options.logger?.info('CourierInbox socket not available');\n return;\n }\n\n socketClient.addMessageEventListener((messageEvent: InboxMessageEventEnvelope) => {\n if (messageEvent.event === InboxMessageEvent.NewMessage) {\n const message: InboxMessage = messageEvent.data as InboxMessage;\n\n this.addMessage(message);\n }\n });\n\n // If the socket is already connecting or open, return early\n if (socketClient.isConnecting || socketClient.isOpen) {\n Courier.shared.client?.options.logger?.info(`Inbox socket already connecting or open for client ID: [${Courier.shared.client?.options.connectionId}]`);\n return;\n }\n\n socketClient.connect();\n } catch (error: unknown) {\n Courier.shared.client?.options.logger.error('Error listening for messages:', error);\n this._datastoreListeners.forEach(listener => {\n listener.events.onError?.(error as Error);\n });\n }\n }\n\n /**\n * Find the position of an {@link @trycourier/courier-js#InboxMessage} in the toast stack.\n *\n * Notes:\n * - Since the stack is an array, with the last item being the \"top\" of the stack,\n * a toast's position in the underlying array is the inverse of its stack position.\n * - `message` is matched by {@link @trycourier/courier-js#InboxMessage.messageId}, not by object reference.\n *\n * @param message - the {@link @trycourier/courier-js#InboxMessage} to find in the stack\n */\n public toastIndexOfMessage(message: InboxMessage) {\n const position = this._dataset.findIndex(m => m.messageId === message.messageId);\n\n // Message not found\n if (position < 0) {\n return position;\n }\n\n // Return index from end of array (top of stack)\n return this._dataset.length - position - 1;\n }\n\n /**\n * Add an {@link @trycourier/courier-js#InboxMessage} toast item to the datastore.\n *\n * Calling this directly is useful to send test messages while developing with the Courier SDK.</p>\n *\n * @example\n * ```\n * CourierToastDatastore.shared.addMessage({\n * title: 'Lorem ipsum dolor sit',\n * body: 'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet',\n * messageId: '1'\n * });\n * ```\n *\n * @param message - the message to add as a toast item.\n */\n public addMessage(message: InboxMessage) {\n this._dataset.push(message);\n\n this._datastoreListeners.forEach(listener => {\n if (listener.events.onMessageAdd) {\n listener.events.onMessageAdd(message);\n }\n });\n }\n\n /**\n * Remove an {@link @trycourier/courier-js#InboxMessage} from the datastore.\n *\n * Note: `message` is matched by {@link @trycourier/courier-js#InboxMessage.messageId}, not by object reference\n */\n public removeMessage(message: InboxMessage) {\n const index = this._dataset.findIndex(m => m.messageId === message.messageId);\n if (index < 0) {\n return;\n }\n\n this._dataset.splice(index, /* deleteCount */ 1);\n\n this._datastoreListeners.forEach(listener => {\n if (listener.events.onMessageRemove) {\n listener.events.onMessageRemove(message);\n }\n });\n }\n\n /** Access the shared instance with {@link CourierToastDatastore.shared}. */\n // Prevent instantiation via constructor.\n private constructor() {}\n}\n","import { CourierToastDatastore } from \"./toast-datastore\";\nimport { CourierToastDatastoreEvents } from \"./toast-datastore-events\";\n\n/**\n * Listener containing callbacks for {@link CourierToastDatastore} events.\n *\n * @public\n */\nexport class CourierToastDatastoreListener {\n constructor(readonly events: CourierToastDatastoreEvents) {}\n\n /** Remove this listener. Callbacks will no longer be invoked after remove is called. */\n remove() {\n CourierToastDatastore.shared.removeDatastoreListener(this);\n }\n}\n","import { CourierBaseElement, CourierComponentThemeMode, injectGlobalStyle, registerElement } from \"@trycourier/courier-ui-core\";\nimport { CourierToastThemeManager, CourierToastThemeSubscription } from \"../types/courier-toast-theme-manager\";\nimport { CourierToastTheme, defaultLightTheme } from \"../types/courier-toast-theme\";\nimport { AuthenticationListener, Courier, InboxMessage } from \"@trycourier/courier-js\";\nimport { CourierToastItem } from \"./courier-toast-item\";\nimport { CourierToastItemActionClickEvent, CourierToastItemClickEvent, CourierToastItemFactoryProps } from \"../types/toast\";\nimport { CourierToastDismissButtonOption } from \"../types/toast\";\nimport { CourierToastDatastoreListener } from \"../datastore/toast-datastore-listener\";\nimport { CourierToastDatastore } from \"../datastore/toast-datastore\";\n\n/** Default set of CSS properties used to layout CourierToast. */\ntype CourierToastLayoutProps = {\n position?: string;\n width?: string;\n top?: string;\n right?: string;\n zIndex?: number;\n}\n\n/**\n * An embeddable and customizable toast component, fed by data from Courier Inbox.\n *\n * @example\n *\n * Embedding the default toast component on a webpage.\n * ```\n * <html>\n * <body>\n * <courier-toast></courier-toast>\n *\n * <script type=\"module\">\n * import { Courier } from \"@trycourier/courier-ui-toast\";\n *\n * // Authenticate the user\n * Courier.shared.signIn({ userId, jwt });\n * </script>\n * </body>\n * </html>\n * ```\n *\n * @public\n */\nexport class CourierToast extends CourierBaseElement {\n\n // Internally-maintained state\n private _themeManager: CourierToastThemeManager;\n private _themeSubscription: CourierToastThemeSubscription;\n private _toastStyle?: HTMLStyleElement;\n private _authListener?: AuthenticationListener;\n private _datastoreListener: CourierToastDatastoreListener;\n\n // Consumer-provided options\n private _autoDismiss: boolean = false;\n private _autoDismissTimeoutMs: number = 5000;\n private _dismissButtonOption: CourierToastDismissButtonOption = 'auto';\n private _customToastItem?: (props: CourierToastItemFactoryProps) => HTMLElement;\n private _customToastItemContent?: (props: CourierToastItemFactoryProps) => HTMLElement;\n\n // Consumer-provided callbacks\n private _onItemClick?: ((props: CourierToastItemClickEvent) => void);\n private _onItemActionClick?: ((props: CourierToastItemActionClickEvent) => void);\n\n /** Default layout props. */\n private readonly _defaultLayoutProps: CourierToastLayoutProps = {\n position: 'fixed',\n width: '380px',\n top: '30px',\n right: '30px',\n zIndex: 999,\n };\n\n /**\n * The names of all attributes for which the web component needs change notifications.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes\n */\n static observedAttributes = [\n 'auto-dismiss',\n 'auto-dismiss-timeout-ms',\n 'dismiss-button',\n 'light-theme',\n 'dark-theme',\n 'mode',\n ];\n\n constructor(props: {\n themeManager?: CourierToastThemeManager\n }) {\n super();\n\n this._themeManager = props?.themeManager ?? new CourierToastThemeManager(defaultLightTheme);\n this._themeSubscription = this._themeManager.subscribe((_: CourierToastTheme) => {\n this.refreshStyles();\n });\n this._datastoreListener = new CourierToastDatastoreListener({\n onMessageAdd: this.datastoreAddMessageListener.bind(this),\n onMessageRemove: this.datastoreRemoveMessageListener.bind(this),\n });\n }\n\n /** Set the handler invoked when a toast item is clicked. */\n public onToastItemClick(handler?: (props: CourierToastItemClickEvent) => void): void {\n this._onItemClick = handler;\n }\n\n /** Set the handler invoked when a toast item action button is clicked. */\n public onToastItemActionClick(handler?: (props: CourierToastItemActionClickEvent) => void): void {\n this._onItemActionClick = handler;\n }\n\n /** Enable auto-dismiss for toast items. */\n public enableAutoDismiss() {\n this._autoDismiss = true;\n }\n\n /** Disable auto-dismiss for toast items. */\n public disableAutoDismiss() {\n this._autoDismiss = false;\n }\n\n /**\n * Set the timeout before auto-dismissing toasts.\n * Only applicable if auto-dismiss is enabled.\n * @param timeoutMs - The timeout in milliseconds before a toast is dismissed.\n */\n public setAutoDismissTimeoutMs(timeoutMs: number) {\n this._autoDismissTimeoutMs = timeoutMs;\n }\n\n /**\n * Set the light theme for the toast.\n * @param theme - The light theme object to set.\n */\n public setLightTheme(theme: CourierToastTheme) {\n this._themeManager.setLightTheme(theme);\n }\n\n /**\n * Set the dark theme for the toast.\n * @param theme - The dark theme object to set.\n */\n public setDarkTheme(theme: CourierToastTheme) {\n this._themeManager.setDarkTheme(theme);\n }\n\n /**\n * Set the dismiss button display option.\n *\n * @param option - a value of {@link CourierToastDismissButtonOption}\n */\n public setDismissButton(option: CourierToastDismissButtonOption) {\n this._dismissButtonOption = option;\n this.refreshStyles();\n }\n\n /**\n * Set the theme mode.\n *\n * @param mode - The theme mode, one of \"dark\", \"light\", or \"system\".\n */\n public setMode(mode: CourierComponentThemeMode) {\n this._themeManager.setMode(mode);\n }\n\n /**\n * Set a factory function that renders a toast item.\n *\n * See {@link CourierToast.setToastItemContent} to set the content while preserving the toast item's\n * container and stack styling.\n */\n public setToastItem(factory?: (props: CourierToastItemFactoryProps) => HTMLElement) {\n this._customToastItem = factory;\n }\n\n /**\n * Set a factory function that renders a toast item's content.\n *\n * The toast item's container, including the stack, auto-dismiss timer, and dismiss button\n * and all events are still present when custom content is set.\n *\n * See {@link CourierToast.setDismissButton} to customize the dismiss button's visibility and\n * {@link CourierToast.setToastItem} to customize the entire toast item, including\n * its container.\n */\n public setToastItemContent(factory?: (props: CourierToastItemFactoryProps) => HTMLElement) {\n this._customToastItemContent = factory;\n }\n\n /**\n * Dismiss the toast item(s) associated with a particular {@link @trycourier/courier-js#InboxMessage}.\n *\n * Toast items are matched to messages by the field {@link @trycourier/courier-js#InboxMessage.messageId}.\n * If the item is an instance of {@link CourierToastItem} it will be animated out\n * before removal, otherwise custom items are removed immediately.\n *\n * If there are multiple toast items matching the message, all items will be dismissed.\n *\n * @example\n * Using dismissToastForMessage with setToastItem to dismiss a custom element.\n * ```ts\n * // Get a reference to the toast component\n * const toast = document.getElementById(\"my-toast\");\n *\n * toast.setToastItem((props) => {\n * const el = document.createElement(\"div\");\n * el.addEventListener(\"click\", () => toast.dismissToastForMessage(props.message));\n * return el;\n * });\n * ```\n *\n * @param message - the {@link @trycourier/courier-js#InboxMessage} for which toast items should be dismissed\n */\n private dismissToastForMessage(message: InboxMessage) {\n this.childNodes.forEach(node => {\n const nodeMessageId = (node as HTMLElement).dataset.courierMessageId;\n\n if (nodeMessageId !== message.messageId) {\n return;\n }\n\n if (node instanceof CourierToastItem) {\n node.dismiss();\n } else {\n node.remove();\n }\n });\n }\n\n /**\n * @override\n */\n protected onComponentMounted(): void {\n this._toastStyle = injectGlobalStyle(CourierToast.id, this.getStyles(this.theme));\n\n CourierToastDatastore.shared.addDatastoreListener(this._datastoreListener);\n Courier.shared.addAuthenticationListener(this.authChangedCallback.bind(this));\n CourierToastDatastore.shared.listenForMessages();\n }\n\n /**\n * @override\n */\n protected onComponentUnmounted(): void {\n this._datastoreListener.remove();\n this._authListener?.remove();\n this._toastStyle?.remove();\n this._themeManager.cleanup();\n this._themeSubscription.unsubscribe();\n }\n\n /**\n * Lifecycle callback invoked when an observed attribute changes.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes\n */\n protected attributeChangedCallback(name: string, _: string, newValue: string) {\n switch (name) {\n case 'auto-dismiss':\n if (newValue === 'false') {\n this.disableAutoDismiss();\n } else {\n this.enableAutoDismiss();\n }\n break;\n case 'auto-dismiss-timeout-ms':\n this.setAutoDismissTimeoutMs(parseInt(newValue, /* base= */ 10));\n break;\n case 'dismiss-button':\n if (newValue && CourierToast.isDismissButtonOption(newValue)) {\n this.setDismissButton(newValue as CourierToastDismissButtonOption);\n } else {\n this.setDismissButton('auto');\n }\n break;\n case 'light-theme':\n if (newValue) {\n this.setLightTheme(JSON.parse(newValue));\n }\n break;\n case 'dark-theme':\n if (newValue) {\n this.setDarkTheme(JSON.parse(newValue));\n }\n break;\n case 'mode':\n this._themeManager.setMode(newValue as CourierComponentThemeMode);\n break;\n }\n }\n\n private get theme(): CourierToastTheme {\n return this._themeManager.getTheme();\n }\n\n /** Refresh the styles tag, if it exists, with the current theme. */\n private refreshStyles() {\n if (this._toastStyle) {\n this._toastStyle.textContent = this.getStyles(this.theme);\n }\n }\n\n private authChangedCallback() {\n this.removeAllItems();\n\n // If re-auth'ing logged the user out and closed the WebSocket connection,\n // we'll open a new connection. If one is already open, this is a no-op.\n CourierToastDatastore.shared.listenForMessages();\n }\n\n private removeAllItems(): void {\n while (this.firstChild) {\n this.removeChild(this.firstChild);\n }\n }\n\n private addToastItem(message: InboxMessage): CourierToastItem | HTMLElement {\n // Append the toast item and resize the toast container\n // so previous toast items can stack underneath at fixed offsets\n // from the top item.\n const toastItem = this.createToastItem(message);\n toastItem.dataset.courierMessageId = message.messageId;\n this.appendChild(toastItem);\n this.resizeContainerToHeight(this.topStackItemHeight);\n\n return toastItem;\n }\n\n private createToastItem(message: InboxMessage): CourierToastItem | HTMLElement {\n if (this._customToastItem) {\n return this.createCustomToastItem(message);\n }\n\n return this.createDefaultToastItem(message);\n }\n\n private createDefaultToastItem(message: InboxMessage) {\n const item = new CourierToastItem({\n message,\n autoDismiss: this._autoDismiss,\n autoDismissTimeoutMs: this._autoDismissTimeoutMs,\n themeManager: this._themeManager\n });\n\n item.onItemDismissed((_) => {\n this.resizeContainerToHeight(this.topStackItemHeight);\n });\n\n if (this._customToastItemContent) {\n item.setToastItemContent(this._customToastItemContent);\n }\n\n if (this._onItemClick) {\n item.onToastItemClick(this._onItemClick);\n }\n\n if (this._onItemActionClick) {\n item.onToastItemActionClick(this._onItemActionClick);\n }\n\n if (this._autoDismiss) {\n setTimeout(item.dismiss.bind(item), this._autoDismissTimeoutMs);\n }\n\n return item;\n }\n\n private createCustomToastItem(message: InboxMessage) {\n if (!this._customToastItem) {\n throw Error(\"Attempted to create customToastItem, but none is set\");\n }\n\n const customItem = this._customToastItem({\n message,\n autoDismiss: this._autoDismiss,\n autoDismissTimeoutMs: this._autoDismissTimeoutMs,\n });\n\n if (this._autoDismiss) {\n setTimeout(() => {\n this.removeChild(customItem);\n }, this._autoDismissTimeoutMs);\n }\n\n customItem.addEventListener('click', () => {\n if (this._onItemClick) {\n this._onItemClick({ message });\n }\n });\n\n return customItem;\n }\n\n private datastoreAddMessageListener(message: InboxMessage) {\n this.addToastItem(message);\n }\n\n private datastoreRemoveMessageListener(message: InboxMessage) {\n this.dismissToastForMessage(message);\n }\n\n private getStyles(theme: CourierToastTheme): string {\n const item = theme.item;\n\n // Styles for the top-level toast container.\n const toastStyles = `\n ${CourierToast.id} {\n position: ${this._defaultLayoutProps.position};\n z-index: ${this._defaultLayoutProps.zIndex};\n top: ${this._defaultLayoutProps.top};\n right: ${this._defaultLayoutProps.right};\n width: ${this._defaultLayoutProps.width};\n }\n `;\n\n // Stack the three most recently shown toast items and hide all others.\n // Content is transparent for all but the most recent (top) toast item\n // since it otherwise peeks out in the visible stack items.\n const toastStackStyles = `\n ${CourierToastItem.id}:last-child {\n top: 0;\n right: 0;\n }\n\n ${CourierToastItem.id}:nth-last-child(2) {\n top: 12px;\n bottom: -12px;\n --scale: 0.95\n }\n\n ${CourierToastItem.id}:nth-last-child(3) {\n top: 24px;\n bottom: -24px;\n --scale: 0.9;\n }\n\n ${CourierToastItem.id}:nth-last-child(n+4) {\n top: 24px;\n bottom: -24px;\n --scale: 0.9;\n visibility: hidden;\n }\n\n ${CourierToastItem.id}:nth-last-child(n+2) > .overflow-hidden-container {\n opacity: 0;\n }\n `;\n\n // Styles for the visible toast item.\n // `opacity` and `transform` are the initial states before\n // the keyframed `animation` show is applied.\n // The class `dismissing` is added to trigger the `animation` hide\n // before removing an item.\n // Only the top item is clickable.\n const toastItemStyles = `\n ${CourierToastItem.id} {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n background-color: ${item?.backgroundColor};\n box-shadow: ${item?.shadow};\n border: ${item?.border};\n border-radius: ${item?.borderRadius};\n transition: 0.2s ease-in-out;\n cursor: default;\n\n opacity: 0;\n transform: translate(0, -10px) scaleX(var(--scale, 1));\n animation: show 0.3s ease-in-out forwards;\n }\n\n ${CourierToastItem.id} > .overflow-hidden-container {\n height: 100%;\n width: 100%;\n border-radius: ${item?.borderRadius};\n overflow: hidden;\n }\n\n ${CourierToastItem.id}.dismissing {\n animation: hide 0.3s ease-in-out forwards;\n }\n\n @keyframes show {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n transform: scaleX(var(--scale, 1));\n }\n }\n\n @keyframes hide {\n 0% {\n opacity: 1;\n transform: scaleX(var(--scale, 1));\n }\n\n 100% {\n opacity: 0;\n transform: scaleX(var(--scale, 1));\n }\n }\n\n ${CourierToastItem.id}.clickable:last-child {\n cursor: pointer;\n }\n\n ${CourierToastItem.id}.clickable:last-child:hover {\n background-color: ${item?.hoverBackgroundColor};\n }\n\n ${CourierToastItem.id}.clickable:last-child:active {\n background-color: ${item?.activeBackgroundColor};\n }\n\n ${CourierToastItem.id}.clickable:nth-last-child(n+2) {\n pointer-events: none;\n }\n `;\n\n // A dismiss icon is visible when the top toast item is in the :hover state.\n // Auto-dismiss styles are added, but unused if the auto-dismiss progress\n // bar is not added in the courier-toast-item element\n // (i.e. when auto-dismiss is disabled).\n const dismissStyles = `\n ${CourierToastItem.id} > .dismiss {\n position: absolute;\n visibility: hidden;\n opacity: 0%;\n top: -10px;\n right: -10px;\n background-color: ${item?.backgroundColor};\n border: ${item?.border};\n padding: 3px;\n border-radius: 50%;\n font-size: 12pt;\n box-shadow: ${item?.shadow};\n cursor: pointer;\n transition: 0.2s ease-in-out;\n }\n\n ${CourierToastItem.id} > .dismiss:hover {\n background-color: ${item?.hoverBackgroundColor};\n }\n\n ${CourierToastItem.id} > .dismiss:active {\n background-color: ${item?.activeBackgroundColor};\n }\n\n ${CourierToastItem.id}:last-child${this.showDismissOnHover ? ':hover' : ''} > .dismiss {\n visibility: ${this.showDismiss ? 'visible' : 'hidden'};\n opacity: 100%;\n transition: 0.2s ease-in-out;\n }\n `;\n\n const autoDismissStyles = `\n ${CourierToastItem.id} > .overflow-hidden-container > .auto-dismiss {\n width: 100%;\n height: 5px;\n background-color: ${item?.autoDismissBarColor};\n animation: auto-dismiss ${this._autoDismissTimeoutMs}ms ease-in-out forwards;\n }\n\n @keyframes auto-dismiss {\n 100% {\n width: 0px;\n }\n }\n `;\n\n // Styles for the text and icon content.\n const contentStyles = `\n ${CourierToastItem.id} > .overflow-hidden-container > .content {\n display: flex;\n gap: 12px;\n align-items: center;\n align-self: stretch;\n box-sizing: border-box;\n padding: 12px;\n }\n\n ${CourierToastItem.id} > .overflow-hidden-container > .content > .text-content {\n }\n\n ${CourierToastItem.id} > .overflow-hidden-container > .content > .icon {\n }\n\n ${CourierToastItem.id} > .overflow-hidden-container > .content > .text-content > .title {\n margin: 0;\n font-weight: ${item?.title?.weight};\n font-size: ${item?.title?.size};\n color: ${item?.title?.color};\n }\n\n ${CourierToastItem.id} > .overflow-hidden-container > .content > .text-content > .body {\n margin: 8px 0 0 0;\n font-weight: ${item?.body?.weight};\n font-size: ${item?.body?.size};\n line-height: 150%;\n color: ${item?.body?.color};\n }\n `;\n\n const actionStyles = `\n ${CourierToastItem.id} > .overflow-hidden-container > .content > .text-content > .actions-container {\n display: flex;\n gap: 8px;\n margin-top: 12px;\n }\n `;\n\n return [\n toastStyles,\n toastStackStyles,\n toastItemStyles,\n dismissStyles,\n autoDismissStyles,\n contentStyles,\n actionStyles,\n ].join('');\n }\n\n /** Get the top item's (i.e. the fully visible item's) height. */\n private get topStackItemHeight(): string {\n if (this.lastChild) {\n const height = (this.lastChild as HTMLDivElement).getBoundingClientRect().height;\n return `${height}px`;\n }\n\n return '0px';\n }\n\n private resizeContainerToHeight(height: string) {\n this.style.height = height;\n }\n\n /** Whether the dismiss button should only be shown on hover. */\n private get showDismissOnHover(): boolean {\n // Auto-dismiss is enabled and button is using 'auto' behavior (show w/o auto-dismiss, show on hover w/ auto-dismiss).\n if (this._autoDismiss && this._dismissButtonOption === 'auto') {\n return true;\n }\n\n // Explicitly set to show on hover\n if (this._dismissButtonOption === 'hover') {\n return true;\n }\n\n return false;\n }\n\n /** Whether to show the dismiss button. The button is visible (either always or on hover) if not explicitly disabled. */\n private get showDismiss(): boolean {\n return this._dismissButtonOption !== 'hidden';\n }\n\n /** @override */\n static get id() {\n return 'courier-toast';\n }\n\n private static isDismissButtonOption(value: string): value is CourierToastDismissButtonOption {\n const validOptions: CourierToastDismissButtonOption[] = ['visible', 'hidden', 'hover', 'auto'];\n return validOptions.includes(value as CourierToastDismissButtonOption);\n }\n}\n\nregisterElement(CourierToast);\n","export * from './components/courier-toast';\r\nexport * from './components/courier-toast-item';\r\nexport * from './types/courier-toast-theme';\r\nexport * from './types/courier-toast-theme-manager';\r\nexport * from './types/toast';\r\nexport * from './datastore/toast-datastore';\r\nexport * from './datastore/toast-datastore-listener';\r\nexport * from './datastore/toast-datastore-events';\r\n\r\nimport { Courier } from \"@trycourier/courier-js\";\r\n\r\nCourier.shared.courierUserAgentName = \"courier-ui-toast\";\r\nCourier.shared.courierUserAgentVersion = __PACKAGE_VERSION__;\r\n\r\n// Re-export Courier from courier-js for direct import\r\nexport { Courier };\r\n\r\n// Re-export types from courier-js\r\nexport type {\r\n CourierProps,\r\n CourierClientOptions,\r\n CourierBrand,\r\n CourierApiUrls,\r\n CourierUserPreferences,\r\n CourierUserPreferencesStatus,\r\n CourierUserPreferencesChannel,\r\n CourierUserPreferencesPaging,\r\n CourierUserPreferencesTopic,\r\n CourierUserPreferencesTopicResponse,\r\n CourierDevice,\r\n CourierToken,\r\n CourierGetInboxMessageResponse,\r\n CourierGetInboxMessagesResponse,\r\n InboxMessage,\r\n InboxAction,\r\n InboxMessageEventEnvelope,\r\n} from '@trycourier/courier-js';\r\n\r\n// Re-export types from courier-ui-core\r\nexport type {\r\n CourierComponentThemeMode\r\n} from '@trycourier/courier-ui-core'\r\n","import { InboxMessage } from \"@trycourier/courier-js\";\n\n/**\n * The set of {@link CourierToastDatastore} events for which listeners can be added.\n *\n * @public\n */\nexport class CourierToastDatastoreEvents {\n public onMessageAdd?(_: InboxMessage): void { }\n public onMessageRemove?(_: InboxMessage): void { }\n public onError?(_: Error): void { }\n}\n"],"names":["defaultLightTheme","item","backgroundColor","CourierColors","white","hoverBackgroundColor","gray","activeBackgroundColor","shadow","black","border","borderRadius","title","size","weight","color","body","icon","svg","CourierIconSVGs","inbox","dismissIcon","remove","autoDismissBarColor","blue","actions","font","defaultDarkTheme","mergeTheme","mode","theme","defaultTheme","_a","_b","_c","_d","_e","_f","_g","_h","CourierToastThemeManager","CourierThemeManager","constructor","initialTheme","super","__publicField","this","getDefaultLightTheme","getDefaultDarkTheme","subscribe","callback","manager","_CourierToastItem","CourierBaseElement","props","_message","message","_autoDismiss","autoDismiss","_autoDismissTimeoutMs","autoDismissTimeoutMs","_themeManager","themeManager","_themeSubscription","_","render","onItemDismissed","handler","_onItemDismissedCallback","onToastItemClick","_onToastItemClickCallback","onToastItemActionClick","_onToastItemActionClickCallback","setToastItemContent","factory","_customToastItemContent","dismiss","timeoutMs","dismissAnimationTimeoutMs","classList","add","setTimeout","onComponentMounted","onComponentUnmounted","unsubscribe","getTheme","id","observedAttributes","firstChild","removeChild","removeEventListener","onClick","overflowHiddenContainer","document","createElement","appendChild","append","createDefaultContent","addEventListener","CourierIcon","event","stopPropagation","content","textContent","preview","messageHasActions","actionsContainer","forEach","action","button","createActionButton","length","actionsTheme","CourierButton","text","variant","fontFamily","family","fontSize","fontWeight","textColor","CourierToastItem","registerElement","_CourierToastDatastore","shared","instance","addDatastoreListener","listener","_datastoreListeners","push","removeDatastoreListener","filter","l","listenForMessages","socketClient","Courier","client","socket","options","logger","info","addMessageEventListener","messageEvent","InboxMessageEvent","NewMessage","data","addMessage","isConnecting","isOpen","connectionId","connect","error","events","onError","call","toastIndexOfMessage","position","_dataset","findIndex","m","messageId","onMessageAdd","removeMessage","index","splice","onMessageRemove","CourierToastDatastore","CourierToastDatastoreListener","_CourierToast","width","top","right","zIndex","refreshStyles","_datastoreListener","datastoreAddMessageListener","bind","datastoreRemoveMessageListener","_onItemClick","_onItemActionClick","enableAutoDismiss","disableAutoDismiss","setAutoDismissTimeoutMs","setLightTheme","setDarkTheme","setDismissButton","option","_dismissButtonOption","setMode","setToastItem","_customToastItem","dismissToastForMessage","childNodes","node","dataset","courierMessageId","_toastStyle","injectGlobalStyle","getStyles","addAuthenticationListener","authChangedCallback","_authListener","cleanup","attributeChangedCallback","name","newValue","parseInt","isDismissButtonOption","JSON","parse","removeAllItems","addToastItem","toastItem","createToastItem","resizeContainerToHeight","topStackItemHeight","createCustomToastItem","createDefaultToastItem","Error","customItem","_defaultLayoutProps","showDismissOnHover","showDismiss","join","lastChild","getBoundingClientRect","height","style","value","includes","CourierToast","courierUserAgentName","courierUserAgentVersion"],"mappings":"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"}