Placeholder component for power select multiple

addon/components/power-select-multiple/trigger.js

@@ -70,7 +70,10 @@ export default Component.extend({
   }),
 
   maybePlaceholder: computed('placeholder', 'select.selected.length', function() {
-    if (isIE) {
+    let component = this.get('placeholderComponent');
+    let hasCustomPlaceholder = component !== 'power-select/placeholder';
+
+    if (isIE || hasCustomPlaceholder) {
       return null;
     }
     let select = this.get('select');

addon/templates/components/power-select-multiple.hbs

@@ -32,6 +32,7 @@
     options=options
     optionsComponent=optionsComponent
     placeholder=placeholder
+    placeholderComponent=placeholderComponent
     registerAPI=(readonly registerAPI)
     renderInPlace=renderInPlace
     required=required
@@ -86,6 +87,7 @@
     options=options
     optionsComponent=optionsComponent
     placeholder=placeholder
+    placeholderComponent=placeholderComponent
     registerAPI=(readonly registerAPI)
     renderInPlace=renderInPlace
     required=required

addon/templates/components/power-select-multiple/trigger.hbs

@@ -16,8 +16,8 @@
       {{/if}}
     </li>
   {{else}}
-    {{#if (and placeholder (not searchEnabled))}}
-      <span class="ember-power-select-placeholder">{{placeholder}}</span>
+    {{#if (not-eq placeholder maybePlaceholder)}}
+      {{component placeholderComponent placeholder=placeholder}}
     {{/if}}
   {{/each}}
   {{#if searchEnabled}}

tests/integration/components/power-select/multiple-test.js

@@ -809,4 +809,27 @@ test('If the options of a multiple select implement `isEqual`, that option is us
   assert.equal($('.ember-power-select-option:eq(0)').attr('aria-selected'), 'true', 'The item in the list is marked as selected');
   nativeMouseUp('.ember-power-select-option:eq(0)'); // select the same user again should remove it
   assert.equal(this.$('.ember-power-select-multiple-option').length, 0);
-});
+});
+
+test('placeholder can be customized using placeholderComponent', function(assert) {
+  assert.expect(2);
+
+  this.countries = countries;
+
+  this.render(hbs`
+    {{#power-select-multiple
+      options=countries
+      placeholder="test"
+      placeholderComponent="custom-placeholder"
+      onchange=(action (mut foo)) as |country|}}
+      {{country.name}}
+    {{/power-select-multiple}}
+  `);
+
+  assert.equal($('.ember-power-select-placeholder').length, 1, 'The placeholder appears.');
+  assert.equal(
+    $('.ember-power-select-placeholder').text().trim(),
+    'This is a very bold placeholder',
+    'The placeholder content is equal.'
+   );
+});