diff --git a/package.json b/package.json index fbeb94c..ba53157 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tp/tp-input", - "version": "1.0.6", + "version": "1.1.0", "description": "", "main": "tp-input.js", "scripts": { diff --git a/tp-input.js b/tp-input.js index 94b0c15..f020e11 100644 --- a/tp-input.js +++ b/tp-input.js @@ -7,13 +7,11 @@ This program is available under Apache License Version 2.0 import { LitElement, html, css } from 'lit'; import { FormElement } from '@tp/helpers/form-element.js'; import { EventHelpers } from '@tp/helpers/event-helpers.js'; -import { ControlState } from '@tp/helpers/control-state.js'; import { Inert } from '@tp/helpers/inert.js'; const mixins = [ FormElement, EventHelpers, - ControlState, Inert ]; @@ -82,10 +80,12 @@ class TpInput extends BaseElement { .prefix ::slotted([slot="prefix"]) { padding-right: 5px; + white-space: nowrap; } .suffix ::slotted([slot="suffix"]) { padding-left: 5px; + white-space: nowrap; } ` ]; @@ -115,9 +115,6 @@ class TpInput extends BaseElement { // The value for this element. value: { type: String }, - // If true the control can't be edited. - disabled: { type: Boolean, reflect: true }, - // If true, something invalid was entered. invalid: { type: Boolean, reflect: true }, @@ -163,6 +160,10 @@ class TpInput extends BaseElement { readonly: { type: Boolean, reflect: true }, + focused: { type: Boolean, reflect: true }, + + disabled: { type: Boolean, reflect: true }, + /* @private */ _previousValidInput: { type: String, value: '' } }; @@ -192,6 +193,8 @@ class TpInput extends BaseElement { return; } + this.listen(this.inputEl, 'focus', '_onFocus'); + this.listen(this.inputEl, 'blur', '_onBlur'); this.listen(this.inputEl, 'input', '_onInput'); this.listen(this.inputEl, 'keypress', '_onKeypress'); @@ -218,6 +221,14 @@ class TpInput extends BaseElement { } } + shouldUpdate(changes) { + if (changes.has('disabled')) { + this._disabledChanged(this.disabled); + } + + return super.shouldUpdate(changes); + } + updated(changes) { if (changes.has('optional')) { this._optionalChanged(changes.get('optional')); @@ -266,6 +277,14 @@ class TpInput extends BaseElement { } } + _onFocus() { + this.focused = true; + } + + _onBlur() { + this.focused = false; + } + _onInput() { this._inputWasChanged = true; if (this.allowedPattern && !this._patternAlreadyChecked) { @@ -425,6 +444,10 @@ class TpInput extends BaseElement { this.inputEl.focus(); } + blur() { + this.inputEl.blur(); + } + /** * Reset the control if a parent era-form is reset. */ @@ -460,6 +483,15 @@ class TpInput extends BaseElement { this.validate(); } } + + _disabledChanged(disabled) { + this.setAttribute('aria-disabled', disabled ? 'true' : 'false'); + this.style.pointerEvents = disabled ? 'none' : ''; + if (disabled) { + this.focused = false; + this.blur(); + } + } } window.customElements.define('tp-input', TpInput);