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