Merge pull request #921 from takenet/fix/arrows-carousel

fix(carousel): fix arrow erros when wrok with diferents themes

src/components.d.ts

@@ -24,6 +24,7 @@ import { PaperBackground, PaperElevation } from "./components/paper/paper-interf
 import { justifyContent } from "./components/card/card-footer/card-footer";
 import { justifyContent as justifyContent1 } from "./components/card/card-header/card-header";
 import { arrows, gap } from "./components/carousel/carousel-interface";
+import { Themes } from "./components/theme-provider/theme-provider";
 import { ChipSize, ChipVariant } from "./components/chip/chip";
 import { ColorChipClickable, Size } from "./components/chip-clickable/chip-clickable";
 import { ColorChipSelected, Size as Size1 } from "./components/chip-selected/chip-selected";
@@ -64,7 +65,7 @@ import { SwitchSize } from "./components/switch/switch";
 import { JustifyContent } from "./components/table/table-cell/table-cell";
 import { JustifyContent as JustifyContent1 } from "./components/table/table-header-cell/table-header-cell";
 import { Overflow } from "./components/tabs/tab (depreciated)/tabs-interface";
-import { Themes } from "./components/theme-provider/theme-provider";
+import { Themes as Themes1 } from "./components/theme-provider/theme-provider";
 import { ActionType, ButtonActionType, CreateToastType, PositionType, VariantType } from "./components/toast/toast-interface";
 import { TooltipPostionType } from "./components/tooltip/tooltip";
 import { Bold, FontLineHeight, FontSize, Tag } from "./components/typo/typo";
@@ -575,6 +576,13 @@ export namespace Components {
         "slidePerPage"?: number;
     }
     interface BdsCarouselItem {
+        "bgColor"?: string;
+        "bgImage"?: string;
+        "bgImageBrightness"?: number;
+        /**
+          * Set what theme will be aplyed inside the component. 'light', 'dark';
+         */
+        "theme"?: Themes;
     }
     interface BdsCheckbox {
         /**
@@ -1030,6 +1038,10 @@ export namespace Components {
           * Alternative text for the image.
          */
         "alt"?: string;
+        /**
+          * Brightness of the image.
+         */
+        "brightness"?: number;
         /**
           * Data test is the prop to specifically test the component action object.
          */
@@ -4156,6 +4168,13 @@ declare namespace LocalJSX {
         "slidePerPage"?: number;
     }
     interface BdsCarouselItem {
+        "bgColor"?: string;
+        "bgImage"?: string;
+        "bgImageBrightness"?: number;
+        /**
+          * Set what theme will be aplyed inside the component. 'light', 'dark';
+         */
+        "theme"?: Themes;
     }
     interface BdsCheckbox {
         /**
@@ -4649,6 +4668,10 @@ declare namespace LocalJSX {
           * Alternative text for the image.
          */
         "alt"?: string;
+        /**
+          * Brightness of the image.
+         */
+        "brightness"?: number;
         /**
           * Data test is the prop to specifically test the component action object.
          */

src/components/carousel/carousel-item.scss

@@ -0,0 +1,24 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  width: auto;
+}
+
+.carrosel-item-frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+
+  ::slotted(*) {
+    position: relative;
+  }
+}
+
+.image-bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}

src/components/carousel/carousel-item.tsx

@@ -1,12 +1,41 @@
-import { Component, h } from '@stencil/core';
-
+import { Component, h, Host, Prop } from '@stencil/core';
+import { Themes } from '../theme-provider/theme-provider';
 @Component({
   tag: 'bds-carousel-item',
-  styleUrl: 'carousel.scss',
+  styleUrl: 'carousel-item.scss',
   shadow: true,
 })
 export class BdsCarouselItem {
+  /**
+   * Set what theme will be aplyed inside the component.
+   * 'light', 'dark';
+   */
+  @Prop() theme?: Themes = 'light';
+
+  @Prop() bgImage?: string;
+
+  @Prop() bgImageBrightness?: number = 1;
+
+  @Prop() bgColor?: string;
+
   render(): HTMLElement {
-    return <slot />;
+    return (
+      <Host class="carrosel-item">
+        <bds-theme-provider theme={this.theme} class="carrosel-item-frame" style={{ background: this.bgColor }}>
+          {this.bgImage && (
+            <bds-image
+              class="image-bg"
+              alt="Example of a image"
+              width="100%"
+              height="100%"
+              brightness={this.bgImageBrightness}
+              object-fit="cover"
+              src={this.bgImage}
+            />
+          )}
+          <slot />
+        </bds-theme-provider>
+      </Host>
+    );
   }
 }