/
ng-select.component.html
128 lines (109 loc) · 5.32 KB
/
ng-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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<div (mousedown)="handleMousedown($event)" [class.ng-has-value]="hasValue" class="ng-select-container">
<div class="ng-value-container">
<div class="ng-placeholder">{{placeholder}}</div>
<ng-container *ngIf="!multiLabelTemplate && selectedItems.length > 0">
<div [class.ng-value-disabled]="item.disabled" class="ng-value" *ngFor="let item of selectedItems">
<ng-template #defaultLabelTemplate>
<span class="ng-value-icon left" (click)="unselect(item);" aria-hidden="true">×</span>
<span class="ng-value-label">{{item.label}}</span>
</ng-template>
<ng-template
[ngTemplateOutlet]="labelTemplate || defaultLabelTemplate"
[ngTemplateOutletContext]="{ item: item.value, clear: clearItem, label: item.label }">
</ng-template>
</div>
</ng-container>
<ng-template *ngIf="multiLabelTemplate && selectedValues.length > 0"
[ngTemplateOutlet]="multiLabelTemplate"
[ngTemplateOutletContext]="{ items: selectedValues, clear: clearItem }">
</ng-template>
<div class="ng-input">
<input #filterInput
type="text"
autocomplete="{{dropdownId}}"
[id]="labelForId"
[readOnly]="!searchable"
[disabled]="disabled"
[value]="filterValue"
(input)="filter(filterInput.value)"
(focus)="onInputFocus()"
(blur)="onInputBlur()"
(change)="$event.stopPropagation()"
role="combobox"
[attr.aria-expanded]="isOpen"
[attr.aria-owns]="isOpen ? dropdownId : null"
[attr.aria-activedescendant]="isOpen ? itemsList?.markedItem?.htmlId : null">
</div>
</div>
<div class="ng-spinner-loader" *ngIf="loading"></div>
<span *ngIf="showClear()" class="ng-clear-wrapper" title="{{clearAllText}}">
<span class="ng-clear" aria-hidden="true">×</span>
</span>
<span class="ng-arrow-wrapper">
<span class="ng-arrow"></span>
</span>
</div>
<ng-dropdown-panel *ngIf="isOpen"
class="ng-dropdown-panel"
[virtualScroll]="virtualScroll"
[bufferAmount]="bufferAmount"
[appendTo]="appendTo"
[position]="dropdownPosition"
[headerTemplate]="headerTemplate"
[footerTemplate]="footerTemplate"
[items]="itemsList.filteredItems"
(update)="viewPortItems = $event"
(scrollToEnd)="scrollToEnd.emit($event)"
(outsideClick)="close()"
[class.ng-select-multiple]="multiple"
[ngClass]="classes"
[id]="dropdownId">
<ng-container>
<div class="ng-option" [attr.role]="item.hasChildren ? 'group' : 'option'" (click)="toggleItem(item)" (mousedown)="$event.preventDefault()" (mouseover)="onItemHover(item)"
*ngFor="let item of viewPortItems"
[class.ng-option-disabled]="item.disabled"
[class.ng-option-selected]="item.selected"
[class.ng-optgroup]="item.hasChildren"
[class.ng-option]="!item.hasChildren"
[class.ng-option-child]="!!item.parent"
[class.ng-option-marked]="item === itemsList.markedItem"
id="{{item?.htmlId || null}}">
<ng-template #defaultOptionTemplate>
<span class="ng-option-label">{{item.label}}</span>
</ng-template>
<ng-template
[ngTemplateOutlet]="item.hasChildren ? (optgroupTemplate || defaultOptionTemplate) : (optionTemplate || defaultOptionTemplate)"
[ngTemplateOutletContext]="{ item: item.value, index: item.index, searchTerm: filterValue }">
</ng-template>
</div>
<div class="ng-option" [class.ng-option-marked]="!itemsList.markedItem" (mouseover)="itemsList.unmarkItem()" role="option" (click)="selectTag()" *ngIf="showAddTag()">
<span><span class="ng-tag-label">{{addTagText}}</span>"{{filterValue}}"</span>
</div>
</ng-container>
<ng-container *ngIf="showNoItemsFound()">
<ng-template #defaultNotFoundTemplate>
<div class="ng-option ng-option-disabled">{{notFoundText}}</div>
</ng-template>
<ng-template
[ngTemplateOutlet]="notFoundTemplate || defaultNotFoundTemplate"
[ngTemplateOutletContext]="{ searchTerm: filterValue }">
</ng-template>
</ng-container>
<ng-container *ngIf="showTypeToSearch()">
<ng-template #defaultTypeToSearchTemplate>
<div class="ng-option ng-option-disabled">{{typeToSearchText}}</div>
</ng-template>
<ng-template
[ngTemplateOutlet]="typeToSearchTemplate || defaultTypeToSearchTemplate">
</ng-template>
</ng-container>
<ng-container *ngIf="loading && itemsList.filteredItems.length === 0">
<ng-template #defaultLoadingTextTemplate>
<div class="ng-option ng-option-disabled">{{loadingText}}</div>
</ng-template>
<ng-template
[ngTemplateOutlet]="loadingTextTemplate || defaultLoadingTextTemplate"
[ngTemplateOutletContext]="{ searchTerm: filterValue }">
</ng-template>
</ng-container>
</ng-dropdown-panel>