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