tp-elements/tp-textarea
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Various fixes and improvements

Browse Source
This commit is contained in:
trading_peter 2024-06-10 23:46:21 +02:00
parent ae5a604f5c
commit f075543bce
1 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
tp-textarea.js
View File

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