import TerraAlert from '../alert/alert.component.js'; import TerraElement from '../../internal/terra-element.js'; import type { CSSResultGroup } from 'lit'; /** * @summary Toasts are used to display brief, non-intrusive notifications that appear temporarily. * @documentation https://terra-ui.netlify.app/components/toast * @status stable * @since 1.0 * * @dependency terra-alert * * @slot - The toast's main content. * @slot icon - An icon to show in the toast. Works best with ``. * * @event terra-show - Emitted when the toast opens. * @event terra-after-show - Emitted after the toast opens and all animations are complete. * @event terra-hide - Emitted when the toast closes. * @event terra-after-hide - Emitted after the toast closes and all animations are complete. * * @csspart base - The component's base wrapper, an `` element. * @csspart base__base - The alert's exported `base` part. * @csspart base__icon - The alert's exported `icon` part. * @csspart base__message - The alert's exported `message` part. * * @animation toast.show - The animation to use when showing the toast. * @animation toast.hide - The animation to use when hiding the toast. */ export default class TerraToast extends TerraElement { static styles: CSSResultGroup; static dependencies: { 'terra-alert': typeof TerraAlert; }; get alert(): TerraAlert | null; /** The toast's theme variant. */ variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger'; /** * The length of time, in milliseconds, the toast will show before closing itself. If the user interacts with * the toast before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `3000` (3 seconds). */ duration: number; /** Enables a close button that allows the user to dismiss the toast. */ closable: boolean; /** * Enables a countdown that indicates the remaining time the toast will be displayed. * Typically used for toasts with relatively long duration. */ countdown?: 'rtl' | 'ltr'; firstUpdated(): void; /** * Displays the toast as a notification. This will move the toast out of its position in the DOM and, when * dismissed, it will be removed from the DOM completely. By storing a reference to the toast, you can reuse it by * calling this method again. The returned promise will resolve after the toast is hidden. */ toast(): Promise; /** Shows the toast. */ show(): Promise; /** Hides the toast. */ hide(): Promise; /** * Creates a toast notification imperatively. This is a convenience method that creates a toast, appends it to the * body, and displays it as a notification. * * @param message - The message to display in the toast. * @param variant - The toast variant. Defaults to 'primary'. * @param icon - Optional icon name to display. Defaults to undefined. * @param duration - The duration in milliseconds. Defaults to 3000. * @returns A promise that resolves after the toast is hidden. */ static notify(message: string, variant?: 'primary' | 'success' | 'neutral' | 'warning' | 'danger', icon?: string, duration?: number): Promise; render(): import("lit-html").TemplateResult<1>; }