import { bindable,  observable } from 'aurelia-framework';

export class CurrencyControl {

    @bindable
    valueX: number;

    @observable
    stringValue: string;

    valueChanging: boolean = false;

    constructor() {
    }

    valueXChanged(newValue: number, oldValue: number) {
        alert('valueX changed');
        if (!this.valueChanging) {
            this.valueChanging = true;
            this.stringValue = newValue.toString();
            this.valueChanging = false;
        }
    }

    stringValueChanged(newValue: string, oldValue: string) {
        alert('stringValueChanged changed');
        this.stringValue = parseFloat(newValue).toFixed(2);
        if (!this.valueChanging) {
            this.valueChanging = true;
            this.valueX = parseFloat(this.stringValue);
            this.valueChanging = false;
        }
    }
}

<template>

    <require from="./currency-control.css"></require>

    <div class="input-group">
        <div class="input-group-addon">&euro;</div>
        <input type="text" maxlength="5" pattern="d*" class="form-control" value.bind="stringValue" />
    </div>

</template>