diff --git a/packages/field/src/LionField.js b/packages/field/src/LionField.js index f175c48a2..f423d0eba 100644 --- a/packages/field/src/LionField.js +++ b/packages/field/src/LionField.js @@ -49,10 +49,6 @@ export class LionField extends FormControlMixin( type: String, reflect: true, }, - type: { - type: String, - reflect: true, - }, }; } @@ -103,7 +99,6 @@ export class LionField extends FormControlMixin( super(); this.name = ''; this.submitted = false; - this.type = 'text'; } connectedCallback() { @@ -144,9 +139,6 @@ export class LionField extends FormControlMixin( if (changedProps.has('name')) { this.inputElement.name = this.name; } - if (changedProps.has('type')) { - this.inputElement.type = this.type; - } } /** diff --git a/packages/field/test/lion-field.test.js b/packages/field/test/lion-field.test.js index a6d832edd..053da22e9 100644 --- a/packages/field/test/lion-field.test.js +++ b/packages/field/test/lion-field.test.js @@ -128,18 +128,6 @@ describe('', () => { expect(el.inputElement.getAttribute('name')).to.equal('foo'); }); - it('has a type which is reflected to an attribute and is synced down to the native input', async () => { - const el = await fixture(`<${tagString}>${inputSlotString}`); - expect(el.type).to.equal('text'); - expect(el.getAttribute('type')).to.equal('text'); - expect(el.inputElement.getAttribute('type')).to.equal('text'); - - el.type = 'foo'; - await el.updateComplete; - expect(el.getAttribute('type')).to.equal('foo'); - expect(el.inputElement.getAttribute('type')).to.equal('foo'); - }); - // TODO: find out if we could put all listeners on this.value (instead of this.inputElement.value) // and make it act on this.value again it('has a class "state-filled" if this.value is filled', async () => { diff --git a/packages/input/src/LionInput.js b/packages/input/src/LionInput.js index ba28a423f..1649410dd 100644 --- a/packages/input/src/LionInput.js +++ b/packages/input/src/LionInput.js @@ -21,14 +21,14 @@ export class LionInput extends LionField { type: Boolean, attribute: 'readonly', }, - }; - } - - get delegations() { - return { - ...super.delegations, - properties: [...super.delegations.properties, 'step'], - attributes: [...super.delegations.attributes, 'step'], + type: { + type: String, + reflect: true, + }, + step: { + type: Number, + reflect: true, + }, }; } @@ -47,6 +47,18 @@ export class LionInput extends LionField { }; } + constructor() { + super(); + this.readOnly = false; + this.type = 'text'; + /** + * Only application to type="amount" & type="range" + * + * @deprecated + */ + this.step = undefined; + } + _requestUpdate(name, oldValue) { super._requestUpdate(name, oldValue); if (name === 'readOnly') { @@ -59,6 +71,16 @@ export class LionInput extends LionField { this.__delegateReadOnly(); } + updated(changedProps) { + super.updated(changedProps); + if (changedProps.has('type')) { + this.inputElement.type = this.type; + } + if (changedProps.has('step')) { + this.inputElement.step = this.step; + } + } + __delegateReadOnly() { if (this.inputElement) { this.inputElement.readOnly = this.readOnly; diff --git a/packages/input/test/lion-input.test.js b/packages/input/test/lion-input.test.js index c144f4517..e7d94bc09 100644 --- a/packages/input/test/lion-input.test.js +++ b/packages/input/test/lion-input.test.js @@ -26,4 +26,16 @@ describe('', () => { const el = await fixture(``); expect(el.querySelector('input')).to.equal(el.inputElement); }); + + it('has a type which is reflected to an attribute and is synced down to the native input', async () => { + const el = await fixture(``); + expect(el.type).to.equal('text'); + expect(el.getAttribute('type')).to.equal('text'); + expect(el.inputElement.getAttribute('type')).to.equal('text'); + + el.type = 'foo'; + await el.updateComplete; + expect(el.getAttribute('type')).to.equal('foo'); + expect(el.inputElement.getAttribute('type')).to.equal('foo'); + }); }); diff --git a/packages/textarea/package.json b/packages/textarea/package.json index c01f5f75c..853447f92 100644 --- a/packages/textarea/package.json +++ b/packages/textarea/package.json @@ -33,7 +33,7 @@ ], "dependencies": { "@lion/core": "^0.1.13", - "@lion/input": "^0.1.44", + "@lion/field": "^0.1.42", "autosize": "4.0.2" }, "devDependencies": { diff --git a/packages/textarea/src/LionTextarea.js b/packages/textarea/src/LionTextarea.js index 9a05e5c1c..a0857418a 100644 --- a/packages/textarea/src/LionTextarea.js +++ b/packages/textarea/src/LionTextarea.js @@ -1,5 +1,5 @@ import autosize from 'autosize/src/autosize.js'; -import { LionInput } from '@lion/input'; +import { LionField } from '@lion/field'; import { css } from '@lion/core'; /** @@ -8,7 +8,7 @@ import { css } from '@lion/core'; * @customElement * @extends LionInput */ -export class LionTextarea extends LionInput { +export class LionTextarea extends LionField { static get properties() { return { maxRows: {