'use strict';

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

const core = require('./core-859ae5a6.js');
const utils = require('./utils-2a7c8f6e.js');
const a11y = require('./a11y-fb385a78.js');

const Modal = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.overlayListener = (event) => this.guardedClose(event);
        /**
         * If false, clicking the backdrop will not close the modal
         */
        this.overlayClose = true;
        /**
         * The modal size
         * Possible values are: `"small"`, `"medium"`, `"large"`, or `"xlarge"`.
         */
        this.size = 'medium';
        this.anjModalWillOpen = core.createEvent(this, "anjModalWillOpen", 7);
        this.anjModalDidOpen = core.createEvent(this, "anjModalDidOpen", 7);
        this.anjModalWillClose = core.createEvent(this, "anjModalWillClose", 7);
        this.anjModalDidClose = core.createEvent(this, "anjModalDidClose", 7);
    }
    componentWillLoad() {
        this.onResize = utils.debounce(this.onResize.bind(this), 50);
    }
    connectedCallback() {
        this.bodyEl = this.element.ownerDocument.body;
    }
    disconnectedCallback() {
        this.bodyEl.classList.remove(utils.OVERLAY_OPEN_CLASS);
        this.modalEl.removeEventListener('mouseup', this.overlayListener);
        if (this.showing) {
            this.modalEl.remove();
        }
    }
    onBottomContentLoaded({ target }) {
        this.bottomEl = target;
    }
    onResize() {
        if (!this.showing)
            return;
        this.setContentHeight();
    }
    /**
     * Show the modal
     */
    async open() {
        this.anjModalWillOpen.emit();
        this.triggerEl = document.activeElement;
        this.appendModal(this.bodyEl);
        this.bodyEl.classList.add(utils.OVERLAY_OPEN_CLASS);
        this.active = true;
        return new Promise(resolve => {
            window.setTimeout(() => {
                this.setContentHeight();
                this.showing = true;
                this.modalEl.focus();
                this.anjModalDidOpen.emit();
                resolve();
            }, Modal.openDelay);
        });
    }
    /**
     * Hide the modal
     */
    async close() {
        if (!this.showing)
            return;
        this.showing = false;
        return new Promise(resolve => {
            window.setTimeout(() => {
                this.active = false;
                this.disconnectedCallback();
                if (this.triggerEl) {
                    this.triggerEl.focus();
                }
                this.appendModal(this.element);
                this.anjModalDidClose.emit();
                resolve();
            }, Modal.closeDelay);
        });
    }
    async guardedClose(event) {
        if (!event || event instanceof CustomEvent || this.overlayClose) {
            this.anjModalWillClose.emit();
        }
    }
    async onKeyDown(event) {
        if (event.key === 'Escape') {
            return this.guardedClose();
        }
        else if (event.key === 'Tab') {
            a11y.constrainFocus(event, this.modalEl);
        }
    }
    setContentHeight(offset) {
        if (this.contentEl) {
            const bottomOffset = offset ? offset : this.bottomEl ? this.bottomEl.offsetHeight : 0;
            this.contentEl.style.maxHeight = `${this.modalEl.offsetHeight - bottomOffset - (this.dialogEl.offsetTop * 2)}px`;
        }
    }
    appendModal(el) {
        const modalEl = (el.contains(this.modalEl)) ? this.element.removeChild(this.modalEl) : this.modalEl;
        el.appendChild(modalEl);
    }
    render() {
        const modalClasses = this.showing ? 'anj-modal anj-show' : 'anj-modal';
        const dialogClasses = `anj-modal-dialog anj-modal-${this.size}`;
        const contentClasses = this.bottomEl ? 'anj-modal-content anj-animate' : 'anj-modal-content';
        // Gets around a weird typing thing with custom event hooks on native elements
        const containerEvents = {
            'onAnjClose': (e) => this.guardedClose(e),
            'onAnjTrayCollapse': ({ detail }) => this.setContentHeight(detail)
        };
        return (core.h("div", Object.assign({ class: modalClasses, style: { display: this.active ? 'block' : 'none' }, onKeyDown: (ev) => this.onKeyDown(ev), ref: ref => this.modalEl = ref, tabindex: "-1", onMouseDown: () => this.modalEl.addEventListener('mouseup', this.overlayListener) }, containerEvents), core.h("div", { class: dialogClasses, role: "document", ref: ref => this.dialogEl = ref, onMouseDown: (e) => e.stopPropagation(), onMouseUp: (e) => e.stopPropagation() }, core.h("div", { class: contentClasses, ref: ref => this.contentEl = ref }, core.h("slot", null), core.h("slot", { name: "nav-left" }), core.h("slot", { name: "nav-right" }))), core.h("slot", { name: "tray" })));
    }
    get element() { return core.getElement(this); }
    static get style() { return ".anj-modal.sc-anj-modal {\n  display: none;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  background-color: var(--anj-theater);\n  height: 100%;\n  left: 0;\n  opacity: 0;\n  outline: none;\n  overflow: hidden;\n  position: fixed;\n  top: 0;\n  -webkit-transition: opacity 0.3s ease;\n  transition: opacity 0.3s ease;\n  width: 100%;\n  will-change: opacity;\n  z-index: 1050;\n}\n.anj-modal.sc-anj-modal, .anj-modal.sc-anj-modal::before, .anj-modal.sc-anj-modal::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.anj-modal.sc-anj-modal:focus, .anj-modal.sc-anj-modal:active, .anj-modal.sc-anj-modal *.sc-anj-modal:focus, .anj-modal.sc-anj-modal *.sc-anj-modal:active {\n  outline: none;\n}\n.anj-modal.anj-show.sc-anj-modal {\n  opacity: 1;\n}\n\@media (max-width: 991.98px) {\n  .anj-modal.anj-show.sc-anj-modal {\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n}\n.anj-modal.anj-show.sc-anj-modal .anj-modal-dialog.sc-anj-modal {\n  -webkit-transform: translate(0, 0);\n  transform: translate(0, 0);\n}\n.anj-modal.anj-show.sc-anj-modal .anj-modal.sc-anj-modal {\n  -webkit-transform: translate(0, 0);\n  transform: translate(0, 0);\n}\n.anj-modal.sc-anj-modal .anj-modal-dialog.sc-anj-modal {\n  position: relative;\n  -webkit-transform: translate(0, -25%);\n  transform: translate(0, -25%);\n  -webkit-transition: -webkit-transform 0.4s ease;\n  transition: -webkit-transform 0.4s ease;\n  transition: transform 0.4s ease;\n  transition: transform 0.4s ease, -webkit-transform 0.4s ease;\n  will-change: transform;\n  width: auto;\n}\n.anj-modal.sc-anj-modal .anj-modal-content.sc-anj-modal {\n  -webkit-box-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.2);\n  box-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.2);\n  border-radius: 0.25rem;\n  background-clip: padding-box;\n  background-color: #fff;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  outline: 0;\n  pointer-events: auto;\n  position: relative;\n  width: 100%;\n  will-change: max-height;\n}\n.anj-modal.sc-anj-modal .anj-modal-content.anj-animate.sc-anj-modal {\n  -webkit-transition: max-height 0.4s ease;\n  transition: max-height 0.4s ease;\n}\n\n.sc-anj-modal-s > [slot=nav-left], .sc-anj-modal-s > [slot=nav-right] {\n  --anj-text: white;\n  --anj-text-medium: rgba(255, 255, 255, 0.8);\n  --anj-text-muted: rgba(255, 255, 255, 0.6);\n  --anj-highlight: #93badf;\n  --anj-neutral-dark: rgba(255, 255, 255, 0.8);\n  --anj-neutral: rgba(255, 255, 255, 0.6);\n  bottom: -3rem;\n  position: absolute;\n}\n.sc-anj-modal-s > [slot=nav-left][slot=nav-left], .sc-anj-modal-s > [slot=nav-right][slot=nav-left] {\n  left: 50%;\n  margin-left: -3rem;\n}\n.sc-anj-modal-s > [slot=nav-left][slot=nav-right], .sc-anj-modal-s > [slot=nav-right][slot=nav-right] {\n  right: 50%;\n  margin-right: -3rem;\n}\n\@media (min-width: 768px) {\n  .sc-anj-modal-s > [slot=nav-left], .sc-anj-modal-s > [slot=nav-right] {\n    bottom: auto;\n    top: 50%;\n    -webkit-transform: translateY(-50%);\n    transform: translateY(-50%);\n  }\n  .sc-anj-modal-s > [slot=nav-left][slot=nav-left], .sc-anj-modal-s > [slot=nav-right][slot=nav-left] {\n    left: 0;\n  }\n  .sc-anj-modal-s > [slot=nav-left][slot=nav-right], .sc-anj-modal-s > [slot=nav-right][slot=nav-right] {\n    right: 0;\n  }\n}\n\n.sc-anj-modal-s > anj-tray {\n  --anj-text: white;\n  --anj-text-medium: rgba(255, 255, 255, 0.8);\n  --anj-text-muted: rgba(255, 255, 255, 0.6);\n  --anj-highlight: #93badf;\n  --anj-neutral-dark: rgba(255, 255, 255, 0.8);\n  --anj-neutral: rgba(255, 255, 255, 0.6);\n  margin-top: 5rem;\n  position: relative;\n}\n\@media (min-width: 768px) {\n  .sc-anj-modal-s > anj-tray {\n    bottom: 0;\n    left: 0;\n    margin-top: 0;\n    right: 0;\n    position: fixed;\n  }\n}\n\n\@media (min-width: 576px) {\n  .anj-modal-dialog.sc-anj-modal {\n    max-width: 500px;\n    margin: 1.75rem auto;\n  }\n\n  .anj-modal-small.sc-anj-modal {\n    max-width: 300px;\n  }\n}\n\@media (max-width: 991.98px) {\n  .anj-modal-content.sc-anj-modal {\n    max-height: initial !important;\n  }\n}\n\@media (min-width: 992px) {\n  .anj-modal-large.sc-anj-modal, .anj-modal-xlarge.sc-anj-modal {\n    max-width: 800px;\n  }\n}\n\@media (min-width: 1200px) {\n  .anj-modal-xlarge.sc-anj-modal {\n    max-width: 1080px;\n  }\n}"; }
};
Modal.closeDelay = 350;
Modal.openDelay = 50;

exports.anj_modal = Modal;
