import { r as registerInstance, c as createEvent, h, H as Host } from './index-6e901f57.js';
import { B as Button } from './Button-4b5dc519.js';
var siteModalCss = ":root{--modal-z-index:1100;--modal-backdrop-z-index:1090;--modal-width:768px;--modal-padding:48px;--modal-border-radius:24px}site-modal{display:block;pointer-events:none;position:fixed;top:0;left:0;bottom:0;right:0;z-index:var(--modal-z-index)}.modal__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--modal-backdrop-z-index);-webkit-transition:opacity 300ms ease-in-out;transition:opacity 300ms ease-in-out;background-color:#000;opacity:0}.modal__backdrop.in{opacity:0.5}.modal__backdrop.out{opacity:0}.modal__wrap{-webkit-transition:-webkit-transform 300ms cubic-bezier(0.32, 0.72, 0, 1);transition:-webkit-transform 300ms cubic-bezier(0.32, 0.72, 0, 1);transition:transform 300ms cubic-bezier(0.32, 0.72, 0, 1);transition:transform 300ms cubic-bezier(0.32, 0.72, 0, 1), -webkit-transform 300ms cubic-bezier(0.32, 0.72, 0, 1);-webkit-transform:translateY(-120%);transform:translateY(-120%)}.modal__wrap.in{-webkit-transform:translate(0%);transform:translate(0%)}.modal__content{pointer-events:auto;max-width:var(--modal-width);margin:76px auto;background:white;position:relative;border-radius:var(--modal-border-radius)}.modal__content .modal__close-button{position:absolute;top:-10px;right:-10px;background:#fff;color:var(--c-carbon-90);padding:0;text-align:center;border:0;border-radius:100%;height:30px;width:30px;-webkit-box-shadow:var(--elevation-2);box-shadow:var(--elevation-2);outline:0}.modal__content .modal__close-button ion-icon{vertical-align:middle;margin-top:-3px}.modal__body{padding:var(--modal-padding);max-height:calc(100vh - 76px);overflow:auto}.modal__body h1,.modal__body h2,.modal__body h3,.modal__body h4,.modal__body h5{margin-top:0}";
var SiteModal = /** @class */ (function () {
    function SiteModal(hostRef) {
        var _this = this;
        registerInstance(this, hostRef);
        this.open = false;
        this.visible = false;
        this.OPEN_DELAY = 500;
        this.CLOSE_DELAY = 500;
        this.close = function () {
            _this.visible = false;
            _this.hideBackdrop();
            setTimeout(function () {
                _this.open = false;
            }, _this.CLOSE_DELAY);
        };
        this.openBackdrop = function () {
            var backdrop = document.createElement('div');
            backdrop.className = 'modal__backdrop';
            document.body.appendChild(backdrop);
            _this.initBackdrop(backdrop);
            _this.backdropEl = backdrop;
            requestAnimationFrame(function () {
                backdrop.classList.add('in');
            });
        };
        this.hideBackdrop = function () {
            if (!_this.backdropEl) {
                return;
            }
            _this.backdropEl.classList.add('out');
            setTimeout(function () {
                var _a;
                document.body.removeChild(_this.backdropEl);
                _this.backdropEl = null;
                _this.modalClose && _this.modalClose();
                (_a = _this.onModalClose) === null || _a === void 0 ? void 0 : _a.emit();
            }, _this.CLOSE_DELAY);
        };
        this.checkBackdrop = function () { };
        this.initBackdrop = function (el) {
            el.addEventListener('click', function (_e) {
                _this.close();
            });
        };
        this.onModalClose = createEvent(this, "modalClose", 7);
    }
    SiteModal.prototype.componentDidLoad = function () {
        this.checkBackdrop();
    };
    SiteModal.prototype.handleKeyUp = function (e) {
        if (this.open && e.key === 'Escape') {
            this.close();
        }
    };
    SiteModal.prototype.openChanged = function () {
        var _this = this;
        if (this.open && !this.backdropEl) {
            this.openBackdrop();
        }
        else if (!this.open && this.backdropEl) {
            this.hideBackdrop();
        }
        requestAnimationFrame(function () {
            _this.visible = _this.open;
        });
    };
    SiteModal.prototype.render = function () {
        return (h(Host, { style: {
                display: this.open ? 'block' : 'none',
            } }, h("div", { class: "modal__wrap" + (this.visible ? " in" : "") }, h("div", { class: "modal__content" }, h(Button, { class: "modal__close-button", onClick: this.close }, h("ion-icon", { name: "close" })), h("div", { class: "modal__body" }, h("slot", null))))));
    };
    Object.defineProperty(SiteModal, "watchers", {
        get: function () {
            return {
                "open": ["openChanged"]
            };
        },
        enumerable: true,
        configurable: true
    });
    return SiteModal;
}());
SiteModal.style = siteModalCss;
export { SiteModal as site_modal };
