initial promodal impl

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor

@@ -0,0 +1,65 @@
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+
+<BitModal 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"
+          Position="Position"
+          ScrollerSelector="@ScrollerSelector"
+          Styles="Styles">
+    @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="CloseModal"
+                        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>
+    }
+</BitModal>

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs

@@ -0,0 +1,185 @@
+namespace Bit.BlazorUI;
+
+public partial class BitProModal : BitComponentBase
+{
+    [Inject] private IJSRuntime _js { get; set; } = default!;
+
+
+
+    /// <summary>
+    /// When true, the Modal will be positioned absolute instead of fixed.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool AbsolutePosition { get; set; }
+
+    /// <summary>
+    /// Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless.
+    /// </summary>
+    [Parameter] public bool? Alert { get; set; }
+
+    /// <summary>
+    /// Enables the auto scrollbar toggle behavior of the Modal.
+    /// </summary>
+    [Parameter] public bool AutoToggleScroll { get; set; }
+
+    /// <summary>
+    /// Whether the Modal can be light dismissed by clicking outside the Modal (on the overlay).
+    /// </summary>
+    [Parameter] public bool Blocking { get; set; }
+
+    /// <summary>
+    /// The alias of the ChildContent.
+    /// </summary>
+    [Parameter] public RenderFragment? Body { get; set; }
+
+    /// <summary>
+    /// The content of the Modal, it can be any custom tag or text.
+    /// </summary>
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes for different parts of the BitModal component.
+    /// </summary>
+    [Parameter] public BitProModalClassStyles? Classes { get; set; }
+
+    /// <summary>
+    /// The CSS selector of the drag element. by default it's the Modal container.
+    /// </summary>
+    [Parameter] public string? DragElementSelector { get; set; }
+
+    /// <summary>
+    /// Whether the Modal can be dragged around.
+    /// </summary>
+    [Parameter] public bool Draggable { 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>
+    /// Makes the Modal height 100% of its parent container.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool FullHeight { get; set; }
+
+    /// <summary>
+    /// Makes the Modal width and height 100% of its parent container.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool FullSize { get; set; }
+
+    /// <summary>
+    /// Makes the Modal width 100% of its parent container.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool FullWidth { get; set; }
+
+    /// <summary>
+    /// Whether the Modal is displayed.
+    /// </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>
+    /// Whether the Modal should be modeless (e.g. not dismiss when focusing/clicking outside of the Modal). if true: Blocking is ignored, there will be no overlay.
+    /// </summary>
+    [Parameter] public bool Modeless { get; set; }
+
+    /// <summary>
+    /// A callback function for when the Modal is dismissed.
+    /// </summary>
+    [Parameter] public EventCallback<MouseEventArgs> OnDismiss { get; set; }
+
+    /// <summary>
+    /// A callback function for when somewhere on the overlay element of the Modal is clicked.
+    /// </summary>
+    [Parameter] public EventCallback<MouseEventArgs> OnOverlayClick { get; set; }
+
+    /// <summary>
+    /// Position of the Modal on the screen.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public BitPosition? Position { get; set; }
+
+    /// <summary>
+    /// Set the element selector for which the Modal 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 BitModal component.
+    /// </summary>
+    [Parameter] public BitProModalClassStyles? Styles { get; set; }
+
+    /// <summary>
+    /// ARIA id for the subtitle of the Modal, if any.
+    /// </summary>
+    [Parameter] public string? SubtitleAriaId { get; set; }
+
+    /// <summary>
+    /// ARIA id for the title of the Modal, if any.
+    /// </summary>
+    [Parameter] public string? TitleAriaId { 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-pmd";
+
+    protected override void RegisterCssClasses()
+    {
+        ClassBuilder.Register(() => ModeFull ? "bit-pmd-mfl" : string.Empty);
+    }
+
+
+
+    private async Task CloseModal(MouseEventArgs e)
+    {
+        if (IsEnabled is false) return;
+
+        if (await AssignIsOpen(false) is false) return;
+
+        await OnDismiss.InvokeAsync(e);
+    }
+}

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss

@@ -0,0 +1,98 @@
+@import '../../../Bit.BlazorUI/Styles/functions.scss';
+
+.bit-mdl {
+    inset: 0;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    display: flex;
+    position: fixed;
+    font-weight: 400;
+    align-items: center;
+    pointer-events: auto;
+    z-index: $zindex-modal;
+    justify-content: center;
+    font-size: spacing(1.75);
+    font-family: $tg-font-family;
+    background-color: transparent;
+    transition: opacity 300ms ease 0s;
+}
+
+.bit-mdl-abs {
+    z-index: unset;
+    position: absolute;
+}
+
+.bit-mdl-ovl {
+    inset: 0;
+    z-index: 0;
+    position: absolute;
+    background-color: $clr-bg-overlay;
+}
+
+.bit-mdl-ctn {
+    max-width: 100%;
+    position: absolute;
+    box-sizing: border-box;
+    background-color: $clr-bg-pri;
+    box-shadow: $box-shadow-callout;
+    border-radius: $shp-border-radius;
+}
+
+.bit-mdl-fhe {
+    .bit-mdl-ctn {
+        height: 100%;
+    }
+}
+
+.bit-mdl-fwi {
+    .bit-mdl-ctn {
+        width: 100%;
+    }
+}
+
+.bit-mdl-ctr {
+    align-items: center;
+    justify-content: center;
+}
+
+.bit-mdl-tl {
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+.bit-mdl-tc {
+    align-items: flex-start;
+    justify-content: center;
+}
+
+.bit-mdl-tr {
+    align-items: flex-start;
+    justify-content: flex-end;
+}
+
+.bit-mdl-cl {
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.bit-mdl-cr {
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.bit-mdl-bl {
+    align-items: flex-end;
+    justify-content: flex-start;
+}
+
+.bit-mdl-bc {
+    align-items: flex-end;
+    justify-content: center;
+}
+
+.bit-mdl-br {
+    align-items: flex-end;
+    justify-content: flex-end;
+}

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModalClassStyles.cs

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