ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html

<link rel="import" href="../../html/polymer.html">

<link rel="import" href="../cr_input/cr_input.html">
<link rel="import" href="../cr_scrollable_behavior.html">
<link rel="import" href="../hidden_style_css.html">
<link rel="import" href="../icons.html">
<link rel="import" href="../shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">

<dom-module id="cr-searchable-drop-down">
  <template>
    <style include="cr-hidden-style">
      :host(:not([error-message-allowed])) cr-input {
        --cr-input-error-display: none;
      }

      :host([opened_]) cr-input {
        --cr-input-border-radius: 4px 4px 0 0;
      }

      iron-dropdown,
      cr-input {
        /* 472px is the max width of the input field for a dialog. */
        width: var(--cr-searchable-drop-down-width, 472px);
      }

      cr-input {
        --cr-input-padding-start: 8px;
      }

      iron-dropdown {
        max-height: 270px;
      }

      iron-dropdown [slot='dropdown-content'] {
        background-color: white;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 2px 6px var(--paper-grey-500);
        min-width: 128px;
        padding: 8px 0;
      }

      #input-overlay {
        border-radius: 4px;
        height: 100%;
        left: 0;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 100%;
      }

      #dropdown-icon {
        --iron-icon-height: 20px;
        --iron-icon-width: 20px;
        margin-top: -10px;
        padding-inline-end: 6px;
        position: absolute;
        right: 0;
        top: 50%;
      }

      :host-context([dir='rtl']) #dropdown-icon {
        left: 0;
        right: unset;
      }

      cr-input:focus-within #dropdown-icon {
        --iron-icon-fill-color: var(--google-blue-600);
      }

      #input-box {
        height: 100%;
        left: 0;
        pointer-events: none;
        top: 0;
        width: 100%;
      }

      #dropdown-box {
        pointer-events: initial;
        width: 100%;
      }

      #loading-box {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        height: 32px;
        padding: 0 8px;
        text-align: start;
        width: 100%;
      }

      #loading-box div {
        @apply --cr-secondary-text;
        font-size: 12px;
        padding: 0 16px;
      }

      #loading-box paper-spinner-lite {
        --paper-spinner-color: var(--google-blue-600);
        --paper-spinner-stroke-width: 2px;
        height: 16px;
        width: 16px;
      }

      .list-item {
        background: none;
        border: none;
        box-sizing: border-box;
        color: var(--paper-grey-900);
        font: inherit;
        min-height: 32px;
        padding: 0 8px;
        text-align: start;
        width: 100%;
      }

      .list-item[selected_] {
        background-color: rgba(0, 0, 0, .04);
        outline: none;
      }

      .list-item:active {
        background-color: rgba(0, 0, 0, .12);
        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-focus="onFocus_" on-keydown="onKeyDown_"
        value="[[value]]"
        on-input="onInput_" id="search" autofocus="[[autofocus]]"
        placeholder="[[placeholder]]" readonly="[[readonly]]"
        error-message="[[getErrorMessage_(errorMessage, errorMessageAllowed)]]"
        invalid="[[shouldShowErrorMessage_(errorMessage, errorMessageAllowed)]]"
        on-blur="onBlur_">
      <div id="input-overlay" slot="suffix">
        <div id="input-box">
          <iron-icon id="dropdown-icon" icon="cr:arrow-drop-down"></iron-icon>
        </div>
        <div id="dropdown-box">
          <iron-dropdown horizontal-align="left" vertical-align="top"
              vertical-offset="0" no-cancel-on-outside-click
              no-cancel-on-esc-key>
            <div slot="dropdown-content">
              <div id="loading-box" hidden="[[!showLoading]]">
                <paper-spinner-lite active></paper-spinner-lite>
                <div>[[loadingMessage]]</div>
              </div>
              <template is="dom-repeat" items="[[items]]"
                  filter="[[filterItems_(searchTerm_)]]">
                <button class="list-item" on-click="onSelect_" tabindex="-1">
                  [[item]]
                </button>
              </template>
            </div>
          </iron-dropdown>
        </div>
      </div>
    </cr-input>
  </template>
  <script src="cr_searchable_drop_down.js"></script>
</dom-module>