From 7d7988713c5a3be847ee489826a8073d57d12b71 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 14 Sep 2022 13:47:57 +0200
Subject: [PATCH] add ref component for property editor ui

---
 .../src/backoffice/backoffice.element.ts      |  2 ++
 .../ref-property-editor-ui.element.ts         | 32 +++++++++++++++++++
 .../editor-view-data-type-edit.element.ts     | 10 ++++--
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
index 3ce2a18181..f268f86f69 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
@@ -1,3 +1,5 @@
+//TODO: we need to figure out what components should be available for extensions and load them upfront
+import './components/ref-property-editor-ui/ref-property-editor-ui.element';
 import './components/backoffice-header.element';
 import './components/backoffice-main.element';
 import './components/backoffice-modal-container.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts
new file mode 100644
index 0000000000..3ae605613e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts
@@ -0,0 +1,32 @@
+import { UUIRefNodeElement } from '@umbraco-ui/uui';
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('umb-ref-property-editor-ui')
+export class UmbRefPropertyEditorUI extends UUIRefNodeElement {
+	static styles = [...UUIRefNodeElement.styles];
+
+	protected fallbackIcon =
+		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M142.212 397.267l106.052-48.024L398.479 199.03l-26.405-26.442-90.519 90.517-15.843-15.891 90.484-90.486-16.204-16.217-150.246 150.243-47.534 106.513zm74.904-100.739l23.285-23.283 3.353 22.221 22.008 3.124-23.283 23.313-46.176 20.991 20.813-46.366zm257.6-173.71L416.188 64.3l-49.755 49.785 58.504 58.503 49.779-49.77zM357.357 300.227h82.826v116.445H68.929V300.227h88.719v-30.648H38.288v177.733h432.537V269.578H357.357v30.649z"></path></svg>';
+
+	@property({ type: String })
+	alias = '';
+
+	protected renderDetail() {
+		const details: string[] = [];
+
+		if (this.alias !== '') {
+			details.push(this.alias);
+		}
+		if (this.detail !== '') {
+			details.push(this.detail);
+		}
+		return html`<small id="detail">${details.join(' | ')}<slot name="detail"></slot></small>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-ref-property-editor-ui': UmbRefPropertyEditorUI;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/editor-view-data-type-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/editor-view-data-type-edit.element.ts
index f267391613..7e59b63319 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/editor-view-data-type-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/editor-view-data-type-edit.element.ts
@@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { Subscription, distinctUntilChanged } from 'rxjs';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { UmbModalService } from '../../../../core/services/modal';
 
 import { UmbContextConsumerMixin } from '../../../../core/context';
@@ -73,10 +74,13 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li
 	render() {
 		return html`
 			<uui-box>
-				<!-- TODO: temp property editor ui selector. Change when we have dialogs -->
 				<h3>Property Editor UI</h3>
-				${this._dataType?.propertyEditorUIAlias}
-				<uui-button label="Change" @click=${this._openPropertyEditorUIPicker}></uui-button>
+				<!-- TODO: border is a bit weird attribute name. Maybe single or standalone would be better? -->
+				<umb-ref-property-editor-ui alias="${ifDefined(this._dataType?.propertyEditorUIAlias)}" border>
+					<uui-action-bar slot="actions">
+						<uui-button label="Change" @click=${this._openPropertyEditorUIPicker}></uui-button>
+					</uui-action-bar>
+				</umb-ref-property-editor-ui>
 			</uui-box>
 		`;
 	}