Merge branch 'master' into mkirova/fix-6191

Author: ChronosSF

CHANGELOG.md

@@ -57,14 +57,29 @@ All notable changes for each version of this project will be documented in this
         </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.
-        - `nextButtonTemplate` directive is added, which is used to provide a custom next button template. If not provided, a default next button is used.
-        - `prevButtonTemplate` directive is added, which is used to provide a custom previous button template. If not provided, a default previous button is used.
+- `IgxSlider`:
+    - `primaryTicks` input was added. Which sets the number of primary ticks
+    - `secondaryTicks` input was added. Which sets the number of secondary ticks.
+    - `showTicks` input was added. Which show/hide all slider ticks and tick labels.
+    - `primaryTickLabels` input was added. Which shows/hides all primary tick labels.
+    - `secondaryTickLabels` input was added. Shows/hides all secondary tick labels.
+    - `ticksOrientation` input was added. Allows to change ticks orientation to top|bottom|mirror.
+    - `tickLabelsOrientation` input was added. Allows you to change the rotation of all tick labels from horizontal to vertical(toptobottom, bottomtotop).
+    - `igxSliderTickLabel` directive has been introduced. Allows you to set a custom template for all tick labels.
+   
+- `IgxCarousel`:
+    - `keyboardSupport` input is added, which can be used to enable and disable keyboard navigation
+    - `gesturesSupport` input is added, which can be used to enable and disable gestures
+    - `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.
+    - `nextButtonTemplate` directive is added, which is used to provide a custom next button template. If not provided, a default next button is used.
+    - `prevButtonTemplate` directive is added, which is used to provide a custom previous button template. If not provided, a default previous button is used.
+
+- `IgxSelect`: 
+    - adding `IgxSelectHeaderDirective` and `IgxSelectFooterDirective`. These can be used to provide a custom header, respectively footer templates for the `igxSelect` drop-down list. If there are no templates marked with these directives - no default templates will be used so the drop-down list will not have header nor footer.
+
 
 ## 8.2.6
 

package-lock.json

@@ -45,14 +45,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.0.0-rc.2",
-    "@angular/common": "^9.0.0-rc.2",
-    "@angular/compiler": "^9.0.0-rc.2",
-    "@angular/core": "^9.0.0-rc.2",
-    "@angular/forms": "^9.0.0-rc.2",
-    "@angular/platform-browser": "^9.0.0-rc.2",
-    "@angular/platform-browser-dynamic": "^9.0.0-rc.2",
-    "@angular/router": "^9.0.0-rc.2",
+    "@angular/animations": "^9.0.0-rc.3",
+    "@angular/common": "^9.0.0-rc.3",
+    "@angular/compiler": "^9.0.0-rc.3",
+    "@angular/core": "^9.0.0-rc.3",
+    "@angular/forms": "^9.0.0-rc.3",
+    "@angular/platform-browser": "^9.0.0-rc.3",
+    "@angular/platform-browser-dynamic": "^9.0.0-rc.3",
+    "@angular/router": "^9.0.0-rc.3",
     "@types/hammerjs": "^2.0.36",
     "@types/source-map": "0.5.2",
     "classlist.js": "^1.1.20150312",
@@ -66,12 +66,12 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.0-rc.2",
-    "@angular-devkit/build-ng-packagr": "~0.900.0-rc.2",
+    "@angular-devkit/build-angular": "~0.900.0-rc.3",
+    "@angular-devkit/build-ng-packagr": "~0.900.0-rc.3",
     "@angular-devkit/schematics": "^7.2.1",
-    "@angular/cli": "~9.0.0-rc.2",
-    "@angular/compiler-cli": "^9.0.0-rc.2",
-    "@angular/language-service": "^9.0.0-rc.2",
+    "@angular/cli": "~9.0.0-rc.3",
+    "@angular/compiler-cli": "^9.0.0-rc.3",
+    "@angular/language-service": "^9.0.0-rc.3",
     "@angularclass/hmr": "^2.1.3",
     "@types/jasmine": "~3.3.5",
     "@types/jasminewd2": "~2.0.6",

package.json

@@ -14,6 +14,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | `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`. |
+| `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` | CarouselAnimationType | Controls what animation should be played when slides are changing. Defaults to `slide`. |

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

@@ -2,10 +2,8 @@ import { Component, ViewChild, TemplateRef } from '@angular/core';
 import {
     async,
     TestBed,
-    ComponentFixture,
     fakeAsync,
-    tick,
-    flush
+    tick
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import {
@@ -472,46 +470,7 @@ describe('Carousel', () => {
             expect(carousel.onCarouselPlaying.emit).toHaveBeenCalledTimes(1);
         });
 
-        it('should stop/play on tap ', async () => {
-            carousel.interval = 1000;
-            carousel.play();
-            fixture.detectChanges();
-
-            spyOn(carousel.onCarouselPaused, 'emit');
-            spyOn(carousel.onCarouselPlaying, 'emit');
-
-            expect(carousel.isPlaying).toBeTruthy();
-
-            Simulator.gestures.press(carousel.nativeElement, { duration: 180 });
-            fixture.detectChanges();
-            await wait(200);
-
-            expect(carousel.isPlaying).toBeFalsy();
-
-            Simulator.gestures.press(carousel.nativeElement, { duration: 180 });
-            fixture.detectChanges();
-            await wait(200);
-
-            expect(carousel.isPlaying).toBeTruthy();
-
-            // When the carousel is stopped tap does not start playing
-            carousel.stop();
-            fixture.detectChanges();
-
-            expect(carousel.isPlaying).toBeFalsy();
-
-            Simulator.gestures.press(carousel.nativeElement, { duration: 180 });
-            fixture.detectChanges();
-            await wait(200);
-
-            expect(carousel.isPlaying).toBeFalsy();
 
-            Simulator.gestures.press(carousel.nativeElement, { duration: 180 });
-            fixture.detectChanges();
-            await wait(200);
-
-            expect(carousel.isPlaying).toBeFalsy();
-        });
     });
 
     describe('Templates Tests: ', () => {
@@ -738,6 +697,125 @@ describe('Carousel', () => {
             expect(HelperTestFunctions.getPreviousButton(fixture).hidden).toBeFalsy();
         }));
     });
+
+    describe('Gestures Tests: ', () => {
+        beforeEach(() => {
+            fixture = TestBed.createComponent(CarouselDynamicSlidesComponent);
+            fixture.detectChanges();
+            carousel = fixture.componentInstance.carousel;
+        });
+
+        it('should stop/play on tap ', async () => {
+            carousel.interval = 1000;
+            carousel.play();
+            fixture.detectChanges();
+
+            spyOn(carousel.onCarouselPaused, 'emit');
+            spyOn(carousel.onCarouselPlaying, 'emit');
+
+            expect(carousel.isPlaying).toBeTruthy();
+
+            HelperTestFunctions.simulateTap(carousel);
+            fixture.detectChanges();
+            await wait(200);
+
+            expect(carousel.isPlaying).toBeFalsy();
+
+            HelperTestFunctions.simulateTap(carousel);
+            fixture.detectChanges();
+            await wait(200);
+
+            expect(carousel.isPlaying).toBeTruthy();
+
+            // When the carousel is stopped tap does not start playing
+            carousel.stop();
+            fixture.detectChanges();
+
+            expect(carousel.isPlaying).toBeFalsy();
+
+            HelperTestFunctions.simulateTap(carousel);
+            fixture.detectChanges();
+            await wait(200);
+
+            expect(carousel.isPlaying).toBeFalsy();
+
+            HelperTestFunctions.simulateTap(carousel);
+            fixture.detectChanges();
+            await wait(200);
+
+            expect(carousel.isPlaying).toBeFalsy();
+        });
+
+        it('verify changing slides with pan left ', () => {
+            expect(carousel.current).toEqual(2);
+
+            HelperTestFunctions.simulatePan(fixture, carousel, -0.05, 0.1);
+
+            expect(carousel.current).toEqual(2);
+
+            HelperTestFunctions.simulatePan(fixture, carousel, -0.7, 0.1);
+
+            expect(carousel.current).toEqual(3);
+
+            HelperTestFunctions.simulatePan(fixture, carousel, -0.2, 2);
+
+            expect(carousel.current).toEqual(0);
+        });
+
+        it('verify changing slides with pan right ', () => {
+            expect(carousel.current).toEqual(2);
+
+            HelperTestFunctions.simulatePan(fixture, carousel, 0.1, 0.1);
+
+            expect(carousel.current).toEqual(2);
+
+            HelperTestFunctions.simulatePan(fixture, carousel, 0.6, 0.1);
+
+            expect(carousel.current).toEqual(1);
+
+            HelperTestFunctions.simulatePan(fixture, carousel, 0.05, 2);
+
+            expect(carousel.current).toEqual(0);
+        });
+
+        it('verify pan when loop is false', () => {
+            carousel.loop = false;
+            fixture.detectChanges();
+
+            carousel.select(carousel.get(0));
+            fixture.detectChanges();
+
+            expect(carousel.current).toEqual(0);
+
+            HelperTestFunctions.simulatePan(fixture, carousel, 0.9, 2);
+
+            expect(carousel.current).toEqual(0);
+
+            carousel.select(carousel.get(3));
+            fixture.detectChanges();
+
+            expect(carousel.current).toEqual(3);
+
+            HelperTestFunctions.simulatePan(fixture, carousel, -0.9, 2);
+
+            expect(carousel.current).toEqual(3);
+        });
+
+        it('verify pan when gesturesSupport is false', () => {
+            carousel.gesturesSupport = false;
+            fixture.detectChanges();
+
+            expect(carousel.current).toEqual(2);
+
+            HelperTestFunctions.simulatePan(fixture, carousel, 0.9, 2);
+
+            expect(carousel.current).toEqual(2);
+
+            HelperTestFunctions.simulatePan(fixture, carousel, -0.6, 2);
+
+            expect(carousel.current).toEqual(2);
+        });
+    });
 });
 
 class HelperTestFunctions {
@@ -803,7 +881,29 @@ class HelperTestFunctions {
         expect(carousel.slides.find((slide) => slide.active && slide.index !== index)).toBeUndefined();
     }
 
+    public static simulateTap(carousel) {
+        const activeSlide = carousel.get(carousel.current).nativeElement;
+        Simulator.gestures.press(activeSlide, { duration: 180 });
+    }
 
+    public static simulatePan(fixture, carousel, deltaXOffset, velocity) {
+        const activeSlide = carousel.get(carousel.current).nativeElement;
+        const carouselElement = fixture.debugElement.query(By.css('igx-carousel'));
+        const deltaX = activeSlide.offsetWidth * deltaXOffset;
+        const event = deltaXOffset < 0 ? 'panleft' : 'panright';
+        const panOptions = {
+            deltaX: deltaX,
+            deltaY: 0,
+            duration: 100,
+            velocity: velocity,
+            preventDefault: <any>( ( e: any ) => {  })
+        };
+
+        carouselElement.triggerEventHandler(event, panOptions);
+        fixture.detectChanges();
+        carouselElement.triggerEventHandler('panend', panOptions);
+        fixture.detectChanges();
+    }
 }
 @Component({
     template: `