Add extra params for selectedItemComponent on trigger (power-select-multiple)

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

@@ -10,7 +10,7 @@
         </span>
       {{/unless}}
       {{#if selectedItemComponent}}
-        {{component selectedItemComponent option=(readonly opt) select=(readonly select)}}
+        {{component selectedItemComponent extra=(readonly extra) option=(readonly opt) select=(readonly select)}}
       {{else}}
         {{yield opt select}}
       {{/if}}
@@ -36,4 +36,4 @@
       onkeydown={{action "onKeydown"}}>
   {{/if}}
 </ul>
-<span class="ember-power-select-status-icon"></span>
+<span class="ember-power-select-status-icon"></span>

tests/dummy/app/templates/components/selected-country.hbs

@@ -1,2 +1,2 @@
-<img src="{{select.selected.flagUrl}}" class="icon-flag" alt="Flag of {{select.selected.name}}">
-{{select.selected.name}}
+<img src="{{select.selected.flagUrl}}" class="icon-flag {{if extra.coolFlagIcon 'cool-flag-icon'}}" alt="Flag of {{select.selected.name}}">
+{{select.selected.name}}

tests/dummy/app/templates/components/selected-item-country.hbs

@@ -1,2 +1,2 @@
-<img src="{{select.selected.flagUrl}}" class="icon-flag" alt="Flag of {{select.selected.name}}">
-{{select.selected.name}}
+<img src="{{select.selected.flagUrl}}" class="icon-flag {{if extra.coolFlagIcon 'cool-flag-icon'}}" alt="Flag of {{select.selected.name}}">
+{{select.selected.name}}

tests/integration/components/power-select/customization-with-components-test.js

@@ -282,4 +282,60 @@ module('Integration | Component | Ember Power Select (Customization using compon
 
     clickTrigger();
   });
+
+  test('the power-select-multiple `optionsComponent` receives the `extra` hash', async function(assert) {
+    assert.expect(2);
+
+    this.countries = countries;
+    this.country = countries[1]; // Spain
+
+    await render(hbs`
+      {{#power-select-multiple options=countries selected=country optionsComponent="list-of-countries" onchange=(action (mut foo)) extra=(hash field='code') as |country|}}
+        {{country.code}}
+      {{/power-select-multiple}}
+    `);
+
+    clickTrigger();
+    let text = find('.ember-power-select-options').textContent.trim();
+    assert.ok(/Countries:/.test(text), 'The given component is rendered');
+    assert.ok(/3\. RU/.test(text), 'The component uses the field in the extra has to render the options');
+  });
+
+  test('the power-select-multiple `triggerComponent` receives the `extra` hash', async function(assert) {
+    assert.expect(1);
+
+    this.countries = countries;
+    this.country = countries[1]; // Spain
+
+    await render(hbs`
+      {{#power-select-multiple options=countries selected=country triggerComponent="selected-country" onchange=(action (mut foo)) extra=(hash coolFlagIcon=true) as |country|}}
+        {{country.code}}
+      {{/power-select-multiple}}
+    `);
+
+    clickTrigger();
+    assert.ok(find('.ember-power-select-trigger .cool-flag-icon'), 'The custom triggerComponent renders with the extra.coolFlagIcon customization option triggering some state change.');
+  });
+
+  test('the power-select-multiple `selectedItemComponent` receives the `extra` hash', async function(assert) {
+    assert.expect(1);
+
+    this.countries = countries;
+    this.country = [countries[1]]; // Spain
+
+    await render(hbs`
+      <div class="select-box">
+        {{#power-select-multiple
+            options=countries
+            selected=country
+            selectedItemComponent="selected-item-country"
+            onchange=(action (mut selected))
+            extra=(hash coolFlagIcon=true) as |country|}}
+          {{country.code}}
+        {{/power-select-multiple}}
+      </div>
+    `);
+
+    assert.ok(find('.ember-power-select-trigger .cool-flag-icon'), 'The custom selectedItemComponent renders with the extra.coolFlagIcon customization option triggering some state change.');
+  });
 });