Merge pull request #15040 from IgniteUI/rivanova/feat-carousel-15025

feat(carousel): align with WC carousel

Author: kacheshmarova

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 19.1.0
+### General
+- `IgxCarousel`
+    - **Behavioral Changes** - the `maximumIndicatorsCount` input property now defaults to `10`.
+    - **Deprecation** - `CarouselIndicatorsOrientation` enum members `top` and `bottom` have been deprecated and will be removed in a future version. Use `start` and `end` instead.
+
 ## 19.0.0
 ### General
 - `IgxFilteringService`, `IgxGridBaseDirective`

projects/igniteui-angular/src/lib/carousel/README.md

@@ -17,8 +17,8 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | `vertical` | boolean | Controls should the carousel be rendered in vertical alignment. Defaults to `false`. |
 | `keyboardSupport` | boolean | Controls should the keyboard navigation should be supported. Defaults to `false`. |
 | `gesturesSupport` | boolean | Controls should the gestures should be supported. Defaults to `true`. |
-| `maximumIndicatorsCount` | number | The number of visible indicators. Defaults to `5`. |
-| `indicatorsOrientation` | CarouselIndicatorsOrientation | Controls whether the indicators should be previewed on top or on bottom of carousel. Defaults to `bottom`. |
+| `maximumIndicatorsCount` | number | The number of visible indicators. Defaults to `10`. |
+| `indicatorsOrientation` | CarouselIndicatorsOrientation | Controls the orientation of the indicators. Defaults to `end`. |
 | `animationType` | CarouselAnimationType | Controls what animation should be played when slides are changing. Defaults to `slide`. |
 | `total` | number | The number of slides the carousel currently has.  |
 | `current` | number | The index of the slide currently showing. |

projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts

@@ -385,20 +385,20 @@ describe('Carousel', () => {
             let indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture);
             expect(indicatorsContainer).toBeDefined();
 
-            carousel.indicatorsOrientation = CarouselIndicatorsOrientation.top;
+            carousel.indicatorsOrientation = CarouselIndicatorsOrientation.start;
             fixture.detectChanges();
 
             indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture);
             expect(indicatorsContainer).toBeNull();
-            indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.top);
+            indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.start);
             expect(indicatorsContainer).toBeDefined();
 
-            carousel.indicatorsOrientation = CarouselIndicatorsOrientation.bottom;
+            carousel.indicatorsOrientation = CarouselIndicatorsOrientation.end;
             fixture.detectChanges();
 
-            indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.top);
+            indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.start);
             expect(indicatorsContainer).toBeNull();
-            indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.bottom);
+            indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.end);
             expect(indicatorsContainer).toBeDefined();
         });
 
@@ -487,7 +487,7 @@ describe('Carousel', () => {
             expect(carousel.nativeElement.getAttribute('role')).toEqual(expectedRole);
             expect(carousel.nativeElement.getAttribute('aria-roledescription')).toEqual(expectedRoleDescription);
 
-            const indicators = carousel.nativeElement.querySelector(HelperTestFunctions.INDICATORS_BOTTOM_CLASS);
+            const indicators = carousel.nativeElement.querySelector(HelperTestFunctions.INDICATORS_END_CLASS);
 
             expect(indicators).toBeDefined();
             expect(indicators.getAttribute('role')).toEqual('tablist');
@@ -851,7 +851,7 @@ describe('Carousel', () => {
 
             expect(carousel.total).toEqual(0);
             expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeNull();
-            expect(HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.top)).toBeNull();
+            expect(HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.start)).toBeNull();
             expect(HelperTestFunctions.getNextButton(fixture)).toBeNull();
             expect(HelperTestFunctions.getPreviousButton(fixture)).toBeNull();
 
@@ -862,7 +862,7 @@ describe('Carousel', () => {
 
             expect(carousel.total).toEqual(2);
             expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeDefined();
-            expect(HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.top)).toBeDefined();
+            expect(HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.start)).toBeDefined();
             expect(HelperTestFunctions.getNextButton(fixture).hidden).toBeFalsy();
             expect(HelperTestFunctions.getPreviousButton(fixture).hidden).toBeFalsy();
         }));
@@ -1054,8 +1054,8 @@ class HelperTestFunctions {
     public static BUTTON_ARROW_CLASS = '.igx-nav-arrow';
     public static ACTIVE_SLIDE_CLASS = 'igx-slide--current';
     public static PREVIOUS_SLIDE_CLASS = 'igx-slide--previous';
-    public static INDICATORS_TOP_CLASS = '.igx-carousel-indicators--top';
-    public static INDICATORS_BOTTOM_CLASS = '.igx-carousel-indicators--bottom';
+    public static INDICATORS_START_CLASS = '.igx-carousel-indicators--start';
+    public static INDICATORS_END_CLASS = '.igx-carousel-indicators--end';
     public static INDICATORS_LABEL_CLASS = '.igx-carousel__label';
     public static INDICATOR_CLASS = '.igx-carousel-indicators__indicator';
     public static INDICATOR_DOT_CLASS = '.igx-nav-dot';
@@ -1079,26 +1079,26 @@ class HelperTestFunctions {
         return prev.querySelector(HelperTestFunctions.BUTTON_ARROW_CLASS);
     }
 
-    public static getIndicatorsContainer(fixture, position: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.bottom): HTMLElement {
+    public static getIndicatorsContainer(fixture, position: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.end): HTMLElement {
         const carouselNative = fixture.nativeElement;
-        if (position === CarouselIndicatorsOrientation.bottom) {
-            return carouselNative.querySelector(HelperTestFunctions.INDICATORS_BOTTOM_CLASS);
+        if (position === CarouselIndicatorsOrientation.end) {
+            return carouselNative.querySelector(HelperTestFunctions.INDICATORS_END_CLASS);
         } else {
-            return carouselNative.querySelector(HelperTestFunctions.INDICATORS_TOP_CLASS);
+            return carouselNative.querySelector(HelperTestFunctions.INDICATORS_START_CLASS);
         }
     }
 
-    public static getIndicatorsLabel(fixture, position: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.bottom) {
+    public static getIndicatorsLabel(fixture, position: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.end) {
         const indContainer = HelperTestFunctions.getIndicatorsContainer(fixture, position);
         return indContainer.querySelector(HelperTestFunctions.INDICATORS_LABEL_CLASS);
     }
 
-    public static getIndicators(fixture, position: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.bottom) {
+    public static getIndicators(fixture, position: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.end) {
         const indContainer = HelperTestFunctions.getIndicatorsContainer(fixture, position);
         return indContainer.querySelectorAll(HelperTestFunctions.INDICATOR_CLASS);
     }
 
-    public static getIndicatorsDots(fixture, position: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.bottom) {
+    public static getIndicatorsDots(fixture, position: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.end) {
         const indContainer = HelperTestFunctions.getIndicatorsContainer(fixture, position);
         return indContainer.querySelectorAll(HelperTestFunctions.INDICATOR_DOT_CLASS);
     }

projects/igniteui-angular/src/lib/carousel/carousel.component.ts

@@ -230,36 +230,36 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
 
     /**
      * Controls the maximum indexes that can be shown.
-     * Default value is `5`.
+     * Default value is `10`.
      * ```html
-     * <igx-carousel [maximumIndicatorsCount]="10"></igx-carousel>
+     * <igx-carousel [maximumIndicatorsCount]="5"></igx-carousel>
      * ```
      *
      * @memberOf IgxCarouselComponent
      */
-    @Input() public maximumIndicatorsCount = 5;
+    @Input() public maximumIndicatorsCount = 10;
 
     /**
-     * Gets/sets the display mode of carousel indicators. It can be top or bottom.
-     * Default value is `bottom`.
+     * Gets/sets the display mode of carousel indicators. It can be `start` or `end`.
+     * Default value is `end`.
      * ```html
-     * <igx-carousel indicatorsOrientation='top'>
+     * <igx-carousel indicatorsOrientation="start">
      * <igx-carousel>
      * ```
      *
-     * @memberOf IgxSlideComponent
+     * @memberOf IgxCarouselComponent
      */
-    @Input() public indicatorsOrientation: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.bottom;
+    @Input() public indicatorsOrientation: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.end;
 
     /**
      * Gets/sets the animation type of carousel.
      * Default value is `slide`.
      * ```html
-     * <igx-carousel animationType='none'>
+     * <igx-carousel animationType="none">
      * <igx-carousel>
      * ```
      *
-     * @memberOf IgxSlideComponent
+     * @memberOf IgxCarouselComponent
      */
     @Input() public override animationType: CarouselAnimationType = CarouselAnimationType.slide;
 
@@ -472,7 +472,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
     public get indicatorsClass() {
         return {
             ['igx-carousel-indicators--focused']: this._hasKeyboardFocusOnIndicators,
-            [`igx-carousel-indicators--${this.indicatorsOrientation}`]: true
+            [`igx-carousel-indicators--${this.getIndicatorsClass()}`]: true
         };
     }
 
@@ -1011,6 +1011,17 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         }
     }
 
+    private getIndicatorsClass(): string {
+        switch (this.indicatorsOrientation) {
+            case CarouselIndicatorsOrientation.top:
+                return CarouselIndicatorsOrientation.start;
+            case CarouselIndicatorsOrientation.bottom:
+                return CarouselIndicatorsOrientation.end;
+            default:
+                return this.indicatorsOrientation;
+        }
+    }
+
     private getNextIndex(): number {
         return (this.current + 1) % this.total;
     }

projects/igniteui-angular/src/lib/carousel/enums.ts

@@ -8,7 +8,15 @@ export const CarouselAnimationType = /*@__PURE__*/mkenum({
 export type CarouselAnimationType = (typeof CarouselAnimationType)[keyof typeof CarouselAnimationType];
 
 export const CarouselIndicatorsOrientation = /*@__PURE__*/mkenum({
+    /**
+     * @deprecated in version 19.1.0. Use `end` instead.
+     */
     bottom: 'bottom',
-    top: 'top'
+    /**
+     * @deprecated in version 19.1.0. Use `start` instead.
+     */
+    top: 'top',
+    start: 'start',
+    end: 'end'
 });
 export type CarouselIndicatorsOrientation = (typeof CarouselIndicatorsOrientation)[keyof typeof CarouselIndicatorsOrientation];

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss

@@ -11,14 +11,14 @@
             @extend %igx-carousel-indicator !optional;
         }
 
-        @include m(top) {
+        @include m(start) {
             @extend %igx-carousel-indicators !optional;
-            @extend %igx-carousel-indicators--top !optional;
+            @extend %igx-carousel-indicators--start !optional;
         }
 
-        @include m(bottom) {
+        @include m(end) {
             @extend %igx-carousel-indicators !optional;
-            @extend %igx-carousel-indicators--bottom !optional;
+            @extend %igx-carousel-indicators--end !optional;
         }
 
         @include m(focused) {

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -320,11 +320,11 @@
         }
     }
 
-    %igx-carousel-indicators--bottom {
+    %igx-carousel-indicators--end {
         bottom: 0;
     }
 
-    %igx-carousel-indicators--top {
+    %igx-carousel-indicators--start {
         top: 0;
     }
 
@@ -563,16 +563,19 @@
             }
         }
 
+
         %igx-carousel-arrow--prev {
             inset-block-start: 0;
             margin-block-start: rem(16px);
         }
 
+
         %igx-carousel-arrow--next {
             inset-block-end: 0;
             margin-block-end: rem(16px);
         }
 
+
         %igx-carousel-indicators {
             inset-inline-end: 0;
             inset-inline-start: unset;
@@ -590,7 +593,7 @@
             padding: rem(4px) rem(6px);
         }
 
-        %igx-carousel-indicators--top {
+        %igx-carousel-indicators--start {
             inset-inline-end: unset;
             inset-inline-start: 0;
             margin-inline-start: rem(16px);
@@ -603,12 +606,13 @@
                 padding: rem(6px);
             }
 
+
             %igx-carousel-label-indicator {
                 padding: rem(4px) rem(6px);
                 margin-inline-end: rem(16px);
             }
 
-            %igx-carousel-indicators--top {
+            %igx-carousel-indicators--start {
                 margin-inline-start: rem(16px);
             }
         }

src/app/carousel/carousel.sample.ts

@@ -41,10 +41,10 @@ export class CarouselSampleComponent {
     }
 
     public changeOrientation() {
-        if (this.car.indicatorsOrientation === CarouselIndicatorsOrientation.top) {
-            this.car.indicatorsOrientation = CarouselIndicatorsOrientation.bottom;
+        if (this.car.indicatorsOrientation === CarouselIndicatorsOrientation.start) {
+            this.car.indicatorsOrientation = CarouselIndicatorsOrientation.end;
         } else {
-            this.car.indicatorsOrientation = CarouselIndicatorsOrientation.top;
+            this.car.indicatorsOrientation = CarouselIndicatorsOrientation.start;
         }
     }