From 5490237d884a0ad04186683197289fce4f1e7ce3 Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer <darkwiiplayer@hotmail.com>
Date: Fri, 17 Jan 2025 13:21:36 +0100
Subject: [PATCH] Add support for placeholders as attributes

---
 index.html          |  2 +-
 package.json        |  2 +-
 readme.md           | 11 ++++++++---
 src/BetterSelect.js | 27 +++++++++++++++++++++++++++
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index f3040f2..cef7c46 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,7 @@
 
 	<p>A better muli-option input box for HTML</p>
 
-	<better-select name="better-selection" class="search">
+	<better-select name="better-selection" class="search" placeholder="Placeholder..." search-placeholder="Search...">
 		<span slot="placeholder">Placeholder...</span>
 		<option value="first">First value</option>
 		<option value="second">Second value</option>
diff --git a/package.json b/package.json
index 5d369ca..b2de09e 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,6 @@
 	"browser": "src/BetterSelect.js",
 	"type": "module",
 	"license": "MIT",
-	"version": "1.3.1",
+	"version": "1.4.0",
 	"url": "https://darkwiiplayer.github.io/BetterSelect/"
 }
diff --git a/readme.md b/readme.md
index 4a3e852..7212935 100644
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,11 @@
+## Attributes
+
+* `placeholder` Placeholder displayed when nothing is selected
+* `search-placeholder` Placeholder passed to the search input in the drop-down
+
 ## Slots
 
-* `placeholder`: Only shown when nothing is selected
+* `placeholder`: Only shown when nothing is selected (replaces attribute placeholder if present)
 * `loading`: Hidden by default, shown instead of items while `populate()` runs
 
 ## Parts
@@ -18,9 +23,9 @@
 * `search(string)`: Called on search input to update the list of options
 * `match(string, element)`: Used by `search` to compare each option to the search string
 
-## Attributes
+## Properties
 
-* `closeSignal`: An AbortSignal that fires when the drop-down closes
+* `closeSignal`: (read-only) An AbortSignal that fires when the drop-down closes
 
 ## Events
 
diff --git a/src/BetterSelect.js b/src/BetterSelect.js
index 7b06aa4..c0afda6 100644
--- a/src/BetterSelect.js
+++ b/src/BetterSelect.js
@@ -1,3 +1,4 @@
+
 const template = fn => {
 	return (arr, ...params) => {
 		if (arr instanceof Array) {
@@ -57,6 +58,7 @@ export class BetterSelect extends HTMLElement {
 
 	#internals = this.attachInternals()
 	static formAssociated = true
+	static observedAttributes = Object.freeze(["placeholder", "search-placeholder"])
 
 	static styleSheet = css`
 		:host {
@@ -394,7 +396,32 @@ export class BetterSelect extends HTMLElement {
 		}
 	}
 
+	/** Changes the placeholder displayed in the display area
+	 * @param {string} text
+	 */
+	placeholderChanged(text) {
+		this.placeholder.innerText = text
+	}
+
+	/** Changes the placeholder displayed in the search box when the drop-down is open
+	 * @param {string} text
+	 */
+	searchPlaceholderChanged(text) {
+		this.input.placeholder = text
+	}
+
 	clear() {
 		this.setValue(undefined, "")
 	}
+
+	/**
+	 * @param {String} name
+	 * @param {String} before
+	 * @param {String} after
+	 */
+	attributeChangedCallback(name, before, after) {
+		const methodName = name.replace(/-([a-z])/g, (_all, letter) => (letter.toUpperCase())) + "Changed"
+		if (methodName in this) this[methodName](after, before)
+	}
 }
+