First version

tp-textarea.js

@@ -0,0 +1,213 @@
+/**
+@license
+Copyright (c) 2024 trading_peter
+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 { LitElement, html, css } from 'lit';
+
+class TpElement extends FormElement(DomQuery(LitElement)) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: inline-block;
+          position: relative;
+          width: 400px;
+          border: solid 1px #9E9E9E;
+          overflow: hidden;
+        }
+
+        :host([invalid]) {
+          border: solid 1px #B71C1C;
+        }
+
+        .error-message {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          font-size: 10px;
+          color: var(--tp-textarea-text-color-invalid, #B71C1C);
+          transition: opacity 0.3s;
+          opacity: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          pointer-events: none;
+          background: #ffffff;
+        }
+
+        :host([invalid]) .error-message {
+          opacity: 1;
+        }
+
+        .wrap {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+        }
+
+        .mirror-text {
+          visibility: hidden;
+          word-wrap: break-word;
+        }
+
+        .wrap ::slotted(textarea) {
+          position: relative;
+          outline: none;
+          border: none;
+          resize: none;
+          background: inherit;
+          color: inherit;
+          width: 100%;
+          height: 100%;
+          font-size: inherit;
+          font-family: inherit;
+          line-height: inherit;
+          text-align: inherit;
+          box-sizing: border-box;
+          overflow: hidden;
+          padding: 0;
+        }
+      `
+    ];
+  }
+
+  render() {
+    const { errorMessage } = this;
+
+    return html`
+      <div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>
+
+      <div class="wrap">
+        <slot></slot>
+      </div>
+
+      <div class="error-message">${errorMessage}</div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      readonly: { type: Boolean },
+      errorMessage: { type: String },
+      invalid: { type: Boolean, reflect: true },
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.addEventListener('input', this.onInput);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('input', this.onInput);
+  }
+
+  shouldUpdate(changes) {
+    if (changes.has('value')) {
+      this._syncToTextarea();
+    }
+
+    if (changes.has('readonly')) {
+      this._readOnlyChanged();
+    }
+
+    return true;
+  }
+
+  get textarea() {
+    return this.querySelector('textarea');
+  }
+
+  get selectionStart() {
+    return this.textarea.selectionStart;
+  }
+
+  get selectionEnd() {
+    return this.textarea.selectionEnd;
+  }
+
+  validate() {
+    // Use the nested input's native validity.
+    let valid = this.textarea.validity.valid;
+
+    // Only do extra checking if the browser thought this was valid.
+    if (valid) {
+      // Empty, required input is invalid
+      if (this.required && this.value === '') {
+        valid = false;
+      } else if (this.hasValidator()) {
+        valid = IronValidatableBehavior.validate.call(this, this.value);
+      }
+    }
+
+    this.invalid = !valid;
+    return valid;
+  }
+
+  reset() {
+    this.value = '';
+    this.textarea.value = '';
+    this.invalid = false;
+  }
+
+  _syncToTextarea() {
+    if (typeof this.value !== 'string') {
+      return this.value = '';
+    }
+
+    if (this.textarea) {
+      this.textarea.value = this.value || '';
+      this.$.mirror.innerHTML = this._valueForMirror();
+    }
+  }
+
+  _readOnlyChanged(state) {
+    this.textarea.readOnly = state;
+  }
+
+  _onInput() {
+    this.$.mirror.innerHTML = this._valueForMirror();
+    this.value = this.textarea.value;
+  }
+
+  _constrain(tokens) {
+    let _tokens;
+    tokens = tokens || [''];
+    // Enforce the min and max heights for a multiline input to avoid measurement
+    if (this.maxRows > 0 && tokens.length > this.maxRows) {
+      _tokens = tokens.slice(0, this.maxRows);
+    } else {
+      _tokens = tokens.slice(0);
+    }
+    while (this.rows > 0 && _tokens.length < this.rows) {
+      _tokens.push('');
+    }
+    // Use &#160; instead &nbsp; of to allow this element to be used in XHTML.
+    return _tokens.join('<br/>') + '&#160;';
+  }
+
+  _valueForMirror() {
+    const input = this.textarea;
+    if (!input) {
+      return;
+    }
+    this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&amp;').replace(/"/gm, '&quot;').replace(/'/gm, '&#39;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;').split('\n') : [''];
+    return this._constrain(this.tokens);
+  }
+
+  _updateCached() {
+    this.$.mirror.innerHTML = this._constrain(this.tokens);
+  }
+}
+
+window.customElements.define('tp-element', TpElement);