From c91b57b3228d7264e68803606814aa991656ed23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 15 May 2024 22:32:50 +0200
Subject: [PATCH] binding thumbnail

---
 .../block-type-card/block-type-card.element.ts      | 13 +++++++++----
 .../input-block-type/input-block-type.element.ts    |  1 +
 .../src/packages/block/block-type/types.ts          |  1 +
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts
index da664eabd4..9ede814398 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts
@@ -18,6 +18,9 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 	@property({ type: String, attribute: false })
 	href?: string;
 
+	@property({ type: String, attribute: false })
+	iconFile?: string;
+
 	@property({ type: String, attribute: false })
 	iconColor?: string;
 
@@ -41,7 +44,7 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 	private _elementTypeKey?: string | undefined;
 
 	@state()
-	_fallbackName?: string;
+	_name?: string;
 
 	@state()
 	_fallbackIcon?: string | null;
@@ -53,7 +56,7 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 			const item = items[0];
 			if (item) {
 				this._fallbackIcon = item.icon;
-				this._fallbackName = item.name;
+				this._name = item.name;
 			}
 		});
 	}
@@ -63,9 +66,11 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 		return html`
 			<uui-card-block-type
 				href=${ifDefined(this.href)}
-				.name=${this._fallbackName ?? 'Unknown'}
+				.name=${this._name ?? 'Unknown'}
 				.background=${this.backgroundColor}>
-				<umb-icon name=${this._fallbackIcon ?? ''} style="color:${this.iconColor}"></umb-icon>
+				${this.iconFile
+					? html`<img src=${this.iconFile} alt="" />`
+					: html`<umb-icon name=${this._fallbackIcon ?? ''} style="color:${this.iconColor}"></umb-icon>`}
 				<slot name="actions" slot="actions"> </slot>
 			</uui-card-block-type>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts
index 94bdbaa328..521dcc51b0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts
@@ -149,6 +149,7 @@ export class UmbInputBlockTypeElement<
 			<umb-block-type-card
 				.data-umb-content-element-key=${block.contentElementTypeKey}
 				.name=${block.label}
+				.iconFile=${block.thumbnail}
 				.iconColor=${block.iconColor}
 				.backgroundColor=${block.backgroundColor}
 				.href="${this.workspacePath}edit/${block.contentElementTypeKey}"
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts
index 9357b666f1..06bb9dce3c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts
@@ -6,6 +6,7 @@ export interface UmbBlockTypeBaseModel {
 	label?: string;
 	//view?: string; // TODO: remove/replace with custom element manifest type for block list.
 	//stylesheet?: string; // TODO: remove/replace with custom element manifest type for block list.
+	thumbnail?: string;
 	iconColor?: string;
 	backgroundColor?: string;
 	editorSize?: UUIModalSidebarSize;