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

class EdelIconComponent {
    constructor() {
        this.color = undefined;
        this.name = null;
        this.size = null;
        this.faStyle = null;
    }
    render() {
        return h("i", { class: `${this.getFaStyle(this.faStyle)} fa-${this.name} ${this.getSize(this.size)}` });
    }
    componentDidLoad() {
        if (!this.color)
            return;
        this.hostElement.style.color = this.color;
    }
    getSize(size) {
        if (size != null) {
            return 'fa-' + size;
        }
        return '';
    }
    getFaStyle(faStyle) {
        return faStyle || 'fas';
    }
    static get is() { return "edel-icon"; }
    static get properties() { return {
        "color": {
            "type": String,
            "attr": "color",
            "watchCallbacks": ["componentDidLoad"]
        },
        "faStyle": {
            "type": String,
            "attr": "fa-style"
        },
        "hostElement": {
            "elementRef": true
        },
        "name": {
            "type": String,
            "attr": "name"
        },
        "size": {
            "type": String,
            "attr": "size"
        }
    }; }
}

export { EdelIconComponent as EdelIcon };
