page structure fix, checkbox

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -23,6 +23,7 @@
             </FluentNavGroup>
             <FluentNavGroup Icon="@(new Icons.Regular.Size20.Form())" Expanded="false" Title="Form & Input">
                 <FluentNavLink Href="forminputoverview" Icon="@(new Icons.Regular.Size20.Eye())" IconColor="Color.Accent">Overview</FluentNavLink>
+                <FluentNavLink Href="forminputcheckbox" Icon="@(new Icons.Regular.Size20.CheckboxChecked())" IconColor="Color.Accent">Checkbox</FluentNavLink>
             </FluentNavGroup>
 
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/FormInputs/FormInputCheckbox.razor

@@ -0,0 +1,113 @@
+@page "/forminputcheckbox"
+@using System.Collections.Immutable
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Checkbox</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    <code>FluentCheckbox</code> warps a web component of a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox">checkbox</a>.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Checkbox Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentLabel Class="my-1" Typo="Typography.H6">Horizontal</FluentLabel>
+    <FluentStack>
+        <FluentCheckbox @bind-Value="@ex1Value1" Label="Apples" />
+        <FluentCheckbox @bind-Value="@ex1Value2" Disabled="true" Label="Banana (disabled)" />
+        <FluentCheckbox @bind-Value="@ex1Value3" Label="Orange" />
+    </FluentStack>
+
+    <br />
+    <br />
+
+    <FluentLabel Class="my-1" Typo="Typography.H6">Vertical</FluentLabel>
+    <FluentStack Orientation="Orientation.Vertical">
+        <FluentCheckbox @bind-Value="@ex1Value1" Label="Apples" />
+        <FluentCheckbox @bind-Value="@ex1Value2" Disabled="true" Label="Banana (disabled)" />
+        <FluentCheckbox @bind-Value="@ex1Value3" Label="Orange" />
+    </FluentStack>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Three States</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentStack Class="mt-1" Orientation="Orientation.Vertical">
+        <FluentCheckbox Id="ex2check1" Label="ThreeState=true" 
+                        ThreeState="true" @bind-Value="@ex2Value1" @bind-CheckState="@ex2State1"/>
+        <div>
+            Value = @ex2Value1, CheckState = @(ex2State1?.ToString() ?? "null (Indeterminate)")
+        </div>
+    </FluentStack>
+    <FluentStack Class="mt-1" Orientation="Orientation.Vertical">
+        <FluentCheckbox Id="ex2check2" Label="ThreeState=false"
+                        ThreeState="false" @bind-Value="@ex2Value2"/>
+        <div>
+            Value = @ex2Value2
+        </div>
+    </FluentStack>
+    <FluentStack Class="mt-1" Orientation="Orientation.Vertical">
+        <FluentCheckbox Id="ex2check3" Label="ShowIndeterminate=false"
+                        ThreeState="true" ShowIndeterminate="false" @bind-Value="@ex2Value3" @bind-CheckState="@ex2State3" />
+        <div>
+            Value = @ex2Value3, CheckState = @(ex2State3?.ToString() ?? "null (Indeterminate)")
+        </div>
+    </FluentStack>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Three States List</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentStack Orientation="Orientation.Vertical">
+        <FluentCheckbox Label="@($"All ({AreAllTypesVisible?.ToString() ?? "null"})")"
+                        ThreeState="true"
+                        ShowIndeterminate="false"
+                        @bind-CheckState="AreAllTypesVisible"/>
+        <FluentDivider class="mt-1" Role="DividerRole.Separator" />
+        @foreach (string resourceType in ALL_RESOURCE_TYPES)
+        {
+            bool isChecked = VISIBLE_RESOURCE_TYPES.Contains(resourceType);
+            <FluentCheckbox Label="@($"{resourceType} ({isChecked})")"
+                            @bind-Value:get="isChecked"
+                            @bind-Value:set="c => OnResourceTypeVisibilityChanged(resourceType, c)" />
+        }
+    </FluentStack>
+</FluentCard>
+
+@code {
+    bool ex1Value1 = true;
+    bool ex1Value2 = true;
+    bool ex1Value3;
+
+    bool ex2Value1, ex2Value2, ex2Value3;
+    bool? ex2State1 = false, ex2State3 = null;
+
+    private readonly ImmutableArray<string> ALL_RESOURCE_TYPES = ["Project", "Executable", "Container"];
+    private readonly HashSet<string> VISIBLE_RESOURCE_TYPES;
+
+    public FormInputCheckbox()
+    {
+        VISIBLE_RESOURCE_TYPES = new HashSet<string>(ALL_RESOURCE_TYPES);
+    }
+
+    protected void OnResourceTypeVisibilityChanged(string resourceType, bool isVisible)
+    {
+        if (isVisible)
+            VISIBLE_RESOURCE_TYPES.Add(resourceType);
+        else
+            VISIBLE_RESOURCE_TYPES.Remove(resourceType);
+    }
+
+    private bool? AreAllTypesVisible
+    {
+        get
+        {
+            return VISIBLE_RESOURCE_TYPES.SetEquals(ALL_RESOURCE_TYPES) ? true : (VISIBLE_RESOURCE_TYPES.Count == 0 ? false : null);
+        }
+        set
+        {
+            if (value is true)
+                VISIBLE_RESOURCE_TYPES.UnionWith(ALL_RESOURCE_TYPES);
+            else if (value is false)
+                VISIBLE_RESOURCE_TYPES.Clear();
+        }
+    }
+}