| <!-- |
| @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="../iron-autogrow-textarea/iron-autogrow-textarea.html"> |
| <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html"> |
| <link rel="import" href="paper-input-behavior.html"> |
| <link rel="import" href="paper-input-char-counter.html"> |
| <link rel="import" href="paper-input-container.html"> |
| <link rel="import" href="paper-input-error.html"> |
| |
| <!-- |
| `<paper-textarea>` is a multi-line text field with Material Design styling. |
| |
| <paper-textarea label="Textarea label"></paper-textarea> |
| |
| See `Polymer.PaperInputBehavior` for more API docs. |
| |
| ### Validation |
| |
| Currently only `required` and `maxlength` validation is supported. |
| |
| ### Styling |
| |
| See `Polymer.PaperInputContainer` for a list of custom properties used to |
| style this element. |
| --> |
| |
| <dom-module id="paper-textarea"> |
| <template> |
| <style> |
| :host { |
| display: block; |
| } |
| |
| :host([hidden]) { |
| display: none !important; |
| } |
| |
| label { |
| pointer-events: none; |
| } |
| </style> |
| |
| <paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]"> |
| |
| <label hidden$="[[!label]]" aria-hidden="true">[[label]]</label> |
| |
| <iron-autogrow-textarea id="input" class="paper-input-input" |
| bind-value="{{value}}" |
| invalid="{{invalid}}" |
| validator$="[[validator]]" |
| disabled$="[[disabled]]" |
| autocomplete$="[[autocomplete]]" |
| autofocus$="[[autofocus]]" |
| inputmode$="[[inputmode]]" |
| name$="[[name]]" |
| placeholder$="[[placeholder]]" |
| readonly$="[[readonly]]" |
| required$="[[required]]" |
| minlength$="[[minlength]]" |
| maxlength$="[[maxlength]]" |
| autocapitalize$="[[autocapitalize]]" |
| rows$="[[rows]]" |
| max-rows$="[[maxRows]]" |
| on-change="_onChange"></iron-autogrow-textarea> |
| |
| <template is="dom-if" if="[[errorMessage]]"> |
| <paper-input-error>[[errorMessage]]</paper-input-error> |
| </template> |
| |
| <template is="dom-if" if="[[charCounter]]"> |
| <paper-input-char-counter></paper-input-char-counter> |
| </template> |
| |
| </paper-input-container> |
| </template> |
| </dom-module> |
| |
| <script> |
| Polymer({ |
| is: 'paper-textarea', |
| |
| behaviors: [ |
| Polymer.PaperInputBehavior, |
| Polymer.IronFormElementBehavior |
| ], |
| |
| properties: { |
| _ariaLabelledBy: { |
| observer: '_ariaLabelledByChanged', |
| type: String |
| }, |
| |
| _ariaDescribedBy: { |
| observer: '_ariaDescribedByChanged', |
| type: String |
| }, |
| |
| /** |
| * The initial number of rows. |
| * |
| * @attribute rows |
| * @type number |
| * @default 1 |
| */ |
| rows: { |
| type: Number, |
| value: 1 |
| }, |
| |
| /** |
| * The maximum number of rows this element can grow to until it |
| * scrolls. 0 means no maximum. |
| * |
| * @attribute maxRows |
| * @type number |
| * @default 0 |
| */ |
| maxRows: { |
| type: Number, |
| value: 0 |
| } |
| }, |
| |
| _ariaLabelledByChanged: function(ariaLabelledBy) { |
| this.$.input.textarea.setAttribute('aria-labelledby', ariaLabelledBy); |
| }, |
| |
| _ariaDescribedByChanged: function(ariaDescribedBy) { |
| this.$.input.textarea.setAttribute('aria-describedby', ariaDescribedBy); |
| }, |
| |
| get _focusableElement() { |
| return this.$.input.textarea; |
| }, |
| }); |
| </script> |