wj-elements
Version:
WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.
244 lines (243 loc) • 8.42 kB
TypeScript
import { default as WJElement } from '../wje-element/element.js';
/**
* `Toast` is a custom web component that represents a toast notification.
* @summary This element represents a toast notification.
* @documentation https://elements.webjet.sk/components/toast
* @status stable
* @augments {WJElement}
* @csspart native - The native part
* @slot - The content of the toast.
* @slot media - The media of the toast.
* @attribute {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.
* @attribute {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.
* @attribute {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.
* @attribute {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.
* @attribute {string} color - Defines the color variant of the toast. Supports values such as `primary`, `complete`, `success`, `warning`, `danger`, `info`, and `contrast`.
* @attribute {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.
* @attribute {boolean} stacked - Enables a layered toast stack where the newest toast stays visually on top while older ones shrink behind it.
* @attribute {string} stack-position - Defines where the toast stack is placed on the screen. Supports `top-start`, `top-center`, `top-end`, `bottom-start`, `bottom-center`, and `bottom-end`.
* @attribute {number} stack-depth - Defines how many visual levels the collapsed stacked toast can show. Older toasts beyond this limit stay at the last reduced level. Default is `3`.
* @attribute {string} icon - Adds a leading icon into the `media` slot by icon name.
* @cssproperty [--wje-toast-stack-width=300px] - Defines the width of the toast stack container. Useful for centered stacked toasts and demo layouts.
* // @fires wje-toast:after-show - Fired after the toast is shown.
* // @fires wje-toast:after-hide - Fired after the toast is hidden.
*/
export default class Toast extends WJElement {
/**
* Returns the CSS stylesheet for the component.
* @static
* @returns {CSSStyleSheet} The CSS stylesheet
*/
static get cssStyleSheet(): CSSStyleSheet;
toastStack: HTMLDivElement;
/**
* Set headline value of the toast.
* @param value
*/
set headline(value: string);
/**
* Get headline value of the toast.
* @returns {string}
*/
get headline(): string;
/**
* Set open value of the toast.
* @param value
*/
set open(value: boolean);
/**
* Get open value of the toast.
* @returns {boolean}
*/
get open(): boolean;
/**
* Set duration value of the toast.
* @param value
*/
set duration(value: number);
/**
* Get duration value of the toast.
* @returns {number}
*/
get duration(): number;
/**
* Set closable value of the toast.
* @param value
*/
set closable(value: boolean);
/**
* Get closable value of the toast.
* @returns {boolean}
*/
get closable(): boolean;
/**
* Set color value of the toast.
* @param value
*/
set color(value: string);
/**
* Get color value of the toast.
* @returns {string}
*/
get color(): string;
/**
* Set countdown value of the toast.
* @param value
*/
set countdown(value: boolean);
/**
* Get countdown value of the toast.
* @returns {boolean}
*/
get countdown(): boolean;
/**
* Set stacked value of the toast.
* @param value
*/
set stacked(value: boolean);
/**
* Get stacked value of the toast.
* @returns {boolean}
*/
get stacked(): boolean;
/**
* Set stack depth of the toast.
* @param value
*/
set stackDepth(value: number);
/**
* Get stack depth of the toast.
* @returns {number}
*/
get stackDepth(): number;
/**
* Set stack position of the toast.
* @param value
*/
set stackPosition(value: string);
/**
* Get stack position of the toast.
* @returns {string}
*/
get stackPosition(): string;
/**
* Set icon value of the toast.
* @param value
*/
set icon(value: string);
/**
* Get icon value of the toast.
* @returns {string}
*/
get icon(): string;
/**
* Creates a toast stack container.
* @returns {HTMLDivElement}
*/
createToastStack(): HTMLDivElement;
/**
* Returns the key of the toast stack.
* @returns {string}
*/
getToastStackKey(): string;
/**
* Applies the stack placement directly on the element so demo/app layout CSS cannot override it accidentally.
* @param {HTMLDivElement} stack
*/
applyToastStackPlacement(stack?: HTMLDivElement): void;
/**
* Applies the current toast stack configuration to a stack element.
* @param {HTMLDivElement} stack
*/
syncToastStack(stack?: HTMLDivElement): void;
/**
* Clears transient stack styling from a toast.
* @param {Toast} toast
*/
clearStackItemStyles(toast: Toast): void;
/**
* Measures the rendered height of a toast for stack overlap calculations.
* @param {Toast} toast
* @returns {number}
*/
getToastVisualHeight(toast: Toast): number;
/**
* Recomputes the visual order of toasts inside the stack.
* @param {HTMLDivElement} stack
*/
updateToastStack(stack?: HTMLDivElement): void;
/**
* Draw method for the toast notification.
* @returns {object} Document fragment
*/
draw(): object;
closeBtn: HTMLElement;
countdownBar: HTMLDivElement;
/**
* After draw method for the toast notification.
*/
afterDraw(): void;
countdownAnimation: Animation;
remainingTime: any;
/**
* Starts the timer.
* This method sets the `startTime` property to the current time and sets
* the `timeoutID` property to the ID of the timeout. The method also
* dispatches the `wje-toast:after-hide` custom event when the timeout
* expires.
*/
startTimer(): void;
startTime: number;
isTimerPaused: boolean;
timeoutID: number;
/**
* Stops the timer.
* This method clears the timeout and calculates the remaining time.
* The method is called when the toast notification is paused.
*/
stopTimer(): void;
/**
* Resumes the timer.
* This method resumes the timer if the remaining time is greater
* than zero. The method is called when the toast notification is resumed.
*/
resumeTimer(): void;
/**
* Asynchronously shows the toast notification.
* This method sets the `open` property to `true` and dispatches the
* `wje-toast:after-show` custom event. If the toast is already open,
* the method returns `undefined`.
*/
show: () => void;
/**
* Asynchronously hides the toast notification.
* This method sets the `open` property to `false` and dispatches the
* `wje-toast:after-hide` custom event. If the toast is already hidden,
* the method returns `undefined`.
*/
hide: () => void;
/**
* Pauses the countdown animation and stops the timer.
*/
pause: () => void;
/**
* Resumes the countdown animation and resumes the timer.
*/
resume: () => void;
/**
* Removes the toast notification and the toast stack.
*
* This method removes the toast notification from the toast stack and
* removes the toast stack from the document body if the toast stack is
* empty.
*/
removeChildAndStack(): void;
/**
* Asynchronously starts the toast notification.
* This method appends the toast notification to the document body and
* shows the toast notification. The method returns a promise that
* resolves when the toast notification is shown.
* @returns {Promise<unknown>}
*/
start: () => Promise<unknown>;
}