Et2TreeDropdown / Et2SelectCategory: Icons & category colors

api/js/etemplate/Et2Select/Select/Et2SelectCategory.ts

@@ -5,7 +5,8 @@
  */
 import {html, literal, StaticValue} from "lit/static-html.js";
 import {property} from "lit/decorators/property.js";
-import {css, PropertyValues, unsafeCSS} from "lit";
+import {until} from "lit/directives/until.js";
+import {css, nothing, PropertyValues, TemplateResult, unsafeCSS} from "lit";
 import {Et2TreeDropdown} from "../../Et2Tree/Et2TreeDropdown";
 import {Et2CategoryTag} from "../Tag/Et2CategoryTag";
 import {Et2StaticSelectMixin, StaticOptions as so} from "../StaticOptions";
@@ -26,15 +27,28 @@ export class Et2SelectCategory extends Et2StaticSelectMixin(Et2TreeDropdown)
 					--category-color: transparent;
 				}
 
+				/* Color on tree items */
 				::part(item-item) {
 					border-inline-start: 4px solid transparent;
 					border-inline-start-color: var(--category-color, transparent);
 				}
 
+				/* Color on tags */
 				:host(:not([multiple])) .tree_tag::part(base) {
 					border-inline-start: 4px solid transparent;
 					border-inline-start-color: var(--category-color, transparent);
 				}
+
+				/* Color on single value */
+
+				:host(:not([multiple])) .tree-dropdown:not(.tree-dropdown--has-value) .tree-dropdown__combobox {
+					padding-inline-start: 3px;
+				}
+
+				:host(:not([multiple])) .tree-dropdown--has-value .tree-dropdown__combobox {
+					border-inline-start: 4px solid;
+					border-inline-start-color: var(--category-color, var(--sl-input-border-color));
+				}
 			`
 		];
 	}
@@ -81,12 +95,6 @@ export class Et2SelectCategory extends Et2StaticSelectMixin(Et2TreeDropdown)
 		this.fetchComplete = so.cat(this).then(options => {
 			this.select_options = options;
 			this.requestUpdate("select_options");
-
-			if (this._tree)
-			{
-				this._tree._selectOptions = options
-				this._tree.requestUpdate();
-			}
 		});
 	}
 
@@ -161,6 +169,30 @@ export class Et2SelectCategory extends Et2StaticSelectMixin(Et2TreeDropdown)
 		// Just re-draw to get the colors & icon
 		this.requestUpdate();
 	}
+
+	render()
+	{
+		let style : Promise<TemplateResult> | symbol = nothing;
+		if(this.value && !this.multiple)
+		{
+			style = this.fetchComplete.then(() =>
+			{
+				const option = this.optionSearch(this.value, this.select_options, 'value', 'children');
+				if(option)
+				{
+					const css = ".tree-dropdown--has-value .tree-dropdown__combobox {" +
+						"--category-color: var(--cat-" + option.value + "-color ,var(--sl-input-border-color));" +
+						"}\n";
+					return html`
+                        <style>${unsafeCSS(css)}</style>`;
+				}
+			});
+		}
+		return html`
+            ${until(style, nothing)}
+            ${super.render()}
+		`;
+	}
 }
 
 // @ts-ignore Type problems because of Et2WidgetWithSelectMixin in parent

api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts

@@ -54,6 +54,7 @@ export default css`
 	}
 	.tree-dropdown__combobox {
 		min-height: calc(var(--sl-input-height-medium) - 2 * var(--sl-input-border-width));
+		flex: 1 1 auto;
 		
 		display: flex;
 		flex-direction: row;
@@ -128,6 +129,9 @@ export default css`
 
 	/* Single */
 
+	.tree-dropdown__combobox > et2-image {
+		padding-right: var(--sl-spacing-medium);
+	}
 
 	/* End single */
 

api/js/etemplate/Et2Tree/Et2TreeDropdown.ts

@@ -717,6 +717,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
 	inputTemplate()
 	{
 		let placeholder = this.egw().lang("search");
+		let image : symbol | TemplateResult = nothing;
 		if(this.disabled || this.readonly || (this.open && this.value))
 		{
 			placeholder = "";
@@ -725,7 +726,13 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
 		{
 			placeholder = this.emptyLabel || this.placeholder;
 		}
+		if(!this.multiple && this.value && !this.open)
+		{
+			const option = this.optionSearch(this.value, this.select_options, 'value', 'children');
+			image = option ? this.iconTemplate(option?.option ?? option) : null;
+		}
 		return html`
+            ${image}
             <input id="search" type="text" part="input"
                    class="tree-dropdown__search search__input"
                    autocomplete="off"