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. * ``` * * * * * * * * ``` * * @public */ export declare class CourierToast extends CourierBaseElement { private _themeManager; private _themeSubscription; private _toastStyle?; private _authListener?; private _datastoreListener; /** * Whether the cursor is currently over the toast stack. * * Hover is tracked here — on the container — rather than per item, because * the stacked items are one hover surface: moving between them (or a new * toast arriving under the cursor) must not resume anyone's countdown. */ private _isHovered; /** * Auto-dismiss countdowns for custom toast items set via * {@link CourierToast.setToastItem}. {@link CourierToastItem}s own their own * countdown, so they're not tracked here. */ private _customItemAutoDismissTimeouts; 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; private onMouseEnter; private onMouseLeave; /** * Bring every item's countdown in line with the current stack: only the top * item counts down, and nothing counts down while the cursor is over the stack. * * Items behind the top one are frozen where they are and pick up the rest of * their countdown once they surface. Only the top toast is legible — the ones * behind it are scaled down with their content transparent — so letting them * all count down at once would expire the whole stack together and the user * would never get to read anything but the newest toast. * * Call this after anything that changes which item is on top: an item arriving, * an item leaving, or hover starting/ending. */ private refreshAutoDismissCountdowns; /** Pause or resume a single item's auto-dismiss countdown. */ private setItemAutoDismissPaused; /** * 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; }