fix(field): sync type down instead of delegating

Author: daKmoR

packages/field/src/LionField.js

@@ -1,4 +1,4 @@
-import { DelegateMixin, SlotMixin, LitElement } from '@lion/core';
+import { SlotMixin, LitElement } from '@lion/core';
 import { ElementMixin } from '@lion/core/src/ElementMixin.js';
 import { DisabledMixin } from '@lion/core/src/DisabledMixin.js';
 import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
@@ -35,23 +35,10 @@ import { FocusMixin } from './FocusMixin.js';
 export class LionField extends FormControlMixin(
   InteractionStateMixin(
     FocusMixin(
-      FormatMixin(
-        ValidateMixin(
-          DisabledMixin(ElementMixin(DelegateMixin(SlotMixin(ObserverMixin(LitElement))))),
-        ),
-      ),
+      FormatMixin(ValidateMixin(DisabledMixin(ElementMixin(SlotMixin(ObserverMixin(LitElement)))))),
     ),
   ),
 ) {
-  get delegations() {
-    return {
-      ...super.delegations,
-      target: () => this.inputElement,
-      properties: [...super.delegations.properties, 'type'],
-      attributes: [...super.delegations.attributes, 'type'],
-    };
-  }
-
   static get properties() {
     return {
       submitted: {
@@ -62,6 +49,10 @@ export class LionField extends FormControlMixin(
         type: String,
         reflect: true,
       },
+      type: {
+        type: String,
+        reflect: true,
+      },
     };
   }
 
@@ -112,6 +103,7 @@ export class LionField extends FormControlMixin(
     super();
     this.name = '';
     this.submitted = false;
+    this.type = 'text';
   }
 
   connectedCallback() {
@@ -152,6 +144,9 @@ 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,6 +128,18 @@ 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 () => {
@@ -397,23 +409,6 @@ describe('<lion-field>', () => {
       expect(el.inputElement.value).to.equal('one');
     });
 
-    it('delegates property type', async () => {
-      const el = await fixture(`<${tagString} type="text">${inputSlotString}</${tagString}>`);
-      const inputElemTag = el.inputElement.tagName.toLowerCase();
-      if (inputElemTag === 'select') {
-        // TODO: later on we might want to support multi select ?
-        expect(el.inputElement.type).to.contain('select-one');
-      } else if (inputElemTag === 'textarea') {
-        expect(el.inputElement.type).to.contain('textarea');
-      } else {
-        // input or custom inputElement
-        expect(el.inputElement.type).to.contain('text');
-        el.type = 'password';
-        expect(el.type).to.equal('password');
-        expect(el.inputElement.type).to.equal('password');
-      }
-    });
-
     it('delegates property selectionStart and selectionEnd', async () => {
       const el = await fixture(html`
         <${tag}