import { applyInputgroupStyle } from './apply-inputgroup-style';
export class EdelInputTextComponent {
    constructor() {
        this.autofocus = false;
    }
    handleChange(event) {
        const keyboardEvent = event;
        this.value = keyboardEvent.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();
    }
    updateAutoFocus() {
        if (this.autofocus) {
            const element = this.hostElement.getElementsByTagName('input').item(0);
            if (element)
                requestAnimationFrame(() => element.focus());
        }
    }
    render() {
        return (h("input", { value: this.value, type: "text", placeholder: this.placeholder, onInput: this.handleChange.bind(this), onBlur: this.handleBlur.bind(this), onFocus: () => this.startEdit.emit(), autofocus: this.autofocus, disabled: this.disabled, autocomplete: this.autoComplete }));
    }
    updateCss() {
        if (this.disabled)
            this.hostElement.classList.add('input--off');
        else
            this.hostElement.classList.remove('input--off');
    }
    updateInGroupDidChange() {
        applyInputgroupStyle(this.inGroup, this.hostElement);
    }
    static get is() { return "edel-input-text"; }
    static get properties() { return {
        "autoComplete": {
            "type": String,
            "attr": "auto-complete"
        },
        "autofocus": {
            "type": Boolean,
            "attr": "autofocus",
            "watchCallbacks": ["updateAutoFocus"]
        },
        "disabled": {
            "type": Boolean,
            "attr": "disabled",
            "watchCallbacks": ["updateCss"]
        },
        "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
        }, {
            "name": "startEdit",
            "method": "startEdit",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
}
