Allow placeholder to be configured for `combo-box`.

app/assets/javascripts/select-kit/components/combo-box.js.es6

@@ -24,8 +24,11 @@ export default SingleSelectComponent.extend({
 
   @on("didReceiveAttrs")
   _setComboBoxOptions() {
+    const placeholder = this.get('placeholder');
+
     this.get("headerComponentOptions").setProperties({
       clearable: this.get("clearable"),
+      placeholder: placeholder ? I18n.t(placeholder) : "",
     });
   }
 });

app/assets/javascripts/select-kit/components/combo-box/combo-box-header.js.es6

@@ -7,5 +7,6 @@ export default SelectKitHeaderComponent.extend({
   clearable: Ember.computed.alias("options.clearable"),
   caretUpIcon: Ember.computed.alias("options.caretUpIcon"),
   caretDownIcon: Ember.computed.alias("options.caretDownIcon"),
-  shouldDisplayClearableButton: Ember.computed.and("clearable", "computedContent.hasSelection")
+  shouldDisplayClearableButton: Ember.computed.and("clearable", "computedContent.hasSelection"),
+  placeholder: Ember.computed.alias("options.placeholder"),
 });

app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs

@@ -1,8 +1,14 @@
 {{#each icons as |icon|}} {{d-icon icon}} {{/each}}
 
-<span class="selected-name">
-  {{{label}}}
-</span>
+{{#if label}}
+  <span class="selected-name">
+    {{{label}}}
+  </span>
+{{else}}
+  <span class="combo-box-placeholder">
+    {{placeholder}}
+  </span>
+{{/if}}
 
 {{#if shouldDisplayClearableButton}}
   <button class="btn-clear" {{action onClearSelection bubbles=false}}>

app/assets/stylesheets/common/select-kit/combo-box.scss

@@ -1,5 +1,8 @@
 .select-kit {
   &.combo-box {
+    .combo-box-placeholder {
+      color: dark-light-choose($primary-high, $secondary-low);
+    }
 
     .select-kit-body {
       width: 100%;