{ /*
usage example:

<ema-repeater
    element="ul"
    template="<li>${type}: ${title}</li>"
    data-json='[{"type":"TV serie","title": "Game of Thrones"},{"type":"TV serie","title": "Bonanza"}]'>
</ema-repeater>

*/
}
import { h } from '@stencil/core';
export class Repeater {
    constructor() {
        this.content = [];
        this.element = "ul";
        this.template = '';
    }
    componentDidLoad() {
        this.postRender();
    }
    componentDidUpdate() {
        this.postRender();
    }
    postRender() {
        this.el.innerHTML = this.html;
    }
    async setData(content) {
        this.content = content;
    }
    async setTemplate(template) {
        this.templateString = template;
    }
    interpolate(template, obj) {
        if (typeof obj == "object") {
            for (let key in obj) {
                const find = "${" + key + "}";
                if (template.indexOf(find) > -1) {
                    template = template.replace(find, obj[key]);
                    delete obj[key];
                }
            }
        }
        return template;
    }
    render() {
        const element = this.element;
        let html = (element !== null) ? "<" + element.toLowerCase() + ">" : "";
        if (this.template) {
            this.templateString = this.template;
        }
        if (this.dataJson) {
            this.content = JSON.parse(this.dataJson);
        }
        if (Array.isArray(this.content)) {
            this.content.forEach((item) => {
                html += this.interpolate(this.templateString, item);
            });
        }
        else {
            throw new Error("Content should be an Array of objects.");
        }
        html += (element !== null) ? "</" + element.toLowerCase() + ">" : "";
        this.html = html;
        return (h("div", null));
    }
    static get is() { return "ema-repeater"; }
    static get properties() { return {
        "dataJson": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "data-json",
            "reflect": false
        },
        "element": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "element",
            "reflect": false,
            "defaultValue": "\"ul\""
        },
        "template": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "template",
            "reflect": false,
            "defaultValue": "''"
        }
    }; }
    static get states() { return {
        "content": {},
        "templateString": {}
    }; }
    static get methods() { return {
        "setData": {
            "complexType": {
                "signature": "(content: any) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "setTemplate": {
            "complexType": {
                "signature": "(template: any) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
