<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 polymer.github.io/PATENTS.txt –>

<link rel=“import” href=“../polymer/polymer.html”> <link rel=“import” href=“../paper-styles/typography.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([hidden]) {
      display: none !important;
    }

    :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'
    }
  },

  /**
   * This overrides the update function in PaperInputAddonBehavior.
   * @param {{
   *   inputElement: (Element|undefined),
   *   value: (string|undefined),
   *   invalid: boolean
   * }} state -
   *     inputElement: The input element.
   *     value: The input value.
   *     invalid: True if the input value is invalid.
   */
  update: function(state) {
    if (!state.inputElement) {
      return;
    }

    state.value = state.value || '';

    var counter = state.value.toString().length.toString();

    if (state.inputElement.hasAttribute('maxlength')) {
      counter += '/' + state.inputElement.getAttribute('maxlength');
    }

    this._charCounterStr = counter;
  }
});

</script>