Et2TreeDropdownCategory: Get category colors working

api/js/etemplate/Et2Tree/Et2Tree.ts

@@ -577,6 +577,15 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
 		return this.getNode(_nodeId)?.userdata?.find(elem => elem.name === _name)?.content
 	}
 
+	/**
+	 * Overridable, add style
+	 * @returns {TemplateResult<1>}
+	 */
+	styleTemplate()
+	{
+		return html``;
+	}
+
 	//this.selectOptions = find_select_options(this)[1];
 	_optionTemplate(selectOption: TreeItemData): TemplateResult<1>
 	{
@@ -606,9 +615,10 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
 		return html`
             <sl-tree-item
                     part="item"
-                    exportparts="checkbox, label"
+                    exportparts="checkbox, label, item:item-item"
                     id=${selectOption.id}
                     title=${selectOption.tooltip || nothing}
+                    class=${selectOption.class || nothing}
                     ?selected=${typeof this.value == "string" && this.value == value || Array.isArray(this.value) && this.value.includes(value)}
                     ?expanded=${expandState}
                     ?lazy=${lazy}
@@ -637,7 +647,9 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
 	public render(): unknown
 	{
 		return html`
+            ${this.styleTemplate()}
             <sl-tree
+                    part="tree"
                     .selection=${this.multiple ? "multiple" : "single"}
                     @sl-selection-change=${
                             (event: any) => {

api/js/etemplate/Et2Tree/Et2TreeDropdown.ts

@@ -1,4 +1,4 @@
-import {LitElement, nothing} from "lit";
+import {LitElement, nothing, TemplateResult} from "lit";
 import {html, literal, StaticValue} from "lit/static-html.js";
 import {Et2Tree, TreeItemData, TreeSearchResult} from "./Et2Tree";
 import {Et2WidgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin";
@@ -493,6 +493,11 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
 		`;
 	}
 
+	styleTemplate() : TemplateResult
+	{
+		return html``;
+	}
+
 	/**
 	 * Tag used for rendering tags when multiple=true
 	 * Used for creating, finding & filtering options.
@@ -624,11 +629,13 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
                                 .id=${this.id + "_tree"}
                                 ._parent=${this}
                                 class="tree-dropdown__tree"
+                                exportparts=""
                                 ?readonly=${this.readonly}
                                 ?disabled=${this.disabled}
                                 value=${this.multiple ? nothing : this.value}
                                 ._selectOptions=${this.select_options}
                                 .actions=${this.actions}
+                                .styleTemplate=${() => this.styleTemplate()}
 
                                 @sl-selection-change=${this.handleTreeChange}
                         >

api/js/etemplate/Et2Tree/Et2TreeDropdownCategory.ts

@@ -3,15 +3,31 @@
  *
  * @returns {string}
  */
-import {literal, StaticValue} from "lit/static-html.js";
+import {html, literal, StaticValue} from "lit/static-html.js";
 import {property} from "lit/decorators/property.js";
-import {PropertyValues} from "lit";
+import {css, PropertyValues, unsafeCSS} from "lit";
 import {Et2TreeDropdown} from "./Et2TreeDropdown";
 import {Et2CategoryTag} from "../Et2Select/Tag/Et2CategoryTag";
 
 export class Et2TreeDropdownCategory extends Et2TreeDropdown
 {
 
+	static get styles()
+	{
+		return [
+			super.styles,
+			css`
+				:host {
+					--category-color: transparent;
+				}
+
+				::part(item-item) {
+					border-inline-start: 4px solid transparent;
+					border-inline-start-color: var(--category-color, transparent);
+				}
+			`
+		];
+	}
 	/**
 	 * Application to get categories from
 	 */
@@ -57,6 +73,28 @@ export class Et2TreeDropdownCategory extends Et2TreeDropdown
 	{
 		return literal`et2-category-tag`;
 	}
+
+	/**
+	 * Set CSS category colors
+	 * @returns {TemplateResult}
+	 * @protected
+	 */
+	protected styleTemplate()
+	{
+		let css = "";
+		const catColor = (option) =>
+		{
+			css += ".cat_" + option.value + " {--category-color: " + (option.data?.color || "transparent") + ";}\n";
+
+			option.children?.forEach((option) => catColor(option))
+		}
+		this.select_options.forEach((option => catColor(option)));
+		// @formatter:off
+		return html`
+            <style>${unsafeCSS(css)}</style>
+		`;
+		// @formatter:on
+	}
 }
 
 // @ts-ignore Type problems because of Et2WidgetWithSelectMixin in parent

api/src/Etemplate/Widget/Tree.php

@@ -552,7 +552,8 @@ class Tree extends Etemplate\Widget
 				'value' => $cat['id'],
 				'label' => $s,
 				'icon'  => $cat['data']['icon'] ?? '',
-				'title' => $cat['description']
+				'title' => $cat['description'],
+				'class' => "cat_${cat['id']}"
 			);
 		if(!empty($cat['children']))
 		{