<style include="md-select">
:host {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
}
hr {
margin: 0;
width: 1px;
height: 20px;
border: 0;
background: var(--cr-fallback-color-divider);
}
#suggestions {
display: flex;
gap: 8px;
}
.suggestion-label {
text-transform: lowercase;
}
</style>
<select id="showByGroupSelectMenu" class="md-select"
aria-label="[[i18n('historyEmbeddingsShowByLabel')]]"
value="[[showResultsByGroup]]"
on-change="onShowByGroupSelectMenuChanged_"
hidden$="[[!enableShowResultsByGroupOption]]">
<option value="false">
[[i18n('historyEmbeddingsShowByDate')]]
</option>
<option value="true">
[[i18n('historyEmbeddingsShowByGroup')]]
</option>
</select>
<hr hidden$="[[!enableShowResultsByGroupOption]]"></hr>
<div id="suggestions">
<template is="dom-repeat" items="[[suggestions_]]">
<cr-chip on-click="onSuggestionClick_"
selected$="[[isSuggestionSelected_(item, selectedSuggestion)]]"
chip-aria-label="[[item.ariaLabel]]">
<cr-icon icon="cr:check"
hidden$="[[!isSuggestionSelected_(item, selectedSuggestion)]]">
</cr-icon>
<span class="suggestion-label">[[item.label]]</span>
</cr-chip>
</template>
</div>