From 0f139fb2573118d8da69f8ec89105203da5d6ffd Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Mon, 26 Feb 2024 16:54:07 -0700
Subject: [PATCH] Et2TreeDropdown: Single value tag takes full width

---
 .../Et2Tree/Et2TreeDropdown.styles.ts         | 13 +++++++
 api/js/etemplate/Et2Tree/Et2TreeDropdown.ts   | 38 ++++++++++++++++++-
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts b/api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts
index e4b4863961..7d34b26f4b 100644
--- a/api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts
+++ b/api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts
@@ -105,6 +105,7 @@ export default css`
 		display: flex;
 		flex: 2 1 auto;
 		flex-wrap: wrap;
+		align-content: center;
 		gap: 0.1rem 0.5rem;
 		min-height: var(--sl-input-height-medium);
 		max-height: calc(var(--height, 5) * var(--sl-input-height-medium));
@@ -143,6 +144,18 @@ export default css`
 		cursor: default;
 	}
 
+	/* tag takes full width when widget is not multiple and has value and does not have focus */
+
+	:host(:not([multiple])) .tree-dropdown--has-value .tree-dropdown__search {
+		display: none;
+	}
+
+	:host(:not([multiple])) .tree-dropdown--focused .tree-dropdown__search,
+	:host(:not([multiple])) .tree-dropdown--open .tree-dropdown__search {
+		display: initial;
+		flex-grow: 0;
+	}
+
 	.tree-dropdown__suffix {
 		order: 20;
 	}
diff --git a/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts b/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
index a2844c99d0..28f457fbb6 100644
--- a/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
+++ b/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
@@ -85,8 +85,22 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
 	constructor()
 	{
 		super();
-		this.multiple = false;
 		this.__value = [];
+
+		this.handleDocumentClick = this.handleDocumentClick.bind(this);
+	}
+
+	connectedCallback()
+	{
+		super.connectedCallback();
+
+		document.addEventListener("click", this.handleDocumentClick);
+	}
+
+	disconnectedCallback()
+	{
+		super.disconnectedCallback();
+		document.removeEventListener("click", this.handleDocumentClick);
 	}
 
 	updated()
@@ -304,6 +318,24 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
 		}
 	}
 
+	protected handleDocumentClick(event)
+	{
+		if(event.target == this || event.composedPath().includes(this))
+		{
+			return
+		}
+		if(this.open)
+		{
+			event.preventDefault();
+			this.hide()
+		}
+		else
+		{
+			this.blur();
+		}
+
+	}
+
 	private handleSearchFocus()
 	{
 		this.hasFocus = true;
@@ -519,6 +551,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
 		const hasLabelSlot = this.hasSlotController.test('label');
 		const hasHelpTextSlot = this.hasSlotController.test('help-text');
 		const hasLabel = this.label ? true : !!hasLabelSlot;
+		const hasValue = this.value && this.value.length > 0;
 		const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
 		const isPlaceholderVisible = this.placeholder && this.value.length === 0 && !this.disabled && !this.readonly;
 
@@ -550,7 +583,8 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
                                 'tree-dropdown--readonly': this.readonly,
                                 'tree-dropdown--focused': this.hasFocus,
                                 'tree-dropdown--placeholder-visible': isPlaceholderVisible,
-                                'tree-dropdown--searching': this.treeOrSearch == "search"
+                                'tree-dropdown--searching': this.treeOrSearch == "search",
+                                'tree-dropdown--has-value': hasValue
                             })}
                             flip
                             shift