From 053e02d4d774c444ce9370bdde5be137583a5ee0 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Fri, 9 Feb 2024 14:31:53 -0500
Subject: [PATCH] Improve rendering of color options

---
 netbox/project-static/dist/netbox.js       | Bin 375823 -> 375894 bytes
 netbox/project-static/dist/netbox.js.map   | Bin 340766 -> 340783 bytes
 netbox/project-static/src/select/static.ts |   9 ++++++---
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index bafb33d53671839c7d37bae75cb0a75cdcddaa76..2ffea91f62625a91461bcb92ea86667c6a3940da 100644
GIT binary patch
delta 175
zcmeDGA$IMDSVIeA3sVd87MA*Y|I)nVlFa-(h0IKil1!b{OwH<|)RNMoyabz+%rZNh
z;)29Hh2)&X;$mB+l%o8Cl>G8M-OQ5IT;0sPl+5JBlKdit<oulcBHf(Cq|_Xx=^yG@
zbkuG1LHg_zRH{=!#_E-%R+MPg+USFfOsGxEFVe_KEm0_$-d@k5$5=9bTRn?BS7xRT
T$Xu(;%yy#&mhDCjtaq&e<{m)Y

delta 83
zcmcciL#+RYSVIeA3sVd87MA+@>7w;4;?oTpSmYTqrw0J3>GxEa#aI(;QZmb?pQ~rl
l5mTv7&D1E#)GJA?DABC7(FaP{CDgW8Hn423Y+$`>4FKp49n$~+

diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index 88530a771637d60cf4f205ac70d315e4f3aae1db..c936d5f42f96968586808222862205d8f0ce1c22 100644
GIT binary patch
delta 112
zcmbRDOl18tk%kt=7N!>FEi84qE|HFog-$x|j*gjN(!@!}+0i+}Rma!S(O)Ou&CxO6
z4J7LiBD{5Sog5u=!3v=Q$&T(7p3`e}Sv;oCa$@0P^>;OPN@?fNW7*E3$127O0G>x5
A&;S4c

delta 105
zcmZ4gOl00Ok%kt=7N!>FEi84q)4RP{q^951WzlsGc61EYad&jgbOMnkPCCwx&gL#U
tzK)LmI@!*Sj@iy2aeolutrPC(7>>lvb#g6pDsgL<)MME$smChD3IN$X9y9;|

diff --git a/netbox/project-static/src/select/static.ts b/netbox/project-static/src/select/static.ts
index 7df9a7d8a..717bd9984 100644
--- a/netbox/project-static/src/select/static.ts
+++ b/netbox/project-static/src/select/static.ts
@@ -17,13 +17,16 @@ export function initStaticSelects(): void {
 
 // Initialize color selection fields
 export function initColorSelects(): void {
+  function renderColor(item: TomOption, escape: typeof escape_html) {
+    return `<div><span class="dropdown-item-indicator color-label" style="background-color: #${escape(item.value)}"></span> ${escape(item.text)}</div>`
+  }
+
   for (const select of getElements<HTMLSelectElement>('select.color-select')) {
     new TomSelect(select, {
       ...config,
       render: {
-        option: function (item: TomOption, escape: typeof escape_html) {
-          return `<div style="background-color: #${escape(item.value)}">${escape(item.text)}</div>`;
-        },
+        option: renderColor,
+        item: renderColor,
       },
     });
   }