From adbc2fe480571cb9052f353f7f0769ce8d96d5c9 Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Fri, 24 May 2024 11:43:07 +0200
Subject: [PATCH 1/2] add confirmation dialog when removing composition

---
 .../composition-picker-modal.element.ts       | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts
index 0f56da20fe..fc593d2a3e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts
@@ -8,7 +8,7 @@ import type {
 	UmbCompositionPickerModalValue,
 } from './composition-picker-modal.token.js';
 import { css, html, customElement, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import { UmbModalBaseElement, umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 
@@ -57,6 +57,27 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 		this.#requestAvailableCompositions();
 	}
 
+	protected async _submitModal() {
+		const initSelection = this.data?.selection ?? [];
+		const newSelection = this._selection;
+
+		const setA = new Set(newSelection);
+		const existingCompositionHasBeenRemoved = !initSelection.every((item) => setA.has(item));
+
+		if (existingCompositionHasBeenRemoved) {
+			await umbConfirmModal(this, {
+				headline: `${this.localize.term('general_remove')}`,
+				content: html`<div style="max-width:400px">
+					${this.localize.term('contentTypeEditor_compositionRemoveWarning')}
+				</div>`,
+				confirmLabel: this.localize.term('general_submit'),
+				color: 'danger',
+			});
+		}
+
+		super._submitModal();
+	}
+
 	async #requestReference() {
 		await this.#init;
 		if (!this.#unique || !this.#compositionRepository) return;

From 59b352d2ac60d1dc495ff3782eac19e94aaa39c2 Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Fri, 24 May 2024 13:51:07 +0200
Subject: [PATCH 2/2] Update
 src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
---
 .../composition-picker/composition-picker-modal.element.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts
index fc593d2a3e..e39d02a536 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts
@@ -66,7 +66,7 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 
 		if (existingCompositionHasBeenRemoved) {
 			await umbConfirmModal(this, {
-				headline: `${this.localize.term('general_remove')}`,
+				headline: this.localize.term('general_remove'),
 				content: html`<div style="max-width:400px">
 					${this.localize.term('contentTypeEditor_compositionRemoveWarning')}
 				</div>`,