input: add option "is_hint_toggled"

If the "is_hint_toggled" is true, the hint text will be displayed
by default on first render, instead of hidden.

While at it, add 2px to the top margin of the hint element to make it
separatable from the input element.

1 files changed, 7 insertions, 1 deletions

diff --git a/input/string.ts b/input/string.ts
index 84e7539..961220b 100644
--- a/input/string.ts
+++ b/input/string.ts
@@ -6,6 +6,7 @@ export interface WuiInputStringOpts {
 	class_label?: string // Additional CSS class for label.
 	class_input?: string // Additional CSS class for input.
 	is_disabled?: boolean
+	is_hint_toggled?: boolean // If true, the hint will be displayed first instead of hidden.
 	onChangeHandler?: (new_value: string) => void
 }
 
@@ -143,10 +144,15 @@ export class WuiInputString {
 		this.el_hint = document.createElement("div")
 		this.el_hint.classList.add(WUI_INPUT_STRING_CLASS_HINT)
 		this.el_hint.innerHTML = this.opts.hint || ""
-		this.el_hint.style.display = "none"
+		if (this.opts.is_hint_toggled) {
+			this.el_hint.style.display = "block"
+		} else {
+			this.el_hint.style.display = "none"
+		}
 		this.el_hint.style.backgroundColor = "gainsboro"
 		this.el_hint.style.borderRadius = "2px"
 		this.el_hint.style.padding = "4px"
+		this.el_hint.style.marginTop = "2px"
 		this.el.appendChild(this.el_hint)
 	}