import { h } from '@stencil/core';
export class Card {
    constructor() {
        this.width = 'auto';
        this.height = 'auto';
        this.elevation = 1;
        this.actionButtons = [];
        this.actionIcons = [];
        this.fullBleedAction = true;
    }
    componentWillLoad() {
        Array.from(this.host.querySelectorAll('materials-card-action')).forEach((action, _index, array) => {
            if (action.icon) {
                this.actionIcons.push(action);
            }
            else {
                this.actionButtons.push(action);
            }
            this.fullBleedAction = action.fullBleed;
            if (action.fullBleed && array.length > 1) {
                console.error('You should use only one full bleed action');
                return Promise.reject();
            }
        });
        return Promise.resolve();
    }
    componentDidLoad() {
        if (this.maxHeight)
            this.mdcCardEl.style.setProperty('max-height', this.maxHeight);
    }
    render() {
        return (h("div", { ref: elRef => { this.mdcCardEl = elRef; }, class: `mdc-card mdc-elevation--z${this.elevation}`, style: { 'height': this.height, 'width': this.width } },
            this.onAction ?
                h("div", { class: { 'mdc-card__primary-action': !!this.onAction }, onClick: () => this.onAction(), tabindex: this.onAction ? '0' : null },
                    h("div", { class: "mdc-card__media" },
                        h("div", { class: "mdc-card__media-content" }, this.cardTitle)),
                    h("slot", null)) :
                h("div", { style: { 'height': '100%', 'padding': this.padding ? this.padding + 'px' : null } },
                    h("slot", null)),
            ((this.actionButtons && this.actionButtons.length > 0) || (this.actionIcons && this.actionIcons.length > 0)) &&
                h("div", { class: { 'mdc-card__actions': true, 'mdc-card__actions--full-bleed': this.fullBleedAction } },
                    this.actionButtons && h("div", { class: "mdc-card__action-buttons" }, this.actionButtons.map(action => {
                        return (h("button", { onClick: () => action.onAction(), class: "mdc-button mdc-card__action mdc-card__action--button" },
                            h("span", { class: "mdc-button__label" }, action.label)));
                    })),
                    this.actionIcons && h("div", { class: "mdc-icons-buttons" }, this.actionIcons.map(action => {
                        return (h("button", { onClick: () => action.onAction(), class: "material-icons mdc-icon-button mdc-card__action mdc-card__action--icon", title: action.label }, action.icon));
                    })))));
    }
    static get is() { return "materials-card"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["card.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["card.css"]
    }; }
    static get properties() { return {
        "width": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "width",
            "reflect": false,
            "defaultValue": "'auto'"
        },
        "height": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "height",
            "reflect": false,
            "defaultValue": "'auto'"
        },
        "maxHeight": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "max-height",
            "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": "1"
        },
        "padding": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "padding",
            "reflect": false
        },
        "cardTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "card-title",
            "reflect": false
        },
        "onAction": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "Function",
                "resolved": "Function",
                "references": {
                    "Function": {
                        "location": "global"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
    static get states() { return {
        "actionButtons": {},
        "actionIcons": {},
        "fullBleedAction": {}
    }; }
    static get elementRef() { return "host"; }
}
