From ff4988b41e2e4149b2f57c16412e96bb545e239e Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Thu, 15 Feb 2024 10:13:01 -0700
Subject: [PATCH] Split dropdown category tree into its own file, get colors
 working in tags

---
 api/js/etemplate/Et2Tree/Et2TreeDropdown.ts   | 26 ++++++++++++-------
 .../Et2Tree/Et2TreeDropdownCategory.ts        | 20 ++++++++++++++
 api/js/etemplate/etemplate2.ts                |  1 +
 3 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 api/js/etemplate/Et2Tree/Et2TreeDropdownCategory.ts

diff --git a/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts b/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
index 3a1185c9c0..88abad03ed 100644
--- a/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
+++ b/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
@@ -1,4 +1,5 @@
-import {html, LitElement, nothing} from "lit";
+import {LitElement, nothing} from "lit";
+import {html, literal, StaticValue} from "lit/static-html.js";
 import {Et2Tree, TreeItemData} from "./Et2Tree";
 import {Et2WidgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin";
 import {property} from "lit/decorators/property.js";
@@ -426,6 +427,17 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
 		`;
 	}
 
+	/**
+	 * Tag used for rendering tags when multiple=true
+	 * Used for creating, finding & filtering options.
+	 * @see createTagNode()
+	 * @returns {string}
+	 */
+	public get tagTag() : StaticValue
+	{
+		return literal`et2-tag`;
+	}
+
 	tagsTemplate()
 	{
 		const value = this.getValueAsArray();
@@ -443,9 +455,9 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
 		const isEditable = false && !readonly;
 		const image = option ? this.iconTemplate(option?.option ?? option) : null;
 		const isValid = true;
-
+		const tagName = this.tagTag;
 		return html`
-            <et2-tag
+            <${tagName}
                     part="tag"
                     exportparts="
                       base:tag__base,
@@ -469,7 +481,7 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
             >
                 ${image ?? nothing}
                 ${(option.label ?? option.text).trim()}
-            </et2-tag>
+            </${tagName}>
 		`;
 	}
 
@@ -556,8 +568,4 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
 	}
 }
 
-customElements.define("et2-tree-dropdown", Et2TreeDropdown);
-
-customElements.define("et2-tree-cat", class extends Et2TreeDropdown
-{
-});
\ No newline at end of file
+customElements.define("et2-tree-dropdown", Et2TreeDropdown);
\ No newline at end of file
diff --git a/api/js/etemplate/Et2Tree/Et2TreeDropdownCategory.ts b/api/js/etemplate/Et2Tree/Et2TreeDropdownCategory.ts
new file mode 100644
index 0000000000..df0f264c9e
--- /dev/null
+++ b/api/js/etemplate/Et2Tree/Et2TreeDropdownCategory.ts
@@ -0,0 +1,20 @@
+/**
+ * Use a custom tag for when multiple=true
+ *
+ * @returns {string}
+ */
+import {literal, StaticValue} from "lit/static-html.js";
+import {Et2TreeDropdown} from "./Et2TreeDropdown";
+import {Et2CategoryTag} from "../Et2Select/Tag/Et2CategoryTag";
+
+export class Et2TreeDropdownCategory extends Et2TreeDropdown
+{
+	private keep_import : Et2CategoryTag
+
+	public get tagTag() : StaticValue
+	{
+		return literal`et2-category-tag`;
+	}
+}
+
+customElements.define("et2-tree-cat", Et2TreeDropdownCategory);
\ No newline at end of file
diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts
index 97c59854fa..ca4b3976ee 100644
--- a/api/js/etemplate/etemplate2.ts
+++ b/api/js/etemplate/etemplate2.ts
@@ -106,6 +106,7 @@ import "./Et2Textbox/Et2Password";
 import './Et2Textbox/Et2Searchbox';
 import "./Et2Tree/Et2Tree";
 import "./Et2Tree/Et2TreeDropdown";
+import "./Et2Tree/Et2TreeDropdownCategory";
 import "./Et2Tree/Et2MultiselectTree"