feat(carousel): align with WC carousel (#14651)

* feat(carousel): add vertical & indicator props; add keyboard focus classes
---------

Co-authored-by: sivanova <[email protected]>
Co-authored-by: Silvia Ivanova <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -9,6 +9,10 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - To streamline the sorting of columns with custom formats, a new `FormattedValuesSortingStrategy` has been introduced. This strategy simplifies the sorting process by allowing direct sorting based on formatted values, eliminating the need to extend the `DefaultSortingStrategy` or implement a custom `ISortingStrategy`. This enhancement improves the ease of handling sorting with custom column formatters.
 
+- `IgxCarousel`
+    - Added support for vertical alignment. Can be configured via the `vertical` property. Defaults to `false`.
+    - Added support for showing/hiding the indicator controls (dots). Can be configured via the `indicators` property. Defaults to `true`.
+
 #### Scrollbar: New CSS variables
 
 We have introduced new CSS variables to allow for more customizable scrollbars. This enhancement utilizes the available WebKit pseudo-selectors such as `::-webkit-scrollbar-track`. However, please note that these pseudo-selectors are prefixed with `-webkit-` and are only supported in WebKit-based browsers (e.g., Chrome, Safari).
@@ -34,6 +38,12 @@ For Firefox users, we provide limited scrollbar styling options through the foll
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`, `IgxPivotGrid`
     - **Deprecation** The `shouldGenerate` property has been deprecated and will be removed in a future version. Column re-creation now relies on `autoGenerate` instead. Automatic migration to this is available and will be applied on `ng update`. Note that if `autoGenerate` is already set initially, there is no need to explicitly set it elsewhere in your code.
 
+- `IgxCarousel`
+    - `animationType` input property is now of type `CarouselAnimationType`. `HorizontalAnimationType` can also be used, however, to accommodate the new vertical mode, which supports vertical slide animations, it is recommended to use `CarouselAnimationType`.
+
+    - **Behavioral Changes** - the `keyboardSupport` input property now defaults to `false`.
+    - **Deprecation** - the `keyboardSupport` input property has been deprecated and will be removed in a future version. Keyboard navigation with `ArrowLeft`, `ArrowRight`, `Home`, and `End` keys will be supported when focusing the indicators' container via ` Tab`/`Shift+Tab`. 
+
 ## 18.1.0
 ### New Features
 - `IgxPivotGrid`
@@ -4620,4 +4630,3 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
     - `IgxDraggableDirective` moved inside `../directives/dragdrop/` folder
     - `IgxRippleDirective` moved inside `../directives/ripple/` folder
     - Folder `"./navigation/nav-service"` renamed to `"./navigation/nav.service"`
-

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^12.2.1",
+    "igniteui-theming": "^13.0.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -74,7 +74,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^12.2.1",
+        "igniteui-theming": "^13.0.0",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -13,11 +13,13 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | `pause` | boolean | Should the carousel stop playing on user interaction. Defaults to `true`.  |
 | `interval` | number | The amount of time in milliseconds between slides transition. |
 | `navigation` | boolean | Controls should the carousel render the left/right navigation buttons. Defaults to `true`. |
-| `keyboardSupport` | boolean | Controls should the keyboard navigation should be supported. Defaults to `true`. |
+| `indicators` | boolean | Controls should the carousel render the indicators. Defaults to `true`. |
+| `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`. |
-| `animationType` | HorizontalAnimationType | Controls what animation should be played when slides are changing. Defaults to `slide`. |
+| `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. |
 | `isPlaying` | boolean | Returns whether the carousel is paused/playing. |

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

@@ -3,7 +3,7 @@ import { ChangeDetectorRef, EventEmitter, Inject } from '@angular/core';
 import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
 import { AnimationPlayer, AnimationService } from '../services/animation/animation';
 import { fadeIn, slideInLeft } from 'igniteui-angular/animations';
-import { HorizontalAnimationType } from './enums';
+import { CarouselAnimationType } from './enums';
 
 export enum Direction { NONE, NEXT, PREV }
 
@@ -21,7 +21,7 @@ export interface IgxSlideComponentBase {
 /** @hidden */
 export abstract class IgxCarouselComponentBase {
     /** @hidden */
-    public animationType: HorizontalAnimationType = HorizontalAnimationType.slide;
+    public animationType: CarouselAnimationType = CarouselAnimationType.slide;
 
     /** @hidden @internal */
     public enterAnimationDone = new EventEmitter();
@@ -42,6 +42,8 @@ export abstract class IgxCarouselComponentBase {
     protected animationPosition = 0;
     /** @hidden */
     protected newDuration = 0;
+    /** @hidden */
+    protected vertical = false;
 
     constructor(
         @Inject(IgxAngularAnimationService) private animationService: AnimationService,
@@ -50,7 +52,7 @@ export abstract class IgxCarouselComponentBase {
 
     /** @hidden */
     protected triggerAnimations() {
-        if (this.animationType !== HorizontalAnimationType.none) {
+        if (this.animationType !== CarouselAnimationType.none) {
             if (this.animationStarted(this.leaveAnimationPlayer) || this.animationStarted(this.enterAnimationPlayer)) {
                 requestAnimationFrame(() => {
                     this.resetAnimations();
@@ -96,7 +98,7 @@ export abstract class IgxCarouselComponentBase {
 
         const trans = this.animationPosition ? this.animationPosition * 100 : 100;
         switch (this.animationType) {
-            case HorizontalAnimationType.slide:
+            case CarouselAnimationType.slide:
                 return {
                     enterAnimation: useAnimation(slideInLeft,
                         {
@@ -105,8 +107,8 @@ export abstract class IgxCarouselComponentBase {
                                 duration: `${duration}ms`,
                                 endOpacity: 1,
                                 startOpacity: 1,
-                                fromPosition: `translateX(${this.currentItem.direction === 1 ? trans : -trans}%)`,
-                                toPosition: 'translateX(0%)'
+                                fromPosition: `${this.vertical ? 'translateY' : 'translateX'}(${this.currentItem.direction === 1 ? trans : -trans}%)`,
+                                toPosition: `${this.vertical ? 'translateY(0%)' : 'translateX(0%)'}`
                             }
                         }),
                     leaveAnimation: useAnimation(slideInLeft,
@@ -116,12 +118,12 @@ export abstract class IgxCarouselComponentBase {
                                 duration: `${duration}ms`,
                                 endOpacity: 1,
                                 startOpacity: 1,
-                                fromPosition: `translateX(0%)`,
-                                toPosition: `translateX(${this.currentItem.direction === 1 ? -trans : trans}%)`,
+                                fromPosition: `${this.vertical ? 'translateY(0%)' : 'translateX(0%)'}`,
+                                toPosition: `${this.vertical ? 'translateY' : 'translateX'}(${this.currentItem.direction === 1 ? -trans : trans}%)`,
                             }
                         })
                 };
-            case HorizontalAnimationType.fade:
+            case CarouselAnimationType.fade:
                 return {
                     enterAnimation: useAnimation(fadeIn,
                         { params: { duration: `${duration}ms`, startOpacity: `${this.animationPosition}` } }),

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

@@ -4,45 +4,56 @@
     </div>
 </ng-template>
 
-<ng-template #defaultNextButton let-disabled>
-    <span class="igx-nav-arrow"
-          [class.igx-nav-arrow--disabled]="disabled">
-        <igx-icon aria-hidden="true" family="default" name="carousel_next"></igx-icon>
-    </span>
+<ng-template #defaultNextButton>
+    <igx-icon aria-hidden="true" family="default" name="carousel_next"
+        class="igx-nav-arrow">
+    </igx-icon>
 </ng-template>
 
-<ng-template #defaultPrevButton let-disabled>
-    <span class="igx-nav-arrow"
-          [class.igx-nav-arrow--disabled]="disabled">
-        <igx-icon aria-hidden="true" family="default" name="carousel_prev"></igx-icon>
-    </span>
+<ng-template #defaultPrevButton>
+    <igx-icon aria-hidden="true" family="default" name="carousel_prev"
+        class="igx-nav-arrow">
+    </igx-icon>
 </ng-template>
 
-<div *ngIf="showIndicators" [ngClass]="indicatorsOrientationClass" [attr.role]="'tablist'">
-    <div *ngFor="let slide of slides"
+<button *ngIf="navigation && slides.length"
+    igxButton
+    class="igx-carousel__arrow--prev"
+    [attr.aria-label]="resourceStrings.igx_carousel_previous_slide"
+    [disabled]="prevButtonDisabled"
+    (click)="prev()"
+    (keydown)="handleKeydownPrev($event)">
+    <ng-container *ngTemplateOutlet="getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};"></ng-container>
+</button>
+
+<button *ngIf="navigation && slides.length"
+    igxButton
+    class="igx-carousel__arrow--next"
+    [attr.aria-label]="resourceStrings.igx_carousel_next_slide"
+    [disabled]="nextButtonDisabled"
+    (click)="next()"
+    (keydown)="handleKeydownNext($event)">
+    <ng-container *ngTemplateOutlet="getNextButtonTemplate; context: {$implicit: nextButtonDisabled};"></ng-container>
+</button>
+
+<div *ngIf="showIndicators" [ngClass]="indicatorsClass" [attr.role]="'tablist'" (keyup)="handleKeyUp($event)" (focusout)="handleFocusOut($event)" (click)="handleClick()" (keydown)="handleKeydown($event)">
+    <div #indicators *ngFor="let slide of slides"
         class="igx-carousel-indicators__indicator"
         (click)="select(slide)"
         [id]="'tab-'+ slide.index + '-' + total"
         [attr.role]="'tab'"
+        [attr.tabindex]="slide.active ? 0 : -1"
         [attr.aria-label]="resourceStrings.igx_carousel_slide + ' ' + (slide.index + 1) + ' ' + resourceStrings.igx_carousel_of + ' ' + this.total"
         [attr.aria-controls]="'panel-' + slide.index"
         [attr.aria-selected]="slide.active">
         <ng-container *ngTemplateOutlet="getIndicatorTemplate; context: {$implicit: slide};"></ng-container>
     </div>
 </div>
 
-<div *ngIf="showIndicatorsLabel" [ngClass]="indicatorsOrientationClass">
+<div *ngIf="showIndicatorsLabel" [ngClass]="indicatorsClass" class="igx-carousel-label-indicator">
     <span [id]="labelId" class="igx-carousel__label">{{getCarouselLabel}}</span>
 </div>
 
 <div class="igx-carousel__inner" [attr.aria-live]="!interval || stoppedByInteraction ? 'polite' : 'off'">
     <ng-content></ng-content>
 </div>
-
-<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--prev" [attr.aria-label]="resourceStrings.igx_carousel_previous_slide" (keydown.enter)="prev()" (click)="prev()">
-    <ng-container *ngTemplateOutlet="getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};"></ng-container>
-</div>
-
-<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--next" [attr.aria-label]="resourceStrings.igx_carousel_next_slide" (keydown.enter)="next()" (click)="next()">
-    <ng-container *ngTemplateOutlet="getNextButtonTemplate; context: {$implicit: nextButtonDisabled};"></ng-container>
-</div>