[FIX] carousel: missing color for empty carousel header

The header for an empty carousel with a title was missing a background
color, making it transparent.

closes #7177

Task: 5082459
X-original-commit: b1f21db
Signed-off-by: Pierre Rousseau (pro) <pro@odoo.com>

Author: hokolomopo

src/components/figures/figure_carousel/figure_carousel.ts

@@ -103,11 +103,11 @@ export class CarouselFigure extends Component<Props, SpreadsheetChildEnv> {
 
   get headerStyle(): string {
     const cssProperties: CSSProperties = {};
-    if (this.selectedCarouselItem?.type === "carouselDataView") {
-      cssProperties["background-color"] = "#ffffff";
-    } else if (this.selectedCarouselItem?.type === "chart") {
+    if (this.selectedCarouselItem?.type === "chart") {
       const chart = this.env.model.getters.getChartRuntime(this.selectedCarouselItem.chartId);
       cssProperties["background-color"] = chart.background;
+    } else {
+      cssProperties["background-color"] = "#ffffff";
     }
     return cssPropertiesToCss(cssProperties);
   }

tests/figures/carousel/carousel_figure_component.test.ts

@@ -9,6 +9,7 @@ import {
   createCarousel,
   createChart,
   paste,
+  selectCarouselItem,
   updateCarousel,
 } from "../../test_helpers/commands_helpers";
 import { click, clickAndDrag, getElStyle, triggerMouseEvent } from "../../test_helpers/dom_helper";
@@ -164,6 +165,25 @@ describe("Carousel figure component", () => {
     expect(getElStyle(".o-figure .o-carousel-title", "font-weight")).toBe("bold");
   });
 
+  test("Carousel header has the correct background color", async () => {
+    createCarousel(model, { items: [], title: { text: "Title" } }, "carouselId");
+    await mountSpreadsheet({ model });
+
+    // Empty carousel
+    expect(".o-carousel-header").toHaveStyle({ "background-color": "#FFFFFF" });
+
+    // Carousel with data view
+    updateCarousel(model, "carouselId", { items: [{ type: "carouselDataView" }] });
+    await nextTick();
+    expect(".o-carousel-header").toHaveStyle({ "background-color": "#FFFFFF" });
+
+    // Carousel with chart
+    const chartId = addNewChartToCarousel(model, "carouselId", { background: "#123456" });
+    selectCarouselItem(model, "carouselId", { type: "chart", chartId });
+    await nextTick();
+    expect(".o-carousel-header").toHaveStyle({ "background-color": "#123456" });
+  });
+
   test("display chart menu", async () => {
     createCarousel(model, { items: [{ type: "carouselDataView" }] }, "carouselId");
     addNewChartToCarousel(model, "carouselId", { type: "bar" });