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

Web Components for the Legume Information System and other AgBio databases

import { LitElement } from 'lit';
import { Ref } from 'lit/directives/ref.js';
import { LisSlotController } from '../controllers';
/**
 * @htmlElement `<lis-modal-element>`
 *
 * A Web Component that provides a generic modal element.
 *
 * The modal is a wrapper for the UIkit modal and can be interacted with using the UIkit API. See, https://getuikit.com/docs/modal, for more information.
 *
 * @slot - Adds content after the content defined via the component properties.
 * Can be used to manually create markup that has the same styling as the
 * component.
 *
 * @example
 * The modal element's
 * {@link modalId | `modalId`} and {@link heading | `heading`}
 * attributes/properties can be set via HTML or
 * javascript.
 *
 * For example:
 * ```html
 * <!-- set the modalId, heading and content via HTML -->
 * <lis-modal-element
 *   modalId="modal-test"
 *   heading="Test Modal">
 *     <p>Some HTML or text to be rendered</p>
 * </lis-modal-element>
 * ```
 *
 * @example
 * In the example below, the lis-simple-table-element web component
 * is rendered within the lis-modal-element.
 *
 * The attributes/properties for lis-simple-table-element are set below
 * in javascript. Please see the documentation for lis-simple-table-element
 * for more information.
 *
 * ```html
 * <lis-modal-element
 *   modalId="modal-test"
 *   heading="Cheesy Table Modal">
 *     <lis-simple-table-element
 *       id="table">
 *     </lis-simple-table-element>
 * </lis-modal-element>
 *
 * <script type="text/javascript">
 *  // get the simple table element after page loads.
 *  window.onload = (event) => {
 *
 *   const tableElement = document.getElementById('table');
 *   // set the element's properties
 *   tableElement.caption = 'My cheesy table';
 *   tableElement.dataAttributes = ['cheese', 'region'];
 *   tableElement.header = {cheese: 'Cheese', region: 'Region'};
 *   tableElement.data = [
 *     {cheese: 'Brie', region: 'France'},
 *     {cheese: 'Burrata', region: 'Italy'},
 *     {cheese: 'Feta', region: 'Greece'},
 *     {cheese: 'Gouda', region: 'Netherlands'},
 *   ];
 *  }
 * </script>
 * ```
 */
export declare class LisModalElement extends LitElement {
    /** @ignore */
    static styles: import("lit").CSSResult;
    /** @ignore */
    createRenderRoot(): this;
    protected defaultSlotRef: Ref<HTMLSlotElement>;
    protected slotController: LisSlotController;
    constructor();
    /**
     * The text to use as the Id for the uk-modal.
     * This is used to bind buttons to show/hide.
     *
     * @attribute
     */
    modalId: string;
    /**
     * The text or HTML to populate uk-modal-header
     *
     * @attribute
     */
    heading: string;
    /** @ignore */
    private _getHeading;
    /** @ignore */
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'lis-modal-element': LisModalElement;
    }
}
//# sourceMappingURL=lis-modal-element.d.ts.map