From 7ea76b2e126ee014a6f3e4219fcf349e404da559 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Wed, 12 Jun 2024 14:47:13 -0600
Subject: [PATCH] Documentation for Et2FavoritesMenu

---
 .../Et2Favorites/Et2FavoritesMenu.md          |  5 +++
 .../Et2Favorites/Et2FavoritesMenu.ts          | 36 +++++++++++++++----
 2 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 api/js/etemplate/Et2Favorites/Et2FavoritesMenu.md

diff --git a/api/js/etemplate/Et2Favorites/Et2FavoritesMenu.md b/api/js/etemplate/Et2Favorites/Et2FavoritesMenu.md
new file mode 100644
index 0000000000..ef45a83326
--- /dev/null
+++ b/api/js/etemplate/Et2Favorites/Et2FavoritesMenu.md
@@ -0,0 +1,5 @@
+```html:preview
+<et2-favorites-menu>
+</et2-favorites-menu>
+```
+
diff --git a/api/js/etemplate/Et2Favorites/Et2FavoritesMenu.ts b/api/js/etemplate/Et2Favorites/Et2FavoritesMenu.ts
index 0c42dec913..922e991223 100644
--- a/api/js/etemplate/Et2Favorites/Et2FavoritesMenu.ts
+++ b/api/js/etemplate/Et2Favorites/Et2FavoritesMenu.ts
@@ -1,4 +1,4 @@
-import {css, html, LitElement, TemplateResult} from "lit";
+import {css, html, LitElement, nothing, TemplateResult} from "lit";
 import {customElement} from "lit/decorators/custom-element.js";
 import {Et2Widget} from "../Et2Widget/Et2Widget";
 import {Favorite} from "./Favorite";
@@ -6,10 +6,19 @@ import {property} from "lit/decorators/property.js";
 import {until} from "lit/directives/until.js";
 import {repeat} from "lit/directives/repeat.js";
 
+/**
+ * @summary A menu listing a user's favorites.  Populated from the user's preferences.
+ *
+ * @dependency sl-menu
+ * @dependency sl-menu-item
+ * @dependency sl-menu-label
+ * @dependency et2-image
+ *
+ * @slot - Add additional menu items
+ */
 @customElement("et2-favorites-menu")
 export class Et2FavoritesMenu extends Et2Widget(LitElement)
 {
-
 	static get styles()
 	{
 		return [
@@ -29,10 +38,21 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
 		]
 	};
 
+	/**
+	 * The current application we're showing favorites for.
+	 *
+	 * @type {string}
+	 */
 	@property()
 	application : string;
 
-	private favorites : { [name : string] : Favorite }
+	private favorites : { [name : string] : Favorite } = {
+		'blank': {
+			name: typeof this.egw()?.lang == "function" ? this.egw().lang("No filters") : "No filters",
+			state: {},
+			group: false
+		}
+	};
 	private loadingPromise = Promise.resolve();
 
 	connectedCallback()
@@ -76,12 +96,12 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
 
 	protected menuItemTemplate(name : string, favorite : Favorite) : TemplateResult
 	{
-		let is_admin = (typeof this.egw().app('admin') != "undefined");
+		let is_admin = (typeof this.egw()?.app == "function") && (typeof this.egw()?.app('admin') != "undefined");
 
 		//@ts-ignore option.group does not exist
 		let icon = (favorite.group !== false && !is_admin || ['blank', '~add~'].includes(name)) ? "" : html`
             <et2-image slot="suffix" src="trash" icon @click=${this.handleDelete}
-                       statustext="${this.egw().lang("Delete")}"></et2-image>`;
+                       statustext="${this.egw()?.lang("Delete") ?? "Delete"}"></et2-image>`;
 
 		return html`
             <sl-menu-item value="${name}">
@@ -93,7 +113,8 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
 	protected loadingTemplate()
 	{
 		return html`
-            <sl-menu-item loading>${this.egw().lang("Loading")}</sl-menu-item>`;
+            <sl-menu-item loading>${typeof this.egw()?.lang == "function" ? this.egw().lang("Loading") : "Loading"}
+            </sl-menu-item>`;
 	}
 
 	render()
@@ -104,7 +125,10 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
                 <sl-menu
                         @sl-select=${this.handleSelect}
                 >
+                    ${this.label ? html`
+                        <sl-menu-label>${this.label}</sl-menu-label>` : nothing}
                     ${repeat(Object.keys(this.favorites), (i) => this.menuItemTemplate(i, this.favorites[i]))}
+                    <slot></slot>
                 </sl-menu>
 			`;
 		});