| OLD | NEW | 
 | (Empty) | 
|   1 <!-- |  | 
|   2 @license |  | 
|   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |  | 
|   4 This code may only be used under the BSD style license found at http://polymer.g
    ithub.io/LICENSE.txt |  | 
|   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |  | 
|   6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
    BUTORS.txt |  | 
|   7 Code distributed by Google as part of the polymer project is also |  | 
|   8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
    TS.txt |  | 
|   9 --> |  | 
|  10  |  | 
|  11 <link rel="import" href="../polymer/polymer.html"> |  | 
|  12 <link rel="import" href="../paper-styles/paper-styles.html"> |  | 
|  13 <link rel="import" href="paper-input-addon-behavior.html"> |  | 
|  14  |  | 
|  15 <!-- |  | 
|  16 `<paper-input-char-counter>` is a character counter for use with `<paper-input-c
    ontainer>`. It |  | 
|  17 shows the number of characters entered in the input and the max length if it is 
    specified. |  | 
|  18  |  | 
|  19     <paper-input-container> |  | 
|  20       <input is="iron-input" maxlength="20"> |  | 
|  21       <paper-input-char-counter></paper-input-char-counter> |  | 
|  22     </paper-input-container> |  | 
|  23  |  | 
|  24 ### Styling |  | 
|  25  |  | 
|  26 The following mixin is available for styling: |  | 
|  27  |  | 
|  28 Custom property | Description | Default |  | 
|  29 ----------------|-------------|---------- |  | 
|  30 `--paper-input-char-counter` | Mixin applied to the element | `{}` |  | 
|  31 --> |  | 
|  32 <dom-module id="paper-input-char-counter"> |  | 
|  33  |  | 
|  34   <style> |  | 
|  35  |  | 
|  36     :host { |  | 
|  37       display: inline-block; |  | 
|  38       float: right; |  | 
|  39  |  | 
|  40       @apply(--paper-font-caption); |  | 
|  41       @apply(--paper-input-char-counter); |  | 
|  42     } |  | 
|  43  |  | 
|  44   </style> |  | 
|  45  |  | 
|  46   <template> |  | 
|  47  |  | 
|  48     <span>[[_charCounterStr]]</span> |  | 
|  49  |  | 
|  50   </template> |  | 
|  51  |  | 
|  52 </dom-module> |  | 
|  53  |  | 
|  54 <script> |  | 
|  55  |  | 
|  56 (function() { |  | 
|  57  |  | 
|  58   Polymer({ |  | 
|  59  |  | 
|  60     is: 'paper-input-char-counter', |  | 
|  61  |  | 
|  62     behaviors: [ |  | 
|  63       Polymer.PaperInputAddonBehavior |  | 
|  64     ], |  | 
|  65  |  | 
|  66     properties: { |  | 
|  67  |  | 
|  68       _charCounterStr: { |  | 
|  69         type: String, |  | 
|  70         value: '0' |  | 
|  71       } |  | 
|  72  |  | 
|  73     }, |  | 
|  74  |  | 
|  75     update: function(state) { |  | 
|  76       if (!state.inputElement) { |  | 
|  77         return; |  | 
|  78       } |  | 
|  79  |  | 
|  80       state.value = state.value || ''; |  | 
|  81  |  | 
|  82       // Account for the textarea's new lines. |  | 
|  83       var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length; |  | 
|  84  |  | 
|  85       if (state.inputElement.hasAttribute('maxlength')) { |  | 
|  86         str += '/' + state.inputElement.getAttribute('maxlength'); |  | 
|  87       } |  | 
|  88       this._charCounterStr = str; |  | 
|  89     } |  | 
|  90  |  | 
|  91   }); |  | 
|  92  |  | 
|  93 })(); |  | 
|  94  |  | 
|  95 </script> |  | 
| OLD | NEW |