var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
import { r as registerInstance, c as createEvent, h, g as getElement } from './core-58de451e.js';
import { e as debounce, O as OVERLAY_OPEN_CLASS } from './utils-3aef1637.js';
import { c as constrainFocus } from './a11y-3dcc958f.js';
var Modal = /** @class */ (function () {
    function class_1(hostRef) {
        var _this = this;
        registerInstance(this, hostRef);
        this.overlayListener = function (event) { return _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 = createEvent(this, "anjModalWillOpen", 7);
        this.anjModalDidOpen = createEvent(this, "anjModalDidOpen", 7);
        this.anjModalWillClose = createEvent(this, "anjModalWillClose", 7);
        this.anjModalDidClose = createEvent(this, "anjModalDidClose", 7);
    }
    class_1.prototype.componentWillLoad = function () {
        this.onResize = debounce(this.onResize.bind(this), 50);
    };
    class_1.prototype.connectedCallback = function () {
        this.bodyEl = this.element.ownerDocument.body;
    };
    class_1.prototype.disconnectedCallback = function () {
        this.bodyEl.classList.remove(OVERLAY_OPEN_CLASS);
        this.modalEl.removeEventListener('mouseup', this.overlayListener);
        if (this.showing) {
            this.modalEl.remove();
        }
    };
    class_1.prototype.onBottomContentLoaded = function (_a) {
        var target = _a.target;
        this.bottomEl = target;
    };
    class_1.prototype.onResize = function () {
        if (!this.showing)
            return;
        this.setContentHeight();
    };
    /**
     * Show the modal
     */
    class_1.prototype.open = function () {
        return __awaiter(this, void 0, void 0, function () {
            var _this = this;
            return __generator(this, function (_a) {
                this.anjModalWillOpen.emit();
                this.triggerEl = document.activeElement;
                this.appendModal(this.bodyEl);
                this.bodyEl.classList.add(OVERLAY_OPEN_CLASS);
                this.active = true;
                return [2 /*return*/, new Promise(function (resolve) {
                        window.setTimeout(function () {
                            _this.setContentHeight();
                            _this.showing = true;
                            _this.modalEl.focus();
                            _this.anjModalDidOpen.emit();
                            resolve();
                        }, Modal.openDelay);
                    })];
            });
        });
    };
    /**
     * Hide the modal
     */
    class_1.prototype.close = function () {
        return __awaiter(this, void 0, void 0, function () {
            var _this = this;
            return __generator(this, function (_a) {
                if (!this.showing)
                    return [2 /*return*/];
                this.showing = false;
                return [2 /*return*/, new Promise(function (resolve) {
                        window.setTimeout(function () {
                            _this.active = false;
                            _this.disconnectedCallback();
                            if (_this.triggerEl) {
                                _this.triggerEl.focus();
                            }
                            _this.appendModal(_this.element);
                            _this.anjModalDidClose.emit();
                            resolve();
                        }, Modal.closeDelay);
                    })];
            });
        });
    };
    class_1.prototype.guardedClose = function (event) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                if (!event || event instanceof CustomEvent || this.overlayClose) {
                    this.anjModalWillClose.emit();
                }
                return [2 /*return*/];
            });
        });
    };
    class_1.prototype.onKeyDown = function (event) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                if (event.key === 'Escape') {
                    return [2 /*return*/, this.guardedClose()];
                }
                else if (event.key === 'Tab') {
                    constrainFocus(event, this.modalEl);
                }
                return [2 /*return*/];
            });
        });
    };
    class_1.prototype.setContentHeight = function (offset) {
        if (this.contentEl) {
            var bottomOffset = offset ? offset : this.bottomEl ? this.bottomEl.offsetHeight : 0;
            this.contentEl.style.maxHeight = this.modalEl.offsetHeight - bottomOffset - (this.dialogEl.offsetTop * 2) + "px";
        }
    };
    class_1.prototype.appendModal = function (el) {
        var modalEl = (el.contains(this.modalEl)) ? this.element.removeChild(this.modalEl) : this.modalEl;
        el.appendChild(modalEl);
    };
    class_1.prototype.render = function () {
        var _this = this;
        var modalClasses = this.showing ? 'anj-modal anj-show' : 'anj-modal';
        var dialogClasses = "anj-modal-dialog anj-modal-" + this.size;
        var contentClasses = this.bottomEl ? 'anj-modal-content anj-animate' : 'anj-modal-content';
        // Gets around a weird typing thing with custom event hooks on native elements
        var containerEvents = {
            'onAnjClose': function (e) { return _this.guardedClose(e); },
            'onAnjTrayCollapse': function (_a) {
                var detail = _a.detail;
                return _this.setContentHeight(detail);
            }
        };
        return (h("div", Object.assign({ class: modalClasses, style: { display: this.active ? 'block' : 'none' }, onKeyDown: function (ev) { return _this.onKeyDown(ev); }, ref: function (ref) { return _this.modalEl = ref; }, tabindex: "-1", onMouseDown: function () { return _this.modalEl.addEventListener('mouseup', _this.overlayListener); } }, containerEvents), h("div", { class: dialogClasses, role: "document", ref: function (ref) { return _this.dialogEl = ref; }, onMouseDown: function (e) { return e.stopPropagation(); }, onMouseUp: function (e) { return e.stopPropagation(); } }, h("div", { class: contentClasses, ref: function (ref) { return _this.contentEl = ref; } }, h("slot", null), h("slot", { name: "nav-left" }), h("slot", { name: "nav-right" }))), h("slot", { name: "tray" })));
    };
    Object.defineProperty(class_1.prototype, "element", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(class_1, "style", {
        get: function () { 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}}"; },
        enumerable: true,
        configurable: true
    });
    return class_1;
}());
Modal.closeDelay = 350;
Modal.openDelay = 50;
var ModalBody = /** @class */ (function () {
    function ModalBody(hostRef) {
        registerInstance(this, hostRef);
    }
    Object.defineProperty(ModalBody, "style", {
        get: function () { 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}}"; },
        enumerable: true,
        configurable: true
    });
    return ModalBody;
}());
var ModalFooter = /** @class */ (function () {
    function ModalFooter(hostRef) {
        registerInstance(this, hostRef);
    }
    Object.defineProperty(ModalFooter, "style", {
        get: function () { 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}"; },
        enumerable: true,
        configurable: true
    });
    return ModalFooter;
}());
var ModalHeader = /** @class */ (function () {
    function ModalHeader(hostRef) {
        registerInstance(this, hostRef);
    }
    Object.defineProperty(ModalHeader, "style", {
        get: function () { 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}"; },
        enumerable: true,
        configurable: true
    });
    return ModalHeader;
}());
export { Modal as anj_modal, ModalBody as anj_modal_body, ModalFooter as anj_modal_footer, ModalHeader as anj_modal_header };
