diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 1271cf2f6..d5db76184 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -8,7 +8,7 @@ namespace Havit.Blazor.Components.Web.Bootstrap; /// /// Type of values. /// Type of items. -public class HxMultiSelect : HxInputBase>, IInputWithSize +public class HxMultiSelect : HxInputBase>, IInputWithSize, IInputWithLabelType { /// /// Return defaults. @@ -161,6 +161,26 @@ public class HxMultiSelect : HxInputBase>, IInputWit [Parameter] public IconBase FilterClearIcon { get; set; } protected IconBase FilterClearIconEffective => FilterClearIcon ?? GetSettings()?.FilterClearIcon ?? GetDefaults().FilterClearIcon; + /// + [Parameter] public LabelType? LabelType { get; set; } + protected LabelType LabelTypeEffective => LabelType ?? GetSettings()?.LabelType ?? GetDefaults()?.LabelType ?? HxSetup.Defaults.LabelType; + LabelType IInputWithLabelType.LabelTypeEffective => LabelTypeEffective; + protected override LabelValueRenderOrder RenderOrder + { + get + { + if (LabelTypeEffective == Bootstrap.LabelType.Floating) + { + // Floating label type renders the label in HxMultiSelectInternal component. + return LabelValueRenderOrder.ValueOnly; + } + else + { + return LabelValueRenderOrder.LabelValue; + } + } + } + private List _itemsToRender; private HxMultiSelectInternal _hxMultiSelectInternalComponent; @@ -212,6 +232,8 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(102, nameof(HxMultiSelectInternal.InputCssClass), GetInputCssClassToRender()); builder.AddAttribute(103, nameof(HxMultiSelectInternal.InputText), GetInputText()); builder.AddAttribute(104, nameof(HxMultiSelectInternal.EnabledEffective), EnabledEffective); + builder.AddAttribute(125, nameof(HxMultiSelectInternal.LabelTypeEffective), LabelTypeEffective); + builder.AddAttribute(126, nameof(HxMultiSelectInternal.FormValueComponent), this); builder.AddAttribute(105, nameof(HxMultiSelectInternal.ItemsToRender), _itemsToRender); builder.AddAttribute(106, nameof(HxMultiSelectInternal.TextSelector), TextSelector); builder.AddAttribute(107, nameof(HxMultiSelectInternal.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 ce92eccce..056c2f1ed 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -6,7 +6,7 @@ bool enabled = EnabledEffective && (ItemsToRender != null); }
@@ -16,19 +16,26 @@ } @InputGroupStartTemplate -
public InputSize? InputSize { get; set; } + /// + /// The label type. + /// + public LabelType? LabelType { get; set; } + /// /// Enables filtering capabilities. /// diff --git a/Havit.Blazor.Documentation/Pages/Components/FormInputs/FormInputs_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/FormInputs/FormInputs_Documentation.razor index c4e80608a..da14d6141 100644 --- a/Havit.Blazor.Documentation/Pages/Components/FormInputs/FormInputs_Documentation.razor +++ b/Havit.Blazor.Documentation/Pages/Components/FormInputs/FormInputs_Documentation.razor @@ -37,7 +37,9 @@

Floating labels provide a sleek and simple design, floating elegantly over your input fields. See Bootstrap 5 documentation on Floating labels.
- They are supported by HxInputText, HxInputTextArea, HxInputNumber, HxInputDate, HxAutosuggest, HxSelect, and HxInputTags. + They are supported by HxInputText, HxInputTextArea, + HxInputNumber, HxInputDate, HxAutosuggest, + HxSelect, HxMultiSelect and HxInputTags.

Inputs with floating labels can't have the Placeholder parameter set. diff --git a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index 337ca541a..f720632d4 100644 --- a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -4699,6 +4699,9 @@ Icon displayed in filter input for clearing the filter. + + + @@ -5429,6 +5432,11 @@ Input size. + + + The label type. + + Enables filtering capabilities. diff --git a/Havit.Blazor.TestApp/Havit.Blazor.TestApp.Client/HxMultiSelectTests/HxMultiSelect_FloatingLabel_Test.razor b/Havit.Blazor.TestApp/Havit.Blazor.TestApp.Client/HxMultiSelectTests/HxMultiSelect_FloatingLabel_Test.razor new file mode 100644 index 000000000..49ff2a4da --- /dev/null +++ b/Havit.Blazor.TestApp/Havit.Blazor.TestApp.Client/HxMultiSelectTests/HxMultiSelect_FloatingLabel_Test.razor @@ -0,0 +1,45 @@ +@page "/HxMultiSelect_FloatingLabel" +@rendermode InteractiveServer +@inject IDemoDataService DemoDataService + +
+ + + + For visual reference: + + +
+ + +

Selected employees (IDs): @String.Join(", ", selectedEmployeeIds.Select(e => e.ToString()))

+ +@code { + private IEnumerable employees; + private List selectedEmployeeIds = new(); + private int? selectedEmployeeId; + + protected override async Task OnInitializedAsync() + { + employees = await DemoDataService.GetAllEmployeesAsync(); + } +} \ No newline at end of file