adds a new aspect ratio... Container will set all images to the size of the containing without maintening the aspect ratio

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

@@ -13448,6 +13448,11 @@
             Represents a value indicating if the show indicator has changed.
             </summary>
         </member>
+        <member name="F:FluentUI.Blazor.Community.Components.FluentCxSlideshow`1._isSizeChanged">
+            <summary>
+            Represents a value indicating if the size has changed.
+            </summary>
+        </member>
         <member name="P:FluentUI.Blazor.Community.Components.FluentCxSlideshow`1.ShowControls">
             <summary>
             Gets or sets a value indicating that the controls are shown.
@@ -13823,9 +13828,6 @@
         <member name="M:FluentUI.Blazor.Community.Components.FluentCxSlideshow`1.OnAfterRenderAsync(System.Boolean)">
             <inheritdoc />
         </member>
-        <member name="M:FluentUI.Blazor.Community.Components.FluentCxSlideshow`1.Dispose">
-            <inheritdoc />
-        </member>
         <member name="M:FluentUI.Blazor.Community.Components.FluentCxSlideshow`1.DisposeAsync">
             <inheritdoc />
         </member>
@@ -13846,6 +13848,11 @@
             Occurs when all images have been resized.
             </summary>
         </member>
+        <member name="M:FluentUI.Blazor.Community.Components.FluentCxSlideshow`1.OnContainerSizeCompletedAsync">
+            <summary>
+            Occurs when all images have been resized.
+            </summary>
+        </member>
         <member name="M:FluentUI.Blazor.Community.Components.FluentCxSlideshow`1.OnFillSizeCompletedAsync(System.Int32,System.Int32)">
             <summary>
             Occurs when all images have been resized to fill the container.
@@ -14035,6 +14042,11 @@
              after that, the first image in the slideshow, when stretched, gives the height of the container,
              and the other images will take that height.</remarks>
         </member>
+        <member name="F:FluentUI.Blazor.Community.Components.SlideshowImageRatio.Container">
+            <summary>
+            The image covers the entire container, without keeping the aspect ratio.
+            </summary>
+        </member>
         <member name="T:FluentUI.Blazor.Community.Components.SlideshowIndicatorPosition">
             <summary>
             Gets or sets the position of the indicator.

src/Community.Components/Components/Slideshow/FluentCxSlideshow.razor.cs

@@ -16,7 +16,7 @@
 /// <typeparam name="TItem">Type of the item.</typeparam>
 [CascadingTypeParameter(nameof(TItem))]
 public partial class FluentCxSlideshow<TItem>
-    : FluentComponentBase, IAsyncDisposable, IDisposable
+    : FluentComponentBase, IAsyncDisposable
 {
     #region Fields
 
@@ -146,6 +146,11 @@
     /// </summary>
     private bool _showIndicatorChanged;
 
+    /// <summary>
+    /// Represents a value indicating if the size has changed.
+    /// </summary>
+    private bool _isSizeChanged;
+
     #endregion Fields
 
     #region Properties
@@ -192,7 +197,7 @@
     /// <summary>
     /// Gets or sets the interval between items.
     /// </summary>
     /// <remarks>If an item has its <see cref="SlideshowImage{TItem}.Interval"/> set, it will override
     ///  the <see cref="AutoplayInterval"/>.</remarks>
     [Parameter]
     public TimeSpan AutoplayInterval { get; set; } = TimeSpan.FromSeconds(5);
@@ -545,7 +550,7 @@
                 await SetInternalIndexAsync(Items.Count());
             }
         }
-        
+
         StartTimer();
 
         async Task SetInternalIndexAsync(int count)
@@ -775,7 +780,7 @@
         if (_slides.Count > 0 &&
             _module is not null)
         {
-            await _module.InvokeVoidAsync(store ? "storeItems" : "restoreItems", Id, _slides.Select(x=> x.Id).ToArray());
+            await _module.InvokeVoidAsync(store ? "storeItems" : "restoreItems", Id, _slides.Select(x => x.Id).ToArray());
             await _module.InvokeVoidAsync("clearTransition", Id);
         }
 
@@ -817,6 +822,8 @@
         _isTouchEnabledChanged = parameters.HasValueChanged(nameof(IsTouchEnabled), IsTouchEnabled);
         _isLoopingModeChanged = parameters.HasValueChanged(nameof(LoopMode), LoopMode);
         _showIndicatorChanged = parameters.HasValueChanged(nameof(ShowIndicators), ShowIndicators);
+        _isSizeChanged = parameters.HasValueChanged(nameof(Width), Width) ||
+                         parameters.HasValueChanged(nameof(Height), Height);
 
         return base.SetParametersAsync(parameters);
     }
@@ -897,6 +904,19 @@
         {
             await OnLoopingModeChangedAsync();
         }
+
+        if (_isSizeChanged)
+        {
+            await OnSetSizeAsync();
+        }
+    }
+
+    private async Task OnSetSizeAsync()
+    {
+        if (_module is not null)
+        {
+            await _module.InvokeVoidAsync("setSize", Id, Width.GetValueOrDefault(), Height.GetValueOrDefault());
+        }
     }
 
     /// <inheritdoc />
@@ -921,7 +941,7 @@
     }
 
     /// <inheritdoc />
-    public void Dispose()
+    public async ValueTask DisposeAsync()
     {
         if (_timer is not null)
         {
@@ -933,12 +953,6 @@
 
         _dotnetReference?.Dispose();
 
-        GC.SuppressFinalize(this);
-    }
-
-    /// <inheritdoc />
-    public async ValueTask DisposeAsync()
-    {
         if (DeviceInfoState.DeviceInfo is not null)
         {
             DeviceInfoState.DeviceInfo.OrientationChanged -= OnOrientationChanged;
@@ -996,6 +1010,18 @@
         }
     }
 
+    /// <summary>
+    /// Occurs when all images have been resized.
+    /// </summary>
+    [JSInvokable("setContainerSizeCompleted")]
+    public async Task OnContainerSizeCompletedAsync()
+    {
+        if (OnImagesResizeCompleted.HasDelegate)
+        {
+            await OnImagesResizeCompleted.InvokeAsync();
+        }
+    }
+
     /// <summary>
     /// Occurs when all images have been resized to fill the container.
     /// </summary>

src/Community.Components/Components/Slideshow/FluentCxSlideshow.razor.js

@@ -1,6 +1,7 @@
 const _instances = [];
 const auto = 0;
 const fill = 1;
+const container = 2;
 const horizontal = 0;
 const moveNext = 0;
 const movePrevious = 1;
@@ -87,6 +88,25 @@ function setFillSizeImage(instance, img, imageIdCollection) {
   instance.dotnetReference.invokeMethodAsync('setFillSizeCompleted', w, h);
 }
 
+function setContainerSizeImage(instance, img, imageIdCollection) {
+  const w = instance.width;
+  const h = instance.height;
+
+  img.width = w;
+  img.height = h;
+
+  for (let i = 1; i < imageIdCollection.length; ++i) {
+    const childImg = document.getElementById(imageIdCollection[i]);
+
+    if (childImg) {
+      childImg.width = w;
+      childImg.height = h;
+    }
+  }
+
+  instance.dotnetReference.invokeMethodAsync('setContainerSizeCompleted', w, h);
+}
+
 function setFillSizeImages(instance, imageIdCollection) {
   const img = document.getElementById(imageIdCollection[0]);
 
@@ -107,6 +127,26 @@ function setFillSizeImages(instance, imageIdCollection) {
   }
 }
 
+function setContainerSizeImages(instance, imageIdCollection) {
+  const img = document.getElementById(imageIdCollection[0]);
+
+  if (img) {
+    // If the image wasn't loaded.
+    if (img.naturalHeight === 0 || img.naturalWidth === 0) {
+      // Force loading
+      img.loading = 'eager';
+      img.src = img.src;
+
+      img.onload = () => {
+        setContainerSizeImage(instance, img, imageIdCollection);
+      };
+    }
+    else {
+      setContainerSizeImage(instance, img, imageIdCollection);
+    }
+  }
+}
+
 function setSizeFromParent(instance, width, height) {
   if (instance) {
     const rect = instance.parent.getBoundingClientRect();
@@ -187,15 +227,15 @@ export function setImagesSize(containerId, imageRatio, imageIdCollection) {
     else if (imageRatio === fill) {
       setFillSizeImages(instance, imageIdCollection);
     }
+    else if (imageRatio === container) {
+      setContainerSizeImages(instance, imageIdCollection);
+    }
   }
 }
 
 function onTouchStart(instance, e) {
   instance.startX = e.touches[0].clientX;
   instance.startY = e.touches[0].clientY;
-
-
-  console.log(`Touch start: (${instance.startX}, ${instance.startY})`);
 }
 
 function onTouchEnd(instance, e, touchThreshold) {
@@ -224,14 +264,10 @@ function onTouchEnd(instance, e, touchThreshold) {
       }
     }
   }
-
-  console.log(`Touch end: (${endX}, ${endY}) - Delta: (${deltaX}, ${deltaY})`);
 }
 
 function onTouchMove(e) {
   e.preventDefault();
-
-  console.log(`Touch move: (${e.touches[0].clientX}, ${e.touches[0].clientY})`);
 }
 
 export function disableOrEnableTouch(containerId, isTouchEnabled, touchThreshold) {
@@ -364,3 +400,12 @@ export function clearTransition(id) {
     instance.itemsContainer.style.transform = '';
   }
 }
+
+export function setSize(id, width, height) {
+  const instance = getInstance(id);
+  if (instance) {
+    instance.width = width;
+    instance.height = height;
+    setImagesSize(instance.id, instance.imageRatio, instance.imageIdCollection);
+  }
+}

src/Community.Components/Components/Slideshow/SlideshowImageRatio.cs

@@ -17,5 +17,10 @@ public enum SlideshowImageRatio
     /// <remarks>When the dimensions of the container are not set, the width of the container is set to 100%,
     ///  after that, the first image in the slideshow, when stretched, gives the height of the container,
     ///  and the other images will take that height.</remarks>
-    Fill
+    Fill,
+
+    /// <summary>
+    /// The image covers the entire container, without keeping the aspect ratio.
+    /// </summary>
+    Container
 }

tests/FluentUI.Blazor.Community.Components.Tests/Components/Slideshow/SlideshowImageRatioTests.cs

@@ -7,11 +7,13 @@ public void Enum_Should_Have_Auto_And_Fill_Members()
     {
         Assert.Equal(0, (int)SlideshowImageRatio.Auto);
         Assert.Equal(1, (int)SlideshowImageRatio.Fill);
+        Assert.Equal(2, (int)SlideshowImageRatio.Container);
     }
 
     [Theory]
     [InlineData(SlideshowImageRatio.Auto, "Auto")]
     [InlineData(SlideshowImageRatio.Fill, "Fill")]
+    [InlineData(SlideshowImageRatio.Container, "Container")]
     public void ToString_Should_Return_Correct_Name(SlideshowImageRatio ratio, string expected)
     {
         Assert.Equal(expected, ratio.ToString());
@@ -20,6 +22,7 @@ public void ToString_Should_Return_Correct_Name(SlideshowImageRatio ratio, strin
     [Theory]
     [InlineData("Auto", SlideshowImageRatio.Auto)]
     [InlineData("Fill", SlideshowImageRatio.Fill)]
+    [InlineData("Container", SlideshowImageRatio.Container)]
     public void Parse_Should_Return_Correct_Enum(string value, SlideshowImageRatio expected)
     {
         var result = Enum.Parse<SlideshowImageRatio>(value);
@@ -32,6 +35,7 @@ public void GetValues_Should_Contain_All_Members()
         var values = System.Enum.GetValues<SlideshowImageRatio>();
         Assert.Contains(SlideshowImageRatio.Auto, values);
         Assert.Contains(SlideshowImageRatio.Fill, values);
-        Assert.Equal(2, values.Length);
+        Assert.Contains(SlideshowImageRatio.Container, values);
+        Assert.Equal(3, values.Length);
     }
 }