From 07f5fc46d93d0ed366617b945d25184adc6801cf Mon Sep 17 00:00:00 2001
From: "Francois (F.) van der Merwe" <francois.van.der.merwe@ing.com>
Date: Tue, 12 Nov 2019 09:31:07 +0100
Subject: [PATCH] fix: added placeholder attribute for input

---
 packages/input/src/LionInput.js        |  7 +++++++
 packages/input/test/lion-input.test.js | 11 +++++++++++
 2 files changed, 18 insertions(+)

diff --git a/packages/input/src/LionInput.js b/packages/input/src/LionInput.js
index 3887d55f4..9db0a427c 100644
--- a/packages/input/src/LionInput.js
+++ b/packages/input/src/LionInput.js
@@ -30,6 +30,10 @@ export class LionInput extends LionField {
         type: Number,
         reflect: true,
       },
+      placeholder: {
+        type: String,
+        reflect: true,
+      },
     };
   }
 
@@ -80,6 +84,9 @@ export class LionInput extends LionField {
     if (changedProps.has('step')) {
       this.inputElement.step = this.step;
     }
+    if (changedProps.has('placeholder')) {
+      this.inputElement.placeholder = this.placeholder;
+    }
   }
 
   __delegateReadOnly() {
diff --git a/packages/input/test/lion-input.test.js b/packages/input/test/lion-input.test.js
index e7d94bc09..aefbd6f39 100644
--- a/packages/input/test/lion-input.test.js
+++ b/packages/input/test/lion-input.test.js
@@ -38,4 +38,15 @@ describe('<lion-input>', () => {
     expect(el.getAttribute('type')).to.equal('foo');
     expect(el.inputElement.getAttribute('type')).to.equal('foo');
   });
+
+  it('has an attribute that can be used to set the placeholder text of the input', async () => {
+    const el = await fixture(`<lion-input placeholder="text"></lion-input>`);
+    expect(el.getAttribute('placeholder')).to.equal('text');
+    expect(el.inputElement.getAttribute('placeholder')).to.equal('text');
+
+    el.placeholder = 'foo';
+    await el.updateComplete;
+    expect(el.getAttribute('placeholder')).to.equal('foo');
+    expect(el.inputElement.getAttribute('placeholder')).to.equal('foo');
+  });
 });