From 3b5f64a4c3c3c245b404ef44c2b7209bb0f5c63c Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Wed, 14 Dec 2022 14:32:20 -0700
Subject: [PATCH] Implement option groups

---
 .../Et2Select/Et2WidgetWithSelectMixin.ts         | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts b/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts
index 5e52fdd6e6..4f195956ca 100644
--- a/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts
+++ b/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts
@@ -153,7 +153,7 @@ export const Et2widgetWithSelectMixin = <T extends Constructor<LitElement>>(supe
 			let options = html`${this._emptyLabelTemplate()}${this.select_options
 				// Filter out empty values if we have empty label to avoid duplicates
 				.filter(o => this.emptyLabel ? o.value !== '' : o)
-				.map(this._optionTemplate.bind(this))}`;
+				.map(this._groupTemplate.bind(this))}`;
 
 			render(options, temp_target);
 			return Promise.all(([...temp_target.querySelectorAll(":scope > *")].map(item => item.render)))
@@ -268,6 +268,19 @@ export const Et2widgetWithSelectMixin = <T extends Constructor<LitElement>>(supe
                 <span>Override _optionTemplate(). ${option.value} => ${option.label}</span>`;
 		}
 
+		_groupTemplate(option) : TemplateResult
+		{
+			if(!Array.isArray(option.value))
+			{
+				return this._optionTemplate(option);
+			}
+			return html`
+                <sl-menu-label>${option.label}</sl-menu-label>
+                ${option.value.map(this._optionTemplate.bind(this))}
+                <sl-divider></sl-divider>
+			`;
+		}
+
 		/**
 		 * Load extra stuff from the template node.  In particular, we're looking for any <option/> tags added.
 		 *