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

Web Components for the Legume Information System and other AgBio databases

import { LitElement } from 'lit';
import { LisCancelPromiseController } from './controllers';
/**
 * A single result of a linkout performed by the
 * {@link LisLinkoutElement | `LisLinkoutElement`} class.
 */
export type LinkoutResult = {
    href: string;
    text: string;
};
/**
 * The type of object the {@link LisLinkoutElement | `LisLinkoutElement`} expects back
 * from the linkout function.
 */
export type LinkoutResults = {
    results: LinkoutResult[];
};
/**
 * Optional parameters that may be given to the linkout function. The
 * {@link !AbortSignal | `AbortSignal`} instance will emit if a linkout is performed
 * before the current linkout completes. This signal should be used to cancel in-flight
 * requests if the linkout API supports it.
 */
export type LinkoutOptions = {
    abortSignal?: AbortSignal;
};
/**
 * The signature of the function of the
 * {@link LisLinkoutElement | `LisLinkoutElement`} class required for
 * performing a linkout.
 *
 * @typeParam LinkoutData - The type of the linkout function `linkoutData` parameter.
 *
 * @param linkoutData The data to give to the linkout function.
 * @param options Optional parameters that aren't required to perform a linkout but may
 * be useful.
 *
 * @returns A {@link !Promise | `Promise`} that resolves to a
 * {@link LinkoutResults | `LinkoutResults`} object.
 */
export type LinkoutFunction<LinkoutData> = (linkoutData: LinkoutData, options: LinkoutOptions) => Promise<LinkoutResults>;
/**
 * @htmlElement `<lis-linkout-element>`
 *
 * A Web Component that provides an interface for performing linkout queries against an
 * a linkout service.
 * The returned links are displayed in a table.
 *
 * @example
 * {@link !HTMLElement | `HTMLElement`} properties can only be set via
 * JavaScript. This means the {@link linkoutFunction | `LinkoutFunction`} property
 * must be set on a `<lis-linkout-element>` tag's instance of the
 * {@link LisLinkoutElement | `LisLinkoutElement`} class. For example:
 * ```html
 *    <lis-linkout-element id="linkouts"></lis-linkout-element>
 *
 *    <!-- configure the Web Component via JavaScript -->
 *    <script type="text/javascript">
 *      // a site-specific function that sends a request to a linkout API
 *      function getGeneLinkouts(genes) {
 *        // returns a Promise that resolves to a linkout results object
 *      }
 *      // get the linkout element
 *      const linkoutElement = document.getElementById('linkouts');
 *      // set the element's linkoutFunction property
 *      linkoutElement.linkoutFunction = getGeneLinkouts;
 *      // get linkouts when the page is finished loading
 *      window.onload = (event) => {
 *        linkoutElement.getLinkouts(['cicar.CDCFrontier.gnm3.ann1.Ca1g000600']);
 *      }
 *   </script>
 * ```
 */
export declare class LisLinkoutElement extends LitElement {
    protected cancelPromiseController: LisCancelPromiseController;
    /** @ignore */
    static styles: import("lit").CSSResult;
    /** @ignore */
    createRenderRoot(): this;
    linkoutFunction: LinkoutFunction<unknown>;
    private _table;
    private _loadingRef;
    /**
     * Gets linkouts for the given data.
     *
     * @typeParam LinkoutData - Should match the type of the linkout function `linkoutData`
     * parameter.
     *
     * @param data - The data to get linkouts for.
     */
    getLinkouts<LinkoutData>(data: LinkoutData): void;
    /** @ignore */
    private _linkoutSuccess;
    /** @ignore */
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'lis-linkout-element': LisLinkoutElement;
    }
}
//# sourceMappingURL=lis-linkout-element.d.ts.map