import { applyInputgroupStyle } from './apply-inputgroup-style';
export class EdelInputTextareaComponent {
    constructor() {
        this.autofocus = false;
    }
    handleChange(event) {
        this.value = event.target.value;
        this.valueChange.emit(this.value);
    }
    hostData() {
        return {
            class: 'input'
        };
    }
    handleBlur(event) {
        this.afterEdit.emit(this.value);
    }
    componentDidLoad() {
        this.updateAutoFocus();
        this.updateInGroupDidChange();
        this.updateCss();
    }
    updateCss() {
        if (this.disabled)
            this.hostElement.classList.add('input--off');
        else
            this.hostElement.classList.remove('input--off');
    }
    updateAutoFocus() {
        if (this.autofocus) {
            const element = this.hostElement.getElementsByTagName('textarea').item(0);
            element.focus();
        }
    }
    render() {
        const style = this.height ? { height: `${this.height}px` } : {};
        return (h("textarea", { style: style, placeholder: this.placeholder, onInput: this.handleChange.bind(this), onBlur: this.handleBlur.bind(this), autofocus: this.autofocus }, this.value));
    }
    updateInGroupDidChange() {
        applyInputgroupStyle(this.inGroup, this.hostElement);
    }
    static get is() { return "edel-input-textarea"; }
    static get properties() { return {
        "autofocus": {
            "type": Boolean,
            "attr": "autofocus",
            "watchCallbacks": ["updateAutoFocus"]
        },
        "disabled": {
            "type": Boolean,
            "attr": "disabled",
            "watchCallbacks": ["updateCss"]
        },
        "height": {
            "type": Number,
            "attr": "height"
        },
        "hostElement": {
            "elementRef": true
        },
        "inGroup": {
            "type": Boolean,
            "attr": "in-group",
            "watchCallbacks": ["updateInGroupDidChange"]
        },
        "placeholder": {
            "type": String,
            "attr": "placeholder"
        },
        "value": {
            "type": String,
            "attr": "value",
            "mutable": true
        }
    }; }
    static get events() { return [{
            "name": "valueChange",
            "method": "valueChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "afterEdit",
            "method": "afterEdit",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
}
