Adds Item Picker modal

This can be reused for selecting a single option from a list of items.
Extensible in future iterations.

src/Umbraco.Web.UI.Client/src/packages/core/modal/common/item-picker/item-picker-modal.element.ts

@@ -0,0 +1,80 @@
+import { css, html, customElement, repeat, nothing, when } 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';
+
+@customElement('umb-item-picker-modal')
+export class UmbItemPickerModalElement extends UmbModalBaseElement<UmbItemPickerModalData, UmbItemPickerModel> {
+	#close() {
+		this.modalContext?.reject();
+	}
+
+	#submit(item: UmbItemPickerModel) {
+		this.modalContext?.setValue(item);
+		this.modalContext?.submit();
+	}
+
+	render() {
+		if (!this.data) return nothing;
+		const items = this.data.items;
+		return html`
+			<umb-body-layout headline=${this.data.headline}>
+				<div>
+					${when(
+						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-box>
+						`,
+						() => html`<p>There are no items to select.</p>`,
+					)}
+				</div>
+				<div slot="actions">
+					<uui-button @click=${this.#close} label="${this.localize.term('general_close')}"></uui-button>
+				</div>
+			</umb-body-layout>
+		`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			uui-box > uui-button {
+				display: block;
+				--uui-button-content-align: flex-start;
+			}
+
+			uui-box > uui-button:not(:last-of-type) {
+				margin-bottom: var(--uui-size-space-5);
+			}
+
+			h4 {
+				text-align: left;
+				margin: 0.5rem 0;
+			}
+
+			p {
+				text-align: left;
+				margin: 0 0 0.5rem 0;
+			}
+		`,
+	];
+}
+
+export default UmbItemPickerModalElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-item-picker-modal': UmbItemPickerModalElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts

@@ -37,6 +37,12 @@ const modals: Array<ManifestModal> = [
 		name: 'Embedded Media Modal',
 		js: () => import('./embedded-media/embedded-media-modal.element.js'),
 	},
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.ItemPicker',
+		name: 'Item Picker Modal',
+		element: () => import('./item-picker/item-picker-modal.element.js'),
+	},
 ];
 
 export const manifests = [...modals];

src/Umbraco.Web.UI.Client/src/packages/core/modal/token/index.ts

@@ -6,6 +6,7 @@ export * from './embedded-media-modal.token.js';
 export * from './entity-user-permission-settings-modal.token.js';
 export * from './examine-fields-settings-modal.token.js';
 export * from './icon-picker-modal.token.js';
+export * from './item-picker-modal.token.js';
 export * from './link-picker-modal.token.js';
 export * from './media-tree-picker-modal.token.js';
 export * from './media-type-picker-modal.token.js';

src/Umbraco.Web.UI.Client/src/packages/core/modal/token/item-picker-modal.token.ts

@@ -0,0 +1,22 @@
+import { UmbModalToken } from './modal-token.js';
+
+export type UmbItemPickerModalData = {
+	headline: string;
+	items: Array<UmbItemPickerModel>;
+};
+
+export type UmbItemPickerModel = {
+	label: string;
+	description?: string;
+	value: string;
+};
+
+export const UMB_ITEM_PICKER_MODAL = new UmbModalToken<UmbItemPickerModalData, UmbItemPickerModel>(
+	'Umb.Modal.ItemPicker',
+	{
+		modal: {
+			type: 'sidebar',
+			size: 'small',
+		},
+	},
+);