From aab95fdabae226c2f65d5052c54506656ae9cbd8 Mon Sep 17 00:00:00 2001 From: 3phase Date: Wed, 30 Oct 2019 17:29:34 +0200 Subject: [PATCH 01/21] fix(chip): Chips are being reordered now correctly #6097 --- projects/igniteui-angular/src/lib/chips/chips-area.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/chips/chips-area.component.ts b/projects/igniteui-angular/src/lib/chips/chips-area.component.ts index b15fc34bb91..ac889166c21 100644 --- a/projects/igniteui-angular/src/lib/chips/chips-area.component.ts +++ b/projects/igniteui-angular/src/lib/chips/chips-area.component.ts @@ -147,7 +147,7 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy * } * ``` */ - @ContentChildren(IgxChipComponent) + @ContentChildren(IgxChipComponent, { descendants: true }) public chipsList: QueryList; private modifiedChipsArray: IgxChipComponent[]; From f0c5efc93669973e5b6b03744172dfe951ca81b5 Mon Sep 17 00:00:00 2001 From: skrustev Date: Mon, 4 Nov 2019 11:22:30 +0200 Subject: [PATCH 02/21] fix(igxDatePicker): Fix opening dropdown/dialog throws error on Ivy. #6114 --- .../igniteui-angular/src/lib/calendar/calendar.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.html b/projects/igniteui-angular/src/lib/calendar/calendar.component.html index d1d8781ed75..e76fc64c6ae 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.component.html +++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.html @@ -47,13 +47,13 @@

[@animateChange]="animationAction" (@animateChange.done)="animationDone($event)"> Date: Tue, 5 Nov 2019 16:18:28 +0200 Subject: [PATCH 03/21] chore(paginator): remove duplicate migration for 9 --- .../migrations/update-8_2_6/index.spec.ts | 6 ++-- .../migrations/update-8_2_6/index.ts | 15 +++++++- .../update-9_0_0/changes/theme-props.json | 35 ------------------- 3 files changed, 18 insertions(+), 38 deletions(-) delete mode 100644 projects/igniteui-angular/migrations/update-9_0_0/changes/theme-props.json diff --git a/projects/igniteui-angular/migrations/update-8_2_6/index.spec.ts b/projects/igniteui-angular/migrations/update-8_2_6/index.spec.ts index 715d533783d..9ed90d1aa18 100644 --- a/projects/igniteui-angular/migrations/update-8_2_6/index.spec.ts +++ b/projects/igniteui-angular/migrations/update-8_2_6/index.spec.ts @@ -67,7 +67,8 @@ describe('Update 8.2.6', () => { it('should update igx-grid-paginator-theme', done => { appTree.create( '/testSrc/appPrefix/component/test.component.scss', - `$dark-grid-paginator: igx-grid-paginator-theme($color: black); + `@import '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-component'; + @import '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-theme'; @include igx-grid-paginator($dark-grid-paginator); .igx-grid-paginator__pager { @include igx-button($dark-button); @@ -77,7 +78,8 @@ describe('Update 8.2.6', () => { const tree = schematicRunner.runSchematic('migration-12', {}, appTree); expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')) .toEqual( - `$dark-grid-paginator: igx-paginator-theme($color: black); + `@import '~igniteui-angular/lib/core/styles/components/paginator/paginator-component'; + @import '~igniteui-angular/lib/core/styles/components/paginator/paginator-theme'; @include igx-paginator($dark-grid-paginator); .igx-grid-paginator__pager { @include igx-button($dark-button); diff --git a/projects/igniteui-angular/migrations/update-8_2_6/index.ts b/projects/igniteui-angular/migrations/update-8_2_6/index.ts index 918b80e432d..e125b5c4c70 100644 --- a/projects/igniteui-angular/migrations/update-8_2_6/index.ts +++ b/projects/igniteui-angular/migrations/update-8_2_6/index.ts @@ -29,11 +29,17 @@ export default function(): Rule { '$_square-shape-pagination']; let globalStyleExt: string; + const gridPaginatorComponentImport = '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-component'; + const gridPaginatorThemeImport = '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-theme'; + const paginatorComponentImport = '~igniteui-angular/lib/core/styles/components/paginator/paginator-component'; + const paginatorThemeImport = '~igniteui-angular/lib/core/styles/components/paginator/paginator-theme'; const config = getWorkspace(host); const projects = getProjects(config); context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); + const update = new UpdateChanges(__dirname, host, context); + if (config.schematics && config.schematics['@schematics/angular:component']) { // updated projects have global prefix rather than per-project: globalStyleExt = config.schematics['@schematics/angular:component'].styleext; @@ -56,12 +62,19 @@ export default function(): Rule { content = content.split(n).join(newThemes[i]); } }); + if (content.indexOf(gridPaginatorComponentImport) !== -1) { + content = content.replace(gridPaginatorComponentImport, paginatorComponentImport); + host.overwrite(path, content); + } + if (content.indexOf(gridPaginatorThemeImport) !== -1) { + content = content.replace(gridPaginatorThemeImport, paginatorThemeImport); + host.overwrite(path, content); + } host.overwrite(path, content); } }); } - const update = new UpdateChanges(__dirname, host, context); update.applyChanges(); }; } diff --git a/projects/igniteui-angular/migrations/update-9_0_0/changes/theme-props.json b/projects/igniteui-angular/migrations/update-9_0_0/changes/theme-props.json deleted file mode 100644 index ad0ae3cfe31..00000000000 --- a/projects/igniteui-angular/migrations/update-9_0_0/changes/theme-props.json +++ /dev/null @@ -1,35 +0,0 @@ -{ - "$schema": "../../common/schema/theme-props.schema.json", - "changes": [ - { - "name": "$button-background", - "remove": true, - "owner": "igx-grid-toolbar-theme" - }, - { - "name": "$button-text-color", - "remove": true, - "owner": "igx-grid-toolbar-theme" - }, - { - "name": "$button-hover-background", - "remove": true, - "owner": "igx-grid-toolbar-theme" - }, - { - "name": "$button-hover-text-color", - "remove": true, - "owner": "igx-grid-toolbar-theme" - }, - { - "name": "$button-focus-background", - "remove": true, - "owner": "igx-grid-toolbar-theme" - }, - { - "name": "$button-focus-text-color", - "remove": true, - "owner": "igx-grid-toolbar-theme" - } - ] -} From 78ed5b42d30bd2c712f821e6663be24f2e6d764e Mon Sep 17 00:00:00 2001 From: Hristo Anastasov Date: Tue, 5 Nov 2019 16:25:34 +0200 Subject: [PATCH 04/21] chore(paginator): enhance migration test --- projects/igniteui-angular/migrations/update-8_2_6/index.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/projects/igniteui-angular/migrations/update-8_2_6/index.spec.ts b/projects/igniteui-angular/migrations/update-8_2_6/index.spec.ts index 9ed90d1aa18..dee101fa865 100644 --- a/projects/igniteui-angular/migrations/update-8_2_6/index.spec.ts +++ b/projects/igniteui-angular/migrations/update-8_2_6/index.spec.ts @@ -69,6 +69,7 @@ describe('Update 8.2.6', () => { '/testSrc/appPrefix/component/test.component.scss', `@import '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-component'; @import '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-theme'; + $dark-grid-paginator: igx-grid-paginator-theme($color: black); @include igx-grid-paginator($dark-grid-paginator); .igx-grid-paginator__pager { @include igx-button($dark-button); @@ -80,6 +81,7 @@ describe('Update 8.2.6', () => { .toEqual( `@import '~igniteui-angular/lib/core/styles/components/paginator/paginator-component'; @import '~igniteui-angular/lib/core/styles/components/paginator/paginator-theme'; + $dark-grid-paginator: igx-paginator-theme($color: black); @include igx-paginator($dark-grid-paginator); .igx-grid-paginator__pager { @include igx-button($dark-button); From 7a45a4799fad087ab39380728c0f7f5989714a8b Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Wed, 6 Nov 2019 18:46:11 +0200 Subject: [PATCH 05/21] fix(progress-bar): revert change to progress-bar styles, #6129 --- .../styles/components/progress/_progress-component.scss | 8 ++++---- .../core/styles/components/progress/_progress-theme.scss | 4 ++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss index cbddc10ef73..876486a5c40 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss @@ -113,15 +113,15 @@ @extend %circular-text !optional; } - @include e(text, $m: hidden) { - @extend %circular-text !optional; - } - @include m(indeterminate) { @extend %circular-display--indeterminate !optional; @include e(outer) { @extend %circular-outer--indeterminate !optional; } + + @include e(text) { + @extend %circular-text--hidden !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss index 2a6e793d516..284d0373462 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss @@ -311,6 +311,10 @@ fill: --var($theme, 'text-color'); } + %circular-text--hidden { + visibility: hidden; + } + @include keyframes('indeterminate-accordion') { from { stroke-dashoffset: 578; From 44e8a8628d8917477233f249c337737c953e0f5a Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Thu, 7 Nov 2019 09:53:50 +0200 Subject: [PATCH 06/21] test(progress-bar): check for text visibility in indeterminate bar, #6129 --- .../src/lib/progressbar/circularbar.component.spec.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts b/projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts index 486ea9a8d06..3a689ffa7ac 100644 --- a/projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts +++ b/projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts @@ -450,6 +450,9 @@ describe('IgCircularBar', () => { fix.detectChanges(); expect(bar.classList.contains(CIRCULAR_INDETERMINATE_CLASS)).toEqual(true); + + // Expect text in indeterminate bar to be hidden; + expect(getComputedStyle(bar.querySelector('text').firstElementChild).visibility).toEqual('hidden'); }); }); }); From ebc46c60aedda94907f2fc3439753cc354d90b6b Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 7 Nov 2019 15:05:37 +0200 Subject: [PATCH 07/21] fix(igxGrid): Workaround for ivy issue where ContentChildren are re-evaluated after rendering an inner template, resulting in the resetting the columns collection in their original order. Workaround is to apply sorting for the internal unpinned cols collection after re-evaliuation, similarly to what's done to the pinned collection, in order to ensure the order is always correct. --- .../src/lib/grids/grid-base.directive.ts | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 2a3137229d0..47e5f9cf98b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3578,9 +3578,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements /** * @hidden */ - protected _reorderPinnedColumns(from: IgxColumnComponent, to: IgxColumnComponent, position: DropPosition) { - const pinned = this._pinnedColumns; - let dropIndex = pinned.indexOf(to); + protected _reorderColumns(from: IgxColumnComponent, to: IgxColumnComponent, position: DropPosition, columnCollection: any[]) { + let dropIndex = columnCollection.indexOf(to); if (to.columnGroup) { dropIndex += to.allChildren.length; @@ -3594,9 +3593,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements dropIndex++; } - pinned.splice(dropIndex, 0, ...pinned.splice(pinned.indexOf(from), 1)); + columnCollection.splice(dropIndex, 0, ...columnCollection.splice(columnCollection.indexOf(from), 1)); } - /** * @hidden */ @@ -3649,12 +3647,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements } if (dropTarget.pinned && column.pinned) { - this._reorderPinnedColumns(column, dropTarget, position); + this._reorderColumns(column, dropTarget, position, this._pinnedColumns); } if (dropTarget.pinned && !column.pinned) { column.pin(); - this._reorderPinnedColumns(column, dropTarget, position); + this._reorderColumns(column, dropTarget, position, this._pinnedColumns); + } if (!dropTarget.pinned && column.pinned) { @@ -3673,6 +3672,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements } } + if (!dropTarget.pinned) { + this._reorderColumns(column, dropTarget, position, this._unpinnedColumns); + } + this._moveColumns(column, dropTarget, position); this.notifyChanges(); if (this.hasColumnLayouts) { @@ -4857,7 +4860,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements protected reinitPinStates() { this._pinnedColumns = (this.hasColumnGroups) ? this.columnList.filter((c) => c.pinned) : this.columnList.filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b)); - this._unpinnedColumns = this.columnList.filter((c) => !c.pinned); + this._unpinnedColumns = this.hasColumnGroups ? this.columnList.filter((c) => !c.pinned) : + this.columnList.filter((c) => !c.pinned) + .sort((a, b) => this._unpinnedColumns.indexOf(a) - this._unpinnedColumns.indexOf(b)); } /** From 67f990c23154a17b0248fdd92cc752fadfc1a141 Mon Sep 17 00:00:00 2001 From: Diyan Dimitrov Date: Fri, 8 Nov 2019 10:48:35 +0200 Subject: [PATCH 08/21] fix(esf): register filtering svg icons #6149 --- .../excel-style/grid.excel-style-filtering.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts index 97ca71797ca..f5261b1e50a 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts @@ -137,6 +137,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView } if (this._column) { + this._column.grid.filteringService.registerSVGIcons(); this.isColumnPinnable = this.column.pinnable; this.init(); From bd3f27e589df470388bfad9350d616ea118446e3 Mon Sep 17 00:00:00 2001 From: Alexander M Date: Fri, 8 Nov 2019 19:28:43 +0200 Subject: [PATCH 09/21] feat(row-drag): Adding igxDragCustomGhost directive --- CHANGELOG.md | 14 ++ .../drag-drop/drag-drop.directive.ts | 4 +- .../src/lib/grids/grid-base.directive.ts | 20 ++ .../lib/grids/grid/grid-row.component.html | 2 +- .../lib/grids/grid/row-drag.directive.spec.ts | 188 +++++++++++++++++- .../hierarchical-grid.component.ts | 11 + .../hierarchical-row.component.html | 2 +- .../src/lib/grids/row-drag.directive.ts | 22 +- .../tree-grid/tree-grid-row.component.html | 2 +- .../grid-row-draggable.sample.html | 6 + .../hierarchical-grid.sample.html | 16 +- 11 files changed, 274 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cfd9fbc0edd..df1eb72a3c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,20 @@ All notable changes for each version of this project will be documented in this - `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 + + + + + +
+ Moving {{data.ProductName}}! +
+ + +``` ## 8.2.6 diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts index a670da82696..e3c09745993 100644 --- a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts @@ -151,6 +151,8 @@ export class IgxDragLocation { }) export class IgxDragDirective implements AfterContentInit, OnDestroy { + protected ghostContext: any = null; + /** * - Save data inside the `igxDrag` directive. This can be set when instancing `igxDrag` on an element. * ```html @@ -1099,7 +1101,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { let dynamicGhostRef; if (this.ghostTemplate) { - dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate); + dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate, this.ghostContext); this.ghostElement = dynamicGhostRef.rootNodes[0]; } else { this.ghostElement = node ? node.cloneNode(true) : this.element.nativeElement.cloneNode(true); diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 319e57bbf18..02bdaf18c55 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -132,6 +132,7 @@ import { IgxGridToolbarCustomContentDirective } from './toolbar/toolbar.directiv import { IgxColumnComponent } from './columns/column.component'; import { IgxColumnGroupComponent } from './columns/column-group.component'; import { IGridSortingStrategy } from '../data-operations/sorting-strategy'; +import { IgxRowDragGhostDirective } from './row-drag.directive'; const MINIMUM_COLUMN_WIDTH = 136; const FILTER_ROW_HEIGHT = 50; @@ -1912,6 +1913,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements @ContentChildren(IgxRowSelectorDirective, { read: IgxRowSelectorDirective, descendants: false }) public rowSelectorsTemplates: QueryList; + /** + * @hidden + * @internal + */ + @ContentChildren(IgxRowDragGhostDirective, { read: TemplateRef, descendants: false }) + public dragGhostCustomTemplates: QueryList>; + /** * @hidden */ @@ -3167,6 +3175,18 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements } } + /** + * @hidden + * @internal + */ + public getDragGhostCustomTemplate() { + if (this.dragGhostCustomTemplates && this.dragGhostCustomTemplates.first) { + return this.dragGhostCustomTemplates.first; + } + + return null; + } + /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html index 494ebef35bd..cc8eb26ae88 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html @@ -2,7 +2,7 @@
-
+
diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts index c0e1d30ca32..6fca446ac52 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts @@ -44,8 +44,10 @@ describe('IgxGrid - Row Drag Tests #grid', () => { TestBed.configureTestingModule({ declarations: [ IgxGridRowDraggableComponent, + IgxGridRowCustomGhostDraggableComponent, IgxGridFeaturesRowDragComponent, IgxHierarchicalGridTestComponent, + IgxHierarchicalGridCustomGhostTestComponent, IgxTreeGridTestComponent ], imports: [ @@ -384,6 +386,33 @@ describe('IgxGrid - Row Drag Tests #grid', () => { const ghostElements = document.getElementsByClassName(CSS_CLASS_GHOST_ROW); expect(ghostElements.length).toEqual(0); })); + + it('should correctly create custom ghost element', (async () => { + fixture = TestBed.createComponent(IgxGridRowCustomGhostDraggableComponent); + grid = fixture.componentInstance.instance; + fixture.detectChanges(); + dragIndicatorElements = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DRAG_INDICATOR)); + dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective)); + const rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective) as any; + const dragIndicatorElement = dragIndicatorElements[2].nativeElement; + const startPoint: Point = UIInteractions.getPointFromElement(dragIndicatorElement); + const movePoint: Point = UIInteractions.getPointFromElement(rows[4].nativeElement); + const dropPoint: Point = UIInteractions.getPointFromElement(dropAreaElement); + let ghostElements: HTMLCollection; + + await pointerDown(dragIndicatorElement, startPoint, fixture); + await pointerMove(dragIndicatorElement, movePoint, fixture); + await pointerMove(dragIndicatorElement, dropPoint, fixture); + ghostElements = document.getElementsByClassName(CSS_CLASS_GHOST_ROW); + expect(ghostElements.length).toEqual(1); + + expect(rowDragDirective.ghostContext.data.ProductName).toEqual('NetAdvantage'); + expect(rowDragDirective.ghostContext.data.ID).toEqual(2); + expect(rowDragDirective.ghostContext.grid).toEqual(grid); + + const ghostText = document.getElementsByClassName(CSS_CLASS_GHOST_ROW)[0].textContent; + expect(ghostText).toEqual(' Moving a row! '); + })); }); describe('Grid Features Integration Tests', () => { let dragGrid: IgxGridComponent; @@ -635,8 +664,8 @@ describe('IgxGrid - Row Drag Tests #grid', () => { expect(row.grid.rowDragging).toBeTruthy(); const ghostElements = document.getElementsByClassName(CSS_CLASS_GHOST_ROW); - const ghostElement = ghostElements[0]; - expect(ghostElements.length).toEqual(1); + const ghostElement = ghostElements[1]; + expect(ghostElements.length).toEqual(2); expect(ghostElement.classList.contains(CSS_CLASS_SELECTED_ROW)).toBeFalsy(); await pointerMove(dragIndicatorElement, dropPoint, fixture); @@ -787,7 +816,7 @@ describe('IgxGrid - Row Drag Tests #grid', () => { dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective)); })); - it('should be able to drag row on every hiearchical level', (async () => { + it('should be able to drag row on every hierarchical level', (async () => { // first level row let dragIndicatorElement: Element = dragIndicatorElements[1].nativeElement; let rowToDrag = dragGrid.getRowByIndex(0); @@ -841,6 +870,47 @@ describe('IgxGrid - Row Drag Tests #grid', () => { await pointerUp(dragIndicatorElement, dropPoint, fixture); verifyRowDragEndEvent(nestedChildGrid, rowToDrag, rowDragDirective, false, 1); })); + + it('should correctly create custom ghost element', (async () => { + fixture = TestBed.createComponent(IgxHierarchicalGridCustomGhostTestComponent ); + dragGrid = fixture.componentInstance.hDragGrid; + fixture.detectChanges(); + dragIndicatorElements = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DRAG_INDICATOR)); + dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective)); + + // first level row + let dragIndicatorElement: Element = dragIndicatorElements[1].nativeElement; + let rowToDrag = dragGrid.getRowByIndex(0); + let rowDragDirective = dragRows[0].injector.get(IgxRowDragDirective) as any; + + let startPoint: Point = UIInteractions.getPointFromElement(dragIndicatorElement); + const movePoint: Point = UIInteractions.getPointFromElement(dragGrid.getRowByIndex(3).nativeElement); + const dropPoint: Point = UIInteractions.getPointFromElement(dropAreaElement); + + await pointerDown(dragIndicatorElement, startPoint, fixture); + await pointerMove(dragIndicatorElement, movePoint, fixture); + await pointerMove(dragIndicatorElement, dropPoint, fixture); + await pointerUp(dragIndicatorElement, dropPoint, fixture); + + expect(rowDragDirective.ghostContext.data.ProductName).toEqual('Product: A0'); + expect(rowDragDirective.ghostContext.grid).toEqual(dragGrid); + + // second level row + dragIndicatorElement = dragIndicatorElements[8].nativeElement; + const childGrid = dragGrid.hgridAPI.getChildGrids(false)[0]; + rowToDrag = childGrid.getRowByIndex(0); + rowDragDirective = dragRows[4].injector.get(IgxRowDragDirective); + startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); + + await pointerDown(dragIndicatorElement, startPoint, fixture); + await pointerMove(dragIndicatorElement, movePoint, fixture); + await pointerMove(dragIndicatorElement, dropPoint, fixture); + await pointerUp(dragIndicatorElement, dropPoint, fixture); + + expect(rowDragDirective.ghostContext.data.ProductName).toEqual('Product: A0'); + expect(rowDragDirective.ghostContext.data.ChildLevels).toEqual(2); + expect(rowDragDirective.ghostContext.grid).toEqual(childGrid); + })); }); describe('Tree Grid Tests', () => { let dragGrid: IgxTreeGridComponent; @@ -857,7 +927,7 @@ describe('IgxGrid - Row Drag Tests #grid', () => { dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective)); })); - it('should be able to drag row on every hiearchical level', (async () => { + it('should be able to drag row on every hierarchical level', (async () => { // first level row let dragIndicatorElement: Element = dragIndicatorElements[1].nativeElement; let rowToDrag = dragGrid.getRowByIndex(0); @@ -960,6 +1030,65 @@ export class IgxGridRowDraggableComponent extends DataParent { } } +@Component({ + template: ` + + +
+ + Moving a row! +
+ + +
+
+
+
+ ` +}) +export class IgxGridRowCustomGhostDraggableComponent extends DataParent { + public width = '800px'; + public height = null; + + @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) + public instance: IgxGridComponent; + + @ViewChild('dropArea', { read: IgxDropDirective, static: true }) + public dropArea: IgxDropDirective; + + public enableSorting = false; + public enableFiltering = false; + public enableResizing = false; + public enableEditing = true; + public enableGrouping = true; + public enableRowEditing = true; + public enableRowDraggable = true; + public currentSortExpressions; + + public columnsCreated(column: IgxColumnComponent) { + column.sortable = this.enableSorting; + column.filterable = this.enableFiltering; + column.resizable = this.enableResizing; + column.editable = this.enableEditing; + column.groupable = this.enableGrouping; + } + public onGroupingDoneHandler(sortExpr) { + this.currentSortExpressions = sortExpr; + } + public onRowDrop(args) { + args.cancel = true; + } +} + @Component({ template: ` + + + + +
+ Moving {{data.ProductName}}! +
+ + + +
+ Moving {{data.ProductName}}! +
+ + ` +}) +export class IgxHierarchicalGridCustomGhostTestComponent { + public data; + newData = []; + @ViewChild('hierarchicalDragGrid', { read: IgxHierarchicalGridComponent, static: true }) public hDragGrid: IgxHierarchicalGridComponent; + @ViewChild('rowIsland', { read: IgxRowIslandComponent, static: true }) public rowIsland: IgxRowIslandComponent; + @ViewChild('rowIsland2', { read: IgxRowIslandComponent, static: true }) public rowIsland2: IgxRowIslandComponent; + + constructor() { + this.data = this.generateData(2, 3); + } + generateData(count: number, level: number) { + const prods = []; + const currLevel = level; + let children; + for (let i = 0; i < count; i++) { + const item = { + ID: i, ChildLevels: currLevel, ProductName: 'Product: A' + i, 'Col1': i, + 'Col2': i, 'Col3': i + }; + if (currLevel > 1) { + children = this.generateData(count / 2, currLevel - 1); + const childProp = currLevel === 3 ? 'childData' : 'childData2'; + item[childProp] = children; + } + prods.push(item); + } + return prods; + } +} + @Component({ template: ` diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index 574634f4c3c..f2af5868c63 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -663,6 +663,17 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti } } + /** + * @hidden + * @internal + */ + public getDragGhostCustomTemplate(): TemplateRef { + if (this.parentIsland) { + return this.parentIsland.getDragGhostCustomTemplate(); + } + return super.getDragGhostCustomTemplate(); + } + /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html index fd59f9f1cab..04a325b093e 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html @@ -15,7 +15,7 @@ -
+
diff --git a/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts b/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts index be2cbe97dc7..fe874e1cd22 100644 --- a/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Input, OnDestroy, NgModule } from '@angular/core'; +import { Directive, Input, OnDestroy, NgModule, TemplateRef } from '@angular/core'; import { IgxDragDirective } from '../directives/drag-drop/drag-drop.directive'; import { KEYS } from '../core/utils'; import { fromEvent, Subscription } from 'rxjs'; @@ -100,6 +100,11 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy { protected createGhost(pageX, pageY) { this.row.grid.endEdit(true); this.row.grid.markForCheck(); + this.ghostContext = { + $implicit: this.row.rowData, + data: this.row.rowData, + grid: this.row.grid + }; super.createGhost(pageX, pageY, this.row.nativeElement); const ghost = this.ghostElement; @@ -152,10 +157,21 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy { export class IgxDragIndicatorIconDirective { } +/** + * @hidden + */ +@Directive({ + selector: '[igxRowDragGhost]' +}) + +export class IgxRowDragGhostDirective { + constructor(public templateRef: TemplateRef) { } +} + @NgModule({ - declarations: [IgxRowDragDirective, IgxDragIndicatorIconDirective], + declarations: [IgxRowDragDirective, IgxDragIndicatorIconDirective, IgxRowDragGhostDirective], entryComponents: [], - exports: [IgxRowDragDirective, IgxDragIndicatorIconDirective], + exports: [IgxRowDragDirective, IgxDragIndicatorIconDirective, IgxRowDragGhostDirective], imports: [] }) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html index 974cc0ed9a1..c5cd511c581 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html @@ -1,5 +1,5 @@ -
+
diff --git a/src/app/grid-row-draggable/grid-row-draggable.sample.html b/src/app/grid-row-draggable/grid-row-draggable.sample.html index 7a52f032a70..18e8d71aba5 100644 --- a/src/app/grid-row-draggable/grid-row-draggable.sample.html +++ b/src/app/grid-row-draggable/grid-row-draggable.sample.html @@ -13,6 +13,12 @@ info + +
+ + Moving {{data.ProductName}}! +
+ Sample One

- @@ -23,12 +23,18 @@

Sample One

add - + + +
+ + Moving child {{data.ProductName}}! +
+ @@ -53,6 +59,12 @@

Sample One

 --> + +
+ + Moving parent {{data.ProductName}}! +
+

Sample two

From 2550456203e884aa9f60e0656298e3a81a1006f2 Mon Sep 17 00:00:00 2001 From: 3phase Date: Fri, 8 Nov 2019 21:35:43 +0200 Subject: [PATCH 10/21] fix(igxGrid): Fixes bug after workaround of #6140 --- .../igniteui-angular/src/lib/grids/grid-base.directive.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 6760698f819..080ced421b3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3724,8 +3724,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements if (!dropTarget.pinned && column.pinned) { column.unpin(); + let list = []; + + if (this.pinnedColumns.indexOf(column) === -1 && this.pinnedColumns.indexOf(dropTarget) === -1) { + list = this._unpinnedColumns; + } else { + list = this._pinnedColumns; + } - const list = this.columnList.toArray(); const fi = list.indexOf(column); const ti = list.indexOf(dropTarget); From 68ddfcb18dd9cd0adde1a155a8134c6f0103d16c Mon Sep 17 00:00:00 2001 From: Vasil Mihalkov Date: Mon, 11 Nov 2019 10:47:14 +0200 Subject: [PATCH 11/21] fix(column): Added prop decorator for column #6004 --- .../src/lib/grids/columns/column.component.ts | 33 ++++++++++++++++++- .../src/lib/grids/grid/grid.component.ts | 4 ++- .../row-island-api.service.ts | 1 + .../hierarchical-grid/row-island.component.ts | 1 + .../grids/tree-grid/tree-grid.component.ts | 4 ++- .../src/lib/grids/watch-changes.ts | 24 ++++++++++++++ 6 files changed, 64 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 79466ff4df9..2d781b0e966 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -12,6 +12,8 @@ import { EventEmitter, } from '@angular/core'; import { notifyChanges } from '../watch-changes'; +import { WatchColumnChanges } from '../watch-changes'; +import { IgxRowIslandAPIService } from '../hierarchical-grid/row-island-api.service'; import { DataType } from '../../data-operations/data-util'; import { DeprecateProperty } from '../../core/deprecateDecorators'; import { @@ -81,6 +83,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input() public header = ''; /** @@ -94,6 +97,7 @@ export class IgxColumnComponent implements AfterContentInit { * ``` * @memberof IgxColumnComponent */ + @WatchColumnChanges() @Input() public sortable = false; /** @@ -108,6 +112,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges(true) + @WatchColumnChanges() @Input() groupable = false; /** @@ -118,6 +123,7 @@ export class IgxColumnComponent implements AfterContentInit { * ``` * @memberof IgxColumnComponent */ + @WatchColumnChanges() @Input() get editable(): boolean { // Updating the primary key when grid has transactions (incl. row edit) @@ -160,6 +166,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input() public filterable = true; /** @@ -173,6 +180,7 @@ export class IgxColumnComponent implements AfterContentInit { * ``` * @memberof IgxColumnComponent */ + @WatchColumnChanges() @Input() public resizable = false; /** @@ -183,6 +191,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges(true) + @WatchColumnChanges() @Input() get hasSummary() { return this._hasSummary; @@ -210,6 +219,7 @@ export class IgxColumnComponent implements AfterContentInit { *@memberof IgxColumnComponent */ @notifyChanges(true) + @WatchColumnChanges() @Input() get hidden(): boolean { return this._hidden; @@ -257,6 +267,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input() disableHiding = false; /** @@ -267,6 +278,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input() disablePinning = false; /** @@ -280,6 +292,7 @@ export class IgxColumnComponent implements AfterContentInit { * ``` * @memberof IgxColumnComponent */ + @WatchColumnChanges() @notifyChanges() @Input() public movable = false; @@ -291,6 +304,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges(true) + @WatchColumnChanges() @Input() public get width(): string { return this.widthSetByUser ? this._width : this.defaultWidth; @@ -351,6 +365,7 @@ export class IgxColumnComponent implements AfterContentInit { * ``` * @memberof IgxColumnComponent */ + @WatchColumnChanges() @Input() public maxWidth: string; /** @@ -365,6 +380,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input() public set minWidth(value: string) { const minVal = parseFloat(value); @@ -386,6 +402,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input() public headerClasses = ''; @@ -400,6 +417,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input() public headerGroupClasses = ''; /** @@ -419,6 +437,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input() public cellClasses: any; @@ -440,6 +459,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input() cellStyles = null; /** @@ -473,6 +493,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input() formatter: (value: any) => any; /** @@ -486,6 +507,7 @@ export class IgxColumnComponent implements AfterContentInit { * ``` * @memberof IgxColumnComponent */ + @WatchColumnChanges() @Input() public filteringIgnoreCase = true; /** @@ -499,6 +521,7 @@ export class IgxColumnComponent implements AfterContentInit { * ``` * @memberof IgxColumnComponent */ + @WatchColumnChanges() @Input() public sortingIgnoreCase = true; /** @@ -521,6 +544,7 @@ export class IgxColumnComponent implements AfterContentInit { * ``` * @memberof IgxColumnComponent */ + @WatchColumnChanges() @Input() public get pinned(): boolean { return this._pinned; @@ -579,6 +603,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges(true) + @WatchColumnChanges() @Input() public get summaries(): any { return this._summaries; @@ -611,6 +636,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input() public searchable = true; /** @@ -714,6 +740,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input('cellTemplate') get bodyTemplate(): TemplateRef { return this._bodyTemplate; @@ -745,6 +772,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input() get headerTemplate(): TemplateRef { return this._headerTemplate; @@ -777,6 +805,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input('cellEditorTemplate') get inlineEditorTemplate(): TemplateRef { return this._inlineEditorTemplate; @@ -806,6 +835,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @notifyChanges() + @WatchColumnChanges() @Input('filterCellTemplate') get filterCellTemplate(): TemplateRef { return this._filterCellTemplate; @@ -1135,7 +1165,8 @@ export class IgxColumnComponent implements AfterContentInit { @ContentChild(IgxFilterCellTemplateDirective, { read: IgxFilterCellTemplateDirective, static: false }) public filterCellTemplateDirective: IgxFilterCellTemplateDirective; - constructor(public gridAPI: GridBaseAPIService, public cdr: ChangeDetectorRef) { } + constructor(public gridAPI: GridBaseAPIService, public cdr: ChangeDetectorRef, + public rowIslandAPI: IgxRowIslandAPIService) { } /** * @hidden diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index cfefa0215fb..d9864bc5b1a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -24,6 +24,7 @@ import { IgxGridSelectionService, IgxGridCRUDService } from '../selection/select import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service'; import { IgxDragIndicatorIconDirective } from '../row-drag.directive'; import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service'; +import { IgxRowIslandAPIService } from '../hierarchical-grid/row-island-api.service'; import { FilterMode } from '../common/enums'; import { GridType } from '../common/grid.interface'; @@ -64,7 +65,8 @@ export interface IGroupingDoneEventArgs extends IBaseEventArgs { IgxFilteringService, IgxColumnResizingService, IgxForOfSyncService, - IgxForOfScrollSyncService + IgxForOfScrollSyncService, + IgxRowIslandAPIService ], selector: 'igx-grid', templateUrl: './grid.component.html' diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island-api.service.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island-api.service.ts index e89931a30c8..1c9a24dfb9a 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island-api.service.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island-api.service.ts @@ -3,6 +3,7 @@ import { IgxRowIslandComponent } from './row-island.component'; import { Subject } from 'rxjs'; export class IgxRowIslandAPIService { + public rowIsland: IgxRowIslandComponent; public change: Subject = new Subject(); protected state: Map = new Map(); protected destroyMap: Map> = new Map>(); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts index 378b94cc54a..1c5dd04e1a3 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts @@ -235,6 +235,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective */ ngOnInit() { this.rootGrid = this.hgridAPI.grid; + this.rowIslandAPI.rowIsland = this; } /** diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts index e002ccb4974..36e64053d0a 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts @@ -33,6 +33,7 @@ import { IgxDragIndicatorIconDirective } from '../row-drag.directive'; import { IgxGridNavigationService } from '../grid-navigation.service'; import { GridType } from '../common/grid.interface'; import { IgxColumnComponent } from '../columns/column.component'; +import { IgxRowIslandAPIService } from '../hierarchical-grid/row-island-api.service'; let NEXT_ID = 0; @@ -66,7 +67,8 @@ let NEXT_ID = 0; { provide: IgxGridBaseDirective, useExisting: forwardRef(() => IgxTreeGridComponent) }, IgxFilteringService, IgxForOfSyncService, - IgxForOfScrollSyncService + IgxForOfScrollSyncService, + IgxRowIslandAPIService ] }) export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridType, OnInit, DoCheck, AfterContentInit { diff --git a/projects/igniteui-angular/src/lib/grids/watch-changes.ts b/projects/igniteui-angular/src/lib/grids/watch-changes.ts index d8022c0cf0d..a2d10a4d24c 100644 --- a/projects/igniteui-angular/src/lib/grids/watch-changes.ts +++ b/projects/igniteui-angular/src/lib/grids/watch-changes.ts @@ -31,6 +31,30 @@ export function WatchChanges(): PropertyDecorator { }; } +export function WatchColumnChanges(): PropertyDecorator { + return (target: any, key: string, propDesc?: PropertyDescriptor) => { + const privateKey = '_' + key.toString(); + propDesc = propDesc || { + configurable: true, + enumerable: true, + }; + propDesc.get = propDesc.get || (function (this: any) { return this[privateKey]; }); + const originalSetter = propDesc.set || (function (this: any, val: any) { this[privateKey] = val; }); + + propDesc.set = function (this: any, val: any) { + const init = this._init; + const oldValue = this[key]; + originalSetter.call(this, val); + if (val !== oldValue || (typeof val === 'object' && val === oldValue)) { + if (this.rowIslandAPI.rowIsland) { + this.rowIslandAPI.rowIsland.updateColumnList(); + } + } + }; + return propDesc; + }; +} + export function notifyChanges(repaint = false) { return (_: any, key: string, propDesc?: PropertyDescriptor) => { From b285a86cec1a065a3206fbf6c1cd1b1b8668f2e5 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 11 Nov 2019 11:47:21 +0200 Subject: [PATCH 12/21] fix(forOf): Updating heightCache after the view is updated. #6058 --- .../src/lib/directives/for-of/for_of.directive.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts index 4a48a728946..7a00fc5eaeb 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts @@ -32,7 +32,7 @@ import { VirtualHelperComponent } from './virtual.helper.component'; import { IgxScrollInertiaModule } from './../scroll-inertia/scroll_inertia.directive'; import { IgxForOfSyncService, IgxForOfScrollSyncService } from './for_of.sync.service'; import { Subject } from 'rxjs'; -import { takeUntil, filter, throttleTime } from 'rxjs/operators'; +import { takeUntil, filter, throttleTime, first } from 'rxjs/operators'; import ResizeObserver from 'resize-observer-polyfill'; import { IBaseEventArgs } from '../../core/utils'; import { VirtualHelperBaseDirective } from './base.helper.component'; @@ -746,7 +746,6 @@ export class IgxForOfDirective implements OnInit, OnChanges, DoCheck, OnDestr const diffs = []; let totalDiff = 0; const l = this._embeddedViews.length; - this._embeddedViews.filter(view => !view.destroyed).forEach(view => view.detectChanges()); const rNodes = this._embeddedViews.map(view => view.rootNodes.find(node => node.nodeType === Node.ELEMENT_NODE) || view.rootNodes[0].nextElementSibling); for (let i = 0; i < l; i++) { @@ -1561,7 +1560,10 @@ export class IgxGridForOfDirective extends IgxForOfDirective implements On const scrollOffset = this.fixedUpdateAllElements(this._virtScrollTop); this.dc.instance._viewContainer.element.nativeElement.style.top = -(scrollOffset) + 'px'; - this.recalcUpdateSizes(); + + this._zone.onStable.pipe(first()).subscribe( () => { + this.recalcUpdateSizes(); + }); this.cdr.markForCheck(); } From 03edc2db1f91109a19ca8ca5d2745e68f0e509e8 Mon Sep 17 00:00:00 2001 From: Nikolay Alipiev Date: Mon, 11 Nov 2019 22:26:01 +0200 Subject: [PATCH 13/21] fix(schematics): check polyfills in default project #6017 (#6106) --- .../schematics/ng-add/index.spec.ts | 54 ++++++++++--------- .../schematics/ng-add/index.ts | 12 +++-- .../schematics/utils/dependency-handler.ts | 10 ++-- 3 files changed, 41 insertions(+), 35 deletions(-) diff --git a/projects/igniteui-angular/schematics/ng-add/index.spec.ts b/projects/igniteui-angular/schematics/ng-add/index.spec.ts index 9b5938bfec1..46f48922c56 100644 --- a/projects/igniteui-angular/schematics/ng-add/index.spec.ts +++ b/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')); }); }); diff --git a/projects/igniteui-angular/schematics/ng-add/index.ts b/projects/igniteui-angular/schematics/ng-add/index.ts index 8b1d8aabdc3..1c98738aa59 100644 --- a/projects/igniteui-angular/schematics/ng-add/index.ts +++ b/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) { diff --git a/projects/igniteui-angular/schematics/utils/dependency-handler.ts b/projects/igniteui-angular/schematics/utils/dependency-handler.ts index d7c945a1ba4..c981bcfb3b8 100644 --- a/projects/igniteui-angular/schematics/utils/dependency-handler.ts +++ b/projects/igniteui-angular/schematics/utils/dependency-handler.ts @@ -26,14 +26,14 @@ function getTargetedProjectOptions(project: WorkspaceProject, targe throw new SchematicsException(`Cannot determine the project's configuration for: ${target}`); } -function getMainFile(project: WorkspaceProject): string { +export function getConfigFile(project: WorkspaceProject, 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 From d6f9c8470b35797a6e117c79c6dcb80c38e3804a Mon Sep 17 00:00:00 2001 From: Plamena Miteva Date: Tue, 12 Nov 2019 11:32:36 +0200 Subject: [PATCH 14/21] fix(date-picker): remove duplicate call to onChangeCalback #6067 (#6131) --- .../src/lib/date-picker/date-picker.component.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index 118f6673de9..562c45a00d3 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -953,7 +953,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor this.emitValueChangeEvent(oldValue, this.value ); this.onSelection.emit(date); - this._onChangeCallback(date); } /** @@ -974,7 +973,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor if (this.calendar) { this.calendar.deselectDate(); } - this._onChangeCallback(null); } /** @@ -1060,7 +1058,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor this.emitValueChangeEvent(oldValue, this.value ); this.calendar.viewDate = date; - this._onChangeCallback(date); this.closeCalendar(); this.onSelection.emit(date); } @@ -1205,7 +1202,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor this.emitValueChangeEvent(oldValue, this.value ); this.invalidDate = ''; - this._onChangeCallback(newValue); } else { const args: IDatePickerDisabledDateEventArgs = { datePicker: this, From 33da794b51e8e112a2bec6bea73ea91fd3a70727 Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Wed, 6 Nov 2019 19:41:30 +0200 Subject: [PATCH 15/21] fix(overlay): prevent extra position calls on scroll using absolute #6130 --- .../src/lib/services/overlay/overlay.spec.ts | 40 +++++++++++++++++++ .../scroll/absolute-scroll-strategy.ts | 10 ++++- 2 files changed, 48 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts index 6c8a5522fc9..fa394494aa3 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts @@ -915,6 +915,46 @@ describe('igxOverlay', () => { expect(scrollStrat.detach).toHaveBeenCalledTimes(1); })); + it('Should only call reposition once on scroll - Absolute.', fakeAsync(async () => { + TestBed.overrideComponent(EmptyPageComponent, { + set: { + styles: [`button { + position: absolute, + bottom: 200%; + }`] + } + }); + await TestBed.compileComponents(); + const fixture = TestBed.createComponent(EmptyPageComponent); + fixture.detectChanges(); + + const scrollStrat = new AbsoluteScrollStrategy(); + const overlaySettings: OverlaySettings = { + positionStrategy: new GlobalPositionStrategy(), + scrollStrategy: scrollStrat, + modal: false, + closeOnOutsideClick: false + }; + const overlay = fixture.componentInstance.overlay; + const scrollSpy = spyOn(scrollStrat, 'onScroll').and.callThrough(); + spyOn(overlay, 'reposition'); + const id = overlay.attach(SimpleDynamicComponent, overlaySettings); + overlay.show(id, overlaySettings); + tick(); + + const content = document.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0]; + content.children[0].dispatchEvent(new Event('scroll')); + expect(scrollSpy).toHaveBeenCalledTimes(1); + expect(overlay.reposition).not.toHaveBeenCalled(); + + document.dispatchEvent(new Event('scroll')); + expect(scrollSpy).toHaveBeenCalledTimes(2); + expect(overlay.reposition).toHaveBeenCalledTimes(1); + expect(overlay.reposition).toHaveBeenCalledWith(id); + + overlay.hide(id); + })); + it('Should properly initialize Scroll Strategy - Close.', fakeAsync(async () => { TestBed.overrideComponent(EmptyPageComponent, { set: { diff --git a/projects/igniteui-angular/src/lib/services/overlay/scroll/absolute-scroll-strategy.ts b/projects/igniteui-angular/src/lib/services/overlay/scroll/absolute-scroll-strategy.ts index f86097b7019..f917de86b07 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/scroll/absolute-scroll-strategy.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/scroll/absolute-scroll-strategy.ts @@ -60,7 +60,13 @@ export class AbsoluteScrollStrategy extends ScrollStrategy { } } - private onScroll = () => { - this._overlayService.repositionAll(); + private onScroll = (e: Event) => { + const overlayInfo = this._overlayService.getOverlayById(this._id); + if (!overlayInfo) { + return; + } + if (!overlayInfo.elementRef.nativeElement.contains(e.target)) { + this._overlayService.reposition(this._id); + } } } From d2cfd8cde5e32aefd73d9211f0ab34a26a826e5b Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Wed, 13 Nov 2019 12:29:50 +0200 Subject: [PATCH 16/21] feat(carousel): add carousel indicators template and animations #4268 #6142 (#6110) --- CHANGELOG.md | 26 +- .../src/lib/carousel/README.md | 26 +- .../src/lib/carousel/carousel.component.html | 51 +- .../lib/carousel/carousel.component.spec.ts | 1008 +++++++++++++---- .../src/lib/carousel/carousel.component.ts | 644 ++++++++--- .../src/lib/carousel/carousel.directives.ts | 7 + .../src/lib/carousel/slide.component.html | 11 +- .../src/lib/carousel/slide.component.ts | 158 +++ .../src/lib/core/i18n/carousel-resources.ts | 7 + .../src/lib/core/i18n/resources.ts | 6 +- .../carousel/_carousel-component.scss | 60 +- .../components/carousel/_carousel-theme.scss | 153 ++- .../styles/themes/schemas/dark/_carousel.scss | 2 + .../themes/schemas/light/_carousel.scss | 3 + .../lib/test-utils/ui-interactions.spec.ts | 8 + src/app/carousel/carousel.sample.html | 36 +- src/app/carousel/carousel.sample.ts | 31 +- 17 files changed, 1705 insertions(+), 532 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/carousel/carousel.directives.ts create mode 100644 projects/igniteui-angular/src/lib/carousel/slide.component.ts create mode 100644 projects/igniteui-angular/src/lib/core/i18n/carousel-resources.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index df1eb72a3c2..076082feca1 100644 --- 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 @@ -43,7 +47,13 @@ All notable changes for each version of this project will be documented in this -``` + ``` + - `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 index 449f2408cea..1121334bfe1 100644 --- 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 + + ... + + brightness_7 + brightness_5 + + +``` + # 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 index 8e41c8e6548..4a42a238f33 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.html +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.html @@ -1,22 +1,35 @@ -
-
    -
  • -
-
- + +
-
- - arrow_back - - - arrow_forward - + + + +
+
+
+ +
+ {{getCarouselLabel}} +
+ +
+ +
+ + + + arrow_back + + + arrow_forward + + + 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 e85e2a533e5..3f0529ca742 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts @@ -1,300 +1,733 @@ -import {Component, ViewChild} from '@angular/core'; +import { Component, ViewChild, TemplateRef } from '@angular/core'; import { - async, - TestBed, - ComponentFixture + async, + TestBed, + ComponentFixture, + fakeAsync, + tick } from '@angular/core/testing'; -import {By} from '@angular/platform-browser'; -import {IgxCarouselComponent, IgxCarouselModule, IgxSlideComponent, ISlideEventArgs} from './carousel.component'; -import { UIInteractions } from '../test-utils/ui-interactions.spec'; - +import { By } from '@angular/platform-browser'; +import { + IgxCarouselComponent, + IgxCarouselModule, + ISlideEventArgs, + CarouselIndicatorsOrientation, + CarouselAnimationType +} from './carousel.component'; +import { UIInteractions, wait } from '../test-utils/ui-interactions.spec'; import { configureTestSuite } from '../test-utils/configure-suite'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { IgxSlideComponent } from './slide.component'; describe('Carousel', () => { configureTestSuite(); - let fixture: ComponentFixture; + let fixture; let carousel: IgxCarouselComponent; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [CarouselTestComponent], - imports: [IgxCarouselModule] + declarations: [ + CarouselTestComponent, + CarouselTemplateSetInMarkupTestComponent, + CarouselTemplateSetInTypescriptTestComponent, + CarouselAnimationsComponent, + CarouselDynamicSlidesComponent + ], + imports: [IgxCarouselModule, NoopAnimationsModule] }) - .compileComponents(); + .compileComponents(); })); - beforeEach(() => { - fixture = TestBed.createComponent(CarouselTestComponent); - carousel = fixture.componentInstance.carousel; - fixture.detectChanges(); - }); + describe('Base Tests: ', () => { + beforeEach(() => { + fixture = TestBed.createComponent(CarouselTestComponent); + carousel = fixture.componentInstance.carousel; + fixture.detectChanges(); + }); + + it('should initialize a carousel with id property', () => { + const domCarousel = fixture.debugElement.query(By.css('igx-carousel')).nativeElement; + + expect(carousel.id).toContain('igx-carousel-'); + expect(domCarousel.id).toContain('igx-carousel-'); + + carousel.id = 'cusrtomCarousel'; + fixture.detectChanges(); + + expect(carousel.id).toBe('cusrtomCarousel'); + expect(domCarousel.id).toBe('cusrtomCarousel'); + }); + + it('should initialize a carousel with four slides and then destroy it', () => { + const domCarousel = fixture.debugElement.query(By.css('igx-carousel')).nativeElement; + expect(carousel).toBeDefined(); + expect(carousel.id).toContain('igx-carousel-'); + expect(domCarousel.id).toContain('igx-carousel-'); + expect(carousel instanceof IgxCarouselComponent).toBe(true); + expect(carousel.slides.first instanceof IgxSlideComponent).toBe(true); + + expect(carousel.loop).toBe(true); + expect(carousel.pause).toBe(true); + expect(carousel.slides.length).toEqual(4); + expect(carousel.interval).toEqual(2500); + + carousel.ngOnDestroy(); + fixture.detectChanges(); + expect(carousel.isDestroyed).toBe(true); + }); + + it('disabled looping', () => { + carousel.loop = false; + fixture.detectChanges(); + carousel.next(); + carousel.next(); + carousel.next(); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 3); + + carousel.next(); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 3); + + carousel.prev(); + carousel.prev(); + carousel.prev(); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 0); + + carousel.prev(); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 0); + }); + + it('getter/setter tests', () => { + carousel.loop = false; + carousel.pause = false; + carousel.interval = 500; + carousel.navigation = false; + + fixture.detectChanges(); + + expect(carousel.loop).toBe(false); + expect(carousel.pause).toBe(false); + expect(carousel.interval).toEqual(500); + expect(carousel.navigation).toBe(false); + }); + + it('add/remove slides tests', () => { + let currentSlide = carousel.get(carousel.current); + carousel.remove(currentSlide); + + fixture.detectChanges(); + expect(carousel.slides.length).toEqual(3); + expect(carousel.total).toEqual(3); + + currentSlide = carousel.get(carousel.current); + carousel.remove(currentSlide); + + fixture.detectChanges(); + expect(carousel.slides.length).toEqual(2); + expect(carousel.total).toEqual(2); + + carousel.add(currentSlide); + carousel.add(currentSlide); + + fixture.detectChanges(); + expect(carousel.slides.length).toEqual(4); + expect(carousel.total).toEqual(4); + }); + + it('checking if a slide is not active when it gets removed', () => { + const currentSlide = carousel.get(carousel.current); + carousel.remove(currentSlide); + + fixture.detectChanges(); + expect(currentSlide.active).toBe(false); + }); + + it('public methods', () => { + carousel.stop(); + + fixture.detectChanges(); + expect(carousel.isPlaying).toBe(false); + + carousel.next(); + let currentSlide = carousel.get(carousel.current); + + fixture.detectChanges(); + expect(carousel.get(1)).toBe(currentSlide); + + currentSlide = carousel.get(0); + carousel.prev(); + + fixture.detectChanges(); + expect(carousel.get(0)).toBe(currentSlide); + }); + + it('emit events', () => { + spyOn(carousel.onSlideChanged, 'emit'); + carousel.next(); + fixture.detectChanges(); + let args: ISlideEventArgs = { + carousel, + slide: carousel.get(carousel.current) + }; + expect(carousel.onSlideChanged.emit).toHaveBeenCalledWith(args); + expect(carousel.onSlideChanged.emit).toHaveBeenCalledTimes(1); + + carousel.prev(); + args = { + carousel, + slide: carousel.get(carousel.current) + }; + fixture.detectChanges(); + expect(carousel.onSlideChanged.emit).toHaveBeenCalledWith(args); + expect(carousel.onSlideChanged.emit).toHaveBeenCalledTimes(2); + + carousel.select(carousel.get(2)); + args = { + carousel, + slide: carousel.get(2) + }; + fixture.detectChanges(); + expect(carousel.onSlideChanged.emit).toHaveBeenCalledWith(args); + expect(carousel.onSlideChanged.emit).toHaveBeenCalledTimes(3); + + spyOn(carousel.onSlideAdded, 'emit'); + carousel.add(carousel.get(carousel.current)); + fixture.detectChanges(); + args = { + carousel, + slide: carousel.get(carousel.current) + }; + expect(carousel.onSlideAdded.emit).toHaveBeenCalledWith(args); + + spyOn(carousel.onSlideRemoved, 'emit'); + args = { + carousel, + slide: carousel.get(carousel.current) + }; + carousel.remove(carousel.get(carousel.current)); + fixture.detectChanges(); + expect(carousel.onSlideRemoved.emit).toHaveBeenCalledWith(args); + + spyOn(carousel.onCarouselPaused, 'emit'); + carousel.stop(); + fixture.detectChanges(); + expect(carousel.onCarouselPaused.emit).toHaveBeenCalledWith(carousel); + + spyOn(carousel.onCarouselPlaying, 'emit'); + carousel.play(); + fixture.detectChanges(); + expect(carousel.onCarouselPlaying.emit).toHaveBeenCalledWith(carousel); + }); + + it('click handlers', () => { + const nextNav = HelperTestFunctions.getNextButton(fixture); + const prevNav = HelperTestFunctions.getPreviousButton(fixture); + + spyOn(carousel, 'prev'); + prevNav.dispatchEvent(new Event('click')); + fixture.detectChanges(); + expect(carousel.prev).toHaveBeenCalled(); - it('should initialize a carousel with id property', () => { - const domCarousel = fixture.debugElement.query(By.css('igx-carousel')).nativeElement; + spyOn(carousel, 'next'); + nextNav.dispatchEvent(new Event('click')); + fixture.detectChanges(); + expect(carousel.next).toHaveBeenCalled(); + }); - expect(carousel.id).toContain('igx-carousel-'); - expect(domCarousel.id).toContain('igx-carousel-'); + it('keyboard navigation test', () => { + spyOn(carousel.onSlideChanged, 'emit'); + carousel.pause = true; - carousel.id = 'cusrtomCarousel'; - fixture.detectChanges(); + UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 1); - expect(carousel.id).toBe('cusrtomCarousel'); - expect(domCarousel.id).toBe('cusrtomCarousel'); - }); + UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 2); + + UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 3); + + UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 0); + + UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 3); + + UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 2); + + UIInteractions.triggerKeyDownEvtUponElem('Home', carousel.nativeElement, true); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 0); + + UIInteractions.triggerKeyDownEvtUponElem('End', carousel.nativeElement, true); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 3); + + expect(carousel.onSlideChanged.emit).toHaveBeenCalledTimes(8); + }); + + it('changing slides with navigation buttons', () => { + spyOn(carousel.onSlideChanged, 'emit'); + carousel.pause = true; + + const prevNav = HelperTestFunctions.getPreviousButton(fixture); + const nextNav = HelperTestFunctions.getNextButton(fixture); + + nextNav.dispatchEvent(new Event('click')); + fixture.detectChanges(); + + HelperTestFunctions.verifyActiveSlide(carousel, 1); - it('should initialize a carousel with four slides and then destroy it', () => { - const domCarousel = fixture.debugElement.query(By.css('igx-carousel')).nativeElement; - - fixture.detectChanges(); - expect(carousel).toBeDefined(); - expect(carousel.id).toContain('igx-carousel-'); - expect(domCarousel.id).toContain('igx-carousel-'); - expect(carousel instanceof IgxCarouselComponent).toBe(true); - expect(carousel.slides[0] instanceof IgxSlideComponent).toBe(true); - - expect(carousel.slides instanceof Array).toBe(true); - expect(carousel.loop).toBe(true); - expect(carousel.pause).toBe(true); - expect(carousel.slides.length).toEqual(4); - expect(carousel.interval).toEqual(2500); - - carousel.ngOnDestroy(); - fixture.detectChanges(); - expect(carousel.isDestroyed).toBe(true); - }); + nextNav.dispatchEvent(new Event('click')); + fixture.detectChanges(); - it('Carousel disabled looping', () => { - const lastSlide = carousel.get(3); - const firstSlide = carousel.get(0); - - carousel.loop = false; - fixture.detectChanges(); - carousel.next(); - carousel.next(); - carousel.next(); - fixture.detectChanges(); - expect(carousel.current).toBe(lastSlide.index); - - carousel.next(); - fixture.detectChanges(); - expect(carousel.current).toBe(lastSlide.index); - - carousel.prev(); - carousel.prev(); - carousel.prev(); - fixture.detectChanges(); - expect(carousel.current).toBe(firstSlide.index); - - carousel.prev(); - fixture.detectChanges(); - expect(carousel.current).toBe(firstSlide.index); - }); + HelperTestFunctions.verifyActiveSlide(carousel, 2); - it('Carousel getter/setter tests', () => { - carousel.loop = false; - carousel.pause = false; - carousel.interval = 500; - carousel.navigation = false; + nextNav.dispatchEvent(new Event('click')); + fixture.detectChanges(); - fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 3); - expect(carousel.loop).toBe(false); - expect(carousel.pause).toBe(false); - expect(carousel.interval).toEqual(500); - expect(carousel.navigation).toBe(false); - }); - - it('Carousel add/remove slides tests', () => { - let currentSlide = carousel.get(carousel.current); - carousel.remove(currentSlide); + nextNav.dispatchEvent(new Event('click')); + fixture.detectChanges(); - fixture.detectChanges(); - expect(carousel.slides.length).toEqual(3); - expect(carousel.total).toEqual(3); + HelperTestFunctions.verifyActiveSlide(carousel, 0); - currentSlide = carousel.get(carousel.current); - carousel.remove(currentSlide); + prevNav.dispatchEvent(new Event('click')); + fixture.detectChanges(); - fixture.detectChanges(); - expect(carousel.slides.length).toEqual(2); - expect(carousel.total).toEqual(2); + HelperTestFunctions.verifyActiveSlide(carousel, 3); - carousel.add(currentSlide); - carousel.add(currentSlide); + prevNav.dispatchEvent(new Event('click')); + fixture.detectChanges(); - fixture.detectChanges(); - expect(carousel.slides.length).toEqual(4); - expect(carousel.total).toEqual(4); - }); + HelperTestFunctions.verifyActiveSlide(carousel, 2); - it('Carousel checking if a slide is not active when it gets removed', () => { - const currentSlide = carousel.get(carousel.current); - carousel.remove(currentSlide); + expect(carousel.onSlideChanged.emit).toHaveBeenCalledTimes(6); + }); - fixture.detectChanges(); - expect(currentSlide.active).toBe(false); - }); + it('changing slides with indicators buttons', () => { + spyOn(carousel.onSlideChanged, 'emit'); + carousel.pause = true; - it('Carousel public methods', () => { - carousel.stop(); + const indicators = HelperTestFunctions.getIndicators(fixture); + expect(indicators.length).toBe(4); - fixture.detectChanges(); - expect(carousel.isPlaying).toBe(false); + indicators[3].dispatchEvent(new Event('click')); + fixture.detectChanges(); - carousel.next(); - let currentSlide = carousel.get(carousel.current); + HelperTestFunctions.verifyActiveSlide(carousel, 3); - fixture.detectChanges(); - expect(carousel.get(1)).toBe(currentSlide); + indicators[1].dispatchEvent(new Event('click')); + fixture.detectChanges(); - currentSlide = carousel.get(0); - carousel.prev(); + HelperTestFunctions.verifyActiveSlide(carousel, 1); - fixture.detectChanges(); - expect(carousel.get(0)).toBe(currentSlide); - }); + expect(carousel.onSlideChanged.emit).toHaveBeenCalledTimes(2); + }); - it('Carousel emit events', () => { - spyOn(carousel.onSlideChanged, 'emit'); - carousel.next(); - fixture.detectChanges(); - let args: ISlideEventArgs = { - carousel, - slide: carousel.get(carousel.current) - }; - expect(carousel.onSlideChanged.emit).toHaveBeenCalledWith(args); - expect(carousel.onSlideChanged.emit).toHaveBeenCalledTimes(1); - - carousel.prev(); - args = { - carousel, - slide: carousel.get(carousel.current) - }; - fixture.detectChanges(); - expect(carousel.onSlideChanged.emit).toHaveBeenCalledWith(args); - expect(carousel.onSlideChanged.emit).toHaveBeenCalledTimes(2); - - carousel.select(carousel.get(2)); - args = { - carousel, - slide: carousel.get(2) - }; - fixture.detectChanges(); - expect(carousel.onSlideChanged.emit).toHaveBeenCalledWith(args); - expect(carousel.onSlideChanged.emit).toHaveBeenCalledTimes(3); - - spyOn(carousel.onSlideAdded, 'emit'); - carousel.add(carousel.get(carousel.current)); - fixture.detectChanges(); - args = { - carousel, - slide: carousel.get(carousel.current) - }; - expect(carousel.onSlideAdded.emit).toHaveBeenCalledWith(args); - - spyOn(carousel.onSlideRemoved, 'emit'); - args = { - carousel, - slide: carousel.get(carousel.current) - }; - carousel.remove(carousel.get(carousel.current)); - fixture.detectChanges(); - expect(carousel.onSlideRemoved.emit).toHaveBeenCalledWith(args); - - spyOn(carousel.onCarouselPaused, 'emit'); - carousel.stop(); - fixture.detectChanges(); - expect(carousel.onCarouselPaused.emit).toHaveBeenCalledWith(carousel); - - spyOn(carousel.onCarouselPlaying, 'emit'); - carousel.play(); - fixture.detectChanges(); - expect(carousel.onCarouselPlaying.emit).toHaveBeenCalledWith(carousel); - }); + it('navigation changes visibility of arrows', () => { + expect(HelperTestFunctions.getNextButton(fixture) === null).toBe(false); + expect(HelperTestFunctions.getPreviousButton(fixture) === null).toBe(false); - it('Carousel click handlers', () => { - let prevNav; - let nextNav; - let carouselNative; + carousel.navigation = false; + fixture.detectChanges(); + expect(HelperTestFunctions.getNextButton(fixture) === null).toBe(true); + expect(HelperTestFunctions.getPreviousButton(fixture) === null).toBe(true); - carouselNative = fixture.debugElement; + carousel.navigation = true; + fixture.detectChanges(); + expect(HelperTestFunctions.getNextButton(fixture) === null).toBe(false); + expect(HelperTestFunctions.getPreviousButton(fixture) === null).toBe(false); + }); - prevNav = carouselNative.query(By.css('a.igx-carousel__arrow--prev')).nativeElement; - nextNav = carouselNative.query(By.css('a.igx-carousel__arrow--next')).nativeElement; + it('maximumIndicatorsCount changes visibility of indicators', () => { + expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4); + expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(4); + expect(HelperTestFunctions.getIndicatorsLabel(fixture)).toBeNull(); - spyOn(carousel, 'prev'); - prevNav.dispatchEvent(new Event('click')); - fixture.detectChanges(); - expect(carousel.prev).toHaveBeenCalled(); + carousel.maximumIndicatorsCount = 3; + fixture.detectChanges(); + expect(carousel.maximumIndicatorsCount).toBe(3); + expect(HelperTestFunctions.getIndicators(fixture).length).toBe(0); + expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(0); + const label = HelperTestFunctions.getIndicatorsLabel(fixture); + expect(label).toBeDefined(); + expect(label.innerHTML).toBe('1 of 4'); - spyOn(carousel, 'next'); - nextNav.dispatchEvent(new Event('click')); - fixture.detectChanges(); - expect(carousel.next).toHaveBeenCalled(); - }); + carousel.maximumIndicatorsCount = 6; + fixture.detectChanges(); + expect(carousel.maximumIndicatorsCount).toBe(6); + expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4); + expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(4); + expect(HelperTestFunctions.getIndicatorsLabel(fixture)).toBeNull(); + }); - it('Carousel UI navigation test', () => { - let carouselNative; + it('indicatorsOrientation changes the position of indicators', () => { + let indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture); + expect(indicatorsContainer).toBeDefined(); - carouselNative = fixture.debugElement.query(By.css('.igx-carousel')); + carousel.indicatorsOrientation = CarouselIndicatorsOrientation.top; + fixture.detectChanges(); - expect(carousel.current).toEqual(0); - carousel.pause = true; + indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture); + expect(indicatorsContainer).toBeNull(); + indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.top); + expect(indicatorsContainer).toBeDefined(); - carousel.nativeElement.focus(); - UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); - fixture.detectChanges(); - expect(carousel.current).toEqual(1); - expect(carousel.get(1).active).toBeTruthy(); + carousel.indicatorsOrientation = CarouselIndicatorsOrientation.bottom; + fixture.detectChanges(); - UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); - fixture.detectChanges(); - expect(carousel.current).toEqual(2); - expect(carousel.get(1).active).toBe(false); - expect(carousel.get(2).active).toBe(true); + indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.top); + expect(indicatorsContainer).toBeNull(); + indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.bottom); + expect(indicatorsContainer).toBeDefined(); + }); - UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); - fixture.detectChanges(); - expect(carousel.current).toEqual(3); + it('keyboardSupport changes support for keyboard navigation', () => { + carousel.keyboardSupport = false; + carousel.select(carousel.get(1)); + fixture.detectChanges(); - UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); - fixture.detectChanges(); - expect(carousel.current).toEqual(0); + spyOn(carousel.onSlideChanged, 'emit'); - UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true); - fixture.detectChanges(); - expect(carousel.current).toEqual(3); + UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 1); - UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true); - fixture.detectChanges(); - expect(carousel.current).toEqual(2); - }); + UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 1); - it('Carousel navigation changes visibility of arrows', () => { - let carouselNative; + UIInteractions.triggerKeyDownEvtUponElem('End', carousel.nativeElement, true); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 1); - carouselNative = fixture.debugElement.query(By.css('.igx-carousel')); + UIInteractions.triggerKeyDownEvtUponElem('Home', carousel.nativeElement, true); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 1); + + expect(carousel.onSlideChanged.emit).toHaveBeenCalledTimes(0); + carousel.keyboardSupport = true; + fixture.detectChanges(); + + UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); + fixture.detectChanges(); + HelperTestFunctions.verifyActiveSlide(carousel, 2); + expect(carousel.onSlideChanged.emit).toHaveBeenCalledTimes(1); + }); + + it('should stop/play on mouse enter/leave and on tab key', () => { + carousel.interval = 1000; + carousel.play(); + fixture.detectChanges(); + + spyOn(carousel.onCarouselPaused, 'emit'); + spyOn(carousel.onCarouselPlaying, 'emit'); + + expect(carousel.isPlaying).toBeTruthy(); + + UIInteractions.hoverElement(carousel.nativeElement, true); + fixture.detectChanges(); + + expect(carousel.isPlaying).toBeFalsy(); + expect(carousel.onCarouselPaused.emit).toHaveBeenCalledTimes(1); + + UIInteractions.unhoverElement(carousel.nativeElement, true); + fixture.detectChanges(); + + expect(carousel.isPlaying).toBeTruthy(); + expect(carousel.onCarouselPlaying.emit).toHaveBeenCalledTimes(1); + expect(carousel.onCarouselPaused.emit).toHaveBeenCalledTimes(1); + + UIInteractions.triggerKeyDownEvtUponElem('Tab', carousel.nativeElement, true); + fixture.detectChanges(); + + expect(carousel.isPlaying).toBeFalsy(); + expect(carousel.onCarouselPaused.emit).toHaveBeenCalledTimes(2); + + UIInteractions.triggerKeyDownEvtUponElem('Tab', carousel.nativeElement, true); + fixture.detectChanges(); + expect(carousel.isPlaying).toBeTruthy(); + expect(carousel.onCarouselPlaying.emit).toHaveBeenCalledTimes(2); + expect(carousel.onCarouselPaused.emit).toHaveBeenCalledTimes(2); + }); + }); - // carousel.navigation = true; - fixture.detectChanges(); - expect(carouselNative.query(By.css('.igx-carousel__arrow--prev')) === null).toBe(false); - expect(carouselNative.query(By.css('.igx-carousel__arrow--next')) === null).toBe(false); + describe('Templates Tests: ', () => { + it('verify that template can be defined in the markup', () => { + fixture = TestBed.createComponent(CarouselTemplateSetInMarkupTestComponent); + carousel = fixture.componentInstance.carousel; + fixture.detectChanges(); + + expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4); + expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(0); + for (let index = 0; index < 4; index++) { + const indicator = HelperTestFunctions.getIndicators(fixture)[index] as HTMLElement; + expect(indicator.innerText).toEqual(index.toString()); + } + }); + + it('verify that template can be changed', () => { + fixture = TestBed.createComponent(CarouselTemplateSetInTypescriptTestComponent); + carousel = fixture.componentInstance.carousel; + fixture.detectChanges(); + + carousel.select(carousel.get(1)); + fixture.detectChanges(); + + expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4); + expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(4); + + carousel.indicatorTemplate = fixture.componentInstance.customIndicatorTemplate1; + fixture.detectChanges(); + + expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4); + expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(0); + for (let index = 0; index < 4; index++) { + const indicator = HelperTestFunctions.getIndicators(fixture)[index] as HTMLElement; + expect(indicator.innerText).toEqual(index.toString()); + } + + carousel.indicatorTemplate = fixture.componentInstance.customIndicatorTemplate2; + fixture.detectChanges(); + + expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4); + expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(0); + + for (let index = 0; index < 4; index++) { + const indicator = HelperTestFunctions.getIndicators(fixture)[index] as HTMLElement; + if (index === 1) { + expect(indicator.innerText).toEqual('1: Active'); + } else { + expect(indicator.innerText).toEqual(index.toString()); + } + } + + carousel.indicatorTemplate = null; + fixture.detectChanges(); + + expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4); + expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(4); + }); + }); - carousel.navigation = false; - fixture.detectChanges(); - expect(carouselNative.query(By.css('.igx-carousel__arrow--prev')) === null).toBe(true); - expect(carouselNative.query(By.css('.igx-carousel__arrow--next')) === null).toBe(true); + describe('Animations Tests: ', () => { + beforeEach(() => { + fixture = TestBed.createComponent(CarouselAnimationsComponent); + fixture.detectChanges(); + carousel = fixture.componentInstance.carousel; + }); + + it('Test slide animation', async () => { + await wait(); + expect(carousel.get(0).active).toBeTruthy(); + expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy(); + expect(carousel.animationType).toBe(CarouselAnimationType.slide); + carousel.next(); + fixture.detectChanges(); + await wait(200); + + expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy(); + expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeTruthy(); + await wait(200); + fixture.detectChanges(); + + expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy(); + expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeFalsy(); + carousel.prev(); + fixture.detectChanges(); + await wait(230); + + expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy(); + expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeTruthy(); + await wait(200); + fixture.detectChanges(); + + expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy(); + expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeFalsy(); + }); + + it('Test fade animation', async () => { + await wait(); + carousel.animationType = CarouselAnimationType.fade; + fixture.detectChanges(); + + expect(carousel.get(0).active).toBeTruthy(); + expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy(); + expect(carousel.animationType).toBe(CarouselAnimationType.fade); + carousel.next(); + fixture.detectChanges(); + await wait(200); + + expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy(); + expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeTruthy(); + await wait(200); + fixture.detectChanges(); + + expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy(); + expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeFalsy(); + }); + }); - carousel.navigation = true; - fixture.detectChanges(); - expect(carouselNative.query(By.css('.igx-carousel__arrow--prev')) === null).toBe(false); - expect(carouselNative.query(By.css('.igx-carousel__arrow--next')) === null).toBe(false); + describe('Dynamic Slides: ', () => { + let slides; + beforeEach(() => { + fixture = TestBed.createComponent(CarouselDynamicSlidesComponent); + fixture.detectChanges(); + carousel = fixture.componentInstance.carousel; + slides = fixture.componentInstance.slides; + }); + + it('should activate slide when change its property active', fakeAsync(() => { + tick(); + // Verify 3th slide is active + HelperTestFunctions.verifyActiveSlide(carousel, 2); + + // Change active slide + slides[0].active = true; + fixture.detectChanges(); + + HelperTestFunctions.verifyActiveSlide(carousel, 0); + })); + + it('should add slides to the carousel when collection is changed', fakeAsync(() => { + tick(); + spyOn(carousel.onSlideAdded, 'emit'); + + // add a slide + slides.push({text: 'Slide 5'}); + fixture.detectChanges(); + + HelperTestFunctions.verifyActiveSlide(carousel, 2); + expect(carousel.total).toEqual(5); + + // add an active slide + slides.push({text: 'Slide 6', active: true}); + fixture.detectChanges(); + tick(100); + + HelperTestFunctions.verifyActiveSlide(carousel, 5); + expect(carousel.total).toEqual(6); + + expect(carousel.onSlideAdded.emit).toHaveBeenCalledTimes(2); + })); + + it('should remove slides in the carousel', fakeAsync(() => { + tick(); + spyOn(carousel.onSlideRemoved, 'emit'); + + // remove a slide + slides.pop(); + fixture.detectChanges(); + + HelperTestFunctions.verifyActiveSlide(carousel, 2); + expect(carousel.total).toEqual(3); + + // remove active slide + slides.pop(); + fixture.detectChanges(); + tick(200); + fixture.detectChanges(); + + expect(carousel.total).toEqual(2); + HelperTestFunctions.verifyActiveSlide(carousel, 1); + + expect(carousel.onSlideRemoved.emit).toHaveBeenCalledTimes(2); + })); + + it('should not render navigation buttons and indicators when carousel does not have slides', fakeAsync(() => { + fixture.componentInstance.removeAllSlides(); + fixture.detectChanges(); + tick(200); + + expect(carousel.total).toEqual(0); + expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeNull(); + expect(HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.top)).toBeNull(); + expect(HelperTestFunctions.getNextButton(fixture).hidden).toBeTruthy(); + expect(HelperTestFunctions.getPreviousButton(fixture).hidden).toBeTruthy(); + + // add a slide + fixture.componentInstance.addSlides(); + fixture.detectChanges(); + tick(200); + + expect(carousel.total).toEqual(2); + expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeDefined(); + expect(HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.top)).toBeDefined(); + expect(HelperTestFunctions.getNextButton(fixture).hidden).toBeFalsy(); + expect(HelperTestFunctions.getPreviousButton(fixture).hidden).toBeFalsy(); + })); }); }); +class HelperTestFunctions { + public static NEXT_BUTTON_CLASS = '.igx-carousel__arrow--next'; + public static PRIV_BUTTON_CLASS = '.igx-carousel__arrow--prev'; + 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_LABEL_CLASS = '.igx-carousel__label'; + public static INDICATOR_CLASS = '.igx-carousel-indicators__indicator'; + public static INDICATOR_DOT_CLASS = '.igx-nav-dot'; + public static INDICATOR_ACTIVE_DOT_CLASS = '.igx-nav-dot--active'; + + public static getNextButton(fixture): HTMLElement { + return fixture.nativeElement.querySelector(HelperTestFunctions.NEXT_BUTTON_CLASS); + } + + public static getPreviousButton(fixture): HTMLElement { + return fixture.nativeElement.querySelector(HelperTestFunctions.PRIV_BUTTON_CLASS); + } + + public static getIndicatorsContainer(fixture, position = CarouselIndicatorsOrientation.bottom): HTMLElement { + const carouselNative = fixture.nativeElement; + if (position === CarouselIndicatorsOrientation.bottom) { + return carouselNative.querySelector(HelperTestFunctions.INDICATORS_BOTTOM_CLASS); + } else { + return carouselNative.querySelector(HelperTestFunctions.INDICATORS_TOP_CLASS); + } + } + + public static getIndicatorsLabel(fixture, position = CarouselIndicatorsOrientation.bottom) { + const indContainer = HelperTestFunctions.getIndicatorsContainer(fixture, position); + return indContainer.querySelector(HelperTestFunctions.INDICATORS_LABEL_CLASS); + } + + public static getIndicators(fixture, position = CarouselIndicatorsOrientation.bottom) { + const indContainer = HelperTestFunctions.getIndicatorsContainer(fixture, position); + return indContainer.querySelectorAll(HelperTestFunctions.INDICATOR_CLASS); + } + + public static getIndicatorsDots(fixture, position = CarouselIndicatorsOrientation.bottom) { + const indContainer = HelperTestFunctions.getIndicatorsContainer(fixture, position); + return indContainer.querySelectorAll(HelperTestFunctions.INDICATOR_DOT_CLASS); + } + + public static verifyActiveSlide(carousel, index: number) { + const activeSlide = carousel.get(index); + expect(carousel.current).toEqual(index); + expect(activeSlide.active).toBeTruthy(); + expect(activeSlide.nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy(); + expect(carousel.slides.find((slide) => slide.active && slide.index !== index)).toBeUndefined(); + } + + +} @Component({ template: ` - +

Slide1

Slide2

Slide3

 @@ -303,10 +736,109 @@ describe('Carousel', () => { ` }) class CarouselTestComponent { - @ViewChild('carousel', { static: true }) public carousel: IgxCarouselComponent; public loop = true; public pause = true; public interval = 2500; } + +@Component({ + template: ` + +

Slide1

 +

Slide2

 +

Slide3

 +

Slide4

 + + ` +}) +class CarouselAnimationsComponent { + @ViewChild('carousel', { static: true }) public carousel: IgxCarouselComponent; +} + + +@Component({ + template: ` + +

Slide1

 +

Slide2

 +

Slide3

 +

Slide4

 + + + {{slide.index}} + + + ` +}) +class CarouselTemplateSetInMarkupTestComponent { + @ViewChild('carousel', { static: true }) public carousel: IgxCarouselComponent; +} + +@Component({ + template: ` + + {{slide.index}} + + + + {{slide.index}} + {{slide.index}}: Active + + + +

Slide1

 +

Slide2

 +

Slide3

 +

Slide4

 + + ` +}) +class CarouselTemplateSetInTypescriptTestComponent { + @ViewChild('carousel', { static: true }) public carousel: IgxCarouselComponent; + @ViewChild('customIndicatorTemplate1', { read: TemplateRef, static: false }) + public customIndicatorTemplate1; + @ViewChild('customIndicatorTemplate2', { read: TemplateRef, static: false }) + public customIndicatorTemplate2; +} + +@Component({ + template: ` + + +

{{slide.text}}

 + + + ` +}) +class CarouselDynamicSlidesComponent { + @ViewChild('carousel', { static: true }) public carousel: IgxCarouselComponent; + + public loop = true; + public slides = []; + + constructor() { + this.addNewSlide(); + } + + addNewSlide() { + this.slides.push( + {text: 'Slide 1', active: false}, + {text: 'Slide 2', active: false}, + {text: 'Slide 3', active: true}, + {text: 'Slide 4', active: false} + ); + } + + public removeAllSlides() { + this.slides = []; + } + + public addSlides() { + this.slides.push( + {text: 'Slide 1'}, + {text: 'Slide 2'} + ); + } +} diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index bbf68884339..75135c7b871 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts @@ -8,16 +8,46 @@ import { Input, NgModule, OnDestroy, - OnInit, - Output + Output, + ContentChildren, + QueryList, + IterableDiffer, + IterableDiffers, + AfterContentInit, + IterableChangeRecord, + TemplateRef, + ViewChild, + ContentChild } from '@angular/core'; import { IgxIconModule } from '../icon/index'; import { IBaseEventArgs } from '../core/utils'; +import { Subject, merge } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { IgxCarouselIndicatorDirective } from './carousel.directives'; +import { useAnimation, AnimationBuilder, AnimationPlayer, AnimationReferenceMetadata } from '@angular/animations'; +import { slideInLeft, fadeIn, rotateInCenter } from '../animations/main'; +import { IgxSlideComponent, Direction } from './slide.component'; +import { ICarouselResourceStrings } from '../core/i18n/carousel-resources'; +import { CurrentResourceStrings } from '../core/i18n/resources'; let NEXT_ID = 0; -export enum Direction { NONE, NEXT, PREV } +export enum CarouselIndicatorsOrientation { + bottom = 'bottom', + top = 'top' +} + +export enum CarouselAnimationType { + none = 'none', + slide = 'slide', + fade = 'fade', + grow = 'grow' +} +export interface CarouselAnimationSettings { + enterAnimation: AnimationReferenceMetadata; + leaveAnimation: AnimationReferenceMetadata; +} /** * **Ignite UI for Angular Carousel** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel.html) @@ -49,7 +79,7 @@ export enum Direction { NONE, NEXT, PREV } }`] }) -export class IgxCarouselComponent implements OnDestroy { +export class IgxCarouselComponent implements OnDestroy, AfterContentInit { /** * Returns the `role` attribute of the carousel. * ```typescript @@ -71,6 +101,39 @@ export class IgxCarouselComponent implements OnDestroy { @Input() public id = `igx-carousel-${NEXT_ID++}`; + /** + * Returns the `aria-label` of the carousel. + * + * ```typescript + * let carousel = this.carousel.ariaLabel; + * ``` + * + */ + @HostBinding('attr.aria-label') + public ariaLabel = 'carousel'; + + /** + * Returns the `tabIndex` of the carousel component. + * ```typescript + * let tabIndex = this.carousel.tabIndex; + * ``` + * @memberof IgxCarouselComponent + */ + @HostBinding('attr.tabindex') + get tabIndex() { + return 0; + } + + /** + * Returns the class of the carousel component. + * ```typescript + * let class = this.carousel.cssClass; + * ``` + * @memberof IgxCarouselComponent + */ + @HostBinding('class.igx-carousel') + public cssClass = 'igx-carousel'; + /** * Sets whether the carousel should `loop` back to the first slide after reaching the last slide. * Default value is `true`. @@ -115,17 +178,6 @@ export class IgxCarouselComponent implements OnDestroy { this._interval = +value; this._restartInterval(); } - /** - * Returns the `tabIndex` of the carousel component. - * ```typescript - * let tabIndex = this.carousel.tabIndex; - * ``` - * @memberof IgxCarouselComponent - */ - @HostBinding('attr.tabindex') - get tabIndex() { - return 0; - } /** * Controls whether the carousel should render the left/right `navigation` buttons. @@ -137,6 +189,99 @@ export class IgxCarouselComponent implements OnDestroy { */ @Input() public navigation = true; + /** + * Controls whether the carousel should support keyboard navigation. + * Default value is `true`. + * ```html + * + * ``` + * @memberOf IgxCarouselComponent + */ + @Input() public keyboardSupport = true; + + /** + * Controls the maximum indexes that can be shown. + * Default value is `5`. + * ```html + * + * ``` + * @memberOf IgxCarouselComponent + */ + @Input() public maximumIndicatorsCount = 5; + + /** + * Gets/sets the display mode of carousel indicators. It can be top or bottom. + * Default value is `bottom`. + * ```html + * + * + * ``` + * @memberOf IgxSlideComponent + */ + @Input() public indicatorsOrientation: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.bottom; + + /** + * Gets/sets the animation type of carousel. + * Default value is `slide`. + * ```html + * + * + * ``` + * @memberOf IgxSlideComponent + */ + @Input() public animationType = CarouselAnimationType.slide; + + /** + * An accessor that sets the resource strings. + * By default it uses EN resources. + */ + @Input() + set resourceStrings(value: ICarouselResourceStrings) { + this._resourceStrings = Object.assign({}, this._resourceStrings, value); + } + + /** + * An accessor that returns the resource strings. + */ + get resourceStrings(): ICarouselResourceStrings { + return this._resourceStrings; + } + + @ViewChild('defaultIndicator', { read: TemplateRef, static: true }) + protected defaultIndicator: TemplateRef; + + /** + * The custom template, if any, that should be used when rendering carousel indicators + * + * ```typescript + * // Set in typescript + * const myCustomTemplate: TemplateRef = myComponent.customTemplate; + * myComponent.carousel.indicatorTemplate = myCustomTemplate; + * ``` + * ```html + * + * + * ... + * + * brightness_7 + * brightness_5 + * + * + * ``` + */ + @ContentChild(IgxCarouselIndicatorDirective, { read: TemplateRef, static: false }) + public indicatorTemplate: TemplateRef = null; + + /** + * The collection of `slides` currently in the carousel. + * ```typescript + * let slides: QueryList = this.carousel.slides; + * ``` + * @memberOf IgxCarouselComponent + */ + @ContentChildren(IgxSlideComponent) + public slides: QueryList; + /** * An event that is emitted after a slide transition has happened. * Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments. @@ -187,31 +332,218 @@ export class IgxCarouselComponent implements OnDestroy { */ @Output() public onCarouselPlaying = new EventEmitter(); - /** - * The collection of `slides` currently in the carousel. - * ```typescript - * let slides: IgxSlideComponent[] = this.carousel.slides; - * ``` - * @memberOf IgxCarouselComponent - */ - public slides: IgxSlideComponent[] = []; private _interval: number; private _lastInterval: any; private _playing: boolean; - private _currentSlide: IgxSlideComponent; private _destroyed: boolean; - private _total = 0; + private _resourceStrings = CurrentResourceStrings.CarouselResStrings; + private destroy$ = new Subject(); + private _differ: IterableDiffer | null = null; + private enterAnimationPlayer?: AnimationPlayer; + private leaveAnimationPlayer?: AnimationPlayer; + private currentSlide: IgxSlideComponent; + private previousSlide: IgxSlideComponent; + private animationDuration = 320; + + constructor(private element: ElementRef, private _iterableDiffers: IterableDiffers, private builder: AnimationBuilder) { + this._differ = this._iterableDiffers.find([]).create(null); + } - constructor(private element: ElementRef) { } /** - *@hidden - */ + * @hidden + */ + public ngAfterContentInit() { + this.slides.changes + .pipe(takeUntil(this.destroy$)) + .subscribe((change: QueryList) => { this.initSlides(change); }); + + this.initSlides(this.slides); + } + + /** + *@hidden + */ public ngOnDestroy() { + this.destroy$.next(true); + this.destroy$.complete(); this._destroyed = true; if (this._lastInterval) { clearInterval(this._lastInterval); } } + + private unsubscriber(slide: IgxSlideComponent) { + return merge(this.destroy$, slide.isDestroyed); + } + + private onSlideActivated(slide: IgxSlideComponent) { + if (slide.active && slide !== this.currentSlide) { + if (slide.direction === Direction.NONE) { + const newIndex = slide.index; + slide.direction = newIndex > this.current ? Direction.NEXT : Direction.PREV; + } + + if (this.currentSlide) { + const animationWasStarted = this.finishAnimations(); + this.currentSlide.direction = slide.direction; + this.currentSlide.active = false; + + this.previousSlide = this.currentSlide; + this.currentSlide = slide; + if (this.animationType !== CarouselAnimationType.none) { + if (animationWasStarted) { + requestAnimationFrame(() => { + this.playLeaveAnimation(); + this.playEnterAnimation(); + }); + } else { + this.playLeaveAnimation(); + this.playEnterAnimation(); + } + } + } else { + this.currentSlide = slide; + } + this.onSlideChanged.emit({ carousel: this, slide }); + this._restartInterval(); + } + } + + private finishAnimations(): boolean { + let animationWasStarted = false; + if (this.previousSlide && this.previousSlide.previous) { + this.previousSlide.previous = false; + } + if (this.leaveAnimationPlayer) { + animationWasStarted = true; + this.leaveAnimationPlayer.finish(); + } + if (this.enterAnimationPlayer) { + animationWasStarted = true; + this.enterAnimationPlayer.finish(); + } + return animationWasStarted; + } + + private getAnimation(): CarouselAnimationSettings { + switch (this.animationType) { + case CarouselAnimationType.slide: + return { + enterAnimation: useAnimation(slideInLeft, + { + params: { + delay: '0s', + duration: `${this.animationDuration}ms`, + endOpacity: 1, + startOpacity: 1, + fromPosition: `translateX(${this.currentSlide.direction === 1 ? 100 : -100}%)`, + toPosition: 'translateX(0%)' + } + }), + leaveAnimation: useAnimation(slideInLeft, + { + params: { + delay: '0s', + duration: `${this.animationDuration}ms`, + endOpacity: 1, + startOpacity: 1, + fromPosition: `translateX(0%)`, + toPosition: `translateX(${this.currentSlide.direction === 1 ? -100 : 100}%)`, + } + }) + }; + case CarouselAnimationType.fade: + return { + enterAnimation: useAnimation(fadeIn, { params: { duration: `${this.animationDuration}ms` } }), + leaveAnimation: null + }; + } + return { + enterAnimation: null, + leaveAnimation: null + }; + } + + private playEnterAnimation() { + const animationBuilder = this.builder.build(this.getAnimation().enterAnimation); + + this.enterAnimationPlayer = animationBuilder.create(this.currentSlide.nativeElement); + + this.enterAnimationPlayer.onDone(() => { + if (this.enterAnimationPlayer) { + this.enterAnimationPlayer.reset(); + this.enterAnimationPlayer = null; + } + this.previousSlide.previous = false; + }); + this.previousSlide.previous = true; + this.enterAnimationPlayer.play(); + } + + private playLeaveAnimation() { + if (this.getAnimation().leaveAnimation) { + const animationBuilder = this.builder.build(this.getAnimation().leaveAnimation); + this.leaveAnimationPlayer = animationBuilder.create(this.previousSlide.nativeElement); + + this.leaveAnimationPlayer.onDone(() => { + if (this.leaveAnimationPlayer) { + this.leaveAnimationPlayer.reset(); + this.leaveAnimationPlayer = null; + } + }); + this.leaveAnimationPlayer.play(); + } + } + + private initSlides(change: QueryList) { + const diff = this._differ.diff(change.toArray()); + if (diff) { + this.slides.reduce((any, c, ind) => c.index = ind, 0); // reset slides indexes + diff.forEachAddedItem((record: IterableChangeRecord) => { + const slide = record.item; + this.onSlideAdded.emit({ carousel: this, slide }); + if (slide.active) { + this.currentSlide = slide; + } + slide.activeChange.pipe(takeUntil(this.unsubscriber(slide))).subscribe(() => this.onSlideActivated(slide)); + }); + + diff.forEachRemovedItem((record: IterableChangeRecord) => { + const slide = record.item; + this.onSlideRemoved.emit({ carousel: this, slide }); + if (slide.active) { + slide.active = false; + this.currentSlide = this.get(slide.index < this.total ? slide.index : this.total - 1); + } + }); + + this.updateSlidesSelection(); + } + } + + private updateSlidesSelection() { + requestAnimationFrame(() => { + if (this.currentSlide) { + this.currentSlide.active = true; + const activeSlides = this.slides.filter(slide => slide.active && slide.index !== this.currentSlide.index); + activeSlides.forEach(slide => { slide.active = false; }); + } else if (this.total) { + this.slides.first.active = true; + } + this.play(); + }); + } + + /** + * @hidden + */ + public get getIndicatorTemplate(): TemplateRef { + if (this.indicatorTemplate) { + return this.indicatorTemplate; + } + return this.defaultIndicator; + } + /** * @hidden * @memberof IgxCarouselComponent @@ -220,6 +552,38 @@ export class IgxCarouselComponent implements OnDestroy { return `Item ${slide.index + 1} of ${this.total}`; } + /** + * @hidden + * @memberof IgxCarouselComponent + */ + public get indicatorsOrientationClass() { + return `igx-carousel-indicators--${this.indicatorsOrientation}`; + } + + /** + * @hidden + * @memberof IgxCarouselComponent + */ + public get showIndicators(): boolean { + return this.total <= this.maximumIndicatorsCount && this.total > 0; + } + + /** + * @hidden + * @memberof IgxCarouselComponent + */ + public get showIndicatorsLabel(): boolean { + return this.total > this.maximumIndicatorsCount; + } + + /** + * @hidden + * @memberof IgxCarouselComponent + */ + public get getCarouselLabel() { + return `${this.current + 1} ${this.resourceStrings.igx_carousel_of} ${this.total}`; + } + /** * Returns the total number of `slides` in the carousel. * ```typescript @@ -228,7 +592,7 @@ export class IgxCarouselComponent implements OnDestroy { * @memberOf IgxCarouselComponent */ public get total(): number { - return this._total; + return this.slides.length; } /** @@ -239,7 +603,7 @@ export class IgxCarouselComponent implements OnDestroy { * @memberOf IgxCarouselComponent */ public get current(): number { - return !this._currentSlide ? 0 : this._currentSlide.index; + return !this.currentSlide ? 0 : this.currentSlide.index; } /** @@ -282,11 +646,7 @@ export class IgxCarouselComponent implements OnDestroy { * @memberOf IgxCarouselComponent */ public get(index: number): IgxSlideComponent { - for (const each of this.slides) { - if (each.index === index) { - return each; - } - } + return this.slides.find((slide) => slide.index === index); } /** @@ -297,20 +657,10 @@ export class IgxCarouselComponent implements OnDestroy { * @memberOf IgxCarouselComponent */ public add(slide: IgxSlideComponent) { - slide.index = this.total; - this.slides.push(slide); - this._total += 1; - - if (this.total === 1 || slide.active) { - this.select(slide); - if (this.total === 1) { - this.play(); - } - } else { - slide.active = false; - } - - this.onSlideAdded.emit({ carousel: this, slide }); + const newSlides = this.slides.toArray(); + newSlides.push(slide); + this.slides.reset(newSlides); + this.slides.notifyOnChanges(); } /** @@ -322,24 +672,10 @@ export class IgxCarouselComponent implements OnDestroy { */ public remove(slide: IgxSlideComponent) { if (slide && slide === this.get(slide.index)) { // check if the requested slide for delete is present in the carousel - if (slide.index === this.current) { - slide.active = false; - this.next(); - } - - this.slides.splice(slide.index, 1); - this._total -= 1; - - if (!this.total) { - this._currentSlide = null; - return; - } - - for (let i = 0; i < this.total; i++) { - this.slides[i].index = i; - } - - this.onSlideRemoved.emit({ carousel: this, slide }); + const newSlides = this.slides.toArray(); + newSlides.splice(slide.index, 1); + this.slides.reset(newSlides); + this.slides.notifyOnChanges(); } } @@ -351,13 +687,9 @@ export class IgxCarouselComponent implements OnDestroy { * @memberOf IgxCarouselComponent */ public select(slide: IgxSlideComponent, direction: Direction = Direction.NONE) { - const newIndex = slide.index; - if (direction === Direction.NONE) { - direction = newIndex > this.current ? Direction.NEXT : Direction.PREV; - } - - if (slide && slide !== this._currentSlide) { - this._moveTo(slide, direction); + if (slide && slide !== this.currentSlide) { + slide.direction = direction; + slide.active = true; } } @@ -429,39 +761,14 @@ export class IgxCarouselComponent implements OnDestroy { this._resetInterval(); } } - /** - *@hidden - */ - private _moveTo(slide: IgxSlideComponent, direction: Direction) { - if (this._destroyed) { - return; - } - - slide.direction = direction; - slide.active = true; - if (this._currentSlide) { - this._currentSlide.direction = direction; - this._currentSlide.active = false; - } - - this._currentSlide = slide; - - this.onSlideChanged.emit({ carousel: this, slide }); - this._restartInterval(); - } - /** - *@hidden - */ private _resetInterval() { if (this._lastInterval) { clearInterval(this._lastInterval); this._lastInterval = null; } } - /** - *@hidden - */ + private _restartInterval() { this._resetInterval(); @@ -481,101 +788,88 @@ export class IgxCarouselComponent implements OnDestroy { */ @HostListener('keydown.arrowright') public onKeydownArrowRight() { - this.next(); - requestAnimationFrame(() => this.nativeElement.focus()); + if (this.keyboardSupport) { + event.preventDefault(); + this.next(); + requestAnimationFrame(() => this.nativeElement.focus()); + } } /** *@hidden */ @HostListener('keydown.arrowleft') public onKeydownArrowLeft() { - this.prev(); - requestAnimationFrame(() => this.nativeElement.focus()); + if (this.keyboardSupport) { + event.preventDefault(); + this.prev(); + requestAnimationFrame(() => this.nativeElement.focus()); + } } -} -/** - * A slide component that usually holds an image and/or a caption text. - * IgxSlideComponent is usually a child component of an IgxCarouselComponent. - * - * ``` - * - * - * - * ``` - * - * @export - */ -@Component({ - selector: 'igx-slide', - templateUrl: 'slide.component.html' -}) + /** @hidden */ + @HostListener('keydown.Tab') + public onTab() { + if (this.isPlaying) { + this.stop(); + } else { + this.play(); + } + } -export class IgxSlideComponent implements OnInit, OnDestroy { - private _active; - /** - * Gets/sets the `index` of the slide inside the carousel. - * ```html - * - * - * - * ``` - * @memberOf IgxSlideComponent + /** + *@hidden */ - @Input() public index: number; + @HostListener('keydown.home') + public onKeydownHome() { + if (this.keyboardSupport && this.slides.length > 0) { + event.preventDefault(); + this.slides.first.active = true; + requestAnimationFrame(() => this.nativeElement.focus()); + } + } - /** - * Gets/sets the target `direction` for the slide. - * ```html - * - * - * - * ``` - * @memberOf IgxSlideComponent +/** + *@hidden */ - @Input() public direction: Direction; + @HostListener('keydown.end') + public onKeydownEnd() { + if (this.keyboardSupport && this.slides.length > 0) { + event.preventDefault(); + this.slides.last.active = true; + requestAnimationFrame(() => this.nativeElement.focus()); + } + } + /** - * Gets/sets the `active` state of the slide. - * ```html - * - * - * - * ``` - * - * Two-way data binding. - * ```html - * - * - * - * ``` - * @memberof IgxSlideComponent + * @hidden */ - @HostBinding('class.active') - @Input() - public get active(): boolean { - return this._active; - } - public set active(value) { - this._active = value; - this.activeChange.emit(this._active); + @HostListener('mouseenter') + public onMouseEnter() { + this.stop(); } + /** - *@hidden + * @hidden */ - @Output() public activeChange = new EventEmitter(); + @HostListener('mouseleave') + public onMouseLeave() { + this.play(); + } - constructor(private carousel: IgxCarouselComponent) { } /** - *@hidden + * @hidden */ - public ngOnInit() { - this.carousel.add(this); + @HostListener('swipeleft') + public swipeLeft() { + this.next(); } + /** - *@hidden - */ - public ngOnDestroy() { - this.carousel.remove(this); + * @hidden + */ + @HostListener('swiperight') + public swipeRight() { + this.prev(); } } @@ -588,8 +882,8 @@ export interface ISlideEventArgs extends IBaseEventArgs { * @hidden */ @NgModule({ - declarations: [IgxCarouselComponent, IgxSlideComponent], - exports: [IgxCarouselComponent, IgxSlideComponent], + declarations: [IgxCarouselComponent, IgxSlideComponent, IgxCarouselIndicatorDirective], + exports: [IgxCarouselComponent, IgxSlideComponent, IgxCarouselIndicatorDirective], imports: [CommonModule, IgxIconModule] }) export class IgxCarouselModule { diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.directives.ts b/projects/igniteui-angular/src/lib/carousel/carousel.directives.ts new file mode 100644 index 00000000000..db5c492da1d --- /dev/null +++ b/projects/igniteui-angular/src/lib/carousel/carousel.directives.ts @@ -0,0 +1,7 @@ +import { Directive, TemplateRef } from '@angular/core'; + +@Directive({ + selector: '[igxCarouselIndicator]' +}) +export class IgxCarouselIndicatorDirective { +} diff --git a/projects/igniteui-angular/src/lib/carousel/slide.component.html b/projects/igniteui-angular/src/lib/carousel/slide.component.html index 590ce8f4071..6dbc7430638 100644 --- a/projects/igniteui-angular/src/lib/carousel/slide.component.html +++ b/projects/igniteui-angular/src/lib/carousel/slide.component.html @@ -1,10 +1 @@ -
- -
+ diff --git a/projects/igniteui-angular/src/lib/carousel/slide.component.ts b/projects/igniteui-angular/src/lib/carousel/slide.component.ts new file mode 100644 index 00000000000..faaeb75086f --- /dev/null +++ b/projects/igniteui-angular/src/lib/carousel/slide.component.ts @@ -0,0 +1,158 @@ +import { Component, OnDestroy, Input, HostBinding, Output, EventEmitter, ElementRef, ChangeDetectorRef } from '@angular/core'; +import { Subject } from 'rxjs'; + +export enum Direction { NONE, NEXT, PREV } + +/** + * A slide component that usually holds an image and/or a caption text. + * IgxSlideComponent is usually a child component of an IgxCarouselComponent. + * + * ``` + * + * + * + * ``` + * + * @export + */ +@Component({ + selector: 'igx-slide', + templateUrl: 'slide.component.html' +}) + +export class IgxSlideComponent implements OnDestroy { + private _active = false; + private _destroy$ = new Subject(); + /** + * Gets/sets the `index` of the slide inside the carousel. + * ```html + * + * + * + * ``` + * @memberOf IgxSlideComponent + */ + @Input() public index: number; + + /** + * Gets/sets the target `direction` for the slide. + * ```html + * + * + * + * ``` + * @memberOf IgxSlideComponent + */ + @Input() public direction: Direction; + + /** + * Returns the `tabIndex` of the slide component. + * ```typescript + * let tabIndex = this.carousel.tabIndex; + * ``` + * @memberof IgxSlideComponent + */ + @HostBinding('attr.tabindex') + get tabIndex() { + return this.active ? 0 : null; + } + + /** + * Returns the `aria-selected` of the slide. + * + * ```typescript + * let slide = this.slide.ariaSelected; + * ``` + * + */ + @HostBinding('attr.aria-selected') + public get ariaSelected(): boolean { + return this.active; + } + + /** + * Returns the `aria-live` of the slide. + * + * ```typescript + * let slide = this.slide.ariaLive; + * ``` + * + */ + @HostBinding('attr.aria-selected') + public get ariaLive() { + return this.active ? 'polite' : null; + } + + /** + * Returns the class of the slide component. + * ```typescript + * let class = this.slide.cssClass; + * ``` + * @memberof IgxSlideComponent + */ + @HostBinding('class.igx-slide') + public cssClass = 'igx-slide'; + + /** + * Gets/sets the `active` state of the slide. + * ```html + * + * + * + * ``` + * + * Two-way data binding. + * ```html + * + * + * + * ``` + * @memberof IgxSlideComponent + */ + @HostBinding('class.igx-slide--current') + @Input() + public get active(): boolean { + return this._active; + } + + public set active(value) { + this._active = !!value; + this.activeChange.emit(this._active); + } + + @HostBinding('class.igx-slide--previous') + @Input() public previous = false; + + /** + *@hidden + */ + @Output() public activeChange = new EventEmitter(); + + constructor(private elementRef: ElementRef) { } + + /** + * Returns a reference to the carousel element in the DOM. + * ```typescript + * let nativeElement = this.slide.nativeElement; + * ``` + * @memberof IgxSlideComponent + */ + public get nativeElement() { + return this.elementRef.nativeElement; + } + + /** + * @hidden + */ + public get isDestroyed(): Subject { + return this._destroy$; + } + + /** + * @hidden + */ + public ngOnDestroy() { + this._destroy$.next(true); + this._destroy$.complete(); + } +} diff --git a/projects/igniteui-angular/src/lib/core/i18n/carousel-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/carousel-resources.ts new file mode 100644 index 00000000000..3ddc7899040 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/i18n/carousel-resources.ts @@ -0,0 +1,7 @@ +export interface ICarouselResourceStrings { + igx_carousel_of?: string; +} + +export const CarouselResourceStringsEN: ICarouselResourceStrings = { + igx_carousel_of: 'of' +}; diff --git a/projects/igniteui-angular/src/lib/core/i18n/resources.ts b/projects/igniteui-angular/src/lib/core/i18n/resources.ts index 17e101a2fb4..8795245e8f0 100644 --- a/projects/igniteui-angular/src/lib/core/i18n/resources.ts +++ b/projects/igniteui-angular/src/lib/core/i18n/resources.ts @@ -2,8 +2,9 @@ import { IGridResourceStrings, GridResourceStringsEN } from './grid-resources'; import { ITimePickerResourceStrings, TimePickerResourceStringsEN } from './time-picker-resources'; import { PaginatorResourceStringsEN } from './paginator-resources'; import { cloneValue } from '../utils'; +import { ICarouselResourceStrings, CarouselResourceStringsEN } from './carousel-resources'; -export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings {} +export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings, ICarouselResourceStrings {} /** * @hidden @@ -11,7 +12,8 @@ export interface IResourceStrings extends IGridResourceStrings, ITimePickerResou export const CurrentResourceStrings = { GridResStrings: cloneValue(GridResourceStringsEN), TimePickerResStrings: cloneValue(TimePickerResourceStringsEN), - PaginatorResStrings: cloneValue(PaginatorResourceStringsEN) + PaginatorResStrings: cloneValue(PaginatorResourceStringsEN), + CarouselResStrings: cloneValue(CarouselResourceStringsEN), }; function updateResourceStrings(currentStrings: IResourceStrings, newStrings: IResourceStrings ) { 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 2839f9842aa..16acc4c6a70 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 @@ -5,6 +5,55 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// + +/// @access private +@mixin _igx-carousel-indicators-partial { + @include b(igx-carousel-indicators) { + @extend %igx-carousel-indicators !optional; + + @include e(indicator) { + @extend %igx-carousel-indicator !optional; + } + + @include m(top) { + @extend %igx-carousel-indicators !optional; + @extend %igx-carousel-indicators--top !optional; + } + + @include m(bottom) { + @extend %igx-carousel-indicators !optional; + @extend %igx-carousel-indicators--bottom !optional; + } + } +} + +/// @access private +@mixin _igx-carousel-naviation-partial { + @include b(igx-nav-dot) { + @extend %igx-nav-dot !optional; + + @include m(active) { + @extend %igx-nav-dot--active !optional; + } + } +} + +/// @access private +@mixin _igx-carousel-slide-partial { + @include b(igx-slide) { + @extend %igx-carousel-slide !optional; + + @include m(current) { + @extend %igx-carousel-slide--current !optional; + } + + @include m(previous) { + @extend %igx-carousel-slide--previous !optional; + } + } +} + +/// @access public @include b(igx-carousel) { $this: bem--selector-to-string(&); @include register-component(str-slice($this, 2, -1)); @@ -15,8 +64,8 @@ @extend %igx-carousel-slide-wrapper !optional; } - @include e(indicators) { - @extend %igx-carousel-indicators !optional; + @include e(label) { + @extend %igx-carousel-indicators-label !optional; } @include e(arrow) { @@ -40,8 +89,9 @@ @extend %igx-carousel-arrow--hover !optional; } } -} -@include b(igx-slide) { - @extend %igx-carousel-slide !optional; + @include _igx-carousel-indicators-partial(); + @include _igx-carousel-naviation-partial(); + @include _igx-carousel-slide-partial(); } + 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 36029929928..88bdf1ffe95 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 @@ -7,6 +7,7 @@ /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $slide-background [null] - The slide background color. /// @param {Color} $button-background [null] - The previous/next buttons idle background color. /// @param {Color} $button-hover-background [null] - The previous/next buttons hover background color. /// @param {Color} $button-arrow-color [null] - The previous/next buttons idle arrow color. @@ -42,6 +43,8 @@ $border-radius: null, $button-shadow: null, + $slide-background: null, + $button-background: null, $button-hover-background: null, $button-arrow-color: null, @@ -83,6 +86,8 @@ name: $name, palette: $palette, + slide-background: $slide-background, + border-radius: $border-radius, button-shadow: $button-shadow, @@ -129,20 +134,6 @@ height: 100%; align-items: center; flex-flow: column nowrap; - transform-style: preserve-3d; - } - - %igx-carousel-slide-wrapper { - position: relative; - width: 100%; - height: inherit; - overflow: hidden; - outline-style: none; - border-radius: --var($theme, 'border-radius'); - - .active { - display: block; - } } %igx-carousel-arrow { @@ -162,6 +153,7 @@ color: --var($theme, 'button-arrow-color'); background: --var($theme, 'button-background'); box-shadow: --var($theme, 'button-shadow'); + z-index: 3; span { display: flex; @@ -192,14 +184,14 @@ } %igx-carousel-indicators { + position: absolute; display: flex; - margin: $carousel-indicators-margin; justify-content: center; align-items: center; - position: absolute; + margin: $carousel-indicators-margin; + padding: $carousel-indicators-padding; list-style: none; z-index: 10; - bottom: 0; #{$left}: 50%; @include if-ltr() { @@ -209,66 +201,103 @@ @include if-rtl() { transform: translateX(50%); } + } - padding: $carousel-indicators-padding; + %igx-carousel-indicators--bottom { + bottom: 0; + } - li { - margin: $carousel-indicator-margin; - position: relative; - width: 12px; - height: 12px; - text-indent: -9999px; - cursor: pointer; - border: $indicator-border-style; - border-color: --var($theme, 'indicator-border-color'); - border-radius: 50%; - transition: all .15s $ease-out-quad; - box-shadow: igx-elevation($elevations, 1); - opacity: .7; - - &::after { - content: ''; - position: absolute; - top: 1px; - bottom: 1px; - #{$left}: 1px; - #{$right}: 1px; - border-radius: inherit; - background: --var($theme, 'indicator-dot-color'); - @include animation('scale-out-center' .15s $ease-out-quad forwards); - opacity: 0; - } + %igx-carousel-indicators--top { + top: 0; + } - &.active { - border: $indicator-border-style; - border-color: --var($theme, 'indicator-active-border-color'); - opacity: 1; - } + %igx-carousel-indicators-label { + align-items: center; + // TODO: this should be wrapped in carousel typogrpahy + font-size: rem(16px); + } - &.active::after { - opacity: 1; - @include animation('scale-in-center' .15s $ease-out-quad forwards); - } + %igx-carousel-indicator { + display: flex; + align-items: center; + justify-content: center; + margin: $carousel-indicator-margin; + cursor: pointer; + } - &:hover { - opacity: 1; - } + %igx-nav-dot { + position: relative; + width: 12px; + height: 12px; + text-indent: -9999px; + border: $indicator-border-style; + border-color: --var($theme, 'indicator-border-color'); + border-radius: 50%; + transition: all .15s $ease-out-quad; + box-shadow: igx-elevation($elevations, 1); + opacity: .7; + + &::after { + @include animation('scale-out-center' .15s $ease-out-quad forwards); + content: ''; + position: absolute; + top: 1px; + bottom: 1px; + #{$left}: 1px; + #{$right}: 1px; + border-radius: inherit; + background: --var($theme, 'indicator-dot-color'); + opacity: 0; + } + + &:hover { + opacity: 1; } } + %igx-nav-dot--active { + border: $indicator-border-style; + border-color: --var($theme, 'indicator-active-border-color'); + opacity: 1; + + &::after { + opacity: 1; + @include animation('scale-in-center' .15s $ease-out-quad forwards); + } + } + + %igx-carousel-slide-wrapper { + position: relative; + width: 100%; + height: inherit; + overflow: hidden; + outline-style: none; + border-radius: --var($theme, 'border-radius'); + } + %igx-carousel-slide { - display: none; + position: absolute; width: 100%; height: 100%; - position: relative; - transition: .5s ease-in-out left; - backface-visibility: hidden; - perspective: 1000px; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + background: --var($theme, 'slide-background'); + } + + %igx-carousel-slide--previous { + z-index: 1; + } + + %igx-carousel-slide--current { + z-index: 2; } %igx-carousel-slide img { width: inherit; height: inherit; - transform: scale(1.1); + object-fit: cover; } } diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss index 345ca2d9860..6a7ff4bbb42 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss @@ -7,9 +7,11 @@ /// Generates the base dark carousel schema. /// @type {Map} +/// @prop {Color} slide-background [#222] - The slide background color. /// @prop {Color} button-background [#222] - The previous/next buttons idle background color. /// @prop {Color} button-hover-background [#222] - The previous/next buttons hover background color. $_base-dark-carousel: ( + slide-background: #222, button-background: #222, button-hover-background: #222, ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss index 7c6e5e2e542..63870ab21c9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss @@ -9,6 +9,7 @@ /// Generates a light carousel schema. /// @type {Map} +/// @prop {Color} slide-background [#fff] - The slide background color. /// @prop {Color} button-background [#fff] - The previous/next buttons idle background color. /// @prop {Color} button-hover-background [#fff] - The previous/next buttons hover background color. /// @prop {Map} button-arrow-color [igx-color: ('grays', 700)] - The previous/next buttons idle arrow color. @@ -25,6 +26,8 @@ $_light-carousel: extend( $_default-shape-carousel, $_default-elevation-carousel, ( + slide-background: #fff, + button-background: #fff, button-hover-background: #fff, diff --git a/projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts index 11f4bc3f5c0..64f9b2806e1 100644 --- a/projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts @@ -240,4 +240,12 @@ export class UIInteractions { y: elementRect.bottom + vAlign * elementRect.height }; } + + public static hoverElement(element: HTMLElement, bubbles: boolean = false) { + element.dispatchEvent(new MouseEvent('mouseenter', { bubbles: bubbles })); + } + + public static unhoverElement(element: HTMLElement, bubbles: boolean = false) { + element.dispatchEvent(new MouseEvent('mouseleave', { bubbles: bubbles })); + } } diff --git a/src/app/carousel/carousel.sample.html b/src/app/carousel/carousel.sample.html index 8b56bbf1d3c..c43e582e77a 100644 --- a/src/app/carousel/carousel.sample.html +++ b/src/app/carousel/carousel.sample.html @@ -1,18 +1,40 @@
- Displays a collection of slides or page-based interfaces. It can be used as a separate full screen element or inside another + Displays a collection of slides or page-based interfaces. It can be used as a separate full screen element or + inside another component.

Desktop

- - - - - + + navigation + keyboardSupport + loop + + + + {{ item }} + + + + + + +
+ + + + + + + + + + +
-
+
\ No newline at end of file diff --git a/src/app/carousel/carousel.sample.ts b/src/app/carousel/carousel.sample.ts index f083cb01da5..f6d52f23c90 100644 --- a/src/app/carousel/carousel.sample.ts +++ b/src/app/carousel/carousel.sample.ts @@ -1,26 +1,47 @@ -import { Component } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; +import { IgxCarouselComponent, CarouselIndicatorsOrientation } from 'igniteui-angular'; @Component({ selector: 'app-carousel-sample', templateUrl: 'carousel.sample.html' }) export class CarouselSampleComponent { - + @ViewChild('car', { static: true }) car: IgxCarouselComponent; + animationModes = ['none', 'slide', 'fade']; slides = []; interval = 3000; pause = true; loop = true; constructor() { - this.addNewSlide(); + this.addNewSlide(); } addNewSlide() { this.slides.push( {image: 'assets/images/carousel/slide1@x2.jpg'}, {image: 'assets/images/carousel/slide2@x2.jpg'}, - {image: 'assets/images/carousel/slide3@x2.jpg'}, - {image: 'assets/images/carousel/slide4@x2.jpg'} + {image: 'assets/images/carousel/slide3@x2.jpg'} ); } + + public changeSlides() { + this.slides.push({image: 'assets/images/carousel/slide4@x2.jpg'}); + } + + public changeSlidesRemove() { + this.slides = this.slides.slice(1); + } + + changeOrientation() { + if (this.car.indicatorsOrientation === CarouselIndicatorsOrientation.top) { + this.car.indicatorsOrientation = CarouselIndicatorsOrientation.bottom; + } else { + this.car.indicatorsOrientation = CarouselIndicatorsOrientation.top; + } + } + + public onAnimationSelection(event) { + this.car.animationType = event.newSelection.element.nativeElement.textContent.trim(); + } } From 063df28d1bcb77c700a939f48aad3779082e3ebe Mon Sep 17 00:00:00 2001 From: Vasil Mihalkov Date: Wed, 13 Nov 2019 13:25:22 +0200 Subject: [PATCH 17/21] fix(col): Added RowIslApiSer to HGrid #6004 --- .../grids/hierarchical-grid/hierarchical-grid.component.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index f2af5868c63..87525cc133e 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -44,6 +44,7 @@ import { IgxOverlayService } from '../../services/index'; import { IgxColumnResizingService } from '../resizing/resizing.service'; import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service'; import { GridType } from '../common/grid.interface'; +import { IgxRowIslandAPIService } from './row-island-api.service'; let NEXT_ID = 0; @@ -65,7 +66,8 @@ export interface HierarchicalStateRecord { IgxFilteringService, IgxHierarchicalGridNavigationService, IgxForOfSyncService, - IgxForOfScrollSyncService + IgxForOfScrollSyncService, + IgxRowIslandAPIService ] }) export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective From 38ee97c14bada25f195ad9c502debd120fb382b0 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 13 Nov 2019 14:41:52 +0200 Subject: [PATCH 18/21] chore(*): Adding handling for scenario where column is initially pinned and is then unpinned and needs to go to the initial index of the columnsList. --- .../igniteui-angular/src/lib/grids/columns/column.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 79466ff4df9..8bb31bbde7a 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -547,6 +547,7 @@ export class IgxColumnComponent implements AfterContentInit { /* No grid/width available at initialization. `initPinning` in the grid will re-init the group (if present) */ + this._unpinnedIndex = this.grid.columns.filter(x => !x.pinned).indexOf(this); this._pinned = value; this.pinnedChange.emit(this._pinned); } From d21c5d67fb30cb1c7bf5d32177e00b9042086e6c Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 13 Nov 2019 14:48:51 +0200 Subject: [PATCH 19/21] chore(*): Fixing lint. --- projects/igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 92b6113c80e..7734209885a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3748,7 +3748,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements if (this.pinnedColumns.indexOf(column) === -1 && this.pinnedColumns.indexOf(dropTarget) === -1) { list = this._unpinnedColumns; - } else { + } else { list = this._pinnedColumns; } From e22088b8f42e9fc67b9591e7b06f37ba926b9a42 Mon Sep 17 00:00:00 2001 From: Plamena Miteva Date: Wed, 13 Nov 2019 15:06:22 +0200 Subject: [PATCH 20/21] feat(date-picker, time-picker, select): implement setDisableState #6025 (#6154) --- .../date-picker/date-picker.component.spec.ts | 65 +++++++- .../lib/date-picker/date-picker.component.ts | 5 + .../src/lib/select/select.component.spec.ts | 147 ++++++++++-------- .../src/lib/select/select.component.ts | 5 + .../time-picker/time-picker.component.spec.ts | 68 +++++++- .../lib/time-picker/time-picker.component.ts | 5 + 6 files changed, 227 insertions(+), 68 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index 68ca24dae43..1aab9fa813e 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts @@ -1,6 +1,6 @@ import { Component, ViewChild } from '@angular/core'; import { async, fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, FormGroup, FormBuilder, FormControl, ReactiveFormsModule} from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxDatePickerComponent, IgxDatePickerModule } from './date-picker.component'; @@ -30,9 +30,10 @@ describe('IgxDatePicker', () => { IgxDatePickerEditableComponent, IgxDatePickerCustomizedComponent, IgxDropDownDatePickerRetemplatedComponent, - IgxDatePickerOpeningComponent + IgxDatePickerOpeningComponent, + IgxDatePickerReactiveFormComponent ], - imports: [IgxDatePickerModule, FormsModule, NoopAnimationsModule, IgxInputGroupModule, IgxCalendarModule, + imports: [IgxDatePickerModule, FormsModule, ReactiveFormsModule, NoopAnimationsModule, IgxInputGroupModule, IgxCalendarModule, IgxButtonModule, IgxTextSelectionModule] }) .compileComponents(); @@ -1114,6 +1115,42 @@ describe('IgxDatePicker', () => { expect(input.value.substring(input.selectionStart, input.selectionEnd)).toEqual(input.value); })); }); + + describe('Reactive form', () => { + let fixture: ComponentFixture; + let datePicker: IgxDatePickerComponent; + + beforeEach(() => { + fixture = TestBed.createComponent(IgxDatePickerReactiveFormComponent); + datePicker = fixture.componentInstance.datePicker; + fixture.detectChanges(); + }); + + // Bug #6025 Date picker does not disable in reactive form + it('Should disable when form is disabled', fakeAsync(() => { + fixture.detectChanges(); + const formGroup: FormGroup = fixture.componentInstance.reactiveForm; + const inputGroup = fixture.debugElement.query(By.css('.igx-input-group')); + + inputGroup.nativeElement.click(); + tick(); + fixture.detectChanges(); + expect(datePicker.collapsed).toBeFalsy(); + + datePicker.closeCalendar(); + fixture.detectChanges(); + + formGroup.disable(); + tick(); + fixture.detectChanges(); + + inputGroup.nativeElement.click(); + tick(); + fixture.detectChanges(); + const dateDropDown = document.getElementsByClassName('igx-date-picker--dropdown'); + expect(dateDropDown.length).toEqual(0); + })); + }); }); @Component({ @@ -1259,3 +1296,25 @@ export class IgxDatePickerCustomizedComponent { export class IgxDatePickerOpeningComponent { @ViewChild(IgxDatePickerComponent, { static: true }) public datePicker: IgxDatePickerComponent; } + +@Component({ + template: ` +
+

+ +

+
+` +}) +class IgxDatePickerReactiveFormComponent { + @ViewChild('datePickerReactive', { read: IgxDatePickerComponent, static: true }) + public datePicker: IgxDatePickerComponent; + reactiveForm: FormGroup; + + constructor(fb: FormBuilder) { + this.reactiveForm = fb.group({ + datePickerReactive: new FormControl(''), + }); + } + onSubmitReactive() { } +} diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index 562c45a00d3..ffdbdf835be 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -831,6 +831,11 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor */ public registerOnTouched(fn: () => void) { this._onTouchedCallback = fn; } + /** + *@hidden + */ + public setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; } + /** @hidden */ public getEditElement() { const inputElement = this.editableInput || this.readonlyInput || this.input; diff --git a/projects/igniteui-angular/src/lib/select/select.component.spec.ts b/projects/igniteui-angular/src/lib/select/select.component.spec.ts index 63ab85cca3a..c5041a16583 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.spec.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.spec.ts @@ -1,5 +1,5 @@ import { IgxInputState } from './../directives/input/input.directive'; -import { Component, ViewChild, DebugElement, OnInit } from '@angular/core'; +import { Component, ViewChild, DebugElement } from '@angular/core'; import { async, TestBed, tick, fakeAsync } from '@angular/core/testing'; import { FormsModule, FormGroup, FormBuilder, FormControl, Validators, ReactiveFormsModule, NgForm } from '@angular/forms'; import { By } from '@angular/platform-browser'; @@ -7,14 +7,13 @@ import { IgxDropDownModule } from '../drop-down/index'; import { IgxIconModule } from '../icon/index'; import { IgxInputGroupModule } from '../input-group/index'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { IgxSelectComponent} from './select.component'; +import { IgxSelectComponent } from './select.component'; import { IgxSelectItemComponent } from './select-item.component'; import { ISelectionEventArgs } from '../drop-down/drop-down.common'; -import { IgxToggleModule, IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive'; +import { IgxToggleModule } from '../directives/toggle/toggle.directive'; import { configureTestSuite } from '../test-utils/configure-suite'; import { HorizontalAlignment, VerticalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy } from '../services'; import { IgxSelectModule } from './select.module'; -import { wait } from '../test-utils/ui-interactions.spec'; const CSS_CLASS_INPUT_GROUP = 'igx-input-group'; const CSS_CLASS_INPUT = 'igx-input-group__input'; @@ -604,6 +603,32 @@ describe('igxSelect', () => { inputGroupWithRequiredAsterisk = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED)); expect(inputGroupWithRequiredAsterisk).toBeDefined(); })); + + // Bug #6025 Select does not disable in reactive form + it('Should disable when form is disabled', fakeAsync(() => { + const fix = TestBed.createComponent(IgxSelectReactiveFormComponent); + fix.detectChanges(); + const formGroup: FormGroup = fix.componentInstance.reactiveForm; + const selectComp = fix.componentInstance.select; + const inputGroup = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP)); + + inputGroup.nativeElement.click(); + tick(); + fix.detectChanges(); + expect(selectComp.collapsed).toBeFalsy(); + + selectComp.close(); + fix.detectChanges(); + + formGroup.disable(); + tick(); + fix.detectChanges(); + + inputGroup.nativeElement.click(); + tick(); + fix.detectChanges(); + expect(selectComp.collapsed).toBeTruthy(); + })); }); describe('Selection tests: ', () => { describe('Using simple select component', () => { @@ -1181,70 +1206,70 @@ describe('igxSelect', () => { })); it('should populate the input with the specified selected item text @input, instead of the selected item element innerText', - fakeAsync(() => { - let selectedItemIndex = 1; - const groupIndex = 0; - const groupElement = selectList.children[groupIndex]; - const itemElementToSelect = groupElement.children[selectedItemIndex].nativeElement; - - const checkInputValue = function () { - expect(select.selectedItem.text).toEqual(select.input.value); - expect(inputElement.nativeElement.value.toString().trim()).toEqual(select.selectedItem.text); - }; + fakeAsync(() => { + let selectedItemIndex = 1; + const groupIndex = 0; + const groupElement = selectList.children[groupIndex]; + const itemElementToSelect = groupElement.children[selectedItemIndex].nativeElement; + + const checkInputValue = function () { + expect(select.selectedItem.text).toEqual(select.input.value); + expect(inputElement.nativeElement.value.toString().trim()).toEqual(select.selectedItem.text); + }; - // There is not a selected item initially - const selectedItems = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_SELECTED_ITEM)); - expect(selectedItems.length).toEqual(0); - expect(select.value).toBeUndefined(); - expect(select.input.value).toEqual(''); - expect(inputElement.nativeElement.value).toEqual(''); + // There is not a selected item initially + const selectedItems = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_SELECTED_ITEM)); + expect(selectedItems.length).toEqual(0); + expect(select.value).toBeUndefined(); + expect(select.input.value).toEqual(''); + expect(inputElement.nativeElement.value).toEqual(''); - // Select item - mouse click - select.toggle(); - tick(); - fixture.detectChanges(); - itemElementToSelect.click(); - fixture.detectChanges(); - checkInputValue(); + // Select item - mouse click + select.toggle(); + tick(); + fixture.detectChanges(); + itemElementToSelect.click(); + fixture.detectChanges(); + checkInputValue(); - // Select item - selectItem method - selectedItemIndex = 2; - select.selectItem(select.items[selectedItemIndex]); - tick(); - fixture.detectChanges(); - select.toggle(); - tick(); - fixture.detectChanges(); - checkInputValue(); + // Select item - selectItem method + selectedItemIndex = 2; + select.selectItem(select.items[selectedItemIndex]); + tick(); + fixture.detectChanges(); + select.toggle(); + tick(); + fixture.detectChanges(); + checkInputValue(); - // Select item - item selected property - selectedItemIndex = 3; - select.items[selectedItemIndex].selected = true; - fixture.detectChanges(); - checkInputValue(); - })); + // Select item - item selected property + selectedItemIndex = 3; + select.items[selectedItemIndex].selected = true; + fixture.detectChanges(); + checkInputValue(); + })); it('Should populate the input with the selected item element innerText, when text @Input is undefined(not set)', - fakeAsync(() => { - const selectedItemIndex = 2; - // const groupIndex = 0; - // const groupElement = selectList.children[groupIndex]; - // const itemElementToSelect = groupElement.children[selectedItemIndex].nativeElement; - const expectedInputText = 'Paris star'; - - const checkInputValue = function () { - expect(select.selectedItem.itemText).toEqual(expectedInputText); - expect(select.selectedItem.itemText).toEqual(select.input.value); - expect(inputElement.nativeElement.value.toString().trim()).toEqual(select.selectedItem.itemText); - }; + fakeAsync(() => { + const selectedItemIndex = 2; + // const groupIndex = 0; + // const groupElement = selectList.children[groupIndex]; + // const itemElementToSelect = groupElement.children[selectedItemIndex].nativeElement; + const expectedInputText = 'Paris star'; + + const checkInputValue = function () { + expect(select.selectedItem.itemText).toEqual(expectedInputText); + expect(select.selectedItem.itemText).toEqual(select.input.value); + expect(inputElement.nativeElement.value.toString().trim()).toEqual(select.selectedItem.itemText); + }; - // Select item - no select-item text. Should set item;s element innerText as input value. - (select.items[selectedItemIndex] as IgxSelectItemComponent).text = undefined; - select.items[selectedItemIndex].selected = true; - fixture.detectChanges(); - tick(); - checkInputValue(); - })); + // Select item - no select-item text. Should set item;s element innerText as input value. + (select.items[selectedItemIndex] as IgxSelectItemComponent).text = undefined; + select.items[selectedItemIndex].selected = true; + fixture.detectChanges(); + tick(); + checkInputValue(); + })); }); }); describe('Grouped items tests: ', () => { diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts index a667ef364d4..5bcf9849925 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.ts @@ -218,6 +218,11 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec /** @hidden @internal */ public registerOnTouched(fn: any): void { } + /** @hidden @internal */ + public setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + } + /** @hidden @internal */ public getEditElement(): HTMLElement { return this.input.nativeElement; diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts index 1a5563acf78..e707dda1a45 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts @@ -1,6 +1,6 @@ import { Component, ViewChild } from '@angular/core'; -import { async, TestBed, fakeAsync, tick } from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; +import { async, TestBed, fakeAsync, tick, ComponentFixture } from '@angular/core/testing'; +import { FormsModule, FormGroup, FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxInputDirective } from '../directives/input/input.directive'; @@ -10,7 +10,7 @@ import { IgxInputGroupModule } from '../input-group'; import { configureTestSuite } from '../test-utils/configure-suite'; import { InteractionMode } from '../core/enums'; import { IgxIconModule } from '../icon'; -import { IgxOverlayOutletDirective, IgxToggleModule } from '../directives/toggle/toggle.directive'; +import { IgxToggleModule } from '../directives/toggle/toggle.directive'; describe('IgxTimePicker', () => { configureTestSuite(); @@ -30,11 +30,13 @@ describe('IgxTimePicker', () => { IgxTimePickerDropDownSingleHourComponent, IgxTimePickerDropDownNoValueComponent, IgxTimePickerRetemplatedDropDownComponent, - IgxTimePickerWithOutletComponent + IgxTimePickerWithOutletComponent, + IgxTimePickerReactiveFormComponent ], imports: [ IgxTimePickerModule, FormsModule, + ReactiveFormsModule, NoopAnimationsModule, IgxInputGroupModule, IgxIconModule, @@ -1799,6 +1801,42 @@ describe('IgxTimePicker', () => { expect(headerAmPm.nativeElement.innerText).toEqual('AM'); })); }); + + describe('Reactive form', () => { + let fixture: ComponentFixture; + let timePicker: IgxTimePickerComponent; + + beforeEach(() => { + fixture = TestBed.createComponent(IgxTimePickerReactiveFormComponent); + timePicker = fixture.componentInstance.timePicker; + fixture.detectChanges(); + }); + + // Bug #6025 Date picker does not disable in reactive form + it('Should disable when form is disabled', fakeAsync(() => { + fixture.detectChanges(); + const formGroup: FormGroup = fixture.componentInstance.reactiveForm; + const timeIcon = fixture.debugElement.query(By.css('.igx-icon')); + + timeIcon.nativeElement.click(); + tick(); + fixture.detectChanges(); + const timeDropDown = fixture.debugElement.query(By.css('.igx-time-picker--dropdown')); + expect(timeDropDown.properties.hidden).toBeFalsy(); + + timePicker.close(); + fixture.detectChanges(); + + formGroup.disable(); + tick(); + fixture.detectChanges(); + + timeIcon.nativeElement.click(); + tick(); + fixture.detectChanges(); + expect(timeDropDown.properties).toEqual({}); + })); + }); }); @Component({ @@ -1995,6 +2033,28 @@ export class IgxTimePickerWithOutletComponent { @ViewChild('timepicker', { static: true }) public timepicker: IgxTimePickerComponent; } +@Component({ + template: ` +
+

+ +

+
+` +}) +class IgxTimePickerReactiveFormComponent { + @ViewChild('timePickerReactive', { read: IgxTimePickerComponent, static: true }) + public timePicker: IgxTimePickerComponent; + reactiveForm: FormGroup; + + constructor(fb: FormBuilder) { + this.reactiveForm = fb.group({ + timePickerReactive: new FormControl(''), + }); + } + onSubmitReactive() { } +} + // helper functions function findByInnerText(collection, searchText) { for (const element of collection) { diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts index ec35634155a..64d623c6172 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts @@ -1338,6 +1338,11 @@ export class IgxTimePickerComponent implements */ public registerOnChange(fn: (_: Date) => void) { this._onChangeCallback = fn; } + /** + *@hidden + */ + public setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; } + /** * @hidden */ From ebc1f86cee2fa39b5159666eefca5407eaeb3370 Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Mon, 18 Nov 2019 10:31:26 +0200 Subject: [PATCH 21/21] fix(carousel): When carousel is paused, do not paly on mauseleave #6167 (#6168) --- .../lib/carousel/carousel.component.spec.ts | 96 ++++++++++++++----- .../src/lib/carousel/carousel.component.ts | 74 ++++++++------ src/app/carousel/carousel.sample.html | 8 +- src/app/carousel/carousel.sample.ts | 8 ++ 4 files changed, 129 insertions(+), 57 deletions(-) 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 3f0529ca742..85d30855bba 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts @@ -4,7 +4,8 @@ import { TestBed, ComponentFixture, fakeAsync, - tick + tick, + flush } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { @@ -19,6 +20,8 @@ import { configureTestSuite } from '../test-utils/configure-suite'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxSlideComponent } from './slide.component'; +declare var Simulator: any; + describe('Carousel', () => { configureTestSuite(); let fixture; @@ -427,7 +430,7 @@ describe('Carousel', () => { expect(carousel.onSlideChanged.emit).toHaveBeenCalledTimes(1); }); - it('should stop/play on mouse enter/leave and on tab key', () => { + it('should stop/play on mouse enter/leave ', () => { carousel.interval = 1000; carousel.play(); fixture.detectChanges(); @@ -450,17 +453,64 @@ describe('Carousel', () => { expect(carousel.onCarouselPlaying.emit).toHaveBeenCalledTimes(1); expect(carousel.onCarouselPaused.emit).toHaveBeenCalledTimes(1); - UIInteractions.triggerKeyDownEvtUponElem('Tab', carousel.nativeElement, true); + // When the carousel is stopped mouseleave does not start playing + carousel.stop(); fixture.detectChanges(); expect(carousel.isPlaying).toBeFalsy(); + expect(carousel.onCarouselPlaying.emit).toHaveBeenCalledTimes(1); expect(carousel.onCarouselPaused.emit).toHaveBeenCalledTimes(2); - UIInteractions.triggerKeyDownEvtUponElem('Tab', carousel.nativeElement, true); + UIInteractions.hoverElement(carousel.nativeElement, true); fixture.detectChanges(); + + expect(carousel.isPlaying).toBeFalsy(); + + UIInteractions.unhoverElement(carousel.nativeElement, true); + fixture.detectChanges(); + expect(carousel.isPlaying).toBeFalsy(); + 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(); - expect(carousel.onCarouselPlaying.emit).toHaveBeenCalledTimes(2); - expect(carousel.onCarouselPaused.emit).toHaveBeenCalledTimes(2); + + 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(); }); }); @@ -601,19 +651,19 @@ describe('Carousel', () => { HelperTestFunctions.verifyActiveSlide(carousel, 0); })); - it('should add slides to the carousel when collection is changed', fakeAsync(() => { + it('should add slides to the carousel when collection is changed', fakeAsync(() => { tick(); spyOn(carousel.onSlideAdded, 'emit'); // add a slide - slides.push({text: 'Slide 5'}); + slides.push({ text: 'Slide 5' }); fixture.detectChanges(); HelperTestFunctions.verifyActiveSlide(carousel, 2); expect(carousel.total).toEqual(5); // add an active slide - slides.push({text: 'Slide 6', active: true}); + slides.push({ text: 'Slide 6', active: true }); fixture.detectChanges(); tick(100); @@ -623,7 +673,7 @@ describe('Carousel', () => { expect(carousel.onSlideAdded.emit).toHaveBeenCalledTimes(2); })); - it('should remove slides in the carousel', fakeAsync(() => { + it('should remove slides in the carousel', fakeAsync(() => { tick(); spyOn(carousel.onSlideRemoved, 'emit'); @@ -646,7 +696,7 @@ describe('Carousel', () => { expect(carousel.onSlideRemoved.emit).toHaveBeenCalledTimes(2); })); - it('should not render navigation buttons and indicators when carousel does not have slides', fakeAsync(() => { + it('should not render navigation buttons and indicators when carousel does not have slides', fakeAsync(() => { fixture.componentInstance.removeAllSlides(); fixture.detectChanges(); tick(200); @@ -657,13 +707,13 @@ describe('Carousel', () => { expect(HelperTestFunctions.getNextButton(fixture).hidden).toBeTruthy(); expect(HelperTestFunctions.getPreviousButton(fixture).hidden).toBeTruthy(); - // add a slide - fixture.componentInstance.addSlides(); - fixture.detectChanges(); - tick(200); + // add a slide + fixture.componentInstance.addSlides(); + fixture.detectChanges(); + tick(200); - expect(carousel.total).toEqual(2); - expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeDefined(); + expect(carousel.total).toEqual(2); + expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeDefined(); expect(HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.top)).toBeDefined(); expect(HelperTestFunctions.getNextButton(fixture).hidden).toBeFalsy(); expect(HelperTestFunctions.getPreviousButton(fixture).hidden).toBeFalsy(); @@ -824,10 +874,10 @@ class CarouselDynamicSlidesComponent { addNewSlide() { this.slides.push( - {text: 'Slide 1', active: false}, - {text: 'Slide 2', active: false}, - {text: 'Slide 3', active: true}, - {text: 'Slide 4', active: false} + { text: 'Slide 1', active: false }, + { text: 'Slide 2', active: false }, + { text: 'Slide 3', active: true }, + { text: 'Slide 4', active: false } ); } @@ -837,8 +887,8 @@ class CarouselDynamicSlidesComponent { public addSlides() { this.slides.push( - {text: 'Slide 1'}, - {text: 'Slide 2'} + { text: 'Slide 1' }, + { text: 'Slide 2' } ); } } diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index 75135c7b871..7354c543edd 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts @@ -176,7 +176,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit { */ set interval(value: number) { this._interval = +value; - this._restartInterval(); + this.restartInterval(); } /** @@ -333,20 +333,21 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit { @Output() public onCarouselPlaying = new EventEmitter(); private _interval: number; - private _lastInterval: any; - private _playing: boolean; - private _destroyed: boolean; private _resourceStrings = CurrentResourceStrings.CarouselResStrings; + private lastInterval: any; + private playing: boolean; + private stoppedByInteraction: boolean; + private destroyed: boolean; private destroy$ = new Subject(); - private _differ: IterableDiffer | null = null; + private differ: IterableDiffer | null = null; private enterAnimationPlayer?: AnimationPlayer; private leaveAnimationPlayer?: AnimationPlayer; private currentSlide: IgxSlideComponent; private previousSlide: IgxSlideComponent; private animationDuration = 320; - constructor(private element: ElementRef, private _iterableDiffers: IterableDiffers, private builder: AnimationBuilder) { - this._differ = this._iterableDiffers.find([]).create(null); + constructor(private element: ElementRef, private iterableDiffers: IterableDiffers, private builder: AnimationBuilder) { + this.differ = this.iterableDiffers.find([]).create(null); } /** @@ -366,9 +367,9 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit { public ngOnDestroy() { this.destroy$.next(true); this.destroy$.complete(); - this._destroyed = true; - if (this._lastInterval) { - clearInterval(this._lastInterval); + this.destroyed = true; + if (this.lastInterval) { + clearInterval(this.lastInterval); } } @@ -405,7 +406,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit { this.currentSlide = slide; } this.onSlideChanged.emit({ carousel: this, slide }); - this._restartInterval(); + this.restartInterval(); } } @@ -496,7 +497,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit { } private initSlides(change: QueryList) { - const diff = this._differ.diff(change.toArray()); + const diff = this.differ.diff(change.toArray()); if (diff) { this.slides.reduce((any, c, ind) => c.index = ind, 0); // reset slides indexes diff.forEachAddedItem((record: IterableChangeRecord) => { @@ -614,7 +615,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit { * @memberOf IgxCarouselComponent */ public get isPlaying(): boolean { - return this._playing; + return this.playing; } /** @@ -625,7 +626,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit { * @memberOf IgxCarouselComponent */ public get isDestroyed(): boolean { - return this._destroyed; + return this.destroyed; } /** * Returns a reference to the carousel element in the DOM. @@ -738,10 +739,11 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit { * @memberOf IgxCarouselComponent */ public play() { - if (!this._playing) { - this._playing = true; + if (!this.playing) { + this.playing = true; this.onCarouselPlaying.emit(this); - this._restartInterval(); + this.restartInterval(); + this.stoppedByInteraction = false; } } @@ -756,26 +758,26 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit { */ public stop() { if (this.pause) { - this._playing = false; + this.playing = false; this.onCarouselPaused.emit(this); - this._resetInterval(); + this.resetInterval(); } } - private _resetInterval() { - if (this._lastInterval) { - clearInterval(this._lastInterval); - this._lastInterval = null; + private resetInterval() { + if (this.lastInterval) { + clearInterval(this.lastInterval); + this.lastInterval = null; } } - private _restartInterval() { - this._resetInterval(); + private restartInterval() { + this.resetInterval(); if (!isNaN(this.interval) && this.interval > 0) { - this._lastInterval = setInterval(() => { + this.lastInterval = setInterval(() => { const tick = +this.interval; - if (this._playing && this.total && !isNaN(tick) && tick > 0) { + if (this.playing && this.total && !isNaN(tick) && tick > 0) { this.next(); } else { this.stop(); @@ -807,12 +809,17 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit { } /** @hidden */ - @HostListener('keydown.Tab') - public onTab() { + @HostListener('tap') + public onTap() { if (this.isPlaying) { + if (this.pause && this.isPlaying) { + this.stoppedByInteraction = true; + } this.stop(); } else { - this.play(); + if (this.stoppedByInteraction) { + this.play(); + } } } @@ -845,6 +852,9 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit { */ @HostListener('mouseenter') public onMouseEnter() { + if (this.pause && this.isPlaying) { + this.stoppedByInteraction = true; + } this.stop(); } @@ -853,7 +863,9 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit { */ @HostListener('mouseleave') public onMouseLeave() { - this.play(); + if ( this.stoppedByInteraction ) { + this.play(); + } } /** diff --git a/src/app/carousel/carousel.sample.html b/src/app/carousel/carousel.sample.html index c43e582e77a..d94edb0c002 100644 --- a/src/app/carousel/carousel.sample.html +++ b/src/app/carousel/carousel.sample.html @@ -11,19 +11,21 @@

Desktop

navigation keyboardSupport - loop + loop + pause {{ item }} - + +
- + diff --git a/src/app/carousel/carousel.sample.ts b/src/app/carousel/carousel.sample.ts index f6d52f23c90..d0a4746100c 100644 --- a/src/app/carousel/carousel.sample.ts +++ b/src/app/carousel/carousel.sample.ts @@ -44,4 +44,12 @@ export class CarouselSampleComponent { public onAnimationSelection(event) { this.car.animationType = event.newSelection.element.nativeElement.textContent.trim(); } + + public pauseCar () { + this.car.stop(); + } + + public play() { + this.car.play(); + } }