paper-input.html

<!--
Copyright (c) 2014 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->

<!--

Material Design: <a href="http://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field">Single line text field</a>

`paper-input` is a single-line text field for user input. It is a convenience element composed of
a `paper-input-decorator` and a `input is="core-input"`.

Example:

    <paper-input label="Your Name"></paper-input>

If you need more control over the `input` element, use `paper-input-decorator`.

Theming
-------

`paper-input` can be styled similarly to `paper-input-decorator`.

Form submission
---------------

Unlike inputs using `paper-input-decorator` directly, `paper-input` does not work out of
the box with the native `form` element. This is because the native `form` is not aware of
shadow DOM and does not treat `paper-input` as a form element.

Use `paper-input-decorator` directly, or see
<a href="https://github.com/garstasio/ajax-form">`ajax-form`</a> for a possible solution
to submitting a `paper-input`.

Validation
----------

Use `paper-input-decorator` if you would like to implement validation.

@group Paper Elements
@element paper-input
@homepage github.io
-->
<link href="../polymer/polymer.html" rel="import">
<link href="../core-input/core-input.html" rel="import">

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

<polymer-element name="paper-input">

<template>

  <style>
    :host {
      display: inline-block;
    }
  </style>

  <paper-input-decorator id="decorator" label="{{label}}" floatingLabel="{{floatingLabel}}" value="{{value}}" disabled?="{{disabled}}">
    <input is="core-input" id="input" value="{{value}}" committedValue="{{committedValue}}" on-change="{{changeAction}}" disabled?="{{disabled}}">
  </paper-input-decorator>

</template>

<script>

  Polymer('paper-input', {

    publish: {
      /**
       * The label for this input. It normally appears as grey text inside
       * the text input and disappears once the user enters text.
       *
       * @attribute label
       * @type string
       * @default ''
       */
      label: '',

      /**
       * If true, the label will "float" above the text input once the
       * user enters text instead of disappearing.
       *
       * @attribute floatingLabel
       * @type boolean
       * @default false
       */
      floatingLabel: false,

      /**
       * Set to true to style the element as disabled.
       *
       * @attribute disabled
       * @type boolean
       * @default false
       */
      disabled: {value: false, reflect: true},

      /**
       * The current value of the input.
       *
       * @attribute value
       * @type String
       * @default ''
       */
      value: '',

      /**
       * The most recently committed value of the input.
       *
       * @attribute committedValue
       * @type String
       * @default ''
       */
      committedValue: ''

    },

    /**
     * Focuses the `input`.
     *
     * @method focus
     */
    focus: function() {
      this.$.input.focus();
    },

    valueChanged: function() {
      this.$.decorator.updateLabelVisibility(this.value);
    },

    changeAction: function(e) {
      // re-fire event that does not bubble across shadow roots
      this.fire('change', null, this);
    }

  });

</script>

</polymer-element>