From d72b9ebd4db768b13311fd1204086ed431611a55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 5 Dec 2023 13:50:01 +0100
Subject: [PATCH] property-editor-ui-picker-modal.element

---
 ...property-editor-ui-picker-modal.element.ts | 32 +++++++------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
index 4fe275bfde..c0ea739cc2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
@@ -1,22 +1,21 @@
-import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 import {
 	UmbPropertyEditorUIPickerModalData,
 	UmbPropertyEditorUIPickerModalValue,
-	UmbModalContext,
+	UmbModalBaseElement,
 } from '@umbraco-cms/backoffice/modal';
 import { ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 interface GroupedPropertyEditorUIs {
 	[key: string]: Array<ManifestPropertyEditorUi>;
 }
 @customElement('umb-property-editor-ui-picker-modal')
-export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
-	@property({ type: Object })
-	data?: UmbPropertyEditorUIPickerModalData;
-
+export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement<
+	UmbPropertyEditorUIPickerModalData,
+	UmbPropertyEditorUIPickerModalValue
+> {
 	@state()
 	private _groupedPropertyEditorUIs: GroupedPropertyEditorUIs = {};
 
@@ -29,9 +28,6 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
 	@state()
 	private _submitLabel = 'Select';
 
-	@property({ attribute: false })
-	modalContext?: UmbModalContext<UmbPropertyEditorUIPickerModalData, UmbPropertyEditorUIPickerModalValue>;
-
 	connectedCallback(): void {
 		super.connectedCallback();
 
@@ -89,21 +85,17 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
 		);
 	}
 
-	private _close() {
-		this.modalContext?.reject();
-	}
-
-	private _submit() {
-		this.modalContext?.submit({ selection: this._selection });
-	}
-
 	render() {
 		return html`
 			<umb-body-layout headline="Select Property Editor UI">
 				<uui-box> ${this._renderFilter()} ${this._renderGrid()} </uui-box>
 				<div slot="actions">
-					<uui-button label="Close" @click=${this._close}></uui-button>
-					<uui-button label="${this._submitLabel}" look="primary" color="positive" @click=${this._submit}></uui-button>
+					<uui-button label="Close" @click=${this._rejectModal}></uui-button>
+					<uui-button
+						label="${this._submitLabel}"
+						look="primary"
+						color="positive"
+						@click=${this._submitModal}></uui-button>
 				</div>
 			</umb-body-layout>
 		`;