SelectExtended: Support MudGlobals and Fix Chip Nowrap (#537)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml

@@ -156,7 +156,7 @@ protected MudBaseInputExtended() : base(new DefaultConverter<T>()) { }
         /// </summary>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Behavior)]
-        public bool ShrinkLabel { get; set; }
+        public bool ShrinkLabel { get; set; } = MudGlobal.InputDefaults.ShrinkLabel;
 
         /// <summary>
         /// The color of the adornment if used. It supports the theme colors.
@@ -182,14 +182,14 @@ protected MudBaseInputExtended() : base(new DefaultConverter<T>()) { }
         /// </summary>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Appearance)]
-        public Variant Variant { get; set; } = Variant.Text;
+        public Variant Variant { get; set; } = MudGlobal.InputDefaults.Variant;
 
         /// <summary>
         ///  Will adjust vertical spacing.
         /// </summary>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Appearance)]
-        public Margin Margin { get; set; } = Margin.None;
+        public Margin Margin { get; set; } = MudGlobal.InputDefaults.Margin;
 
         /// <summary>
         /// The short hint displayed in the input before the user enters a value.

CodeBeam.MudBlazor.Extensions/Base/MudBaseInputExtended.cs

@@ -55,7 +55,7 @@
                                     {
                                         <MudText Typo="@Typo" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
                                     }
-                                    <MudChipSet T="T" Class="d-flex flex-wrap mud-width-full" Style="row-gap: 4px" AllClosable="ChipCloseable" OnClose="ChipClosed">
+                                    <MudChipSet T="T" Class="@InputChipClassname" AllClosable="ChipCloseable" OnClose="ChipClosed">
                                         @if (ItemCollection != null)
                                         {
                                             foreach (var item in ItemCollection.Where(x => SelectedValues?.Contains(x) == true))

CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor

@@ -72,6 +72,14 @@ public MudSelectExtended()
             .AddClass(InputClass)
             .Build();
 
+        /// <summary>
+        /// 
+        /// </summary>
+        protected string? InputChipClassname =>
+            new CssBuilder("mud-select-input-chip-extended")
+            .AddClass("mud-select-extended-nowrap mud-chip-scroll-container", NoWrap)
+            .Build();
+
         private string _elementId = "select_" + Guid.NewGuid().ToString().Substring(0, 8);
         private string _popoverId = "selectpopover_" + Guid.NewGuid().ToString().Substring(0, 8);
 

CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor.cs

@@ -95,3 +95,20 @@
     border-bottom: 1px solid lightgrey;
     padding-bottom: 18px;
 }
+
+.mud-select-input-chip-extended {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 100%;
+    row-gap: 4px;
+
+    &.mud-select-extended-nowrap {
+        flex-wrap: nowrap;
+        overflow-x: hidden;
+    }
+
+    .mud-chip {
+        flex: 0 0 auto;
+        white-space: nowrap;
+    }
+}

CodeBeam.MudBlazor.Extensions/Styles/Components/_selectextended.scss

@@ -974,6 +974,18 @@
   border-bottom: 1px solid lightgrey;
   padding-bottom: 18px; }
 
+.mud-select-input-chip-extended {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 100%;
+  row-gap: 4px; }
+  .mud-select-input-chip-extended.mud-select-extended-nowrap {
+    flex-wrap: nowrap;
+    overflow-x: hidden; }
+  .mud-select-input-chip-extended .mud-chip {
+    flex: 0 0 auto;
+    white-space: nowrap; }
+
 /*@import '../abstracts/variables';*/
 .mud-placeholder-extended {
   line-height: unset; }