paper-textarea.html

<!--
@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;
      }
    </style>

    <paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">

      <content select="[prefix]"></content>

      <label hidden$="[[!label]]" aria-hidden="true">[[label]]</label>

      <iron-autogrow-textarea id="input" class="paper-input-input"
        bind-value="{{value}}"
        disabled$="[[disabled]]"
        autocomplete$="[[autocomplete]]"
        autofocus$="[[autofocus]]"
        inputmode$="[[inputmode]]"
        name$="[[name]]"
        placeholder$="[[placeholder]]"
        readonly$="[[readonly]]"
        required$="[[required]]"
        maxlength$="[[maxlength]]"
        autocapitalize$="[[autocapitalize]]"
        rows$="[[rows]]"
        max-rows$="[[maxRows]]"
        on-change="_onChange"></iron-autogrow-textarea>

      <content select="[suffix]"></content>

      <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>