feat(carousel): add carousel indicators template and animations #4268 #…

…6142 (#6110)
IgniteUI · Nov 13, 2019 · d2cfd8c · d2cfd8c
1 parent f996da9
commit d2cfd8c
Show file tree

Hide file tree

Showing 17 changed files with 1,705 additions and 532 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,10 @@ All notable changes for each version of this project will be documented in this
 
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
+- `IgxCarousel`:
+    - **Breaking Changes** -The carousel slides are no longer array, they are changed to QueryList.
+    - **Behavioural change** - When slides are more than 5, a label is shown instead of the indicators. The count limit of visible indicators can be changed with the input `maximumIndicatorsCount`
+
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`:
@@ -25,13 +29,13 @@ All notable changes for each version of this project will be documented in this
     - `sortingExpressionsChange` event emitter is added, which is fired whenever a change to the sorting expressions has occurred (prior to performing the actual sorting).
     - `filteringExpressionsTreeChange` event emitter is added, which is fired whenever a change to the filtering expressions has occurred (prior to performing the actual filtering).
     - `advancedFilteringExpressionsTreeChange` event emitter is added, which is fired whenever a change to the advanced filtering expressions has occurred (prior to performing the actual filtering).
-- `IgxGridExcelStyleFilteringComponent` and `IgxAdvancedFilteringDialogComponent` can now be hosted outside of the grid in order to provide the same experience as the built-in filtering UI.
-- `IgxOverlayService`:
-    - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
-- `IgxToggleDirective`:
-    - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
-- `IgxRowDragGhost` directive is added. It allows providing a custom template for the drag ghost when dragging a row.
-```html
+    - `IgxGridExcelStyleFilteringComponent` and `IgxAdvancedFilteringDialogComponent` can now be hosted outside of the grid in order to provide the same experience as the built-in filtering UI.
+    - `IgxOverlayService`:
+        - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
+    - `IgxToggleDirective`:
+        - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
+    - `IgxRowDragGhost` directive is added. It allows providing a custom template for the drag ghost when dragging a row.
+    ```html
     <igx-grid #grid1 [data]="remote | async" primaryKey="ProductID"
         [rowDraggable]="true">
         <igx-column field="ProductName"></igx-column>
@@ -43,7 +47,13 @@ All notable changes for each version of this project will be documented in this
             </div>
         </ng-template>
     </igx-grid>
-```
+    ```
+    - `IgxCarousel`:
+        - `keyboardSupport` input is added, which can be used to enable and disable keyboard navigation
+        - `maximumIndicatorsCount` input is added, which can be used to set the number of visible indicators
+        - `indicatorsOrientation` input is added, which can be used to set the position of indicators it can be top or bottom
+        - `animationType` input is added, which can be used to set animation when changing slides
+        - `indicatorTemplate` directive is added, which can be used to provide a custom indicator for carousel. If this property is not provided, a default indicator template will be used instead.
 
 ## 8.2.6
 

diff --git a/projects/igniteui-angular/src/lib/carousel/README.md b/projects/igniteui-angular/src/lib/carousel/README.md
@@ -2,7 +2,7 @@
 
 A carousel component is used to browse or navigate through a collection of slides - galleries of images,
 cards, on-boarding tutorials or page-based interfaces. It can be used as a separate full screen element
-or inside another component.  
+or inside another component.
 A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel.html)
 
 # API Summary `igx-carousel`
@@ -13,6 +13,10 @@ 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`. |
+| `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` | 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. |
@@ -31,6 +35,26 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | `get(index: Number)` | IgxSlide or void | Returns the slide with the given index or null. |
 | `select(slide: IgxSlide, direction: Direction)`| void | Selects the slide and the direction to transition to. Emits `onSlideChanged` event. |
 
+### Keyboard navigation
+Keyboard navigation will be enabled when the **IgxCarousel** component is focused and `keyboardSupport` property is set to `true`:
+- Arrow keys will navigate through the slides.
+- `Home` will focus the first slide inside the carousel view.
+- `End` will focus the last slide inside the carousel view.
+
+### Templates
+The **IgxCarousel** supports templating of its indicators
+
+#### Defining item template:
+```html
+<igx-carousel #carousel>
+        ...
+<ng-template igxCarouselIndicator let-slide>
+    <igx-icon *ngIf="slide.active"  fontSet="material">brightness_7</igx-icon>
+    <igx-icon *ngIf="!slide.active"  fontSet="material">brightness_5</igx-icon>
+</ng-template>
+</igx-carousel>
+```
+
 # API Summary `igx-slide`
 | Name   |      Type      |  Description |
 |:----------|:-------------:|:------|

diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.html b/projects/igniteui-angular/src/lib/carousel/carousel.component.html
@@ -1,22 +1,35 @@
-<div tabindex="0" aria-label="carousel" class="igx-carousel"
-        (mouseenter)="stop()"
-        (mouseleave)="play()"
-        (swipeleft)="next()"
-        (swiperight)="prev()"
-        (tap)="isPlaying ? stop() : play()">
-    <ul class="igx-carousel__indicators" [hidden]="slides.length <= 1">
-        <li *ngFor="let slide of slides" [attr.aria-label]="setAriaLabel(slide)" [attr.aria-selected]="slide.active" [class.active]="slide.active === true"
-            (click)="select(slide)"></li>
-    </ul>
-    <div class="igx-carousel__inner" role="list">
-        <ng-content></ng-content>
+<ng-template #defaultIndicator let-slide>
+    <div class="igx-nav-dot"
+        [class.igx-nav-dot--active]="slide.active"
+    >
     </div>
-    <div *ngIf="navigation">
-        <a role="button" tabindex="0" class="igx-carousel__arrow--prev" (click)="prev()" [hidden]="!slides.length">
-            <igx-icon fontSet="material">arrow_back</igx-icon>
-        </a>
-        <a role="button" tabindex="0" class="igx-carousel__arrow--next" (click)="next()" [hidden]="!slides.length">
-            <igx-icon fontSet="material">arrow_forward</igx-icon>
-        </a>
+</ng-template>
+
+
+<div *ngIf="showIndicators" [ngClass]="indicatorsOrientationClass">
+    <div *ngFor="let slide of slides"
+        class="igx-carousel-indicators__indicator"
+        (click)="select(slide)"
+        [attr.aria-label]="setAriaLabel(slide)"
+        [attr.aria-selected]="slide.active">
+        <ng-container *ngTemplateOutlet="getIndicatorTemplate; context: {$implicit: slide};"></ng-container>
     </div>
 </div>
+
+<div *ngIf="showIndicatorsLabel" [ngClass]="indicatorsOrientationClass">
+    <span class="igx-carousel__label">{{getCarouselLabel}}</span>
+</div>
+
+<div class="igx-carousel__inner" role="list">
+    <ng-content></ng-content>
+</div>
+
+<ng-container *ngIf="navigation">
+    <a role="button" tabindex="0" class="igx-carousel__arrow--prev" (click)="prev()" [hidden]="!slides.length">
+        <igx-icon fontSet="material">arrow_back</igx-icon>
+    </a>
+    <a role="button" tabindex="0" class="igx-carousel__arrow--next" (click)="next()" [hidden]="!slides.length">
+        <igx-icon fontSet="material">arrow_forward</igx-icon>
+    </a>
+</ng-container>
+