How to disable multi-select-component in ember-widgets - select

Question

Is there any way to disable the multi-select-component from addepar's ember-widgets?
This works for the single select-component
{{select-component
contentBinding="selectCountries"
prompt="Select a Country"
value=selectSelected
disabled=true
}}
The same does not work for the multi-select-component
{{multi-select-component
contentBinding="selectCountries"
prompt="Select a Country"
selections=multiSelectSelected
disabled=true
}}
Here's a not-working JS bin example. I looked through the source code, there doesn't seem to be an option for this.

Answer 1

The fastest way I could think of doing it, short of editing the source code was this (updated JS bin):
I defined an Ember component that takes an array of strings (selections) as its only parameter. I used all the classes that are used by the multi-select-component so I didn't have to redefine all the CSS:
<script type="text/x-handlebars" id="components/disabled-multi-select">
<div class="ember-view ember-select multi-select-disabled" tabindex="-1">
<div class="ember-select-container ember-select-multi dropdown-toggle js-dropdown-toggle">
<ul class="form-control ember-select-choices">
{{#each selection in selections}}
<li class="ember-view ember-select-search-choice">
<div>{{selection}}</div>
<div class="ember-select-search-choice-close">×</div>
</li>
{{/each}}
</ul>
</div>
</div>
</script>
Then I added some css to make it look like a disabled select:
.ember-select.multi-select-disabled > .ember-select-container > .form-control {
cursor: not-allowed;
background-color: #EEE;
opacity: 1;
}
.ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice {
background-color: #D8D8D8;
cursor: not-allowed;
}
.ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice .ember-select-search-choice-close {
cursor: not-allowed;
}
.ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice .ember-select-search-choice-close:hover {
background-color: #D8D8D8;
}
It's used like this:
{{#if isInputDisabled}}
// Stick your multi-select-component in here
{{else}}
{{disabled-multi-select selections=multiSelectSelected}}
{{/if}}