WebCompDev / COMPONENTS

  <!--
  @license
  Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  Code distributed by Google as part of the polymer project is also
  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  -->

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

  <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">

  <link rel="import" href="../iron-input/iron-input.html">

  <link rel="import" href="paper-input-behavior.html">

  <link rel="import" href="paper-input-char-counter.html">

  <link rel="import" href="paper-input-container.html">
  <link rel="import" href="paper-input-error.html">

  
  <!--

  Material design: [Text fields](https://www.google.com/design/spec/components/text-fields.html)
  

  `<paper-input>` is a single-line text field with Material Design styling.
  
      <paper-input label="Input label"></paper-input>
  
  It may include an optional error message or character counter.
  
      <paper-input error-message="Invalid input!" label="Input label"></paper-input>
      <paper-input char-counter label="Input label"></paper-input>
  

  It can also include custom prefix or suffix elements, which are displayed
  before or after the text input itself. In order for an element to be
  considered as a prefix, it must have the `prefix` attribute (and similarly
  for `suffix`).
  
      <paper-input label="total">
        <div prefix>$</div>
        <paper-icon-button suffix icon="clear"></paper-icon-button>
      </paper-input>
  

  A `paper-input` can use the native `type=search` or `type=file` features.

  However, since we can't control the native styling of the input (search icon,
  file button, date placeholder, etc.), in these cases the label will be
  automatically floated. The `placeholder` attribute can still be used for
  additional informational text.

  
      <paper-input label="search!" type="search"
          placeholder="search for cats" autosave="test" results="5">
      </paper-input>
  

  See `Polymer.PaperInputBehavior` for more API docs.
  

  ### Focus
  
  To focus a paper-input, you can call the native `focus()` method as long as the
  paper input has a tab index.
  

  ### Styling
  
  See `Polymer.PaperInputContainer` for a list of custom properties used to
  style this element.
  

  @group Paper Elements
  @element paper-input
  @hero hero.svg
  @demo demo/index.html
  -->
  
  <dom-module id="paper-input">

    <template>

      <style>
        :host {
          display: block;
        }

        input::-webkit-input-placeholder {
          color: var(--paper-input-container-color, --secondary-text-color);
        }

        input:-moz-placeholder {
          color: var(--paper-input-container-color, --secondary-text-color);
        }

        input::-moz-placeholder {
          color: var(--paper-input-container-color, --secondary-text-color);
        }

        input:-ms-input-placeholder {
          color: var(--paper-input-container-color, --secondary-text-color);
        }
      </style>

  
      <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
  

        <content select="[prefix]"></content>
  

        <label hidden$="[[!label]]">[[label]]</label>
  
        <input is="iron-input" id="input"
          aria-labelledby$="[[_ariaLabelledBy]]"
          aria-describedby$="[[_ariaDescribedBy]]"
          disabled$="[[disabled]]"

          title$="[[title]]"

          bind-value="{{value}}"
          invalid="{{invalid}}"
          prevent-invalid-input="[[preventInvalidInput]]"
          allowed-pattern="[[allowedPattern]]"
          validator="[[validator]]"
          type$="[[type]]"
          pattern$="[[pattern]]"

          required$="[[required]]"
          autocomplete$="[[autocomplete]]"
          autofocus$="[[autofocus]]"
          inputmode$="[[inputmode]]"
          minlength$="[[minlength]]"

          maxlength$="[[maxlength]]"
          min$="[[min]]"
          max$="[[max]]"
          step$="[[step]]"

          name$="[[name]]"
          placeholder$="[[placeholder]]"
          readonly$="[[readonly]]"
          list$="[[list]]"
          size$="[[size]]"
          autocapitalize$="[[autocapitalize]]"

          autocorrect$="[[autocorrect]]"
          on-change="_onChange"

          tabindex$="[[tabindex]]"

          autosave$="[[autosave]]"
          results$="[[results]]"
          accept$="[[accept]]"
          multiple$="[[multiple]]">

  
        <content select="[suffix]"></content>

  
        <template is="dom-if" if="[[errorMessage]]">
          <paper-input-error>[[errorMessage]]</paper-input-error>
        </template>
  
        <template is="dom-if" if="[[charCounter]]">
          <paper-input-char-counter></paper-input-char-counter>
        </template>
  
      </paper-input-container>

    </template>

  </dom-module>
  
  <script>

    Polymer({

      is: 'paper-input',
  
      behaviors: [
        Polymer.IronFormElementBehavior,

        Polymer.PaperInputBehavior

      ]

    });

  </script>