| <style> |
| :host { |
| background-color: var(--search-box-results-bg, white); |
| overflow: hidden; |
| } |
| |
| @media (min-width: 560px) { |
| :host { |
| width: 449px; |
| } |
| } |
| |
| @media (min-width: 672px) { |
| :host { |
| width: 561px; |
| } |
| } |
| |
| ntp-realbox-match { |
| color: var(--search-box-results-text); |
| } |
| |
| .header { |
| align-items: center; |
| display: flex; |
| margin-top: 8px; |
| outline: none; |
| padding-bottom: 6px; |
| padding-inline-end: 16px; |
| padding-inline-start: 12px; |
| padding-top: 6px; |
| } |
| |
| .header .text { |
| color: var(--search-box-results-dim, var(--google-grey-refresh-700)); |
| cursor: default; |
| font-size: 14px; |
| font-weight: 500; |
| line-height: 16px; |
| overflow: hidden; |
| padding-inline-end: 8px; |
| text-overflow: ellipsis; |
| text-transform: uppercase; |
| user-select: none; |
| white-space: nowrap; |
| } |
| |
| ntp-realbox-match:hover, |
| .header:hover { |
| background-color: var(--search-box-results-bg-hovered, rgba(var(--google-grey-900-rgb), .1)); |
| } |
| |
| ntp-realbox-match:-webkit-any(:focus-within, .selected), |
| .header:focus-within:not(:focus) { |
| background-color: var(--search-box-results-bg-selected, rgba(var(--google-grey-900-rgb), .16)); |
| color: var(--search-box-results-text-selected, var(--google-grey-900)); |
| } |
| </style> |
| <iron-selector id="selector" selectable="ntp-realbox-match" |
| items="{{selectableMatchElements_}}" selected="{{selectedMatchIndex}}" |
| selected-class="selected"> |
| <template is="dom-repeat" items="[[groupIds_]]" as="groupId"> |
| <template is="dom-if" if="[[groupHasHeader_(groupId)]]"> |
| <!-- Header cannot be tabbed into but gets focus when clicked. This stops |
| the dropdown from losing focus and closing as a result. --> |
| <div class="header" data-id$="[[groupId]]" tabindex="-1" |
| on-focusin="onHeaderFocusin_" on-click="onHeaderClick_" |
| aria-hidden="true" |
| group-is-hidden$="[[groupIsHidden_(groupId, hiddenGroupIds_.*)]]"> |
| <span class="text">[[headerForGroup_(groupId)]]</span> |
| <ntp-realbox-button tabindex="0" role="button" |
| title="[[toggleButtonTitleForGroup_(groupId, hiddenGroupIds_.*)]]" |
| aria-label$="[[toggleButtonA11yLabelForGroup_(groupId, hiddenGroupIds_.*)]]" |
| on-keydown="onToggleButtonKeydown_"> |
| </ntp-realbox-button> |
| </div> |
| </template> |
| <template is="dom-if" if="[[!groupIsHidden_(groupId, hiddenGroupIds_.*)]]" |
| restamp> |
| <template is="dom-repeat" items="[[result.matches]]" |
| filter="[[computeMatchBelongsToGroup_(groupId)]]" |
| on-dom-change="onResultRepaint_"> |
| <ntp-realbox-match tabindex="0" role="option" match="[[item]]" |
| match-index="[[matchIndex_(item)]]"> |
| </ntp-realbox-match> |
| </template> |
| </template> |
| <template> |
| </iron-selector> |