From 62a66248e9896580f083acf159b3b0688bdaaba8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Thu, 7 Nov 2024 21:51:13 +0100
Subject: [PATCH] refactor to use init method

---
 .../backoffice-modal-container.element.ts     | 22 +++++++++----------
 .../core/modal/component/modal.element.ts     | 22 +++++++------------
 2 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts
index ab8ae573a9..3bd005e7c7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts
@@ -13,7 +13,7 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 	@state()
 	_modals: Array<UmbModalContext> = [];
 
-	@property({ reflect: true, attribute: 'fill-background' })
+	@property({ type: Boolean, reflect: true, attribute: 'fill-background' })
 	fillBackground = false;
 
 	private _modalManager?: UmbModalManagerContext;
@@ -58,28 +58,26 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 			return;
 		}
 
-		this._modals.forEach(async (modal) => {
-			if (this._modalElementMap.has(modal.key)) return;
+		this._modals.forEach(async (modalContext) => {
+			if (this._modalElementMap.has(modalContext.key)) return;
 
 			const modalElement = new UmbModalElement();
-			modalElement.modalContext = modal;
+			await modalElement.init(modalContext);
 
-			await modalElement.createModalElement();
+			modalElement.element?.addEventListener('close-end', this.#onCloseEnd.bind(this, modalContext.key));
+			modalContext.addEventListener('umb:destroy', this.#onCloseEnd.bind(this, modalContext.key));
 
-			modalElement.element?.addEventListener('close-end', this.#onCloseEnd.bind(this, modal.key));
-			modal.addEventListener('umb:destroy', this.#onCloseEnd.bind(this, modal.key));
-
-			this._modalElementMap.set(modal.key, modalElement);
+			this._modalElementMap.set(modalContext.key, modalElement);
 
 			// If any of the modals are fillBackground, set the fillBackground property to true
-			if (modal.backdropBackground) {
+			if (modalContext.backdropBackground) {
 				this.fillBackground = true;
 				this.shadowRoot
 					?.getElementById('container')
-					?.style.setProperty('--backdrop-background', modal.backdropBackground);
+					?.style.setProperty('--backdrop-background', modalContext.backdropBackground);
 			}
 
-			this.requestUpdate();
+			this.requestUpdate('_modalElementMap');
 		});
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts
index a192488d3a..8df92878c7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts
@@ -26,18 +26,6 @@ import {
 @customElement('umb-modal')
 export class UmbModalElement extends UmbLitElement {
 	#modalContext?: UmbModalContext;
-	public get modalContext(): UmbModalContext | undefined {
-		return this.#modalContext;
-	}
-	public set modalContext(value: UmbModalContext | undefined) {
-		if (this.#modalContext === value) return;
-		this.#modalContext = value;
-
-		if (!value) {
-			this.destroy();
-			return;
-		}
-	}
 
 	public element?: UUIModalDialogElement | UUIModalSidebarElement | UUIModalElement;
 
@@ -51,8 +39,14 @@ export class UmbModalElement extends UmbLitElement {
 		this.#modalContext?.reject({ type: 'close' });
 	};
 
-	async createModalElement() {
-		if (!this.#modalContext) return;
+	async init(modalContext: UmbModalContext | undefined) {
+		if (this.#modalContext === modalContext) return;
+		this.#modalContext = modalContext;
+
+		if (!this.#modalContext) {
+			this.destroy();
+			return;
+		}
 
 		this.#modalContext.addEventListener('umb:destroy', this.#onContextDestroy);
 		this.element = await this.#createContainerElement();