'use strict';

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

const core = require('./core-bc7a73f4.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{display:none;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none;background-color:var(--anj-light);bottom:0;pointer-events:none;position:absolute;right:0;top:0;-webkit-transform:translateX(100%);transform:translateX(100%);z-index:500}.sc-anj-drawer-h, .sc-anj-drawer-h:after, .sc-anj-drawer-h:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}.sc-anj-drawer-h:active, .sc-anj-drawer-h .sc-anj-drawer:active, .sc-anj-drawer-h:focus, .sc-anj-drawer-h .sc-anj-drawer:focus{outline:none}.anj-active.sc-anj-drawer-h{-webkit-box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);pointer-events:auto;-webkit-transform:translateX(0);transform:translateX(0)}.hydrated.sc-anj-drawer-h{-webkit-transition:all .5s ease;transition:all .5s ease}.sc-anj-drawer-h .anj-drawer-content.sc-anj-drawer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:100%}"; }
};

const DrawerBody = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
    }
    static get style() { return "anj-drawer-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:scroll;padding:1.25rem}"; }
};

const DrawerContainer = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
    }
    static get style() { return "anj-drawer-container{display:block;min-height:100%;overflow:hidden;position:relative}"; }
};

const DrawerFooter = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
    }
    static get style() { return "anj-drawer-footer{border-top:1px solid var(--anj-border);padding:1.25rem}"; }
};

const DrawerHeader = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
    }
    static get style() { return "anj-drawer-header{border-bottom:1px solid var(--anj-border);padding:.75rem 1.25rem}"; }
};

exports.anj_drawer = Drawer;
exports.anj_drawer_body = DrawerBody;
exports.anj_drawer_container = DrawerContainer;
exports.anj_drawer_footer = DrawerFooter;
exports.anj_drawer_header = DrawerHeader;
