<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 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}}"
      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>