From 124969b69f942d821a3ecc5e7d9369ecd57e805a Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 10 Aug 2022 14:10:52 +0200
Subject: [PATCH] add umb-modal-layout base element

---
 .../confirm/modal-layout-confirm.element.ts    | 16 +++++-----------
 .../modal-layout-content-picker.element.ts     | 14 ++++----------
 .../modal/layouts/modal-layout.element.ts      | 18 ++++++++++++++++++
 3 files changed, 27 insertions(+), 21 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/modal-layout.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/confirm/modal-layout-confirm.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/confirm/modal-layout-confirm.element.ts
index 6658fe66eb..cdeab181b7 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/confirm/modal-layout-confirm.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/confirm/modal-layout-confirm.element.ts
@@ -1,7 +1,7 @@
-import { html, LitElement, TemplateResult } from 'lit';
+import { html, TemplateResult } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property } from 'lit/decorators.js';
-import { UmbModalHandler } from '../../../modal';
+import { customElement } from 'lit/decorators.js';
+import { UmbModalLayoutElement } from '../modal-layout.element';
 
 export interface UmbModalConfirmData {
 	headline: string;
@@ -11,15 +11,9 @@ export interface UmbModalConfirmData {
 }
 
 @customElement('umb-modal-layout-confirm')
-export class UmbModalLayoutConfirmElement extends LitElement {
+export class UmbModalLayoutConfirmElement extends UmbModalLayoutElement<UmbModalConfirmData> {
 	static styles = [UUITextStyles];
 
-	@property({ attribute: false })
-	modalHandler?: UmbModalHandler;
-
-	@property({ type: Object })
-	data?: UmbModalConfirmData;
-
 	private _handleConfirm() {
 		this.modalHandler?.close({ confirmed: true });
 	}
@@ -30,7 +24,7 @@ export class UmbModalLayoutConfirmElement extends LitElement {
 
 	render() {
 		return html`
-			<uui-dialog-layout class="uui-text" .headline=${this.data?.headline}>
+			<uui-dialog-layout class="uui-text" .headline=${this.data?.headline || null}>
 				${this.data?.content}
 
 				<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._handleCancel}">Cancel</uui-button>
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/content-picker/modal-layout-content-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/content-picker/modal-layout-content-picker.element.ts
index 3f22eb5d8d..c36ea6d1a1 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/content-picker/modal-layout-content-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/content-picker/modal-layout-content-picker.element.ts
@@ -1,14 +1,14 @@
-import { css, html, LitElement } from 'lit';
+import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property, state } from 'lit/decorators.js';
-import { UmbModalHandler } from '../../../modal';
+import { customElement, state } from 'lit/decorators.js';
+import { UmbModalLayoutElement } from '../modal-layout.element';
 
 export interface UmbModalContentPickerData {
 	multiple: boolean;
 }
 
 @customElement('umb-modal-layout-content-picker')
-export class UmbModalLayoutContentPickerElement extends LitElement {
+export class UmbModalLayoutContentPickerElement extends UmbModalLayoutElement<UmbModalContentPickerData> {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -44,12 +44,6 @@ export class UmbModalLayoutContentPickerElement extends LitElement {
 		`,
 	];
 
-	@property({ attribute: false })
-	modalHandler?: UmbModalHandler;
-
-	@property({ type: Object })
-	data?: UmbModalContentPickerData;
-
 	private _tempContent = [
 		{
 			id: 1,
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/modal-layout.element.ts
new file mode 100644
index 0000000000..57e3aa4a7f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/modal-layout.element.ts
@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbModalHandler } from '../../modal';
+
+@customElement('umb-modal-layout')
+export class UmbModalLayoutElement<UmbModalData> extends LitElement {
+	@property({ attribute: false })
+	modalHandler?: UmbModalHandler;
+
+	@property({ type: Object })
+	data?: UmbModalData;
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-modal-layout': UmbModalLayoutElement<unknown>;
+	}
+}