import { MDCTopAppBar } from '@material/top-app-bar';
import { h } from '@stencil/core';
export class TopAppBar {
    componentDidLoad() {
        this.topAppBarElement = this.host.querySelector('.mdc-top-app-bar');
        const topAppBar = MDCTopAppBar.attachTo(this.topAppBarElement);
        topAppBar.listen('MDCTopAppBar:nav', () => {
            this.toggleMenu.emit();
        });
    }
    getTopAppBarClasses() {
        return {
            'mdc-top-app-bar': true,
            'mdc-top-app-bar--fixed': this.fixed,
            'mdc-top-app-bar--prominent': this.prominent,
            'mdc-top-app-bar--dense': this.dense,
            'mdc-top-app-bar--short': this.short,
        };
    }
    render() {
        return h("header", { class: this.getTopAppBarClasses() },
            h("div", { class: "mdc-top-app-bar__row" },
                h("section", { class: "mdc-top-app-bar__section mdc-top-app-bar__section--align-start" },
                    h("a", { class: "material-icons mdc-top-app-bar__navigation-icon" }, "menu"),
                    h("span", { class: "mdc-top-app-bar__title" }, this.barTitle))));
    }
    static get is() { return "materials-top-app-bar"; }
    static get originalStyleUrls() { return {
        "$": ["top-app-bar.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["top-app-bar.css"]
    }; }
    static get properties() { return {
        "barTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "bar-title",
            "reflect": false
        },
        "dense": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "dense",
            "reflect": false
        },
        "prominent": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "prominent",
            "reflect": false
        },
        "fixed": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "fixed",
            "reflect": false
        },
        "short": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "short",
            "reflect": false
        }
    }; }
    static get events() { return [{
            "method": "toggleMenu",
            "name": "toggleMenu",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }]; }
    static get elementRef() { return "host"; }
}
