ufg-search.html

<!--<link rel="import" href="./bower_components/polymer/polymer.html">-->
<link rel="import" href="./bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="./bower_components/paper-input/paper-input-behavior.html">
<link rel="import" href="./bower_components/paper-input/paper-input.html">
<link rel="import" href="./bower_components/iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg name="input-search" size="24">
  <svg>
    <defs>
      <g id="search">
        <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
        />
      </g>
      <g id="clear">
        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
      </g>
    </defs>
  </svg>
</iron-iconset-svg>

<!--
`input-search` is a single-line text filed used to designate the
input as being used for search.

```html
<input-search placeholder="Search..."></input-search>
```

Custom property | Description | Default
----------------|-------------|----------
`--input-search-container`  | Mixin for input container | `{}`
`--input-search-input`      | Mixin for input element | `{}`
`--input-search-icon`       | Mixin for search icon | `{}`
`--input-search-clear-icon` | Mixin for clear icon | `{}`

@element input-search
@hero hero.svg
@demo demo/index.html
-->

<dom-module id="ufg-search">
  <template>

    <style is="custom-style">
      :host {
        display: block;
        outline: 0;
        height: 44px;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        border: 1px solid rgba(0, 0, 0, 0.15);
      }

      .input-content {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        height: 100%;
        @apply --input-search-container;
      }

      paper-input {        

        --paper-input-container: {
          padding: 3px 0;
        }
        
        --paper-input-container-underline: {
          display: none;
        }
        
        --paper-input-container-input-webkit-spinner: {
          display: none;
        }
        
        --floated-label-placeholder: {
          display: none;
        }
        
        --paper-input-container-label-floating: {
          display: none;
        }
        
        --paper-input-container-underline-focus: {
          display: none;
        }
        
        --paper-input-container-underline-disabled: {
          display: none;
        }
        
      }
      
      input {
        color: inherit !important;
        font: inherit !important;
        line-height: inherit !important;
        height: 56px !important;
        position: relative !important; /* to make a stacking context */
        outline: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        background: transparent !important;
        border: none !important;
        -webkit-appearance: none !important;
        text-align: inherit !important;
        vertical-align: bottom !important;
      }
      [prefix],
      [suffix] {
        flex: none;
      }
      input::-webkit-input-placeholder {
        color: inherit;
        opacity: 0.7;
      }
      input:-moz-placeholder {
        color: inherit;
        opacity: 0.7;
      }
      input::-moz-placeholder {
        color: inherit;
        opacity: 0.7;
      }
      input:-ms-input-placeholder {
        color: inherit;
        opacity: 0.7;
      }
    </style>
    <div class="input-content">
      <paper-input id="input" type="search" on-keypress="_search" placeholder="Pesquisar..." tabindex="-1" autosave="test" results="5"
        no-label-float="true" always-float-label="true" value="[[value]]">
        <iron-icon slot="prefix" icon="search" class="icon"></iron-icon>
      </paper-input>
    </div>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'ufg-search',
    _search: function (e) {
      if (e.which == 13 || e.keyCode == 13) {
        this.dispatchEvent(new CustomEvent('icon-click', { detail: this.$.input.value }), { bubbles: false });
      }
    }
  });
</script>