From 472ee73dda796835768de022cdd43e8d37534e69 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Thu, 14 Sep 2023 14:30:20 -0600
Subject: [PATCH] Improve styling & behaviour of Et2SelectEmail

---
 api/js/etemplate/Et2Select/Et2Select.ts             |  6 +++---
 api/js/etemplate/Et2Select/SearchMixin.ts           |  6 +++---
 api/js/etemplate/Et2Select/Select/Et2SelectEmail.ts | 13 +++++++------
 api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts       |  6 +++---
 mail/templates/default/app.css                      |  3 ++-
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts
index 340d52aeb7..e87658a0ed 100644
--- a/api/js/etemplate/Et2Select/Et2Select.ts
+++ b/api/js/etemplate/Et2Select/Et2Select.ts
@@ -145,13 +145,13 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 
 			  /* Hide dropdown trigger when multiple & readonly */
 
-			  :host([readonly][multiple]) .select__expand-icon {
+			  :host([readonly][multiple])::part(expand-icon) {
 				display: none;
 			  }
 
 			  /* Style for tag count if rows=1 */
 
-			  :host([readonly][multiple][rows]) .select__tags sl-tag {
+			  :host([readonly][multiple][rows])::part(tags) {
 				position: absolute;
 				right: 0px;
 				top: 1px;
@@ -649,7 +649,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
                     ?removable=${!readonly}
                     ?readonly=${readonly}
                     ?editable=${isEditable}
-                    value=${option.value}
+                    .value=${option.value.replaceAll("___", " ")}
                     @dblclick=${this._handleDoubleClick}
                     @click=${typeof this.onTagClick == "function" ? (e) => this.onTagClick(e, e.target) : nothing}
             >
diff --git a/api/js/etemplate/Et2Select/SearchMixin.ts b/api/js/etemplate/Et2Select/SearchMixin.ts
index f5db4adebc..52343707e0 100644
--- a/api/js/etemplate/Et2Select/SearchMixin.ts
+++ b/api/js/etemplate/Et2Select/SearchMixin.ts
@@ -11,9 +11,9 @@ import {css, CSSResultGroup, html, LitElement, nothing, render, TemplateResult}
 import {cleanSelectOptions, SelectOption} from "./FindSelectOptions";
 import {Validator} from "@lion/form-core";
 import {Et2Tag} from "./Tag/Et2Tag";
-import {SlMenuItem} from "@shoelace-style/shoelace";
 import {StaticOptions} from "./StaticOptions";
 import {dedupeMixin} from "@open-wc/dedupe-mixin";
+import {SlOption} from "@shoelace-style/shoelace";
 
 // Otherwise import gets stripped
 let keep_import : Et2Tag;
@@ -543,9 +543,9 @@ export const Et2WithSearchMixin = dedupeMixin(<T extends Constructor<LitElement>
 
 			if(this.allowFreeEntries)
 			{
-				this.freeEntries.forEach((item : SlMenuItem) =>
+				this.freeEntries.forEach((item : SlOption) =>
 				{
-					if(!options.some(i => i.value == item.value))
+					if(!options.some(i => i.value == item.value.replaceAll("___", " ")))
 					{
 						options.push({value: item.value, label: item.textContent, class: item.classList.toString()});
 					}
diff --git a/api/js/etemplate/Et2Select/Select/Et2SelectEmail.ts b/api/js/etemplate/Et2Select/Select/Et2SelectEmail.ts
index c74f59fb2b..98f4abe300 100644
--- a/api/js/etemplate/Et2Select/Select/Et2SelectEmail.ts
+++ b/api/js/etemplate/Et2Select/Select/Et2SelectEmail.ts
@@ -148,11 +148,6 @@ export class Et2SelectEmail extends Et2Select
 		}
 	}
 
-	connectedCallback()
-	{
-		super.connectedCallback();
-	}
-
 	protected _bindListeners()
 	{
 		super._bindListeners();
@@ -207,6 +202,9 @@ export class Et2SelectEmail extends Et2Select
 	 */
 	_tagTemplate(option, index)
 	{
+		const readonly = (this.readonly || option && typeof (option.disabled) != "undefined" && option.disabled);
+		const isEditable = this.editModeEnabled && !readonly;
+
 		return html`
             <et2-email-tag
                     class=${classMap({
@@ -215,7 +213,10 @@ export class Et2SelectEmail extends Et2Select
                     })}
                     ?.fullEmail=${this.fullEmail}
                     ?.onlyEmail=${this.onlyEmail}
-                    value=${option.value}
+                    ?removable=${!readonly}
+                    ?readonly=${readonly}
+                    ?editable=${isEditable}
+                    .value=${option.value.replaceAll("___", " ")}
             >
                 ${option.getTextLabel().trim()}
             </et2-email-tag>
diff --git a/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts b/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
index fdcd6a3883..fd97f5c776 100644
--- a/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
+++ b/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
@@ -218,15 +218,15 @@ export class Et2EmailTag extends Et2Tag
 	{
 		let content = this.value;
 		// If there's a name, just show the name, otherwise show the email
-		if(!this.onlyEmail && Et2EmailTag.email_cache[this.value])
+		if(!this.onlyEmail && Et2EmailTag.email_cache[content])
 		{
 			// Append current value as email, data may have work & home email in it
-			content = (Et2EmailTag.email_cache[this.value]?.n_fn || "") + " <" + (Et2EmailTag.splitEmail(this.value)?.email || this.value) + ">"
+			content = (Et2EmailTag.email_cache[content]?.n_fn || "") + " <" + (Et2EmailTag.splitEmail(content)?.email || content) + ">"
 		}
 		if (this.onlyEmail)
 		{
 			const split = Et2EmailTag.splitEmail(content);
-			content = split.email || this.value;
+			content = split.email || content;
 		}
 		else if(!this.fullEmail)
 		{
diff --git a/mail/templates/default/app.css b/mail/templates/default/app.css
index a6fa3a13b6..6c27a66c89 100644
--- a/mail/templates/default/app.css
+++ b/mail/templates/default/app.css
@@ -1070,7 +1070,8 @@ div#mail-index_nm.splitter-pane {min-height: 100px;}
 	min-width: 7em;
 	color: darkgrey;
 }
-.mailPreviewHeaders et2-select-email::part(control) {
+
+.mailPreviewHeaders et2-select-email::part(combobox) {
 	border: none;
 }
 #popupMainDiv {height: 100%}