@legumeinfo/web-components/lib/core/lis-alert-element.d.ts

Web Components for the Legume Information System and other AgBio databases

import { LitElement } from 'lit';
import { Ref } from 'lit/directives/ref.js';
import { LisSlotController } from '../controllers';
import { AlertModifierModel } from '../models';
/**
 * @htmlElement `<lis-alert-element>`
 *
 * A Web Component that provides a generic alert element.
 *
 * @slot - Adds content in place of the content defined via the component properties.
 *
 * @example
 * The alert element's {@link content | `content`} and {@link type | `type`}
 * attributes/properties can be set via HTML or JavaScript. For example:
 * ```html
 * <!-- set the content and type attributes/properties via HTML -->
 * <lis-alert-element
 *   content="<p>My important message</p>"
 *   type="success">
 * </lis-alert-element>
 *
 * <!-- set all attributes/properties via JavaScript -->
 * <lis-alert-element id="alert"></lis-alert-element>
 * <script type="text/javascript">
 *   // get the alert element
 *   const alertElement = document.getElementById('alert');
 *   // set the element's properties
 *   alertElement.content = '<p>My important message</p>';
 *   alertElement.type = 'success';
 * </script>
 * ```
 *
 * @example
 * The alert element's {@link content | `content`} and {@link type | `type`}
 * attributes/properties can also be set via class methods in JavaScript. For example:
 * ```html
 * <!-- set all attributes/properties via class method in JavaScript -->
 * <lis-alert-element id="alert"></lis-alert-element>
 * <script type="text/javascript">
 *   // get the alert element
 *   const alertElement = document.getElementById('alert');
 *   // set the element's properties via method
 *   alertElement.success('<p>My important message</p>', 'success');
 * </script>
 * ```
 *
 * @example
 * Alternatively, an alert's contents can be written in HTML using the element's
 * slot. Note that this will override any content assigned via JavaScript. The alert's
 * {@link type | `type`} attribute/property must still be set via HTML or JavaScript.
 * For example:
 * ```html
 * <!-- set the type attributes/property via HTML and the content via slot -->
 * <!-- NOTE: this is the alert produced by the previous examples -->
 * <lis-alert-element type="success">
 *   <p>My important message</p>
 * </lis-alert-element>
 * ```
 */
export declare class LisAlertElement extends LitElement {
    /** @ignore */
    static styles: import("lit").CSSResult;
    /** @ignore */
    createRenderRoot(): this;
    protected defaultSlotRef: Ref<HTMLSlotElement>;
    protected slotController: LisSlotController;
    /**
     * Whether or not to show a close button.
     *
     * @attribute
     */
    closeable: boolean;
    /**
     * The content of the alert element. This will be overridden content in the
     * component's slot.
     *
     * @attribute
     */
    content: string;
    /**
     * The style of the alert element.
     *
     * @attribute
     */
    type: AlertModifierModel | '';
    constructor();
    updateAlert(content: string, type: AlertModifierModel | ''): void;
    basic(content: string): void;
    primary(content: string): void;
    success(content: string): void;
    warning(content: string): void;
    danger(content: string): void;
    private _renderClassModifier;
    private _renderClose;
    /** @ignore */
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'lis-alert-element': LisAlertElement;
    }
}
//# sourceMappingURL=lis-alert-element.d.ts.map