import { Host, h } from "@stencil/core";
import { constrainFocus } from '../../utils/a11y';
export class Drawer {
    async onKeyDown(event) {
        if (event.key === 'Escape') {
            return this.close();
        }
        else if (event.key === 'Tab') {
            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 (h(Host, { class: { 'anj-active': this.active }, tabindex: "-1" },
            h("div", { class: "anj-drawer-content", ref: el => this.contentEl = el },
                h("slot", null))));
    }
    static get is() { return "anj-drawer"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["drawer.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["drawer.css"]
    }; }
    static get states() { return {
        "active": {}
    }; }
    static get events() { return [{
            "method": "anjDrawerChange",
            "name": "anjDrawerChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Fires when the checked state of checkbox is changed"
            },
            "complexType": {
                "original": "DrawerChangeEvent",
                "resolved": "DrawerChangeEvent",
                "references": {
                    "DrawerChangeEvent": {
                        "location": "import",
                        "path": "../../types/types"
                    }
                }
            }
        }]; }
    static get methods() { return {
        "close": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Close the drawer",
                "tags": []
            }
        },
        "open": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "HTMLElement": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Open the drawer",
                "tags": []
            }
        },
        "toggle": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Toggle the drawer",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "element"; }
    static get listeners() { return [{
            "name": "keydown",
            "method": "onKeyDown",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "transitionend",
            "method": "onTransitionEnd",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjClose",
            "method": "close",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
