| <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> |