add ref-section element

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

src/Umbraco.Web.UI.Client/src/packages/core/section/components/index.ts

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

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

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

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 = [