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

Web Components for the Legume Information System and other AgBio databases

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, queryAssignedElements } from 'lit/decorators.js';
/**
 * @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>
 * ```
 */
let LisFormWrapperElement = class LisFormWrapperElement extends LitElement {
    /**
     * 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 = '') {
        // throw an error if there's no form to submit
        if (!this._forms.length) {
            throw new Error('No form to submit');
        }
        // only submit the first form
        const formElement = this._forms[0];
        // get the form's submit element
        const selectors = ['[type="submit"]'];
        if (value) {
            selectors.push(`[value="${value}"]`);
        }
        const submitElement = formElement.querySelector(selectors.join(''));
        // use the element to submit the form if it exists
        if (submitElement !== null) {
            formElement.requestSubmit(submitElement);
            // otherwise, use the form as the submit element
        }
        else {
            formElement.requestSubmit();
        }
    }
    /** @ignore */
    // called when the form in the template slot is submitted
    _submit(e) {
        // stop the submit event
        e.preventDefault();
        e.stopPropagation();
        // parse the values from the form
        const formData = new FormData(e.target);
        // dispatch a custom event
        const options = {
            detail: { formData, formEvent: e },
            bubbles: true,
            composed: true,
        };
        this.dispatchEvent(new CustomEvent('submit', options));
    }
    /** @ignore */
    // the template
    render() {
        return html `<slot @submit="${this._submit}"></slot>`;
    }
};
/** @ignore */
// used by Lit to style the Shadow DOM
// not necessary but exclusion breaks TypeDoc
LisFormWrapperElement.styles = css ``;
__decorate([
    queryAssignedElements({ selector: 'form' })
], LisFormWrapperElement.prototype, "_forms", void 0);
LisFormWrapperElement = __decorate([
    customElement('lis-form-wrapper-element')
], LisFormWrapperElement);
export { LisFormWrapperElement };
//# sourceMappingURL=lis-form-wrapper-element.js.map