Home | History | Annotate | Download | only in paper-input 
      1 <!--
      2 @license
      3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      7 Code distributed by Google as part of the polymer project is also
      8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
      9 -->
     10 
     11 <link rel="import" href="../polymer/polymer.html">
     12 <link rel="import" href="../iron-autogrow-textarea/iron-autogrow-textarea.html">
     13 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
     14 <link rel="import" href="paper-input-behavior.html">
     15 <link rel="import" href="paper-input-char-counter.html">
     16 <link rel="import" href="paper-input-container.html">
     17 <link rel="import" href="paper-input-error.html">
     18 
     19 <!--
     20 `<paper-textarea>` is a multi-line text field with Material Design styling.
     21 
     22     <paper-textarea label="Textarea label"></paper-textarea>
     23 
     24 See `Polymer.PaperInputBehavior` for more API docs.
     25 
     26 ### Validation
     27 
     28 Currently only `required` and `maxlength` validation is supported.
     29 
     30 ### Styling
     31 
     32 See `Polymer.PaperInputContainer` for a list of custom properties used to
     33 style this element.
     34 -->
     35 
     36 <dom-module id="paper-textarea">
     37   <template>
     38     <style>
     39       :host {
     40         display: block;
     41       }
     42 
     43       :host([hidden]) {
     44         display: none !important;
     45       }
     46     </style>
     47 
     48     <paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
     49 
     50       <label hidden$="[[!label]]" aria-hidden="true">[[label]]</label>
     51 
     52       <iron-autogrow-textarea id="input" class="paper-input-input"
     53         bind-value="{{value}}"
     54         disabled$="[[disabled]]"
     55         autocomplete$="[[autocomplete]]"
     56         autofocus$="[[autofocus]]"
     57         inputmode$="[[inputmode]]"
     58         name$="[[name]]"
     59         placeholder$="[[placeholder]]"
     60         readonly$="[[readonly]]"
     61         required$="[[required]]"
     62         maxlength$="[[maxlength]]"
     63         autocapitalize$="[[autocapitalize]]"
     64         rows$="[[rows]]"
     65         max-rows$="[[maxRows]]"
     66         on-change="_onChange"></iron-autogrow-textarea>
     67 
     68       <template is="dom-if" if="[[errorMessage]]">
     69         <paper-input-error>[[errorMessage]]</paper-input-error>
     70       </template>
     71 
     72       <template is="dom-if" if="[[charCounter]]">
     73         <paper-input-char-counter></paper-input-char-counter>
     74       </template>
     75 
     76     </paper-input-container>
     77   </template>
     78 </dom-module>
     79 
     80 <script>
     81   Polymer({
     82     is: 'paper-textarea',
     83 
     84     behaviors: [
     85       Polymer.PaperInputBehavior,
     86       Polymer.IronFormElementBehavior
     87     ],
     88 
     89     properties: {
     90       _ariaLabelledBy: {
     91         observer: '_ariaLabelledByChanged',
     92         type: String
     93       },
     94 
     95       _ariaDescribedBy: {
     96         observer: '_ariaDescribedByChanged',
     97         type: String
     98       },
     99 
    100       /**
    101        * The initial number of rows.
    102        *
    103        * @attribute rows
    104        * @type number
    105        * @default 1
    106        */
    107       rows: {
    108         type: Number,
    109         value: 1
    110       },
    111 
    112       /**
    113        * The maximum number of rows this element can grow to until it
    114        * scrolls. 0 means no maximum.
    115        *
    116        * @attribute maxRows
    117        * @type number
    118        * @default 0
    119        */
    120       maxRows: {
    121        type: Number,
    122        value: 0
    123       }
    124     },
    125 
    126     _ariaLabelledByChanged: function(ariaLabelledBy) {
    127       this.$.input.textarea.setAttribute('aria-labelledby', ariaLabelledBy);
    128     },
    129 
    130     _ariaDescribedByChanged: function(ariaDescribedBy) {
    131       this.$.input.textarea.setAttribute('aria-describedby', ariaDescribedBy);
    132     },
    133 
    134     get _focusableElement() {
    135       return this.$.input.textarea;
    136     },
    137   });
    138 </script>
    139