| Index: third_party/polymer/v0_8/components/paper-input/paper-input-char-counter.html
|
| diff --git a/third_party/polymer/v0_8/components/paper-input/paper-input-char-counter.html b/third_party/polymer/v0_8/components/paper-input/paper-input-char-counter.html
|
| index 38c3c77beb3f2ef807e3f89ab6dd10ddf84d9c53..566f8c63ff82e6de5de06cc60968c1afe4204f5b 100644
|
| --- a/third_party/polymer/v0_8/components/paper-input/paper-input-char-counter.html
|
| +++ b/third_party/polymer/v0_8/components/paper-input/paper-input-char-counter.html
|
| @@ -10,9 +10,24 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
|
| <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>`.
|
| +`<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">
|
|
|
| @@ -22,17 +37,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| display: inline-block;
|
| float: right;
|
|
|
| - mixin(--paper-input-container-add-on);
|
| - mixin(--paper-input-container-add-on-font);
|
| -
|
| - mixin(--paper-input-char-counter);
|
| + @apply(--paper-font-caption);
|
| + @apply(--paper-input-char-counter);
|
| }
|
|
|
| </style>
|
|
|
| <template>
|
|
|
| - <span>[[charCounter]]</span>
|
| + <span>[[_charCounterStr]]</span>
|
|
|
| </template>
|
|
|
| @@ -46,48 +59,33 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
|
| is: 'paper-input-char-counter',
|
|
|
| - enableCustomStyleProperties: true,
|
| -
|
| - hostAttributes: {
|
| - 'add-on': ''
|
| - },
|
| + behaviors: [
|
| + Polymer.PaperInputAddonBehavior
|
| + ],
|
|
|
| properties: {
|
|
|
| - /**
|
| - * The associated input element.
|
| - */
|
| - inputElement: {
|
| - type: Object
|
| - },
|
| -
|
| - /**
|
| - * The current value of the input element.
|
| - */
|
| - value: {
|
| - type: String
|
| - },
|
| -
|
| - /**
|
| - * The character counter string.
|
| - */
|
| - charCounter: {
|
| - computed: '_computeCharCounter(inputElement,value)',
|
| - type: String
|
| + _charCounterStr: {
|
| + type: String,
|
| + value: '0'
|
| }
|
|
|
| },
|
|
|
| - attached: function() {
|
| - this.fire('addon-attached');
|
| - },
|
| + 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;
|
|
|
| - _computeCharCounter: function(inputElement,value) {
|
| - var str = value.length;
|
| - if (inputElement.hasAttribute('maxlength')) {
|
| - str += '/' + inputElement.maxLength;
|
| + if (state.inputElement.hasAttribute('maxlength')) {
|
| + str += '/' + state.inputElement.getAttribute('maxlength');
|
| }
|
| - return str;
|
| + this._charCounterStr = str;
|
| }
|
|
|
| });
|
|
|