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

Web Components for the Legume Information System and other AgBio databases

import { LitElement } from 'lit';
/**
 * @htmlElement `<lis-loading-element>`
 *
 * A Web Component that provides a consistent loading element. When in the loading state,
 * the element shows a spinner that covers all content inside of its parent element.
 * When a search succeeds, the spinner is hidden. When no results are returned or an
 * error occurs, an alert element is shown that reports the state of the search.
 *
 * @example
 * By default, the loading element is not visible. It should be interacted with via
 * JavaScript:
 * ```html
 * <!-- the loading element -->
 * <lis-loading-element id="loading"></lis-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 alert 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-loading-element id="loading" dataType="special sauce"></lis-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>
 * ```
 *
 * @example
 * Depending on the type of parent element, the spinner overlay may cover an ancestor
 * of the parent instead. Use the `uk-inline` class on the parent to force the overlay
 * to cover the loading element's parent:
 * ```html
 * <!-- force the loading overlay to cover its parent element -->
 * <div class="uk-inline">
 *   <lis-loading-element></lis-loading-element>
 * </div>
 * ```
 */
export declare class LisLoadingElement extends LitElement {
    /** @ignore */
    static styles: import("lit").CSSResult;
    /** @ignore */
    createRenderRoot(): this;
    /**
     * The type of data being loaded.
     *
     * @attribute
     */
    dataType: string;
    state: 'loading' | 'loaded' | 'message';
    private _alertRef;
    loading(): void;
    success(): void;
    noResults(): void;
    failure(): void;
    error(content: string): void;
    /** @ignore */
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'lis-loading-element': LisLoadingElement;
    }
}
//# sourceMappingURL=lis-loading-element.d.ts.map