diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2245bc8168e..3f964816ca1 100644
--- a/CHANGELOG.md
+++ b/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`
diff --git a/projects/igniteui-angular/src/lib/carousel/README.md b/projects/igniteui-angular/src/lib/carousel/README.md
index 3e89f5c97f6..a1696e9baf4 100644
--- a/projects/igniteui-angular/src/lib/carousel/README.md
+++ b/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. |
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts
index 4e0265ad96e..f0fa7cca10a 100644
--- a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts
+++ b/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);
}
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
index 9d3281e1b77..78d3cceb1f7 100644
--- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
+++ b/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
- *
+ *
* ```
*
* @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
- *
+ *
*
* ```
*
- * @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
- *
+ *
*
* ```
*
- * @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;
}
diff --git a/projects/igniteui-angular/src/lib/carousel/enums.ts b/projects/igniteui-angular/src/lib/carousel/enums.ts
index 5e89f1cf2eb..586cf004323 100644
--- a/projects/igniteui-angular/src/lib/carousel/enums.ts
+++ b/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];
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss
index a98b5a71688..297a4a07ae9 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss
+++ b/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) {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
index 02086d54a84..209a7f08d6a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
+++ b/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);
}
}
diff --git a/src/app/carousel/carousel.sample.ts b/src/app/carousel/carousel.sample.ts
index bd2ad87d711..730024c24d9 100644
--- a/src/app/carousel/carousel.sample.ts
+++ b/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;
}
}