Merge branch 'main' into main

BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml

@@ -50,7 +50,7 @@
     <script src="_framework/blazor.webassembly.js" autostart="false" asp-append-version="true"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     <!-- Add chart.js reference if chart components are used in your application. -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" integrity="sha512-ZwR1/gSZM3ai6vCdI+LVF1zSq/5HznD3ZSTk7kajkaj4D292NLuduDCO1c/NT8Id+jE58KYLKT7hXnbtryGmMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <!-- Add sortable.js reference if SortableList component is used in your application. -->

BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInputDocumentation.razor

@@ -0,0 +1,42 @@
+@page "/checkbox-input"
+
+@attribute [Route(pageUrl)]
+
+<PageMetaTags PageUrl="@pageUrl"
+              Title="@metaTitle"
+              Description="@metaDescription"
+              ImageUrl="@imageUrl" />
+
+<PageHero Heading="@pageTitle">
+    <LeadSection>@pageDescription</LeadSection>
+</PageHero>
+
+<CarbonAds />
+
+<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
+    <Demo Type="typeof(CheckboxInput_Demo_01_Basic_Usage)" Tabs="true" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Disable" PageUrl="@pageUrl" Link="disable">
+    <div class="mb-3">Use the <code>Disabled</code> parameter to disable the <code>CheckboxInput</code>.</div>
+    <Demo Type="typeof(CheckboxInput_Demo_02_Disable_A)" Tabs="false" />
+    <div class="my-3">Also, use <b>Enable()</b> and <b>Disable()</b> methods to enable and disable the <code>CheckboxInput</code>.</div>
+    <Callout Color="CalloutColor.Warning" Heading="NOTE">
+        Do not use both the <b>Disabled</b> parameter and <b>Enable()</b> &amp; <b>Disable()</b> methods.
+    </Callout>
+    <Demo Type="typeof(CheckboxInput_Demo_02_Disable_B)" Tabs="false" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Events: ValueChanged" PageUrl="@pageUrl" Link="events-value-changed">
+    <div class="mb-3">This event fires when the <code>CheckboxInput</code> value changes, but not on every keystroke.</div>
+    <Demo Type="typeof(CheckboxInput_Demo_03_Events_ValueChanged)" Tabs="true" />
+</Section>
+
+@code {
+    private const string pageUrl = RouteConstants.Demos_CheckboxInput_Documentation;
+    private const string pageTitle = "Blazor CheckboxInput";
+    private const string pageDescription = "The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'.";
+    private const string metaTitle = "Blazor CheckboxInput Component";
+    private const string metaDescription = "The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'.";
+    private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_01_Basic_Usage.razor

@@ -0,0 +1,8 @@
+<CheckboxInput Label="Default checkbox" @bind-Value="isChecked" />
+<CheckboxInput Label="Checked checkbox" @bind-Value="isChecked2" />
+
+@code
+{
+    private bool isChecked;
+    private bool isChecked2 = true;
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_A.razor

@@ -0,0 +1,22 @@
+<CheckboxInput Label="Default checkbox" @bind-Value="isChecked" Disabled="disabled" />
+<CheckboxInput Label="Checked checkbox" @bind-Value="isChecked2" Disabled="disabled" />
+
+<div class="mt-3">
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.ExtraSmall" @onclick="Enable"> Enable </Button>
+    <Button Color="ButtonColor.Secondary" Size="ButtonSize.ExtraSmall" @onclick="Disable"> Disable </Button>
+    <Button Color="ButtonColor.Warning" Size="ButtonSize.ExtraSmall" @onclick="Toggle"> Toggle </Button>
+</div>
+
+@code
+{
+    private bool isChecked;
+    private bool isChecked2 = true;
+
+    private bool disabled = true;
+
+    private void Enable() => disabled = false;
+
+    private void Disable() => disabled = true;
+
+    private void Toggle() => disabled = !disabled;
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_B.razor

@@ -0,0 +1,28 @@
+<CheckboxInput @ref="checkboxInputRef1" Label="Default checkbox" @bind-Value="isChecked" />
+<CheckboxInput @ref="checkboxInputRef2" Label="Checked checkbox" @bind-Value="isChecked2" />
+
+<div class="mt-3">
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.ExtraSmall" @onclick="Enable"> Enable </Button>
+    <Button Color="ButtonColor.Secondary" Size="ButtonSize.ExtraSmall" @onclick="Disable"> Disable </Button>
+</div>
+
+@code
+{
+    private CheckboxInput? checkboxInputRef1;
+    private CheckboxInput? checkboxInputRef2;
+
+    private bool isChecked;
+    private bool isChecked2 = true;
+
+    private void Disable()
+    {
+        checkboxInputRef1.Disable();
+        checkboxInputRef2.Disable();
+    }
+
+    private void Enable()
+    {
+        checkboxInputRef1.Enable();
+        checkboxInputRef2.Enable();
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_03_Events_ValueChanged.razor

@@ -0,0 +1,13 @@
+<CheckboxInput Label="Default checkbox" Value="isChecked" ValueExpression="() => isChecked" ValueChanged="(value) => CheckboxValueChanged(value)" />
+Current value: @isChecked
+@code
+{
+    private bool isChecked;
+
+    private void CheckboxValueChanged(bool value)
+    {
+        isChecked = value;
+
+        // do something
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor

@@ -0,0 +1,51 @@
+@page "/password-input"
+
+@attribute [Route(pageUrl)]
+
+<PageMetaTags PageUrl="@pageUrl"
+              Title="@metaTitle"
+              Description="@metaDescription"
+              ImageUrl="@imageUrl" />
+
+<PageHero Heading="@pageTitle">
+    <LeadSection>@pageDescription</LeadSection>
+</PageHero>
+
+<CarbonAds />
+
+<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
+    <Demo Type="typeof(PasswordInput_Demo_01_Basic_Usage)" Tabs="true" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Disable" PageUrl="@pageUrl" Link="disable">
+    <div class="mb-3">Use the <code>Disabled</code> parameter to disable the <code>TextInput</code>.</div>
+    <Demo Type="typeof(PasswordInput_Demo_02_Disable_A)" Tabs="false" />
+    <div class="my-3">Also, use <b>Enable()</b> and <b>Disable()</b> methods to enable and disable the <code>TextInput</code>.</div>
+    <Callout Color="CalloutColor.Warning" Heading="NOTE">
+        Do not use both the <b>Disabled</b> parameter and <b>Enable()</b> &amp; <b>Disable()</b> methods.
+    </Callout>
+    <Demo Type="typeof(PasswordInput_Demo_02_Disable_B)" Tabs="false" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Valdations" PageUrl="@pageUrl" Link="validations">
+    <div class="mb-3">
+        Like any other blazor input component, <code>PasswordInput</code> supports validations.
+        Add the DataAnnotations on the <code>PasswordInput</code> component to validate the user input before submitting the form.
+        In the below example, we used <b>Required</b> attribute.
+    </div>
+    <Demo Type="typeof(PasswordInput_Demo_03_Validations)" Tabs="true" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Events: ValueChanged" PageUrl="@pageUrl" Link="events-value-changed">
+    <div class="mb-3">This event fires when the <code>PasswordInput</code> value changes, but not on every keystroke.</div>
+    <Demo Type="typeof(PasswordInput_Demo_04_Events_ValueChanged)" Tabs="true" />
+</Section>
+
+@code {
+    private const string pageUrl = RouteConstants.Demos_PasswordInput_Documentation;
+    private const string pageTitle = "Blazor PasswordInput";
+    private const string pageDescription = "The Blazor Bootstrap PasswordInput component is constructed using an HTML input of type 'password'.";
+    private const string metaTitle = "Blazor PasswordInput Component";
+    private const string metaDescription = "The Blazor Bootstrap PasswordInput component is constructed using an HTML input of type 'password'.";
+    private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_01_Basic_Usage.razor

@@ -0,0 +1,8 @@
+<div class="mb-3">
+    <PasswordInput @bind-Value="@enteredPassword" />
+</div>
+<div class="mb-3">Entered password: @enteredPassword</div>
+
+@code {
+    private string? enteredPassword = null;
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_A.razor

@@ -0,0 +1,20 @@
+<div class="mb-3">
+    <PasswordInput @bind-Value="@enteredPassword" Disabled="@disabled" />
+</div>
+<div class="mb-3">Entered password: @enteredPassword</div>
+
+<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
+<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
+<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>
+
+@code {
+    private string? enteredPassword = null;
+
+    private bool disabled = true;
+
+    private void Enable() => disabled = false;
+
+    private void Disable() => disabled = true;
+
+    private void Toggle() => disabled = !disabled;
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_B.razor

@@ -0,0 +1,17 @@
+<div class="mb-3">
+    <PasswordInput @ref="passwordInputRef" @bind-Value="@enteredPassword" />
+</div>
+<div class="mb-3">Entered text: @enteredPassword</div>
+
+<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
+<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
+
+@code {
+    private PasswordInput? passwordInputRef;
+
+    private string? enteredPassword = null;
+
+    private void Disable() => passwordInputRef.Disable();
+
+    private void Enable() => passwordInputRef.Enable();
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_03_Validations.razor

@@ -0,0 +1,80 @@
+@using System.ComponentModel.DataAnnotations
+
+<style>
+    .valid.modified:not([type=checkbox]) {
+        outline: 1px solid #26b050;
+    }
+
+    .invalid {
+        outline: 1px solid red;
+    }
+
+    .validation-message {
+        color: red;
+    }
+</style>
+
+<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
+    <DataAnnotationsValidator />
+
+    <div class="form-group row mb-3">
+        <label class="col-md-2 col-form-label">User name: <span class="text-danger">*</span></label>
+        <div class="col-md-10">
+            <TextInput @bind-Value="@userLogin.UserName" Placeholder="Enter user name" />
+            <ValidationMessage For="@(() => userLogin.UserName)" />
+        </div>
+    </div>
+
+    <div class="form-group row mb-3">
+        <label class="col-md-2 col-form-label">Password: <span class="text-danger">*</span></label>
+        <div class="col-md-10">
+            <PasswordInput @bind-Value="@userLogin.Password" />
+            <ValidationMessage For="@(() => userLogin.Password)" />
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-12 text-right">
+            <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
+            <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Login</Button>
+        </div>
+    </div>
+
+</EditForm>
+
+@code {
+    private UserLogin userLogin = new();
+    private EditContext? editContext;
+
+    protected override void OnInitialized()
+    {
+        editContext = new EditContext(userLogin);
+        base.OnInitialized();
+    }
+
+    public void HandleOnValidSubmit()
+    {
+        // additional check
+        if (editContext.Validate())
+        {
+            // do something
+            // submit the form
+            Console.WriteLine("Login successful");
+        }
+    }
+
+    private void ResetForm()
+    {
+        userLogin = new();
+        editContext = new EditContext(userLogin);
+    }
+
+    public class UserLogin
+    {
+        [Required(ErrorMessage = "User name required.")]
+        public string? UserName { get; set; }
+
+        [Required(ErrorMessage = "Password required.")]
+        public string? Password { get; set; }
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_04_Events_ValueChanged.razor

@@ -0,0 +1,15 @@
+<div class="mb-3">
+    <PasswordInput Value="@enteredPassword" ValueExpression="() => enteredPassword" ValueChanged="(value) => PasswordChanged(value)" />
+</div>
+<div class="mb-3">Entered password: @enteredPassword</div>
+
+@code {
+    private string? enteredPassword = null;
+
+    private void PasswordChanged(string? value)
+    {
+        enteredPassword = value;
+
+        // do something
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor

@@ -0,0 +1,42 @@
+@page "/radio-input"
+
+@attribute [Route(pageUrl)]
+
+<PageMetaTags PageUrl="@pageUrl"
+              Title="@metaTitle"
+              Description="@metaDescription"
+              ImageUrl="@imageUrl" />
+
+<PageHero Heading="@pageTitle">
+    <LeadSection>@pageDescription</LeadSection>
+</PageHero>
+
+<CarbonAds />
+
+<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
+    <Demo Type="typeof(RadioInput_Demo_01_Basic_Usage)" Tabs="true" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Disable" PageUrl="@pageUrl" Link="disable">
+    <div class="mb-3">Use the <code>Disabled</code> parameter to disable the <code>RadioInput</code>.</div>
+    <Demo Type="typeof(RadioInput_Demo_02_Disable_A)" Tabs="false" />
+    <div class="my-3">Also, use <b>Enable()</b> and <b>Disable()</b> methods to enable and disable the <code>RadioInput</code>.</div>
+    <Callout Color="CalloutColor.Warning" Heading="NOTE">
+        Do not use both the <b>Disabled</b> parameter and <b>Enable()</b> &amp; <b>Disable()</b> methods.
+    </Callout>
+    <Demo Type="typeof(RadioInput_Demo_02_Disable_B)" Tabs="false" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Events: ValueChanged" PageUrl="@pageUrl" Link="events-value-changed">
+    <div class="mb-3">This event fires when the <code>RadioInput</code> value changes, but not on every keystroke.</div>
+    <Demo Type="typeof(RadioInput_Demo_03_Events_ValueChanged)" Tabs="true" />
+</Section>
+
+@code {
+    private const string pageUrl = RouteConstants.Demos_RadioInput_Documentation;
+    private const string pageTitle = "Blazor RadioInput";
+    private const string pageDescription = "The Blazor Bootstrap RadioInput component is constructed using an HTML input of type 'radio'.";
+    private const string metaTitle = "Blazor RadioInput Component";
+    private const string metaDescription = "The Blazor Bootstrap RadioInput component is constructed using an HTML input of type 'radio'.";
+    private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL
+}