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.

9 files changed, 39 insertions, 7 deletions

diff --git a/input/checkboxes.d.ts b/input/checkboxes.d.ts
index 89a35d3..dde0476 100644
--- a/input/checkboxes.d.ts
+++ b/input/checkboxes.d.ts
@@ -12,6 +12,7 @@ export interface WuiInputCheckboxesOpts {
     id?: string;
     hint?: string;
     is_disabled?: boolean;
+    is_hint_toggled?: boolean;
     onChangeHandler?: (values: string[]) => void;
 }
 export declare class WuiInputCheckboxes {
diff --git a/input/checkboxes.ts b/input/checkboxes.ts
index 3da7335..0edd832 100644
--- a/input/checkboxes.ts
+++ b/input/checkboxes.ts
@@ -15,6 +15,7 @@ export interface WuiInputCheckboxesOpts {
 	id?: string
 	hint?: string
 	is_disabled?: boolean
+	is_hint_toggled?: boolean
 	onChangeHandler?: (values: string[]) => void
 }
 
@@ -141,10 +142,15 @@ export class WuiInputCheckboxes {
 		this.el_hint = document.createElement("div")
 		this.el_hint.classList.add(WUI_INPUT_CHECKBOXES_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)
 	}
 
diff --git a/input/example.ts b/input/example.ts
index 3855347..d0ea9c4 100644
--- a/input/example.ts
+++ b/input/example.ts
@@ -29,6 +29,7 @@ function exampleInputString() {
 		value: "Hello, disabled input string",
 		is_disabled: true,
 		hint: "The input string is disabled",
+		is_hint_toggled: true,
 		onChangeHandler: (v: string) => {
 			el_out.innerText = v
 		},
@@ -90,6 +91,7 @@ function exampleInputNumber() {
 		value: 1000,
 		hint: "Input number with 'is_disabled' set to true",
 		is_disabled: true,
+		is_hint_toggled: true,
 		onChangeHandler: (val: number) => {
 			el_out.innerText = ""+val
 		},
@@ -155,7 +157,8 @@ function exampleInputSelect() {
 				selected: true,
 			},
 		},
-		hint: "Select on of the option to see the price.",
+		hint: "Select one of the option to see the price.",
+		is_hint_toggled: true,
 		onChangeHandler: (key: string, value: string) => {
 			el_log.innerText = `The select input changes to '${key}' with price '${value}'`
 		},
@@ -217,8 +220,9 @@ function exampleInputCheckboxes() {
 				selected: true,
 			},
 		},
-		hint: "Select fruits.",
+		hint: "Input select with 'is_disabled' and 'is_hint_toggled' is set to 'true'.",
 		is_disabled: true,
+		is_hint_toggled: true,
 		onChangeHandler: (values: string[]) => {
 			el_log.innerText = `You are selecting ${values}`
 		},
diff --git a/input/number.d.ts b/input/number.d.ts
index 29caeea..34b4cf5 100644
--- a/input/number.d.ts
+++ b/input/number.d.ts
@@ -8,6 +8,7 @@ export interface WuiInputNumberOpts {
     class_label?: string;
     class_input?: string;
     is_disabled?: boolean;
+    is_hint_toggled?: boolean;
     onChangeHandler: (new_value: number) => void;
 }
 export declare class WuiInputNumber {
diff --git a/input/number.ts b/input/number.ts
index 4f37eb7..f00e99c 100644
--- a/input/number.ts
+++ b/input/number.ts
@@ -8,6 +8,7 @@ export interface WuiInputNumberOpts {
 	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: number) => void
 }
 
@@ -156,10 +157,15 @@ export class WuiInputNumber {
 		this.el_hint = document.createElement("div")
 		this.el_hint.classList.add(WUI_INPUT_NUMBER_CLASS_HINT)
 		this.el_hint.innerHTML = 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)
 	}
 
@@ -198,6 +204,6 @@ export class WuiInputNumber {
 
 	// Set the input value.
 	Set(v: number) {
-		this.el_input.value = ""+ v
+		this.el_input.value = "" + v
 	}
 }
diff --git a/input/select.d.ts b/input/select.d.ts
index 4a5b9d7..e92d82d 100644
--- a/input/select.d.ts
+++ b/input/select.d.ts
@@ -14,6 +14,7 @@ export interface WuiInputSelectOpts {
     class_label?: string;
     class_input?: string;
     is_disabled?: boolean;
+    is_hint_toggled?: boolean;
     onChangeHandler?: (key: string, value: string) => void;
 }
 export declare class WuiInputSelect {
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)
 	}
 
diff --git a/input/string.d.ts b/input/string.d.ts
index 0d585e5..747c4c6 100644
--- a/input/string.d.ts
+++ b/input/string.d.ts
@@ -6,6 +6,7 @@ export interface WuiInputStringOpts {
     class_label?: string;
     class_input?: string;
     is_disabled?: boolean;
+    is_hint_toggled?: boolean;
     onChangeHandler?: (new_value: string) => void;
 }
 export declare class WuiInputString {
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)
 	}