Skip to content

Commit b4d2bcd

Browse files
saibaburaavisaibaburaavi
authored
Merge branch 'master' into fix
2 parents 3d1e345 + 97d4f86 commit b4d2bcd

File tree

1 file changed

+121
-173
lines changed

1 file changed

+121
-173
lines changed

‎src/ng-select/lib/ng-select.component.html‎

Lines changed: 121 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -1,187 +1,135 @@
1-
<div
2-
(mousedown)="handleMousedown($event)"
3-
[class.ng-appearance-outline]="appearance() === 'outline'"
4-
[class.ng-has-value]="hasValue"
5-
class="ng-select-container">
6-
<div class="ng-value-container">
7-
@if ((selectedItems.length === 0 && !searchTerm) || (fixedPlaceholder() ?? config.fixedPlaceholder )) {
8-
<ng-template #defaultPlaceholderTemplate>
9-
<div class="ng-placeholder">{{ placeholder() ?? config.placeholder }}</div>
10-
</ng-template>
11-
<ng-template [ngTemplateOutlet]="placeholderTemplate() || defaultPlaceholderTemplate"> </ng-template>
12-
}
1+
<div (mousedown)="handleMousedown($event)" [class.ng-appearance-outline]="appearance() === 'outline'"
2+
[class.ng-has-value]="hasValue" class="ng-select-container">
3+
<div class="ng-value-container">
4+
@if ((selectedItems.length === 0 && !searchTerm) || (fixedPlaceholder() ?? config.fixedPlaceholder)) {
5+
<ng-template #defaultPlaceholderTemplate>
6+
<div class="ng-placeholder">{{ placeholder() ?? config.placeholder }}</div>
7+
</ng-template>
8+
<ng-template [ngTemplateOutlet]="placeholderTemplate() || defaultPlaceholderTemplate"> </ng-template>
9+
}
1310

14-
@if ((!multiLabelTemplate() || !multiple()) && selectedItems.length > 0) {
15-
@for (item of selectedItems; track trackByOption($index, item)) {
16-
<div [class.ng-value-disabled]="item.disabled" class="ng-value">
17-
<ng-template #defaultLabelTemplate>
18-
<span class="ng-value-icon left" (click)="unselect(item)" aria-hidden="true">×</span>
19-
<span class="ng-value-label" [ngItemLabel]="item.label" [escape]="escapeHTML"></span>
20-
</ng-template>
21-
<ng-template
22-
[ngTemplateOutlet]="labelTemplate() || defaultLabelTemplate"
23-
[ngTemplateOutletContext]="{ item: item.value, clear: clearItem, label: item.label }">
24-
</ng-template>
25-
</div>
26-
}
27-
}
11+
@if ((!multiLabelTemplate() || !multiple()) && selectedItems.length > 0) {
12+
@for (item of selectedItems; track trackByOption($index, item)) {
13+
<div [class.ng-value-disabled]="item.disabled" class="ng-value">
14+
<ng-template #defaultLabelTemplate>
15+
<span class="ng-value-icon left" (click)="unselect(item)" aria-hidden="true">×</span>
16+
<span class="ng-value-label" [ngItemLabel]="item.label" [escape]="escapeHTML"></span>
17+
</ng-template>
18+
<ng-template [ngTemplateOutlet]="labelTemplate() || defaultLabelTemplate"
19+
[ngTemplateOutletContext]="{ item: item.value, clear: clearItem, label: item.label }">
20+
</ng-template>
21+
</div>
22+
}
23+
}
2824

29-
@if (multiple() && multiLabelTemplate() && selectedValues.length > 0) {
30-
<ng-template [ngTemplateOutlet]="multiLabelTemplate()" [ngTemplateOutletContext]="{ items: selectedValues, clear: clearItem }">
31-
</ng-template>
32-
}
25+
@if (multiple() && multiLabelTemplate() && selectedValues.length > 0) {
26+
<ng-template [ngTemplateOutlet]="multiLabelTemplate()"
27+
[ngTemplateOutletContext]="{ items: selectedValues, clear: clearItem }">
28+
</ng-template>
29+
}
3330

34-
<div class="ng-input">
35-
<input
36-
#searchInput
37-
(blur)="onInputBlur($event)"
38-
(change)="$event.stopPropagation()"
39-
(compositionend)="onCompositionEnd(searchInput.value)"
40-
(compositionstart)="onCompositionStart()"
41-
(focus)="onInputFocus($event)"
42-
(input)="filter(searchInput.value)"
43-
[attr.aria-activedescendant]="isOpen() ? itemsList?.markedItem?.htmlId : null"
44-
[attr.aria-controls]="isOpen() ? dropdownId : null"
45-
[attr.aria-expanded]="isOpen()"
46-
[attr.aria-label]="ariaLabel()"
47-
[attr.id]="labelForId()"
48-
[attr.tabindex]="tabIndex()"
49-
[disabled]="disabled()"
50-
[readOnly]="!searchable() || itemsList.maxItemsSelected"
51-
[value]="searchTerm ?? ''"
52-
aria-autocomplete="list"
53-
role="combobox" />
54-
</div>
55-
</div>
31+
<div class="ng-input">
32+
<input #searchInput (blur)="onInputBlur($event)" (change)="$event.stopPropagation()"
33+
(compositionend)="onCompositionEnd(searchInput.value)" (compositionstart)="onCompositionStart()"
34+
(focus)="onInputFocus($event)" (input)="filter(searchInput.value)"
35+
[attr.aria-activedescendant]="isOpen() ? itemsList?.markedItem?.htmlId : null"
36+
[attr.aria-controls]="isOpen() ? dropdownId : null" [attr.aria-expanded]="isOpen()"
37+
[attr.aria-label]="ariaLabel()" [attr.id]="labelForId()" [attr.tabindex]="tabIndex()"
38+
[disabled]="disabled()" [readOnly]="!searchable() || itemsList.maxItemsSelected"
39+
[value]="searchTerm ?? ''" aria-autocomplete="list" role="combobox" />
40+
</div>
41+
</div>
5642

57-
@if (loading()) {
58-
<ng-template #defaultLoadingSpinnerTemplate>
59-
<div class="ng-spinner-loader"></div>
60-
</ng-template>
61-
<ng-template [ngTemplateOutlet]="loadingSpinnerTemplate() || defaultLoadingSpinnerTemplate"></ng-template>
62-
}
43+
@if (loading()) {
44+
<ng-template #defaultLoadingSpinnerTemplate>
45+
<div class="ng-spinner-loader"></div>
46+
</ng-template>
47+
<ng-template [ngTemplateOutlet]="loadingSpinnerTemplate() || defaultLoadingSpinnerTemplate"></ng-template>
48+
}
6349

64-
@if (showClear()) {
65-
@if (clearButtonTemplate()) {
66-
<ng-container [ngTemplateOutlet]="clearButtonTemplate()"></ng-container>
67-
} @else {
68-
<span
69-
class="ng-clear-wrapper"
70-
role="button"
71-
tabindex="0"
72-
[attr.tabindex]="tabFocusOnClear() ? 0 : -1"
73-
title="{{ clearAllText() || config.clearAllText }}"
74-
#clearButton
75-
(click)="handleClearClick($event)">
76-
<span class="ng-clear" aria-hidden="true">×</span>
77-
</span>
78-
}
79-
}
50+
@if (showClear()) {
51+
@if (clearButtonTemplate()) {
52+
<ng-container [ngTemplateOutlet]="clearButtonTemplate()"></ng-container>
53+
} @else {
54+
<span class="ng-clear-wrapper" role="button" tabindex="0" [attr.tabindex]="tabFocusOnClear() ? 0 : -1"
55+
title="{{ clearAllText() || config.clearAllText }}" #clearButton (click)="handleClearClick($event)">
56+
<span class="ng-clear" aria-hidden="true">×</span>
57+
</span>
58+
}
59+
}
8060

81-
<span class="ng-arrow-wrapper">
82-
<span class="ng-arrow"></span>
83-
</span>
61+
<span class="ng-arrow-wrapper">
62+
<span class="ng-arrow"></span>
63+
</span>
8464
</div>
8565

8666
@if (isOpen()) {
87-
@let appendToValue = appendTo() || config.appendTo;
88-
<ng-dropdown-panel
89-
class="ng-dropdown-panel"
90-
[virtualScroll]="virtualScroll() ?? !config.disableVirtualScroll ?? false"
91-
[bufferAmount]="bufferAmount()"
92-
[appendTo]="appendToValue"
93-
[position]="dropdownPosition()"
94-
[headerTemplate]="headerTemplate()"
95-
[footerTemplate]="footerTemplate()"
96-
[filterValue]="searchTerm"
97-
[items]="itemsList.filteredItems"
98-
[markedItem]="itemsList.markedItem"
99-
(update)="viewPortItems = $event"
100-
(scroll)="scroll.emit($event)"
101-
(scrollToEnd)="scrollToEnd.emit($event)"
102-
(outsideClick)="close()"
103-
[class.ng-select-multiple]="multiple()"
104-
[class]="appendToValue ? (ngClass() ? ngClass() : classes) : null"
105-
[id]="dropdownId"
106-
[ariaLabelDropdown]="ariaLabelDropdown()">
107-
<ng-container>
108-
@for (item of viewPortItems; track trackByOption($index, item)) {
109-
<div
110-
class="ng-option"
111-
[attr.role]="item.children ? 'group' : 'option'"
112-
(click)="toggleItem(item)"
113-
(mouseover)="onItemHover(item)"
114-
[class.ng-option-disabled]="item.disabled"
115-
[class.ng-option-selected]="item.selected"
116-
[class.ng-optgroup]="item.children"
117-
[class.ng-option]="!item.children"
118-
[class.ng-option-child]="!!item.parent"
119-
[class.ng-option-marked]="item === itemsList.markedItem"
120-
[attr.aria-selected]="item.selected"
121-
[attr.id]="item?.htmlId"
122-
[attr.aria-setsize]="itemsList.filteredItems.length"
123-
[attr.aria-posinset]="item.index + 1">
124-
<ng-template #defaultOptionTemplate>
125-
<span class="ng-option-label" [ngItemLabel]="item.label" [escape]="escapeHTML"></span>
126-
</ng-template>
127-
<ng-template
128-
[ngTemplateOutlet]="
67+
@let appendToValue = appendTo() || config.appendTo;
68+
<ng-dropdown-panel class="ng-dropdown-panel" [virtualScroll]="virtualScroll() ?? !config.disableVirtualScroll ?? false"
69+
[bufferAmount]="bufferAmount()" [appendTo]="appendToValue" [position]="dropdownPosition()"
70+
[headerTemplate]="headerTemplate()" [footerTemplate]="footerTemplate()" [filterValue]="searchTerm"
71+
[items]="itemsList.filteredItems" [markedItem]="itemsList.markedItem" (update)="viewPortItems = $event"
72+
(scroll)="scroll.emit($event)" (scrollToEnd)="scrollToEnd.emit($event)" (outsideClick)="close()"
73+
[class.ng-select-multiple]="multiple()" [class]="appendToValue ? (ngClass() ? ngClass() : classes) : null"
74+
[id]="dropdownId" [ariaLabelDropdown]="ariaLabelDropdown()">
75+
<ng-container>
76+
@for (item of viewPortItems; track trackByOption($index, item)) {
77+
<div class="ng-option" [attr.role]="item.children ? 'group' : 'option'" (click)="toggleItem(item)"
78+
(mouseover)="onItemHover(item)" [class.ng-option-disabled]="item.disabled"
79+
[class.ng-option-selected]="item.selected" [class.ng-optgroup]="item.children"
80+
[class.ng-option]="!item.children" [class.ng-option-child]="!!item.parent"
81+
[class.ng-option-marked]="item === itemsList.markedItem" [attr.aria-selected]="item.selected"
82+
[attr.id]="item?.htmlId" [attr.aria-setsize]="itemsList.filteredItems.length"
83+
[attr.aria-posinset]="item.index + 1">
84+
<ng-template #defaultOptionTemplate>
85+
<span class="ng-option-label" [ngItemLabel]="item.label" [escape]="escapeHTML"></span>
86+
</ng-template>
87+
<ng-template [ngTemplateOutlet]="
12988
item.children ? optgroupTemplate() || defaultOptionTemplate : optionTemplate() || defaultOptionTemplate
130-
"
131-
[ngTemplateOutletContext]="{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }">
132-
</ng-template>
133-
</div>
134-
}
135-
@if (showAddTag) {
136-
<div
137-
class="ng-option"
138-
[class.ng-option-marked]="!itemsList.markedItem"
139-
(mouseover)="itemsList.unmarkItem()"
140-
role="option"
141-
(click)="selectTag()">
142-
<ng-template #defaultTagTemplate>
143-
<span
144-
><span class="ng-tag-label">{{ addTagText() || config.addTagText }}</span
145-
>"{{ searchTerm }}"</span
146-
>
147-
</ng-template>
148-
<ng-template
149-
[ngTemplateOutlet]="tagTemplate() || defaultTagTemplate"
150-
[ngTemplateOutletContext]="{ searchTerm: searchTerm }">
151-
</ng-template>
152-
</div>
153-
}
154-
</ng-container>
155-
@if (showNoItemsFound()) {
156-
<ng-template #defaultNotFoundTemplate>
157-
<div class="ng-option ng-option-disabled">{{ notFoundText() ?? config.notFoundText }}</div>
158-
</ng-template>
159-
<ng-template
160-
[ngTemplateOutlet]="notFoundTemplate() || defaultNotFoundTemplate"
161-
[ngTemplateOutletContext]="{ searchTerm: searchTerm }">
162-
</ng-template>
163-
}
164-
@if (showTypeToSearch()) {
165-
<ng-template #defaultTypeToSearchTemplate>
166-
<div class="ng-option ng-option-disabled">{{ typeToSearchText() || config.typeToSearchText }}</div>
167-
</ng-template>
168-
<ng-template [ngTemplateOutlet]="typeToSearchTemplate() || defaultTypeToSearchTemplate"></ng-template>
169-
}
170-
@if (loading() && itemsList.filteredItems.length === 0) {
171-
<ng-template #defaultLoadingTextTemplate>
172-
<div class="ng-option ng-option-disabled">{{ loadingText() || config.loadingText }}</div>
173-
</ng-template>
174-
<ng-template
175-
[ngTemplateOutlet]="loadingTextTemplate() || defaultLoadingTextTemplate"
176-
[ngTemplateOutletContext]="{ searchTerm: searchTerm }">
177-
</ng-template>
178-
}
179-
</ng-dropdown-panel>
89+
" [ngTemplateOutletContext]="{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }">
90+
</ng-template>
91+
</div>
92+
}
93+
@if (showAddTag) {
94+
<div class="ng-option" [class.ng-option-marked]="!itemsList.markedItem" (mouseover)="itemsList.unmarkItem()"
95+
role="option" (click)="selectTag()">
96+
<ng-template #defaultTagTemplate>
97+
<span><span class="ng-tag-label">{{ addTagText() || config.addTagText }}</span>"{{ searchTerm }}"</span>
98+
</ng-template>
99+
<ng-template [ngTemplateOutlet]="tagTemplate() || defaultTagTemplate"
100+
[ngTemplateOutletContext]="{ searchTerm: searchTerm }">
101+
</ng-template>
102+
</div>
103+
}
104+
</ng-container>
105+
@if (showNoItemsFound()) {
106+
<ng-template #defaultNotFoundTemplate>
107+
<div class="ng-option ng-option-disabled">{{ notFoundText() ?? config.notFoundText }}</div>
108+
</ng-template>
109+
<ng-template [ngTemplateOutlet]="notFoundTemplate() || defaultNotFoundTemplate"
110+
[ngTemplateOutletContext]="{ searchTerm: searchTerm }">
111+
</ng-template>
112+
}
113+
@if (showTypeToSearch()) {
114+
<ng-template #defaultTypeToSearchTemplate>
115+
<div class="ng-option ng-option-disabled">{{ typeToSearchText() || config.typeToSearchText }}</div>
116+
</ng-template>
117+
<ng-template [ngTemplateOutlet]="typeToSearchTemplate() || defaultTypeToSearchTemplate"></ng-template>
118+
}
119+
@if (loading() && itemsList.filteredItems.length === 0) {
120+
<ng-template #defaultLoadingTextTemplate>
121+
<div class="ng-option ng-option-disabled">{{ loadingText() || config.loadingText }}</div>
122+
</ng-template>
123+
<ng-template [ngTemplateOutlet]="loadingTextTemplate() || defaultLoadingTextTemplate"
124+
[ngTemplateOutletContext]="{ searchTerm: searchTerm }">
125+
</ng-template>
126+
}
127+
</ng-dropdown-panel>
180128
}
181129

182130
<!-- Always present aria-live region -->
183131
<div aria-atomic="true" aria-live="polite" class="ng-visually-hidden" role="status">
184-
@if (isOpen && showNoItemsFound()) {
185-
{{ notFoundText }}
186-
}
187-
</div>
132+
@if (isOpen() && showNoItemsFound()) {
133+
{{ notFoundText() ?? config.notFoundText }}
134+
}
135+
</div>

0 commit comments

Comments
 (0)