[HxModal] New event "OnHiding" with ability to cancel the hiding.

Havit.Blazor.Components.Web.Bootstrap/Modals/HxModal.razor.cs

@@ -162,6 +162,13 @@ static HxModal()
 	[Parameter] public string FooterCssClass { get; set; }
 	protected string FooterCssClassEffective => this.FooterCssClass ?? this.GetSettings()?.FooterCssClass ?? GetDefaults().FooterCssClass;
 
+	/// <summary>
+	/// This event is fired immediately when the hide instance method has been called.<br/>
+	/// This can be caused by <see cref="HideAsync"/>, close-button, <kbd>Esc</kbd> key or other interaction.
+	/// Hiding can be cancelled by setting <see cref="ModalHidingEventArgs.Cancel"/> = <c>true</c>
+	/// </summary>
+	[Parameter] public EventCallback<ModalHidingEventArgs> OnHiding { get; set; }
+
 	/// <summary>
 	/// This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).<br/>
 	/// This can be caused by <see cref="HideAsync"/>, close-button, <kbd>Esc</kbd> key or other interaction.
@@ -220,6 +227,17 @@ public async Task HideAsync()
 		await jsModule.InvokeVoidAsync("hide", modalElement);
 	}
 
+	/// <summary>
+	/// Receives notification from JS for <c>hide.bs.modal</c> event.
+	/// </summary>
+	[JSInvokable("HxModal_HandleModalHide")]
+	public async Task<bool> HandleModalHide()
+	{
+		var eventArgs = new ModalHidingEventArgs();
+		await OnHiding.InvokeAsync(eventArgs);
+		return eventArgs.Cancel;
+	}
+
 	/// <summary>
 	/// Receives notification from JS for <c>hidden.bs.modal</c> event.
 	/// </summary>
@@ -256,7 +274,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 			{
 				return;
 			}
-			await jsModule.InvokeVoidAsync("show", modalElement, dotnetObjectReference, this.CloseOnEscapeEffective);
+			await jsModule.InvokeVoidAsync("show", modalElement, dotnetObjectReference, this.CloseOnEscapeEffective, OnHiding.HasDelegate);
 		}
 	}
 

Havit.Blazor.Components.Web.Bootstrap/Modals/ModalHidingEventArgs.cs

@@ -0,0 +1,10 @@
+namespace Havit.Blazor.Components.Web.Bootstrap;
+
+public class ModalHidingEventArgs
+
+{
+	/// <summary>
+	/// Set <c>true</c> to cancel modal hiding.
+	/// </summary>
+	public bool Cancel { get; set; }
+}

Havit.Blazor.Components.Web.Bootstrap/wwwroot/HxModal.js

@@ -1,9 +1,11 @@
-export function show(element, hxModalDotnetObjectReference, closeOnEscape) {
+export function show(element, hxModalDotnetObjectReference, closeOnEscape, subscribeToHideEvent) {
 	if (!element) {
 		return;
 	}
 
 	element.hxModalDotnetObjectReference = hxModalDotnetObjectReference;
+	if (subscribeToHideEvent)
+		element.addEventListener('hide.bs.modal', handleModalHide);
 	element.addEventListener('hidden.bs.modal', handleModalHidden);
 	element.addEventListener('shown.bs.modal', handleModalShown);
 
@@ -26,6 +28,21 @@ function handleModalShown(event) {
 	event.target.hxModalDotnetObjectReference.invokeMethodAsync('HxModal_HandleModalShown');
 };
 
+async function handleModalHide(event) {
+    let modalInstance = bootstrap.Modal.getInstance(event.target);
+
+	if (modalInstance.hidePreventionDisabled)
+        return;
+
+    event.preventDefault();
+
+    let cancel = await event.target.hxModalDotnetObjectReference.invokeMethodAsync('HxModal_HandleModalHide');
+    if (!cancel) {
+		modalInstance.hidePreventionDisabled = true;
+        modalInstance.hide();
+    }
+};
+
 function handleModalHidden(event) {
 	event.target.hxModalDotnetObjectReference.invokeMethodAsync('HxModal_HandleModalHidden');
 	dispose(event.target);
@@ -36,8 +53,9 @@ export function dispose(element) {
 		return;
 	}
 
+	element.removeEventListener('hide.bs.modal', handleModalHide);
 	element.removeEventListener('hidden.bs.modal', handleModalHidden);
-	element.removeEventListener('shown.bs.modal', handleModalHidden);
+	element.removeEventListener('shown.bs.modal', handleModalShown);
 	element.hxModalDotnetObjectReference = null;
 
 	var modal = bootstrap.Modal.getInstance(element);