2020-01-16 16:14:03 +01:00
|
|
|
<SortableObjects
|
|
|
|
@tagName="ul"
|
|
|
|
@id={{concat "ember-power-select-multiple-options-" select.uniqueId}}
|
|
|
|
@class="ember-power-select-multiple-options"
|
|
|
|
@sortableObjectList={{select.selected}}
|
|
|
|
@enableSort={{true}}
|
|
|
|
@useSwap={{false}}
|
|
|
|
@sortEndAction={{action "reorderItems"}}
|
|
|
|
>
|
2017-10-31 10:10:49 +01:00
|
|
|
{{#each select.selected as |opt idx|}}
|
2019-12-13 15:20:29 +01:00
|
|
|
{{#component (or this.extra.tokenComponent "draggable-object")
|
2017-10-31 10:10:49 +01:00
|
|
|
tagName="li"
|
|
|
|
class="ember-power-select-multiple-option"
|
|
|
|
select=select
|
2018-03-13 12:17:29 +01:00
|
|
|
content=(readonly opt)
|
2017-10-31 10:10:49 +01:00
|
|
|
idx=idx
|
|
|
|
isSortable=true
|
|
|
|
mouseDown=(action "handleOptionMouseDown")
|
|
|
|
touchStart=(action "handleOptionTouchStart")
|
|
|
|
}}
|
2019-12-13 15:20:29 +01:00
|
|
|
{{#if this.selectedItemComponent}}
|
|
|
|
{{component this.selectedItemComponent option=(readonly opt) select=(readonly select)}}
|
2017-10-31 10:10:49 +01:00
|
|
|
{{else}}
|
|
|
|
{{yield opt select}}
|
|
|
|
{{/if}}
|
|
|
|
{{#unless select.disabled}}
|
|
|
|
<span role="button"
|
|
|
|
aria-label="remove element"
|
|
|
|
class="ember-power-select-multiple-remove-btn"
|
2018-03-13 12:17:29 +01:00
|
|
|
data-selected-index={{idx}}
|
|
|
|
>
|
|
|
|
{{svg-jar "close" data-selected-index=idx}}
|
2017-10-31 10:10:49 +01:00
|
|
|
</span>
|
|
|
|
{{/unless}}
|
|
|
|
{{/component}}
|
|
|
|
{{else}}
|
2019-12-13 15:20:29 +01:00
|
|
|
{{#if (and placeholder (not this.searchEnabled))}}
|
2017-10-31 10:10:49 +01:00
|
|
|
<span class="ember-power-select-placeholder">{{placeholder}}</span>
|
|
|
|
{{/if}}
|
|
|
|
{{/each}}
|
|
|
|
|
2019-12-13 15:20:29 +01:00
|
|
|
{{#if this.searchEnabled}}
|
2020-01-15 14:53:51 +01:00
|
|
|
<input
|
|
|
|
type="search"
|
|
|
|
class="ember-power-select-trigger-multiple-input"
|
|
|
|
autocomplete="off"
|
|
|
|
autocorrect="off"
|
|
|
|
autocapitalize="off"
|
|
|
|
spellcheck="false"
|
|
|
|
id="ember-power-select-trigger-multiple-input-{{@select.uniqueId}}"
|
|
|
|
value={{@select.searchText}}
|
|
|
|
aria-controls={{this.listboxId}}
|
|
|
|
style={{this.triggerMultipleInputStyle}}
|
|
|
|
placeholder={{this.maybePlaceholder}}
|
|
|
|
disabled={{@select.disabled}}
|
|
|
|
tabindex={{@tabindex}}
|
|
|
|
{{on "focus" @onFocus}}
|
|
|
|
{{on "blur" @onBlur}}
|
|
|
|
{{on "input" this.handleInput}}
|
|
|
|
{{on "keydown" this.handleKeydown}}
|
|
|
|
{{did-insert this.storeInputStyles}}
|
|
|
|
>
|
2017-10-31 10:10:49 +01:00
|
|
|
{{/if}}
|
2020-01-16 16:14:03 +01:00
|
|
|
</SortableObjects>
|
2017-10-31 10:10:49 +01:00
|
|
|
<span class="ember-power-select-status-icon"></span>
|