'use strict';

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

const index = require('./index-7f52f1a2.js');

const balModalCss = "@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.modal-close.sc-bal-modal{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.modal-close.sc-bal-modal{-moz-appearance:none;-webkit-appearance:none;background-color:rgba(34, 34, 34, 0.2);border:none;border-radius:100%;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.sc-bal-modal::before,.modal-close.sc-bal-modal::after{background-color:#ffffff;content:\"\";display:block;left:50%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);-webkit-transform-origin:center center;transform-origin:center center}.modal-close.sc-bal-modal::before{height:2px;width:50%}.modal-close.sc-bal-modal::after{height:50%;width:2px}.modal-close.sc-bal-modal:hover,.modal-close.sc-bal-modal:focus{background-color:rgba(34, 34, 34, 0.3)}.modal-close.sc-bal-modal:active{background-color:rgba(34, 34, 34, 0.4)}.is-small.modal-close.sc-bal-modal{height:16px;max-height:16px;max-width:16px;min-height:16px;min-width:16px;width:16px}.is-medium.modal-close.sc-bal-modal{height:24px;max-height:24px;max-width:24px;min-height:24px;min-width:24px;width:24px}.is-large.modal-close.sc-bal-modal{height:32px;max-height:32px;max-width:32px;min-height:32px;min-width:32px;width:32px}.modal-background.sc-bal-modal,.modal.sc-bal-modal{bottom:0;left:0;position:absolute;right:0;top:0}.modal.sc-bal-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.sc-bal-modal{display:-ms-flexbox;display:flex}.modal-background.sc-bal-modal{background-color:rgba(255, 255, 255, 0.5)}.modal-content.sc-bal-modal,.modal-card.sc-bal-modal{margin:0 20px;max-height:calc(100vh - 160px);overflow:auto;position:relative;width:100%}@media screen and (min-width: 720px){.modal-content.sc-bal-modal,.modal-card.sc-bal-modal{margin:0 auto;max-height:calc(100vh - 40px);width:640px}}.modal-close.sc-bal-modal{background:none;height:40px;position:fixed;right:30px;top:30px;width:40px}.modal-card.sc-bal-modal{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.sc-bal-modal,.modal-card-foot.sc-bal-modal{-ms-flex-align:center;align-items:center;background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:start;justify-content:flex-start;padding:40px;position:relative}.modal-card-head.sc-bal-modal{border-bottom:1px solid #d3dbeb;border-top-left-radius:0px;border-top-right-radius:0px}.modal-card-title.sc-bal-modal{color:#003399;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;font-size:2rem;line-height:1}.modal-card-foot.sc-bal-modal{border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-top:1px solid #d3dbeb}.modal-card-foot.sc-bal-modal .button.sc-bal-modal:not(:last-child){margin-right:0.5em}.modal-card-body.sc-bal-modal{-webkit-overflow-scrolling:touch;background-color:#ffffff;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;overflow:auto;padding:40px}.sc-bal-modal-h{display:block}.modal.sc-bal-modal{-ms-flex-pack:start;justify-content:flex-start}.modal-card.sc-bal-modal{width:var(--bal-width, 640px);margin-top:30px;display:-ms-flexbox !important;display:flex !important}.modal-card.sc-bal-modal .modal-card-head.sc-bal-modal{padding-bottom:0px}.modal-card.sc-bal-modal .modal-card-head.sc-bal-modal .modal-card-title.sc-bal-modal{margin-top:0px;margin-bottom:10px}.modal-card.sc-bal-modal .modal-card-body.sc-bal-modal{padding-top:10px;padding-bottom:20px}.modal-card.sc-bal-modal .modal-card-foot.sc-bal-modal{padding-top:20px}.modal-card.sc-bal-modal .modal-card-foot.sc-bal-modal .modal-card-foot-container.sc-bal-modal{width:100%}.modal-card.no-border.sc-bal-modal .modal-card-head.sc-bal-modal{border:none}.modal-card.no-border.sc-bal-modal .modal-card-foot.sc-bal-modal{border:none}";

const Modal = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.isActive = false;
    /**
     * Marks this modal as card-style modal, i.e. having visual lines separating head, body, and foot.
     */
    this.card = false;
  }
  async open() {
    this.isActive = true;
  }
  async close() {
    this.isActive = false;
  }
  async handleKeyUp(event) {
    if (this.isActive) {
      if (event.key === 'Escape' || event.key === 'Esc') {
        event.preventDefault();
        this.close();
      }
    }
  }
  render() {
    return (index.h(index.Host, null, index.h("div", { class: ['modal', 'is-clipped', this.isActive ? 'is-active' : ''].join(' ') }, index.h("div", { class: "modal-background" }), index.h("div", { class: ['modal-card box', this.card ? '' : 'no-border'].join(' ') }, index.h("header", { class: "modal-card-head" }, index.h("p", { class: "modal-card-title" }, index.h("slot", { name: "head" }))), index.h("section", { class: "modal-card-body" }, index.h("div", { class: "content" }, index.h("slot", null))), index.h("footer", { class: "modal-card-foot" }, index.h("div", { class: "modal-card-foot-container" }, index.h("slot", { name: "foot" })))))));
  }
};
Modal.style = balModalCss;

exports.bal_modal = Modal;
