From d58a0dcccf3af5022efc1a953860f863823916cb Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 20 Mar 2024 18:35:59 +0000
Subject: [PATCH] Feature `umb-ref-item`

For use within the Item Picker modal.
---
 .../src/packages/core/components/index.ts     |  1 +
 .../core/components/ref-item/index.ts         |  1 +
 .../components/ref-item/ref-item.element.ts   | 75 +++++++++++++++++++
 .../item-picker/item-picker-modal.element.ts  | 34 ++++++---
 .../modal/token/item-picker-modal.token.ts    |  3 +-
 5 files changed, 102 insertions(+), 12 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
index a79524f077..a47b5370bc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
@@ -30,4 +30,5 @@ export * from './input-upload-field/index.js';
 export * from './multiple-color-picker-input/index.js';
 export * from './multiple-text-string-input/index.js';
 export * from './popover-layout/index.js';
+export * from './ref-item/index.js';
 export * from './table/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/index.ts
new file mode 100644
index 0000000000..2ba7f18300
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/index.ts
@@ -0,0 +1 @@
+export * from './ref-item.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts
new file mode 100644
index 0000000000..04cdbaf84a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts
@@ -0,0 +1,75 @@
+import { html, customElement, css, property, when, nothing, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+import { UUIRefElement, UUIRefEvent, UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui';
+
+@customElement('umb-ref-item')
+export class UmbRefItemElement extends UmbElementMixin(UUIRefElement) {
+	@property({ type: String })
+	name = '';
+
+	@property({ type: String })
+	detail = '';
+
+	@property({ type: String })
+	icon = '';
+
+	constructor() {
+		super();
+
+		this.selectable = true;
+
+		this.addEventListener(UUIRefEvent.OPEN, () => this.dispatchEvent(new Event('click')));
+	}
+
+	public render() {
+		return html`
+			<button
+				type="button"
+				id="btn-item"
+				tabindex="0"
+				@click=${this.handleOpenClick}
+				@keydown=${this.handleOpenKeydown}
+				?disabled=${this.disabled}>
+				${when(
+					this.icon,
+					() => html`<span id="icon"><uui-icon name=${this.icon ?? ''}></uui-icon></span>`,
+					() => nothing,
+				)}
+				<div id="info">
+					<div id="name">${this.name}</div>
+					<small id="detail">${this.detail}</small>
+				</div>
+			</button>
+			<div id="select-border"></div>
+			<slot></slot>
+		`;
+	}
+
+	static styles = [
+		...UUIRefElement.styles,
+		...UUIRefNodeElement.styles,
+		css`
+			:host {
+				padding: calc(var(--uui-size-4) + 1px);
+			}
+
+			#btn-item {
+				text-decoration: none;
+				color: inherit;
+				align-self: stretch;
+				line-height: normal;
+
+				display: flex;
+				position: relative;
+				align-items: center;
+				cursor: pointer;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-ref-item': UmbRefItemElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/item-picker/item-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/item-picker/item-picker-modal.element.ts
index 893a1f9797..62e3788c6b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/item-picker/item-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/item-picker/item-picker-modal.element.ts
@@ -1,4 +1,12 @@
-import { css, html, customElement, repeat, nothing, when } from '@umbraco-cms/backoffice/external/lit';
+import {
+	css,
+	html,
+	customElement,
+	repeat,
+	nothing,
+	when,
+	ifDefined,
+} from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbItemPickerModalData, UmbItemPickerModel } from '@umbraco-cms/backoffice/modal';
@@ -24,16 +32,20 @@ export class UmbItemPickerModalElement extends UmbModalBaseElement<UmbItemPicker
 						items.length,
 						() => html`
 							<uui-box>
-								${repeat(
-									items,
-									(item) => item.value,
-									(item) => html`
-										<uui-button @click=${() => this.#submit(item)} look="placeholder" label="${item.label}">
-											<h4>${item.label}</h4>
-											<p>${item.description}</p>
-										</uui-button>
-									`,
-								)}
+								<uui-ref-list>
+									${repeat(
+										items,
+										(item) => item.value,
+										(item) => html`
+											<umb-ref-item
+												name=${item.label}
+												detail=${ifDefined(item.description)}
+												icon=${ifDefined(item.icon)}
+												@click=${() => this.#submit(item)}>
+											</umb-ref-item>
+										`,
+									)}
+								</uui-ref-list>
 							</uui-box>
 						`,
 						() => html`<p>There are no items to select.</p>`,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/item-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/item-picker-modal.token.ts
index c55a63cb8f..365c2f8088 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/item-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/item-picker-modal.token.ts
@@ -6,8 +6,9 @@ export type UmbItemPickerModalData = {
 };
 
 export type UmbItemPickerModel = {
-	label: string;
 	description?: string;
+	icon?: string;
+	label: string;
 	value: string;
 };