146 lines
4.0 KiB
HTML
146 lines
4.0 KiB
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;
|
|
}
|
|
|
|
: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}}"
|
|
validator$="[[validator]]"
|
|
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>
|