Merge pull request #94 from ofaruk84/ix-map-navigation-overlay

Map Navigation Overlay Component Implemented

README.md

@@ -344,6 +344,11 @@ menuAboutElement.ToggleSettings(true);
   <div>Content</div>
 </MapNavigation>
 ```
+## Map Navigation Overlay
+
+```razor
+<MapNavigationOverlay  Id="overlay"></MapNavigationOverlay>
+```
 
 ## Popover News
 

SiemensIXBlazor.Tests/MapNavigation/MapNavigationOverlayTest.cs

@@ -0,0 +1,44 @@
+using Bunit;
+using Microsoft.AspNetCore.Components;
+using SiemensIXBlazor.Components.MapNavigationOverlay;
+using System.ComponentModel;
+
+namespace SiemensIXBlazor.Tests.MapNavigation
+{
+    public class MapNavigationOverlayTest : TestContextBase
+    {
+        [Fact]
+        public void ComponentRendersWithParametersSetCorrectly()
+        {
+            // Arrange
+            var cut = RenderComponent<MapNavigationOverlay>(parameters => parameters
+                .Add(p => p.Id, "testId")
+                .Add(p => p.Name, "testApp")
+                .Add(p => p.Icon, "testIcon")
+                .Add(p => p.IconColor, "testColor"));
+
+            // Assert
+            cut.MarkupMatches(
+            "<ix-map-navigation-overlay id=\"testId\" name=\"testApp\" icon=\"testIcon\" icon-color=\"testColor\" ></ix-map-navigation-overlay>");
+
+        }
+        [Fact]
+        public void EventCallbacksAreTriggeredCorrectly()
+        {
+            // Arrange
+            var isCloseButtonClicked = false;
+
+            var cut = RenderComponent<MapNavigationOverlay>(parameters => parameters
+                  .Add(p => p.Id, "test-id")
+                  .Add(p => p.CloseButtonClickedEvent, EventCallback.Factory.Create(this, () => isCloseButtonClicked = true))
+              );
+
+
+            // Act
+            cut.InvokeAsync(() => cut.Instance.CloseClick());
+
+            // Assert
+            Assert.True(isCloseButtonClicked);
+        }
+    }
+}

SiemensIXBlazor.Tests/MapNavigationTest.cs → SiemensIXBlazor.Tests/MapNavigation/MapNavigationTest.cs

@@ -9,17 +9,16 @@
 
 using Bunit;
 using Microsoft.AspNetCore.Components;
-using SiemensIXBlazor.Components.MapNavigation;
 
-namespace SiemensIXBlazor.Tests;
+namespace SiemensIXBlazor.Tests.MapNavigation;
 
 public class MapNavigationTest : TestContextBase
 {
     [Fact]
     public void ComponentRendersWithParametersSetCorrectly()
     {
         // Arrange
-        var cut = RenderComponent<MapNavigation>(parameters => parameters
+        var cut = RenderComponent<Components.MapNavigation.MapNavigation>(parameters => parameters
             .Add(p => p.ChildContent, (RenderFragment)(builder => builder.AddMarkupContent(0, "Test content")))
             .Add(p => p.Id, "testId")
             .Add(p => p.ApplicationName, "testApp")
@@ -38,7 +37,7 @@ public async Task EventCallbacksTriggered()
         var contextMenuClickEventWasCalled = false;
         var navigationToggledEventWasCalled = false;
 
-        var cut = RenderComponent<MapNavigation>(parameters => parameters
+        var cut = RenderComponent<Components.MapNavigation.MapNavigation> (parameters => parameters
             .Add(p => p.Id, "testId")
             .Add(p => p.ContextMenuClickEvent,
                 EventCallback.Factory.Create(this, () => { contextMenuClickEventWasCalled = true; }))

SiemensIXBlazor/Components/MapNavigationOverlay/MapNavigationOverlay.razor

@@ -0,0 +1,13 @@
+@using Microsoft.JSInterop;
+@inherits IXBaseComponent
+@inject IJSRuntime JSRuntime
+
+<ix-map-navigation-overlay @attributes=@UserAttributes
+                           class=@Class
+                           style="@Style"
+                           id=@Id
+                           name=@Name
+                           icon=@Icon
+                           icon-color=@IconColor>
+
+</ix-map-navigation-overlay>

SiemensIXBlazor/Components/MapNavigationOverlay/MapNavigationOverlay.razor.cs

@@ -0,0 +1,41 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using SiemensIXBlazor.Interops;
+
+namespace SiemensIXBlazor.Components.MapNavigationOverlay
+{
+    public partial class MapNavigationOverlay
+    {
+        [Parameter, EditorRequired]
+        public string Id { get; set; } = string.Empty;
+        [Parameter]
+        public string? Name { get; set; }
+        [Parameter]
+        public string? Icon { get; set; }
+
+        [Parameter]
+        public string? IconColor { get; set; }
+
+        [Parameter]
+        public EventCallback CloseButtonClickedEvent { get; set; }
+
+        private BaseInterop _interop;
+
+        protected async override Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (firstRender)
+            {
+                _interop = new(JSRuntime);
+
+                await _interop.AddEventListener(this, Id, "closeClick", "CloseButtonClickedEvent");
+            }
+        }
+
+
+        [JSInvokable]
+        public async Task CloseClick()
+        {
+            await CloseButtonClickedEvent.InvokeAsync();
+        }
+    }
+}