@legumeinfo/web-components
Version:
Web Components for the Legume Information System and other AgBio databases
156 lines • 6.44 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { LisPaginatedSearchMixin } from './mixins';
/**
* @htmlElement `<lis-publication-search-element>`
*
* A Web Component that provides an interface for performing keyword searches
* for Publications 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-publication-search-element>` tag's instance of the
* {@link LisPublicationSearchElement | `LisPublicationSearchElement`} class. For example:
* ```html
* <!-- add the Web Component to your HTML -->
* <lis-publication-search-element id="publication-search"></lis-publication-search-element>
*
* <!-- configure the Web Component via JavaScript -->
* <script type="text/javascript">
* // a site-specific function that sends a request to a Publication search API
* function getPublications(searchData, {abortSignal}) {
* // returns a Promise that resolves to a search result object
* }
* // get the Publication search element
* const searchElement = document.getElementById('publication-search');
* // set the element's searchFunction property
* searchElement.searchFunction = getPublications;
* </script>
* ```
*
* @example
* The {@link LisPublicationSearchElement | `LisPublicationSearchElement`} 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-publication-search-element id="publication-search"></lis-publication-search-element>
*
* <!-- configure the Web Component via JavaScript -->
* <script type="text/javascript">
* // get the publication search element
* const searchElement = document.getElementById('publication-search');
* // set the element's resultAttributes property
* searchElement.resultAttributes = ["title", "firstAuthor", "doi"];
* // set the element's tableHeader property
* searchElement.tableHeader = {
* title: "Title",
* firstAuthor: "First Author",
* doi: "DOI",
* };
* </script>
* ```
*
* @example
* The {@link titleExample | `titleExample`} property can be used to set the
* example text in the search form. For example:
* ```html
* <!-- set the example text via HTML -->
* <lis-publication-search-element titleExample="expression"></lis-publication-search-element>
*
* <!-- set the example text via JavaScript -->
* <lis-publication-search-element id="publication-search"></lis-publication-search-element>
*
* <script type="text/javascript">
* // get the publication search element
* const searchElement = document.getElementById('publication-search');
* // set the element's titleExample property
* searchElement.titleExample = 'expression';
* </script>
* ```
*/
let LisPublicationSearchElement = class LisPublicationSearchElement extends LisPaginatedSearchMixin(LitElement)() {
constructor() {
super();
// configure query string parameters
this.requiredQueryStringParams = [['query']];
// configure results table
this.resultAttributes = [
'year',
'title',
'journal',
'firstAuthor',
'doi',
'pubMedId',
];
this.tableHeader = {
year: 'Year',
title: 'Title',
journal: 'Journal',
firstAuthor: 'First Author',
doi: 'DOI',
pubMedId: 'PubMed',
};
}
/** @ignore */
// used by LisPaginatedSearchMixin to draw the template
renderForm() {
return html `
<form>
<fieldset class="uk-fieldset">
<legend class="uk-legend">Publication title search</legend>
<div class="uk-margin">
<input
name="query"
class="uk-input"
type="text"
aria-label="Input"
.value=${this.queryStringController.getParameter('query')}
/>
<lis-form-input-example-element
.text=${this.titleExample}
></lis-form-input-example-element>
</div>
<div class="uk-margin">
<button type="submit" class="uk-button uk-button-primary">
Search
</button>
</div>
</fieldset>
</form>
`;
}
};
/** @ignore */
// used by Lit to style the Shadow DOM
// not necessary but exclusion breaks TypeDoc
LisPublicationSearchElement.styles = css ``;
__decorate([
property({ type: String })
], LisPublicationSearchElement.prototype, "titleExample", void 0);
LisPublicationSearchElement = __decorate([
customElement('lis-publication-search-element')
], LisPublicationSearchElement);
export { LisPublicationSearchElement };
//# sourceMappingURL=lis-publication-search-element.js.map