polymer-paper-rails 0.2.5 → 0.2.6

data/app/assets/components/paper-dialog/paper-dialog.html

@@ -62,7 +62,7 @@ By default, the `aria-label` will be set to the value of the `heading` attribute
 
 <link href="paper-dialog-base.html" rel="import">
 
-<polymer-element name="paper-dialog" extends="paper-dialog-base" role="dialog" noscript>
+<polymer-element name="paper-dialog" extends="paper-dialog-base" role="dialog" layout vertical noscript>
 
 <template>
 
@@ -88,7 +88,7 @@ By default, the `aria-label` will be set to the value of the `heading` attribute
   <paper-shadow z="3" fit></paper-shadow>
 
   <!-- need this because the host needs to be overflow: visible -->
-  <div id="scroller" relative>
+  <div id="scroller" relative flex auto>
     <template if="{{heading}}">
       <h1>{{heading}}</h1>
     </template>

data/app/assets/components/paper-dropdown-menu/paper-dropdown-menu.html

@@ -36,6 +36,7 @@ This example renders a drop-down menu with 4 options.
 @group Paper Elements
 @element paper-dropdown-menu
 @extends core-dropdown-base
+@mixins Polymer.CoreFocusable https://github.com/polymer/core-focusable
 @status unstable
 @homepage github.io
 -->
@@ -93,7 +94,7 @@ contains the selection state.
       outline: none;
     }
 
-    #label, #arrow {
+    #label:not(.selectedItem), #arrow {
       color: #757575;
     }
 
@@ -164,8 +165,10 @@ contains the selection state.
     selectAction: function(e) {
       var detail = e.detail;
       if (detail.isSelected) {
+        this.$.label.classList.add('selectedItem');
         this.selectedItemLabel = detail.item.label || detail.item.textContent;
       } else {
+        this.$.label.classList.remove('selectedItem');
         this.selectedItemLabel = '';
       }
     }

data/app/assets/components/{core-elements → paper-elements}/paper-elements.html

@@ -19,6 +19,7 @@ See `bower.json` for the complete list of components.
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../paper-button/paper-button.html">
 <link rel="import" href="../paper-checkbox/paper-checkbox.html">
+<link rel="import" href="../paper-dialog/paper-action-dialog.html">
 <link rel="import" href="../paper-dialog/paper-dialog.html">
 <link rel="import" href="../paper-dropdown/paper-dropdown.html">
 <link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">

data/app/assets/components/paper-fab/paper-fab.html

@@ -162,8 +162,8 @@ you should ensure that the `aria-label` attribute is set.
         mini: false,
 
         raised: true,
-        recenteringTouch: false,
-        fill: true
+        recenteringTouch: true,
+        fill: false
 
       },
 

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

@@ -16,7 +16,7 @@ Example:
 
     <paper-autogrow-textarea id="a1">
         <textarea id="t1"></textarea>
-    <paper-autogrow-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.
@@ -44,6 +44,11 @@ Example:
       width: 400px;
     }
 
+    .mirror-text {
+      visibility: hidden;
+      word-wrap: break-word;
+    }
+
     ::content textarea {
       padding: 0;
       margin: 0;
@@ -61,7 +66,7 @@ Example:
   </style>
 
   <!-- the mirror sizes the input/textarea so it grows with typing -->
-  <div id="mirror" class="mirror-text" invisible aria-hidden="true">&nbsp;</div>
+  <div id="mirror" class="mirror-text" 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>
@@ -154,4 +159,4 @@ Example:
   });
 
 </script>
-</polymer-element>
+</polymer-element>

data/app/assets/components/paper-input/paper-char-counter.html

@@ -0,0 +1,121 @@
+<!--
+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
+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-character-counter">Character counter</a>
+
+`paper-char-counter` adds a character counter for paper input fields with a character restriction in place.
+
+Example:
+
+    <paper-input-decorator>
+      <input id="input1" is="core-input" maxlength="5">
+      <paper-char-counter class="footer" target="input1"></paper-char-counter>
+    </paper-input-decorator>
+
+Theming
+-------
+
+`paper-char-counter` uses `paper-input-decorator`'s error `core-style` for global theming.
+
+@group Paper Elements
+@element paper-char-counter
+@homepage github.io
+-->
+<link href="../polymer/polymer.html" rel="import">
+<link href="../core-style/core-style.html" rel="import">
+
+<core-style id="paper-char-counter">
+:host(.invalid) {
+  color: {{g.paperInput.invalidColor}};
+}
+</core-style>
+
+<polymer-element name="paper-char-counter">
+
+<template>
+
+  <style>
+    :host {
+      display: inline-block;
+      float: right;
+      color: #757575;
+      font-size: 0.75em;
+      padding: 0.5em 0 0.5em 0.5em;
+    }
+  </style>
+
+  <core-style ref="paper-char-counter"></core-style>
+
+  <div class="counter-text" aria-hidden="true" hidden?="{{!showCounter || !_maxChars}}">
+    <span>{{_charCount}} / {{_maxChars}}</span>
+  </div>
+
+</template>
+
+<script>
+
+  Polymer({
+
+    publish: {
+      /**
+       * The id of the textinput or textarea that should be monitored.
+       *
+       * @attribute target
+       * @type string
+       * @default null
+       */
+      target: null,
+
+      /**
+       * If false, don't show the character counter. Used in conjunction with
+       * `paper-input-decorator's` `error` field.
+       *
+       * @attribute showCounter
+       * @type boolean
+       * @default true
+       */
+      showCounter: true
+    },
+
+    /* Number of characters in the current input */
+    _charCount: 0,
+
+    /* Equal to the target element's maxLength attribute. */
+    _maxChars: 0,
+
+    /* True if the number of characters in the input exceeds _maxChars */
+    _isCounterInvalid: false,
+
+    ready: function() {
+      if (!this.target)
+        return;
+      var targetElement = document.getElementById(this.target);
+      this._maxChars = targetElement.maxLength;
+      targetElement.addEventListener('input', this.inputAction.bind(this));
+		},
+
+    inputAction: function(e) {
+      this._charCount = e.target.value.length;
+      this._isCounterInvalid = this._maxChars && this._charCount >= this._maxChars;
+    },
+
+    _isCounterInvalidChanged: function() {
+      debugger
+      this.classList.toggle('invalid', this._isCounterInvalid);
+      this.fire('char-counter-error',
+                {"hasError": this._isCounterInvalid,
+                 "hideErrorIcon": this.showCounter});
+    }
+  });
+
+</script>
+
+</polymer-element>

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

@@ -16,7 +16,7 @@
 }
 
 polyfill-next-selector {
-  content: '.input-body > :not(.label):not(.cursor)';
+  content: '.input-body > :not(.label)';
 }
 ::content > *,
 ::content > input[is="core-input"] {
@@ -97,26 +97,6 @@ polyfill-next-selector {
   transform-origin: 0% 0%;
 }
 
-.cursor {
-  position: absolute;
-  top: 0.4em;
-  left: 0;
-  width: 1px;
-  height: 1.4em;
-  opacity: 0.4;
-  -moz-transform-origin: 0%;
-  -webkit-transform-origin: 0%;
-  transform-origin: 0%;
-  -webkit-transform: none;
-  transform: none;
-}
-
-.cursor[invisible] {
-  opacity: 0.75;
-  -webkit-transform: translate3d(3em,0,0) scale3d(50,1,1);
-  transform: translate3d(3em,0,0) scale3d(50,1,1);
-}
-
 .underline {
   height: 0px;
   overflow: visible;

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

@@ -30,8 +30,7 @@ Theming
 
 - `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.
+- `CoreStyle.g.paperInput.invalidColor` - The error message, the error icon, 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:
 
@@ -67,20 +66,14 @@ To add custom styling to only some elements, use these selectors:
         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 */
+    paper-input-decorator.invalid /deep/ .focused-underline {
+        /* line and color when the input is invalid and focused */
         background-color: salmon;
     }
 
@@ -89,6 +82,36 @@ Form submission
 
 You can use inputs decorated with this element in a `form` as usual.
 
+Validation
+----------
+
+Because you provide the `input` element to `paper-input-decorator`, you can use any validation library
+or the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">HTML5 Constraints Validation API</a>
+to implement validation. Set the `isInvalid` attribute when the input is validated, and provide an
+error message in the `error` attribute.
+
+Example:
+
+    <paper-input-decorator id="paper1" error="Value must start with a number!">
+        <input id="input1" is="core-input" pattern="^[0-9].*">
+    </paper-input-decorator>
+    <button onclick="validate()"></button>
+    <script>
+        function validate() {
+            var decorator = document.getElementById('paper1');
+            var input = document.getElementById('input1');
+            decorator.isInvalid = !input.validity.valid;
+        }
+    </script>
+
+Example to validate as the user types:
+
+    <template is="auto-binding">
+        <paper-input-decorator id="paper2" error="Value must start with a number!" isInvalid="{{!$.input2.validity.valid}}">
+            <input id="input2" is="core-input" pattern="^[0-9].*">
+        </paper-input-decorator>
+    </template>
+
 Accessibility
 -------------
 
@@ -137,18 +160,13 @@ conflict with this element.
   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 {
+:host(.invalid) .focused-underline {
   background-color: {{g.paperInput.invalidColor}};
 }
 
@@ -157,7 +175,9 @@ conflict with this element.
 <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}}"
+  on-char-counter-error="{{charCounterErrorAction}}">
 
   <template>
 
@@ -176,20 +196,23 @@ conflict with this element.
         <span id="labelText" class="label-text" invisible?="{{!_labelVisible}}" animated?="{{labelAnimated}}">{{label}}</span>
       </div>
 
-      <div class="cursor" invisible?="{{!cursorAnimated}}" animated?="{{cursorAnimated}}"></div>
-
-      <content></content>
+      <content select="*:not(.counter)"></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 class="footer" layout horizontal end-justified>
+      <div class="error" flex layout horizontal center hidden?="{{!isInvalid}}">
+        <div class="error-text" flex auto role="alert" aria-hidden="{{!isInvalid}}">{{error}}</div>
+        <core-icon id="errorIcon" class="error-icon" icon="warning"></core-icon>
+      </div>
+      <div aria-hidden="true">
+        <content select=".counter"></content>
+      </div>
     </div>
 
   </template>
@@ -201,7 +224,6 @@ conflict with this element.
     var paperInput = CoreStyle.g.paperInput = CoreStyle.g.paperInput || {};
 
     paperInput.labelColor = '#757575';
-    paperInput.cursorColor = '#4059a9';
     paperInput.focusedColor = '#4059a9';
     paperInput.invalidColor = '#d34336';
 
@@ -259,6 +281,17 @@ conflict with this element.
          */
         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
@@ -311,7 +344,7 @@ conflict with this element.
 
       animateFloatingLabel: function() {
         if (!this.floatingLabel || this.labelAnimated) {
-          return;
+          return false;
         }
 
         if (!this.$.labelText.cachedTransform) {
@@ -321,7 +354,7 @@ conflict with this element.
         // If there's still no cached transform, the input is invisible so don't
         // do the animation.
         if (!this.$.labelText.cachedTransform) {
-          return;
+          return false;
         }
 
         this.labelAnimated = true;
@@ -345,12 +378,47 @@ conflict with this element.
           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) {
-          this.animateFloatingLabel();
+          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;
         }
       },
 
@@ -366,12 +434,21 @@ conflict with this element.
 
       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, '');
@@ -382,7 +459,7 @@ conflict with this element.
         this.focused = true;
       },
 
-      blurAction: function(e) {
+      blurAction: function() {
         this.focused = false;
       },
 
@@ -412,11 +489,25 @@ conflict with this element.
         }
       },
 
-      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;
         }
@@ -429,34 +520,22 @@ conflict with this element.
           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;
         }
+      },
+
+      charCounterErrorAction: function(e) {
+        this.isInvalid = e.detail.hasError;
+
+        // If the allowed characters have been exceeded, show either the error
+        // icon, or the character counter, but not both.
+        this.$.errorIcon.hidden = e.detail.hideErrorIcon;
       }
 
     });