npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

polymer_0.5.0/bower_components/paper-input/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" 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: ''
+
+    },
+
+    valueChanged: function() {
+      this.$.decorator.updateLabelVisibility(this.value);
+    },
+
+    changeAction: function(e) {
+      if (!window.ShadowDOMPolyfill) {
+        // re-fire event that does not bubble across shadow roots
+        this.fire('change', null, this);
+      }
+    }
+
+  });
+
+</script>
+
+</polymer-element>