Feature umb-ref-item

For use within the Item Picker modal.

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';

src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/index.ts

@@ -0,0 +1 @@
+export * from './ref-item.element.js';

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;
+	}
+}

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>`,

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;
 };