From 78497b3032ebd7426747985dbb810ec40e88a684 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Fri, 5 Apr 2024 15:27:17 +0200
Subject: [PATCH] add support to set a backdrop for a modal

---
 .../backoffice-modal-container.element.ts     | 24 ++++++++++++++++---
 .../modal/context/modal-manager.context.ts    |  5 ++++
 .../core/modal/context/modal.context.ts       |  3 +++
 3 files changed, 29 insertions(+), 3 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 48d0068860..ee8be1c38b 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
@@ -1,6 +1,6 @@
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
-import { css, html, repeat, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, repeat, customElement, state, nothing, property } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbModalManagerContext, UmbModalContext } from '@umbraco-cms/backoffice/modal';
 import { UMB_MODAL_MANAGER_CONTEXT, UmbModalElement } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -13,6 +13,9 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 	@state()
 	_modals: Array<UmbModalContext> = [];
 
+	@property({ reflect: true, attribute: 'fill-background' })
+	fillBackground = false;
+
 	private _modalManager?: UmbModalManagerContext;
 
 	constructor() {
@@ -35,6 +38,7 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 	/** We cannot render the umb-modal element directly in the uui-modal-container because it wont get recognized by UUI.
 	 *  We therefore have a helper class which creates the uui-modal element and returns it. */
 	#createModalElements(modals: Array<UmbModalContext>) {
+		this.fillBackground = false;
 		const oldValue = this._modals;
 		this._modals = modals;
 
@@ -61,6 +65,15 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 			modal.addEventListener('umb:destroy', this.#onCloseEnd.bind(this, modal.key));
 
 			this._modalElementMap.set(modal.key, modalElement);
+
+			// If any of the modals are fillBackground, set the fillBackground property to true
+			if (modal.backdropBackground) {
+				this.fillBackground = true;
+				this.shadowRoot
+					?.getElementById('container')
+					?.style.setProperty('--backdrop-background', modal.backdropBackground);
+			}
+
 			this.requestUpdate();
 		});
 	}
@@ -78,13 +91,13 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 
 	render() {
 		return html`
-			<uui-modal-container>
+			<uui-modal-container id="container">
 				${this._modals.length > 0
 					? repeat(
 							this._modals,
 							(modal) => modal.key,
 							(modal) => this.#renderModal(modal.key),
-					  )
+						)
 					: ''}
 			</uui-modal-container>
 		`;
@@ -97,6 +110,11 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 				position: absolute;
 				z-index: 1000;
 			}
+
+			:host([fill-background]) #container::after {
+				background: var(--backdrop-background);
+				opacity: 0.75;
+			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal-manager.context.ts
index d923e06b0b..eb74e7deca 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal-manager.context.ts
@@ -12,6 +12,11 @@ export interface UmbModalConfig {
 	key?: string;
 	type?: UmbModalType;
 	size?: UUIModalSidebarSize;
+
+	/**
+	 * Set the background property of the modal backdrop
+	 */
+	backdropBackground?: string;
 }
 
 export class UmbModalManagerContext extends UmbContextBase<UmbModalManagerContext> {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts
index a22c2dd674..05d6220b7a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts
@@ -32,6 +32,7 @@ export class UmbModalContext<ModalPreset extends object = object, ModalValue = a
 	public readonly data: ModalPreset;
 	public readonly type: UmbModalType = 'dialog';
 	public readonly size: UUIModalSidebarSize = 'small';
+	public readonly backdropBackground?: string;
 	public readonly router: IRouterSlot | null = null;
 	public readonly alias: string | UmbModalToken<ModalPreset, ModalValue>;
 
@@ -51,10 +52,12 @@ export class UmbModalContext<ModalPreset extends object = object, ModalValue = a
 		if (this.alias instanceof UmbModalToken) {
 			this.type = this.alias.getDefaultModal()?.type || this.type;
 			this.size = this.alias.getDefaultModal()?.size || this.size;
+			this.backdropBackground = this.alias.getDefaultModal()?.backdropBackground || this.backdropBackground;
 		}
 
 		this.type = args.modal?.type || this.type;
 		this.size = args.modal?.size || this.size;
+		this.backdropBackground = args.modal?.backdropBackground || this.backdropBackground;
 
 		const defaultData = this.alias instanceof UmbModalToken ? this.alias.getDefaultData() : undefined;
 		this.data = Object.freeze({ ...defaultData, ...args.data } as ModalPreset);