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/string.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

(limited to 'input/string.ts')

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