// Libraries
import properties from 'css-custom-properties';
// Stencil
import { h } from "@stencil/core";
export class Accordion {
    constructor() {
        // Props
        this.open = false;
        this.iconColor = 'dark';
        // States
        this.blur = 0;
    }
    ////////////////////////////////////////////////////////////////
    // Life Cycle
    ////////////////////////////////////////////////////////////////
    /**
     * Override
     */
    componentWillLoad() {
        // Create a Mutation Observer to refresh the list when the child list change
        var callback = (mutationsList) => {
            for (var mutation of mutationsList) {
                if (mutation.type == 'childList') {
                    this.refresh();
                }
            }
        };
        this.observer = new MutationObserver(callback);
    }
    /**
     * Override
     */
    componentDidLoad() {
        this.expander = this.element.shadowRoot.querySelector(".expander");
        this.refresh();
        this.attachObserver();
    }
    /**
     * Override
     */
    componentWillUnload() {
        this.observer.disconnect();
    }
    ////////////////////////////////////////////////////////////////
    // Stencil Methods
    ////////////////////////////////////////////////////////////////
    async refresh() {
        // Since Stencil core 0.17.0
        // Well I don't know exactly why, but the slot isn't yet added
        // to the expander. We need to wait for a while before evaluating
        // the scroll height
        setTimeout(() => {
            properties.set({
                "--accordion-height": `${this.expander.scrollHeight}px`
            }, this.element);
        }, 200);
    }
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * Switch the open state
     */
    handleClick() {
        this.open = !this.open;
    }
    ////////////////////////////////////////////////////////////////
    // Private Methods
    ////////////////////////////////////////////////////////////////
    /**
     * Attach the observer
     */
    attachObserver() {
        // Start observing the target node for configured mutations
        this.observer.observe(this.element, { childList: true, subtree: true });
    }
    /**
     * Return the expander class depending on the open state
     */
    getCurrentClasses() {
        return `expander ${this.openClass()}`;
    }
    /**
     * Return the css class whether it's open or not
     */
    openClass() {
        return (this.open) ? "open" : "";
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: "wrap" },
            h("div", { class: "button-wrap", title: "Get the answer of this frequently asked question", onClick: () => this.handleClick() },
                h("slot", { name: "title" }),
                h("ion-icon", { color: this.iconColor, class: "chevron", name: "arrow-down" })),
            h("div", { class: this.getCurrentClasses() },
                h("slot", { name: "content" }))));
    }
    static get is() { return "dos-accordion"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["dos-accordion.css"]
    }; }
    static get styleUrls() { return {
        "$": ["dos-accordion.css"]
    }; }
    static get properties() { return {
        "open": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "open",
            "reflect": true,
            "defaultValue": "false"
        },
        "iconColor": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon-color",
            "reflect": false,
            "defaultValue": "'dark'"
        }
    }; }
    static get states() { return {
        "blur": {},
        "expander": {},
        "observer": {}
    }; }
    static get methods() { return {
        "refresh": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "element"; }
}
