import { h, Host } from "@stencil/core";
export class SideBar {
    constructor() {
        this.position = 'left';
    }
    get style() {
        if (this.open == undefined)
            return {};
        return this.open ? { width: '256px' } : { width: '0' };
    }
    async toggle(open) {
        if (open != undefined)
            return (this.open = open);
        // prettier-ignore
        return this.open = this.open == undefined && window.innerWidth >= 600
            ? false
            : !this.open;
    }
    componentDidLoad() {
        const observer = new MutationObserver(() => {
            const aside = this.el.shadowRoot.querySelector('aside');
            aside.style.top = this.el.offsetTop + 'px';
        });
        observer.observe(this.el.parentElement, {
            attributes: true,
            childList: true,
            subtree: true
        });
    }
    render() {
        return (h(Host, { style: this.style },
            h("aside", { style: this.style },
                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 {
        "open": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "open",
            "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<boolean>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<boolean>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
