polymer-paper-rails 0.2.0 → 0.2.5

data/app/assets/components/paper-icon-button/paper-icon-button.html

@@ -9,79 +9,146 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 <!--
 @group Paper Elements
-`paper-icon-button` is a button with an image placed at the center.
 
-Example:
-
-    <paper-icon-button iconSrc="star.png"></paper-icon-button>
+Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
 
-`paper-icon-button` includes a default icon set.  Use `icon` to specify 
-which icon from the icon set to use.
+`paper-icon-button` is a button with an image placed at the center. When the user touches
+the button, a ripple effect emanates from the center of the button.
 
-Example:
+`paper-icon-button` includes a default icon set.  Use `icon` to specify which icon
+from the icon set to use.
 
     <paper-icon-button icon="menu"></paper-icon-button>
 
-The icons provided by `core-icons` are SVG, and you can style them with CSS.
+See [`core-iconset`](#core-iconset) for more information about
+how to use a custom icon set.
 
 Example:
 
-    <paper-icon-button icon="favorite" style="fill:red;"></paper-icon-button>
+    <link href="path/to/core-icons/core-icons.html" rel="import">
+
+    <paper-icon-button icon="favorite"></paper-icon-button>
+    <paper-icon-button src="star.png"></paper-icon-button>
+
+Styling
+-------
+
+Style the button with CSS as you would a normal DOM element. If you are using the icons
+provided by `core-icons`, they will inherit the foreground color of the button.
+
+    /* make a red "favorite" button */
+    <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
 
-See `core-iconset` for more information about how to use a custom icon set.
+By default, the ripple is the same color as the foreground at 25% opacity. You may
+customize the color using this selector:
+
+    /* make #my-button use a blue ripple instead of foreground color */
+    #my-button::shadow #ripple {
+      color: blue;
+    }
+
+The opacity of the ripple is not customizable via CSS.
+
+Accessibility
+-------------
+
+The button is accessible by default if you use the `icon` property. By default, the
+`aria-label` attribute will be set to the `icon` property. If you use a custom icon,
+you should ensure that the `aria-label` attribute is set.
+
+    <paper-icon-button src="star.png" aria-label="star"></paper-icon-button>
 
 @element paper-icon-button
-@extends paper-button
+@extends paper-button-base
 @homepage github.io
 -->
 
+<link href="../polymer/polymer.html" rel="import">
 <link href="../core-icon/core-icon.html" rel="import">
-<link href="../paper-button/paper-button.html" rel="import">
+<link href="../core-icons/core-icons.html" rel="import">
+<link href="../paper-button/paper-button-base.html" rel="import">
+<link href="../paper-ripple/paper-ripple.html" rel="import">
 
-<polymer-element name="paper-icon-button" extends="paper-button" attributes="fill">
+<polymer-element name="paper-icon-button" extends="paper-button-base" attributes="src icon" role="button">
 
   <template>
 
-    <link href="paper-icon-button.css" rel="stylesheet">
+    <style>
+      :host {
+        display: inline-block;
+        position: relative;
+        padding: 8px;
+        outline: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        cursor: pointer;
+        z-index: 0;
+      }
+
+      :host([disabled]) {
+        color: #c9c9c9;
+        pointer-events: none;
+        cursor: auto;
+      }
 
-    <shadow></shadow>
+      #ripple {
+        pointer-events: none;
+        z-index: -1;
+      }
+
+      #icon {
+        display: block;
+        pointer-events: none;
+      }
+    </style>
+
+    <!-- to position to ripple behind the icon -->
+    <core-icon relative id="icon" src="{{src}}" icon="{{icon}}"></core-icon>
 
   </template>
 
   <script>
-  
-    Polymer('paper-icon-button', {
+    Polymer({
 
       publish: {
 
         /**
-         * If true, the ripple expands to a square to fill the containing box.
+         * The URL of an image for the icon. If the src property is specified,
+         * the icon property should not be.
          *
-         * @attribute fill
-         * @type boolean
-         * @default false
+         * @attribute src
+         * @type string
+         * @default ''
          */
-        fill: {value: false, reflect: true}
+        src: '',
 
-      },
+        /**
+         * Specifies the icon name or index in the set of icons available in
+         * the icon's icon set. If the icon property is specified,
+         * the src property should not be.
+         *
+         * @attribute icon
+         * @type string
+         * @default ''
+         */
+        icon: '',
 
-      ready: function() {
-        this.$.ripple.classList.add('recenteringTouch');
-        this.fillChanged();
-      },
+        recenteringTouch: true,
+        fill: false
 
-      fillChanged: function() {
-        this.$.ripple.classList.toggle('circle', !this.fill);
       },
 
       iconChanged: function(oldIcon) {
-        if (!this.label) {
+        var label = this.getAttribute('aria-label');
+        if (!label || label === oldIcon) {
           this.setAttribute('aria-label', this.icon);
         }
       }
 
     });
-    
+
   </script>
-  
+
 </polymer-element>

data/app/assets/components/paper-input/metadata.html

@@ -12,12 +12,9 @@
   <template>
     <paper-input label="Type something..."></paper-input>
   </template>
-  
+
   <template id="imports">
     <link rel="import" href="paper-input.html">
   </template>
 
-  <property name="validate" kind="string"></property>
-  <property name="error" kind="string"></property>
-  
 </x-meta>

data/app/assets/components/paper-input/paper-autogrow-textarea.html

@@ -0,0 +1,157 @@
+<!--
+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
+-->
+
+<!--
+`paper-autogrow-textarea` is an element containing a textarea that grows in height as more
+lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will
+never scroll.
+
+Example:
+
+    <paper-autogrow-textarea id="a1">
+        <textarea id="t1"></textarea>
+    <paper-autogrow-textarea>
+
+Because the `textarea`'s `value` property is not observable, if you set the `value` imperatively
+you must call `update` to notify this element the value has changed.
+
+Example:
+
+    /* using example HTML above */
+    t1.value = 'some\ntext';
+    a1.update();
+
+@group Paper Elements
+@element paper-autogrow-textarea
+@status unstable
+-->
+
+<link href="../polymer/polymer.html" rel="import">
+
+<polymer-element name="paper-autogrow-textarea" on-input="{{inputAction}}">
+<template>
+
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      width: 400px;
+    }
+
+    ::content textarea {
+      padding: 0;
+      margin: 0;
+      border: none;
+      outline: none;
+      resize: none;
+      /* see comments in template */
+      width: 100%;
+      height: 100%;
+    }
+
+    ::content textarea:invalid {
+      box-shadow: none;
+    }
+  </style>
+
+  <!-- the mirror sizes the input/textarea so it grows with typing -->
+  <div id="mirror" class="mirror-text" invisible aria-hidden="true">&nbsp;</div>
+
+  <!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
+  <div class="textarea-container" fit>
+    <content></content>
+  </div>
+
+</template>
+<script>
+
+  Polymer({
+
+    publish: {
+
+        /**
+         * The textarea that should auto grow.
+         *
+         * @attribute target
+         * @type HTMLTextAreaElement
+         * @default null
+         */
+        target: null,
+
+        /**
+         * The initial number of rows.
+         *
+         * @attribute rows
+         * @type number
+         * @default 1
+         */
+        rows: 1,
+
+        /**
+         * The maximum number of rows this element can grow to until it
+         * scrolls. 0 means no maximum.
+         *
+         * @attribute maxRows
+         * @type number
+         * @default 0
+         */
+        maxRows: 0
+    },
+
+    tokens: null,
+
+    observe: {
+      rows: 'updateCached',
+      maxRows: 'updateCached'
+    },
+
+    constrain: function(tokens) {
+      var _tokens;
+      tokens = tokens || [''];
+      // Enforce the min and max heights for a multiline input to avoid measurement
+      if (this.maxRows > 0 && tokens.length > this.maxRows) {
+        _tokens = tokens.slice(0, this.maxRows);
+      } else {
+        _tokens = tokens.slice(0);
+      }
+      while (this.rows > 0 && _tokens.length < this.rows) {
+        _tokens.push('');
+      }
+      return _tokens.join('<br>') + '&nbsp;';
+    },
+
+    valueForMirror: function(input) {
+      this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&amp;').replace(/"/gm, '&quot;').replace(/'/gm, '&#39;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;').split('\n') : [''];
+      return this.constrain(this.tokens);
+    },
+
+    /**
+     * Sizes this element to fit the input value. This function is automatically called
+     * when the user types in new input, but you must call this function if the value
+     * is updated imperatively.
+     *
+     * @method update
+     * @param Element The input
+     */
+    update: function(input) {
+      this.$.mirror.innerHTML = this.valueForMirror(input);
+    },
+
+    updateCached: function() {
+      this.$.mirror.innerHTML = this.constrain(this.tokens);
+    },
+
+    inputAction: function(e) {
+      this.update(e.target);
+    }
+
+  });
+
+</script>
+</polymer-element>

data/app/assets/components/paper-input/{paper-input.css → paper-input-decorator.css}

@@ -12,43 +12,45 @@
   display: inline-block;
   outline: none;
   text-align: inherit;
-  color: #757575;
   padding: 0.75em 0;
 }
 
-:host /deep/ input,
-:host /deep/ textarea {
-  font: inherit;
-  color: #000;
-  /* fit to the container for auto-resizing */
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
+polyfill-next-selector {
+  content: '.input-body > :not(.label):not(.cursor)';
+}
+::content > *,
+::content > input[is="core-input"] {
   padding: 0;
-  /* Important to use margin here so the margin remains visible
-   * when textarea scrolls internally. */
   margin: 0.5em 0 0.25em;
+  width: 100%;
+}
+
+polyfill-next-selector {
+  content: 'input, textarea';
+}
+::content input,
+::content input[is=core-input],
+::content textarea {
+  font: inherit;
+  color: inherit;
   background-color: transparent;
   border: none;
   outline: none;
-  width: 100%;
 }
 
-:host /deep/ input::hover,
-:host /deep/ textarea::hover {
-  cursor: text;
+polyfill-next-selector {
+  content: ':invalid';
 }
-
-input:invalid,
-textarea:invalid {
+::content input:invalid,
+::content textarea:invalid {
   box-shadow: none;
 }
 
-textarea {
+polyfill-next-selector {
+  content: 'textarea';
+}
+::content textarea {
   resize: none;
-  overflow: hidden;
 }
 
 [invisible] {
@@ -121,13 +123,11 @@ textarea {
 }
 
 :host([disabled]) .underline {
-  border-bottom: 1px dashed;
+  border-bottom: 1px dashed #757575;
 }
 
 .unfocused-underline {
   height: 1px;
-  background: #757575;
-  border-bottom-color: #757575;
 }
 
 .focused-underline {

data/app/assets/components/paper-input/paper-input-decorator.html

@@ -0,0 +1,468 @@
+<!--
+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</a>
+
+`paper-input-decorator` adds Material Design input field styling and animations to an element.
+
+Example:
+
+    <paper-input-decorator label="Your Name">
+        <input is="core-input">
+    </paper-input-decorator>
+
+    <paper-input-decorator floatingLabel label="Your address">
+        <textarea></textarea>
+    </paper-input-decorator>
+
+Theming
+-------
+
+`paper-input-decorator` uses `core-style` for global theming. The following options are available:
+
+- `CoreStyle.g.paperInput.labelColor` - The inline label, floating label, error message and error icon color when the input does not have focus.
+- `CoreStyle.g.paperInput.focusedColor` - The floating label and the underline color when the input has focus.
+- `CoreStyle.g.paperInput.cursorColor` - The cursor color during the focus animation. Typically this is the same as `focusedColor`.
+- `CoreStyle.g.paperInput.invalidColor` - The error message, the error icon, the cursor, the floating label and the underline's color when the input is invalid and has focus.
+
+To add custom styling to only some elements, use these selectors:
+
+    paper-input-decorator /deep/ .label-text,
+    paper-input-decorator /deep/ .error {
+        /* inline label,  floating label, error message and error icon color when the input is unfocused */
+        color: green;
+    }
+
+    paper-input-decorator /deep/ ::-webkit-input-placeholder {
+        /* platform specific rules for placeholder text */
+        color: green;
+    }
+    paper-input-decorator /deep/ ::-moz-placeholder {
+        color: green;
+    }
+    paper-input-decorator /deep/ :-ms-input-placeholder {
+        color: green;
+    }
+
+    paper-input-decorator /deep/ .unfocused-underline {
+        /* line color when the input is unfocused */
+        background-color: green;
+    }
+
+    paper-input-decorator[focused] /deep/ .floating-label .label-text {
+        /* floating label color when the input is focused */
+        color: orange;
+    }
+
+    paper-input-decorator /deep/ .focused-underline {
+        /* line color when the input is focused */
+        background-color: orange;
+    }
+
+    paper-input-decorator /deep/ .cursor {
+        /* cursor color during the focus transition */
+        background-color: orange;
+    }
+
+    paper-input-decorator.invalid[focused] /deep/ .floated-label .label-text,
+    paper-input-decorator[focused] /deep/ .error {
+        /* floating label, error message nad error icon color when the input is invalid and focused */
+        color: salmon;
+    }
+
+    paper-input-decorator.invalid /deep/ .focused-underline,
+    paper-input-decorator.invalid /deep/ .cursor {
+        /* line and cursor color when the input is invalid and focused */
+        background-color: salmon;
+    }
+
+Form submission
+---------------
+
+You can use inputs decorated with this element in a `form` as usual.
+
+Accessibility
+-------------
+
+`paper-input-decorator` will automatically set the `aria-label` attribute on the nested input
+to the value of `label`. Do not set the `placeholder` attribute on the nested input, as it will
+conflict with this element.
+
+@group Paper Elements
+@element paper-input-decorator
+@homepage github.io
+-->
+<link href="../polymer/polymer.html" rel="import">
+<link href="../core-icon/core-icon.html" rel="import">
+<link href="../core-icons/core-icons.html" rel="import">
+<link href="../core-input/core-input.html" rel="import">
+<link href="../core-style/core-style.html" rel="import">
+
+<core-style id="paper-input-decorator">
+
+.label-text,
+.error {
+  color: {{g.paperInput.labelColor}};
+}
+
+::-webkit-input-placeholder {
+  color: {{g.paperInput.labelColor}};
+}
+
+::-moz-placeholder {
+  color: {{g.paperInput.labelColor}};
+}
+
+:-ms-input-placeholder {
+  color: {{g.paperInput.labelColor}};
+}
+
+.unfocused-underline {
+  background-color: {{g.paperInput.labelColor}};
+}
+
+:host([focused]) .floated-label .label-text {
+  color: {{g.paperInput.focusedColor}};
+}
+
+.focused-underline {
+  background-color: {{g.paperInput.focusedColor}};
+}
+
+.cursor {
+  background-color: {{g.paperInput.cursorColor}};
+}
+
+:host(.invalid) .floated-label .label-text,
+.error {
+  color: {{g.paperInput.invalidColor}};
+}
+
+:host(.invalid) .unfocused-underline,
+:host(.invalid) .focused-underline,
+:host(.invalid) .cursor {
+  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}}">
+
+  <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>
+
+      <div class="cursor" invisible?="{{!cursorAnimated}}" animated?="{{cursorAnimated}}"></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>
+
+    <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>
+
+  (function() {
+
+    var paperInput = CoreStyle.g.paperInput = CoreStyle.g.paperInput || {};
+
+    paperInput.labelColor = '#757575';
+    paperInput.cursorColor = '#4059a9';
+    paperInput.focusedColor = '#4059a9';
+    paperInput.invalidColor = '#d34336';
+
+    Polymer({
+
+      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},
+
+        /**
+         * Use this property to override the automatic label visibility.
+         * If this property is set to `true` or `false`, the label visibility
+         * will respect this value instead of be based on whether there is
+         * a non-null value in the input.
+         *
+         * @attribute labelVisible
+         * @type boolean
+         * @default false
+         */
+        labelVisible: null,
+
+        /**
+         * Set this property to true to show the error message.
+         *
+         * @attribute isInvalid
+         * @type boolean
+         * @default false
+         */
+        isInvalid: 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}
+
+      },
+
+      computed: {
+        floatingLabelVisible: 'floatingLabel && !_labelVisible',
+        _labelVisible: '(labelVisible === true || labelVisible === false) ? labelVisible : _autoLabelVisible'
+      },
+
+      ready: function() {
+        // Delegate focus/blur events
+        Polymer.addEventListener(this, 'focus', this.focusAction.bind(this), true);
+        Polymer.addEventListener(this, 'blur', this.blurAction.bind(this), true);
+      },
+
+      attached: function() {
+        this.input = this.querySelector('input,textarea');
+
+        this.mo = new MutationObserver(function() {
+          this.input = this.querySelector('input,textarea');
+        }.bind(this));
+        this.mo.observe(this, {childList: true});
+      },
+
+      detached: function() {
+        this.mo.disconnect();
+        this.mo = null;
+      },
+
+      prepareLabelTransform: function() {
+        var toRect = this.$.floatedLabelText.getBoundingClientRect();
+        var fromRect = this.$.labelText.getBoundingClientRect();
+        if (toRect.width !== 0) {
+          var sy = toRect.height / fromRect.height;
+          this.$.labelText.cachedTransform =
+            'scale3d(' + (toRect.width / fromRect.width) + ',' + sy + ',1) ' +
+            'translate3d(0,' + (toRect.top - fromRect.top) / sy + 'px,0)';
+        }
+      },
+
+      animateFloatingLabel: function() {
+        if (!this.floatingLabel || this.labelAnimated) {
+          return;
+        }
+
+        if (!this.$.labelText.cachedTransform) {
+          this.prepareLabelTransform();
+        }
+
+        // If there's still no cached transform, the input is invisible so don't
+        // do the animation.
+        if (!this.$.labelText.cachedTransform) {
+          return;
+        }
+
+        this.labelAnimated = true;
+        // Handle interrupted animation
+        this.async(function() {
+          this.transitionEndAction();
+        }, null, 250);
+
+        if (this._labelVisible) {
+          // Handle if the label started out floating
+          if (!this.$.labelText.style.webkitTransform && !this.$.labelText.style.transform) {
+            this.$.labelText.style.webkitTransform = this.$.labelText.cachedTransform;
+            this.$.labelText.style.transform = this.$.labelText.cachedTransform;
+            this.$.labelText.offsetTop;
+          }
+          this.$.labelText.style.webkitTransform = '';
+          this.$.labelText.style.transform = '';
+        } else {
+          this.$.labelText.style.webkitTransform = this.$.labelText.cachedTransform;
+          this.$.labelText.style.transform = this.$.labelText.cachedTransform;
+          this.input.placeholder = '';
+        }
+
+      },
+
+      _labelVisibleChanged: function(old) {
+        // do not do the animation on first render
+        if (old !== undefined) {
+          this.animateFloatingLabel();
+        }
+      },
+
+      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);
+      },
+
+      inputChanged: function(old) {
+        if (this.input) {
+          this.updateLabelVisibility(this.input.value);
+          this.updateInputLabel(this.input, this.label);
+        }
+        if (old) {
+          this.updateInputLabel(old, '');
+        }
+      },
+
+      focusAction: function() {
+        this.focused = true;
+      },
+
+      blurAction: function(e) {
+        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);
+      },
+
+      downAction: 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;
+
+        // Cursor animation only runs if the input is empty
+        if (this._labelVisible) {
+          this.cursorAnimated = true;
+        }
+        // Handle interrupted animation
+        this.async(function() {
+          this.transitionEndAction();
+        }, null, 250);
+      },
+
+      transitionEndAction: function() {
+        this.underlineAnimated = false;
+        this.cursorAnimated = false;
+        this.labelAnimated = false;
+        if (this._labelVisible) {
+          this.input.placeholder = this.label;
+        }
+      }
+
+    });
+
+  }());
+
+  </script>
+
+</polymer-element>