Merge branch 'master' into vmihalkov/fix-6004-master

Author: ChronosSF

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
 

projects/igniteui-angular/schematics/ng-add/index.spec.ts

@@ -9,17 +9,19 @@ describe('ng-add schematics', () => {
   const collectionPath = path.join(__dirname, '../collection.json');
   const runner: SchematicTestRunner = new SchematicTestRunner('cli-schematics', collectionPath);
   let tree: UnitTestTree;
+  const sourceRoot = 'testSrc';
   const ngJsonConfig = {
     defaultProject: 'testProj',
     projects: {
       testProj: {
-        sourceRoot: 'src',
+        sourceRoot: sourceRoot,
         projectType: ProjectType.Application,
         architect: {
           serve: {},
           build: {
             options: {
-              main: 'src/main.ts',
+              main: `${sourceRoot}/main.ts`,
+              polyfills: `${sourceRoot}/polyfills.ts`,
               scripts: []
             }
           }
@@ -42,7 +44,7 @@ describe('ng-add schematics', () => {
     tree = new UnitTestTree(new EmptyTree());
     tree.create('/angular.json', JSON.stringify(ngJsonConfig));
     tree.create('/package.json', JSON.stringify(pkgJsonConfig));
-    tree.create('src/main.ts', '// test comment');
+    tree.create(`${sourceRoot}/main.ts`, '// test comment');
   });
 
   it('should create the needed files correctly', () => {
@@ -71,7 +73,7 @@ describe('ng-add schematics', () => {
 
   it('should add hammer.js to the main.ts file', () => {
     runner.runSchematic('ng-add', { normalizeCss: false }, tree);
-    const mainTs = tree.read('src/main.ts').toString();
+    const mainTs = tree.read(`${sourceRoot}/main.ts`).toString();
     expect(mainTs).toContain('import \'hammerjs\';');
   });
 
@@ -82,12 +84,12 @@ describe('ng-add schematics', () => {
     tree.overwrite('angular.json', JSON.stringify(workspace));
     runner.runSchematic('ng-add', { normalizeCss: false }, tree);
 
-    const newContent = tree.read('src/main.ts').toString();
+    const newContent = tree.read(`${sourceRoot}/main.ts`).toString();
     expect(newContent.split('import \'hammerjs\';\n// test comment').length).toEqual(1);
   });
 
   it('should not add hammer.js if it exists in main.ts', () => {
-    const mainTsPath = 'src/main.ts';
+    const mainTsPath = `${sourceRoot}/main.ts`;
     const content = tree.read(mainTsPath).toString();
     tree.overwrite(mainTsPath, 'import \'hammerjs\';\n' + content);
     runner.runSchematic('ng-add', { normalizeCss: false }, tree);
@@ -138,54 +140,54 @@ import 'core-js/es6/set';
 import 'web-animations-js';  // Run \`npm install --save web-animations-js\`.
 `;
 
-    tree.create('src/polyfills.ts', polyfills);
+    tree.create(`${sourceRoot}/polyfills.ts`, polyfills);
     runner.runSchematic('ng-add', { polyfills: true, normalizeCss: false }, tree);
-    expect(tree.readContent('src/polyfills.ts').replace(/\r\n/g, '\n')).toEqual(result.replace(/\r\n/g, '\n'));
+    expect(tree.readContent(`${sourceRoot}/polyfills.ts`).replace(/\r\n/g, '\n')).toEqual(result.replace(/\r\n/g, '\n'));
   });
 
   it('should properly add css reset', () => {
-    tree.create('src/styles.scss', '');
+    tree.create(`${sourceRoot}/styles.scss`, '');
     runner.runSchematic('ng-add', { normalizeCss: true }, tree);
     let pkgJsonData = JSON.parse(tree.readContent('/package.json'));
-    expect(tree.readContent('src/styles.scss')).toEqual(scssImport);
+    expect(tree.readContent(`${sourceRoot}/styles.scss`)).toEqual(scssImport);
     expect(pkgJsonData.dependencies['minireset.css']).toBeTruthy();
     resetJsonConfigs(tree);
-    tree.delete('src/styles.scss');
+    tree.delete(`${sourceRoot}/styles.scss`);
 
-    tree.create('src/styles.sass', '');
+    tree.create(`${sourceRoot}/styles.sass`, '');
     runner.runSchematic('ng-add', { normalizeCss: true }, tree);
     pkgJsonData = JSON.parse(tree.readContent('/package.json'));
-    expect(tree.readContent('src/styles.sass')).toEqual(scssImport);
+    expect(tree.readContent(`${sourceRoot}/styles.sass`)).toEqual(scssImport);
     expect(pkgJsonData.dependencies['minireset.css']).toBeTruthy();
     resetJsonConfigs(tree);
-    tree.delete('src/styles.sass');
+    tree.delete(`${sourceRoot}/styles.sass`);
 
-    tree.create('src/styles.css', '');
+    tree.create(`${sourceRoot}/styles.css`, '');
     runner.runSchematic('ng-add', { normalizeCss: true }, tree);
     pkgJsonData = JSON.parse(tree.readContent('/package.json'));
-    expect(tree.readContent('src/styles.css')).toBe('');
+    expect(tree.readContent(`${sourceRoot}/styles.css`)).toBe('');
     expect(pkgJsonData.dependencies['minireset.css']).toBeTruthy();
     expect(JSON.parse(tree.readContent('/angular.json')).projects['testProj'].architect.build.options.styles).toContain(cssImport);
     resetJsonConfigs(tree);
-    tree.delete('src/styles.css');
+    tree.delete(`${sourceRoot}/styles.css`);
 
-    tree.create('src/styles.less', '');
+    tree.create(`${sourceRoot}/styles.less`, '');
     runner.runSchematic('ng-add', { normalizeCss: true }, tree);
     pkgJsonData = JSON.parse(tree.readContent('/package.json'));
-    expect(tree.readContent('src/styles.less')).toBe('');
+    expect(tree.readContent(`${sourceRoot}/styles.less`)).toBe('');
     expect(pkgJsonData.dependencies['minireset.css']).toBeTruthy();
     expect(JSON.parse(tree.readContent('/angular.json')).projects['testProj'].architect.build.options.styles).toContain(cssImport);
     resetJsonConfigs(tree);
-    tree.delete('src/styles.less');
+    tree.delete(`${sourceRoot}/styles.less`);
 
-    tree.create('src/styles.styl', '');
+    tree.create(`${sourceRoot}/styles.styl`, '');
     runner.runSchematic('ng-add', { normalizeCss: true }, tree);
     pkgJsonData = JSON.parse(tree.readContent('/package.json'));
-    expect(tree.readContent('src/styles.styl')).toBe('');
+    expect(tree.readContent(`${sourceRoot}/styles.styl`)).toBe('');
     expect(pkgJsonData.dependencies['minireset.css']).toBeTruthy();
     expect(JSON.parse(tree.readContent('/angular.json')).projects['testProj'].architect.build.options.styles).toContain(cssImport);
     resetJsonConfigs(tree);
-    tree.delete('src/styles.styl');
+    tree.delete(`${sourceRoot}/styles.styl`);
   });
 
   it('should properly add web animations', () => {
@@ -202,7 +204,7 @@ import 'web-animations-js';  // Run \`npm install --save web-animations-js\`.
    * that is built with AngularCLI v7.3 or above. All else are considered below v7.3.
    */
   it('should enable es5BrowserSupport on projects with ng cli version >= 7.3', () => {
-    tree.create('src/polyfills.ts', '');
+    tree.create(`${sourceRoot}/polyfills.ts`, '');
     const newJson: any = JSON.parse(tree.read('/angular.json').toString());
     newJson.projects['testProj'].architect.build.options['es5BrowserSupport'] = false;
     tree.overwrite('/angular.json', JSON.stringify(newJson));
@@ -226,11 +228,11 @@ import 'web-animations-js';  // Run \`npm install --save web-animations-js\`.
 import 'web-animations-js';  // Run \`npm install --save web-animations-js\`.
     `;
 
-    tree.create('src/polyfills.ts', polyfills);
+    tree.create(`${sourceRoot}/polyfills.ts`, polyfills);
     const newJson: any = JSON.parse(tree.read('/angular.json').toString());
     newJson.projects['testProj'].architect.build.options['es5BrowserSupport'] = false;
     tree.overwrite('/angular.json', JSON.stringify(newJson));
     runner.runSchematic('ng-add', { polyfills: true }, tree);
-    expect(tree.readContent('src/polyfills.ts').replace(/\r\n/g, '\n')).toEqual(result.replace(/\r\n/g, '\n'));
+    expect(tree.readContent(`${sourceRoot}/polyfills.ts`).replace(/\r\n/g, '\n')).toEqual(result.replace(/\r\n/g, '\n'));
   });
 });

projects/igniteui-angular/schematics/ng-add/index.ts

@@ -1,10 +1,11 @@
 import { chain, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 import { Options } from '../interfaces/options';
 import { installPackageJsonDependencies } from '../utils/package-handler';
-import { logSuccess, addDependencies, overwriteJsonFile, getPropertyFromWorkspace } from '../utils/dependency-handler';
+import { logSuccess, addDependencies, overwriteJsonFile,
+    getPropertyFromWorkspace, getConfigFile } from '../utils/dependency-handler';
 
 import { addResetCss } from './add-normalize';
-import { getWorkspace } from '@schematics/angular/utility/config';
+import { getWorkspace, getConfig } from '@schematics/angular/utility/config';
 import { WorkspaceSchema } from '@schematics/angular/utility/workspace-models';
 
 
@@ -17,7 +18,9 @@ function propertyExistsInWorkspace(targetProp: string, workspace: WorkspaceSchem
 }
 
 function enablePolyfills(tree: Tree, context: SchematicContext): string {
-  const targetFile = 'src/polyfills.ts';
+  const workspace = getWorkspace(tree);
+  const project = workspace.projects[workspace.defaultProject];
+  const targetFile = getConfigFile(project, 'polyfills');
   if (!tree.exists(targetFile)) {
     context.logger.warn(`${targetFile} not found. You may need to update polyfills.ts manually.`);
     return;
@@ -50,7 +53,8 @@ function readInput(options: Options): Rule {
     if (options.polyfills) {
       const workspace = getWorkspace(tree);
       const targetProperty = 'es5BrowserSupport';
-      const polyfillsFile = 'src/polyfills.ts';
+      const project = workspace.projects[workspace.defaultProject];
+      const polyfillsFile = getConfigFile(project, 'polyfills');
       const propertyExists = propertyExistsInWorkspace(targetProperty, workspace);
       let polyfillsData = tree.read(polyfillsFile).toString();
       if (propertyExists) {

projects/igniteui-angular/schematics/utils/dependency-handler.ts

@@ -26,14 +26,14 @@ function getTargetedProjectOptions(project: WorkspaceProject<ProjectType>, targe
     throw new SchematicsException(`Cannot determine the project's configuration for: ${target}`);
 }
 
-function getMainFile(project: WorkspaceProject<ProjectType>): string {
+export function getConfigFile(project: WorkspaceProject<ProjectType>, option: string): string {
     const buildOptions = getTargetedProjectOptions(project, 'build');
-    if (!buildOptions.main) {
-        throw new SchematicsException(`Could not find the project main file inside of the ` +
+    if (!buildOptions[option]) {
+        throw new SchematicsException(`Could not find the project ${option} file inside of the ` +
             `workspace config (${project.sourceRoot})`);
     }
 
-    return buildOptions.main;
+    return buildOptions[option];
 }
 
 export function overwriteJsonFile(tree: Tree, targetFile: string, data: any) {
@@ -113,7 +113,7 @@ function includeDependencies(pkgJson: any, context: SchematicContext, tree: Tree
                 const workspace = getWorkspace(tree);
                 const project = workspace.projects[workspace.defaultProject];
                 const projectOptions = getTargetedProjectOptions(project, 'build');
-                const mainTsPath = getMainFile(project);
+                const mainTsPath = getConfigFile(project, 'main');
                 const hammerImport = 'import \'hammerjs\';\n';
                 const mainTsContent = tree.read(mainTsPath).toString();
                 // if there are no elements in the architect.build.options.scripts array that contain hammerjs

projects/igniteui-angular/src/lib/calendar/calendar.component.html

@@ -47,13 +47,13 @@ <h2 class="igx-calendar__header-date">
         [@animateChange]="animationAction"
         (@animateChange.done)="animationDone($event)">
         <igx-days-view *ngFor="let view of dayViews; index as i;" [changeDaysView]="true" #days
+                [selection]="selection"
                 [locale]="locale"
                 [value]="value"
                 [viewDate]="getViewDate(i)"
                 [weekStart]="weekStart"
                 [formatOptions]="formatOptions"
                 [formatViews]="formatViews"
-                [selection]="selection"
                 [disabledDates]="disabledDates"
                 [specialDates]="specialDates"
                 [hideOutsideDays]="hideOutsideDays"

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 |
 |:----------|:-------------:|:------|

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>
+