'use strict';

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

const core = require('./core-7e2b0104.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 = `${window.innerHeight - bottomOffset - (this.dialogEl.offsetTop * 2)}px`;
        }
    }
    appendModal(el) {
        const modalEl = (el.contains(this.modalEl)) ? this.element.removeChild(this.modalEl) : this.modalEl;
        el.appendChild(modalEl);
    }
    onOverlayMouseDown(e) {
        if (e.target === this.modalEl) {
            this.modalEl.addEventListener('mouseup', this.overlayListener);
        }
    }
    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: e => this.onOverlayMouseDown(e) }, containerEvents), core.h("div", { class: dialogClasses, role: "document", ref: ref => this.dialogEl = ref }, 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{display:none;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;background-color:var(--anj-theater);height:100%;left:0;opacity:0;outline:none;overflow:hidden;position:fixed;top:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;width:100%;will-change:opacity;z-index:1050}.anj-modal.sc-anj-modal, .anj-modal.sc-anj-modal:after, .anj-modal.sc-anj-modal:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}.anj-modal.sc-anj-modal:active, .anj-modal.sc-anj-modal .sc-anj-modal:active, .anj-modal.sc-anj-modal:focus, .anj-modal.sc-anj-modal .sc-anj-modal:focus{outline:none}.anj-modal.anj-show.sc-anj-modal{opacity:1}\@media (max-width:991.98px){.anj-modal.anj-show.sc-anj-modal{overflow-x:hidden;overflow-y:auto}}.anj-modal.anj-show.sc-anj-modal .anj-modal.sc-anj-modal, .anj-modal.anj-show.sc-anj-modal .anj-modal-dialog.sc-anj-modal{-webkit-transform:translate(0);transform:translate(0)}.anj-modal.sc-anj-modal .anj-modal-dialog.sc-anj-modal{position:relative;-webkit-transform:translateY(-25%);transform:translateY(-25%);-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;will-change:transform;width:auto}.anj-modal.sc-anj-modal .anj-modal-content.sc-anj-modal{-webkit-box-shadow:0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12),0 7px 8px -4px rgba(0,0,0,.2);box-shadow:0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12),0 7px 8px -4px rgba(0,0,0,.2);border-radius:.25rem;background-clip:padding-box;background-color:#fff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;outline:0;pointer-events:auto;position:relative;width:100%;will-change:max-height}.anj-modal.sc-anj-modal .anj-modal-content.anj-animate.sc-anj-modal{-webkit-transition:max-height .4s ease;transition:max-height .4s ease}.sc-anj-modal-s > [slot=nav-left], .sc-anj-modal-s > [slot=nav-right]{--anj-text:#fff;--anj-text-medium:hsla(0,0%,100%,0.8);--anj-text-muted:hsla(0,0%,100%,0.6);--anj-highlight:#93badf;--anj-neutral-dark:hsla(0,0%,100%,0.8);--anj-neutral:hsla(0,0%,100%,0.6);bottom:-3rem;position:absolute}.sc-anj-modal-s > [slot=nav-left][slot=nav-left], .sc-anj-modal-s > [slot=nav-right][slot=nav-left]{left:50%;margin-left:-3rem}.sc-anj-modal-s > [slot=nav-left][slot=nav-right], .sc-anj-modal-s > [slot=nav-right][slot=nav-right]{right:50%;margin-right:-3rem}\@media (min-width:768px){.sc-anj-modal-s > [slot=nav-left], .sc-anj-modal-s > [slot=nav-right]{bottom:auto;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.sc-anj-modal-s > [slot=nav-left][slot=nav-left], .sc-anj-modal-s > [slot=nav-right][slot=nav-left]{left:0}.sc-anj-modal-s > [slot=nav-left][slot=nav-right], .sc-anj-modal-s > [slot=nav-right][slot=nav-right]{right:0}}.sc-anj-modal-s > anj-tray{--anj-text:#fff;--anj-text-medium:hsla(0,0%,100%,0.8);--anj-text-muted:hsla(0,0%,100%,0.6);--anj-highlight:#93badf;--anj-neutral-dark:hsla(0,0%,100%,0.8);--anj-neutral:hsla(0,0%,100%,0.6);margin-top:5rem;position:relative}\@media (min-width:768px){.sc-anj-modal-s > anj-tray{bottom:0;left:0;margin-top:0;right:0;position:fixed}}\@media (min-width:576px){.anj-modal-dialog.sc-anj-modal{max-width:500px;margin:1.75rem auto}.anj-modal-small.sc-anj-modal{max-width:300px}}\@media (max-width:991.98px){.anj-modal-content.sc-anj-modal{max-height:none!important}}\@media (min-width:992px){.anj-modal-large.sc-anj-modal, .anj-modal-xlarge.sc-anj-modal{max-width:800px}}\@media (min-width:1200px){.anj-modal-xlarge.sc-anj-modal{max-width:1080px}}"; }
};
Modal.closeDelay = 350;
Modal.openDelay = 50;

const ModalBody = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
    }
    static get style() { return "anj-modal-body{-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem;position:relative}\@media (min-width:768px){anj-modal-body{overflow-x:hidden;overflow-y:scroll}}"; }
};

const ModalFooter = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
    }
    static get style() { return "anj-modal-footer{border-bottom-right-radius:.3rem;border-bottom-left-radius:.3rem;-ms-flex-align:center;align-items:center;border-top:1px solid var(--anj-border);display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;padding:1rem}anj-modal-footer>:not(:first-child){margin-left:.25rem}anj-modal-footer>:not(:last-child){margin-right:.25rem}"; }
};

const ModalHeader = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
    }
    static get style() { return "anj-modal-header{border-top-left-radius:.3rem;border-top-right-radius:.3rem;-ms-flex-align:start;align-items:flex-start;border-bottom:1px solid var(--anj-border);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:1rem 1rem}"; }
};

exports.anj_modal = Modal;
exports.anj_modal_body = ModalBody;
exports.anj_modal_footer = ModalFooter;
exports.anj_modal_header = ModalHeader;
