import { OmniElement } from '../core/OmniElement.js';
import { RenderFunction, RenderResult } from '../render-element/RenderElement.js';
import { Toast } from './Toast.js';
import './Toast.js';
import '../render-element/RenderElement.js';
/**
 * A toast container that animates in and stacks toast elements.
 *
 * @import
 * ```js
 * import '@capitec/omni-components/toast';
 * ```
 *
 * @example
 * ```html
 * <omni-toast-stack position="bottom" reverse>
 *      <omni-toast
 *        type="info"
 *        header="Toast Title"
 *        detail="Short detail Text"
 *        closable>
 *      </omni-toast>
 * </omni-toast-stack>

 * ```
 *
 * @element omni-toast-stack
 *
 * @slot - Toast(s) to be displayed
 *
 * @fires {CustomEvent<Toast>} toast-remove - Dispatched when the a toast is removed from the stack.
 * @fires {CustomEvent<ToastStack>} toast-stack-remove - Dispatched from a toast when it is removed from the stack.
 *
 * @global_attribute {number} data-toast-duration - Duration milliseconds that a slotted toast must be shown in the stack before it is removed.
 *
 * @cssprop --omni-toast-stack-z-index - The z-index of the stack.
 * @cssprop --omni-toast-stack-font-color - The font color applied to the stack.
 *
 * @cssprop --omni-toast-stack-anchor-bottom - The position from the bottom toast `position` is set to `bottom`, `bottom-left`, or `bottom-right`.
 * @cssprop --omni-toast-stack-anchor-top - The position from the bottom toast `position` is set to `top`, `top-left`, or `top-right`.
 * @cssprop --omni-toast-stack-anchor-left - The position from the bottom toast `position` is set to `left`, `top-left`, or `bottom-left`.
 * @cssprop --omni-toast-stack-anchor-right - The position from the bottom toast `position` is set to `right`, `top-right`, or `bottom-right`.
 *
 * @cssprop --omni-toast-stack-gap - The vertical gap between toast elements in the stack.
 */
export declare class ToastStack extends OmniElement {
    /**
     * The position to stack toasts
     * @attr
     */
    position: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
    /**
     * Reverse the order of toast with newest toasts showed on top of the stack. By default newest toasts are showed at the bottom of the stack.
     * @attr
     */
    reverse?: boolean;
    private toastContainer;
    private slotElement;
    private toastCloseClickBound;
    /**
     * Creates a new `<omni-toast-stack>` element with the provided context and appends it to the DOM (either to document body or to provided target parent element).
     * @param init Initialisation context for the element.
     * @returns The {@link ToastStack} instance that was created.
     */
    static create(init?: ToastStackInit): ToastStack | undefined;
    /**
     * Push a toast message onto the toast stack.
     * @returns The {@link Toast} instance that was created.
     */
    showToast(init: ShowToastInit): Toast;
    /**
     * Push an existing toast instance onto the toast stack.
     */
    showInstance(instance: Toast, options?: ShowToastOptions): Toast;
    private onSlotChange;
    private closeToast;
    private raiseToastRemove;
    private slideIn;
    static get styles(): import("lit").CSSResult[];
    render(): import("lit-html").TemplateResult<1>;
}
/**
 * Attribute for the duration milliseconds that a slotted toast must be shown in an `<omni-toast-stack>` before it is removed.
 */
export declare const toastDurationAttribute = "data-toast-duration";
/**
 * Context for `ToastStack.create` function to programmatically create a new `<omni-toast-stack>` instance.
 */
export type ToastStackInit = {
    /**
     * The id to apply to the ToastStack element.
     */
    id?: string;
    /**
     * The container to append the ToastStack as child. If not provided will append to a new div element on the document body.
     */
    parent?: string | HTMLElement | DocumentFragment | null;
    /**
     * The position to stack toasts
     */
    position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
    /**
     * Reverse the order of toast with newest toasts showed on top of the stack. By default newest toasts are showed at the bottom of the stack.
     */
    reverse?: boolean;
};
/**
 * Context for `showToast` function to programmatically add a new `<omni-toast>` instance to an existing `<omni-toast-stack>`.
 */
export type ShowToastInit = {
    /**
     * The type of toast to display.
     */
    type: 'success' | 'warning' | 'error' | 'info' | 'none';
    /**
     * The toast title.
     */
    header?: string;
    /**
     * The toast description.
     */
    detail?: string;
    /**
     * If true, will display a close button that fires a `close-click` event when clicked and removes the toast from the stack.
     */
    closeable?: boolean;
    /**
     * If provided will be the time in millisecond the toast is displayed before being automatically removed from the stack.
     */
    duration?: number;
    /**
     * Content to render before toast message area.
     */
    prefix?: RenderFunction | RenderResult;
    /**
     * Content to render inside the component message area.
     */
    content?: RenderFunction | RenderResult;
    /**
     * Content to render as the close button when `closeable`.
     */
    close?: RenderFunction | RenderResult;
};
/**
 * Context for `showToast` function to programmatically add an existing `<omni-toast>` instance to an existing `<omni-toast-stack>`.
 */
export type ShowToastOptions = {
    /**
     * If provided will be the time in milliseconds the toast is displayed before being automatically removed from the stack.
     */
    duration?: number;
    /**
     * If true, will display a close button that fires a `close-click` event when clicked and removes the toast from the stack.
     */
    closeable?: boolean;
};
declare global {
    interface HTMLElementTagNameMap {
        'omni-toast-stack': ToastStack;
    }
}
//# sourceMappingURL=ToastStack.d.ts.map