From 42ebec89d615989a95019f7d1234a79e415bc207 Mon Sep 17 00:00:00 2001
From: Shulhan <ms@kilabit.info>
Date: Sat, 11 Sep 2021 00:31:23 +0700
Subject: input: add options to add custom CSS class to label and input

The input options for string, number, and select now have two additional
options: "class_label" and "class_input".

The "class_label" option will add custom CSS class to the input label.
The "class_input" option will add custom CSS class to the input group.
---
 input/number.d.ts |  2 ++
 input/number.ts   | 14 ++++++++++++--
 input/select.d.ts |  2 ++
 input/select.ts   | 13 +++++++++++--
 input/string.d.ts |  2 ++
 input/string.ts   | 13 +++++++++++--
 6 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/input/number.d.ts b/input/number.d.ts
index 654b7e3..217e12c 100644
--- a/input/number.d.ts
+++ b/input/number.d.ts
@@ -5,6 +5,8 @@ export interface WuiInputNumberOpts {
     hint?: string;
     max?: number;
     min?: number;
+    class_label?: string;
+    class_input?: string;
     is_disabled?: boolean;
     onChangeHandler: (new_value: number) => void;
 }
diff --git a/input/number.ts b/input/number.ts
index e2d1bc5..990d94a 100644
--- a/input/number.ts
+++ b/input/number.ts
@@ -5,6 +5,8 @@ export interface WuiInputNumberOpts {
 	hint?: string
 	max?: number
 	min?: number
+	class_label?: string // Additional CSS class for label.
+	class_input?: string // Additional CSS class for input.
 	is_disabled?: boolean
 	onChangeHandler: (new_value: number) => void
 }
@@ -24,11 +26,11 @@ 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 class="${WUI_INPUT_NUMBER_CLASS_LABEL} [${class_label}]">
 //				${label} | HTMLElement
 //			</label>
 //			<input
-//				class="${WUI_INPUT_NUMBER_CLASS_INPUT}"
+//				class="${WUI_INPUT_NUMBER_CLASS_INPUT} [${class_input}]"
 //				[max=${max}]
 //				[min=${min}]
 //				[disabled=${is_disabled}]
@@ -77,6 +79,10 @@ export class WuiInputNumber {
 	private generateLabel(wrapper: HTMLElement) {
 		this.el_label = document.createElement("label")
 		this.el_label.classList.add(WUI_INPUT_NUMBER_CLASS_LABEL)
+		if (this.opts.class_label) {
+			this.el_label.classList.add(this.opts.class_label)
+		}
+
 		if (typeof this.opts.label === "string") {
 			this.el_label.innerHTML = `${this.opts.label} `
 		} else {
@@ -90,6 +96,10 @@ export class WuiInputNumber {
 			"input",
 		) as HTMLInputElement
 		this.el_input.classList.add(WUI_INPUT_NUMBER_CLASS_INPUT)
+		if (this.opts.class_input) {
+			this.el_input.classList.add(this.opts.class_input)
+		}
+
 		this.el_input.type = "number"
 		this.el_input.value = "" + this.opts.value
 
diff --git a/input/select.d.ts b/input/select.d.ts
index 88f1faa..4707838 100644
--- a/input/select.d.ts
+++ b/input/select.d.ts
@@ -11,6 +11,8 @@ export interface WuiInputSelectOpts {
     options: WuiKeySelectOption;
     id?: string;
     hint?: string;
+    class_label?: string;
+    class_input?: string;
     is_disabled?: boolean;
     onChangeHandler?: (key: string, value: string) => void;
 }
diff --git a/input/select.ts b/input/select.ts
index df6f450..4882448 100644
--- a/input/select.ts
+++ b/input/select.ts
@@ -14,6 +14,8 @@ export interface WuiInputSelectOpts {
 	options: WuiKeySelectOption
 	id?: string
 	hint?: string
+	class_label?: string // Additional CSS class for label.
+	class_input?: string // Additional CSS class for input.
 	is_disabled?: boolean
 	onChangeHandler?: (key: string, value: string) => void
 }
@@ -31,12 +33,12 @@ 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 class="${WUI_INPUT_SELECT_CLASS_LABEL} [${class_label}]">
 //				${label} | HTMLElement
 //			</label>
 //			<select
 //				name=${name}
-//				class="${WUI_INPUT_SELECT_CLASS_INPUT}"
+//				class="${WUI_INPUT_SELECT_CLASS_INPUT} [${class_input}]"
 //				[disabled=${is_disabled}]
 //			>
 //				<option value="${options[key].value}">${key in options}</option>
@@ -85,6 +87,10 @@ export class WuiInputSelect {
 	private generateLabel(wrapper: HTMLElement) {
 		this.el_label = document.createElement("label")
 		this.el_label.classList.add(WUI_INPUT_SELECT_CLASS_LABEL)
+		if (this.opts.class_label) {
+			this.el_label.classList.add(this.opts.class_label)
+		}
+
 		if (typeof this.opts.label === "string") {
 			this.el_label.innerHTML = `${this.opts.label} `
 		} else {
@@ -97,6 +103,9 @@ export class WuiInputSelect {
 		this.el_input = document.createElement("select")
 		this.el_input.name = this.opts.name
 		this.el_input.classList.add(WUI_INPUT_SELECT_CLASS_INPUT)
+		if (this.opts.class_input) {
+			this.el_input.classList.add(this.opts.class_input)
+		}
 
 		for (let key in this.opts.options) {
 			let option = this.opts.options[key]
diff --git a/input/string.d.ts b/input/string.d.ts
index a47f90d..8159f66 100644
--- a/input/string.d.ts
+++ b/input/string.d.ts
@@ -3,6 +3,8 @@ export interface WuiInputStringOpts {
     value: string;
     id?: string;
     hint?: string;
+    class_label?: string;
+    class_input?: string;
     is_disabled?: boolean;
     onChangeHandler?: (new_value: string) => void;
 }
diff --git a/input/string.ts b/input/string.ts
index 680c3a4..1faa3cb 100644
--- a/input/string.ts
+++ b/input/string.ts
@@ -3,6 +3,8 @@ export interface WuiInputStringOpts {
 	value: string
 	id?: string
 	hint?: string
+	class_label?: string // Additional CSS class for label.
+	class_input?: string // Additional CSS class for input.
 	is_disabled?: boolean
 	onChangeHandler?: (new_value: string) => void
 }
@@ -21,11 +23,11 @@ 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 class="${WUI_INPUT_STRING_CLASS_LABEL} [${class_label}]">
 //				${label} | HTMLElement
 //			</label>
 //			<input
-//				class="${WUI_INPUT_STRING_CLASS_INPUT}"
+//				class="${WUI_INPUT_STRING_CLASS_INPUT} [${class_input}]"
 //				[disabled=${is_disabled}]
 //				value=${value}
 //			>
@@ -74,6 +76,9 @@ export class WuiInputString {
 	private generateLabel(wrapper: HTMLElement) {
 		this.el_label = document.createElement("label")
 		this.el_label.classList.add(WUI_INPUT_STRING_CLASS_LABEL)
+		if (this.opts.class_label) {
+			this.el_label.classList.add(this.opts.class_label)
+		}
 
 		if (typeof this.opts.label === "string") {
 			this.el_label.innerHTML = `${this.opts.label} `
@@ -88,6 +93,10 @@ export class WuiInputString {
 			"input",
 		) as HTMLInputElement
 		this.el_input.classList.add(WUI_INPUT_STRING_CLASS_INPUT)
+		if (this.opts.class_input) {
+			this.el_input.classList.add(this.opts.class_input)
+		}
+
 		this.el_input.value = "" + this.opts.value
 
 		if (this.opts.is_disabled) {
-- 
cgit v1.3