• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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    </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