Et2SelectCat: Add in category colors & icons

api/categories.php

@@ -44,7 +44,7 @@ foreach($categories as $cat)
 	{
 		// Use slightly more specific selector that just class, to allow defaults
 		// if the category has no color
-		$content .= ".egwGridView_scrollarea tr.row_category.cat_{$cat['id']} > td:first-child, .select-cat li.cat_{$cat['id']}, .et2_selectbox ul.chzn-results li.cat_{$cat['id']}, .et2_selectbox ul.chzn-choices li.cat_{$cat['id']}, .nextmatch_header_row .et2_selectbox.select-cat.cat_{$cat['id']} a.chzn-single {border-left-color: {$cat['data']['color']};} .cat_{$cat['id']}.fullline_cat_bg, div.cat_{$cat['id']}, span.cat_{$cat['id']} { background-color: {$cat['data']['color']};} /*{$cat['name']}*/\n";
+		$content .= ".egwGridView_scrollarea tr.row_category.cat_{$cat['id']} > td:first-child, .select-cat li.cat_{$cat['id']}, .et2_selectbox ul.chzn-results li.cat_{$cat['id']}, .et2_selectbox ul.chzn-choices li.cat_{$cat['id']}, .nextmatch_header_row .et2_selectbox.select-cat.cat_{$cat['id']} a.chzn-single , et2-select-cat > .cat_{$cat['id']} {border-left-color: {$cat['data']['color']};} .cat_{$cat['id']}.fullline_cat_bg, div.cat_{$cat['id']}, span.cat_{$cat['id']} { background-color: {$cat['data']['color']};} /*{$cat['name']}*/\n";
 	}
 	if (!empty($cat['data']['icon']))
 	{

api/js/etemplate/Et2Select/Et2Select.ts

@@ -56,6 +56,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS
 				text-indent: 5px;
 			}
 			
+			/* This is the drop-down arrow on the right */
 			::slotted([slot="suffix"]) {
 				font-size: 120% !important;
 				font-weight: bold;
@@ -346,11 +347,42 @@ customElements.define("et2-select-bool", Et2SelectBool);
 
 export class Et2SelectCategory extends Et2Select
 {
+	static get styles()
+	{
+		return [
+			...super.styles,
+			css`
+				::slotted(*) {
+					border-left: 3px solid transparent;
+					}
+			`
+		]
+	}
+
+	static get properties()
+	{
+		return {
+			...super.properties,
+			/**
+			 * Include global categories
+			 */
+			global_categories: {type: Boolean},
+			/**
+			 * Show categories from this application.  If not set, will be the current application
+			 */
+			application: {type: String},
+			/**
+			 * Show categories below this parent category
+			 */
+			parent_cat: {type: Number}
+		}
+	}
+
 	constructor()
 	{
 		super();
 
-		this.select_options = so.cat(this, {other: this.other || []});
+		this.select_options = so.cat(this);
 	}
 }
 

api/js/etemplate/Et2Select/StaticOptions.ts

@@ -229,22 +229,18 @@ export class StaticOptions
 		return this.cached_server_side(widget, 'select-app', options);
 	}
 
-	cat(widget : Et2SelectWidgets, attrs) : SelectOption[]
+	cat(widget : Et2SelectWidgets) : SelectOption[]
 	{
-		// Add in application, if not there
+		var options = [widget.global_categories, /*?*/, widget.application, widget.parent_cat];
-		if(typeof attrs.other == 'undefined')
+
+		if(typeof options[3] == 'undefined')
 		{
-			attrs.other = new Array(4);
+			options[3] = widget.application ||
-		}
-		if(typeof attrs.other[3] == 'undefined')
-		{
-			attrs.other[3] = attrs.application ||
 				// When the widget is first created, it doesn't have a parent and can't find it's instanceManager
 				(widget.getInstanceManager() && widget.getInstanceManager().app) ||
 				widget.egw().app_name();
 		}
-		var options = (attrs.other || []).join(',');
+		return this.cached_server_side(widget, 'select-cat', options.join(','))
-		return this.cached_server_side(widget, 'select-cat', options).map(cat => { cat.class += ' cat_'+cat.value; return cat });
 	}
 
 	country(widget : Et2SelectWidgets, attrs) : SelectOption[]

api/src/Etemplate/Widget/Select.php

@@ -648,12 +648,16 @@ class Select extends Etemplate\Widget
 						'main'  => (int)$cat['main'],
 						'children'	=> $cat['children'] ?? null,
 						//add different class per level to allow different styling for each category level:
-						'class' => "cat_level". $cat['level']
+						'class' => "cat_level" . $cat['level'] . " cat_{$cat['id']}"
 					);
 					// Send data too
 					if(is_array($cat['data']))
 					{
 						$options[$cat['id']] += $cat['data'];
+						if($cat['data']['icon'])
+						{
+							$options[$cat['id']]['icon'] = \admin_categories::icon_url($cat['data']['icon']);
+						}
 					}
 				}
 				// preserve unavailable cats (eg. private user-cats)