fix(field): move type property to input & add step property to input

Author: daKmoR

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;
-    }
   }
 
   /**

packages/field/test/lion-field.test.js

@@ -128,18 +128,6 @@ describe('<lion-field>', () => {
     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}</${tagString}>`);
-    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 () => {

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;

packages/input/test/lion-input.test.js

@@ -26,4 +26,16 @@ describe('<lion-input>', () => {
     const el = await fixture(`<lion-input></lion-input>`);
     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(`<lion-input></lion-input>`);
+    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');
+  });
 });

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": {

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: {