import { h } from '@stencil/core';
import { StringUtil, TranslateService, Util } from "@ema/core";
export class FormField {
    constructor() {
        this.data = {};
        this.config = {
            "label": "",
            "tag": "input",
            "type": "text",
            "placeholder": "",
            "hidden": false,
            "disabled": false
        };
        this.keyId = '';
        this.tag = 'input';
        this.type = 'text';
        this.translateService = TranslateService.instance;
    }
    componentDidLoad() {
        this.postRender();
    }
    componentDidUpdate() {
        this.postRender();
    }
    postRender() {
        if (this.config.hidden || this.config.type === 'hidden')
            this.el.style.display = "none";
        this.changed.emit({ value: this.currentValue, el: this.el });
    }
    async setData(data) {
        this.data = data;
    }
    async getValue() {
        return this.currentValue;
    }
    translate(str) {
        return this.translateService.get(str);
    }
    render() {
        let field;
        let fieldData;
        if (this.dataJson) {
            this.data = Object.assign({}, this.data, JSON.parse(this.dataJson));
            fieldData = this.data;
        }
        if (this.configJson) {
            this.config = Object.assign({}, this.config, JSON.parse(this.configJson));
            field = this.config;
        }
        if (this.value) {
            this.currentValue = Util.tryParseJSON(this.value) || this.value;
        }
        return (h("div", null, field.tag === 'input' && (field.type === 'text' ||
            field.type === 'password' ||
            field.type === 'date' ||
            field.type === 'datetime' ||
            field.type === 'datetime-local') &&
            h("div", { class: "form-group row", style: this.styles },
                h("label", { class: "col-md-4 col-form-label", htmlFor: this.keyId }, StringUtil.uppercaseFirst(this.translate(field.label))),
                h("div", { class: "col-md-8" },
                    h("input", { class: "form-control", name: this.keyId, placeholder: field.placeholder, disabled: field.disabled, hidden: field.hidden, type: field.type, value: this.currentValue })),
                h("div", { class: "col-md-8 offset-md-4 messages" }))));
    }
    static get is() { return "ema-form-field"; }
    static get properties() { return {
        "configJson": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "config-json",
            "reflect": false
        },
        "dataJson": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "data-json",
            "reflect": false
        },
        "keyId": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "key-id",
            "reflect": false,
            "defaultValue": "''"
        },
        "styles": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "styles",
            "reflect": false
        },
        "tag": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "tag",
            "reflect": false,
            "defaultValue": "'input'"
        },
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "type",
            "reflect": false,
            "defaultValue": "'text'"
        },
        "value": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false
        }
    }; }
    static get states() { return {
        "data": {},
        "config": {},
        "currentValue": {}
    }; }
    static get events() { return [{
            "method": "changed",
            "name": "changed",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "setData": {
            "complexType": {
                "signature": "(data: any) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "getValue": {
            "complexType": {
                "signature": "() => Promise<any>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<any>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
