third_party/polymer/v1_0/components/paper-input/paper-input-char-counter.html

   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/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-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 <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>