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; } }