import { h } from '@stencil/core';
export class ExpansionPanel {
    constructor() {
        this.elevation = 2;
        this.collapsed = true;
    }
    getClasses() {
        const classes = {
            'mdc-base': true,
            'mdc-typography': true,
            'materials-expansion-panel': true,
            'materials-expansion-panel-expanded': !this.collapsed
        };
        classes['mdc-elevation--z' + this.elevation] = true;
        return classes;
    }
    render() {
        return (h("div", { class: this.getClasses() },
            h("materials-list-item", { class: "materials-expansion-panel-header", onClick: () => { this.collapsed = !this.collapsed; }, noPadding: this.noPadding },
                h("header", { class: "mdc-typography--subheading2" },
                    h("slot", { name: "header" })),
                h("materials-icon", { slot: "item-end", name: this.collapsed ? 'expand_more' : 'expand_less' })),
            h("div", { class: { 'materials-expansion-panel-body': true, 'collapsed': this.collapsed } },
                h("div", { class: "collapsible-body" },
                    h("slot", { name: "body" })))));
    }
    static get is() { return "materials-expansion-panel"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["expansion-panel.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["expansion-panel.css"]
    }; }
    static get properties() { return {
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'accordion' | 'expandable' | 'popout'",
                "resolved": "\"accordion\" | \"expandable\" | \"popout\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "type",
            "reflect": false
        },
        "elevation": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "elevation",
            "reflect": false,
            "defaultValue": "2"
        },
        "collapsed": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "collapsed",
            "reflect": false,
            "defaultValue": "true"
        },
        "noPadding": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "no-padding",
            "reflect": false
        }
    }; }
    static get elementRef() { return "collapsibleEl"; }
}
