From 7e696a2ace4abaf0ccf85d7b86492c3c41c6fa9c Mon Sep 17 00:00:00 2001
From: Kateryna Tkachenko <kateryna.tkachenko@elsci.io>
Date: Mon, 18 Dec 2023 17:03:19 +0100
Subject: [PATCH] Ability to add placeholder to text-input                     
                       Now when you add attribute placeholder, it adds class
 "placeholder-shown" to text-input, which makes placeholder visible

---
 package.json                    |  2 +-
 src/TextInput/TextInput.js      |  4 +++-
 src/TextInput/TextInput.scss    | 10 +++++++++-
 test/TextInput/TextInputTest.js |  9 +++++++++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 4b59ac6..40dd44c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@elsci-io/ui-essential",
-  "version": "1.0.33",
+  "version": "1.0.34",
   "description": "Material Design components created for products built by elsci.io",
   "main": "src/index.js",
   "type": "module",
diff --git a/src/TextInput/TextInput.js b/src/TextInput/TextInput.js
index 0541cbd..74ff38b 100644
--- a/src/TextInput/TextInput.js
+++ b/src/TextInput/TextInput.js
@@ -4,7 +4,7 @@ import {isFiniteNumber, KeyCode, safeHtml} from "../utils.js"
 
 export default class TextInput extends HTMLElement {
     static #INPUT_ATTRIBUTES = new Set(["autocomplete", "autofocus", "disabled", "max", "maxlength",
-        "min", "minlength", "name", "pattern", "readonly", "step", "type", "value"
+        "min", "minlength", "name", "pattern", "readonly", "step", "type", "value", "placeholder"
         /* "required" - we do not want to set attribute required when render text-input, because in this case all
         required inputs becomes red, as solution we just leave it in the root element and do this validation manually */]);
     /** @type {HTMLInputElement} */
@@ -146,6 +146,8 @@ export default class TextInput extends HTMLElement {
         // decimal w/o validation error. So, if step is not specified, then we set it to "any" to allow decimal values.
         if (this.getAttribute("type") === "number" && !this.hasAttribute("step"))
             this.#inputElement.setAttribute("step", "any");
+        if (this.hasAttribute("placeholder"))
+            this.classList.add("placeholder-shown");
     }
 
     #addListeners() {
diff --git a/src/TextInput/TextInput.scss b/src/TextInput/TextInput.scss
index 20a5b2c..4878465 100644
--- a/src/TextInput/TextInput.scss
+++ b/src/TextInput/TextInput.scss
@@ -42,6 +42,10 @@ text-input {
     color: transparent;
     user-select: none;
 }
+text-input.placeholder-shown .text-input__input::placeholder {
+    /* If we need a real placeholder, we set color to it. */
+    color: var(--theme-text-hint-on-light);
+}
 .text-input__label {
     position: absolute;
     color: var(--theme-text-hint-on-light);
@@ -71,7 +75,11 @@ text-input {
     transform: translate(var(--text-input__label__left-padding), -0.375rem);
     font-size: var(--text-input__small-font-size);
 }
-
+text-input.placeholder-shown .text-input__label {
+    /*when input has real placeholder, input label must be in the top all time*/
+    transform: translate(var(--text-input__label__left-padding), -0.375rem);
+    font-size: var(--text-input__small-font-size);
+}
 .text-input__input:invalid + .text-input__label {
     /*when we focus on the input, the label should jump on top of the field*/
     color: var(--theme-input-border-error);
diff --git a/test/TextInput/TextInputTest.js b/test/TextInput/TextInputTest.js
index b6c1609..974a789 100644
--- a/test/TextInput/TextInputTest.js
+++ b/test/TextInput/TextInputTest.js
@@ -21,6 +21,15 @@ describe('TextInput', () => {
                 const element = JsDomUtils.insertHtml(`<text-input label="Some label" placeholder="Some placeholder"></text-input>`);
                 assert.strictEqual(element.querySelector('label').textContent, 'Some label');
             });
+            it('set attribute in input', () => {
+                const element = JsDomUtils.insertHtml(`<text-input placeholder="Some placeholder"></text-input>`);
+                assert.strictEqual(element.querySelector('input').getAttribute('placeholder'), 'Some placeholder');
+            });
+            it('add class "placeholder-shown" in text-input', () => {
+                const element = JsDomUtils.insertHtml(`<text-input placeholder="Some placeholder"></text-input>`);
+                console.log(document.body.innerHTML)
+                assert.ok(element.classList.contains('placeholder-shown'));
+            });
         });
         describe('value', () => {
             beforeEach(async () => {