register confirm modal

src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts

@@ -19,7 +19,7 @@ import { UmbIconPickerModalData } from '../../src/backoffice/shared/modals/icon-
 import { UmbMediaPickerModalData } from '../../src/backoffice/media/media/modals/media-picker';
 import type { UmbBasicModalData } from '../../src/backoffice/shared/modals/basic';
 import type { UmbLinkPickerModalData } from '../../src/backoffice/shared/modals/link-picker';
-import type { UmbModalConfirmData } from '../../src/backoffice/shared/modals/confirm/confirm-modal.element';
+import type { UmbConfirmModalData } from '../../src/backoffice/shared/modals/confirm';
 import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
 import { UmbModalHandler } from './modal-handler';
 import { UmbPickerModalData } from './layouts/modal-layout-picker-base';
@@ -50,11 +50,11 @@ export class UmbModalContext {
 	/**
 	 * Opens a Confirm modal
 	 * @public
-	 * @param {UmbModalConfirmData} data
+	 * @param {UmbConfirmModalData} data
 	 * @return {*}  {UmbModalHandler}
 	 * @memberof UmbModalContext
 	 */
-	public confirm(data: UmbModalConfirmData): UmbModalHandler {
+	public confirm(data: UmbConfirmModalData): UmbModalHandler {
 		return this.open('umb-modal-layout-confirm', { data, type: 'dialog' });
 	}
 

src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts

@@ -1,17 +1,11 @@
-import { html, TemplateResult } from 'lit';
+import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement } from 'lit/decorators.js';
 import { UmbModalLayoutElement } from '../../../../../libs/modal/layouts/modal-layout.element';
-
-export interface UmbModalConfirmData {
-	headline: string;
-	content: TemplateResult | string;
-	color?: 'positive' | 'danger';
-	confirmLabel?: string;
-}
+import { UmbConfirmModalData } from '.';
 
 @customElement('umb-confirm-modal')
-export class UmbConfirmModalElement extends UmbModalLayoutElement<UmbModalConfirmData> {
+export class UmbConfirmModalElement extends UmbModalLayoutElement<UmbConfirmModalData> {
 	static styles = [UUITextStyles];
 
 	private _handleConfirm() {
@@ -40,6 +34,8 @@ export class UmbConfirmModalElement extends UmbModalLayoutElement<UmbModalConfir
 	}
 }
 
+export default UmbConfirmModalElement;
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-confirm-modal': UmbConfirmModalElement;

src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.stories.ts

@@ -3,7 +3,8 @@ import './confirm-modal.element';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
-import type { UmbConfirmModalElement, UmbModalConfirmData } from './confirm-modal.element';
+import type { UmbConfirmModalElement } from './confirm-modal.element';
+import type { UmbConfirmModalData } from './';
 
 export default {
 	title: 'API/Modals/Layouts/Confirm',
@@ -11,7 +12,7 @@ export default {
 	id: 'umb-confirm-modal',
 } as Meta;
 
-const positiveData: UmbModalConfirmData = {
+const positiveData: UmbConfirmModalData = {
 	headline: 'Publish with descendants',
 	content: html`Publish <b>This example</b> and all content items underneath and thereby making their content publicly
 		available.`,
@@ -25,7 +26,7 @@ export const Positive: Story<UmbConfirmModalElement> = () => html`
 	<umb-confirm-modal .data=${positiveData as any}></umb-confirm-modal>
 `;
 
-const dangerData: UmbModalConfirmData = {
+const dangerData: UmbConfirmModalData = {
 	color: 'danger',
 	headline: 'Delete',
 	content: html`Delete <b>This example</b> and all items underneath.`,

src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/index.ts

@@ -0,0 +1,13 @@
+import type { TemplateResult } from 'lit';
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export interface UmbConfirmModalData {
+	headline: string;
+	content: TemplateResult | string;
+	color?: 'positive' | 'danger';
+	confirmLabel?: string;
+}
+
+export const UMB_CONFIRM_MODAL_TOKEN = new UmbModalToken<UmbConfirmModalData>('Umb.Modal.Confirm', {
+	type: 'dialog',
+});

src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/manifests.ts

@@ -1,6 +1,18 @@
 import type { ManifestModal } from '@umbraco-cms/extensions-registry';
 
 const modals: Array<ManifestModal> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.Basic',
+		name: 'Basic Modal',
+		loader: () => import('./basic/basic-modal.element'),
+	},
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.Confirm',
+		name: 'Confirm Modal',
+		loader: () => import('./confirm/confirm-modal.element'),
+	},
 	{
 		type: 'modal',
 		alias: 'Umb.Modal.IconPicker',
@@ -13,12 +25,6 @@ const modals: Array<ManifestModal> = [
 		name: 'Link Picker Modal',
 		loader: () => import('./link-picker/link-picker-modal.element'),
 	},
-	{
-		type: 'modal',
-		alias: 'Umb.Modal.Basic',
-		name: 'Basic Modal',
-		loader: () => import('./basic/basic-modal.element'),
-	},
 ];
 
 export const manifests = [...modals];