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

@@ -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",

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() {

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);

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 () => {