bulmil/dist/cjs/bm-modal.cjs.entry.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-8e7d875f.js');

const modalCss = ".modal-close{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.modal-close{-moz-appearance:none;-webkit-appearance:none;background-color:rgba(10, 10, 10, 0.2);border:none;border-radius:290486px;cursor:pointer;pointer-events:auto;display:inline-block;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;font-size:0;height:20px;max-height:20px;max-width:20px;min-height:20px;min-width:20px;outline:none;position:relative;vertical-align:top;width:20px}.modal-close::before,.modal-close::after{background-color:white;content:\"\";display:block;left:50%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center}.modal-close::before{height:2px;width:50%}.modal-close::after{height:50%;width:2px}.modal-close:hover,.modal-close:focus{background-color:rgba(10, 10, 10, 0.3)}.modal-close:active{background-color:rgba(10, 10, 10, 0.4)}.is-small.modal-close{height:16px;max-height:16px;max-width:16px;min-height:16px;min-width:16px;width:16px}.is-medium.modal-close{height:24px;max-height:24px;max-width:24px;min-height:24px;min-width:24px;width:24px}.is-large.modal-close{height:32px;max-height:32px;max-width:32px;min-height:32px;min-width:32px;width:32px}.modal-background,.modal{bottom:0;left:0;position:absolute;right:0;top:0}.modal{-ms-flex-align:center;align-items:center;display:none;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:fixed;z-index:40}.modal.is-active{display:-ms-flexbox;display:flex}.modal-background{background-color:rgba(10, 10, 10, 0.86)}.modal-content,.modal-card{margin:0 20px;max-height:calc(100vh - 160px);overflow:auto;position:relative;width:100%}@media screen and (min-width: 769px), print{.modal-content,.modal-card{margin:0 auto;max-height:calc(100vh - 40px);width:640px}}.modal-close{background:none;height:40px;position:fixed;right:20px;top:20px;width:40px}.modal-card{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:calc(100vh - 40px);overflow:hidden;-ms-overflow-y:visible}.modal-card-head,.modal-card-foot{-ms-flex-align:center;align-items:center;background-color:whitesmoke;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:start;justify-content:flex-start;padding:20px;position:relative}.modal-card-head{border-bottom:1px solid #dbdbdb;border-top-left-radius:6px;border-top-right-radius:6px}.modal-card-title{color:#363636;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;font-size:1.5rem;line-height:1}.modal-card-foot{border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-top:1px solid #dbdbdb}.modal-card-foot .button:not(:last-child){margin-right:0.5em}.modal-card-body{-webkit-overflow-scrolling:touch;background-color:white;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;overflow:auto;padding:20px}";

const Modal = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * Is Active
         */
        this.isActive = false;
        /**
         * Modal Card
         */
        this.hasModalCard = false;
        this.handleCloseButtonClick = () => {
            this.isActive = false;
        };
    }
    render() {
        return (index.h("div", { class: {
                modal: true,
                'is-active': this.isActive,
            } }, index.h("div", { class: "modal-background" }), index.h("div", { class: {
                'modal-content': !this.hasModalCard,
                'modal-card': this.hasModalCard,
            } }, index.h("slot", null)), index.h("button", { slot: "close", class: "modal-close is-large", "aria-label": "close", onClick: this.handleCloseButtonClick })));
    }
};
Modal.style = modalCss;

exports.bm_modal = Modal;