From d858aa5b66153fb25b60410c8c8313bf7ce7f910 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Sun, 27 Apr 2025 20:46:55 -0600
Subject: [PATCH] Extend Foundry's MultiSelectElement so that I can provide a
 label to it

---
 module/Apps/elements/CustomMultiSelect.mjs    | 21 +++++++++++++++++++
 module/Apps/elements/_index.mjs               | 19 +++++++++++++++++
 module/hooks/init.mjs                         |  2 ++
 .../styles/elements/custom-multi-select.css   |  9 ++++++++
 public/styles/main.css                        |  2 ++
 5 files changed, 53 insertions(+)
 create mode 100644 module/Apps/elements/CustomMultiSelect.mjs
 create mode 100644 module/Apps/elements/_index.mjs
 create mode 100644 public/styles/elements/custom-multi-select.css

diff --git a/module/Apps/elements/CustomMultiSelect.mjs b/module/Apps/elements/CustomMultiSelect.mjs
new file mode 100644
index 0000000..c96890d
--- /dev/null
+++ b/module/Apps/elements/CustomMultiSelect.mjs
@@ -0,0 +1,21 @@
+const { HTMLMultiSelectElement } = foundry.applications.elements;
+
+export class CustomMultiSelect extends HTMLMultiSelectElement {
+	static tagName = `stats-tracker-multi-select`;
+
+	get placeholder() {
+		return this.getAttribute(`placeholder`);
+	};
+
+	_buildElements() {
+		const [ tags, select ] = super._buildElements();
+
+		const label = document.createElement(`div`);
+		label.ariaHidden = true;
+		label.innerHTML = game.i18n.localize(this.placeholder);
+
+		select.ariaLabel = game.i18n.localize(this.placeholder);
+
+		return [ label, tags, select ];
+	};
+};
diff --git a/module/Apps/elements/_index.mjs b/module/Apps/elements/_index.mjs
new file mode 100644
index 0000000..e7050f9
--- /dev/null
+++ b/module/Apps/elements/_index.mjs
@@ -0,0 +1,19 @@
+import { CustomMultiSelect } from "./CustomMultiSelect.mjs";
+import { Logger } from "../../utils/Logger.mjs";
+
+const components = [
+	CustomMultiSelect,
+];
+
+export function registerCustomComponents() {
+	(CONFIG.CACHE ??= {}).componentListeners ??= [];
+	for (const component of components) {
+		if (!window.customElements.get(component.tagName)) {
+			Logger.debug(`Registering component "${component.tagName}"`);
+			window.customElements.define(
+				component.tagName,
+				component,
+			);
+		};
+	}
+};
diff --git a/module/hooks/init.mjs b/module/hooks/init.mjs
index 105c6c0..4f0e0f3 100644
--- a/module/hooks/init.mjs
+++ b/module/hooks/init.mjs
@@ -1,6 +1,7 @@
 import helpers from "../handlebarsHelpers/_index.mjs";
 import { Logger } from "../utils/Logger.mjs";
 import { MemoryDatabase } from "../utils/databases/Memory.mjs";
+import { registerCustomComponents } from "../Apps/elements/_index.mjs";
 import { registerMetaSettings } from "../settings/meta.mjs";
 import { UserFlagDatabase } from "../utils/databases/UserFlag.mjs";
 
@@ -16,4 +17,5 @@ Hooks.on(`init`, () => {
 	}
 
 	Handlebars.registerHelper(helpers);
+	registerCustomComponents();
 });
diff --git a/public/styles/elements/custom-multi-select.css b/public/styles/elements/custom-multi-select.css
new file mode 100644
index 0000000..c5b2e0e
--- /dev/null
+++ b/public/styles/elements/custom-multi-select.css
@@ -0,0 +1,9 @@
+stats-tracker-multi-select {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr);
+	gap: 2px;
+
+	select {
+		grid-column: 1 / -1;
+	}
+}
diff --git a/public/styles/main.css b/public/styles/main.css
index 2d33098..37b8f2b 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -1,3 +1,5 @@
 @layer resets, elements, components, apps, exceptions;
 
+@import url("./elements/custom-multi-select.css") layer(elements);
+
 @import url("./Apps/StatsViewer.css") layer(apps);