Placeholder component for power select multiple

CHANGELOG.md

@@ -1,4 +1,6 @@
 # Master
+- [ENHANCEMENT] Providing a custom `placeholderComponent` is available for
+  `power-select-multiple` too now.
 
 # 1.5.0-beta.0
 - [ENHANCEMENT/BREAKING-ISH] `ember-basic-dropdown` has improved the experience with A11y 

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 searchEnabled)}}
+      {{component placeholderComponent placeholder=placeholder}}
     {{/if}}
   {{/each}}
   {{#if searchEnabled}}

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

@@ -809,4 +809,28 @@ 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"
+      searchEnabled=false
+      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.'
+   );
+});