and include the build...

dist/amd/combo.html

@@ -0,0 +1,8 @@
+<template>
+  <div class="form-group">
+    <label for="lookupField" class="control-label">${title}</label>
+    <select class="form-control">
+      <option repeat.for="option of options" value="${option.value}" selected.one-time="$parent.selected === option.value">${option.description}</option>
+    </select>
+  </div>
+</template>

dist/amd/combo.js

@@ -0,0 +1,60 @@
+define(['exports', 'aurelia-framework'], function (exports, _aureliaFramework) {
+  'use strict';
+
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+
+  var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+  var Combo = (function () {
+    function Combo(element) {
+      _classCallCheck(this, _Combo);
+
+      this.element = element;
+      this._boundChange = this._change.bind(this);
+    }
+
+    _createClass(Combo, [{
+      key: 'attached',
+      value: function attached() {
+        this.combo = this.element.querySelector('select');
+        this.combo.addEventListener('change', this._boundChange);
+      }
+    }, {
+      key: 'detached',
+      value: function detached() {
+        this.combo.removeEventListener('change', this._boundChange);
+      }
+    }, {
+      key: '_change',
+      value: function _change(change) {
+        this.selected = change.target.value;
+      }
+    }]);
+
+    var _Combo = Combo;
+    Combo = (0, _aureliaFramework.inject)(Element)(Combo) || Combo;
+    Combo = (0, _aureliaFramework.bindable)({
+      name: 'selected',
+      attribute: 'selected',
+      defaultBindingMode: _aureliaFramework.bindingMode.twoWay
+    })(Combo) || Combo;
+    Combo = (0, _aureliaFramework.bindable)({
+      name: 'options',
+      attribute: 'options',
+      defaultBindingMode: _aureliaFramework.bindingMode.oneTime
+    })(Combo) || Combo;
+    Combo = (0, _aureliaFramework.bindable)({
+      name: 'title',
+      attribute: 'title',
+      defaultBindingMode: _aureliaFramework.bindingMode.oneTime
+    })(Combo) || Combo;
+    Combo = (0, _aureliaFramework.customElement)('combo')(Combo) || Combo;
+    return Combo;
+  })();
+
+  exports.Combo = Combo;
+});

dist/amd/index.js

@@ -7,6 +7,6 @@ define(['exports'], function (exports) {
 	exports.configure = configure;
 
 	function configure(aurelia) {
-		aurelia.globalResources(['lookup-widget', 'autocomplete-widget']);
+		aurelia.globalResources(['lookup-widget', 'autocomplete-widget', 'combo']);
 	}
 });

dist/amd/lookup-widget.html

@@ -1,6 +1,6 @@
 <template>
-
+  <div class="form-group">
     <label for="lookupField" class="control-label">${title}</label>
     <input type="text" id="lookupField">
-
+  </div>
 </template>

dist/commonjs/combo.html

@@ -0,0 +1,8 @@
+<template>
+  <div class="form-group">
+    <label for="lookupField" class="control-label">${title}</label>
+    <select class="form-control">
+      <option repeat.for="option of options" value="${option.value}" selected.one-time="$parent.selected === option.value">${option.description}</option>
+    </select>
+  </div>
+</template>

dist/commonjs/combo.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+var _aureliaFramework = require('aurelia-framework');
+
+var Combo = (function () {
+  function Combo(element) {
+    _classCallCheck(this, _Combo);
+
+    this.element = element;
+    this._boundChange = this._change.bind(this);
+  }
+
+  _createClass(Combo, [{
+    key: 'attached',
+    value: function attached() {
+      this.combo = this.element.querySelector('select');
+      this.combo.addEventListener('change', this._boundChange);
+    }
+  }, {
+    key: 'detached',
+    value: function detached() {
+      this.combo.removeEventListener('change', this._boundChange);
+    }
+  }, {
+    key: '_change',
+    value: function _change(change) {
+      this.selected = change.target.value;
+    }
+  }]);
+
+  var _Combo = Combo;
+  Combo = (0, _aureliaFramework.inject)(Element)(Combo) || Combo;
+  Combo = (0, _aureliaFramework.bindable)({
+    name: 'selected',
+    attribute: 'selected',
+    defaultBindingMode: _aureliaFramework.bindingMode.twoWay
+  })(Combo) || Combo;
+  Combo = (0, _aureliaFramework.bindable)({
+    name: 'options',
+    attribute: 'options',
+    defaultBindingMode: _aureliaFramework.bindingMode.oneTime
+  })(Combo) || Combo;
+  Combo = (0, _aureliaFramework.bindable)({
+    name: 'title',
+    attribute: 'title',
+    defaultBindingMode: _aureliaFramework.bindingMode.oneTime
+  })(Combo) || Combo;
+  Combo = (0, _aureliaFramework.customElement)('combo')(Combo) || Combo;
+  return Combo;
+})();
+
+exports.Combo = Combo;

dist/commonjs/index.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, '__esModule', {
 exports.configure = configure;
 
 function configure(aurelia) {
-	aurelia.globalResources(['lookup-widget', 'autocomplete-widget']);
+	aurelia.globalResources(['lookup-widget', 'autocomplete-widget', 'combo']);
 }

dist/commonjs/lookup-widget.html

@@ -1,6 +1,6 @@
 <template>
-
+  <div class="form-group">
     <label for="lookupField" class="control-label">${title}</label>
     <input type="text" id="lookupField">
-
+  </div>
 </template>

dist/es6/combo.html

@@ -0,0 +1,8 @@
+<template>
+  <div class="form-group">
+    <label for="lookupField" class="control-label">${title}</label>
+    <select class="form-control">
+      <option repeat.for="option of options" value="${option.value}" selected.one-time="$parent.selected === option.value">${option.description}</option>
+    </select>
+  </div>
+</template>

dist/es6/combo.js

@@ -0,0 +1,38 @@
+import {customElement, inject, bindable, bindingMode} from 'aurelia-framework';
+
+@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
+})
+@inject(Element)
+export class Combo {
+  constructor(element) {
+    this.element = element;
+    this._boundChange = this._change.bind(this);
+  }
+
+  attached() {
+    this.combo = this.element.querySelector('select');
+    this.combo.addEventListener('change', this._boundChange);
+  }
+
+  detached() {
+    this.combo.removeEventListener('change', this._boundChange);
+  }
+
+  _change(change) {
+    this.selected = change.target.value;
+  }
+}

dist/es6/index.js

@@ -1,3 +1,3 @@
 export function configure(aurelia) {
-	aurelia.globalResources(['lookup-widget','autocomplete-widget']);
+	aurelia.globalResources(['lookup-widget','autocomplete-widget', 'combo']);
 }

dist/es6/lookup-widget.html

@@ -1,6 +1,6 @@
 <template>
-
+  <div class="form-group">
     <label for="lookupField" class="control-label">${title}</label>
     <input type="text" id="lookupField">
-
+  </div>
 </template>

dist/system/combo.html

@@ -0,0 +1,8 @@
+<template>
+  <div class="form-group">
+    <label for="lookupField" class="control-label">${title}</label>
+    <select class="form-control">
+      <option repeat.for="option of options" value="${option.value}" selected.one-time="$parent.selected === option.value">${option.description}</option>
+    </select>
+  </div>
+</template>

dist/system/combo.js

@@ -0,0 +1,68 @@
+System.register(['aurelia-framework'], function (_export) {
+  'use strict';
+
+  var customElement, inject, bindable, bindingMode, Combo;
+
+  var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+  return {
+    setters: [function (_aureliaFramework) {
+      customElement = _aureliaFramework.customElement;
+      inject = _aureliaFramework.inject;
+      bindable = _aureliaFramework.bindable;
+      bindingMode = _aureliaFramework.bindingMode;
+    }],
+    execute: function () {
+      Combo = (function () {
+        function Combo(element) {
+          _classCallCheck(this, _Combo);
+
+          this.element = element;
+          this._boundChange = this._change.bind(this);
+        }
+
+        _createClass(Combo, [{
+          key: 'attached',
+          value: function attached() {
+            this.combo = this.element.querySelector('select');
+            this.combo.addEventListener('change', this._boundChange);
+          }
+        }, {
+          key: 'detached',
+          value: function detached() {
+            this.combo.removeEventListener('change', this._boundChange);
+          }
+        }, {
+          key: '_change',
+          value: function _change(change) {
+            this.selected = change.target.value;
+          }
+        }]);
+
+        var _Combo = Combo;
+        Combo = inject(Element)(Combo) || Combo;
+        Combo = bindable({
+          name: 'selected',
+          attribute: 'selected',
+          defaultBindingMode: bindingMode.twoWay
+        })(Combo) || Combo;
+        Combo = bindable({
+          name: 'options',
+          attribute: 'options',
+          defaultBindingMode: bindingMode.oneTime
+        })(Combo) || Combo;
+        Combo = bindable({
+          name: 'title',
+          attribute: 'title',
+          defaultBindingMode: bindingMode.oneTime
+        })(Combo) || Combo;
+        Combo = customElement('combo')(Combo) || Combo;
+        return Combo;
+      })();
+
+      _export('Combo', Combo);
+    }
+  };
+});

dist/system/index.js

@@ -4,7 +4,7 @@ System.register([], function (_export) {
 	_export('configure', configure);
 
 	function configure(aurelia) {
-		aurelia.globalResources(['lookup-widget', 'autocomplete-widget']);
+		aurelia.globalResources(['lookup-widget', 'autocomplete-widget', 'combo']);
 	}
 
 	return {

dist/system/lookup-widget.html

@@ -1,6 +1,6 @@
 <template>
-
+  <div class="form-group">
     <label for="lookupField" class="control-label">${title}</label>
     <input type="text" id="lookupField">
-
+  </div>
 </template>