-
Notifications
You must be signed in to change notification settings - Fork 0
/
select.component.html
31 lines (31 loc) · 2.01 KB
/
select.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="ec-select" [class.ec-select_solo]="solo" [class.is-empty]="selection?.isEmpty()" (click)="activate($event)"
[class.has-searchbar]="!config?.disableSearchbar">
<ul class="ec-select-selection" dndDropzone (dndDrop)="onDrop($event)">
<li *ngIf="config?.disableSearchbar&&selection?.isEmpty()">
<span class="ec-select__placeholder">
{{placeholder||'make your selection?...'}}
</span>
</li>
<li *ngFor="let selected of selection?.display;let i = index" [dndDisableIf]="solo||config?.disableDrag"
[class.is-dragged]="selected===dragged" [class.is-draggable]="solo||!config?.disableDrag" dndEffectAllowed="move"
[dndDraggable]="i" (dndStart)="onDragStart(selected,$event,item)" (dndCanceled)="cancelDrag(selected,$event,item)"
(dndEnd)="cancelDrag(selected,$event,item)" #item>
<span [class.ec-select-selected]="!solo" [class.ec-select-selected_solo]="solo" (click)="clickItem(selected,$event)">
{{selected.display()}}
<a (click)="removeItem(selected,$event)" *ngIf="!config?.disableRemove&&!disabled">×</a>
</span>
</li>
<li dndPlaceholderRef>
<div class="drag-placeholder" style="width: 48px;"></div>
</li>
<li *ngIf="!config?.disableSearchbar" class="ec-select__searchbar">
<ec-searchbar [autofocus]="false" [property]="config?.label" [placeholder]="placeholder" (focus)="focus($event)" [disabled]="disabled"
(keypressed)="handleKey($event,dropdownList)" (queryChanged)="filterDropdownList(dropdownList,$event)"></ec-searchbar>
</li>
</ul>
<ec-pop class="ec-select-options" [hideOnClickOutside]="true" #dropdown>
<ec-loader class="ec-loader loader is-local" #dropdownLoader></ec-loader>
<ec-list (changed)="searchbar.updatedList($event)" #dropdownList [list]="list" (columnClicked)="listItemClicked($event)"
[selection]="selection"></ec-list>
</ec-pop>
</div>