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/select.ts b/input/select.ts
index 7fc42c5..67b0349 100644
--- a/input/select.ts
+++ b/input/select.ts
@@ -17,6 +17,7 @@ export interface WuiInputSelectOpts {
 	class_label?: string // Additional CSS class for label.
 	class_input?: string // Additional CSS class for input.
 	is_disabled?: boolean
+	is_hint_toggled?: boolean
 	onChangeHandler?: (key: string, value: string) => void
 }
 
@@ -158,10 +159,15 @@ export class WuiInputSelect {
 		this.el_hint = document.createElement("div")
 		this.el_hint.classList.add(WUI_INPUT_SELECT_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)
 	}