pyro/dist/alert/alert.d.ts

Pyro custom elements

import { LitElement } from 'lit';
/**
 * An element that displays a brief, important message in a way that attracts the user's attention
 * without interrupting the user's task.
 * [docs](https://pyrojs.com/el/alert)
 *
 * ```html
 * <pyro-alert>
 *   <p>This is the content of the alert</p>
 * </pyro-alert>
 * ```
 *
 * @tag pyro-alert
 *
 * @slot - (default) Content of alert
 * @slot icon - a pyro-icon or generic image. Receives the css `color` and `fill` based on severity
 * @slot dismissible - overrides the default dimissible icon, if used
 *
 * @cssprop [--pyro-alert-text-color=var(--pyro-text-color)] - `color`
 * @cssprop [--pyro-alert-surface-color=var(--pyro-surface-color)] - `background` (when no `severity` is set)
 * @cssprop [--pyro-alert-border=var(--pyro-border)] - `border`
 * @cssprop [--pyro-alert-border-radius=var(--pyro-border-radius)] - `border-radius`
 * @cssprop [--pyro-alert-spacing=var(--pyro-spacing)] - `padding`
 *
 * Severity
 * @cssprop [--pyro-alert-info-color=var(--pyro-info-color)] - `color` (icon, band)
 * @cssprop [--pyro-alert-info-color-lighter=var(--pyro-info-color-lighter)] - `background`
 * @cssprop [--pyro-alert-success-color=var(--pyro-success-color)] - `color` (icon, band)
 * @cssprop [--pyro-alert-success-color-lighter=var(--pyro-success-color-lighter)] - `background`
 * @cssprop [--pyro-alert-warning-color=var(--pyro-warning-color)] - `color` (icon, band)
 * @cssprop [--pyro-alert-warning-color-lighter=var(--pyro-warning-color-lighter)] - `background`
 * @cssprop [--pyro-alert-error-color=var(--pyro-error-color)] - `color` (icon, band)
 * @cssprop [--pyro-alert-error-color-lighter=var(--pyro-error-color-lighter)] - `background`
 *
 * Variation based
 * @cssprop [--pyro-alert-band-width=calc(var(--pyro-border-width) * 4)] - left band `width`
 * @cssprop [--pyro-alert-dismissible-width=1em] - dismissible icon `width`
 */
export declare class PyroAlert extends LitElement {
    static styles: import('lit').CSSResult;
    /** Alert severity, determines colors */
    severity?: 'info' | 'success' | 'warning' | 'error' | '';
    /** Adds a bright colored band to the alert left, similar to a border */
    band?: boolean;
    /** Adds an cross icon to dismiss the alert */
    dismissible?: boolean;
    /** (static) Added if the alert was dismissed */
    dimissed?: boolean;
    dismiss: () => void;
    render(): import('lit-html').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'pyro-alert': PyroAlert;
    }
}