From b1795da0eee6a07ccae3267e1687b711e0603b5c Mon Sep 17 00:00:00 2001
From: Lee Kelleher <leekelleher@users.noreply.github.com>
Date: Thu, 17 Apr 2025 08:57:19 +0100
Subject: [PATCH] Adds `searchResultItem` element for Media items (#19058)

* Adds `searchResultItem` for Media

Includes "trashed" state tag

* Removes trailing whitespace from manifest name

---------

Co-authored-by: Andy Butland <abutland73@gmail.com>
---
 .../packages/media/media/search/manifests.ts  |  1 +
 .../media-search-result-item.element.ts       | 66 +++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media/search/media-search-result-item.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/search/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/search/manifests.ts
index 82b25aa8b4..62d6003c17 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/search/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/search/manifests.ts
@@ -16,6 +16,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Media Search Result Item',
 		alias: 'Umb.SearchResultItem.Media',
 		type: 'searchResultItem',
+		element: () => import('./media-search-result-item.element.js'),
 		forEntityTypes: [UMB_MEDIA_ENTITY_TYPE],
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/search/media-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/search/media-search-result-item.element.ts
new file mode 100644
index 0000000000..d749dd7984
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/search/media-search-result-item.element.ts
@@ -0,0 +1,66 @@
+import type { UmbMediaItemModel } from '../repository/types.js';
+import { classMap, css, customElement, html, nothing, property, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UmbSearchResultItemModel } from '@umbraco-cms/backoffice/search';
+
+@customElement('umb-media-search-result-item')
+export class UmbMediaSearchResultItemElement extends UmbLitElement {
+	@property({ type: Object })
+	item?: UmbSearchResultItemModel & UmbMediaItemModel;
+
+	override render() {
+		if (!this.item) return nothing;
+		const classes = { trashed: this.item.isTrashed };
+		return html`
+			${when(
+				this.item.mediaType.icon ?? this.item.icon,
+				(icon) => html`<umb-icon name=${icon}></umb-icon>`,
+				() => html`<uui-icon name="icon-picture"></uui-icon>`,
+			)}
+			<span class=${classMap(classes)}>${this.item.name}</span>
+			<div class="extra">
+				${when(
+					this.item.isTrashed,
+					() => html`
+						<uui-tag look="secondary">
+							<umb-localize key="mediaPicker_trashed">Trashed</umb-localize>
+						</uui-tag>
+					`,
+				)}
+			</div>
+		`;
+	}
+
+	static override styles = [
+		css`
+			:host {
+				border-radius: var(--uui-border-radius);
+				outline-offset: -3px;
+				padding: var(--uui-size-space-3) var(--uui-size-space-5);
+
+				display: flex;
+				gap: var(--uui-size-space-3);
+				align-items: center;
+
+				width: 100%;
+
+				> span {
+					flex: 1;
+
+					&.trashed {
+						text-decoration: line-through;
+						opacity: 0.6;
+					}
+				}
+			}
+		`,
+	];
+}
+
+export { UmbMediaSearchResultItemElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-media-search-result-item': UmbMediaSearchResultItemElement;
+	}
+}