Add BitProPanel component (#9392)

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor

@@ -0,0 +1,70 @@
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+
+<BitPanel AriaLabel="@AriaLabel"
+          Class="@ClassBuilder.Value"
+          Dir="Dir"
+          @attributes="HtmlAttributes"
+          Id="@Id"
+          IsEnabled="IsEnabled"
+          Style="@StyleBuilder.Value"
+          Visibility="Visibility"
+          AutoToggleScroll="AutoToggleScroll"
+          Blocking="Blocking"
+          Classes="Classes"
+          IsOpen="IsOpen"
+          IsOpenChanged="AssignIsOpen"
+          Modeless="Modeless"
+          OnDismiss="OnDismiss"
+          OnSwipeStart="OnSwipeStart"
+          OnSwipeMove="OnSwipeMove"
+          OnSwipeEnd="OnSwipeEnd"
+          Position="Position"
+          Size="Size"
+          ScrollerSelector="@ScrollerSelector"
+          Styles="Styles"
+          SwipeTrigger="SwipeTrigger">
+    @if (Header is not null || HeaderText is not null || ShowCloseButton)
+    {
+        <div style="@Styles?.HeaderContainer" class="bit-ppl-hcn @Classes?.HeaderContainer">
+            @if (Header is not null)
+            {
+                <div style="@Styles?.Header" class="bit-ppl-hdr @Classes?.Header">
+                    @Header
+                </div>
+            }
+            else if (HeaderText is not null)
+            {
+                <div style="@Styles?.Header" class="bit-ppl-hdr @Classes?.Header">
+                    @HeaderText
+                </div>
+            }
+
+            @if (ShowCloseButton)
+            {
+                <button @onclick="ClosePanel"
+                        style="@Styles?.CloseButton"
+                        class="bit-ppl-cls @Classes?.CloseButton">
+                    <i style="@Styles?.CloseIcon" class="bit-icon bit-icon--Cancel @Classes?.CloseIcon" />
+                </button>
+            }
+        </div>
+    }
+
+    <div style="@Styles?.Body" class="bit-ppl-bdy @Classes?.Body">
+        @(Body ?? ChildContent)
+    </div>
+
+    @if (Footer is not null)
+    {
+        <div style="@Styles?.Footer" class="bit-ppl-fcn @Classes?.Footer">
+            @Footer
+        </div>
+    }
+    else if (FooterText is not null)
+    {
+        <div style="@Styles?.Footer" class="bit-ppl-fcn @Classes?.Footer">
+            @FooterText
+        </div>
+    }
+</BitPanel>

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs

@@ -0,0 +1,151 @@
+namespace Bit.BlazorUI;
+
+public partial class BitProPanel : BitComponentBase
+{
+    /// <summary>
+    /// Enables the auto scrollbar toggle behavior of the panel.
+    /// </summary>
+    [Parameter] public bool AutoToggleScroll { get; set; }
+
+    /// <summary>
+    /// The alias of the ChildContent.
+    /// </summary>
+    [Parameter] public RenderFragment? Body { get; set; }
+
+    /// <summary>
+    /// Whether the panel can be dismissed by clicking outside of it on the overlay.
+    /// </summary>
+    [Parameter] public bool Blocking { get; set; }
+
+    /// <summary>
+    /// The content of the panel.
+    /// </summary>
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes for different parts of the panel.
+    /// </summary>
+    [Parameter] public BitProPanelClassStyles? Classes { get; set; }
+
+    /// <summary>
+    /// The template used to render the footer section of the panel.
+    /// </summary>
+    [Parameter] public RenderFragment? Footer { get; set; }
+
+    /// <summary>
+    /// The text of the footer section of the panel.
+    /// </summary>
+    [Parameter] public string? FooterText { get; set; }
+
+    /// <summary>
+    /// The template used to render the header section of the panel.
+    /// </summary>
+    [Parameter] public RenderFragment? Header { get; set; }
+
+    /// <summary>
+    /// The text of the header section of the panel.
+    /// </summary>
+    [Parameter] public string? HeaderText { get; set; }
+
+    /// <summary>
+    /// Determines the openness of the panel.
+    /// </summary>
+    [Parameter, TwoWayBound]
+    public bool IsOpen { get; set; }
+
+    /// <summary>
+    /// Renders the overlay in full mode that gives it an opaque background.
+    /// </summary>
+    [Parameter] public bool ModeFull { get; set; }
+
+    /// <summary>
+    /// Removes the overlay element of the panel.
+    /// </summary>
+    [Parameter] public bool Modeless { get; set; }
+
+    /// <summary>
+    /// A callback function for when the Panel is dismissed.
+    /// </summary>
+    [Parameter] public EventCallback<MouseEventArgs> OnDismiss { get; set; }
+
+    /// <summary>
+    /// The event callback for when the swipe action starts on the container of the panel.
+    /// </summary>
+    [Parameter] public EventCallback<decimal> OnSwipeStart { get; set; }
+
+    /// <summary>
+    /// The event callback for when the swipe action moves on the container of the panel.
+    /// </summary>
+    [Parameter] public EventCallback<decimal> OnSwipeMove { get; set; }
+
+    /// <summary>
+    /// The event callback for when the swipe action ends on the container of the panel.
+    /// </summary>
+    [Parameter] public EventCallback<decimal> OnSwipeEnd { get; set; }
+
+    /// <summary>
+    /// The position of the panel to show on the screen.
+    /// </summary>
+    [Parameter] public BitPanelPosition? Position { get; set; }
+
+    /// <summary>
+    /// The value of the height or width (based on the position) of the Panel.
+    /// </summary>
+    [Parameter] public double? Size { get; set; }
+
+    /// <summary>
+    /// Specifies the element selector for which the Panel disables its scroll if applicable.
+    /// </summary>
+    [Parameter] public string? ScrollerSelector { get; set; }
+
+    /// <summary>
+    /// Shows the close button of the Panel.
+    /// </summary>
+    [Parameter] public bool ShowCloseButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS styles for different parts of the panel component.
+    /// </summary>
+    [Parameter] public BitProPanelClassStyles? Styles { get; set; }
+
+    /// <summary>
+    /// The swiping point (difference percentage) based on the width of the panel container to trigger the close action (default is 0.25m).
+    /// </summary>
+    [Parameter] public decimal? SwipeTrigger { get; set; }
+
+
+
+    public async Task Open()
+    {
+        if (await AssignIsOpen(true) is false) return;
+
+        StateHasChanged();
+    }
+
+    public async Task Close()
+    {
+        if (await AssignIsOpen(false) is false) return;
+
+        StateHasChanged();
+    }
+
+
+
+    protected override string RootElementClass => "bit-ppl";
+
+    protected override void RegisterCssClasses()
+    {
+        ClassBuilder.Register(() => ModeFull ? "bit-ppl-mfl" : string.Empty);
+    }
+
+
+
+    private async Task ClosePanel(MouseEventArgs e)
+    {
+        if (IsEnabled is false) return;
+
+        if (await AssignIsOpen(false) is false) return;
+
+        await OnDismiss.InvokeAsync(e);
+    }
+}

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss

@@ -0,0 +1,71 @@
+@import '../../../Bit.BlazorUI/Styles/functions.scss';
+
+.bit-ppl {
+    .bit-pnl-cnt {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.bit-ppl-mfl {
+    .bit-pnl-ovl {
+        background-color: $clr-bg-overlay;
+    }
+}
+
+.bit-ppl-hcn {
+    top: 0;
+    z-index: 1;
+    display: flex;
+    position: sticky;
+    font-weight: 600;
+    color: $clr-fg-pri;
+    overflow-wrap: anywhere;
+    background-color: $clr-bg-pri;
+    padding: spacing(2) spacing(2) 0;
+}
+
+.bit-ppl-hdr {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    font-size: spacing(2.5);
+}
+
+.bit-ppl-cls {
+    display: flex;
+    cursor: pointer;
+    width: spacing(5);
+    height: spacing(5);
+    align-items: center;
+    justify-content: center;
+    font-size: spacing(1.75);
+    border-radius: spacing(0.25);
+    background-color: transparent;
+
+    @media (hover: hover) {
+        &:hover {
+            color: $clr-fg-pri-hover;
+            background-color: $clr-bg-pri-hover;
+        }
+    }
+
+    &:active {
+        color: $clr-fg-pri-active;
+        background-color: $clr-bg-pri-active;
+    }
+}
+
+.bit-ppl-bdy {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: spacing(2);
+}
+
+.bit-ppl-fcn {
+    bottom: 0;
+    z-index: 1;
+    position: sticky;
+    background-color: $clr-bg-pri;
+    padding: 0 spacing(2) spacing(2) spacing(2);
+}

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs

@@ -0,0 +1,34 @@
+namespace Bit.BlazorUI;
+
+public class BitProPanelClassStyles : BitPanelClassStyles
+{
+    /// <summary>
+    /// Custom CSS classes/styles for the header container of the BitProPanel.
+    /// </summary>
+    public string? HeaderContainer { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the header of the BitProPanel.
+    /// </summary>
+    public string? Header { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the close button of the BitProPanel.
+    /// </summary>
+    public string? CloseButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the close button of the BitProPanel.
+    /// </summary>
+    public string? CloseIcon { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the body of the BitProPanel.
+    /// </summary>
+    public string? Body { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the footer of the BitProPanel.
+    /// </summary>
+    public string? Footer { get; set; }
+}

src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss

@@ -1,2 +1,2 @@
-@import "fabric.mdl2.bit.blazoui.extras.scss";
-@import "components.scss";
+@import "components.scss";
+@import "fabric.mdl2.bit.blazoui.extras.scss";

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

@@ -1,4 +1,4 @@
 @import "../Components/DataGrid/BitDataGrid.scss";
 @import "../Components/DataGrid/Pagination/BitDataGridPaginator.scss";
-
 @import "../Components/PdfReader/BitPdfReader.scss";
+@import "../Components/ProPanel/BitProPanel.scss";

src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj

@@ -24,7 +24,8 @@
 	</ItemGroup>
 
 	<ItemGroup>
-		<ProjectReference Include="..\Bit.BlazorUI\Bit.BlazorUI.csproj" />
+        <ProjectReference Include="..\Bit.BlazorUI\Bit.BlazorUI.csproj" />
+        <ProjectReference Include="..\Bit.BlazorUI.Extras\Bit.BlazorUI.Extras.csproj" />
 	</ItemGroup>
 
 </Project>