Home | History | Annotate | Download | only in paper-input 
      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.github.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/CONTRIBUTORS.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/PATENTS.txt
      9 -->
     10 
     11 <link rel="import" href="../polymer/polymer.html">
     12 <link rel="import" href="../paper-styles/typography.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-container>`. 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 
     33 <dom-module id="paper-input-char-counter">
     34   <template>
     35     <style>
     36       :host {
     37         display: inline-block;
     38         float: right;
     39 
     40         @apply(--paper-font-caption);
     41         @apply(--paper-input-char-counter);
     42       }
     43 
     44       :host([hidden]) {
     45         display: none !important;
     46       }
     47 
     48       :host-context([dir="rtl"]) {
     49         float: left;
     50       }
     51     </style>
     52 
     53     <span>[[_charCounterStr]]</span>
     54   </template>
     55 </dom-module>
     56 
     57 <script>
     58   Polymer({
     59     is: 'paper-input-char-counter',
     60 
     61     behaviors: [
     62       Polymer.PaperInputAddonBehavior
     63     ],
     64 
     65     properties: {
     66       _charCounterStr: {
     67         type: String,
     68         value: '0'
     69       }
     70     },
     71 
     72     /**
     73      * This overrides the update function in PaperInputAddonBehavior.
     74      * @param {{
     75      *   inputElement: (Element|undefined),
     76      *   value: (string|undefined),
     77      *   invalid: boolean
     78      * }} state -
     79      *     inputElement: The input element.
     80      *     value: The input value.
     81      *     invalid: True if the input value is invalid.
     82      */
     83     update: function(state) {
     84       if (!state.inputElement) {
     85         return;
     86       }
     87 
     88       state.value = state.value || '';
     89 
     90       var counter = state.value.toString().length.toString();
     91 
     92       if (state.inputElement.hasAttribute('maxlength')) {
     93         counter += '/' + state.inputElement.getAttribute('maxlength');
     94       }
     95 
     96       this._charCounterStr = counter;
     97     }
     98   });
     99 </script>
    100