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

Compare commits

base: tp-elements:main
Branches Tags
tp-elements:main
tp-elements:1.0.2
tp-elements:1.0.1
tp-elements:1.0.0
..
compare: tp-elements:1.0.0
Branches Tags
tp-elements:main
tp-elements:1.0.2
tp-elements:1.0.1
tp-elements:1.0.0

No commits in common. "main" and "1.0.0" have entirely different histories.
main ... 1.0.0

2 changed files with 18 additions and 19 deletions
Show Stats Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@tp/tp-textarea",
"version": "1.0.2",
"version": "1.0.0",
"description": "",
"main": "tp-textarea.js",
"scripts": {

35
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 TpTextarea extends FormElement(DomQuery(ControlState(LitElement))) {
class TpElement extends FormElement(DomQuery(LitElement)) {
static get styles() {
return [
css`
:host {
display: block;
display: inline-block;
position: relative;
width: 400px;
border: solid 1px #9E9E9E;
overflow: hidden;
}
@ -37,6 +37,7 @@ class TpTextarea extends FormElement(DomQuery(ControlState(LitElement))) {
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
background: #ffffff;
}
:host([invalid]) .error-message {
@ -49,13 +50,11 @@ class TpTextarea extends FormElement(DomQuery(ControlState(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) {
@ -83,41 +82,37 @@ class TpTextarea extends FormElement(DomQuery(ControlState(LitElement))) {
const { errorMessage } = this;
return html`
<div id="mirror" class="mirror-text" part="mirror" aria-hidden="true">&nbsp;</div>
<div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>
<div class="wrap" part="wrap">
<div class="wrap">
<slot></slot>
</div>
<div class="error-message" part="error-message">${errorMessage}</div>
<div class="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);
}
updated(changes) {
shouldUpdate(changes) {
if (changes.has('value')) {
this._syncToTextarea();
}
@ -125,6 +120,8 @@ class TpTextarea extends FormElement(DomQuery(ControlState(LitElement))) {
if (changes.has('readonly')) {
this._readOnlyChanged();
}
return true;
}
get textarea() {
@ -148,6 +145,8 @@ class TpTextarea extends FormElement(DomQuery(ControlState(LitElement))) {
// Empty, required input is invalid
if (this.required && this.value === '') {
valid = false;
} else if (this.hasValidator()) {
valid = IronValidatableBehavior.validate.call(this, this.value);
}
}
@ -211,4 +210,4 @@ class TpTextarea extends FormElement(DomQuery(ControlState(LitElement))) {
}
}
window.customElements.define('tp-textarea', TpTextarea);
window.customElements.define('tp-element', TpElement);