import { Host, h } from "@stencil/core";
export class Accordion {
    constructor() {
        this.animating = false;
    }
    async componentWillLoad() {
        return this.toggle(this.expanded);
    }
    disconnectedCallback() {
        window.clearTimeout(this.timer);
    }
    async toggle(event) {
        if (this.animating)
            return;
        const toggle = event instanceof CustomEvent ? event.target : this.getToggle();
        toggle.expanded = event instanceof CustomEvent ? !this.expanded : event;
        return this.slide(toggle.expanded);
    }
    async slide(expanding) {
        const wrapper = this.getWrapper();
        if (!wrapper)
            return;
        this.animating = true;
        if (!expanding) {
            wrapper.style.height = this.getContentHeight();
        }
        return new Promise((resolve) => {
            window.setTimeout(() => {
                wrapper.style.height = expanding ? this.getContentHeight() : '0';
                this.timer = window.setTimeout(() => {
                    this.expanded = expanding;
                    this.animating = false;
                    wrapper.style.height = null;
                    resolve();
                }, 500);
            }, 50);
        });
    }
    getToggle() {
        return this.element.querySelector('anj-accordion-toggle');
    }
    getWrapper() {
        return this.element.querySelector('.anj-accordion-wrapper');
    }
    getContentHeight() {
        return `${this.element.querySelector('.anj-accordion-content').offsetHeight}px`;
    }
    render() {
        return (h(Host, { class: { 'anj-animate': this.animating } },
            h("div", { class: "anj-accordion-header" },
                h("slot", { name: "header" })),
            h("div", { class: "anj-accordion-wrapper" },
                h("div", { class: "anj-accordion-content" },
                    h("slot", null)))));
    }
    static get is() { return "anj-accordion"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["accordion.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["accordion.css"]
    }; }
    static get properties() { return {
        "expanded": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "If true, the accordion displays the main content. The default is for them to start closed."
            },
            "attribute": "expanded",
            "reflect": true
        }
    }; }
    static get states() { return {
        "animating": {}
    }; }
    static get methods() { return {
        "toggle": {
            "complexType": {
                "signature": "(event: boolean | CustomEvent<any>) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "CustomEvent": {
                        "location": "global"
                    },
                    "HTMLAnjAccordionToggleElement": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "element"; }
    static get listeners() { return [{
            "name": "anjAccordionToggle",
            "method": "toggle",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
