import { h } from '../edel-elements.core.js';

class EdelCardComponent {
    constructor() {
        this.spaced = false;
        this.background = false;
        this.plain = false;
        this.slim = false;
        this.hover = false;
        this.inverted = false;
        this.bgColor = null;
        this.borderColor = null;
    }
    render() {
        return h("slot", null);
    }
    hostData() {
        return {
            class: 'card'
        };
    }
    componentDidLoad() {
        this.updateClass();
        this.updateStyles();
    }
    updateStyles() {
        this.hostElement.style.backgroundColor = this.bgColor;
        this.hostElement.style.borderColor = this.borderColor;
    }
    updateClass() {
        if (this.spaced)
            this.hostElement.classList.add('card--spaced');
        else
            this.hostElement.classList.remove('card--spaced');
        if (this.background)
            this.hostElement.classList.add('card--background');
        else
            this.hostElement.classList.remove('card--background');
        if (this.plain)
            this.hostElement.classList.add('card--plain');
        else
            this.hostElement.classList.remove('card--plain');
        if (this.slim)
            this.hostElement.classList.add('card--slim');
        else
            this.hostElement.classList.remove('card--slim');
        if (this.hover)
            this.hostElement.classList.add('card--has-hover');
        else
            this.hostElement.classList.remove('card--has-hover');
        if (this.inverted)
            this.hostElement.classList.add('card--inverted');
        else
            this.hostElement.classList.remove('card--inverted');
    }
    static get is() { return "edel-card"; }
    static get properties() { return {
        "background": {
            "type": Boolean,
            "attr": "background",
            "watchCallbacks": ["componentDidLoad"]
        },
        "bgColor": {
            "type": String,
            "attr": "bg-color",
            "watchCallbacks": ["componentDidLoad"]
        },
        "borderColor": {
            "type": String,
            "attr": "border-color",
            "watchCallbacks": ["componentDidLoad"]
        },
        "hostElement": {
            "elementRef": true
        },
        "hover": {
            "type": Boolean,
            "attr": "hover",
            "watchCallbacks": ["componentDidLoad"]
        },
        "inverted": {
            "type": Boolean,
            "attr": "inverted",
            "watchCallbacks": ["componentDidLoad"]
        },
        "plain": {
            "type": Boolean,
            "attr": "plain",
            "watchCallbacks": ["componentDidLoad"]
        },
        "slim": {
            "type": Boolean,
            "attr": "slim",
            "watchCallbacks": ["componentDidLoad"]
        },
        "spaced": {
            "type": Boolean,
            "attr": "spaced",
            "watchCallbacks": ["componentDidLoad"]
        }
    }; }
}

export { EdelCardComponent as EdelCard };
