@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
90 lines (89 loc) • 3.85 kB
TypeScript
/**
* ---------------------------------------------------------------------
* 🔒 AUTOGENERATED BY VENDORISM
* Removing this comment will prevent it from being managed by it.
* ---------------------------------------------------------------------
*/
import SynergyElement from '../../internal/synergy-element.js';
import SynIconButton from '../icon-button/icon-button.component.js';
import type { CSSResultGroup } from 'lit';
/**
* @summary Alerts are used to display important messages inline or as toast notifications.
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
* @status stable
* @since 2.0
*
* @dependency syn-icon-button
*
* @slot - The alert's main content.
* @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
*
* @event syn-show - Emitted when the alert opens.
* @event syn-after-show - Emitted after the alert opens and all animations are complete.
* @event syn-hide - Emitted when the alert closes.
* @event syn-after-hide - Emitted after the alert closes and all animations are complete.
*
* @csspart base - The component's base wrapper.
* @csspart icon - The container that wraps the optional icon.
* @csspart message - The container that wraps the alert's main content.
* @csspart close-button - The close button, an `<syn-icon-button>`.
* @csspart close-button__base - The close button's exported `base` part.
*
* @animation alert.show - The animation to use when showing the alert.
* @animation alert.hide - The animation to use when hiding the alert.
*/
export default class SynAlert extends SynergyElement {
static styles: CSSResultGroup;
static dependencies: {
'syn-icon-button': typeof SynIconButton;
};
private autoHideTimeout;
private remainingTimeInterval;
private countdownAnimation?;
private readonly hasSlotController;
private readonly localize;
private static currentToastStack;
private static get toastStack();
base: HTMLElement;
countdownElement: HTMLElement;
/**
* Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
* use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.
*/
open: boolean;
/** Enables a close button that allows the user to dismiss the alert. */
closable: boolean;
/** The alert's theme variant. */
variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger';
/**
* The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
* the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning
* the alert will not close on its own.
*/
duration: number;
/**
* Enables a countdown that indicates the remaining time the alert will be displayed.
* Typically used to indicate the remaining time before a whole app refresh.
*/
private countdown?;
private remainingTime;
firstUpdated(): void;
private restartAutoHide;
private pauseAutoHide;
private resumeAutoHide;
private handleCountdownChange;
private handleCloseClick;
handleOpenChange(): Promise<void>;
handleDurationChange(): void;
/** Shows the alert. */
show(): Promise<void>;
/** Hides the alert */
hide(): Promise<void>;
/**
* Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
* dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
* calling this method again. The returned promise will resolve after the alert is hidden.
*/
toast(): Promise<void>;
render(): import("lit").TemplateResult<1>;
}