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

Web Components for the Legume Information System and other AgBio databases

import { LitElement } from 'lit';
/**
 * @htmlElement `<lis-form-wrapper-element>`
 *
 * A Web Component that provides boilerplate functionality for the form it wraps,
 * i.e. the form in its slot.
 *
 * @example
 * As the name suggests, the component should enclose a form. For example:
 * ```html
 * <!-- add the Web Component to your HTML -->
 * <lis-form-wrapper-element>
 *   <fieldset class="uk-fieldset">
 *     <legend class="uk-legend">Legend</legend>
 *     <div class="uk-margin">
 *       <input class="uk-input" type="text" placeholder="Input" aria-label="Input">
 *     </div>
 *     <div class="uk-margin">
 *       <select class="uk-select" aria-label="Select">
 *         <option>Option 01</option>
 *         <option>Option 02</option>
 *       </select>
 *     </div>
 *     <div class="uk-margin">
 *       <textarea class="uk-textarea" rows="5" placeholder="Textarea" aria-label="Textarea"></textarea>
 *     </div>
 *     <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
 *       <label><input class="uk-radio" type="radio" name="radio2" checked> A</label>
 *       <label><input class="uk-radio" type="radio" name="radio2"> B</label>
 *     </div>
 *     <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
 *       <label><input class="uk-checkbox" type="checkbox" checked> A</label>
 *       <label><input class="uk-checkbox" type="checkbox"> B</label>
 *     </div>
 *     <div class="uk-margin">
 *       <input class="uk-range" type="range" value="2" min="0" max="10" step="0.1" aria-label="Range">
 *     </div>
 *   </fieldset>
 *   <div class="uk-margin">
 *     <button type="submit" class="uk-button uk-button-primary">Search</button>
 *   </div>
 * </lis-form-wrapper-element>
 * ```
 */
export declare class LisFormWrapperElement extends LitElement {
    /** @ignore */
    static styles: import("lit").CSSResult;
    /**
     * Fired when the wrapped form is submitted. Dispatches a
     * {@link !CustomEvent | `CustomEvent`} containing a
     * {@link !FormData | `FormData`} instance with the values of the elements in
     * the wrapped form.
     * @eventProperty
     */
    static readonly submit: CustomEvent<{
        data: FormData;
    }>;
    /** @ignore */
    private _forms;
    /**
     * Allows the wrapped form to be submitted programmatically. If a submit
     * element is present it will be used to submit the form.
     *
     * @param {string} [value=''] - An optional parameter that allows the desired
     * submit button to be selected by value, e.g. when multiple submit buttons
     * are present.
     */
    submit(value?: string): void;
    /** @ignore */
    private _submit;
    /** @ignore */
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'lis-form-wrapper-element': LisFormWrapperElement;
    }
}
//# sourceMappingURL=lis-form-wrapper-element.d.ts.map