Add new Extra PhoneInput component (#8343)

src/BlazorUI/Bit.BlazorUI.Extras/Components/PhoneInput/BitPhoneInput.razor

@@ -0,0 +1,16 @@
+@namespace Bit.BlazorUI
+
+<div class="bit-pin">
+    <select>
+        @foreach (var country in Countries.All)
+        {
+            <option value="@country.Iso2">
+                <div class="bit-pin-opt">
+                    <span>@country.Code</span>
+                    <img src="@($"_content/Bit.BlazorUI.Extras/images/countries/{country.Iso2}-flat-16.webp")" />
+                </div>
+            </option>
+        }
+    </select>
+    <input />
+</div>

src/BlazorUI/Bit.BlazorUI.Extras/Components/PhoneInput/BitPhoneInput.razor.cs

@@ -0,0 +1,5 @@
+namespace Bit.BlazorUI;
+
+public partial class BitPhoneInput
+{
+}

src/BlazorUI/Bit.BlazorUI.Extras/Components/PhoneInput/BitPhoneInput.scss

@@ -0,0 +1,4 @@
+.bit-pin {
+    gap: 1rem;
+    display: flex;
+}

src/BlazorUI/Bit.BlazorUI.Extras/Components/PhoneInput/Country.cs

@@ -0,0 +1,12 @@
+namespace Bit.BlazorUI;
+
+public class Country(string name, string code, string iso2, string iso3)
+{
+    public string Name { get; set; } = name;
+
+    public string Code { get; set; } = code;
+
+    public string Iso2 { get; set; } = iso2;
+
+    public string Iso3 { get; set; } = iso3;
+}

src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss

@@ -1,2 +1,4 @@
 @import "../Components/DataGrid/BitDataGrid.scss";
 @import "../Components/DataGrid/Pagination/BitDataGridPaginator.scss";
+
+@import "../Components/PhoneInput/BitPhoneInput.scss";

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PhoneInput/BitPhoneInputDemo.razor

@@ -0,0 +1,17 @@
+@page "/components/phoneinput"
+
+<PageOutlet Url="components/phoneinput"
+            Title="PhoneInput"
+            Description="PhoneInput component of the bit BlazorUI components" />
+
+<ComponentDemo ComponentName="PhoneInput"
+               ComponentDescription="PhoneInput is a special type of input to accept phone number."
+               ComponentParameters="componentParameters"
+               ComponentSubClasses="componentSubClasses"
+               ComponentSubEnums="componentSubEnums">
+    <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
+        <ExamplePreview>
+            <BitPhoneInput></BitPhoneInput>
+        </ExamplePreview>
+    </ComponentExampleBox>
+</ComponentDemo>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PhoneInput/BitPhoneInputDemo.razor.cs

@@ -0,0 +1,22 @@
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.PhoneInput;
+
+public partial class BitPhoneInputDemo
+{
+    private readonly List<ComponentParameter> componentParameters =
+    [
+    ];
+
+    private readonly List<ComponentSubClass> componentSubClasses =
+    [
+    ];
+
+    private readonly List<ComponentSubEnum> componentSubEnums =
+    [
+    ];
+
+
+
+    private readonly string example1RazorCode = @"
+";
+
+}

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor

@@ -235,11 +235,14 @@
         </div>
         <div class="list">
             <BitText Typography="BitTypography.H6">Extras</BitText>
+            <BitLink Href="/components/chart" title="Chart" Style="display: flex">
+                <BitText Typography="BitTypography.Subtitle1">Chart</BitText>
+            </BitLink>
             <BitLink Href="/components/datagrid" title="DataGrid" Style="display: flex">
                 <BitText Typography="BitTypography.Subtitle1">DataGrid</BitText>
             </BitLink>
-            <BitLink Href="/components/chart" title="Chart" Style="display: flex">
-                <BitText Typography="BitTypography.Subtitle1">Chart</BitText>
+            <BitLink Href="/components/phoneinput" title="PhoneInput" Style="display: flex">
+                <BitText Typography="BitTypography.Subtitle1">PhoneInput</BitText>
             </BitLink>
         </div>
     </div>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs

@@ -150,8 +150,9 @@ public partial class NavMenu : IDisposable
             Text = "Extras",
             ChildItems =
             [
+                new() { Text = "Chart", Url = "/components/chart" },
                 new() { Text = "DataGrid", Url = "/components/datagrid", AdditionalUrls = ["/components/data-grid"] },
-                new() { Text = "Chart", Url = "/components/chart" }
+                new() { Text = "PhoneInput", Url = "/components/phoneinput" },
             ]
         },
         new() { Text = "Iconography", Url = "/iconography" },

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/compilerconfig.json

@@ -59,6 +59,12 @@
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
+    {
+        "outputFile": "Pages/Components/Extras/PhoneInput/BitPhoneInputDemo.razor.css",
+        "inputFile": "Pages/Components/Extras/PhoneInput/BitPhoneInputDemo.razor.scss",
+        "minify": { "enabled": false },
+        "options": { "sourceMap": false }
+    },
     {
         "outputFile": "Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.css",
         "inputFile": "Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.scss",