Merge branch 'main' into bugfix/modal-route-registration-circular-dependency

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;