import { applyInputgroupStyle } from './apply-inputgroup-style';
export class EdelInputNumberComponent {
    constructor() {
        this.autofocus = false;
    }
    hostData() {
        return {
            class: 'input'
        };
    }
    handleChange(event) {
        const keyboardEvent = event;
        this.value = this.numberOf(keyboardEvent.target.value);
        this.valueChange.emit(this.value);
    }
    handleBlur() {
        this.afterEdit.emit(this.value);
    }
    render() {
        const stringValue = this.value === undefined || this.value === null
            ? undefined
            : this.value.toString();
        return (h("input", { value: stringValue, type: "number", placeholder: this.placeholder, onInput: this.handleChange.bind(this), onBlur: this.handleBlur.bind(this), autofocus: this.autofocus, disabled: this.disabled }));
    }
    componentDidLoad() {
        this.valueDidChange(this.value, 0);
        this.updateAutoFocus();
        this.updateInGroupDidChange();
        this.updateCss();
    }
    updateAutoFocus() {
        if (this.autofocus) {
            const element = this.hostElement.getElementsByTagName('input').item(0);
            if (element)
                requestAnimationFrame(() => element.focus());
        }
    }
    updateCss() {
        if (this.disabled)
            this.hostElement.classList.add('input--off');
        else
            this.hostElement.classList.remove('input--off');
    }
    valueDidChange(newValue, oldValue) {
        if (newValue === undefined)
            return;
        const newNumber = this.numberOf(newValue);
        if (isNaN(newNumber)) {
            this.value = oldValue;
        }
    }
    updateInGroupDidChange() {
        applyInputgroupStyle(this.inGroup, this.hostElement);
    }
    numberOf(value) {
        return Number(value);
    }
    static get is() { return "edel-input-number"; }
    static get properties() { return {
        "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": Number,
            "attr": "value",
            "mutable": true,
            "watchCallbacks": ["valueDidChange"]
        }
    }; }
    static get events() { return [{
            "name": "valueChange",
            "method": "valueChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "afterEdit",
            "method": "afterEdit",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
}
