RubyGems - polymer-paper-rails - Versions diffs - 0.1.0 → 0.2.0 - Mend

polymer-paper-rails 0.1.0 → 0.2.0

Files changed (558) hide show

data/app/assets/components/core-iconset-svg/demo.html ADDED Viewed

@@ -0,0 +1,66 @@
+<!doctype 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.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
+-->
+<html>
+<head>
+  <title>core-iconset-svg</title>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="svg-sample-icons.html">
+  <style shim-shadowdom>
+    .embiggen core-icon {
+      height: 128px;
+      width: 128px;
+    }
+    core-icon:nth-of-type(1) {
+      fill: orange;
+    }
+    core-icon:nth-of-type(2) {
+      fill: green;
+      stroke: orange;
+    }
+    core-icon:nth-of-type(3) {
+      fill: navy;
+    }
+    core-icon {
+      transition: all 0.5s;
+      -webkit-transition: all 0.5s;
+    }
+    core-icon:hover {
+      -webkit-filter: drop-shadow( 2px 2px 2px #333 );
+      filter: drop-shadow( 2px 2px 2px #333 );
+    }
+  </style>
+</head>
+<body unresolved>
+  <template is="auto-binding">
+    <div class="embiggen">
+      <template repeat="{{icon in icons}}">
+        <core-icon icon="{{icon}}"></core-icon>
+      </template>
+    </div>
+    <core-meta id="meta" type="iconset"></core-meta>
+  </template>
+  <script>
+    addEventListener('template-bound', function(e) {
+      var template = e.target;
+      var setName = 'svg-sample-icons';
+      var icons = template.$.meta.byId(setName).iconNames;
+      template.icons = icons.map(function(ic){ return setName + ':' +ic });
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/core-iconset-svg/index.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!doctype 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
+-->
+<html>
+<head>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../core-component-page/core-component-page.html">
+</head>
+<body unresolved>
+  <core-component-page></core-component-page>
+</body>
+</html>

data/app/assets/components/core-iconset-svg/svg-sample-icons.html ADDED Viewed

@@ -0,0 +1,68 @@
+<!--
+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.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="../core-icon/core-icon.html">
+<link rel="import" href="core-iconset-svg.html">
+<core-iconset-svg id="svg-sample-icons" iconSize="100">
+  <svg>
+    <defs>
+    <g id="codepen">
+      <path class="outer-ring"  d="M50,0C22.385,0,0,22.385,0,50c0,27.615,22.385,50,50,50c27.614,0,50-22.385,50-50C100,22.385,77.615,0,50,0z M50,91.789
+      C26.958,91.789,8.212,73.042,8.212,50C8.212,26.958,26.958,8.212,50,8.212c23.042,0,41.788,18.747,41.788,41.789
+      C91.788,73.042,73.042,91.789,50,91.789z"></path>
+      <path class="inner-logo"  d="M80.893,40.234c-0.006-0.039-0.016-0.076-0.022-0.115c-0.013-0.075-0.027-0.15-0.046-0.223
+      c-0.012-0.044-0.028-0.086-0.042-0.128c-0.021-0.065-0.042-0.13-0.068-0.193c-0.018-0.044-0.039-0.088-0.059-0.13
+      c-0.028-0.06-0.057-0.119-0.09-0.175c-0.024-0.042-0.051-0.083-0.076-0.124c-0.036-0.055-0.073-0.109-0.112-0.161
+      c-0.029-0.039-0.06-0.078-0.091-0.115c-0.042-0.049-0.086-0.098-0.132-0.143c-0.035-0.036-0.069-0.072-0.106-0.104
+      c-0.049-0.044-0.099-0.086-0.15-0.127c-0.04-0.031-0.079-0.062-0.12-0.091c-0.016-0.01-0.029-0.023-0.044-0.033L51.474,19.531
+      c-0.893-0.595-2.055-0.595-2.947,0L20.267,38.371c-0.015,0.01-0.028,0.023-0.044,0.033c-0.042,0.029-0.081,0.06-0.12,0.091
+      c-0.052,0.041-0.102,0.083-0.15,0.127c-0.037,0.032-0.071,0.068-0.106,0.104c-0.046,0.045-0.09,0.094-0.132,0.143
+      c-0.031,0.038-0.062,0.077-0.092,0.115c-0.039,0.052-0.076,0.106-0.111,0.161c-0.027,0.041-0.052,0.082-0.076,0.124
+      c-0.033,0.057-0.062,0.115-0.09,0.175c-0.021,0.042-0.042,0.086-0.06,0.13c-0.026,0.063-0.047,0.128-0.068,0.193
+      c-0.014,0.042-0.029,0.084-0.042,0.128c-0.02,0.073-0.032,0.148-0.046,0.223c-0.006,0.039-0.016,0.076-0.021,0.115
+      c-0.016,0.114-0.024,0.229-0.024,0.346V59.42c0,0.117,0.009,0.233,0.024,0.348c0.005,0.038,0.015,0.077,0.021,0.114
+      c0.014,0.075,0.027,0.149,0.046,0.223c0.012,0.043,0.028,0.086,0.042,0.128c0.021,0.065,0.042,0.13,0.068,0.195
+      c0.018,0.044,0.039,0.086,0.06,0.129c0.028,0.06,0.058,0.118,0.09,0.177c0.024,0.041,0.049,0.082,0.076,0.122
+      c0.035,0.056,0.072,0.109,0.111,0.161c0.029,0.041,0.061,0.078,0.092,0.115c0.042,0.049,0.086,0.098,0.132,0.144
+      c0.035,0.036,0.069,0.071,0.106,0.104c0.048,0.044,0.099,0.086,0.15,0.127c0.039,0.031,0.078,0.062,0.12,0.091
+      c0.016,0.01,0.029,0.023,0.044,0.032l28.259,18.84c0.446,0.297,0.96,0.447,1.474,0.447c0.513,0,1.027-0.149,1.473-0.447
+      l28.259-18.84c0.015-0.009,0.028-0.022,0.044-0.032c0.042-0.029,0.081-0.06,0.12-0.091c0.051-0.041,0.102-0.083,0.15-0.127
+      c0.037-0.033,0.071-0.068,0.106-0.104c0.046-0.046,0.09-0.095,0.132-0.144c0.031-0.037,0.062-0.075,0.091-0.115
+      c0.04-0.052,0.076-0.105,0.112-0.161c0.025-0.041,0.051-0.081,0.076-0.122c0.033-0.059,0.062-0.117,0.09-0.177
+      c0.02-0.042,0.041-0.085,0.059-0.129c0.026-0.065,0.047-0.13,0.068-0.195c0.014-0.042,0.03-0.085,0.042-0.128
+      c0.02-0.074,0.033-0.148,0.046-0.223c0.006-0.037,0.016-0.076,0.022-0.114c0.014-0.115,0.023-0.231,0.023-0.348V40.581
+      C80.916,40.464,80.907,40.348,80.893,40.234z M52.657,26.707l20.817,13.877l-9.298,6.221l-11.519-7.706V26.707z M47.343,26.707
+      v12.393l-11.518,7.706l-9.299-6.221L47.343,26.707z M24.398,45.554L31.046,50l-6.648,4.446V45.554z M47.343,73.294L26.525,59.417
+      l9.299-6.219l11.518,7.704V73.294z M50,56.286L40.603,50L50,43.715L59.397,50L50,56.286z M52.657,73.294V60.902l11.519-7.704
+      l9.298,6.219L52.657,73.294z M75.602,54.447L68.955,50l6.647-4.446V54.447z"></path>
+    </g>
+    <path id="twitter" d="M100.001,17.942c-3.681,1.688-7.633,2.826-11.783,3.339
+    c4.236-2.624,7.49-6.779,9.021-11.73c-3.965,2.432-8.354,4.193-13.026,5.146C80.47,10.575,75.138,8,69.234,8
+    c-11.33,0-20.518,9.494-20.518,21.205c0,1.662,0.183,3.281,0.533,4.833c-17.052-0.884-32.168-9.326-42.288-22.155
+    c-1.767,3.133-2.778,6.773-2.778,10.659c0,7.357,3.622,13.849,9.127,17.65c-3.363-0.109-6.525-1.064-9.293-2.651
+    c-0.002,0.089-0.002,0.178-0.002,0.268c0,10.272,7.072,18.845,16.458,20.793c-1.721,0.484-3.534,0.744-5.405,0.744
+    c-1.322,0-2.606-0.134-3.859-0.379c2.609,8.424,10.187,14.555,19.166,14.726c-7.021,5.688-15.867,9.077-25.48,9.077
+    c-1.656,0-3.289-0.102-4.895-0.297C9.08,88.491,19.865,92,31.449,92c37.737,0,58.374-32.312,58.374-60.336
+    c0-0.92-0.02-1.834-0.059-2.743C93.771,25.929,97.251,22.195,100.001,17.942L100.001,17.942z"></path>
+    <g id="youtube">
+      <path class="youtube"  d="M98.77,27.492c-1.225-5.064-5.576-8.799-10.811-9.354C75.561,16.818,63.01,15.993,50.514,16
+      c-12.495-0.007-25.045,0.816-37.446,2.139c-5.235,0.557-9.583,4.289-10.806,9.354C0.522,34.704,0.5,42.574,0.5,50.001
+      c0,7.426,0,15.296,1.741,22.509c1.224,5.061,5.572,8.799,10.807,9.352c12.399,1.32,24.949,2.145,37.446,2.14
+      c12.494,0.005,25.047-0.817,37.443-2.14c5.234-0.555,9.586-4.291,10.81-9.352c1.741-7.213,1.753-15.083,1.753-22.509
+      S100.51,34.704,98.77,27.492 M67.549,52.203L43.977,64.391c-2.344,1.213-4.262,0.119-4.262-2.428V38.036
+      c0-2.548,1.917-3.644,4.262-2.429l23.572,12.188C69.896,49.008,69.896,50.992,67.549,52.203"></path>
+    </g>
+    </defs>
+  </svg>
+</core-iconset-svg>

data/app/assets/components/core-input/README.md ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ core-input
2	+ ==========

data/app/assets/components/core-input/bower.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "name": "core-input",
+  "dependencies": {
+    "polymer": "Polymer/polymer#>=0.4.0 <1.0.0"
+  }
+}

data/app/assets/components/core-input/core-input.css ADDED Viewed

@@ -0,0 +1,45 @@
+/*
+ * @license
+ * 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.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
+ */
+:host {
+  display: inline-block;
+  text-align: inherit;
+  color: #ccc;
+  position: relative;
+  width: 20em;
+}
+:host:hover {
+  cursor: text;
+}
+input,
+textarea {
+  font: inherit;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+}
+textarea {
+  resize: none;
+}
+textarea[fit] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

data/app/assets/components/{core/input/core-input.html.erb → core-input/core-input.html} RENAMED Viewed

@@ -18,27 +18,37 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
  *
  *     <core-input multiline placeholder="Enter multiple lines here"></core-input>
  *
- * The text input's value is considered "committed" if the user hits the `enter`
- * key or blurs the input after changing the value. The "change" event is fired
+ * The text input's value is considered "committed" if the user hits the "enter"
+ * key or blurs the input after changing the value. The `change` event is fired
  * when the value becomes committed, and the committed value is stored in the
- * "value" property. The current value of the input is stored in the "inputValue"
+ * `value` property. The current value of the input is stored in the `inputValue`
  * property.
  *
- * core-input also can optionally validate the value by providing it with a
- * regular expression to match against, or a validation function. The
- * "input-invalid" event is fired if the input value changes and is invalid.
- * The "invalid" property is also available for observation.
+ * Validation
+ * ----------
+ *
+ * core-input can optionally validate the value using the HTML5 constraints API,
+ * similar to native inputs. There are two methods to configure input validation:
+ *
+ * 1. By setting the `type` attribute. For example, setting it to `email` will
+ *    check the value is a valid email, and setting it to `number` will check
+ *    the input is a number.
+ *
+ * 2. By setting attributes related to validation. The attributes are `pattern`,
+ *    `min`, `max`, `step` and `required`.
+ *
+ * Only `required` is supported for multiline inputs currently.
  *
  * Example:
  *
- *     // valid only if the value is a number
- *     <core-input validate="^[0-9]*$" on-input-invalid="{{inputInvalidAction}}"></core-input>
+ *     <core-input type="email" placeholder="enter your email"></core-input>
+ *
+ *     <core-input type="number" min="5" placeholder="enter a number greater than or equal to 5"></core-input>
  *
- *     this.$.input.validate = /^[0-9]*$/;  // valid only if the value is a number
+ *     <core-input pattern=".*abc.*" placeholder="enter something containing 'abc'"></core-input>
  *
- *     this.$.input2.validate = function(value) {
- *       return value === 'foo';  // valid only if the value is 'foo'
- *     }
+ * See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
+ * for more info on validation.
  *
  * @group Polymer Core Elements
  * @element core-input
@@ -76,19 +86,20 @@ Fired when the inputValue of this text input changes and passes validation.
 @param {Object} detail
 @param {string} value The text input's inputValue.
 -->
+<link href="../polymer/polymer.html" rel="import">
 <polymer-element name="core-input" on-focus="{{focusAction}}">
   <template>
-    <%= stylesheet_link_tag "core/input/core-input" %>
+    <link href="core-input.css" rel="stylesheet">
     <template if="{{multiline}}">
-      <textarea id="input" value="{{inputValue}}" rows="{{rows}}" fit?="{{rows === 'fit'}}" disabled?="{{disabled}}" placeholder="{{placeholder}}" required?="{{required}}" readonly?="{{readonly}}" aria-label="{{label || placeholder}}" aria-invalid="{{invalid}}" on-change="{{inputChangeAction}}" on-focus="{{inputFocusAction}}" on-blur="{{inputBlurAction}}"></textarea>
+      <textarea id="input" value="{{inputValue}}" rows="{{rows}}" fit?="{{rows === 'fit'}}" disabled?="{{disabled}}" placeholder="{{placeholder}}" autofocus?="{{autofocus}}" required?="{{required}}" readonly?="{{readonly}}" maxlength="{{maxlength}}" aria-label="{{label || placeholder}}" aria-invalid="{{invalid}}" on-change="{{inputChangeAction}}" on-focus="{{inputFocusAction}}" on-blur="{{inputBlurAction}}"></textarea>
     </template>
     <template if="{{!multiline}}">
-      <input id="input" value="{{inputValue}}" disabled?="{{disabled}}" type="{{type}}" placeholder="{{placeholder}}" required?="{{required}}" readonly?="{{readonly}}" aria-label="{{label || placeholder}}" aria-invalid="{{invalid}}" on-change="{{inputChangeAction}}" on-focus="{{inputFocusAction}}" on-blur="{{inputBlurAction}}">
+      <input id="input" value="{{inputValue}}" disabled?="{{disabled}}" type="{{type}}" placeholder="{{placeholder}}" autofocus?="{{autofocus}}" required?="{{required}}" readonly?="{{readonly}}" pattern="{{pattern}}" min="{{min}}" max="{{max}}" step="{{step}}" maxlength="{{maxlength}}" aria-label="{{label || placeholder}}" aria-invalid="{{invalid}}" on-keypress="{{keypressAction}}" on-change="{{inputChangeAction}}" on-focus="{{inputFocusAction}}" on-blur="{{inputBlurAction}}">
     </template>
   </template>
@@ -106,7 +117,7 @@ Fired when the inputValue of this text input changes and passes validation.
          * @default ''
          */
         placeholder: '',
         /**
          * If true, this input cannot be focused and the user cannot change
          * its value.
@@ -116,16 +127,7 @@ Fired when the inputValue of this text input changes and passes validation.
          * @default false
          */
         disabled: false,
-        /**
-         * Set the input type. Not supported for `multiline`.
-         *
-         * @attribute type
-         * @type string
-         * @default text
-         */
-        type: 'text',
         /**
          * If true, the user cannot modify the value of the input.
          *
@@ -136,13 +138,13 @@ Fired when the inputValue of this text input changes and passes validation.
         readonly: false,
         /**
-         * If true, the input is invalid until the value becomes non-null.
+         * If true, this input will automatically gain focus on page load.
          *
-         * @attribute required
+         * @attribute autofocus
          * @type boolean
          * @default false
          */
-        required: false,
+        autofocus: false,
         /**
          * If true, this input accepts multi-line input like a `<textarea>`
@@ -152,7 +154,7 @@ Fired when the inputValue of this text input changes and passes validation.
          * @default false
          */
         multiline: false,
         /**
          * (multiline only) The height of this text input in rows. The input
          * will scroll internally if more input is entered beyond the size
@@ -165,7 +167,7 @@ Fired when the inputValue of this text input changes and passes validation.
          * @default 'fit'
          */
         rows: 'fit',
         /**
          * The current value of this input. Changing inputValue programmatically
          * will cause value to be out of sync. Instead, change value directly
@@ -176,7 +178,7 @@ Fired when the inputValue of this text input changes and passes validation.
          * @default ''
          */
         inputValue: '',
         /**
          * The value of the input committed by the user, either by changing the
          * inputValue and blurring the input, or by hitting the `enter` key.
@@ -188,35 +190,72 @@ Fired when the inputValue of this text input changes and passes validation.
         value: '',
         /**
-         * If this property is not null, the text input's inputValue will be
-         * validated. You can validate the value with either a regular expression
-         * or a custom function.
+         * Set the input type. Not supported for `multiline`.
          *
-         * To use a regular expression, set this property to a RegExp object or
-         * a string containing the regular expression to match against. To use a
-         * custom validator, set this property to a function with the signature
-         * function(value) that returns a boolean. The input is valid if the
-         * function returns true.
+         * @attribute type
+         * @type string
+         * @default text
+         */
+        type: 'text',
+        /**
+         * If true, the input is invalid if its value is null.
          *
-         * Example:
+         * @attribute required
+         * @type boolean
+         * @default false
+         */
+        required: false,
+        /**
+         * A regular expression to validate the input value against. See
+         * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
+         * for more info. Not supported if `multiline` is true.
          *
-         *     // valid only if the value is a number
-         *     <core-input validate="^[0-9]*$"></core-input>
+         * @attribute pattern
+         * @type string
+         * @default '.*'
+         */
+        // FIXME(yvonne): The default is set to .* because we can't bind to pattern such
+        // that the attribute is unset if pattern is null.
+        pattern: '.*',
+        /**
+         * If set, the input is invalid if the value is less than this property. See
+         * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
+         * for more info. Not supported if `multiline` is true.
          *
-         *     // valid only if the value is a number
-         *     this.$.input.validate = /^[0-9]*$/;
+         * @attribute min
+         */
+        min: null,
+        /**
+         * If set, the input is invalid if the value is greater than this property. See
+         * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
+         * for more info. Not supported if `multiline` is true.
          *
-         *     this.$.input2.validate = function(value) {
-         *         // valid only if the value is 'foo'
-         *         return value === 'foo';
-         *     }
+         * @attribute max
+         */
+        max: null,
+        /**
+         * If set, the input is invalid if the value is not `min` plus an integral multiple
+         * of this property. See
+         * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
+         * for more info. Not supported if `multiline` is true.
          *
-         * @attribute validate
-         * @type string|RegExp|Function(value)
-         * @default null
+         * @attribute step
          */
-        validate: null,
+        step: null,
+        /**
+         * The maximum length of the input value.
+         *
+         * @attribute maxlength
+         * @type number
+         */
+        maxlength: null,
         /**
          * If this property is true, the text input's inputValue failed validation.
          *
@@ -225,42 +264,37 @@ Fired when the inputValue of this text input changes and passes validation.
          * @default false
          */
         invalid: false,
+        /**
+         * If this property is true, validate the input as they are entered.
+         *
+         * @attribute validateImmediately
+         * @type boolean
+         * @default true
+         */
+        validateImmediately: true
       },
       ready: function() {
         this.handleTabindex(this.getAttribute('tabindex'));
       },
-      validateValue: function() {
-        var valid = true;
-        if (this.validate) {
-          if (!this.inputValue) {
-            valid = !this.required;
-          } else if (typeof this.validate === 'string') {
-            valid = new RegExp(this.validate).exec(this.inputValue);
-          } else if (this.validate.exec) {
-            valid = this.validate.exec(this.inputValue);
-          } else if (this.validate instanceof Function) {
-            valid = this.validate.call(this, this.inputValue);
-          }
-        } else if (this.required) {
-          valid = !!this.inputValue;
+      disabledChanged: function() {
+        if (this.disabled) {
+          this.setAttribute('aria-disabled', true);
+        } else {
+          this.removeAttribute('aria-disabled');
         }
-        this.invalid = !valid;
       },
       invalidChanged: function() {
         this.classList.toggle('invalid', this.invalid);
-        this.fire('input-'+ this.invalid ? 'invalid' : 'valid', {value: this.inputValue});
+        this.fire('input-'+ (this.invalid ? 'invalid' : 'valid'), {value: this.inputValue});
       },
       inputValueChanged: function() {
-        if (this.validate || this.required) {
-          this.validateValue();
+        if (this.validateImmediately) {
+          this.updateValidity_();
         }
       },
@@ -269,7 +303,9 @@ Fired when the inputValue of this text input changes and passes validation.
       },
       requiredChanged: function() {
-        this.validateValue();
+        if (this.validateImmediately) {
+          this.updateValidity_();
+        }
       },
       attributeChanged: function(attr, oldVal, curVal) {
@@ -295,6 +331,23 @@ Fired when the inputValue of this text input changes and passes validation.
          this.value = this.inputValue;
       },
+      updateValidity_: function() {
+        if (this.$.input.willValidate) {
+          this.invalid = !this.$.input.validity.valid;
+        }
+      },
+      keypressAction: function(e) {
+        // disallow non-numeric input if type = number
+        if (this.type !== 'number') {
+          return;
+        }
+        var c = String.fromCharCode(e.charCode);
+        if (!c.match(/[\d-\.e]/)) {
+          e.preventDefault();
+        }
+      },
       inputChangeAction: function() {
         this.commit();
         if (!window.ShadowDOMPolyfill) {
@@ -346,40 +399,56 @@ Fired when the inputValue of this text input changes and passes validation.
         this.$.input.focus();
       },
-      setSelectionRange: function( selectionStart, selectionEnd, selectionDirection ) {
+      setSelectionRange: function(selectionStart, selectionEnd, selectionDirection) {
         // forward setSelectionRange method to the internal input / textarea element
-        this.$.input.setSelectionRange( selectionStart, selectionEnd, selectionDirection );
+        this.$.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
       },
-      setRangeText: function( replacement, start, end, selectMode ) {
+      setRangeText: function(replacement, start, end, selectMode) {
         // forward setRangeText method to the internal input element
-        if ( !this.multiline ) {
-          this.$.input.setRangeText( replacement, start, end, selectMode );
+        if (!this.multiline) {
+          this.$.input.setRangeText(replacement, start, end, selectMode);
         }
       },
-      stepDown: function( n ) {
+      stepDown: function(n) {
         // forward stepDown method to the internal input element
-        if ( !this.multiline ) {
-          this.$.input.stepDown( n );
+        if (!this.multiline) {
+          this.$.input.stepDown(n);
         }
       },
-      stepUp: function( n ) {
+      stepUp: function(n) {
         // forward stepUp method to the internal input element
-        if ( !this.multiline ) {
-          this.$.input.stepUp( n );
+        if (!this.multiline) {
+          this.$.input.stepUp(n);
         }
+      },
+      get willValidate() {
+        return this.$.input.willValidate;
+      },
+      get validity() {
+        return this.$.input.validity;
+      },
+      get validationMessage() {
+        return this.$.input.validationMessage;
+      },
+      checkValidity: function() {
+        var r = this.$.input.checkValidity();
+        this.updateValidity_();
+        return r;
+      },
+      setCustomValidity: function(message) {
+        this.$.input.setCustomValidity(message);
+        this.updateValidity_();
       }
     });
-    CoreInput = function() {
-      return document.createElement('core-input');
-    };
-    CoreInput.validate = {
-      number: /^[0-9]*$/
-    };
   </script>
 </polymer-element>