@legumeinfo/web-components/lib/core/lis-modal-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, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.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>
 * ```
 */
let LisModalElement = class LisModalElement extends LitElement {
    /** @ignore */
    // disable Shadow DOM to inherit global styles
    createRenderRoot() {
        return this;
    }
    constructor() {
        super();
        this.defaultSlotRef = createRef();
        /**
         * The text to use as the Id for the uk-modal.
         * This is used to bind buttons to show/hide.
         *
         * @attribute
         */
        this.modalId = 'lis-modal';
        /**
         * The text or HTML to populate uk-modal-header
         *
         * @attribute
         */
        this.heading = '';
        this.slotController = new LisSlotController(this, this.defaultSlotRef);
    }
    /** @ignore */
    // returns the modal heading portion of the component
    _getHeading() {
        if (!this.heading) {
            return html ``;
        }
        return html `<div class="uk-modal-header">${unsafeHTML(this.heading)}</div>`;
    }
    /** @ignore */
    // used by Lit to draw the template
    render() {
        const heading = this._getHeading();
        // draw the modal
        return html `
      <div id="${this.modalId}" uk-modal>
        <div class="uk-modal-dialog">
          <button
            class="uk-modal-close-default"
            type="button"
            uk-close
          ></button>
          ${heading}
          <div class="uk-modal-body" uk-overflow-auto>
            <slot ${ref(this.defaultSlotRef)}></slot>
            <div></div>
          </div>
        </div>
      </div>
    `;
    }
};
/** @ignore */
// used by Lit to style the Shadow DOM
// not necessary but exclusion breaks TypeDoc
LisModalElement.styles = css ``;
__decorate([
    property({ type: String })
], LisModalElement.prototype, "modalId", void 0);
__decorate([
    property({ type: String })
], LisModalElement.prototype, "heading", void 0);
LisModalElement = __decorate([
    customElement('lis-modal-element')
], LisModalElement);
export { LisModalElement };
//# sourceMappingURL=lis-modal-element.js.map