1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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
24See `Polymer.PaperInputBehavior` for more API docs.
25
26### Validation
27
28Currently only `required` and `maxlength` validation is supported.
29
30### Styling
31
32See `Polymer.PaperInputContainer` for a list of custom properties used to
33style 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
47      label {
48        pointer-events: none;
49      }
50    </style>
51
52    <paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
53
54      <label hidden$="[[!label]]" aria-hidden="true">[[label]]</label>
55
56      <iron-autogrow-textarea id="input" class="paper-input-input"
57        bind-value="{{value}}"
58        invalid="{{invalid}}"
59        validator$="[[validator]]"
60        disabled$="[[disabled]]"
61        autocomplete$="[[autocomplete]]"
62        autofocus$="[[autofocus]]"
63        inputmode$="[[inputmode]]"
64        name$="[[name]]"
65        placeholder$="[[placeholder]]"
66        readonly$="[[readonly]]"
67        required$="[[required]]"
68        minlength$="[[minlength]]"
69        maxlength$="[[maxlength]]"
70        autocapitalize$="[[autocapitalize]]"
71        rows$="[[rows]]"
72        max-rows$="[[maxRows]]"
73        on-change="_onChange"></iron-autogrow-textarea>
74
75      <template is="dom-if" if="[[errorMessage]]">
76        <paper-input-error>[[errorMessage]]</paper-input-error>
77      </template>
78
79      <template is="dom-if" if="[[charCounter]]">
80        <paper-input-char-counter></paper-input-char-counter>
81      </template>
82
83    </paper-input-container>
84  </template>
85</dom-module>
86
87<script>
88  Polymer({
89    is: 'paper-textarea',
90
91    behaviors: [
92      Polymer.PaperInputBehavior,
93      Polymer.IronFormElementBehavior
94    ],
95
96    properties: {
97      _ariaLabelledBy: {
98        observer: '_ariaLabelledByChanged',
99        type: String
100      },
101
102      _ariaDescribedBy: {
103        observer: '_ariaDescribedByChanged',
104        type: String
105      },
106
107      /**
108       * The initial number of rows.
109       *
110       * @attribute rows
111       * @type number
112       * @default 1
113       */
114      rows: {
115        type: Number,
116        value: 1
117      },
118
119      /**
120       * The maximum number of rows this element can grow to until it
121       * scrolls. 0 means no maximum.
122       *
123       * @attribute maxRows
124       * @type number
125       * @default 0
126       */
127      maxRows: {
128       type: Number,
129       value: 0
130      }
131    },
132
133    _ariaLabelledByChanged: function(ariaLabelledBy) {
134      this.$.input.textarea.setAttribute('aria-labelledby', ariaLabelledBy);
135    },
136
137    _ariaDescribedByChanged: function(ariaDescribedBy) {
138      this.$.input.textarea.setAttribute('aria-describedby', ariaDescribedBy);
139    },
140
141    get _focusableElement() {
142      return this.$.input.textarea;
143    },
144  });
145</script>
146