Merge pull request #94 from Community-Toolkit-for-Fluent-UI-Blazor/fluentcx-observers

Add an observer provider

Author: MarvinKlein1508

FluentUI.Blazor.Community.sln

@@ -1,7 +1,9 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
+
 # Visual Studio Version 18
 VisualStudioVersion = 18.0.11018.127
+
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{827E0CD3-B72D-47B6-A68D-7590B98EB39B}"
 EndProject

examples/demo/FluentUI.Demo.Shared/FluentUI.Blazor.Community.Components.xml

@@ -38,7 +38,7 @@
     <FluentDialogProvider />
     <FluentToastProvider />
     <FluentCxLottieProvider />
-    <FluentCxObserversProvider />
+    <FluentCxObserverProvider />
 
     <FluentTooltipProvider />
 </FluentLayout>

examples/demo/FluentUI.Demo.Shared/Layout/DemoMainLayout.razor

@@ -628,9 +628,9 @@ private async Task OnGridKeyDownAsync(FluentKeyCodeEventArgs e)
                 return;
         }
 
-        next = (next + _colors.Count) % _colors.Count;
+        next = (_focusIndex + _colors.Count) % _colors.Count;
 
-        await SetFocusAsync(next);
+        await SetFocusAsync(_focusIndex);
     }
 
     /// <summary>

src/Community.Components/Components/ColorPalette/FluentCxColorPalette.razor.cs

@@ -85,7 +85,7 @@ function dispose(id) {
 }
 
 export const fluentcxLottiePlayer = {
-  load: (id, path, loop, autoplay, speed, renderer) => load(id, path, loop, autoplay, speed, renderer),
+  load: (id, dotnetRef, path, loop, autoplay, speed, renderer) => load(id, dotnetRef, path, loop, autoplay, speed, renderer),
   play: (id) => play(id),
   pause: (id) => pause(id),
   stop: (id) => stop(id),

src/Community.Components/Components/Lottie/FluentCxLottiePlayer.razor.js

@@ -2,7 +2,7 @@
 @implements IAsyncDisposable
 
 <HeadContent>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.0/lottie.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.13.0/lottie.min.js"></script>
 </HeadContent>
 
 @code {

src/Community.Components/Components/Lottie/FluentCxLottieProvider.razor

@@ -0,0 +1,41 @@
+namespace FluentUI.Blazor.Community.Components;
+
+/// <summary>
+/// Represents the dimensions and position of a rectangle, typically used to describe the bounding box of an element in
+/// a coordinate space.
+/// </summary>
+/// <remarks>The rectangle is defined by its top, left, bottom, and right edges, as well as its width and height.
+/// All values are expressed in the same coordinate system, and may be fractional. This type is commonly used in
+/// scenarios such as layout calculations, collision detection, or graphical rendering.</remarks>
+public record DomRect
+{
+    /// <summary>
+    /// Gets the top coordinate value.
+    /// </summary>
+    public double Top { get; init; }
+
+    /// <summary>
+    /// Gets the left coordinate value.
+    /// </summary>
+    public double Left { get; init; }
+
+    /// <summary>
+    /// Gets the bottom coordinate value.
+    /// </summary>
+    public double Bottom { get; init; }
+
+    /// <summary>
+    /// Gets the right coordinate value.
+    /// </summary>
+    public double Right { get; init; }
+
+    /// <summary>
+    /// Gets the width of the element.
+    /// </summary>
+    public double Width { get; init; }
+
+    /// <summary>
+    /// Gets the height of the element.
+    /// </summary>
+    public double Height { get; init; }
+}

src/Community.Components/Components/Observers/DomRect.cs

@@ -1,4 +1,2 @@
 @namespace FluentUI.Blazor.Community.Components
 @inherits FluentComponentBase
-
-<span />