From af17111480d41f4770c7129733817e0dfd2d4f7c Mon Sep 17 00:00:00 2001
From: Shulhan <ms@kilabit.info>
Date: Sat, 11 Sep 2021 00:02:13 +0700
Subject: input: allow label to be HTMLElement instead of only string

A label on input can be a string or another HTMLElement.
---
 input/number.d.ts |  2 +-
 input/number.ts   | 20 +++++++++++++++-----
 input/select.d.ts |  2 +-
 input/select.ts   | 16 ++++++++++++----
 input/string.d.ts |  2 +-
 input/string.ts   | 33 +++++++++++++++++++++++++--------
 6 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/input/number.d.ts b/input/number.d.ts
index cbf847a..654b7e3 100644
--- a/input/number.d.ts
+++ b/input/number.d.ts
@@ -1,5 +1,5 @@
 export interface WuiInputNumberOpts {
-    label: string;
+    label: string | HTMLElement;
     value: number;
     id?: string;
     hint?: string;
diff --git a/input/number.ts b/input/number.ts
index 11e561b..e2d1bc5 100644
--- a/input/number.ts
+++ b/input/number.ts
@@ -1,5 +1,5 @@
 export interface WuiInputNumberOpts {
-	label: string
+	label: string | HTMLElement
 	value: number
 	id?: string
 	hint?: string
@@ -24,7 +24,9 @@ const WUI_INPUT_NUMBER_CLASS_LABEL = "wui_input_number_label"
 //
 //	<div [id=${id}] class="${WUI_INPUT_NUMBER_CLASS}">
 //		<div>
-//			<label class="${WUI_INPUT_NUMBER_CLASS_LABEL}">${label}</label>
+//			<label class="${WUI_INPUT_NUMBER_CLASS_LABEL}">
+//				${label} | HTMLElement
+//			</label>
 //			<input
 //				class="${WUI_INPUT_NUMBER_CLASS_INPUT}"
 //				[max=${max}]
@@ -75,12 +77,18 @@ export class WuiInputNumber {
 	private generateLabel(wrapper: HTMLElement) {
 		this.el_label = document.createElement("label")
 		this.el_label.classList.add(WUI_INPUT_NUMBER_CLASS_LABEL)
-		this.el_label.innerHTML = `${this.opts.label} `
+		if (typeof this.opts.label === "string") {
+			this.el_label.innerHTML = `${this.opts.label} `
+		} else {
+			this.el_label.appendChild(this.opts.label)
+		}
 		wrapper.appendChild(this.el_label)
 	}
 
 	private generateInput(wrapper: HTMLElement) {
-		this.el_input = document.createElement("input") as HTMLInputElement
+		this.el_input = document.createElement(
+			"input",
+		) as HTMLInputElement
 		this.el_input.classList.add(WUI_INPUT_NUMBER_CLASS_INPUT)
 		this.el_input.type = "number"
 		this.el_input.value = "" + this.opts.value
@@ -117,7 +125,9 @@ export class WuiInputNumber {
 
 	private generateHintToggler(wrapper: HTMLElement) {
 		this.el_hint_toggler = document.createElement("span")
-		this.el_hint_toggler.classList.add(WUI_INPUT_NUMBER_CLASS_HINT_TOGGLER)
+		this.el_hint_toggler.classList.add(
+			WUI_INPUT_NUMBER_CLASS_HINT_TOGGLER,
+		)
 		this.el_hint_toggler.innerHTML = " &#x2139;"
 
 		this.el_hint_toggler.onmouseover = () => {
diff --git a/input/select.d.ts b/input/select.d.ts
index 6a568f3..88f1faa 100644
--- a/input/select.d.ts
+++ b/input/select.d.ts
@@ -6,7 +6,7 @@ export interface WuiKeySelectOption {
     [key: string]: WuiInputOption;
 }
 export interface WuiInputSelectOpts {
-    label: string;
+    label: string | HTMLElement;
     name: string;
     options: WuiKeySelectOption;
     id?: string;
diff --git a/input/select.ts b/input/select.ts
index 1989c06..df6f450 100644
--- a/input/select.ts
+++ b/input/select.ts
@@ -9,7 +9,7 @@ export interface WuiKeySelectOption {
 }
 
 export interface WuiInputSelectOpts {
-	label: string
+	label: string | HTMLElement
 	name: string
 	options: WuiKeySelectOption
 	id?: string
@@ -31,7 +31,9 @@ const WUI_INPUT_SELECT_CLASS_LABEL = "wui_input_select_label"
 //
 //	<div [id=${id}] class="${WUI_INPUT_SELECT_CLASS}">
 //		<div>
-//			<label class="${WUI_INPUT_SELECT_CLASS_LABEL}">${label}</label>
+//			<label class="${WUI_INPUT_SELECT_CLASS_LABEL}">
+//				${label} | HTMLElement
+//			</label>
 //			<select
 //				name=${name}
 //				class="${WUI_INPUT_SELECT_CLASS_INPUT}"
@@ -83,7 +85,11 @@ export class WuiInputSelect {
 	private generateLabel(wrapper: HTMLElement) {
 		this.el_label = document.createElement("label")
 		this.el_label.classList.add(WUI_INPUT_SELECT_CLASS_LABEL)
-		this.el_label.innerHTML = `${this.opts.label} `
+		if (typeof this.opts.label === "string") {
+			this.el_label.innerHTML = `${this.opts.label} `
+		} else {
+			this.el_label.appendChild(this.opts.label)
+		}
 		wrapper.appendChild(this.el_label)
 	}
 
@@ -125,7 +131,9 @@ export class WuiInputSelect {
 
 	private generateHintToggler(wrapper: HTMLElement) {
 		this.el_hint_toggler = document.createElement("span")
-		this.el_hint_toggler.classList.add(WUI_INPUT_SELECT_CLASS_HINT_TOGGLER)
+		this.el_hint_toggler.classList.add(
+			WUI_INPUT_SELECT_CLASS_HINT_TOGGLER,
+		)
 		this.el_hint_toggler.innerHTML = " &#x2139;"
 
 		this.el_hint_toggler.onmouseover = () => {
diff --git a/input/string.d.ts b/input/string.d.ts
index f0a36fe..a47f90d 100644
--- a/input/string.d.ts
+++ b/input/string.d.ts
@@ -1,5 +1,5 @@
 export interface WuiInputStringOpts {
-    label: string;
+    label: string | HTMLElement;
     value: string;
     id?: string;
     hint?: string;
diff --git a/input/string.ts b/input/string.ts
index d8faf36..680c3a4 100644
--- a/input/string.ts
+++ b/input/string.ts
@@ -1,5 +1,5 @@
 export interface WuiInputStringOpts {
-	label: string
+	label: string | HTMLElement
 	value: string
 	id?: string
 	hint?: string
@@ -21,7 +21,9 @@ const WUI_INPUT_STRING_CLASS_LABEL = "wui_input_string_label"
 //
 //	<div [id=${id}] class="${WUI_INPUT_STRING_CLASS}">
 //		<div>
-//			<label class="${WUI_INPUT_STRING_CLASS_LABEL}">${label}</label>
+//			<label class="${WUI_INPUT_STRING_CLASS_LABEL}">
+//				${label} | HTMLElement
+//			</label>
 //			<input
 //				class="${WUI_INPUT_STRING_CLASS_INPUT}"
 //				[disabled=${is_disabled}]
@@ -72,12 +74,19 @@ export class WuiInputString {
 	private generateLabel(wrapper: HTMLElement) {
 		this.el_label = document.createElement("label")
 		this.el_label.classList.add(WUI_INPUT_STRING_CLASS_LABEL)
-		this.el_label.innerHTML = `${this.opts.label} `
+
+		if (typeof this.opts.label === "string") {
+			this.el_label.innerHTML = `${this.opts.label} `
+		} else {
+			this.el_label.appendChild(this.opts.label)
+		}
 		wrapper.appendChild(this.el_label)
 	}
 
 	private generateInput(wrapper: HTMLElement) {
-		this.el_input = document.createElement("input") as HTMLInputElement
+		this.el_input = document.createElement(
+			"input",
+		) as HTMLInputElement
 		this.el_input.classList.add(WUI_INPUT_STRING_CLASS_INPUT)
 		this.el_input.value = "" + this.opts.value
 
@@ -89,9 +98,15 @@ export class WuiInputString {
 			console.log("register onchange")
 			this.el_input.onkeyup = (ev: Event) => {
 				if (this.opts.onChangeHandler) {
-					if (this.value !== this.el_input.value) {
-						this.opts.onChangeHandler(this.el_input.value)
-						this.value = this.el_input.value
+					if (
+						this.value !==
+						this.el_input.value
+					) {
+						this.opts.onChangeHandler(
+							this.el_input.value,
+						)
+						this.value =
+							this.el_input.value
 					}
 				}
 			}
@@ -102,7 +117,9 @@ export class WuiInputString {
 
 	private generateHintToggler(wrapper: HTMLElement) {
 		this.el_hint_toggler = document.createElement("span")
-		this.el_hint_toggler.classList.add(WUI_INPUT_STRING_CLASS_HINT_TOGGLER)
+		this.el_hint_toggler.classList.add(
+			WUI_INPUT_STRING_CLASS_HINT_TOGGLER,
+		)
 		this.el_hint_toggler.innerHTML = " &#x2139;"
 
 		this.el_hint_toggler.onmouseover = () => {
-- 
cgit v1.3