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-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 slot="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. Similarly, `blur()` will blur the element.

### 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;
      }

      :host([focused]) {
        outline: none;
      }

      :host([hidden]) {
        display: none !important;
      }

      input {
        position: relative; /* to make a stacking context */
        outline: none;
        box-shadow: none;
        padding: 0;
        width: 100%;
        max-width: 100%;
        background: transparent;
        border: none;
        color: var(--paper-input-container-input-color, var(--primary-text-color));
        -webkit-appearance: none;
        text-align: inherit;
        vertical-align: bottom;

        /* Firefox sets a min-width on the input, which can cause layout issues */
        min-width: 0;

        @apply --paper-font-subhead;
        @apply --paper-input-container-input;
      }

      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        @apply --paper-input-container-input-webkit-spinner;
      }

      input::-webkit-clear-button {
        @apply --paper-input-container-input-webkit-clear;
      }

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

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

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

      input::-ms-clear {
        @apply --paper-input-container-ms-clear;
      }

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

      label {
        pointer-events: none;
      }
    </style>

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

      <slot name="prefix" slot="prefix"></slot>

      <label hidden$="[[!label]]" aria-hidden="true" for="input" slot="label">[[label]]</label>

      <span id="template-placeholder"></span>

      <slot name="suffix" slot="suffix"></slot>

      <template is="dom-if" if="[[errorMessage]]">
        <paper-input-error aria-live="assertive" slot="add-on">[[errorMessage]]</paper-input-error>
      </template>

      <template is="dom-if" if="[[charCounter]]">
        <paper-input-char-counter slot="add-on"></paper-input-char-counter>
      </template>

    </paper-input-container>
  </template>

  <!-- This is a fresh new hell to make this element hybrid. Basically, in 2.0
    we lost is=, so the example same template can't be used with iron-input 1.0 and 2.0.
    Expect some conditional code (especially in the tests).
   -->
  <template id="v0">
    <input is="iron-input" id="input" slot="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]]">
  </template>

  <template id="v1">
    <!-- Need to bind maxlength so that the paper-input-char-counter works correctly -->
    <iron-input bind-value="{{value}}" id="input" slot="input"
        maxlength$="[[maxlength]]"
        allowed-pattern="[[allowedPattern]]"
        invalid="{{invalid}}"
        validator="[[validator]]">
      <input id="nativeInput"
        aria-labelledby$="[[_ariaLabelledBy]]"
        aria-describedby$="[[_ariaDescribedBy]]"
        disabled$="[[disabled]]"
        title$="[[title]]"
        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]]">
    </iron-input>
  </template>

</dom-module>

<script>
  Polymer({
    is: 'paper-input',

    behaviors: [
      Polymer.PaperInputBehavior,
      Polymer.IronFormElementBehavior
    ],

    beforeRegister: function() {
      // We need to tell which kind of of template to stamp based on
      // what kind of `iron-input` we got, but because of polyfills and
      // custom elements differences between v0 and v1, the safest bet is
      // to check a particular method we know the iron-input#2.x can have.
      // If it doesn't have it, then it's an iron-input#1.x.
      var ironInput = document.createElement('iron-input');
      var version = typeof ironInput._initSlottedInput == 'function' ? 'v1' : 'v0';
      var template = Polymer.DomModule.import('paper-input', 'template');
      var inputTemplate = Polymer.DomModule.import('paper-input', 'template#' + version);
      var inputPlaceholder = template.content.querySelector('#template-placeholder');
      inputPlaceholder.parentNode.replaceChild(inputTemplate.content, inputPlaceholder);
    },

    /**
     * Returns a reference to the focusable element. Overridden from PaperInputBehavior
     * to correctly focus the native input.
     */
    get _focusableElement() {
      return Polymer.Element ? this.inputElement._inputElement : this.inputElement;
    },

    // Note: This event is only available in the 1.0 version of this element.
    // In 2.0, the functionality of `_onIronInputReady` is done in
    // PaperInputBehavior::attached.
    listeners: {
      'iron-input-ready': '_onIronInputReady'
    },

    _onIronInputReady: function() {
      if (this.inputElement &&
          this._typesThatHaveText.indexOf(this.$.nativeInput.type) !== -1) {
        this.alwaysFloatLabel = true;
      }

      // Only validate when attached if the input already has a value.
      if (!!this.inputElement.bindValue) {
        this.$.container._handleValueAndAutoValidate(this.inputElement);
      }
    },
  });
</script>