blob: 3cf6faa12a87ec5969265aab1cbc9bb961ad5626 [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html">
<dom-module id="cr-searchable-drop-down">
<template>
<style>
cr-input {
--cr-input-error-display: none;
}
iron-dropdown,
cr-input {
width: 270px;
}
iron-dropdown {
height: 270px;
}
iron-dropdown [slot='dropdown-content'] {
background-color: white;
box-shadow: 0 2px 6px var(--paper-grey-500);
min-width: 128px;
padding: 8px 0;
}
.list-item {
background: none;
border: none;
box-sizing: border-box;
color: var(--paper-grey-900);
font: inherit;
min-height: 32px;
padding: 0 24px;
text-align: start;
width: 100%;
@apply --settings-actionable;
}
.list-item:focus {
background-color: var(--google-grey-200);
outline: none;
}
</style>
<!-- |value| is one-way binding on purpose so that it doesn't change
immediately as the user types unless the update-value-on-input flag is
explicitly used. -->
<cr-input label="[[label]]" on-click="onClick_" value="[[value]]"
on-input="onInput_" id="search" autofocus="[[autofocus]]">
</cr-input>
<iron-dropdown horizontal-align="left" vertical-align="top"
vertical-offset="52">
<div slot="dropdown-content">
<template is="dom-repeat" items="[[items]]"
filter="[[filterItems_(searchTerm_)]]">
<button class="list-item" on-click="onSelect_">[[item]]</button>
</template>
</div>
</iron-dropdown>
</template>
<script src="cr_searchable_drop_down.js"></script>
</dom-module>