import { Host, h } from "@stencil/core";
import { cls } from "../../utils/helpers";
export class XCollapse {
    constructor() {
        this.header = undefined;
        this.show = false;
        this.expanded = false;
    }
    /**
     * Element toggle state
     */
    async toggle() {
        this.toggleCollapse();
    }
    /**
     * Watch expanded state changes
     */
    onExpandedChange() {
        this.updateCollapse();
    }
    /**
     * On component loaded action
     */
    componentDidLoad() {
        this.container = this.el.querySelector('.collapse-container');
        if (this.show) {
            this.expanded = true;
        }
    }
    /**
     * Toggle the visibility of content
     */
    toggleCollapse() {
        this.expanded = !this.expanded;
    }
    updateCollapse() {
        const container = this.el.querySelector('.collapse-container');
        if (container.style.maxHeight) {
            this.hideCollapseContainer();
        }
        else {
            this.showCollapseContainer();
        }
    }
    hideCollapseContainer() {
        this.container.style.maxHeight = null;
        this.container.style.overflow = 'hidden';
    }
    showCollapseContainer() {
        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
        setTimeout(() => {
            this.container.style.overflow = 'auto';
        }, 200);
    }
    /**
     * Render component
     */
    render() {
        var _a;
        return h(Host, { key: '340d35f5f3036fd79926291fc34a7e473c4c2fa2', class: cls({ 'collapse-expanded': this.expanded }) }, h("div", { key: 'd8036f0e3b289115db446624feb8cf389565ba38', class: "collapse-header", onClick: () => this.toggleCollapse() }, ((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) ? h("h4", null, this.header) : h("slot", { name: "header" }), h("span", { key: '3ffd78f1814f1bd65e95382b8e8c710d64c326ae', class: "collapse-action" }, h("x-icon", { key: 'ec8e4026ca69d5d6fd22711afb6bc60516b78f09', name: this.expanded ? 'minus' : 'dropdown' }))), h("div", { key: '6458af67fa01ec420154ce098942a16ff8516450', class: "collapse-container" }, h("slot", { key: '550b37e509bba6612760a766a8d7113cd745d5e0' })));
    }
    static get is() { return "x-collapse"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "header": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element title header text"
                },
                "attribute": "header",
                "reflect": false
            },
            "show": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element show content"
                },
                "attribute": "show",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "expanded": {}
        };
    }
    static get methods() {
        return {
            "toggle": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Element toggle state",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "expanded",
                "methodName": "onExpandedChange"
            }];
    }
}
