From 6a73babfb32e883b22d758133979f7bf442a5453 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 7 Mar 2024 12:57:32 +0100
Subject: [PATCH] add ref-section element

---
 .../core/picker-input/picker-input.context.ts |  1 -
 .../packages/core/section/components/index.ts |  1 +
 .../ref-section/ref-section.element.ts        | 35 +++++++++++++++++++
 .../src/packages/core/section/index.ts        |  1 +
 .../input-section/input-section.element.ts    | 19 ++++------
 5 files changed, 44 insertions(+), 13 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/section/components/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/section/components/ref-section/ref-section.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
index 7032f9bbfe..6c07396806 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
@@ -84,7 +84,6 @@ export class UmbPickerInputContext<ItemType extends { name: string; unique: stri
 	}
 
 	async requestRemoveItem(unique: string) {
-		// TODO: ID won't always be available on the model, so we need to get the unique property from somewhere. Maybe the repository?
 		const item = this.#itemManager.getItems().find((item) => this.#getUnique(item) === unique);
 		if (!item) throw new Error('Could not find item with unique: ' + unique);
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/components/index.ts
new file mode 100644
index 0000000000..4d5d09d52d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/components/index.ts
@@ -0,0 +1 @@
+export * from './ref-section/ref-section.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/components/ref-section/ref-section.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/components/ref-section/ref-section.element.ts
new file mode 100644
index 0000000000..8b41537035
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/components/ref-section/ref-section.element.ts
@@ -0,0 +1,35 @@
+import type { UmbSectionItemModel } from '../../repository/index.js';
+import { UUIRefElement } from '@umbraco-cms/backoffice/external/uui';
+import { html, customElement, css, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+
+@customElement('umb-ref-section')
+export class UmbRefSectionElement extends UmbElementMixin(UUIRefElement) {
+	@property({ type: Object, attribute: false })
+	item?: UmbSectionItemModel;
+
+	public render() {
+		return html`
+			<div id="info">
+				<div id="name">${this.item?.meta.label}</div>
+			</div>
+			<slot></slot>
+			<slot name="actions" id="actions-container"></slot>
+		`;
+	}
+
+	static styles = [
+		...UUIRefElement.styles,
+		css`
+			#name {
+				font-weight: 700;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-ref-section': UmbRefSectionElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts
index d60293a578..ec281fe08d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts
@@ -7,3 +7,4 @@ export * from './section-default.element.js';
 export * from './section.context.js';
 export * from './input-section/index.js';
 export * from './section-picker-modal/section-picker-modal.token.js';
+export * from './components/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/input-section/input-section.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/input-section/input-section.element.ts
index c756c38f03..adaa7c2ba0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/input-section/input-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/input-section/input-section.element.ts
@@ -107,18 +107,13 @@ export class UmbInputSectionElement extends FormControlMixin(UmbLitElement) {
 
 	private _renderItem(item: UmbSectionItemModel) {
 		if (!item.unique) return;
-		return html`${item.unique}
-			<!--
-			<uui-ref-node-data-type name=${item.name}>
-				<uui-action-bar slot="actions">
-					<uui-button
-						@click=${() => this.#pickerContext.requestRemoveItem(item.unique)}
-						label="Remove Data Type ${item.name}"
-						>Remove</uui-button
-					>
-				</uui-action-bar>
-			</uui-ref-node-data-type>
-	-->`;
+		return html` <umb-ref-section .item=${item}>
+			<uui-action-bar slot="actions">
+				<uui-button @click=${() => this.#pickerContext.requestRemoveItem(item.unique)} label="Remove ${item.name}"
+					>Remove</uui-button
+				>
+			</uui-action-bar>
+		</umb-ref-section>`;
 	}
 
 	static styles = [