import { MDCDrawer } from '@material/drawer';
import { h } from "@stencil/core";
export class Drawer {
    /**
     * Open/close the drawer
     */
    async toggle() {
        this.mdcDrawer.open = !this.mdcDrawer.open;
    }
    /** Open the drawer */
    async open() {
        this.mdcDrawer.open = true;
    }
    /** Close the drawer */
    async close() {
        this.mdcDrawer.open = false;
    }
    async componentDidLoad() {
        this.items = Array.from(this.host.querySelectorAll('materials-drawer-list-item'));
    }
    componentDidUpdate() {
        this.mdcDrawer = MDCDrawer.attachTo(this.host.shadowRoot.querySelector('.mdc-drawer'));
    }
    getDrawerClasses() {
        return {
            'mdc-drawer': true,
            'mdc-drawer--dismissible': this.dismissible,
            'mdc-drawer--modal': this.modal,
            'mdc-top-app-bar--fixed-adjust': true
        };
    }
    async renderHtml() {
        return this.render();
    }
    render() {
        return ([
            h("aside", { class: this.getDrawerClasses() },
                h("div", { class: "mdc-drawer__content" },
                    h("nav", { class: "mdc-list" }, this.items.map(item => {
                        return h("a", { class: {
                                'mdc-list-item': true,
                                'mdc-list-item--activated': item.activated
                            }, href: item.targetUrl, onClick: (e) => item.press(e), "aria-current": "page" },
                            item.icon && h("i", { class: "material-icons mdc-list-item__graphic", "aria-hidden": "true" }, item.icon),
                            h("span", { class: "mdc-list-item__text" }, item.label));
                    }))))
        ]);
    }
    static get is() { return "materials-drawer"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["drawer.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["drawer.css"]
    }; }
    static get properties() { return {
        "dismissible": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Apply dismissible style on the drawer"
            },
            "attribute": "dismissible",
            "reflect": false
        },
        "modal": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Set the drawer as a modal"
            },
            "attribute": "modal",
            "reflect": false
        }
    }; }
    static get states() { return {
        "topAppBar": {},
        "items": {}
    }; }
    static get methods() { return {
        "toggle": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Open/close the drawer",
                "tags": []
            }
        },
        "open": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Open the drawer",
                "tags": []
            }
        },
        "close": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Close the drawer",
                "tags": []
            }
        },
        "renderHtml": {
            "complexType": {
                "signature": "() => Promise<any[]>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<any[]>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "host"; }
}
