From f075543bcef585344ad4cbfbf287c08dbd81675c Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Mon, 10 Jun 2024 23:46:21 +0200
Subject: [PATCH] Various fixes and improvements

---
 tp-textarea.js | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

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`
-      <div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>
+      <div id="mirror" class="mirror-text" part="mirror" aria-hidden="true">&nbsp;</div>
 
-      <div class="wrap">
+      <div class="wrap" part="wrap">
         <slot></slot>
       </div>
 
-      <div class="error-message">${errorMessage}</div>
+      <div class="error-message" part="error-message">${errorMessage}</div>
     `;
   }
 
   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);