multi-typeahead.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.html">

<!--
`multi-typeahead` Typeahead with multiple selection.

### Examples

*Simple:

  ```html
  <multi-typeahead
    items="[[users]]"
    selected-items="{{selectedUsers}}">
  </multi-typeahead>
  ```

*With collapsed list:

  ```html
  <multi-typeahead
    items="[[users]]"
    collapse
    selected-items="{{selectedUsers}}">
  </multi-typeahead>
  ```

*Multi-typeahead that hides selected items:

  ```html
  <multi-typeahead
    items="[[users]]"
    remove-selected
    selected-items="{{selectedUsers}}">
  </multi-typeahead>
  ```

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--multi-typeahead-container`                 | Mixin applied to the container that wraps the input and the list | `{}`
`--multi-typeahead-input`                     | Mixin applied to the input | `{}`
`--multi-typeahead-label`                     | Mixin applied to the label of the items | `{}`
`--multi-typeahead-label-icon`                | Mixin applied to the label icon of the items | `{}`
`--multi-typeahead-label-image`               | Mixin applied to the image of the items | `{}`
`--multi-typeahead-placeholder-color`         | Color of the placeholder text | `#888`
`--multi-typeahead-list-wrapper-collapse`     | Mixin applied to the list wrapper when collapsed | `{}`
`--multi-typeahead-list-wrapper`              | Mixin applied to the list wrapper | `{}`
`--multi-typeahead-list`                      | Mixin applied to the list | `{}`
`--multi-typeahead-list-item-first`           | Mixin applied to the first item in the list | `{}`
`--multi-typeahead-list-item`                 | Mixin applied to the items in the list | `{}`
`--multi-typeahead-list-item-hover`           | Mixin applied to the hovered item | `{}`
`--multi-typeahead-list-item-disabled`        | Mixin applied to the disabled item | `{}`
`--multi-typeahead-list-item-didsabled-hover` | Mixin applied to the hovered disabled item | `{}`
`--multi-typeahead-list-item-image`           | Mixin applied to the image | `{}`
`--multi-typeahead-list-item-text`            | Mixin applied to the text of the item | `{}`
`--multi-typeahead-list-item-icon`            | Mixin applied to the icon of the item | `{}`
`--multi-typeahead-list-item-disabled-icon`   | Mixin applied to the icon when disabled | `{}`

@demo demo/index.html 
-->

<dom-module id="multi-typeahead">
  <template>
    <style>
      :host {
        display: block;
        --grey-1: #888;
      }

      .container {
        position: relative;
        @apply --multi-typeahead-container;
      }

      .input {
        border: 1px solid #ccc;
        display: flex;
        padding: 5px 5px 0 5px;
        flex-wrap: wrap;
        cursor: text;
        @apply --multi-typeahead-input;
      }

      .label {
        background-color: #ccc;
        padding: 2px 2px 2px 22px;
        margin: 0 5px 5px 0;
        flex: none;
        position: relative;
        @apply --multi-typeahead-label;
      }

      .label-icon {
        width: 16px;
        height: 16px;
        cursor: pointer;
        @apply --multi-typeahead-label-icon;
      }

      .label-image {
        display: inline-block;
        left: 2px;
        height: 17px;
        width: 17px;
        position: absolute;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        @apply --multi-typeahead-label-image;
      }

      .inner-input {
        border: none;
        width: 100%;
        max-width: 100%;
        flex: 1;
        margin-bottom: 5px;
        line-height: 19px;
        font-size: 14px;
      }

      .list-item:focus,
      .inner-input:focus {
        outline: none;
      }

      input::-webkit-input-placeholder,
      input:-moz-placeholder,
      input::-moz-placeholder,
      input:-ms-input-placeholder {
        color: var(--multi-typeahead-placeholder-color, var(--grey-1));
      }

      :host[collapse] .list-wrapper {
        width: 100%;
        position: absolute;
        z-index: 1;
        @apply --multi-typeahead-list-wrapper-collapse;
      }

      .list-wrapper {
        background-color: #fff;
        margin-top: 14px;
        overflow-y: scroll;
        max-height: 310px;
        @apply --multi-typeahead-list-wrapper;
      }

      .list {
        list-style: none;
        padding: 0;
        margin: 0;
        @apply --multi-typeahead-list;
      }

      .list-item:first-of-type {
        border-top: 1px solid #ccc;
        @apply --multi-typeahead-list-item-first;
      }

      .list-item {
        padding: 5px;
        border-bottom: 1px solid #ccc;
        display: flex;
        cursor: pointer;
        @apply --multi-typeahead-list-item;
      }

      .list-item.hover {
        background-color: #f1f1f1;
        @apply --multi-typeahead-list-item-hover;
      }

      .list-item.disabled {
        opacity: 0.5;
        @apply --multi-typeahead-list-item-disabled;
      }

      .list-item.disabled.hover {
        background-color: transparent;
        cursor: default;
        @apply --multi-typeahead-list-item-hover;
      }

      .list-item__image {
        height: 40px;
        @apply --multi-typeahead-list-item-image;
      }

      .list-item__text {
        align-self: center;
        margin-left: 5px;
        @apply --multi-typeahead-list-item-text;
      }

      .list-item > iron-icon {
        display: none;
        @apply --multi-typeahead-list-item-icon;
      }

      .list-item.disabled > iron-icon {
        display: block;
        align-self: center;
        margin-left: auto;
        @apply --multi-typeahead-list-item-disabled-icon;
      }
    </style>

    <div class="container">
      <div class="input">
        <template is="dom-repeat" items="[[selectedItems]]">
          <div class="label">
            <span style$="background-image: url([[item.picture]])" class="label-image"></span>
            [[item.name]] <iron-icon class="label-icon" icon="[[clearIcon]]" on-tap="_removeItem"></iron-icon>
          </div>
        </template>
        <input
          id="input"
          class="inner-input"
          value="{{_searchValue::input}}"
          placeholder="[[_computePlaceholder(placeholder, _searchValue, selectedItems.length)]]">
        </input>
      </div>
      <template is="dom-if" if="[[open]]">
        <div class="list-wrapper">
          <ul class="list">
            <template
              id="list"
              is="dom-repeat"
              items="[[items]]"
              filter="[[_filter(_searchValue, selectedItems.length)]]"
              rendered-item-count="{{_renderedCount}}">
              <li
                class$="list-item {{_isDisabled(item, selectedItems.length)}}"
                on-tap="_handleItemClick"
                on-mouseover="_onFocusItem"
                tabindex$="[[index]]">
                <img src="[[item.picture]]" alt$="[[item.name]]" class="list-item__image">
                <span class="list-item__text">[[item.name]]</span>
                <iron-icon icon="[[checkIcon]]"></iron-icon>
              </li>
            </template>
          </ul>
        </div>
      </template>
    </div>

  </template>

  <script src="./multi-typeahead.js"></script>

</dom-module>