fix(core): carousel fund-styles changes adoption. (#8104)

* fix(core): carousel fund-styles changes adoption

* fix(core): carousel breaking changes adoption

* chore(core,platform): styles bump to 0.24.0-rc.100

* chore(core): carousel breaking changes adoption

* test(core): carousel e2e

e2e/wdio/core/pages/carousel.po.ts

@@ -7,7 +7,7 @@ export class CarouselPo extends CoreBaseComponentPo {
 
     sectionTitle = 'fd-docs-section-title h2';
     carouselProperties = 'div fd-carousel';
-    displayedContent = 'fd-carousel div[style*=visible]';
+    displayedContent = 'fd-carousel [style*=visible]';
     displayedImg = this.displayedContent + ' img';
     navBtns = 'fd-carousel button';
     pageIndicators = 'fd-carousel .fd-carousel__page-indicator';

libs/core/src/lib/carousel/carousel-item/carousel-item.component.html

@@ -1,5 +1,3 @@
 <fd-busy-indicator [loading]="loading">
-    <div [style.visibility]="visibility">
-        <ng-content></ng-content>
-    </div>
+    <ng-content></ng-content>
 </fd-busy-indicator>

libs/core/src/lib/carousel/carousel-item/carousel-item.component.ts

@@ -17,7 +17,6 @@ let carouselItemCounter = 0;
 @Component({
     selector: 'fd-carousel-item',
     templateUrl: './carousel-item.component.html',
-    styleUrls: ['carousel-item.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None
 })
@@ -73,13 +72,8 @@ export class CarouselItemComponent implements CarouselItemInterface {
     @HostBinding('class.fd-carousel__item--active')
     carouselItemActive = true;
 
-    /**
-     * @hidden Handling width height in IE versions.
-     */
-    @HostBinding('class.fd-carousel--ie-handling')
-    ieAutoWidth = true;
-
     /** @hidden Hide/show slide, useful for managing tab order */
+    @HostBinding('style.visibility')
     _visibility: Visibility = 'visible';
 
     /** @hidden */

libs/core/src/lib/carousel/carousel.component.html

@@ -2,25 +2,29 @@
     class="fd-carousel"
     [class.fd-carousel--no-navigation]="!navigation"
     data-ride="carousel"
+    tabindex="0"
     [style.height]="height"
     [style.width]="width"
     [attr.dir]="dir"
+    role="region"
     #carouselContainer
     (click)="_focus()"
 >
     <ng-container *ngIf="_showPageIndicatorContainer && pageIndicatorsOrientation === 'top'">
         <ng-container *ngTemplateOutlet="pageIndicatorContainer"></ng-container>
     </ng-container>
 
-    <div class="fd-carousel__content fd-carousel__content--display" #carouselContent>
+    <div
+        class="fd-carousel__content"
+        [class.fd-carousel__content--horizontal]="!vertical"
+        [style.width]="_contentSizePx"
+    >
         <ng-container *ngIf="_showNavigationButtonInContent">
             <ng-container *ngTemplateOutlet="buttonLeft"></ng-container>
         </ng-container>
 
-        <div class="fd-carousel__slides-wrapper" #slidesWrapper [style.width]="_slidesWrapperSizePx">
-            <div #slideContainer [class.fd-carousel__content--horizontal]="!vertical">
-                <ng-content></ng-content>
-            </div>
+        <div #slideContainer class="fd-carousel__slides">
+            <ng-content></ng-content>
         </div>
 
         <ng-container *ngIf="_showNavigationButtonInContent">

libs/core/src/lib/carousel/carousel.component.scss

@@ -1,30 +1,10 @@
 @import '~fundamental-styles/dist/carousel';
 
-fd-carousel:focus {
-    outline: 1px dotted;
-}
-
-// TODO: Remove this after updating fundamental-styles lib version.
-
-.fd-carousel__slides-wrapper {
-    margin: 0 auto;
-    overflow: hidden;
-}
-
-.fd-carousel__content {
-    .fd-carousel__slides-wrapper {
-        > div {
-            min-height: fit-content;
-            touch-action: pan-x;
-            user-select: none;
-            -webkit-user-drag: none;
-            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-            &.fd-carousel__content--horizontal {
-                touch-action: pan-y;
-                width: 100%;
-                min-width: fit-content;
-            }
+.fd-carousel {
+    &__item {
+        fd-busy-indicator {
+            display: block;
+            height: 100%;
         }
     }
 }

libs/core/src/lib/carousel/carousel.component.ts

@@ -168,26 +168,6 @@ export class CarouselComponent implements OnInit, AfterContentInit, AfterViewIni
     @Output()
     readonly slideChange: EventEmitter<CarouselActiveSlides> = new EventEmitter<CarouselActiveSlides>();
 
-    /**
-     * @hidden Returns the `role` attribute of the carousel.
-     */
-    @HostBinding('attr.role')
-    role = 'region';
-
-    /**
-     * @hidden Returns the `tabIndex` of the carousel component.
-     */
-    @HostBinding('attr.tabindex')
-    get tabIndex(): number {
-        return 0;
-    }
-
-    /**
-     * @hidden Sets the overflow to auto value.
-     */
-    @HostBinding('style.overflow')
-    overflow = 'auto';
-
     /** @hidden */
     @ContentChildren(CarouselItemComponent, { descendants: true })
     slides: QueryList<CarouselItemComponent>;
@@ -200,14 +180,6 @@ export class CarouselComponent implements OnInit, AfterContentInit, AfterViewIni
     @ViewChild('carouselContainer')
     carouselContainer: ElementRef;
 
-    /** Carousel content container. */
-    @ViewChild('carouselContent')
-    carouselContentContainer: ElementRef;
-
-    /** Carousel slides container. */
-    @ViewChild('slidesWrapper')
-    carouselSlidesWrapper: ElementRef;
-
     /** @hidden Start index of currently active items */
     currentActiveSlidesStartIndex = 0;
 
@@ -227,7 +199,7 @@ export class CarouselComponent implements OnInit, AfterContentInit, AfterViewIni
     _slidesWrapperSize = 0;
 
     /** @hidden */
-    get _slidesWrapperSizePx(): string {
+    get _contentSizePx(): string {
         return this._slidesWrapperSize ? `${this._slidesWrapperSize}px` : this.width;
     }
 

package.json

@@ -131,7 +131,7 @@
         "fast-deep-equal": "3.1.3",
         "focus-trap": "6.7.3",
         "focus-visible": "5.2.0",
-        "fundamental-styles": "0.24.0-rc.99",
+        "fundamental-styles": "0.24.0-rc.100",
         "highlight.js": "10.7.2",
         "intl": "1.2.5",
         "jasminewd2": "2.2.0",