diff --git a/tp-textarea.js b/tp-textarea.js
index 7c3b520..5d03a37 100644
--- a/tp-textarea.js
+++ b/tp-textarea.js
@@ -6,16 +6,16 @@ This program is available under Apache License Version 2.0
import { FormElement } from '@tp/helpers/form-element.js';
import { DomQuery } from '@tp/helpers/dom-query.js';
+import { ControlState } from '@tp/helpers/control-state.js';
import { LitElement, html, css } from 'lit';
-class TpElement extends FormElement(DomQuery(LitElement)) {
+class TpTextarea extends FormElement(DomQuery(ControlState(LitElement))) {
static get styles() {
return [
css`
:host {
- display: inline-block;
+ display: block;
position: relative;
- width: 400px;
border: solid 1px #9E9E9E;
overflow: hidden;
}
@@ -50,11 +50,13 @@ class TpElement extends FormElement(DomQuery(LitElement)) {
left: 0;
right: 0;
bottom: 0;
+ padding: var(--tp-textarea-padding, 0);
}
.mirror-text {
visibility: hidden;
word-wrap: break-word;
+ padding: var(--tp-textarea-padding, 0);
}
.wrap ::slotted(textarea) {
@@ -82,37 +84,41 @@ class TpElement extends FormElement(DomQuery(LitElement)) {
const { errorMessage } = this;
return html`
-
+
-
+
-
${errorMessage}
+
${errorMessage}
`;
}
static get properties() {
return {
readonly: { type: Boolean },
+ required: { type: Boolean },
errorMessage: { type: String },
invalid: { type: Boolean, reflect: true },
};
}
+ constructor() {
+ super();
+ this.value = '';
+ }
+
connectedCallback() {
super.connectedCallback();
-
- this.addEventListener('input', this.onInput);
+ this.addEventListener('input', this._onInput);
}
disconnectedCallback() {
super.disconnectedCallback();
-
- this.removeEventListener('input', this.onInput);
+ this.removeEventListener('input', this._onInput);
}
- shouldUpdate(changes) {
+ updated(changes) {
if (changes.has('value')) {
this._syncToTextarea();
}
@@ -120,8 +126,6 @@ class TpElement extends FormElement(DomQuery(LitElement)) {
if (changes.has('readonly')) {
this._readOnlyChanged();
}
-
- return true;
}
get textarea() {
@@ -145,8 +149,6 @@ class TpElement extends FormElement(DomQuery(LitElement)) {
// Empty, required input is invalid
if (this.required && this.value === '') {
valid = false;
- } else if (this.hasValidator()) {
- valid = IronValidatableBehavior.validate.call(this, this.value);
}
}
@@ -210,4 +212,4 @@ class TpElement extends FormElement(DomQuery(LitElement)) {
}
}
-window.customElements.define('tp-element', TpElement);
+window.customElements.define('tp-textarea', TpTextarea);