<commit_before>import {customElement, bindable} from 'aurelia-templating';
import {bindingMode} from 'aurelia-binding';
import {inject} from 'aurelia-dependency-injection'

@customElement('combo')
@bindable({
  name:'title',
  attribute:'title',
  defaultBindingMode: bindingMode.oneTime
})
@bindable({
  name:'options',
  attribute:'options',
  defaultBindingMode: bindingMode.oneTime
})
@bindable({
  name:'selected',
  attribute:'selected',
  defaultBindingMode: bindingMode.twoWay,
  changeHandler: '_handleSelectedChanged'
})
@bindable({
  name: 'grabFocus',
  attribute: 'grab-focus',
  defaultValue: false
})
@inject(Element)
export class Combo {
  constructor(element) {
    this.element = element;
    this._boundChange = this._change.bind(this);
  }

  attached() {
    this.combo = this.element.querySelector('select');
    //Sometimes we already have a bounded property and it's already changed before the attached callback is invoked
    //so this ensures that the loaded/changed value will always be set on the select when attached to the DOM
    if (this.selected || this.selected === 0) 
      this._setComboValue(this.selected);

    this.combo.addEventListener('change', this._boundChange);
  }

  detached() {
    this.combo.removeEventListener('change', this._boundChange);
  }

  getSelectedId(item) {
    if (item && typeof item === 'object')
      return item.id;

    return item;
  }

  _change(change) {
    this._setSelected(change.target);
  }

  _handleSelectedChanged(newValue) {
    if (this.combo) 
      this._setComboValue(newValue);
  }

  _setComboValue(newValue) {
    if (newValue && typeof newValue === 'object')
      this.combo.value = newValue.id;
    else
      this.combo.value = newValue;
  }

  _setSelected(item) {
    if (typeof this.selected === 'object') {
      this.selected.id = item.value;
      //supports only one selected option
      this.selected.description = item.selectedOptions[0].text;
    }
    else {
      this.selected = item.value;
    }
  }
}<commit_msg>added change event to combo widget<commit_after>import {customElement, bindable} from 'aurelia-templating';
import {bindingMode} from 'aurelia-binding';
import {inject} from 'aurelia-dependency-injection'

@customElement('combo')
@bindable({
  name:'title',
  attribute:'title',
  defaultBindingMode: bindingMode.oneTime
})
@bindable({
  name:'options',
  attribute:'options',
  defaultBindingMode: bindingMode.oneTime
})
@bindable({
  name:'selected',
  attribute:'selected',
  defaultBindingMode: bindingMode.twoWay,
  changeHandler: '_handleSelectedChanged'
})
@bindable({
  name: 'grabFocus',
  attribute: 'grab-focus',
  defaultValue: false
})
@inject(Element)
export class Combo {

  @bindable onchange;

  constructor(element) {
    this.element = element;
    this._boundChange = this._change.bind(this);
  }

  attached() {
    this.combo = this.element.querySelector('select');
    //Sometimes we already have a bounded property and it's already changed before the attached callback is invoked
    //so this ensures that the loaded/changed value will always be set on the select when attached to the DOM
    if (this.selected || this.selected === 0) 
      this._setComboValue(this.selected);

    this.combo.addEventListener('change', this._boundChange);
  }

  detached() {
    this.combo.removeEventListener('change', this._boundChange);
  }

  getSelectedId(item) {
    if (item && typeof item === 'object')
      return item.id;

    return item;
  }

  _change(change) {
    this._setSelected(change.target);

    if (this.onchange) {
      this.onchange();
    }
  }

  _handleSelectedChanged(newValue) {
    if (this.combo) 
      this._setComboValue(newValue);
  }

  _setComboValue(newValue) {
    if (newValue && typeof newValue === 'object')
      this.combo.value = newValue.id;
    else
      this.combo.value = newValue;
  }

  _setSelected(item) {
    if (typeof this.selected === 'object') {
      this.selected.id = item.value;
      //supports only one selected option
      this.selected.description = item.selectedOptions[0].text;
    }
    else {
      this.selected = item.value;
    }
  }
}
{'fraction_non_alphanumeric': 0.12704918032786885, 'fraction_numerical': 0.0009643201542912247, 'mean_word_length': 3.661797752808989, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3457637', 'n_tokens_mistral': 1296, 'n_tokens_neox': 1266, 'n_words': 290}