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

Web Components for the Legume Information System and other AgBio databases

import { LitElement } from 'lit';
/**
 * @htmlElement `<lis-inline-loading-element>`
 *
 * A Web Component that provides a consistent inline loading element. When in the
 * loading state, the element shows a spinner. When a search succeeds, the spinner
 * is hidden. When no results are returned or an error occurs, an alert icon is
 * shown. Optionally, a tooltip may be shown with every icon with a context-specific
 * message.
 *
 * @example
 * By default, the loading element is not visible. It should be interacted with via
 * JavaScript:
 * ```html
 * <!-- the loading element -->
 * <lis-inline-loading-element id="loading"></lis-inline-alert-element>
 *
 * <!-- interact with the element JavaScript -->
 * <script type="text/javascript">
 *   // get the loading element
 *   const loadingElement = document.getElementById('loading');
 *   // activate the spinner overlay
 *   loadingElement.loading();
 *   // hide the spinner overlay / reset the element
 *   loadingElement.success();
 *   // show an alert that no results were returned
 *   loadingElement.noResults();
 *   // show an alert that reports an error
 *   loadingElement.failure();
 * </script>
 * ```
 *
 * @example
 * By default, the loading element uses "data" in its tooltip messages, e.g. "No data
 * loaded". This can be override using the {@link dataType | `dataType`}
 * attribute/property:
 * ```html
 * <!-- set the dataType attributes via HTML -->
 * <lis-inline-loading-element id="loading" dataType="special sauce"></lis-inline-loading-element>
 *
 * <!-- set the dataType property via JavaScript
 * <script type="text/javascript">
 *   // get the loading element
 *   const loadingElement = document.getElementById('loading');
 *   // set the element's dataTypeproperty
 *   loadingElement.dataType = 'secret sauce';
 * </script>
 * ```
 */
export declare class LisInlineLoadingElement extends LitElement {
    /** @ignore */
    static styles: import("lit").CSSResult;
    /** @ignore */
    createRenderRoot(): this;
    /**
     * The type of data being loaded.
     *
     * @attribute
     */
    dataType: string;
    state: 'loaded' | 'loading' | 'error' | 'info';
    content: string;
    loading(): void;
    success(): void;
    noResults(): void;
    failure(): void;
    error(content: string): void;
    /** @ignore */
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'lis-inline-loading-element': LisInlineLoadingElement;
    }
}
//# sourceMappingURL=lis-inline-loading-element.d.ts.map