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

Web Components for the Legume Information System and other AgBio databases

import { LitElement } from 'lit';
import { PaginatedSearchOptions } from './mixins';
/**
 * The data that will be passed to the search function by the
 * {@link LisTraitSearchElement | `LisTraitSearchElement`} class when a
 * search is performed.
 */
export type TraitSearchData = {
    page: number;
    query: string;
};
/**
 * A single result of a trait search performed by the
 * {@link LisTraitSearchElement | `LisTraitSearchElement`} class.
 */
export type TraitSearchResult = {
    identifier: string;
    name: string;
    description: string;
};
/**
 * The signature of the function the
 * {@link LisTraitSearchElement | `LisTraitSearchElement`} class requires for
 * performing a trait search.
 *
 * @param query The search term in the input element when the search form was
 * submitted.
 * new search is performed.
 * @param options Optional parameters that aren't required to perform a trait
 * search but may be useful.
 *
 * @returns A {@link !Promise | `Promise`} that resolves to an
 * {@link !Array | `Array`} of {@link TraitSearchResult | `TraitSearchResult`}
 * objects.
 */
export type TraitSearchFunction = (searchData: TraitSearchData, options: PaginatedSearchOptions) => Promise<Array<TraitSearchResult>>;
declare const LisTraitSearchElement_base: import("./mixins").Constructor<import("./mixins").LisPaginatedSearchElementInterface<TraitSearchData, TraitSearchResult>, any[]> & typeof LitElement;
/**
 * @htmlElement `<lis-trait-search-element>`
 *
 * A Web Component that provides an interface for performing keyword searches
 * for traits and displaying results in a paginated table. Note that the
 * component saves its state to the URL query string parameters and a search
 * will be automatically performed if the parameters are present when the
 * componnent is loaded. The component uses the
 * {@link mixins!LisPaginatedSearchMixin | `LisPaginatedSearchMixin`} mixin. See
 * the mixin docs for further details.
 *
 * @queryStringParameters
 * - **query:** The text in the query field of the search form.
 * - **page:** What page of results is loaded.
 *
 * @example
 * {@link !HTMLElement | `HTMLElement`} properties can only be set via
 * JavaScript. This means the {@link searchFunction | `searchFunction`} property
 * must be set on a `<lis-trait-search-element>` tag's instance of the
 * {@link LisTraitSearchElement | `LisTraitSearchElement`} class. For example:
 * ```html
 * <!-- add the Web Component to your HTML -->
 * <lis-trait-search-element id="trait-search"></lis-trait-search-element>
 *
 * <!-- configure the Web Component via JavaScript -->
 * <script type="text/javascript">
 *   // a site-specific function that sends a request to a trait search API
 *   function getTraits(searchData, {abortSignal}) {
 *     // returns a Promise that resolves to a search result object
 *   }
 *   // get the trait search element
 *   const searchElement = document.getElementById('trait-search');
 *   // set the element's searchFunction property
 *   searchElement.searchFunction = getTraits;
 * </script>
 * ```
 *
 * @example
 * The {@link LisTraitSearchElement | `LisTraitSearchElement`} class inherits the
 * {@link resultAttributes | `resultAttributes`} and
 * {@link tableHeader | `tableHeader`} properties from
 * {@link mixins!LisPaginatedSearchMixin | `LisPaginatedSearchMixin`} mixin. These are
 * used to define what attributes of the results provided by the
 * {@link searchFunction | `searchFunction`} will be shown in the results table and
 * what their corresponding headers will be in the table. These properties can be
 * overridden via JavaScript. For example:
 * ```html
 * <!-- add the Web Component to your HTML -->
 * <lis-trait-search-element id="trait-search"></lis-trait-search-element>
 *
 * <!-- configure the Web Component via JavaScript -->
 * <script type="text/javascript">
 *   // get the trait search element
 *   const searchElement = document.getElementById('trait-search');
 *   // set the element's resultAttributes property
 *   searchElement.resultAttributes = ["name", "identifier", "description", "link"];
 *   // set the element's tableHeader property
 *   searchElement.tableHeader = {
 *     name: "Name",
 *     identifier: "Identifier",
 *     description: "Description",
 *     link: "Link",
 *   };
 * </script>
 * ```
 *
 * @example
 * The {@link traitExample | `traitExample`} property can be used to set the
 * example text in the search form. For example:
 *
 * ```html
 * <!-- set the example text via HTML -->
 * <lis-trait-search-element traitExample="flower"></lis-trait-search-element>
 *
 * <!-- set the example text via JavaScript -->
 * <lis-trait-search-element id="trait-search"></lis-trait-search-element>
 *
 * <script type="text/javascript">
 *   // get the trait search element
 *   const searchElement = document.getElementById('trait-search');
 *   // set the element's traitExample property
 *   searchElement.traitExample = 'flower';
 * </script>
 * ```
 */
export declare class LisTraitSearchElement extends LisTraitSearchElement_base {
    /** @ignore */
    static styles: import("lit").CSSResult;
    /**
     * An optional property to set the example text for the Trait name input field.
     *
     * @attribute
     */
    traitExample?: string;
    constructor();
    /** @ignore */
    renderForm(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'lis-trait-search-element': LisTraitSearchElement;
    }
}
export {};
//# sourceMappingURL=lis-trait-search-element.d.ts.map