paper-input.html

<!--
@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-input/iron-input.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="paper-input-behavior.html">
<link rel="import" href="paper-input-container.html">
<link rel="import" href="paper-input-error.html">
<link rel="import" href="paper-input-char-counter.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>

See `Polymer.PaperInputBehavior` for more API docs.

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

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

  <template>

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

      <label hidden$="[[!label]]">[[label]]</label>

      <input is="iron-input" id="input"
        aria-labelledby$="[[_ariaLabelledBy]]"
        aria-describedby$="[[_ariaDescribedBy]]"
        disabled$="[[disabled]]"
        bind-value="{{value}}"
        invalid="{{invalid}}"
        prevent-invalid-input="[[preventInvalidInput]]"
        allowedPattern="[[allowedPattern]]"
        validator="[[validator]]"
        type$="[[type]]"
        pattern$="[[pattern]]"
        maxlength$="[[maxlength]]"
        required$="[[required]]"
        autocomplete$="[[autocomplete]]"
        autofocus$="[[autofocus]]"
        inputmode$="[[inputmode]]"
        minlength$="[[minlength]]"
        name$="[[name]]"
        placeholder$="[[placeholder]]"
        readonly$="[[readonly]]"
        size$="[[size]]">

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

(function() {

  Polymer({

    is: 'paper-input',

    behaviors: [
      Polymer.PaperInputBehavior,
      Polymer.IronFormElementBehavior
    ]

  })

})();

</script>