@let searchValue = searchFormControl?.value; @let hasSearchContent = !!searchValue; @let dropDownOptionsWithFilter = dropDownOptions | filterBySearchTerm: searchValue; @let headerInfo = dropDownOptionsWithFilter | selectedItem; @let title = headerInfo?.title;
@let iconBackgroundColor = isExpanded ? 'svg-fill-muted' : isTitleHovered ? 'svg-fill-black' : 'svg-fill-bw6-2'; @if (!hasSearchContent) { @if (selectedItem) { @if (selectedItem.avatar) { } @if (selectedItem.icon) { } @if (!selectedItem.icon && !selectedItem.avatar && hasInitials) {
{{ selectedItem.title | nameInitials }}
} } @else { @if (headerInfo?.avatar) { } @if (headerInfo?.icon) { } @if (!headerInfo?.icon && !headerInfo?.avatar && hasInitials) {
{{ headerInfo?.title | nameInitials }}
} } } @if (isExpanded) {
@if (!hasSearchContent) { {{ title }} } } @else {
{{ title }}
} @if (title && !isExpanded && !headerInfo?.isCountHidden) { @let countBackgroundColor = isExpanded ? 'background-muted' : isTitleHovered ? 'background-black' : 'background-bw6-2';
{{ headerInfo?.count }}
}
@let iconColor = isExpanded ? 'svg-fill-white-4' : isTitleHovered ? 'svg-fill-black' : 'svg-fill-bw6-2'; @let isClearIconDisplayable = !title && hasSearchContent && isExpanded;
@if (isClearIconDisplayable) {
}
@if (isExpanded) { @let positionTop = parentHeight + 4;
@for ( item of dropDownOptionsWithFilter; track item.id; let first = $first ) {
@let isItemSelected = item?.isSelected || title === item?.title; @let isItemHovered = dropdownItemHoverId === item.id;
@if (item.avatar) { } @if (item.icon) { } @if (!item.icon && !item.avatar && hasInitials) {
{{ item.title | nameInitials }}
} {{ item.title }}
@if (!item?.isCountHidden) {
{{ item.count }}
}
}
}