[HxModal] No ability to set your own sizes #20

+ release 1.4.1

Havit.Blazor.Components.Web.Bootstrap/Havit.Blazor.Components.Web.Bootstrap.csproj

@@ -9,7 +9,7 @@
 	<!-- NuGet -->
 	<Import Project="../NuGet.targets" />
 	<PropertyGroup>
-		<PackageVersion>1.4.0</PackageVersion>
+		<PackageVersion>1.4.1</PackageVersion>
 		<Description>HAVIT Blazor Library - Free Bootstrap 5 components for ASP.NET Blazor</Description>
 		<PackageLicenseExpression>MIT</PackageLicenseExpression>
 		<PackageProjectUrl>https://havit.blazor.eu</PackageProjectUrl>

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

@@ -2,12 +2,12 @@
 
 @if (opened)
 {
-	<div @ref="modalElement" class="@CssClassHelper.Combine("hx-modal","modal fade", CssClass)" tabindex="-1">
-		<div class="@CssClassHelper.Combine("modal-dialog", GetModalSizeCssClass(), GetModalFullscreenCssClass(), GetModalScrollableCssClass(), GetModalCenteredCssClass())">
+	<div @ref="modalElement" class="@CssClassHelper.Combine("hx-modal modal fade", this.CssClass ?? GetDefaults().CssClass)" tabindex="-1">
+		<div class="@CssClassHelper.Combine("modal-dialog", GetDialogSizeCssClass(), GetDialogFullscreenCssClass(), GetDialogScrollableCssClass(), GetDialogCenteredCssClass(), this.DialogCssClass ?? GetDefaults().DialogCssClass)">
 			<div class="modal-content">
 				@if (!String.IsNullOrEmpty(Title) || (HeaderTemplate != null) || ShowCloseButtonEffective)
 				{
-					<div class="@CssClassHelper.Combine("modal-header", HeaderCssClass)">
+					<div class="@CssClassHelper.Combine("modal-header", HeaderCssClass ?? GetDefaults().HeaderCssClass)">
 						@if (!String.IsNullOrEmpty(Title))
 						{
 							<h5 class="modal-title">@Title</h5>
@@ -31,18 +31,17 @@
 				}
 				@if (BodyTemplate != null)
 				{
-					<div class="@CssClassHelper.Combine("modal-body", BodyCssClass)">
+					<div class="@CssClassHelper.Combine("modal-body", BodyCssClass ?? GetDefaults().BodyCssClass)">
 						@BodyTemplate
 					</div>
 				}
 				@if (FooterTemplate != null)
 				{
-					<div class="@CssClassHelper.Combine("modal-footer", FooterCssClass)">
+					<div class="@CssClassHelper.Combine("modal-footer", FooterCssClass ?? GetDefaults().FooterCssClass)">
 						@FooterTemplate
 					</div>
 				}
 			</div>
 		</div>
-
 	</div>
 }

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

@@ -86,10 +86,15 @@ public partial class HxModal : IAsyncDisposable
 		[Parameter] public bool? Centered { get; set; }
 
 		/// <summary>
-		/// Modal CSS class. Added to root <c>div</c> (<c>.modal</c>).
+		/// Additional CSS class for the main element (<c>div.modal</c>).
 		/// </summary>
 		[Parameter] public string CssClass { get; set; }
 
+		/// <summary>
+		/// Additional CSS class for the dialog (<c>div.modal-dialog</c> element).
+		/// </summary>
+		[Parameter] public string DialogCssClass { get; set; }
+
 		/// <summary>
 		/// Additional header CSS class.
 		/// </summary>
@@ -136,7 +141,7 @@ public HxModal()
 		public Task ShowAsync()
 		{
 			opened = true; // mark modal as opened
-			shouldOpenModal = true; // mak modal to be shown in OnAfterRender			
+			shouldOpenModal = true; // mark modal to be shown in OnAfterRender			
 
 			StateHasChanged(); // ensures render modal HTML
 
@@ -155,7 +160,7 @@ public async Task HideAsync()
 		public async Task HandleModalHidden()
 		{
 			opened = false;
-			await OnClosed.InvokeAsync(); // fires "event" dialog has been closed
+			await OnClosed.InvokeAsync();
 			StateHasChanged(); // ensures rerender to remove dialog from HTML
 		}
 
@@ -192,7 +197,7 @@ public async ValueTask DisposeAsync()
 
 		}
 
-		protected string GetModalSizeCssClass()
+		protected string GetDialogSizeCssClass()
 		{
 			var sizeEffective = this.Size ?? GetDefaults().Size;
 			return sizeEffective switch
@@ -205,7 +210,7 @@ protected string GetModalSizeCssClass()
 			};
 		}
 
-		protected string GetModalFullscreenCssClass()
+		protected string GetDialogFullscreenCssClass()
 		{
 			var fullscreenEffective = this.Fullscreen ?? GetDefaults().Fullscreen;
 			return fullscreenEffective switch
@@ -221,7 +226,7 @@ protected string GetModalFullscreenCssClass()
 			};
 		}
 
-		protected string GetModalScrollableCssClass()
+		protected string GetDialogScrollableCssClass()
 		{
 			var scrollableEffective = this.Scrollable ?? GetDefaults().Scrollable;
 			if (scrollableEffective)
@@ -231,8 +236,7 @@ protected string GetModalScrollableCssClass()
 			return null;
 		}
 
-
-		protected string GetModalCenteredCssClass()
+		protected string GetDialogCenteredCssClass()
 		{
 			var centeredEffective = this.Centered ?? GetDefaults().Centered;
 			if (centeredEffective)

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

@@ -1,5 +1,10 @@
-namespace Havit.Blazor.Components.Web.Bootstrap
+using Microsoft.AspNetCore.Components;
+
+namespace Havit.Blazor.Components.Web.Bootstrap
 {
+	/// <summary>
+	/// Settings for <see cref="HxModal.Defaults"/>.
+	/// </summary>
 	public class ModalDefaults
 	{
 		/// <summary>
@@ -33,5 +38,30 @@ public class ModalDefaults
 		/// Allows vertical centering of the modal. Default is <c>false</c> (horizontal only).
 		/// </summary>
 		public bool Centered { get; set; } = false;
+
+		/// <summary>
+		/// Additional CSS class for the main element (<c>div.modal</c>).
+		/// </summary>
+		public string CssClass { get; set; }
+
+		/// <summary>
+		/// Additional CSS class for the dialog (<c>div.modal-dialog</c> element).
+		/// </summary>
+		public string DialogCssClass { get; set; }
+
+		/// <summary>
+		/// Additional header CSS class.
+		/// </summary>
+		public string HeaderCssClass { get; set; }
+
+		/// <summary>
+		/// Additional body CSS class.
+		/// </summary>
+		public string BodyCssClass { get; set; }
+
+		/// <summary>
+		/// Footer css class.
+		/// </summary>
+		public string FooterCssClass { get; set; }
 	}
 }