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