WebCompDev / COMPONENTS

  <!--
  @license
  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.txt
  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  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.txt
  -->
  
  <link rel="import" href="../polymer/polymer.html">

  <link rel="import" href="../paper-styles/paper-styles.html">

  <link rel="import" href="paper-input-addon-behavior.html">
  
  <!--
  `<paper-input-char-counter>` is a character counter for use with `<paper-input-container>`. It
  shows the number of characters entered in the input and the max length if it is specified.
  
      <paper-input-container>
        <input is="iron-input" maxlength="20">
        <paper-input-char-counter></paper-input-char-counter>
      </paper-input-container>
  
  ### Styling
  
  The following mixin is available for styling:
  
  Custom property | Description | Default
  ----------------|-------------|----------
  `--paper-input-char-counter` | Mixin applied to the element | `{}`
  -->

  <dom-module id="paper-input-char-counter">

    <template>

      <style>
        :host {
          display: inline-block;
          float: right;

          @apply(--paper-font-caption);
          @apply(--paper-input-char-counter);
        }

  
        :host-context([dir="rtl"]) {
          float: left;
        }

      </style>

  
      <span>[[_charCounterStr]]</span>

    </template>

  </dom-module>
  
  <script>

    Polymer({

      is: 'paper-input-char-counter',
  
      behaviors: [
        Polymer.PaperInputAddonBehavior
      ],
  
      properties: {

        _charCounterStr: {
          type: String,
          value: '0'
        }

      },
  
      update: function(state) {
        if (!state.inputElement) {
          return;
        }
  
        state.value = state.value || '';
  
        // Account for the textarea's new lines.
        var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length;
  
        if (state.inputElement.hasAttribute('maxlength')) {
          str += '/' + state.inputElement.getAttribute('maxlength');
        }
        this._charCounterStr = str;
      }

    });

  </script>