Merge pull request #19 from PolymerElements/add-behavior

add paper-input-behavior
PolymerElements · May 5, 2015 · 5902822 · 5902822
2 parents e4aaf12 + 7df1e85
commit 5902822
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 99 deletions.
diff --git a/paper-input-behavior.html b/paper-input-behavior.html
@@ -0,0 +1,123 @@
+<!--
+@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">
+
+<!--
+Use `Polymer.PaperInputBehavior` to implement your own `<paper-input>`.
+-->
+
+<script>
+
+  Polymer.PaperInputBehavior = {
+
+    properties: {
+
+      /**
+       * The label for this input.
+       */
+      label: {
+        type: String
+      },
+
+      /**
+       * The value for this input.
+       */
+      value: {
+        notify: true,
+        type: String
+      },
+
+      /**
+       * Set to true to disable this input.
+       */
+      disabled: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to prevent the user from entering invalid input.
+       */
+      preventInvalidInput: {
+        type: Boolean
+      },
+
+      /**
+       * The type of the input. The supported types are `text`, `number` and `password`.
+       */
+      type: {
+        type: String
+      },
+
+      /**
+       * A pattern to validate the `input` with.
+       */
+      pattern: {
+        type: String
+      },
+
+      /**
+       * Set to true to mark the input as required.
+       */
+      required: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * The maximum length of the input value.
+       */
+      maxlength: {
+        type: Number
+      },
+
+      /**
+       * The error message to display when the input is invalid.
+       */
+      errorMessage: {
+        type: String
+      },
+
+      /**
+       * Set to true to show a character counter.
+       */
+      charCounter: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to disable the floating label.
+       */
+      noLabelFloat: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to auto-validate the input value.
+       */
+      autoValidate: {
+        type: Boolean,
+        value: false
+      }
+
+    },
+
+    /**
+     * Returns a reference to the input element.
+     */
+    get inputElement() {
+      return this.$.input;
+    }
+
+  };
+
+</script>
diff --git a/paper-input.html b/paper-input.html
@@ -9,6 +9,7 @@
 -->
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../iron-input/iron-input.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">
@@ -51,105 +52,9 @@
 
     is: 'paper-input',
 
-    properties: {
-
-      /**
-       * The label for this input.
-       */
-      label: {
-        type: String
-      },
-
-      /**
-       * The value for this input.
-       */
-      value: {
-        notify: true,
-        type: String
-      },
-
-      /**
-       * Set to true to prevent the user from entering invalid input.
-       */
-      preventInvalidInput: {
-        type: Boolean
-      },
-
-      /**
-       * The type of the input. The supported types are `text`, `number` and `password`.
-       */
-      type: {
-        type: String
-      },
-
-      /**
-       * A pattern to validate the `input` with.
-       */
-      pattern: {
-        type: String
-      },
-
-      /**
-       * Set to true to mark the input as required.
-       */
-      required: {
-        type: Boolean,
-        value: false
-      },
-
-      /**
-       * The maximum length of the input value.
-       */
-      maxlength: {
-        type: Number
-      },
-
-      /**
-       * The error message to display when the input is invalid.
-       */
-      errorMessage: {
-        type: String
-      },
-
-      /**
-       * Set to true to show a character counter.
-       */
-      charCounter: {
-        type: Boolean,
-        value: false
-      },
-
-      /**
-       * Set to true to disable the floating label.
-       */
-      noLabelFloat: {
-        type: Boolean,
-        value: false
-      },
-
-      /**
-       * Set to true to auto-validate the input value.
-       */
-      autoValidate: {
-        type: Boolean,
-        value: false
-      },
-
-      /**
-       * Set to true to disable user interactions with the input.
-       */
-      disabled: {
-        type: Boolean,
-        value: false
-      }
-    },
-
-    /**
-     * Returns a reference to the input element.
-     */
-    get inputElement() {
-      return this.$.input;
-    }
+    behaviors: [
+      Polymer.PaperInputBehavior
+    ]
 
   })