ignite-html-bootstrap/modal.js

import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, div, slot } from "../ignite-html/ignite-template.js";

class Modal extends IgniteElement {
    constructor() {
        super();
    }

    get properties() {
        return {
            dialogClasses: null,
            modal: null,
            modalInstance: null
        };
    }

    render() {
        return this.template.child(
            new div().class("modal").ref(this.modal).child(
                new div().class("modal-dialog").class(this.dialogClasses).child(
                    new div().class("modal-content").child(
                        new slot(this)
                    )
                )
            )
        )
    }

    ready() {
        this.modalInstance = new bootstrap.Modal(this.modal);
    }

    show() {
        this.modalInstance.show();
    }

    hide() {
        this.modalInstance.hide();
    }
}

customElements.define("bt-modal", Modal);

class ModalTemplate extends IgniteTemplate {
    constructor(...children) {
        super("bt-modal", children);
    }
}

export {
    ModalTemplate as Modal
}