import {inject} from 'aurelia-dependency-injection';
import {DOM} from 'aurelia-pal';
import {customElement, noView, bindable} from 'aurelia-templating';
import {bindingMode} from 'aurelia-binding';

@customElement('ons-input')
@noView
@inject(DOM.Element)
export class OnsInput {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) value;
  element;

  constructor(element) {
    this.element = element;
    this.element.oninput = this.onInput.bind(this);
  }

  onInput() {
    this.value = this.element.value;
  }

  valueChanged(newValue, oldValue) {
    this.element.value = newValue;
  }
}

@@ -337,16 +337,124 @@
  value;%0A
+  @bindable(%7B defaultBindingMode: bindingMode.twoWay %7D) checked;%0A  @bindable inputId;%0A  @bindable disabled;%0A
   elemen
@@ -568,138 +568,1225 @@
 ;%0A  
-%7D%0A%0A  onInput() %7B%0A    this.value = this.element.value;%0A  %7D%0A%0A  valueChanged(newValue, oldValue) %7B%0A    this.element.value = newValue;
+  this.element.onchange = this.onChange.bind(this);%0A    ons._contentReady(this.element, this.onContentReady.bind(this));%0A  %7D%0A%0A  onContentReady() %7B%0A    switch (this.element.type) %7B%0A      case 'radio':%0A        this.element.checked =  this.value === this.checked;%0A        break;%0A      case 'checkbox':%0A        this.element.checked =  this.checked.includes(this.value);%0A        break;%0A      default:%0A        break;%0A    %7D%0A  %7D%0A%0A  onInput() %7B%0A    this.value = this.element.value;%0A  %7D%0A%0A  onChange() %7B%0A    switch (this.element.type) %7B%0A      case 'radio':%0A        this.checked = this.value;%0A        break;%0A      case 'checkbox':%0A        let index = this.checked.indexOf(this.value);%0A        index %3E -1 ? this.checked.splice(index, index + 1) : this.checked.push(this.value);%0A        break;%0A      default:%0A        this.value = this.element.value;%0A        break;%0A    %7D%0A  %7D%0A%0A  valueChanged(newValue, oldValue) %7B%0A    this.element.value = newValue;%0A  %7D%0A%0A  inputIdChanged(newValue, oldValue) %7B%0A    this.element.setAttribute('input-id', newValue);%0A  %7D%0A%0A  disabledChanged(newValue, oldValue) %7B%0A    if (newValue) %7B%0A      this.element.setAttribute('disabled', newValue);%0A    %7D else %7B%0A      this.element.removeAttribute('disabled');%0A    %7D
 %0A  %7D

add radio and checkbox inputs