import { h, Host } from "@stencil/core";
export class SideBar {
    constructor() {
        this.position = 'left';
    }
    async toggle(open) {
        if (open != undefined)
            return (this.state = open ? 'open' : 'closed');
        const isOpen = this.state == undefined && window.innerWidth >= 600
            ? false
            : this.state !== 'open';
        return (this.state = isOpen ? 'open' : 'closed');
    }
    componentDidLoad() {
        const observer = new MutationObserver(() => {
            const root = this.el.shadowRoot;
            const container = root.querySelector('.container');
            container.style.top = this.el.offsetTop + 'px';
            // container.style.height = this.el.offsetHeight + 'px';
        });
        observer.observe(this.el.parentElement, {
            attributes: true,
            childList: true,
            subtree: true
        });
    }
    render() {
        return (h(Host, { role: "complementary" },
            h("div", { class: "container" },
                h("slot", null))));
    }
    static get is() { return "bce-side-bar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-side-bar.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-side-bar.css"]
    }; }
    static get properties() { return {
        "state": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "'closed' | 'open'",
                "resolved": "\"closed\" | \"open\"",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "state",
            "reflect": true
        },
        "position": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'left' | 'right'",
                "resolved": "\"left\" | \"right\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "position",
            "reflect": true,
            "defaultValue": "'left'"
        }
    }; }
    static get methods() { return {
        "toggle": {
            "complexType": {
                "signature": "(open?: boolean) => Promise<\"closed\" | \"open\">",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<\"closed\" | \"open\">"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
