import { t as SigveloToastItem } from "./toast-item-B8LccN__.js"; import { t as SigveloTransitionGroup } from "./transition-group-DFL626qV.js"; import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; import { TransitionAnimation } from "@mcp-b/wc-support/utilities/animate"; //#region src/components/toast/toast.d.ts interface CreateOptions { /** * Set to true to process the content as HTML instead of plain text. Make sure you trust the included content, * otherwise your app may become vulnerable to XSS exploits! */ allowHtml: boolean; /** * The length of time to show the notification before removing it. Set this to `0` to show the notification until the * user dismisses it. */ duration: number; /** * When true, the close button will be omitted. */ noCloseButton: boolean; /** * The type of notification to render. */ color: "primary" | "success" | "destructive" | "neutral"; } /** * * * @summary A mechanism for showing temporary, non-intrusive notifications that appear above the page's content. * @tag sigvelo-toast * @documentation https://design-system.sigvelo.com/docs/components/toast * @status stable * @since 1.0 * * @dependency sigvelo-toast-item * @dependency sigvelo-transition-group * * @cssstate visible - Applied when the toast stack is visible. * * @example Default * Adding a single `` element to the page gives you the power to dispatch notifications any time. Notifications appear in the _toast stack_, which renders in the top layer and shows above everything else on the page. * * ```html * * Show notification * * * ``` * * **Note:** You can put the `` element anywhere in the DOM, as long as its somewhere inside the ``. * * @example Creating notifications * Start by placing a `` somewhere on the page and obtain a reference to it. To dispatch a notification, call the toast's `create()` method as shown below. * * ```html * * * * ``` * * The first argument is the content to show in the notification. The second argument is an object containing any of the following properties, all of which are optional. * * | Property | Description | Default | * | -------- | ----------- | ------- | * | `allowHtml` | Set this to true to allow HTML content. Make sure you trust the included content, otherwise your app may become vulnerable to XSS exploits! | `false` | * | `duration` | The length of time in milliseconds to show the notification before removing it. Set this to `0` to show the notification until the user dismisses it. | `5000` | * | `color` | The type of notification to render, either `primary`, `success`, `destructive`, or `neutral`. | `neutral` | * * @example Creating notifications from templates * To create notifications declaratively, place a single `` in a template and call the toast's `createFromTemplate()` method. The toast item will be cloned and added to the stack. * * * ```html *

* * * * * * * Show notification *

* * * ``` * * **Note:** Refer to the [toast item](/docs/components/toast-item) docs to see more examples of creating notifications declaratively. * * @example Variants * When calling `create()`, set the `color` option to `primary`, `success`, `destructive`, or `neutral` to change the type of notification. * * ```html *

* * *

* Neutral * Primary * Constructive * Destructive *

* * * ``` * * @example Changing the duration * When calling `create()`, set the `duration` option to change how long notifications show before disappearing. The value is in milliseconds. A value of `0` will keep the notification open until the user dismisses it. * * ```html * * Show notification * * * ``` * * @example Removing the close button * Use the `without-close` attribute to hide the close button and the progress ring. This is only recommended when a duration is set or when you're using custom buttons to dismiss the notification. * * ```html * * Show notification * * * ``` * * **Warning:** Do not use this as a way to force the notification to stay open. You should provide a custom close button when you use this option. Remember that users can also press to close a notification. * * @example Responding to events * The `create()` and `createFromTemplate()` methods return a reference to the generated toast item. You can use this to add a listener to respond when users click on the notification or dismiss it. * * ```html * * Show notification * * * ``` * * @example Responding to custom buttons * To respond to custom buttons inside a toast item, obtain a reference to the notification and attach event listeners directly to the buttons you're interested in. * * ```html * * Show notification * * * ``` * * @example Custom progress bars * You can add custom progress indicators using the readonly `--progress` custom property, which updates as the timer counts down. * * ```html * * Show notification * * * * * ``` * * @example Changing the placement * Use the placement `attribute` to set the position of the toast stack. The most recent notification will always shows on top since users read from top to bottom. * * ```html *

* * * * * * * * * * *
* Alert the cats *

* * * ``` * * **Note:** It's possible, although not typically recommended, to have more than one `` element on the page at a time. If you need to do this, use a different placement for each and ensure they respond as expected on mobile devices. * * @example Changing the animation * Toast uses a transition group internally to handle enter and exit animations. To customize the animation, set the `transitionAnimation` property using JavaScript. This value will be passed through to the transition group's property of the same name. * * See changing the transition group's animation for more animations and examples. * * ```html * * Show notification * * * ``` */ declare class SigveloToast extends SigveloElement { static styles: CSSResultGroup; private isStackShowing; stack: SigveloTransitionGroup; transitionGroup: SigveloTransitionGroup; /** * A custom enter/exit animation passed through to the internal transition group. * (Property only) */ transitionAnimation?: TransitionAnimation; /** The placement of the toast stack on the screen. */ placement: "top-start" | "top-center" | "top-end" | "bottom-start" | "bottom-center" | "bottom-end"; connectedCallback(): void; updated(changedProperties: PropertyValues): void; /** Watch for clicks inside the stack */ private handleClick; /** Called when the transition group detects content changes. */ private handleContentChanged; /** Listen for Escape anywhere in the document */ private handleDocumentKeyDown; /** Update the positions when scrolling */ private handleDocumentScroll; /** Hides the stack when the last notification has transitioned out */ private handleTransitionEnd; /** Hides the toast stack. Call this after all notifications have been removed. */ private hideStack; /** Shows the toast stack in preparation for a notification. */ private showStack; /** * Creates a toast notification and adds it to the stack. Returns a reference to the created toast item. */ create(content: string, options?: Partial): Promise; /** * Creates a toast notification using an existing `` element. Useful if you want to create your own * toast items declaratively. Returns a reference to the cloned toast item. */ createFromTemplate(template: HTMLTemplateElement): Promise; /** Removes all elements from the toast stack and turns when the remove transition finishes. */ empty(): Promise; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-toast": SigveloToast; } } //#endregion export { SigveloToast as n, CreateOptions as t };