UNPKG

4.36 kBJavaScriptView Raw
1import { r as registerInstance, h } from './core-98b1cff0.js';
2var Modal = /** @class */ (function () {
3 function Modal(hostRef) {
4 var _this = this;
5 registerInstance(this, hostRef);
6 /**
7 * CSS Classes
8 */
9 this.class = '';
10 /**
11 * Is Active
12 */
13 this.isActive = false;
14 /**
15 * Modal Card
16 */
17 this.hasModalCard = false;
18 this.handleCloseButtonClick = function () {
19 _this.isActive = false;
20 };
21 }
22 Modal.prototype.render = function () {
23 return (h("div", { class: {
24 modal: true,
25 'is-active': this.isActive,
26 } }, h("div", { class: "modal-background" }), h("div", { class: {
27 'modal-content': !this.hasModalCard,
28 'modal-card': this.hasModalCard,
29 } }, h("slot", null)), h("button", { slot: "close", class: "modal-close is-large", "aria-label": "close", onClick: this.handleCloseButtonClick })));
30 };
31 Object.defineProperty(Modal, "style", {
32 get: function () { return ".modal-close{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-moz-appearance:none;-webkit-appearance:none;background-color:rgba(10,10,10,.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:after,.modal-close:before{background-color:#fff;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:focus,.modal-close:hover{background-color:rgba(10,10,10,.3)}.modal-close:active{background-color:rgba(10,10,10,.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,.modal-background{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,.86)}.modal-card,.modal-content{margin:0 20px;max-height:calc(100vh - 160px);overflow:auto;position:relative;width:100%}\@media print,screen and (min-width:769px){.modal-card,.modal-content{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-foot,.modal-card-head{-ms-flex-align:center;align-items:center;background-color:#f5f5f5;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:.5em}.modal-card-body{-webkit-overflow-scrolling:touch;background-color:#fff;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;overflow:auto;padding:20px}"; },
33 enumerable: true,
34 configurable: true
35 });
36 return Modal;
37}());
38export { Modal as bm_modal };