diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-input/paper-input-char-counter.html')
-rw-r--r-- | catapult/third_party/polymer/components/paper-input/paper-input-char-counter.html | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-input/paper-input-char-counter.html b/catapult/third_party/polymer/components/paper-input/paper-input-char-counter.html new file mode 100644 index 00000000..1a09a06d --- /dev/null +++ b/catapult/third_party/polymer/components/paper-input/paper-input-char-counter.html @@ -0,0 +1,99 @@ +<!-- +@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/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> |