Added Polymer 0.5.4

polymer_0.5.4/bower_components/paper-input/paper-input-decorator.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
 -->
 
 <!--
@@ skipping 157 matching lines @@
 :host(.invalid) .unfocused-underline,
 :host(.invalid) .focused-underline {
   background-color: {{g.paperInput.invalidColor}};
 }
 
 </core-style>
 
 <polymer-element name="paper-input-decorator" layout vertical
   on-transitionEnd="{{transitionEndAction}}" on-webkitTransitionEnd="{{transitionEndAction}}"
   on-input="{{inputAction}}"
-  on-down="{{downAction}}">
+  on-down="{{downAction}}"
+  on-tap="{{tapAction}}">
 
   <template>
 
     <link href="paper-input-decorator.css" rel="stylesheet">
     <core-style ref="paper-input-decorator"></core-style>
 
     <div class="floated-label" aria-hidden="true" hidden?="{{!floatingLabel}}" invisible?="{{!floatingLabelVisible || labelAnimated}}">
       <!-- needed for floating label animation measurement -->
       <span id="floatedLabelText" class="label-text">{{label}}</span>
     </div>
 
     <div class="input-body" flex auto relative>
 
       <div class="label" fit invisible aria-hidden="true">
         <!-- needed for floating label animation measurement -->
         <span id="labelText" class="label-text" invisible?="{{!_labelVisible}}" animated?="{{labelAnimated}}">{{label}}</span>
       </div>
 
       <content></content>
 
     </div>
 
     <div id="underline" class="underline" relative>
       <div class="unfocused-underline" fit invisible?="{{disabled}}"></div>
-      <div id="focusedUnderline" class="focused-underline" fit invisible?="{{!focused}}" animated?="{{underlineAnimated}}"></div>
+      <div id="focusedUnderline" class="focused-underline" fit invisible?="{{!underlineVisible}}" animated?="{{underlineAnimated}}"></div>
     </div>
 
     <div class="error" layout horizontal center hidden?="{{!isInvalid}}">
       <div class="error-text" flex auto role="alert" aria-hidden="{{!isInvalid}}">{{error}}</div>
       <core-icon class="error-icon" icon="warning"></core-icon>
     </div>
 
   </template>
 
   <script>
@@ skipping 54 matching lines @@
         /**
          * Set this property to true to show the error message.
          *
          * @attribute isInvalid
          * @type boolean
          * @default false
          */
         isInvalid: false,
 
         /**
+         * Set this property to true to validate the input as the user types.
+         * This will not validate when changing the input programmatically; call
+         * `validate()` instead.
+         *
+         * @attribute autoValidate
+         * @type boolean
+         * @default false
+         */
+        autoValidate: false,
+
+        /**
          * The message to display if the input value fails validation. If this
          * is unset or the empty string, a default message is displayed depending
          * on the type of validation error.
          *
          * @attribute error
          * @type string
          */
         error: '',
 
         focused: {value: false, reflect: true}
@@ skipping 68 matching lines @@
           this.$.labelText.style.transform = '';
         } else {
           this.$.labelText.style.webkitTransform = this.$.labelText.cachedTransform;
           this.$.labelText.style.transform = this.$.labelText.cachedTransform;
           this.input.placeholder = '';
         }
 
         return true;
       },
 
+      animateUnderline: function(e) {
+        if (this.focused) {
+          var rect = this.$.underline.getBoundingClientRect();
+          var right = e.x - rect.left;
+          this.$.focusedUnderline.style.mozTransformOrigin = right + 'px';
+          this.$.focusedUnderline.style.webkitTransformOrigin = right + 'px ';
+          this.$.focusedUnderline.style.transformOriginX = right + 'px';
+
+          // Animations only run when the user interacts with the input
+          this.underlineAnimated = true;
+        }
+      },
+
+      /**
+       * Validate the input using HTML5 Constraints.
+       *
+       * @method validate
+       * @return {boolean} True if the input is valid.
+       */
+      validate: function() {
+        this.isInvalid = !this.input.validity.valid;
+        return this.input.validity.valid;
+      },
+
       _labelVisibleChanged: function(old) {
         // do not do the animation on first render
         if (old !== undefined) {
           if (!this.animateFloatingLabel()) {
             this.updateInputLabel(this.input, this.label);
           }
         }
       },
 
       labelVisibleChanged: function() {
         if (this.labelVisible === 'true') {
           this.labelVisible = true;
         } else if (this.labelVisible === 'false') {
           this.labelVisible = false;
         }
       },
 
       labelChanged: function() {
         if (this.input) {
           this.updateInputLabel(this.input, this.label);
         }
       },
 
       isInvalidChanged: function() {
         this.classList.toggle('invalid', this.isInvalid);
       },
 
       focusedChanged: function() {
         this.updateLabelVisibility(this.input && this.input.value);
+        if (this.lastEvent) {
+          this.animateUnderline(this.lastEvent);
+          this.lastEvent = null;
+        }
+        this.underlineVisible = this.focused;
       },
 
       inputChanged: function(old) {
         if (this.input) {
           this.updateLabelVisibility(this.input.value);
           this.updateInputLabel(this.input, this.label);
+
+          if (this.autoValidate) {
+            this.validate();
+          }
         }
         if (old) {
           this.updateInputLabel(old, '');
         }
       },
 
       focusAction: function() {
         this.focused = true;
       },
 
-      blurAction: function(e) {
+      blurAction: function() {
         this.focused = false;
       },
 
       /**
        * Updates the label visibility based on a value. This is handled automatically
        * if the user is typing, but if you imperatively set the input value you need
        * to call this function.
        *
        * @method updateLabelVisibility
        * @param {string} value
        */
       updateLabelVisibility: function(value) {
         var v = (value !== null && value !== undefined) ? String(value) : value;
         this._autoLabelVisible = (!this.focused && !v) || (!this.floatingLabel && !v);
       },
 
       updateInputLabel: function(input, label) {
         if (this._labelVisible) {
           this.input.placeholder = this.label;
         } else {
           this.input.placeholder = '';
         }
         if (label) {
           input.setAttribute('aria-label', label);
         } else {
           input.removeAttribute('aria-label');
         }
       },
 
-      inputAction: function(e) {
-        this.updateLabelVisibility(e.target.value);
+      inputAction: function() {
+        this.updateLabelVisibility(this.input.value);
+        if (this.autoValidate) {
+          this.validate();
+        }
       },
 
       downAction: function(e) {
+        // eat the event and do nothing if already focused
+        if (e.target !== this.input && this.focused) {
+          e.preventDefault();
+          return;
+        }
+        // cache the event here because "down" fires before "focus" when tapping on
+        // the input and the underline animation runs on focus change
+        this.lastEvent = e;
+      },
+
+      tapAction: function(e) {
         if (this.disabled) {
           return;
         }
 
         if (this.focused) {
           return;
         }
 
         if (this.input) {
           this.input.focus();
           e.preventDefault();
         }
-
-        // The underline spills from the tap location
-        var rect = this.$.underline.getBoundingClientRect();
-        var right = e.x - rect.left;
-        this.$.focusedUnderline.style.mozTransformOrigin = right + 'px';
-        this.$.focusedUnderline.style.webkitTransformOrigin = right + 'px ';
-        this.$.focusedUnderline.style.transformOriginX = right + 'px';
-
-        // Animations only run when the user interacts with the input
-        this.underlineAnimated = true;
-
-        // Handle interrupted animation
-        this.async(function() {
-          this.transitionEndAction();
-        }, null, 250);
       },
 
       transitionEndAction: function() {
         this.underlineAnimated = false;
         this.labelAnimated = false;
         if (this._labelVisible) {
           this.input.placeholder = this.label;
         }
       }
 
     });
 
   }());
 
   </script>
 
 </polymer-element>