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/string.ts | 33 +++++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

(limited to 'input/string.ts')

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-6-g1900