From d8d984701253b33acfd0bb77fc856711bfbf4ad9 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Fri, 26 Jul 2024 10:16:49 -0600
Subject: [PATCH] Fix Et2TreeDropDown did not properly handle required

---
 .../Et2Tree/Et2TreeDropdown.styles.ts         |  4 +++
 api/js/etemplate/Et2Tree/Et2TreeDropdown.ts   | 33 +++++++++++++++++--
 api/js/etemplate/Validators/Validator.ts      |  2 +-
 api/templates/default/etemplate2.css          |  1 +
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts b/api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts
index f6f0f60de7..971acfda28 100644
--- a/api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts
+++ b/api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts
@@ -77,6 +77,10 @@ export default css`
 		box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
 	}
 
+	:host([required]) .tree-dropdown__combobox {
+		background-color: var(--background-required);
+	}
+
 	/* Trigger */
 
 	.tree-dropdown__expand-icon {
diff --git a/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts b/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
index c08c23fb02..95216cd543 100644
--- a/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
+++ b/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
@@ -1,4 +1,4 @@
-import {LitElement, nothing, TemplateResult} from "lit";
+import {LitElement, nothing, PropertyValues, TemplateResult} from "lit";
 import {html, literal, StaticValue} from "lit/static-html.js";
 import {Et2Tree, TreeItemData, TreeSearchResult} from "./Et2Tree";
 import {Et2WidgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin";
@@ -13,6 +13,7 @@ import styles from "./Et2TreeDropdown.styles";
 import {Et2Tag} from "../Et2Select/Tag/Et2Tag";
 import {SearchMixin, SearchResult, SearchResultsInterface} from "../Et2Widget/SearchMixin";
 import {Et2InputWidgetInterface} from "../Et2InputWidget/Et2InputWidget";
+import {Required} from "../Validators/Required";
 
 
 interface TreeSearchResults extends SearchResultsInterface<TreeSearchResult>
@@ -113,11 +114,37 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
 		document.removeEventListener("click", this.handleDocumentClick);
 	}
 
-	updated()
+	updated(changedProperties : PropertyValues)
 	{
+		super.updated(changedProperties);
+
+		// required changed, add / remove validator
+		if(changedProperties.has('required'))
+		{
+			// Remove all existing Required validators (avoids duplicates)
+			this.validators = (this.validators || []).filter((validator) => !(validator instanceof Required))
+			if(this.required)
+			{
+				this.validators.push(new Required());
+			}
+		}
+
+		if(changedProperties.has("value"))
+		{
+			// Base off this.value, not this.getValue(), to ignore readonly
+			this.classList.toggle("hasValue", !(this.value == null || this.value == ""));
+		}
+
+		// pass aria-attributes to our input node
+		if(changedProperties.has('ariaLabel') || changedProperties.has('ariaDescription'))
+		{
+			this._setAriaAttributes();
+		}
+
 		// @ts-ignore Popup sometimes loses the anchor which breaks the sizing
 		this._popup.handleAnchorChange();
 	}
+
 	/** Selected tree leaves */
 	@property()
 	set value(new_value : string | string[])
@@ -610,7 +637,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
                             ?disabled=${this.disabled}
                     >
                         <div
-                                part="combobox"
+                                part="combobox control"
                                 class="tree-dropdown__combobox"
                                 slot="anchor"
                                 @keydown=${this.handleComboboxKeyDown}
diff --git a/api/js/etemplate/Validators/Validator.ts b/api/js/etemplate/Validators/Validator.ts
index 024ad4090f..c1e72dd15b 100644
--- a/api/js/etemplate/Validators/Validator.ts
+++ b/api/js/etemplate/Validators/Validator.ts
@@ -5,7 +5,7 @@ export class Validator
 	 * @param {?} [param]
 	 * @param {Object.<string,?>} [config]
 	 */
-	constructor(param, config)
+	constructor(param?, config?)
 	{
 
 		/** @type {?} */
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 5a17138b03..347539641b 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -2010,6 +2010,7 @@ img.vfsMimeIcon[src*="/etemplate/thumbnail.php"] {
     /* selects */
 [required]:not(.hasValue)::part(control) {
     background-color: #ffffd0;
+	--sl-input-background-color: #ffffd0;
 }
 
 td.et2_required {