'use strict';

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

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

const Drawer = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.anjDrawerChange = core.createEvent(this, "anjDrawerChange", 7);
    }
    async onKeyDown(event) {
        if (event.key === 'Escape') {
            return this.close();
        }
        else if (event.key === 'Tab') {
            a11y.constrainFocus(event, this.element);
        }
    }
    onTransitionEnd(event) {
        if (event.target === this.element && event.propertyName === 'transform') {
            if (this.active) {
                this.element.focus();
            }
            else {
                this.element.style.display = '';
            }
        }
    }
    /**
     * Close the drawer
     */
    async close() {
        this.active = false;
        this.emitChange();
        if (this.triggerEl) {
            this.triggerEl.focus();
        }
    }
    /**
     * Open the drawer
     */
    async open() {
        this.triggerEl = document.activeElement;
        return new Promise(resolve => {
            this.element.style.display = 'block';
            window.setTimeout(() => {
                this.contentEl.style.maxHeight = `${this.contentEl.offsetHeight}px`;
                this.active = true;
                this.emitChange();
                resolve();
            });
        });
    }
    /**
     * Toggle the drawer
     */
    async toggle() {
        if (this.active) {
            return this.close();
        }
        else {
            return this.open();
        }
    }
    emitChange() {
        this.anjDrawerChange.emit({
            active: this.active,
            contentHeight: this.contentEl.offsetHeight
        });
    }
    render() {
        return (core.h(core.Host, { class: { 'anj-active': this.active }, tabindex: "-1" }, core.h("div", { class: "anj-drawer-content", ref: el => this.contentEl = el }, core.h("slot", null))));
    }
    get element() { return core.getElement(this); }
    static get style() { return ".sc-anj-drawer-h {\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-light);\n  bottom: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  -webkit-transform: translateX(100%);\n  transform: translateX(100%);\n  z-index: 500;\n}\n.sc-anj-drawer-h, .sc-anj-drawer-h::before, .sc-anj-drawer-h::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-drawer-h:focus, .sc-anj-drawer-h:active, .sc-anj-drawer-h *.sc-anj-drawer:focus, .sc-anj-drawer-h *.sc-anj-drawer:active {\n  outline: none;\n}\n.anj-active.sc-anj-drawer-h {\n  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n  pointer-events: auto;\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n.hydrated.sc-anj-drawer-h {\n  -webkit-transition: all 0.5s ease;\n  transition: all 0.5s ease;\n}\n.sc-anj-drawer-h .anj-drawer-content.sc-anj-drawer {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  min-height: 100%;\n}"; }
};

exports.anj_drawer = Drawer;
