export class EdelIconComponent {
    constructor() {
        this.color = undefined;
        this.name = null;
        this.size = null;
        this.faStyle = null;
    }
    render() {
        const { style, name } = this.getNormalizedStyleAndName();
        return h("i", { class: `${style} fa-${name} ${this.getSize(this.size)}` });
    }
    componentDidLoad() {
        if (!this.color)
            return;
        this.hostElement.style.color = this.color;
    }
    getNormalizedStyleAndName() {
        const matches = (this.name || '').match(/^(fa[sbrl]?)-(.*)$/);
        if (matches && matches.length === 3) {
            const style = matches[1];
            const name = matches[2];
            return { style, name };
        }
        else {
            return {
                style: this.getFaStyle(this.faStyle),
                name: this.name
            };
        }
    }
    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"
        }
    }; }
}
