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