@trycourier/courier-ui-inbox
Version:
Inbox components for the Courier web UI
191 lines (190 loc) • 7.65 kB
TypeScript
import { CourierInboxDatastoreEvents } from '../datastore/datatore-events';
import { CourierInboxHeaderFactoryProps, CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxMenuButtonFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxStateLoadingFactoryProps } from '../types/factories';
import { CourierInboxFeed } from '../types/inbox-data-set';
import { CourierInboxTheme } from '../types/courier-inbox-theme';
import { CourierComponentThemeMode, CourierBaseElement } from '@trycourier/courier-ui-core';
import { CourierInboxHeaderAction, CourierInboxListItemAction } from '../types/inbox-defaults';
export type CourierInboxPopupAlignment = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center' | 'center-right' | 'center-left' | 'center-center';
export declare class CourierInboxPopupMenu extends CourierBaseElement implements CourierInboxDatastoreEvents {
static get id(): string;
private _width;
private _height;
private _popupAlignment;
private _top?;
private _right?;
private _bottom?;
private _left?;
private _themeManager;
/** Returns the current theme object. */
get theme(): CourierInboxTheme;
/**
* Set the light theme for the popup menu.
* @param theme The light theme object to set.
*/
setLightTheme(theme: CourierInboxTheme): void;
/**
* Set the dark theme for the popup menu.
* @param theme The dark theme object to set.
*/
setDarkTheme(theme: CourierInboxTheme): void;
/**
* Set the theme mode (light/dark/system).
* @param mode The theme mode to set.
*/
setMode(mode: CourierComponentThemeMode): void;
private _triggerButton?;
private _popup?;
private _inbox?;
private _style?;
private _datastoreListener?;
private _totalUnreadCount;
private _feeds?;
private _popupMenuButtonFactory?;
static get observedAttributes(): string[];
constructor();
onComponentMounted(): void;
onComponentUnmounted(): void;
private readInitialThemeAttributes;
private refreshTheme;
static getStyles(theme: CourierInboxTheme, width: string, height: string): string;
attributeChangedCallback(name: string, _: string, newValue: string): void;
/**
* Called when the per-dataset unread count changes.
* Triggers a render to update the factory with latest feeds data
* (which includes per-tab unread counts).
*/
onUnreadCountChange(_: number): void;
/**
* Called when the total unread count across all datasets changes.
* Updates the popup trigger button badge.
*/
onTotalUnreadCountChange(totalUnreadCount: number): void;
/**
* Set a handler for message click events.
* @param handler The function to call when a message is clicked.
*/
onMessageClick(handler?: (props: CourierInboxListItemFactoryProps) => void): void;
/**
* Set a handler for message action click events.
* @param handler The function to call when a message action is clicked.
*/
onMessageActionClick(handler?: (props: CourierInboxListItemActionFactoryProps) => void): void;
/**
* Set a handler for message long press events.
* @param handler The function to call when a message is long pressed.
*/
onMessageLongPress(handler?: (props: CourierInboxListItemFactoryProps) => void): void;
private isValidPosition;
private updatePopupPosition;
/**
* Toggle the popup menu open/closed.
* @param event The click event that triggered the toggle.
*/
private togglePopup;
/**
* Show the popup menu with transition.
*/
showPopup(): void;
/**
* Hide the popup menu with transition.
*/
hidePopup(): void;
/**
* Close the popup menu.
*/
closePopup(): void;
private handleOutsideClick;
/**
* Set the content of the popup inbox.
* @param element The HTMLElement to set as the content.
*/
setContent(element: HTMLElement): void;
/**
* Set the size of the popup menu.
* @param width The width to set.
* @param height The height to set.
*/
setSize(width: string, height: string): void;
/**
* Set the popup alignment/position.
* @param position The alignment/position to set.
*/
setPosition(position: CourierInboxPopupAlignment): void;
/**
* Set a custom header factory for the inbox.
* @param factory The factory function for the header.
*/
setHeader(factory: (props: CourierInboxHeaderFactoryProps | undefined | null) => HTMLElement): void;
/**
* Remove the custom header from the inbox.
*/
removeHeader(): void;
/**
* Set a custom loading state factory for the inbox.
* @param factory The factory function for the loading state.
*/
setLoadingState(factory: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => HTMLElement): void;
/**
* Set a custom empty state factory for the inbox.
* @param factory The factory function for the empty state.
*/
setEmptyState(factory: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => HTMLElement): void;
/**
* Set a custom error state factory for the inbox.
* @param factory The factory function for the error state.
*/
setErrorState(factory: (props: CourierInboxStateErrorFactoryProps | undefined | null) => HTMLElement): void;
/**
* Set a custom list item factory for the inbox.
* @param factory The factory function for the list item.
*/
setListItem(factory: (props: CourierInboxListItemFactoryProps | undefined | null) => HTMLElement): void;
/**
* Set a custom pagination item factory for the inbox.
* @param factory The factory function for the pagination item.
*/
setPaginationItem(factory: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => HTMLElement): void;
/**
* Set a custom menu button factory for the popup trigger.
* @param factory The factory function for the menu button.
*/
setMenuButton(factory: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => HTMLElement): void;
/**
* Sets the active feed for the inbox.
* @param feedId The feed ID to display.
*/
selectFeed(feedId: string): void;
/**
* Switches to a tab by updating components and loading data.
* @param tabId The tab ID to switch to.
*/
selectTab(tabId: string): void;
/**
* Set the feeds for this Inbox, replacing any existing feeds.
* @param feeds The list of feeds to set for the Inbox.
*/
setFeeds(feeds: CourierInboxFeed[]): void;
/**
* Get the current set of feeds.
*/
getFeeds(): CourierInboxFeed[];
/**
* Sets the enabled header actions for the inbox.
* @param actions - The header actions to enable (e.g., [{ id: 'readAll', iconSVG: '...', text: '...' }]).
*/
setActions(actions: CourierInboxHeaderAction[]): void;
/**
* Sets the enabled list item actions for the inbox.
* @param actions - The list item actions to enable (e.g., [{ id: 'read_unread', readIconSVG: '...', unreadIconSVG: '...' }]).
*/
setListItemActions(actions: CourierInboxListItemAction[]): void;
/**
* Returns the current feed type.
*/
get currentFeedId(): string;
/**
* Forces a reload of the inbox data, bypassing the cache.
*/
refresh(): Promise<void | undefined>;
private render;
}