From 2468d138eb0a03fbea420909e8fffd9ba416cc86 Mon Sep 17 00:00:00 2001
From: Manuel Monteagudo <manuel@homelifeacademy.com>
Date: Sat, 5 Oct 2024 02:20:25 -0400
Subject: [PATCH] Adds floating label type to MultiSelect

---
 .../Forms/HxInputBase.cs                      | 25 ++++++++++++++++---
 .../Forms/HxMultiSelect.cs                    |  2 ++
 .../Internal/HxMultiSelectInternal.razor      | 10 +++++---
 .../Internal/HxMultiSelectInternal.razor.cs   |  4 +++
 .../HxMultiSelect_Demo_BasicUsage.razor       |  1 +
 5 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxInputBase.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxInputBase.cs
index 267a0e01..0080c88a 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxInputBase.cs
+++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxInputBase.cs
@@ -145,10 +145,27 @@ public abstract class HxInputBase<TValue> : InputBase<TValue>, ICascadeEnabledCo
 	/// <summary>
 	/// Elements rendering order.
 	/// </summary>
-	protected virtual LabelValueRenderOrder RenderOrder =>
-		((this is IInputWithLabelType inputWithLabelType) && (inputWithLabelType.LabelTypeEffective == LabelType.Floating))
-		? LabelValueRenderOrder.ValueLabel
-		: LabelValueRenderOrder.LabelValue;
+	protected virtual LabelValueRenderOrder RenderOrder
+	{
+		get
+		{
+			if ((this is IInputWithLabelType inputWithLabelType) && (inputWithLabelType.LabelTypeEffective == LabelType.Floating))
+			{
+				if (this.GetType().IsGenericType && this.GetType().GetGenericTypeDefinition() == typeof(HxMultiSelect<,>))
+				{
+					return LabelValueRenderOrder.ValueOnly;
+				}
+				else
+				{
+					return LabelValueRenderOrder.ValueLabel;
+				}
+			}
+			else
+			{
+				return LabelValueRenderOrder.LabelValue;
+			}
+		}
+	}
 
 	/// <summary>
 	/// Gets or sets the current value of the input.
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs
index 80c08ab7..4045bdd3 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs
+++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs
@@ -217,6 +217,8 @@ protected override void BuildRenderInput(RenderTreeBuilder builder)
 		builder.AddAttribute(102, nameof(HxMultiSelectInternal<TValue, TItem>.InputCssClass), GetInputCssClassToRender());
 		builder.AddAttribute(103, nameof(HxMultiSelectInternal<TValue, TItem>.InputText), GetInputText());
 		builder.AddAttribute(104, nameof(HxMultiSelectInternal<TValue, TItem>.EnabledEffective), EnabledEffective);
+		builder.AddAttribute(125, nameof(HxMultiSelectInternal<TValue, TItem>.LabelTypeEffective), LabelTypeEffective);
+		builder.AddAttribute(126, nameof(HxMultiSelectInternal<TValue, TItem>.LabelText), Label);
 		builder.AddAttribute(105, nameof(HxMultiSelectInternal<TValue, TItem>.ItemsToRender), _itemsToRender);
 		builder.AddAttribute(106, nameof(HxMultiSelectInternal<TValue, TItem>.TextSelector), TextSelector);
 		builder.AddAttribute(107, nameof(HxMultiSelectInternal<TValue, TItem>.ValueSelector), ValueSelector);
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor
index c41401a1..50f3c15e 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor
+++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor
@@ -5,8 +5,7 @@
 @{
 	bool enabled = EnabledEffective && (ItemsToRender != null);
 }
-<div class="@CssClassHelper.Combine("hx-multi-select",
-                                    HasInputGroups ? "input-group" : null,
+<div class="@CssClassHelper.Combine(HasInputGroups ? "input-group" : null,
                                     HasInputGroupEnd ? "input-group-end" : null,
 					                HasInputGroupStart ? "input-group-start" : null,
                                     InputGroupCssClass)">
@@ -16,7 +15,7 @@
 	}
 
 	@InputGroupStartTemplate
-	<div @ref="_elementReference" class="dropdown" role="listbox">
+    <div @ref="_elementReference" class="hx-multi-select dropdown @(LabelTypeEffective == LabelType.Floating ? "form-floating": "")" role="listbox">
 
 		<input @ref="_inputElementReference"
 				type="text"
@@ -30,6 +29,11 @@
 				data-bs-auto-close="outside"
 				@attributes="this.AdditionalAttributes" />
 
+        @if (LabelTypeEffective == LabelType.Floating)
+        {
+            <label for="@InputId">@LabelText</label>
+        }
+       
 		@* Must be always rendered otherwise does not work after disable->enabled scenario *@
 		<ul class="@CssClassHelper.Combine("dropdown-menu", _isShown ? "show" : null)">
 			@if (enabled)
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs
index b53c7335..f81ae083 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs
+++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs
@@ -13,8 +13,12 @@ public partial class HxMultiSelectInternal<TValue, TItem> : IAsyncDisposable
 
 	[Parameter] public string InputText { get; set; }
 
+	[Parameter] public string LabelText { get; set; }
+
 	[Parameter] public bool EnabledEffective { get; set; }
 
+	[Parameter] public LabelType LabelTypeEffective { get; set; }
+
 	[Parameter] public List<TItem> ItemsToRender { get; set; }
 
 	[Parameter] public List<TValue> SelectedValues { get; set; }
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor b/Havit.Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor
index e6f3db65..3ac1a312 100644
--- a/Havit.Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor
+++ b/Havit.Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor
@@ -4,6 +4,7 @@
                TItem="EmployeeDto"
                TValue="int"
                Data="@employees"
+               LabelType="LabelType.Floating"
 			   @bind-Value="selectedEmployeeIds"
                TextSelector="@(p => p.Name)"
                ValueSelector="@(p => p.Id)"