From 335a960445b730eab796f35d82ab56286f8b1658 Mon Sep 17 00:00:00 2001 From: MPopov Date: Thu, 12 Sep 2019 13:20:36 +0300 Subject: [PATCH 01/48] fix(toolbar): Fix disabled colors for falt and icon buttons in grid toolbar Closes #4958 Signed-off-by: MPopov --- .../grid-toolbar/_grid-toolbar-theme.scss | 27 ------------------- 1 file changed, 27 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss index 0e728a7dcfe..3a8a7bc5c3a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss @@ -168,38 +168,11 @@ height: map-get($grid-toolbar-height, 'comfortable'); %igx-button--flat { - background: --var($theme, 'button-background'); - color: --var($theme, 'button-text-color'); margin-left: rem(8); - - &:hover { - background: --var($theme, 'button-hover-background'); - color: --var($theme, 'button-hover-text-color'); - } - - &:focus, - &:active { - background: --var($theme, 'button-focus-background'); - color: --var($theme, 'button-focus-text-color'); - } } %igx-button--icon { - background: --var($theme, 'button-background'); - color: --var($theme, 'button-text-color'); margin-left: rem(8); - border-radius: 0; - - &:hover { - background: --var($theme, 'button-hover-background'); - color: --var($theme, 'button-hover-text-color'); - } - - &:focus, - &:active { - background: --var($theme, 'button-focus-background'); - color: --var($theme, 'button-focus-text-color'); - } } %igx-grid-toolbar__button-space { From 8ce7b94846e322489933d13646dec3de75ca29d1 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 25 Sep 2019 17:51:21 +0300 Subject: [PATCH 02/48] fix(igxHiearchicalGrid): Prevent up/down arrow key navigation from footer summary row in hierarchical grid. --- .../hierarchical-grid/hierarchical-grid-navigation.service.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts index 4e5307a8b0a..bf6056d5820 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts @@ -68,6 +68,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi } public navigateUp(rowElement, selectedNode: ISelectionNode) { + if (selectedNode.isSummaryRow) { return; } const prevElem = rowElement.previousElementSibling; const visibleColumnIndex = selectedNode.column; const currentRowIndex = selectedNode.row; @@ -103,6 +104,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi } } public navigateDown(rowElement, selectedNode: ISelectionNode) { + if (selectedNode.isSummaryRow) { return; } const nextElem = rowElement.nextElementSibling; const visibleColumnIndex = selectedNode.column; const currentRowIndex = selectedNode.row; From ca99e95d115d978e7cc8afefbaa6741a53c27c58 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 27 Sep 2019 16:53:02 +0300 Subject: [PATCH 03/48] fix(igxGrid): Ceil the scrollLeft in case browser is zoomed and returns a non-whole number value. --- .../igniteui-angular/src/lib/grids/grid-navigation.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index abaaeede32f..d3c4ae8f57c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts @@ -22,7 +22,7 @@ export class IgxGridNavigationService { } get displayContainerScrollLeft() { - return Math.round(this.grid.parentVirtDir.getHorizontalScroll().scrollLeft); + return Math.ceil(this.grid.parentVirtDir.getHorizontalScroll().scrollLeft); } get verticalDisplayContainerElement() { From f88056f2c3111a7fb9197d2d0e33e9f673761685 Mon Sep 17 00:00:00 2001 From: skrustev Date: Tue, 1 Oct 2019 18:29:22 +0300 Subject: [PATCH 04/48] fix(igHierarchicalGrid): Fix navigating down to partially visible cell with index available in previous expanded grid. #5251 --- .../src/lib/grids/common/grid.interface.ts | 1 + .../src/lib/grids/grid-navigation.service.ts | 2 +- .../lib/grids/grid/groupby-row.component.ts | 1 + .../hierarchical-grid.navigation.spec.ts | 28 +++++++++++++------ .../src/lib/grids/row.component.ts | 1 + .../grids/summaries/summary-row.component.ts | 1 + 6 files changed, 25 insertions(+), 9 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index 6bae484aec3..fe90470636d 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -1,6 +1,7 @@ import { FilterMode } from './enums'; export interface GridType { + id: string; nativeElement: HTMLElement; rowEditable: boolean; rootSummariesEnabled: boolean; diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index abaaeede32f..d70bf745c6c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts @@ -628,7 +628,7 @@ export class IgxGridNavigationService { protected getNextRowByIndex(nextIndex) { return this.grid.tbody.nativeElement.querySelector( - `[data-rowindex="${nextIndex}"]`); + `[data-rowindex="${nextIndex}"][data-gridid="${this.grid.id}"]`); } private getAllRows() { diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts index e8e96ecc011..c73ca50b69c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts @@ -83,6 +83,7 @@ export class IgxGridGroupByRowComponent { * ``` */ @Input() + @HostBinding('attr.data-gridID') public gridID: string; /** diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts index a57492403a0..3e7b1132d55 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts @@ -33,23 +33,35 @@ describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => { })); // simple tests - it('should allow navigating down from parent row into child grid.', () => { - const fCell = hierarchicalGrid.dataRowList.toArray()[0].cells.toArray()[0].nativeElement; + it('should allow navigating down from parent row into child grid.', (async() => { + hierarchicalGrid.expandChildren = false; + hierarchicalGrid.height = '600px'; + hierarchicalGrid.width = '800px'; + fixture.componentInstance.rowIsland.height = '350px'; + fixture.detectChanges(); + await wait(100); + + const row1 = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + UIInteractions.clickElement(row1.expander); + fixture.detectChanges(); + await wait(100); + + const fCell = hierarchicalGrid.dataRowList.toArray()[1].cells.toArray()[0].nativeElement; fCell.focus(); fixture.detectChanges(); + const keyboardEvent = new KeyboardEvent('keydown', { code: 'ArrowDown', key: 'ArrowDown' }); fCell.dispatchEvent(keyboardEvent); + await wait(100); fixture.detectChanges(); - const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; - const childFirstCell = childGrid.dataRowList.toArray()[0].cells.toArray()[0]; - - expect(childFirstCell.selected).toBe(true); - expect(childFirstCell.focused).toBe(true); - }); + const sCell = hierarchicalGrid.dataRowList.toArray()[2].cells.toArray()[0]; + expect(sCell.selected).toBe(true); + expect(sCell.focused).toBe(true); + })); it('should allow navigating up from child row into parent grid.', () => { const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; diff --git a/projects/igniteui-angular/src/lib/grids/row.component.ts b/projects/igniteui-angular/src/lib/grids/row.component.ts index 75402875480..adb58cce3e4 100644 --- a/projects/igniteui-angular/src/lib/grids/row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/row.component.ts @@ -59,6 +59,7 @@ export abstract class IgxRowComponent; @Input() + @HostBinding('attr.data-gridID') public gridID; @Input() From 628269d9845bc1852de6c2a163646e61693c5ca6 Mon Sep 17 00:00:00 2001 From: wnvko Date: Wed, 2 Oct 2019 18:04:21 +0300 Subject: [PATCH 05/48] fix(nav-drawer): bypass all calls to browsers' object, #4426 --- .../igniteui-angular/src/lib/core/touch.ts | 51 ++++++++++------ .../navigation-drawer.component.ts | 58 ++++++++++++------- 2 files changed, 70 insertions(+), 39 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/touch.ts b/projects/igniteui-angular/src/lib/core/touch.ts index daf8640a082..600466c2a9b 100644 --- a/projects/igniteui-angular/src/lib/core/touch.ts +++ b/projects/igniteui-angular/src/lib/core/touch.ts @@ -1,6 +1,6 @@ -import { Inject, Injectable, NgZone } from '@angular/core'; +import { Inject, Injectable, NgZone, PLATFORM_ID } from '@angular/core'; import { ɵgetDOM as getDOM } from '@angular/platform-browser'; -import { DOCUMENT } from '@angular/common'; +import { DOCUMENT, isPlatformBrowser } from '@angular/common'; const EVENT_SUFFIX = 'precise'; @@ -11,26 +11,31 @@ const EVENT_SUFFIX = 'precise'; */ @Injectable() export class HammerGesturesManager { + private platformBrowser: boolean; /** * Event option defaults for each recognizer, see http://hammerjs.github.io/api/ for API listing. */ - protected hammerOptions: HammerOptions = { - // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065) - // see https://github.com/IgniteUI/igniteui-angular/issues/447#issuecomment-324601803 - inputClass: Hammer.TouchInput, - recognizers: [ - [ Hammer.Pan, { threshold: 0 } ], - [ Hammer.Swipe, { - direction: Hammer.DIRECTION_HORIZONTAL - }], - [Hammer.Tap], - [Hammer.Tap, { event: 'doubletap', taps: 2 }, ['tap']] - ] - }; + protected hammerOptions: HammerOptions = {}; private _hammerManagers: Array<{ element: EventTarget, manager: HammerManager; }> = []; constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any) { + this.platformBrowser = isPlatformBrowser(PLATFORM_ID); + if (this.platformBrowser) { + this.hammerOptions = { + // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065) + // see https://github.com/IgniteUI/igniteui-angular/issues/447#issuecomment-324601803 + inputClass: Hammer.TouchInput, + recognizers: [ + [Hammer.Pan, { threshold: 0 }], + [Hammer.Swipe, { + direction: Hammer.DIRECTION_HORIZONTAL + }], + [Hammer.Tap], + [Hammer.Tap, { event: 'doubletap', taps: 2 }, ['tap']] + ] + }; + } } public supports(eventName: string): boolean { @@ -41,10 +46,14 @@ export class HammerGesturesManager { * Add listener extended with options for Hammer.js. Will use defaults if none are provided. * Modeling after other event plugins for easy future modifications. */ - public addEventListener(element: HTMLElement, - eventName: string, - eventHandler: (eventObj) => void, - options: HammerOptions = null): () => void { + public addEventListener( + element: HTMLElement, + eventName: string, + eventHandler: (eventObj) => void, + options: HammerOptions = null): () => void { + if (!this.platformBrowser) { + return; + } // Creating the manager bind events, must be done outside of angular return this._zone.runOutsideAngular(() => { @@ -67,6 +76,10 @@ export class HammerGesturesManager { * @param target Can be one of either window, body or document(fallback default). */ public addGlobalEventListener(target: string, eventName: string, eventHandler: (eventObj) => void): () => void { + if (!this.platformBrowser) { + return; + } + const element = this.getGlobalEventTarget(target); // Creating the manager bind events, must be done outside of angular diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts index e91a8c0f971..1be1a8545e0 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts @@ -14,13 +14,15 @@ import { Output, Renderer, SimpleChange, - ViewChild + ViewChild, + PLATFORM_ID } from '@angular/core'; import { fromEvent, interval, Subscription } from 'rxjs'; import { debounce } from 'rxjs/operators'; import { IgxNavigationService, IToggleView } from '../core/navigation'; import { HammerGesturesManager } from '../core/touch'; import { IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective } from './navigation-drawer.directives'; +import { isPlatformBrowser } from '@angular/common'; let NEXT_ID = 0; /** @@ -612,6 +614,10 @@ export class IgxNavigationDrawerComponent implements } private getWindowWidth() { + if (!isPlatformBrowser(PLATFORM_ID)) { + return; + } + return (window.innerWidth > 0) ? window.innerWidth : screen.width; } @@ -619,11 +625,15 @@ export class IgxNavigationDrawerComponent implements * Sets the drawer width. */ private setDrawerWidth(width: string) { - requestAnimationFrame(() => { - if (this.drawer) { - this.renderer.setElementStyle(this.drawer, 'width', width); - } - }); + if (isPlatformBrowser(PLATFORM_ID)) { + requestAnimationFrame(() => { + if (this.drawer) { + this.renderer.setElementStyle(this.drawer, 'width', width); + } + }); + } else { + this.renderer.setElementStyle(this.drawer, 'width', width); + } } /** @@ -649,7 +659,7 @@ export class IgxNavigationDrawerComponent implements this._touchManager.addGlobalEventListener('document', 'panmove', this.pan); this._touchManager.addGlobalEventListener('document', 'panend', this.panEnd); } - if (!this._resizeObserver) { + if (!this._resizeObserver && isPlatformBrowser(PLATFORM_ID)) { this._resizeObserver = fromEvent(window, 'resize').pipe(debounce(() => interval(150))) .subscribe((value) => { this.checkPinThreshold(value); @@ -805,19 +815,27 @@ export class IgxNavigationDrawerComponent implements * @param opacity optional value to apply to the overlay */ private setXSize(x: number, opacity?: string) { - // Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO) - window.requestAnimationFrame(() => { - if (this.hasAnimateWidth) { - this.renderer.setElementStyle(this.drawer, 'width', x ? Math.abs(x) + 'px' : ''); - } else { - this.renderer.setElementStyle(this.drawer, 'transform', x ? 'translate3d(' + x + 'px,0,0)' : ''); - this.renderer.setElementStyle(this.drawer, '-webkit-transform', - x ? 'translate3d(' + x + 'px,0,0)' : ''); - } - if (opacity !== undefined) { - this.renderer.setElementStyle(this.overlay, 'opacity', opacity); - } - }); + if (isPlatformBrowser(PLATFORM_ID)) { + // Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO) + window.requestAnimationFrame(() => { + this.setXSizeInternal(x, opacity); + }); + } else { + this.setXSizeInternal(x, opacity); + } + } + + private setXSizeInternal(x: number, opacity?: string) { + if (this.hasAnimateWidth) { + this.renderer.setElementStyle(this.drawer, 'width', x ? Math.abs(x) + 'px' : ''); + } else { + this.renderer.setElementStyle(this.drawer, 'transform', x ? 'translate3d(' + x + 'px,0,0)' : ''); + this.renderer.setElementStyle(this.drawer, '-webkit-transform', + x ? 'translate3d(' + x + 'px,0,0)' : ''); + } + if (opacity !== undefined) { + this.renderer.setElementStyle(this.overlay, 'opacity', opacity); + } } private toggleOpenedEvent = (evt?) => { From 20e70e6480f1e8e563588c9eba90f717896e338f Mon Sep 17 00:00:00 2001 From: wnvko Date: Thu, 3 Oct 2019 16:18:10 +0300 Subject: [PATCH 06/48] fix(nav-drawer): move isPlatformBrowser to util, #4426 --- .../igniteui-angular/src/lib/core/touch.ts | 9 ++-- .../igniteui-angular/src/lib/core/utils.ts | 52 ++++++++++++++++--- .../src/lib/grids/cell.component.ts | 5 +- .../hierarchical-cell.component.ts | 6 ++- .../grids/tree-grid/tree-cell.component.ts | 7 +-- .../navigation-drawer.component.ts | 16 +++--- 6 files changed, 70 insertions(+), 25 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/touch.ts b/projects/igniteui-angular/src/lib/core/touch.ts index 600466c2a9b..669ccada9f8 100644 --- a/projects/igniteui-angular/src/lib/core/touch.ts +++ b/projects/igniteui-angular/src/lib/core/touch.ts @@ -1,6 +1,7 @@ -import { Inject, Injectable, NgZone, PLATFORM_ID } from '@angular/core'; +import { Inject, Injectable, NgZone } from '@angular/core'; import { ɵgetDOM as getDOM } from '@angular/platform-browser'; -import { DOCUMENT, isPlatformBrowser } from '@angular/common'; +import { DOCUMENT } from '@angular/common'; +import { PlatformUtil } from './utils'; const EVENT_SUFFIX = 'precise'; @@ -19,8 +20,8 @@ export class HammerGesturesManager { private _hammerManagers: Array<{ element: EventTarget, manager: HammerManager; }> = []; - constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any) { - this.platformBrowser = isPlatformBrowser(PLATFORM_ID); + constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any, private platformUtil: PlatformUtil) { + this.platformBrowser = this.platformUtil.isPlatformBrowser(); if (this.platformBrowser) { this.hammerOptions = { // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065) diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index 3c2369b2ae8..a78232a77b5 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -1,3 +1,6 @@ +import { Injectable, PLATFORM_ID, Inject } from '@angular/core'; +import { isPlatformBrowser } from '@angular/common'; + /** *@hidden */ @@ -230,11 +233,22 @@ export function isFirefox(): boolean { * @hidden * TODO: make injectable, check isPlatformBrowser() */ +@Injectable({ providedIn: 'root' }) export class PlatformUtil { - static isIOS(): boolean { - const iosBrowser = typeof window !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window); + private platformBrowser: boolean; + + constructor(@Inject(PLATFORM_ID) private platformId: Object) { + this.platformBrowser = isPlatformBrowser(this.platformId); + } + + public isIOS(): boolean { + const iosBrowser = this.platformBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window); return iosBrowser; } + + public isPlatformBrowser(): boolean { + return this.platformBrowser; + } } /** @@ -246,8 +260,21 @@ export function isLeftClick(event: PointerEvent) { /** @hidden */ export function isNavigationKey(key: string): boolean { - return ['down', 'up', 'left', 'right', 'arrowdown', 'arrowup', 'arrowleft', 'arrowright', - 'home', 'end', 'space', 'spacebar', ' '].indexOf(key) !== -1; + return [ + 'down', + 'up', + 'left', + 'right', + 'arrowdown', + 'arrowup', + 'arrowleft', + 'arrowright', + 'home', + 'end', + 'space', + 'spacebar', + ' ' + ].indexOf(key) !== -1; } /** @@ -285,8 +312,21 @@ export interface CancelableBrowserEventArgs extends CancelableEventArgs { event?: Event; } -export const NAVIGATION_KEYS = new Set(['down', 'up', 'left', 'right', 'arrowdown', 'arrowup', 'arrowleft', 'arrowright', - 'home', 'end', 'space', 'spacebar', ' ']); +export const NAVIGATION_KEYS = new Set([ + 'down', + 'up', + 'left', + 'right', + 'arrowdown', + 'arrowup', + 'arrowleft', + 'arrowright', + 'home', + 'end', + 'space', + 'spacebar', + ' ' +]); export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' ')); export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' ')); export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'tab', 'enter', 'f2', 'escape', 'esc']); diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts index ca6730b98d0..62a82dbaf44 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts @@ -555,7 +555,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { public cdr: ChangeDetectorRef, private element: ElementRef, protected zone: NgZone, - private touchManager: HammerGesturesManager) { } + private touchManager: HammerGesturesManager, + protected platformUtil: PlatformUtil) { } private addPointerListeners(selection) { if (selection !== GridSelectionMode.multiple) { return; } @@ -587,7 +588,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { this.nativeElement.addEventListener('compositionend', this.compositionEndHandler); } }); - if (PlatformUtil.isIOS()) { + if (this.platformUtil.isIOS()) { this.touchManager.addEventListener(this.nativeElement, 'doubletap', this.onDoubleClick, { cssProps: { } /* don't disable user-select, etc */ } as HammerOptions); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts index 9ad3c241591..93780f4826f 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts @@ -6,6 +6,7 @@ import { IgxHierarchicalGridComponent } from './hierarchical-grid.component'; // import { IgxHierarchicalSelectionAPIService } from './selection'; import { IgxGridSelectionService, IgxGridCRUDService } from '../../core/grid-selection'; import { HammerGesturesManager } from '../../core/touch'; +import { PlatformUtil } from '../../core/utils'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, @@ -27,9 +28,10 @@ export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent imple public cdr: ChangeDetectorRef, private helement: ElementRef, protected zone: NgZone, - touchManager: HammerGesturesManager + touchManager: HammerGesturesManager, + protected platformUtil: PlatformUtil ) { - super(selectionService, crudService, gridAPI, cdr, helement, zone, touchManager); + super(selectionService, crudService, gridAPI, cdr, helement, zone, touchManager, platformUtil); // this.hSelection = selection; } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts index 9a278525193..eccd53b739b 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts @@ -3,7 +3,7 @@ import { Component, ChangeDetectorRef, ElementRef, ViewChild, Inject, import { IgxGridCellComponent } from '../cell.component'; import { IgxTreeGridAPIService } from './tree-grid-api.service'; import { GridBaseAPIService } from '../api.service'; -import { getNodeSizeViaRange } from '../../core/utils'; +import { getNodeSizeViaRange, PlatformUtil } from '../../core/utils'; import { DOCUMENT } from '@angular/common'; import { IgxGridBaseComponent, IGridDataBindable } from '../grid'; import { IgxGridSelectionService, IgxGridCRUDService } from '../../core/grid-selection'; @@ -26,8 +26,9 @@ export class IgxTreeGridCellComponent extends IgxGridCellComponent implements On element: ElementRef, protected zone: NgZone, touchManager: HammerGesturesManager, - @Inject(DOCUMENT) public document) { - super(selectionService, crudService, gridAPI, cdr, element, zone, touchManager); + @Inject(DOCUMENT) public document, + protected platformUtil: PlatformUtil) { + super(selectionService, crudService, gridAPI, cdr, element, zone, touchManager, platformUtil); this.treeGridAPI = gridAPI; } diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts index 1be1a8545e0..064b94481d2 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts @@ -14,15 +14,14 @@ import { Output, Renderer, SimpleChange, - ViewChild, - PLATFORM_ID + ViewChild } from '@angular/core'; import { fromEvent, interval, Subscription } from 'rxjs'; import { debounce } from 'rxjs/operators'; import { IgxNavigationService, IToggleView } from '../core/navigation'; import { HammerGesturesManager } from '../core/touch'; import { IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective } from './navigation-drawer.directives'; -import { isPlatformBrowser } from '@angular/common'; +import { PlatformUtil } from '../core/utils'; let NEXT_ID = 0; /** @@ -419,7 +418,8 @@ export class IgxNavigationDrawerComponent implements @Optional() private _state: IgxNavigationService, // private animate: AnimationBuilder, TODO protected renderer: Renderer, - private _touchManager: HammerGesturesManager) { + private _touchManager: HammerGesturesManager, + private platformUtil: PlatformUtil) { } /** @@ -614,7 +614,7 @@ export class IgxNavigationDrawerComponent implements } private getWindowWidth() { - if (!isPlatformBrowser(PLATFORM_ID)) { + if (!this.platformUtil.isPlatformBrowser()) { return; } @@ -625,7 +625,7 @@ export class IgxNavigationDrawerComponent implements * Sets the drawer width. */ private setDrawerWidth(width: string) { - if (isPlatformBrowser(PLATFORM_ID)) { + if (this.platformUtil.isPlatformBrowser()) { requestAnimationFrame(() => { if (this.drawer) { this.renderer.setElementStyle(this.drawer, 'width', width); @@ -659,7 +659,7 @@ export class IgxNavigationDrawerComponent implements this._touchManager.addGlobalEventListener('document', 'panmove', this.pan); this._touchManager.addGlobalEventListener('document', 'panend', this.panEnd); } - if (!this._resizeObserver && isPlatformBrowser(PLATFORM_ID)) { + if (!this._resizeObserver && this.platformUtil.isPlatformBrowser()) { this._resizeObserver = fromEvent(window, 'resize').pipe(debounce(() => interval(150))) .subscribe((value) => { this.checkPinThreshold(value); @@ -815,7 +815,7 @@ export class IgxNavigationDrawerComponent implements * @param opacity optional value to apply to the overlay */ private setXSize(x: number, opacity?: string) { - if (isPlatformBrowser(PLATFORM_ID)) { + if (this.platformUtil.isPlatformBrowser()) { // Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO) window.requestAnimationFrame(() => { this.setXSizeInternal(x, opacity); From d68a589a3d90864d4c87249bb545135914def240 Mon Sep 17 00:00:00 2001 From: wnvko Date: Thu, 3 Oct 2019 16:18:42 +0300 Subject: [PATCH 07/48] test(nav-drawer): fix failing tests, #4426 --- .../src/lib/grids/grid/cell.spec.ts | 5 +- .../navigation-drawer.component.spec.ts | 162 +++++++++--------- 2 files changed, 84 insertions(+), 83 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts index 1e425e0890a..f5ea1118fca 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts @@ -182,14 +182,15 @@ describe('IgxGrid - Cell component #grid', () => { it('Should not attach doubletap handler for non-iOS', () => { const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener'); - spyOn(PlatformUtil, 'isIOS').and.returnValue(false); + spyOn(PlatformUtil.prototype, 'isIOS').and.returnValue(false); const fix = TestBed.createComponent(DefaultGridComponent); fix.detectChanges(); + expect(addListenerSpy).not.toHaveBeenCalled(); }); it('Should handle doubletap on iOS, trigger onDoubleClick event', () => { const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener'); - spyOn(PlatformUtil, 'isIOS').and.returnValue(true); + spyOn(PlatformUtil.prototype, 'isIOS').and.returnValue(true); const fix = TestBed.createComponent(DefaultGridComponent); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts index 730b8c250b5..822dcc00c6a 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts @@ -6,19 +6,20 @@ import { tick } from '@angular/core/testing'; -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, PLATFORM_ID } from '@angular/core'; import { By } from '@angular/platform-browser'; import { wait } from '../test-utils/ui-interactions.spec'; import { IgxNavigationDrawerModule } from './navigation-drawer.module'; import { IgxNavigationToggleDirective, IgxNavigationCloseDirective } from '../core/navigation/directives'; import { IgxNavigationDrawerComponent } from './navigation-drawer.component'; import { IgxNavigationService } from '../core/navigation/nav.service'; +import { PlatformUtil } from '../core/utils'; // HammerJS simulator from https://github.com/hammerjs/simulator, manual typings TODO declare var Simulator: any; const oldTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL; -describe('Navigation Drawer', () => { +fdescribe('Navigation Drawer', () => { let widthSpyOverride: jasmine.Spy; // configureTestSuite(); beforeEach(async(() => { @@ -49,9 +50,9 @@ describe('Navigation Drawer', () => { TestBed.compileComponents().then(() => { const fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); - expect(fixture.componentInstance.viewChild instanceof + expect(fixture.componentInstance.navDrawer instanceof IgxNavigationDrawerComponent).toBeTruthy(); - expect(fixture.componentInstance.viewChild.state).toBeNull(); + expect(fixture.componentInstance.navDrawer.state).toBeNull(); }); })); @@ -60,10 +61,10 @@ describe('Navigation Drawer', () => { const fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - expect(fixture.componentInstance.viewChild).toBeDefined(); - expect(fixture.componentInstance.viewChild instanceof + expect(fixture.componentInstance.navDrawer).toBeDefined(); + expect(fixture.componentInstance.navDrawer instanceof IgxNavigationDrawerComponent).toBeTruthy(); - expect(fixture.componentInstance.viewChild.state instanceof IgxNavigationService) + expect(fixture.componentInstance.navDrawer.state instanceof IgxNavigationService) .toBeTruthy(); }); })); @@ -75,8 +76,8 @@ describe('Navigation Drawer', () => { const fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); - expect(fixture.componentInstance.viewChild).toBeDefined(); - expect(fixture.componentInstance.viewChild instanceof + expect(fixture.componentInstance.navDrawer).toBeDefined(); + expect(fixture.componentInstance.navDrawer instanceof IgxNavigationDrawerComponent).toBeTruthy(); expect(() => fixture.destroy()).not.toThrow(); }); @@ -88,17 +89,17 @@ describe('Navigation Drawer', () => { fixture.detectChanges(); const domNavDrawer = fixture.debugElement.query(By.css('igx-nav-drawer')).nativeElement; - expect(fixture.componentInstance.viewChild.id).toContain('igx-nav-drawer-'); + expect(fixture.componentInstance.navDrawer.id).toContain('igx-nav-drawer-'); expect(domNavDrawer.id).toContain('igx-nav-drawer-'); - expect(fixture.componentInstance.viewChild.drawer.classList).toContain('igx-nav-drawer__aside'); - expect(fixture.componentInstance.viewChild.overlay.classList).toContain('igx-nav-drawer__overlay'); - expect(fixture.componentInstance.viewChild.styleDummy.classList).toContain('igx-nav-drawer__style-dummy'); - expect(fixture.componentInstance.viewChild.hasAnimateWidth).toBeFalsy(); + expect(fixture.componentInstance.navDrawer.drawer.classList).toContain('igx-nav-drawer__aside'); + expect(fixture.componentInstance.navDrawer.overlay.classList).toContain('igx-nav-drawer__overlay'); + expect(fixture.componentInstance.navDrawer.styleDummy.classList).toContain('igx-nav-drawer__style-dummy'); + expect(fixture.componentInstance.navDrawer.hasAnimateWidth).toBeFalsy(); - fixture.componentInstance.viewChild.id = 'customNavDrawer'; + fixture.componentInstance.navDrawer.id = 'customNavDrawer'; fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.id).toBe('customNavDrawer'); + expect(fixture.componentInstance.navDrawer.id).toBe('customNavDrawer'); expect(domNavDrawer.id).toBe('customNavDrawer'); }).catch((reason) => { @@ -118,8 +119,8 @@ describe('Navigation Drawer', () => { TestBed.compileComponents().then(() => { const fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - const state: IgxNavigationService = fixture.componentInstance.viewChild.state; - const touchManager = fixture.componentInstance.viewChild.touchManager; + const state: IgxNavigationService = fixture.componentInstance.navDrawer.state; + const touchManager = fixture.componentInstance.navDrawer.touchManager; expect(state.get('testNav')).toBeDefined(); expect(touchManager.getManagerForElement(document) instanceof Hammer.Manager).toBeTruthy(); @@ -137,7 +138,7 @@ describe('Navigation Drawer', () => { TestBed.compileComponents().then(() => { const fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - const drawer: IgxNavigationDrawerComponent = fixture.componentInstance.viewChild; + const drawer: IgxNavigationDrawerComponent = fixture.componentInstance.navDrawer; expect(drawer.isOpen).toBeFalsy(); drawer.open(); @@ -168,7 +169,7 @@ describe('Navigation Drawer', () => { TestBed.compileComponents().then(() => { fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - drawer = fixture.componentInstance.viewChild; + drawer = fixture.componentInstance.navDrawer; spyOn(drawer.closing, 'emit'); spyOn(drawer.closed, 'emit'); @@ -210,7 +211,7 @@ describe('Navigation Drawer', () => { const fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.hasAnimateWidth).toBeTruthy(); + expect(fixture.componentInstance.navDrawer.hasAnimateWidth).toBeTruthy(); expect(fixture.debugElement.query((x) => x.nativeNode.nodeName === 'ASIDE').nativeElement.classList) .toContain('igx-nav-drawer__aside--mini'); }).catch((reason) => { @@ -249,7 +250,7 @@ describe('Navigation Drawer', () => { fixture.componentInstance.miniView = true; fixture.detectChanges(); - expect(asideElem.styles['width']).toEqual(fixture.componentInstance.viewChild.miniWidth); + expect(asideElem.styles['width']).toEqual(fixture.componentInstance.navDrawer.miniWidth); }).catch((reason) => { return Promise.reject(reason); }); @@ -269,15 +270,15 @@ describe('Navigation Drawer', () => { const fixture = TestBed.createComponent(TestComponentPin); fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.pin).toBeTruthy(); + expect(fixture.componentInstance.navDrawer.pin).toBeTruthy(); expect(fixture.debugElement.query((x) => x.nativeNode.nodeName === 'ASIDE').nativeElement.classList) .toContain('igx-nav-drawer__aside--pinned'); - expect(fixture.componentInstance.viewChild.enableGestures).toBe(false); + expect(fixture.componentInstance.navDrawer.enableGestures).toBe(false); fixture.componentInstance.enableGestures = 'true'; fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.enableGestures).toBeTruthy(); + expect(fixture.componentInstance.navDrawer.enableGestures).toBeTruthy(); }).catch((reason) => { return Promise.reject(reason); @@ -326,7 +327,7 @@ describe('Navigation Drawer', () => { TestBed.compileComponents() .then(() => { const fixture = TestBed.createComponent(TestComponentPin); - const drawer = fixture.componentInstance.viewChild; + const drawer = fixture.componentInstance.navDrawer; drawer.isOpen = true; fixture.detectChanges(); const drawerElem = fixture.debugElement.query((x) => x.nativeNode.nodeName === 'IGX-NAV-DRAWER').nativeElement; @@ -355,22 +356,22 @@ describe('Navigation Drawer', () => { TestBed.compileComponents().then(() => { fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.isOpen).toEqual(false); + expect(fixture.componentInstance.navDrawer.isOpen).toEqual(false); // timeouts are +50 on the gesture to allow the swipe to be detected and triggered after the touches: return swipe(document.body, 80, 10, 100, 250, 0); }) .then(() => { - expect(fixture.componentInstance.viewChild.isOpen) + expect(fixture.componentInstance.navDrawer.isOpen) .toEqual(false, 'should ignore swipes too far away from the edge'); return swipe(document.body, 10, 10, 150, 250, 0); }) .then(() => { - expect(fixture.componentInstance.viewChild.isOpen).toEqual(true, 'Should accept edge swipe'); + expect(fixture.componentInstance.navDrawer.isOpen).toEqual(true, 'Should accept edge swipe'); return swipe(document.body, 180, 10, 150, -180, 0); }) .then(() => { - expect(fixture.componentInstance.viewChild.isOpen).toEqual(false); + expect(fixture.componentInstance.navDrawer.isOpen).toEqual(false); done(); }) .catch((reason) => { @@ -386,9 +387,9 @@ describe('Navigation Drawer', () => { TestBed.compileComponents().then(() => { fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - navDrawer = fixture.componentInstance.viewChild; + navDrawer = fixture.componentInstance.navDrawer; - expect(fixture.componentInstance.viewChild.isOpen).toEqual(false); + expect(fixture.componentInstance.navDrawer.isOpen).toEqual(false); const listener = navDrawer.renderer.listen(document.body, 'panmove', () => { @@ -443,12 +444,12 @@ describe('Navigation Drawer', () => { fixture.componentInstance.drawerMiniWidth = 68; fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.maxEdgeZone) + expect(fixture.componentInstance.navDrawer.maxEdgeZone) .toBe(fixture.componentInstance.drawerMiniWidth * 1.1); fixture.componentInstance.drawerMiniWidth = 80; fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.maxEdgeZone) + expect(fixture.componentInstance.navDrawer.maxEdgeZone) .toBe(fixture.componentInstance.drawerMiniWidth * 1.1); }).catch((reason) => { @@ -456,7 +457,7 @@ describe('Navigation Drawer', () => { }); })); - it('should update width from css or property', fakeAsync((done) => { + fit('should update width from css or property', async(done) => { const template = ` @@ -469,41 +470,36 @@ describe('Navigation Drawer', () => { }); // compile after overrides, not in before each: https://github.com/angular/angular/issues/10712 - TestBed.compileComponents().then(() => { - fixture = TestBed.createComponent(TestComponentDIComponent); - fixture.detectChanges(); - // const comp: DebugElement = fixture.debugElement.query(By.component(IgxNavbarComponent)); + await TestBed.compileComponents(); + fixture = TestBed.createComponent(TestComponentDIComponent); + fixture.detectChanges(); + // const comp: DebugElement = fixture.debugElement.query(By.component(IgxNavbarComponent)); - // defaults: - expect(fixture.componentInstance.viewChild.drawer.style.width).toBe(''); - return fixture.componentInstance.viewChild.open(); - }) - .then(() => { - expect(fixture.componentInstance.viewChild.drawer.style.width).toBe(''); + // defaults: + expect(fixture.componentInstance.navDrawer.drawer.style.width).toBe(''); + fixture.componentInstance.navDrawer.open(); + await wait(200); - fixture.componentInstance.drawerMiniWidth = '80px'; - fixture.componentInstance.drawerWidth = '250px'; - fixture.detectChanges(); - return fixture.whenStable(); // let changes apply in the meantime - }) - .then(() => { - expect(fixture.componentInstance.viewChild.drawer.style.width).toBe('250px'); - return fixture.componentInstance.viewChild.close(); - }) - .then(() => { - tick(1000); - expect(fixture.componentInstance.viewChild.drawer.style.width).toBe('80px'); - fixture.componentInstance.drawerWidth = '350px'; - fixture.detectChanges(); - return fixture.componentInstance.viewChild.open(); - }) - .then(() => { - expect(fixture.componentInstance.viewChild.drawer.style.width).toBe('350px'); - done(); - }).catch((reason) => { - return Promise.reject(reason); - }); - })); + expect(fixture.componentInstance.navDrawer.drawer.style.width).toBe(''); + + fixture.componentInstance.drawerMiniWidth = '80px'; + fixture.componentInstance.drawerWidth = '250px'; + fixture.detectChanges(); + await wait(200); + + expect(fixture.componentInstance.navDrawer.drawer.style.width).toBe('250px'); + fixture.componentInstance.navDrawer.close(); + await wait(200); + + expect(fixture.componentInstance.navDrawer.drawer.style.width).toBe('80px'); + fixture.componentInstance.drawerWidth = '350px'; + fixture.detectChanges(); + fixture.componentInstance.navDrawer.open(); + await wait(200); + + expect(fixture.componentInstance.navDrawer.drawer.style.width).toBe('350px'); + done(); + }); it('should update pin based on window width (pinThreshold)', async (done) => { const template = `''`; @@ -523,7 +519,7 @@ describe('Navigation Drawer', () => { await fixture.whenStable(); // defaults: - expect(fixture.componentInstance.viewChild.pin).toBe(false, 'Should be initially unpinned'); + expect(fixture.componentInstance.navDrawer.pin).toBe(false, 'Should be initially unpinned'); expect(fixture.componentInstance.pin).toBe(false, 'Parent component pin should update initially'); // manual pin override @@ -532,8 +528,8 @@ describe('Navigation Drawer', () => { window.dispatchEvent(new Event('resize')); // wait for debounce - await wait(200); - expect(fixture.componentInstance.viewChild.pin).toBe(false, `Shouldn't change state on resize if window width is the same`); + await wait(2000); + expect(fixture.componentInstance.navDrawer.pin).toBe(false, `Shouldn't change state on resize if window width is the same`); expect(fixture.componentInstance.pin).toBe(true, 'Parent component pin remain on resize if window width is the same'); fixture.componentInstance.pin = true; fixture.detectChanges(); @@ -542,33 +538,37 @@ describe('Navigation Drawer', () => { window.dispatchEvent(new Event('resize')); // wait for debounce - await wait(200); - expect(fixture.componentInstance.viewChild.pin).toBe(true, 'Should pin on window resize over threshold'); + await wait(2000); + expect(fixture.componentInstance.navDrawer.pin).toBe(true, 'Should pin on window resize over threshold'); expect(fixture.componentInstance.pin).toBe(true, 'Parent pin update on window resize over threshold'); widthSpyOverride.and.returnValue(768); window.dispatchEvent(new Event('resize')); // wait for debounce - await wait(200); - expect(fixture.componentInstance.viewChild.pin).toBe(false, 'Should un-pin on window resize below threshold'); + await wait(2000); + expect(fixture.componentInstance.navDrawer.pin).toBe(false, 'Should un-pin on window resize below threshold'); expect(fixture.componentInstance.pin).toBe(false, 'Parent pin update on window resize below threshold'); fixture.componentInstance.pinThreshold = 500; expect(() => fixture.detectChanges()).not.toThrow(); await fixture.whenStable(); - expect(fixture.componentInstance.viewChild.pin).toBe(true, 'Should re-pin on window resize over threshold'); + expect(fixture.componentInstance.navDrawer.pin).toBe(true, 'Should re-pin on window resize over threshold'); expect(fixture.componentInstance.pin).toBe(true, 'Parent pin update on re-pin'); done(); }); it('should get correct window width', (done) => { const originalWidth = window.innerWidth; - + const platformUtil: PlatformUtil = new PlatformUtil(TestBed.get(PLATFORM_ID)); + const drawer = new IgxNavigationDrawerComponent(null, null, null, null, platformUtil); // re-enable `getWindowWidth` const widthSpy = (widthSpyOverride as jasmine.Spy).and.callThrough(); - expect(widthSpy.call(null)).toEqual(originalWidth); + let width = widthSpy.call(drawer); + expect(width).toEqual(originalWidth); + (window as any).innerWidth = 0; // not that readonly in Chrome - expect(widthSpy.call(null)).toEqual(screen.width); + width = widthSpy.call(drawer); + expect(width).toEqual(screen.width); (window as any).innerWidth = originalWidth; done(); }); @@ -615,7 +615,7 @@ describe('Navigation Drawer', () => { template: '' }) class TestComponent { - @ViewChild(IgxNavigationDrawerComponent, { static: true }) public viewChild: IgxNavigationDrawerComponent; + @ViewChild(IgxNavigationDrawerComponent, { static: true }) public navDrawer: IgxNavigationDrawerComponent; } @Component({ @@ -626,7 +626,7 @@ class TestComponent { class TestComponentDIComponent { public drawerMiniWidth: string | number; public drawerWidth: string | number; - @ViewChild(IgxNavigationDrawerComponent, { static: true }) public viewChild: IgxNavigationDrawerComponent; + @ViewChild(IgxNavigationDrawerComponent, { static: true }) public navDrawer: IgxNavigationDrawerComponent; } class TestComponentPin extends TestComponentDIComponent { From c687267f0588803b36f1ee16054c8e13764e9441 Mon Sep 17 00:00:00 2001 From: wnvko Date: Thu, 3 Oct 2019 17:08:31 +0300 Subject: [PATCH 08/48] chore(naf-drawer): remove fit and fdescribe --- .../lib/navigation-drawer/navigation-drawer.component.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts index 822dcc00c6a..38963131a3e 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts @@ -19,7 +19,7 @@ import { PlatformUtil } from '../core/utils'; declare var Simulator: any; const oldTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL; -fdescribe('Navigation Drawer', () => { +describe('Navigation Drawer', () => { let widthSpyOverride: jasmine.Spy; // configureTestSuite(); beforeEach(async(() => { @@ -457,7 +457,7 @@ fdescribe('Navigation Drawer', () => { }); })); - fit('should update width from css or property', async(done) => { + it('should update width from css or property', async(done) => { const template = ` From 28203624a6ed737805b07562da72e8cfc42a75b6 Mon Sep 17 00:00:00 2001 From: 3phase Date: Thu, 3 Oct 2019 18:30:59 +0300 Subject: [PATCH 09/48] fix(grid): Fixes bug #5643 --- .../src/lib/grids/grid/grid.component.ts | 28 +++++++++++++++++++ .../src/lib/grids/grid/grid.directives.ts | 4 +-- 2 files changed, 30 insertions(+), 2 deletions(-) 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 aadf5156c0e..b9d83741515 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -593,6 +593,9 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB * @memberof IgxGridComponent */ public groupBy(expression: IGroupingExpression | Array): void { + if (this.checkIfNoField(expression)) { + return; + } this.endEdit(true); if (expression instanceof Array) { this._gridAPI.groupBy_multiple(expression); @@ -602,6 +605,31 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB this.notifyChanges(true); } + /** + * Checks whether `IgxColumnComponent` has an element without a `[field]`. + * Supports both single instance of the `ISortingExpression` and an array of elements. + * ```typescript + * this.grid.checkIfNoField({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); + * this.grid.checkIfNoField([ + { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false }, + { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true }, + { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false } + ]); + * ``` + * @memberof IgxGridComponent + */ + public checkIfNoField(expression: IGroupingExpression | Array | any): boolean { + if (expression instanceof Array) { + for (const singleExpression of expression) { + if (singleExpression.fieldName === undefined) { + return true; + } + } + return false; + } + return expression.fieldName === undefined; + } + /** * Clears all grouping in the grid, if no parameter is passed. * If a parameter is provided, clears grouping for a particular column or an array of columns. diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts index 3a72c9a2ed9..4ea024889d1 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts @@ -78,7 +78,7 @@ export class IgxGroupAreaDropDirective extends IgxDropDirective { } const grid = column.grid; const isGrouped = grid.groupingExpressions.findIndex((item) => item.fieldName === column.field) !== -1; - if (column.groupable && !isGrouped && !column.columnGroup) { + if (column.groupable && !isGrouped && !column.columnGroup && column.field !== undefined) { drag.icon.innerText = 'group_work'; this.hovered = true; } else { @@ -106,7 +106,7 @@ export class IgxGroupAreaDropDirective extends IgxDropDirective { } const grid = column.grid; const isGrouped = grid.groupingExpressions.findIndex((item) => item.fieldName === column.field) !== -1; - if (column.groupable && !isGrouped && !column.columnGroup) { + if (column.groupable && !isGrouped && !column.columnGroup && column.field !== undefined) { grid.groupBy({ fieldName: column.field, dir: SortingDirection.Asc, ignoreCase: column.sortingIgnoreCase, strategy: column.sortStrategy, groupingComparer: column.groupingComparer }); } From aa6bf28883caf6e060727aab165885b51e13716a Mon Sep 17 00:00:00 2001 From: 3phase Date: Thu, 3 Oct 2019 19:28:42 +0300 Subject: [PATCH 10/48] fix(grid): Adding test for bug #5643 --- .../src/lib/grids/grid/grid.groupby.spec.ts | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index 8c870292433..71cfdae488a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -2026,6 +2026,20 @@ describe('IgxGrid - GroupBy #grid', () => { expect(m).toBe('Maximum amount of grouped columns is 10.'); })); + fit('should not allow grouping by column with no name', fakeAsync(() => { + const fix = TestBed.createComponent(GroupByEmptyColumnFieldComponent); + const grid = fix.componentInstance.instance; + fix.detectChanges(); + tick(); + debugger; + const expr = grid.columns.map(val => { + return { fieldName: val.field, dir: SortingDirection.Asc, ignoreCase: true }; + }); + grid.groupBy(expr); + tick(); + expect(grid.groupsRowList.toArray().length).toBe(0); + })); + it('should display column header text in the grouping chip.', fakeAsync(() => { const fix = TestBed.createComponent(DefaultGridComponent); const grid = fix.componentInstance.instance; @@ -2741,5 +2755,26 @@ export class GroupByDataMoreColumnsComponent extends DataParent { public instance: IgxGridComponent; } +@Component({ + template: ` + + + + + + + + ` +}) +export class GroupByEmptyColumnFieldComponent extends DataParent { + public width = '200px'; + public height = null; + + @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) + public instance: IgxGridComponent; +} + export class CustomSortingStrategy extends DefaultSortingStrategy { } From 94e2823a1c5dee80d69985498c4da00fb87741cb Mon Sep 17 00:00:00 2001 From: 3phase Date: Fri, 4 Oct 2019 11:51:28 +0300 Subject: [PATCH 11/48] fix(grid): Adds tests for bug #5643 --- .../src/lib/grids/grid/grid.groupby.spec.ts | 13 ++++++------- projects/igniteui-angular/src/test.ts | 2 +- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index 71cfdae488a..055e4e79821 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -40,6 +40,7 @@ describe('IgxGrid - GroupBy #grid', () => { GroupableGridComponent, CustomTemplateGridComponent, GroupByDataMoreColumnsComponent, + GroupByEmptyColumnFieldComponent, MultiColumnHeadersWithGroupingComponent ], imports: [NoopAnimationsModule, IgxGridModule] @@ -2026,12 +2027,11 @@ describe('IgxGrid - GroupBy #grid', () => { expect(m).toBe('Maximum amount of grouped columns is 10.'); })); - fit('should not allow grouping by column with no name', fakeAsync(() => { + it('should not allow grouping by column with no name', fakeAsync(() => { const fix = TestBed.createComponent(GroupByEmptyColumnFieldComponent); const grid = fix.componentInstance.instance; fix.detectChanges(); tick(); - debugger; const expr = grid.columns.map(val => { return { fieldName: val.field, dir: SortingDirection.Asc, ignoreCase: true }; }); @@ -2759,9 +2759,10 @@ export class GroupByDataMoreColumnsComponent extends DataParent { template: ` - - + [autoGenerate]='false' + [data]='data'> + + @@ -2770,8 +2771,6 @@ export class GroupByDataMoreColumnsComponent extends DataParent { }) export class GroupByEmptyColumnFieldComponent extends DataParent { public width = '200px'; - public height = null; - @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) public instance: IgxGridComponent; } diff --git a/projects/igniteui-angular/src/test.ts b/projects/igniteui-angular/src/test.ts index 1eb80ff0d3f..0a6901ef4b1 100644 --- a/projects/igniteui-angular/src/test.ts +++ b/projects/igniteui-angular/src/test.ts @@ -17,7 +17,7 @@ getTestBed().initTestEnvironment( platformBrowserDynamicTesting() ); // Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); +const context = require.context('./lib/grids/grid/', true, /\.spec\.ts$/); // And load the modules. context.keys().map(context); From a0e31641185fbe74a95c6a208694a06d4e70d602 Mon Sep 17 00:00:00 2001 From: wnvko Date: Fri, 4 Oct 2019 12:08:03 +0300 Subject: [PATCH 12/48] test(nav-drawer): reset testing module after all nav-drawer tests, #4426 --- .../navigation-drawer.component.spec.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts index 38963131a3e..1224014e186 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts @@ -1,11 +1,4 @@ -import { - async, - ComponentFixture, - fakeAsync, - TestBed, - tick -} from '@angular/core/testing'; - +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { Component, ViewChild, PLATFORM_ID } from '@angular/core'; import { By } from '@angular/platform-browser'; import { wait } from '../test-utils/ui-interactions.spec'; @@ -46,6 +39,10 @@ describe('Navigation Drawer', () => { jasmine.DEFAULT_TIMEOUT_INTERVAL = oldTimeout; }); + afterAll(() => { + TestBed.resetTestingModule(); + }); + it('should initialize without DI service', async(() => { TestBed.compileComponents().then(() => { const fixture = TestBed.createComponent(TestComponent); @@ -561,6 +558,7 @@ describe('Navigation Drawer', () => { const originalWidth = window.innerWidth; const platformUtil: PlatformUtil = new PlatformUtil(TestBed.get(PLATFORM_ID)); const drawer = new IgxNavigationDrawerComponent(null, null, null, null, platformUtil); + // re-enable `getWindowWidth` const widthSpy = (widthSpyOverride as jasmine.Spy).and.callThrough(); let width = widthSpy.call(drawer); From 37a26d2e250919bc2da22eacde5c2e58c3f722bf Mon Sep 17 00:00:00 2001 From: 3phase Date: Fri, 4 Oct 2019 14:46:56 +0300 Subject: [PATCH 13/48] fix(grid): Reverts test.ts to its old state #5643 --- projects/igniteui-angular/src/test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/test.ts b/projects/igniteui-angular/src/test.ts index 0a6901ef4b1..1eb80ff0d3f 100644 --- a/projects/igniteui-angular/src/test.ts +++ b/projects/igniteui-angular/src/test.ts @@ -17,7 +17,7 @@ getTestBed().initTestEnvironment( platformBrowserDynamicTesting() ); // Then we find all the tests. -const context = require.context('./lib/grids/grid/', true, /\.spec\.ts$/); +const context = require.context('./', true, /\.spec\.ts$/); // And load the modules. context.keys().map(context); From d365396b1e107b5281996c7a467d4ce66383e0f6 Mon Sep 17 00:00:00 2001 From: wnvko Date: Mon, 7 Oct 2019 11:02:57 +0300 Subject: [PATCH 14/48] chore(nav-drawer): make isOs and isPlatformBrowser properties, #4426 Also reduce wait in nav-drawer test from 2000 -> 200ms Also remove unnecessary checks for isPlatformBrowser in nav-drawer --- .../igniteui-angular/src/lib/core/touch.ts | 2 +- .../igniteui-angular/src/lib/core/utils.ts | 5 +-- .../src/lib/grids/cell.component.ts | 2 +- .../src/lib/grids/grid/cell.spec.ts | 4 +- .../navigation-drawer.component.spec.ts | 6 +-- .../navigation-drawer.component.ts | 45 ++++++++----------- 6 files changed, 27 insertions(+), 37 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/touch.ts b/projects/igniteui-angular/src/lib/core/touch.ts index 669ccada9f8..f2de9a4e5ff 100644 --- a/projects/igniteui-angular/src/lib/core/touch.ts +++ b/projects/igniteui-angular/src/lib/core/touch.ts @@ -21,7 +21,7 @@ export class HammerGesturesManager { private _hammerManagers: Array<{ element: EventTarget, manager: HammerManager; }> = []; constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any, private platformUtil: PlatformUtil) { - this.platformBrowser = this.platformUtil.isPlatformBrowser(); + this.platformBrowser = this.platformUtil.isPlatformBrowser; if (this.platformBrowser) { this.hammerOptions = { // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065) diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index a78232a77b5..ab6a34156e1 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -231,7 +231,6 @@ export function isFirefox(): boolean { /** * @hidden - * TODO: make injectable, check isPlatformBrowser() */ @Injectable({ providedIn: 'root' }) export class PlatformUtil { @@ -241,12 +240,12 @@ export class PlatformUtil { this.platformBrowser = isPlatformBrowser(this.platformId); } - public isIOS(): boolean { + public get isIOS(): boolean { const iosBrowser = this.platformBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window); return iosBrowser; } - public isPlatformBrowser(): boolean { + public get isPlatformBrowser(): boolean { return this.platformBrowser; } } diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts index 62a82dbaf44..30544936249 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts @@ -588,7 +588,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { this.nativeElement.addEventListener('compositionend', this.compositionEndHandler); } }); - if (this.platformUtil.isIOS()) { + if (this.platformUtil.isIOS) { this.touchManager.addEventListener(this.nativeElement, 'doubletap', this.onDoubleClick, { cssProps: { } /* don't disable user-select, etc */ } as HammerOptions); diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts index f5ea1118fca..af894e2e44e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts @@ -182,7 +182,7 @@ describe('IgxGrid - Cell component #grid', () => { it('Should not attach doubletap handler for non-iOS', () => { const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener'); - spyOn(PlatformUtil.prototype, 'isIOS').and.returnValue(false); + spyOnProperty(PlatformUtil.prototype, 'isIOS').and.returnValue(false); const fix = TestBed.createComponent(DefaultGridComponent); fix.detectChanges(); expect(addListenerSpy).not.toHaveBeenCalled(); @@ -190,7 +190,7 @@ describe('IgxGrid - Cell component #grid', () => { it('Should handle doubletap on iOS, trigger onDoubleClick event', () => { const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener'); - spyOn(PlatformUtil.prototype, 'isIOS').and.returnValue(true); + spyOnProperty(PlatformUtil.prototype, 'isIOS').and.returnValue(true); const fix = TestBed.createComponent(DefaultGridComponent); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts index 1224014e186..36af4b07945 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts @@ -525,7 +525,7 @@ describe('Navigation Drawer', () => { window.dispatchEvent(new Event('resize')); // wait for debounce - await wait(2000); + await wait(200); expect(fixture.componentInstance.navDrawer.pin).toBe(false, `Shouldn't change state on resize if window width is the same`); expect(fixture.componentInstance.pin).toBe(true, 'Parent component pin remain on resize if window width is the same'); fixture.componentInstance.pin = true; @@ -535,7 +535,7 @@ describe('Navigation Drawer', () => { window.dispatchEvent(new Event('resize')); // wait for debounce - await wait(2000); + await wait(200); expect(fixture.componentInstance.navDrawer.pin).toBe(true, 'Should pin on window resize over threshold'); expect(fixture.componentInstance.pin).toBe(true, 'Parent pin update on window resize over threshold'); @@ -543,7 +543,7 @@ describe('Navigation Drawer', () => { window.dispatchEvent(new Event('resize')); // wait for debounce - await wait(2000); + await wait(200); expect(fixture.componentInstance.navDrawer.pin).toBe(false, 'Should un-pin on window resize below threshold'); expect(fixture.componentInstance.pin).toBe(false, 'Parent pin update on window resize below threshold'); fixture.componentInstance.pinThreshold = 500; diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts index 064b94481d2..a1fb2624077 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts @@ -614,10 +614,6 @@ export class IgxNavigationDrawerComponent implements } private getWindowWidth() { - if (!this.platformUtil.isPlatformBrowser()) { - return; - } - return (window.innerWidth > 0) ? window.innerWidth : screen.width; } @@ -625,7 +621,7 @@ export class IgxNavigationDrawerComponent implements * Sets the drawer width. */ private setDrawerWidth(width: string) { - if (this.platformUtil.isPlatformBrowser()) { + if (this.platformUtil.isPlatformBrowser) { requestAnimationFrame(() => { if (this.drawer) { this.renderer.setElementStyle(this.drawer, 'width', width); @@ -659,7 +655,7 @@ export class IgxNavigationDrawerComponent implements this._touchManager.addGlobalEventListener('document', 'panmove', this.pan); this._touchManager.addGlobalEventListener('document', 'panend', this.panEnd); } - if (!this._resizeObserver && this.platformUtil.isPlatformBrowser()) { + if (!this._resizeObserver && this.platformUtil.isPlatformBrowser) { this._resizeObserver = fromEvent(window, 'resize').pipe(debounce(() => interval(150))) .subscribe((value) => { this.checkPinThreshold(value); @@ -677,6 +673,9 @@ export class IgxNavigationDrawerComponent implements } private checkPinThreshold = (evt?: Event) => { + if (!this.platformUtil.isPlatformBrowser) { + return; + } let windowWidth; if (this.pinThreshold) { windowWidth = this.getWindowWidth(); @@ -815,27 +814,19 @@ export class IgxNavigationDrawerComponent implements * @param opacity optional value to apply to the overlay */ private setXSize(x: number, opacity?: string) { - if (this.platformUtil.isPlatformBrowser()) { - // Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO) - window.requestAnimationFrame(() => { - this.setXSizeInternal(x, opacity); - }); - } else { - this.setXSizeInternal(x, opacity); - } - } - - private setXSizeInternal(x: number, opacity?: string) { - if (this.hasAnimateWidth) { - this.renderer.setElementStyle(this.drawer, 'width', x ? Math.abs(x) + 'px' : ''); - } else { - this.renderer.setElementStyle(this.drawer, 'transform', x ? 'translate3d(' + x + 'px,0,0)' : ''); - this.renderer.setElementStyle(this.drawer, '-webkit-transform', - x ? 'translate3d(' + x + 'px,0,0)' : ''); - } - if (opacity !== undefined) { - this.renderer.setElementStyle(this.overlay, 'opacity', opacity); - } + // Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO) + window.requestAnimationFrame(() => { + if (this.hasAnimateWidth) { + this.renderer.setElementStyle(this.drawer, 'width', x ? Math.abs(x) + 'px' : ''); + } else { + const transform = x ? 'translate3d(' + x + 'px,0,0)' : ''; + this.renderer.setElementStyle(this.drawer, 'transform', transform); + this.renderer.setElementStyle(this.drawer, '-webkit-transform', transform); + } + if (opacity !== undefined) { + this.renderer.setElementStyle(this.overlay, 'opacity', opacity); + } + }); } private toggleOpenedEvent = (evt?) => { From af2f5e11a65e1b42212942a54b046bed34bb86f4 Mon Sep 17 00:00:00 2001 From: Diyan Dimitrov Date: Mon, 7 Oct 2019 17:09:00 +0300 Subject: [PATCH 15/48] fix(tabs): add resize observers for tabs #5582 --- .../src/lib/tabs/tab-item.component.ts | 43 +++++++++++++------ .../src/lib/tabs/tabs-group.component.ts | 7 --- .../src/lib/tabs/tabs.common.ts | 2 +- .../src/lib/tabs/tabs.component.ts | 27 ++++++++++-- 4 files changed, 53 insertions(+), 26 deletions(-) diff --git a/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts b/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts index cf05840af10..11891e64ede 100644 --- a/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts @@ -6,20 +6,23 @@ import { HostListener, Input, TemplateRef, - ViewChild + ViewChild, + NgZone, + AfterViewInit, + OnDestroy } from '@angular/core'; import { IgxTabsGroupComponent } from './tabs-group.component'; import { IgxTabItemBase, IgxTabsBase } from './tabs.common'; import { IgxTabItemTemplateDirective } from './tabs.directives'; +import ResizeObserver from 'resize-observer-polyfill'; @Component({ selector: 'igx-tab-item', templateUrl: 'tab-item.component.html' }) -export class IgxTabItemComponent extends IgxTabItemBase { - +export class IgxTabItemComponent extends IgxTabItemBase implements AfterViewInit, OnDestroy { /** * Gets the group associated with the tab. * ```html @@ -82,8 +85,9 @@ export class IgxTabItemComponent extends IgxTabItemBase { private _changesCount = 0; // changes and updates accordingly applied to the tab. private _isSelected = false; private _disabled = false; + private _resizeObserver: ResizeObserver; - constructor(private _tabs: IgxTabsBase, private _element: ElementRef) { + constructor(private _tabs: IgxTabsBase, private _element: ElementRef, private _ngZone: NgZone) { super(); this._nativeTabItem = _element; } @@ -145,6 +149,20 @@ export class IgxTabItemComponent extends IgxTabItemBase { @HostBinding('attr.aria-controls') public ariaControls = 'igx-tab-item-group-' + this.index; + ngAfterViewInit(): void { + this._ngZone.runOutsideAngular(() => { + this._resizeObserver = new ResizeObserver(() => { + this._tabs.transformIndicatorAnimation(this._nativeTabItem.nativeElement, 0); + }); + }); + } + + ngOnDestroy(): void { + this._ngZone.runOutsideAngular(() => { + this._resizeObserver.disconnect(); + }); + } + /** * @hidden */ @@ -153,16 +171,6 @@ export class IgxTabItemComponent extends IgxTabItemBase { this.select(); } - /** - * @hidden - */ - @HostListener('window:resize', ['$event']) - public onResize(event) { - if (this.isSelected) { - this._tabs.transformIndicatorAnimation(this.nativeTabItem.nativeElement); - } - } - /** * @hidden */ @@ -269,6 +277,13 @@ export class IgxTabItemComponent extends IgxTabItemBase { */ public setSelectedInternal(newValue: boolean) { this._isSelected = newValue; + this._ngZone.runOutsideAngular(() => { + if (this._isSelected) { + this._resizeObserver.observe(this._element.nativeElement); + } else { + this._resizeObserver.disconnect(); + } + }); this.tabindex = newValue ? 0 : -1; } diff --git a/projects/igniteui-angular/src/lib/tabs/tabs-group.component.ts b/projects/igniteui-angular/src/lib/tabs/tabs-group.component.ts index d5d5ef9f9b5..1e4b0eede93 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs-group.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs-group.component.ts @@ -93,13 +93,6 @@ export class IgxTabsGroupComponent extends IgxTabsGroupBase implements AfterCont @HostBinding('class.igx-tabs__group') public styleClass = true; - @HostListener('window:resize', ['$event']) - public onResize(event) { - if (this.isSelected) { - this._tabs.transformContentAnimation(this.relatedTab, 0); - } - } - /** * An accessor that returns the `IgxTabItemComponent` component. * ```typescript diff --git a/projects/igniteui-angular/src/lib/tabs/tabs.common.ts b/projects/igniteui-angular/src/lib/tabs/tabs.common.ts index bb186b57ea9..84a29e11e2f 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs.common.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs.common.ts @@ -17,7 +17,7 @@ export abstract class IgxTabsBase { scrollElement(element: any, scrollRight: boolean) {} performSelectionChange(newTab: IgxTabItemBase) {} transformContentAnimation(tab: IgxTabItemBase, duration: number) {} - transformIndicatorAnimation(element: HTMLElement) {} + transformIndicatorAnimation(element: HTMLElement, duration?: number) {} } /** @hidden */ diff --git a/projects/igniteui-angular/src/lib/tabs/tabs.component.ts b/projects/igniteui-angular/src/lib/tabs/tabs.component.ts index 802ae79061f..45c2fc553ef 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs.component.ts @@ -13,7 +13,8 @@ import { QueryList, ViewChild, ViewChildren, - OnDestroy + OnDestroy, + NgZone } from '@angular/core'; import { Subscription } from 'rxjs'; import { IgxBadgeModule } from '../badge/badge.component'; @@ -23,6 +24,7 @@ import { IgxTabItemComponent } from './tab-item.component'; import { IgxTabsGroupComponent } from './tabs-group.component'; import { IgxLeftButtonStyleDirective, IgxRightButtonStyleDirective, IgxTabItemTemplateDirective } from './tabs.directives'; import { IgxTabsBase, IgxTabItemBase } from './tabs.common'; +import ResizeObserver from 'resize-observer-polyfill'; export enum TabsType { FIXED = 'fixed', @@ -228,6 +230,7 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy { private _groupChanges$: Subscription; private _selectedIndex = -1; + private _resizeObserver: ResizeObserver; /** * @hidden @@ -295,7 +298,7 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy { } } - constructor(private _element: ElementRef) { + constructor(private _element: ElementRef, private _ngZone: NgZone) { } /** @@ -326,6 +329,17 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy { this._groupChanges$ = this.groups.changes.subscribe(() => { this.resetSelectionOnCollectionChanged(); }); + + this._ngZone.runOutsideAngular(() => { + this._resizeObserver = new ResizeObserver(() => { + if (!this.hasContentTabs && this._selectedIndex >= 0 && this._selectedIndex < this.tabs.length) { + const newTab = this.tabs.toArray()[this._selectedIndex]; + this.transformContentAnimation(newTab, 0); + } + }); + + this._resizeObserver.observe(this.tabsContainer.nativeElement); + }); } /** @@ -335,6 +349,10 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy { if (this._groupChanges$) { this._groupChanges$.unsubscribe(); } + + this._ngZone.runOutsideAngular(() => { + this._resizeObserver.disconnect(); + }); } private resetSelectionOnCollectionChanged(): void { @@ -445,16 +463,17 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy { // animation for the new panel/group (not needed for tab only mode) public transformContentAnimation(tab: IgxTabItemBase, duration: number): void { const contentOffset = this.tabsContainer.nativeElement.offsetWidth * tab.index; - this.contentsContainer.nativeElement.style.transitionDuration = `${duration}s`; + this.contentsContainer.nativeElement.style.transitionDuration = duration > 0 ? `${duration}s` : 'initial'; this.contentsContainer.nativeElement.style.transform = `translate(${-contentOffset}px)`; } /** * @hidden */ - public transformIndicatorAnimation(element: HTMLElement): void { + public transformIndicatorAnimation(element: HTMLElement, duration = 0.3): void { if (this.selectedIndicator) { this.selectedIndicator.nativeElement.style.visibility = 'visible'; + this.selectedIndicator.nativeElement.style.transitionDuration = duration > 0 ? `${duration}s` : 'initial'; this.selectedIndicator.nativeElement.style.width = `${element.offsetWidth}px`; this.selectedIndicator.nativeElement.style.transform = `translate(${element.offsetLeft}px)`; } From 3f1e24c7a7163890d2bd5127b0520cd85608f8e7 Mon Sep 17 00:00:00 2001 From: Diyan Dimitrov Date: Mon, 7 Oct 2019 17:36:57 +0300 Subject: [PATCH 16/48] fix(tabs): check if resize observer is created #5582 --- .../src/lib/tabs/tab-item.component.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts b/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts index 11891e64ede..4ef47be3e1c 100644 --- a/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts @@ -278,10 +278,12 @@ export class IgxTabItemComponent extends IgxTabItemBase implements AfterViewInit public setSelectedInternal(newValue: boolean) { this._isSelected = newValue; this._ngZone.runOutsideAngular(() => { - if (this._isSelected) { - this._resizeObserver.observe(this._element.nativeElement); - } else { - this._resizeObserver.disconnect(); + if (this._resizeObserver) { + if (this._isSelected) { + this._resizeObserver.observe(this._element.nativeElement); + } else { + this._resizeObserver.disconnect(); + } } }); this.tabindex = newValue ? 0 : -1; From 37051f7ee6471c14aa54b044eae845d7f05c25d0 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 7 Oct 2019 18:20:54 +0300 Subject: [PATCH 17/48] feat(highlight): replace inline styles with theme Closes #5403 --- .../highlight/highlight-component.scss | 20 ++++++ .../components/highlight/highlight-theme.scss | 70 +++++++++++++++++++ .../src/lib/core/styles/themes/_core.scss | 1 + .../src/lib/core/styles/themes/_index.scss | 5 ++ .../themes/schemas/dark/_highlight.scss | 20 ++++++ .../styles/themes/schemas/dark/_index.scss | 5 ++ .../themes/schemas/light/_highlight.scss | 39 +++++++++++ .../styles/themes/schemas/light/_index.scss | 4 ++ .../themes/schemas/round-light/_index.scss | 3 + .../themes/schemas/square-light/_index.scss | 3 + .../text-highlight.directive.ts | 13 ++-- src/styles/igniteui-theme.scss | 24 +++---- 12 files changed, 190 insertions(+), 17 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-component.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_highlight.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_highlight.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-component.scss new file mode 100644 index 00000000000..21c3552dc5a --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-component.scss @@ -0,0 +1,20 @@ +//// +/// @group components +/// @author Simeon Simeonoff +/// @requires {mixin} bem-block +/// @requires {mixin} bem-elem +/// @requires {mixin} bem-mod +//// +@include b(igx-highlight) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(str-slice($this, 2, -1)); + + @extend %igx-highlight !optional; + + @include m(active) { + @extend %igx-highlight !optional; + @extend %igx-highlight--active !optional; + } +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss new file mode 100644 index 00000000000..89a8adfb9c5 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss @@ -0,0 +1,70 @@ +//// +/// @group themes +/// @access public +/// @author Simeon Simeonoff +//// + +/// If only background color(s) specified, text color(s) will be assigned automatically to a contrasting color. +/// @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} $resting-background [null]- The background color used for the highlight in its resting state. +/// @param {Color} $resting-color [null] - The text color used for the highlight in its resting state. +/// @param {Color} $active-background [null] - The background color used for the highlight in its active state. +/// @param {Color} $active-color [null] - The text color used for the highlight in its active state. +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires text-contrast +/// @requires extend +/// +/// @example scss Change the background and icon colors in icon highlight +/// $my-avatar-theme: igx-avatar-theme($icon-background: black, $icon-color: white); +/// // Pass the theme to the igx-avatar component mixin +/// @include igx-avatar($my-avatar-theme); +@function igx-highlight-theme( + $palette: $default-palette, + $schema: $light-schema, + $resting-background: null, + $resting-color: null, + $active-background: null, + $active-color: null, +) { + $name: 'igx-highlight'; + $theme: apply-palette(map-get($schema, $name), $palette); + + @if not($resting-color) and $resting-background { + $resting-color: text-contrast($resting-background); + } + + @if not($active-color) and $active-background { + $active-color: text-contrast($active-background); + } + + @return extend($theme, ( + name: $name, + palette: $palette, + resting-background: $resting-background, + resting-color: $resting-color, + active-background: $active-background, + active-color: $active-color, + )); +} + +/// @param {Map} $theme - The theme used to style the component. +/// @requires {mixin} igx-root-css-vars +/// @requires rem +/// @requires --var +@mixin igx-highlight($theme) { + @include igx-root-css-vars($theme); + + %igx-highlight { + color: --var($theme, 'resting-color'); + background: --var($theme, 'resting-background'); + } + + %igx-highlight--active { + color: --var($theme, 'active-color'); + background: --var($theme, 'active-background'); + } +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss index 5b48aabcbf0..bf61d59d43a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss @@ -42,6 +42,7 @@ @import '../components/grid-summary/grid-summary-component'; @import '../components/grid-paginator/grid-paginator-component'; @import '../components/grid-toolbar/grid-toolbar-component'; +@import '../components/highlight/highlight-component'; @import '../components/icon/icon-component'; @import '../components/input/input-group-component'; @import '../components/list/list-component'; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss index c38ac6926fc..3eb9f776c84 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss @@ -29,6 +29,7 @@ @import '../components/grid-summary/grid-summary-theme'; @import '../components/grid-paginator/grid-paginator-theme'; @import '../components/grid-toolbar/grid-toolbar-theme'; +@import '../components/highlight/highlight-theme'; @import '../components/overlay/overlay-theme'; @import '../components/toast/toast-theme'; @import '../components/tooltip/tooltip-theme'; @@ -278,6 +279,10 @@ @include igx-grid-toolbar(igx-grid-toolbar-theme($palette, $schema)); } + @if not(index($exclude, 'igx-highlight')) { + @include igx-highlight(igx-highlight-theme($palette, $schema)); + } + @if not(index($exclude, 'igx-icon')) { @include igx-icon(igx-icon-theme($palette, $schema)); } diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_highlight.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_highlight.scss new file mode 100644 index 00000000000..4eae2ce3c2f --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_highlight.scss @@ -0,0 +1,20 @@ +@import '../light/highlight'; +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark highlight schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-highlight +/// @see $default-palette +$_dark-highlight: extend($_light-highlight); + +/// Generates a dark fluent highlight schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-highlight +$_dark-fluent-highlight: extend($_fluent-highlight); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss index c1838937e46..863fefe3c15 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss @@ -25,6 +25,7 @@ @import './grid-pagination'; @import './grid-summary'; @import './grid-toolbar'; +@import './highlight'; @import './icon'; @import './input-group'; @import './list'; @@ -66,6 +67,7 @@ /// @property {Map} igx-grid-paginator [$_dark-grid-pagination] /// @property {Map} igx-grid-summary [$_dark-grid-summary] /// @property {Map} igx-grid-toolbar [$_dark-grid-toolbar] +/// @property {Map} igx-highlight [$_dark-highlight] /// @property {Map} igx-icon [$_dark-icon] /// @property {Map} igx-input-group [$_dark-input-group] /// @property {Map} igx-list [$_dark-list] @@ -106,6 +108,7 @@ $dark-schema: ( igx-grid-paginator: $_dark-grid-pagination, igx-grid-summary: $_dark-grid-summary, igx-grid-toolbar: $_dark-grid-toolbar, + igx-highlight: $_dark-highlight, igx-icon: $_dark-icon, igx-input-group: $_dark-input-group, igx-list: $_dark-list, @@ -149,6 +152,7 @@ $dark-schema: ( /// @property {map} igx-grid-paginator: [$_dark-fluent-grid-pagination], /// @property {map} igx-grid-summary: [$_dark-fluent-grid-summary], /// @property {map} igx-grid-toolbar: [$_dark-fluent-grid-toolbar], +/// @property {map} igx-highlight: [$_dark-fluent-highlight], /// @property {map} igx-icon: [$_dark-fluent-icon], /// @property {map} igx-input-group: [$_dark-fluent-input-group], /// @property {map} igx-list: [$_dark-fluent-list], @@ -189,6 +193,7 @@ $dark-fluent-schema: ( igx-grid-paginator: $_dark-fluent-grid-pagination, igx-grid-summary: $_dark-fluent-grid-summary, igx-grid-toolbar: $_dark-fluent-grid-toolbar, + igx-highlight: $_dark-fluent-highlight, igx-icon: $_dark-fluent-icon, igx-input-group: $_dark-fluent-input-group, igx-list: $_dark-fluent-list, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_highlight.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_highlight.scss new file mode 100644 index 00000000000..836323e482c --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_highlight.scss @@ -0,0 +1,39 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light highlight schema. +/// @type {Map} +/// @property {Map} resting-background [igx-color: ('secondary', 400)] - The background color used for the highlight in its resting state. +/// @property {Map} resting-color [igx-color: ('secondary', 400), text-contrast: ()] - The icon color used for the highlight in its resting state. +/// @property {Map} active-background [igx-color: ('secondary', 600)] - The background color used for the highlight in its active state. +/// @property {Map} active-color [igx-color: ('secondary', 400), text-contrast: ()] - The text color used for the highlight in its active state. +/// @see $default-palette +$_light-highlight: ( + resting-background: ( + igx-color: ('secondary', 50) + ), + + resting-color: ( + igx-color: ('secondary', 50), + text-contrast: () + ), + + active-background: ( + igx-color: ('secondary', 200) + ), + + active-color: ( + igx-color: ('secondary', 200), + text-contrast: () + ), +); + +/// Generates a fluent highlight schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-highlight +$_fluent-highlight: extend($_light-highlight); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss index c6dee81a4d2..ce6dd1bd7c9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss @@ -26,6 +26,7 @@ @import './grid-pagination'; @import './grid-summary'; @import './grid-toolbar'; +@import './highlight'; @import './icon'; @import './input-group'; @import './list'; @@ -67,6 +68,7 @@ /// @property {Map} igx-grid-paginator [$_light-grid-pagination] /// @property {Map} igx-grid-summary [$_light-grid-summary] /// @property {Map} igx-grid-toolbar [$_light-grid-toolbar] +/// @property {Map} igx-highlight [$_light-highlight] /// @property {Map} igx-icon [$_light-icon] /// @property {Map} igx-input-group [$_light-input-group] /// @property {Map} igx-list [$_light-list] @@ -110,6 +112,7 @@ $light-schema: ( igx-grid-paginator: $_light-grid-pagination, igx-grid-summary: $_light-grid-summary, igx-grid-toolbar: $_light-grid-toolbar, + igx-highlight: $_light-highlight, igx-icon: $_light-icon, igx-input-group: $_light-input-group, igx-list: $_light-list, @@ -153,6 +156,7 @@ $light-fluent-schema: ( igx-grid-paginator: $_fluent-grid-pagination, igx-grid-summary: $_fluent-grid-summary, igx-grid-toolbar: $_fluent-grid-toolbar, + igx-highlight: $_fluent-highlight, igx-icon: $_fluent-icon, igx-input-group: $_fluent-input-group, igx-list: $_fluent-list, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/round-light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/round-light/_index.scss index 5c8417e25d9..a6b35ca91eb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/round-light/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/round-light/_index.scss @@ -26,6 +26,7 @@ @import '../light/grid-pagination'; @import '../light/grid-summary'; @import '../light/grid-toolbar'; +@import '../light/highlight'; @import '../light/icon'; @import '../light/input-group'; @import '../light/list'; @@ -67,6 +68,7 @@ /// @property {Map} igx-grid-paginator [$_light-grid-pagination] /// @property {Map} igx-grid-summary [$_light-grid-summary] /// @property {Map} igx-grid-toolbar [$_light-grid-toolbar] +/// @property {Map} igx-highlight [$_light-highlight] /// @property {Map} igx-icon [$_light-icon] /// @property {Map} igx-input-group [$_light-input-group] /// @property {Map} igx-list [$_light-list] @@ -108,6 +110,7 @@ $light-round-schema: ( igx-grid-paginator: extend($_light-grid-pagination, $_round-shape-grid-pagination), igx-grid-summary: extend($_light-grid-summary, $_round-shape-grid-summary), igx-grid-toolbar: extend($_light-grid-toolbar, $_round-shape-tooltip), + igx-highlight: $_light-highlight, igx-icon: extend($_light-icon, $_round-shape-icon), igx-input-group: extend($_light-input-group, $_round-shape-input-group), igx-list: extend($_light-list, $_round-shape-list), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/square-light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/square-light/_index.scss index ba885ee310c..779b6581809 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/square-light/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/square-light/_index.scss @@ -26,6 +26,7 @@ @import '../light/grid-pagination'; @import '../light/grid-summary'; @import '../light/grid-toolbar'; +@import '../light/highlight'; @import '../light/icon'; @import '../light/input-group'; @import '../light/list'; @@ -67,6 +68,7 @@ /// @property {Map} igx-grid-paginator [$_light-grid-pagination] /// @property {Map} igx-grid-summary [$_light-grid-summary] /// @property {Map} igx-grid-toolbar [$_light-grid-toolbar] +/// @property {Map} igx-highlight [$_light-highlight] /// @property {Map} igx-icon [$_light-icon] /// @property {Map} igx-input-group [$_light-input-group] /// @property {Map} igx-list [$_light-list] @@ -108,6 +110,7 @@ $light-square-schema: ( igx-grid-paginator: extend($_light-grid-pagination, $_square-shape-grid-pagination), igx-grid-summary: extend($_light-grid-summary, $_square-shape-grid-summary), igx-grid-toolbar: extend($_light-grid-toolbar, $_square-shape-tooltip), + igx-highlight: $_light-highlight, igx-icon: extend($_light-icon, $_square-shape-icon), igx-input-group: extend($_light-input-group, $_square-shape-input-group), igx-list: extend($_light-list, $_square-shape-list), diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts index cbca1ab7dd9..e4ef8380b4f 100644 --- a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts @@ -9,7 +9,8 @@ import { OnDestroy, Renderer2, SimpleChanges, - AfterViewChecked + AfterViewChecked, + HostBinding } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; @@ -67,6 +68,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke private _forceEvaluation = false; private _activeElementIndex = -1; private _valueChanged: boolean; + private _defaultCssClass = 'igx-highlight'; + private _defaultActiveCssClass = 'igx-highlight--active'; /** * Determines the `CSS` class of the highlight elements. @@ -391,8 +394,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke } const elementToActivate = spans[index]; + this.renderer.addClass(elementToActivate, this._defaultActiveCssClass); this.renderer.addClass(elementToActivate, this.activeCssClass); - this.renderer.setAttribute(elementToActivate, 'style', 'background:orange;color:black'); } } @@ -409,8 +412,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke } const elementToDeactivate = spans[this._activeElementIndex]; + this.renderer.removeClass(elementToDeactivate, this._defaultActiveCssClass); this.renderer.removeClass(elementToDeactivate, this.activeCssClass); - this.renderer.setAttribute(elementToDeactivate, 'style', 'background:yellow;color:black'); this._activeElementIndex = -1; } @@ -437,7 +440,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke if (exactMatch) { if (contentStringResolved === searchTextResolved) { // tslint:disable-next-line:max-line-length - this.appendSpan(`${stringValue}`); + this.appendSpan(`${stringValue}`); matchCount++; } else { this.appendText(stringValue); @@ -452,7 +455,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke this.appendText(stringValue.substring(previousMatchEnd, start)); // tslint:disable-next-line:max-line-length - this.appendSpan(`${stringValue.substring(start, end)}`); + this.appendSpan(`${stringValue.substring(start, end)}`); previousMatchEnd = end; matchCount++; diff --git a/src/styles/igniteui-theme.scss b/src/styles/igniteui-theme.scss index eb1227b4153..06ff70f7ce6 100644 --- a/src/styles/igniteui-theme.scss +++ b/src/styles/igniteui-theme.scss @@ -26,13 +26,13 @@ .dark-theme { $igx-background-color: #333; $igx-foreground-color: text-contrast($igx-background-color); - + background: $igx-background-color; color: $igx-foreground-color; - + @include scrollbar-love(lighten($igx-background-color, 15%)); @include igx-dark-theme($green-palette); - + .nav-header { @include nav-logo('../assets/images/rsrcs/igniteui-logo-dark-bg', $igx-background-color); } @@ -41,7 +41,7 @@ .fluent-excel-theme { $igx-background-color: #fff; $igx-foreground-color: text-contrast($igx-background-color); - + background: $igx-background-color; color: $igx-foreground-color; @@ -71,13 +71,13 @@ .fluent-excel-dark-theme { $igx-background-color: #333; $igx-foreground-color: text-contrast($igx-background-color); - + background: $igx-background-color; color: $igx-foreground-color; - + @include scrollbar-love(lighten($igx-background-color, 15%)); @include igx-fluent-dark-theme($fluent-excel-palette); - + .nav-header { @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-foreground-color); } @@ -86,13 +86,13 @@ .light-square-theme { $igx-background-color: #fff; $igx-foreground-color: text-contrast($igx-background-color); - + background: $igx-background-color; color: $igx-foreground-color; - + @include scrollbar-love(); @include igx-light-square-theme($purple-palette); - + .nav-header { @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-background-color); } @@ -101,10 +101,10 @@ .light-round-theme { $igx-background-color: #fff; $igx-foreground-color: text-contrast($igx-background-color); - + background: $igx-background-color; color: $igx-foreground-color; - + @include scrollbar-love(); @include igx-theme($palette: $purple-palette, $schema: $light-round-schema); } From 1d29d0083b1f6b1a66c53a9d9203a322bb89d429 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 8 Oct 2019 10:18:34 +0300 Subject: [PATCH 18/48] test(text-highlight): fix failing tests --- .../text-highlight.directive.spec.ts | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts index ff8d3d62f24..a8c48bb0516 100644 --- a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts @@ -288,21 +288,6 @@ describe('IgxHighlight', () => { const activeSpans = fix.debugElement.nativeElement.querySelectorAll('.' + component.activeHighlightClass); expect(spans.length).toBe(4); expect(activeSpans.length).toBe(1); - - const activeSpan = activeSpans[0]; - const activeStyle = getComputedStyle(activeSpan); - expect(activeStyle.background.indexOf('rgb(255, 165, 0)')).toBe(0); - expect(activeStyle.color).toBe('rgb(0, 0, 0)'); - expect(activeStyle.fontWeight).toBe('400'); - - for (const span of spans) { - if (span !== activeSpan) { - const style = getComputedStyle(span); - expect(style.background.indexOf('rgb(255, 255, 0)')).toBe(0); - expect(style.color).toBe('rgb(0, 0, 0)'); - expect(style.fontWeight).toBe('400'); - } - } }); }); From f2af8316fc093f979f2dade70311fbd4f7954a1a Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 8 Oct 2019 11:17:33 +0300 Subject: [PATCH 19/48] chore(changelog): update the changelog --- CHANGELOG.md | 5 ++++- .../directives/text-highlight/text-highlight.directive.ts | 1 - 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 232dc500cb0..8634d1855e5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,10 @@ -# Ignite UI for Angular Change Log +# Ignite UI for Angular Change Log All notable changes for each version of this project will be documented in this file. +## 8.2.1 +- `IgxTextHighlightDirective` - The default highlight directive styles have been moved to a Sass theme - `igx-highlight-theme`; You can modify the resting and active background and text color styles of the directive by passing the respective properties to the Sass theme. You can still pass your own CSS classes to the highlight directive via the cssClass and activeCssClass inputs. + ## 8.2.0 ### New theme Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system. diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts index e4ef8380b4f..73a42652984 100644 --- a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts @@ -10,7 +10,6 @@ import { Renderer2, SimpleChanges, AfterViewChecked, - HostBinding } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; From 656274021ca6c0cdbd22d5fd2630f42697b9b8de Mon Sep 17 00:00:00 2001 From: wnvko Date: Tue, 8 Oct 2019 11:52:53 +0300 Subject: [PATCH 20/48] chore(nav-drawer): change isPlatform and isIOS to public fields --- projects/igniteui-angular/src/lib/core/touch.ts | 2 +- projects/igniteui-angular/src/lib/core/utils.ts | 14 +++----------- .../src/lib/grids/grid/cell.spec.ts | 14 +++++++++++--- .../navigation-drawer.component.ts | 6 +++--- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/touch.ts b/projects/igniteui-angular/src/lib/core/touch.ts index f2de9a4e5ff..65580066f9e 100644 --- a/projects/igniteui-angular/src/lib/core/touch.ts +++ b/projects/igniteui-angular/src/lib/core/touch.ts @@ -21,7 +21,7 @@ export class HammerGesturesManager { private _hammerManagers: Array<{ element: EventTarget, manager: HammerManager; }> = []; constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any, private platformUtil: PlatformUtil) { - this.platformBrowser = this.platformUtil.isPlatformBrowser; + this.platformBrowser = this.platformUtil.isBrowser; if (this.platformBrowser) { this.hammerOptions = { // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065) diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index ab6a34156e1..1d4a72f24ea 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -234,19 +234,11 @@ export function isFirefox(): boolean { */ @Injectable({ providedIn: 'root' }) export class PlatformUtil { - private platformBrowser: boolean; + public isBrowser: boolean = isPlatformBrowser(this.platformId); - constructor(@Inject(PLATFORM_ID) private platformId: Object) { - this.platformBrowser = isPlatformBrowser(this.platformId); - } + public isIOS = this.isBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window); - public get isIOS(): boolean { - const iosBrowser = this.platformBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window); - return iosBrowser; - } - - public get isPlatformBrowser(): boolean { - return this.platformBrowser; + constructor(@Inject(PLATFORM_ID) private platformId: Object) { } } diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts index af894e2e44e..ecbfc912386 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts @@ -182,20 +182,26 @@ describe('IgxGrid - Cell component #grid', () => { it('Should not attach doubletap handler for non-iOS', () => { const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener'); - spyOnProperty(PlatformUtil.prototype, 'isIOS').and.returnValue(false); + const platformUtil: PlatformUtil = TestBed.get(PlatformUtil); + const oldIsIOS = platformUtil.isIOS; + platformUtil.isIOS = false; const fix = TestBed.createComponent(DefaultGridComponent); fix.detectChanges(); + // spyOnProperty(PlatformUtil.prototype, 'isIOS').and.returnValue(false); expect(addListenerSpy).not.toHaveBeenCalled(); + + platformUtil.isIOS = oldIsIOS; }); it('Should handle doubletap on iOS, trigger onDoubleClick event', () => { const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener'); - spyOnProperty(PlatformUtil.prototype, 'isIOS').and.returnValue(true); + const platformUtil: PlatformUtil = TestBed.get(PlatformUtil); + const oldIsIOS = platformUtil.isIOS; + platformUtil.isIOS = true; const fix = TestBed.createComponent(DefaultGridComponent); fix.detectChanges(); const grid = fix.componentInstance.instance; - const cellElem = fix.debugElement.query(By.css(CELL_CSS_CLASS)); const firstCell = grid.getCellByColumn(0, 'index'); // should attach 'doubletap' @@ -218,6 +224,8 @@ describe('IgxGrid - Cell component #grid', () => { expect(event.preventDefault).toHaveBeenCalled(); expect(grid.onDoubleClick.emit).toHaveBeenCalledWith(args); expect(firstCell).toBe(fix.componentInstance.clickedCell); + + platformUtil.isIOS = oldIsIOS; }); it('Should blur selected cell when scrolling with mouse wheel', (async () => { diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts index a1fb2624077..ce889b4d62f 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts @@ -621,7 +621,7 @@ export class IgxNavigationDrawerComponent implements * Sets the drawer width. */ private setDrawerWidth(width: string) { - if (this.platformUtil.isPlatformBrowser) { + if (this.platformUtil.isBrowser) { requestAnimationFrame(() => { if (this.drawer) { this.renderer.setElementStyle(this.drawer, 'width', width); @@ -655,7 +655,7 @@ export class IgxNavigationDrawerComponent implements this._touchManager.addGlobalEventListener('document', 'panmove', this.pan); this._touchManager.addGlobalEventListener('document', 'panend', this.panEnd); } - if (!this._resizeObserver && this.platformUtil.isPlatformBrowser) { + if (!this._resizeObserver && this.platformUtil.isBrowser) { this._resizeObserver = fromEvent(window, 'resize').pipe(debounce(() => interval(150))) .subscribe((value) => { this.checkPinThreshold(value); @@ -673,7 +673,7 @@ export class IgxNavigationDrawerComponent implements } private checkPinThreshold = (evt?: Event) => { - if (!this.platformUtil.isPlatformBrowser) { + if (!this.platformUtil.isBrowser) { return; } let windowWidth; From dcd4bd417a127f5fd7c2be268e76fd6ac7983ddd Mon Sep 17 00:00:00 2001 From: Viktor Slavov Date: Tue, 8 Oct 2019 14:42:49 +0300 Subject: [PATCH 21/48] fix(combo): fix combo label position with no placeholder, #5599 (#5916) --- projects/igniteui-angular/src/lib/combo/combo.component.html | 4 ++-- projects/igniteui-angular/src/lib/combo/combo.component.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html index 6584ac0695d..3643e909e0f 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.html +++ b/projects/igniteui-angular/src/lib/combo/combo.component.html @@ -24,7 +24,7 @@ - @@ -47,7 +47,7 @@ diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index 5297e6e1a8b..65372dc2fda 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -670,7 +670,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas * ``` */ @Input() - public placeholder = ''; + public placeholder; /** * @hidden @internal From 26407d7fc247f60e30cb47714ee0fdbd739d1979 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 8 Oct 2019 14:50:03 +0300 Subject: [PATCH 22/48] chore(*): Moving resizeObserverIgnoreError in configureTestSuite. --- .../lib/directives/for-of/for_of.directive.spec.ts | 2 -- .../src/lib/grids/grid/column-resizing.spec.ts | 3 --- .../src/lib/grids/grid/grid-cell-selection.spec.ts | 3 +-- .../lib/grids/grid/grid-filtering-advanced.spec.ts | 2 -- .../src/lib/grids/grid/grid-filtering-ui.spec.ts | 12 ++---------- .../src/lib/grids/grid/grid-summary.spec.ts | 3 --- .../src/lib/grids/grid/grid.component.spec.ts | 3 --- .../src/lib/grids/grid/grid.groupby.spec.ts | 3 --- .../src/lib/grids/grid/grid.pagination.spec.ts | 3 --- .../src/lib/grids/grid/grid.search.spec.ts | 4 +--- .../src/lib/grids/grid/row-drag.directive.spec.ts | 4 ---- .../hierarchical-grid.integration.spec.ts | 4 ---- .../hierarchical-grid.navigation.spec.ts | 3 +-- .../hierarchical-grid/hierarchical-grid.spec.ts | 3 --- .../hierarchical-grid.virtualization.spec.ts | 8 +------- .../lib/grids/tree-grid/tree-grid-expanding.spec.ts | 3 --- .../src/lib/grids/tree-grid/tree-grid-search.spec.ts | 2 -- .../src/lib/test-utils/configure-suite.ts | 2 ++ .../src/lib/test-utils/helper-utils.spec.ts | 1 + 19 files changed, 9 insertions(+), 59 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts index 421fd5e245b..2429a8ef82a 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts @@ -24,7 +24,6 @@ import { take } from 'rxjs/operators'; import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec'; import { configureTestSuite } from '../../test-utils/configure-suite'; -import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; describe('IgxForOf directive -', () => { const INACTIVE_VIRT_CONTAINER = 'igx-display-container--inactive'; @@ -294,7 +293,6 @@ describe('IgxForOf directive -', () => { }); it('should always fill available space for last chunk size calculation - vertical virtualization', async () => { - resizeObserverIgnoreError(); fix.componentInstance.height = '1900px'; const virtualContainer = fix.componentInstance.parentVirtDir; virtualContainer.igxForSizePropName = 'height'; diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 3bfcb69f9c9..ce8832c1037 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -13,7 +13,6 @@ import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { IColumnResized } from '../../test-utils/grid-interfaces.spec'; import { MultiColumnHeadersComponent } from '../../test-utils/grid-samples.spec'; import { configureTestSuite } from '../../test-utils/configure-suite'; -import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; describe('IgxGrid - Deferred Column Resizing #grid', () => { configureTestSuite(); @@ -192,8 +191,6 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { const fixture = TestBed.createComponent(ResizableColumnsComponent); fixture.detectChanges(); - resizeObserverIgnoreError(); - const grid = fixture.componentInstance.grid; const column = grid.getColumnByName('ID'); const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts index 28ca55b6fb9..08961fe66f1 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts @@ -10,7 +10,7 @@ import { SelectionWithScrollsComponent, import { SortingDirection } from '../../data-operations/sorting-expression.interface'; import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec'; -import { setupGridScrollDetection, resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; +import { setupGridScrollDetection } from '../../test-utils/helper-utils.spec'; import { DefaultSortingStrategy } from 'igniteui-angular'; import { GridSelectionMode } from '../common/enums'; @@ -1616,7 +1616,6 @@ describe('IgxGrid - Cell selection #grid', () => { let detect; beforeEach(fakeAsync(/** height/width setter rAF */() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(SelectionWithScrollsComponent); fix.detectChanges(); grid = fix.componentInstance.grid; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts index 14bdf57eb43..d20af1516bb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts @@ -15,7 +15,6 @@ import { FilteringLogic } from '../../data-operations/filtering-expression.inter import { IgxGridAdvancedFilteringComponent } from '../../test-utils/grid-samples.spec'; -import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; const ADVANCED_FILTERING_OPERATOR_LINE_AND_CSS_CLASS = 'igx-filter-tree__line--and'; const ADVANCED_FILTERING_OPERATOR_LINE_OR_CSS_CLASS = 'igx-filter-tree__line--or'; @@ -42,7 +41,6 @@ describe('IgxGrid - Advanced Filtering', () => { describe('', () => { let fix, grid: IgxGridComponent; beforeEach(fakeAsync(() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(IgxGridAdvancedFilteringComponent); grid = fix.componentInstance.grid; fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 87fbe4e5421..3462baba806 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -43,7 +43,7 @@ import { IgxGridFilteringESFLoadOnDemandComponent, CustomFilteringStrategyComponent } from '../../test-utils/grid-samples.spec'; -import { HelperUtils, resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; +import { HelperUtils } from '../../test-utils/helper-utils.spec'; import { GridSelectionMode, FilterMode } from '../common/enums'; const FILTER_UI_ROW = 'igx-grid-filtering-row'; @@ -68,7 +68,6 @@ describe('IgxGrid - Filtering actions #grid', () => { let fix, grid; beforeEach(fakeAsync(() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(IgxGridFilteringComponent); fix.detectChanges(); @@ -1693,7 +1692,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { describe(null, () => { let fix, grid; beforeEach(fakeAsync(() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(IgxGridFilteringComponent); fix.detectChanges(); grid = fix.componentInstance.grid; @@ -3415,7 +3413,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { describe(null, () => { let fix, grid; beforeEach(fakeAsync(() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(IgxGridFilteringMCHComponent); fix.detectChanges(); grid = fix.componentInstance.grid; @@ -3531,7 +3528,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { describe(null, () => { let fix, grid; beforeEach(fakeAsync(() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(IgxGridFilteringScrollComponent); grid = fix.componentInstance.grid; fix.detectChanges(); @@ -3564,7 +3560,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { describe(null, () => { let fix, grid; beforeEach(fakeAsync(() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(IgxGridFilteringTemplateComponent); fix.detectChanges(); grid = fix.componentInstance.grid; @@ -3621,7 +3616,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { describe(null, () => { let fix, grid; beforeEach(fakeAsync(() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(IgxGridFilteringComponent); grid = fix.componentInstance.grid; grid.filterMode = FilterMode.excelStyleFilter; @@ -5688,7 +5682,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { describe(null, () => { let fix, grid; beforeEach(fakeAsync(() => { - resizeObserverIgnoreError(); + fix = TestBed.createComponent(IgxGridFilteringESFTemplatesComponent); fix.detectChanges(); grid = fix.componentInstance.grid; @@ -5731,7 +5725,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { describe(null, () => { let fix, grid; beforeEach(fakeAsync(() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(IgxTestExcelFilteringDatePickerComponent); fix.detectChanges(); grid = fix.componentInstance.grid; @@ -5851,7 +5844,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { let grid; beforeEach(async(() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(CustomFilteringStrategyComponent); grid = fix.componentInstance.grid; fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts index 362e715bd4d..fcf804821b1 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts @@ -209,7 +209,6 @@ describe('IgxGrid - Summaries #grid', () => { })); it('should render correct data after hiding one bigger and then one smaller summary when scrolled to the bottom', (async () => { - resizeObserverIgnoreError(); const fixture = TestBed.createComponent(VirtualSummaryColumnComponent); fixture.detectChanges(); await wait(100); @@ -292,7 +291,6 @@ describe('IgxGrid - Summaries #grid', () => { let fix; let grid: IgxGridComponent; beforeEach(fakeAsync(/** height/width setter rAF */() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(SummaryColumnComponent); fix.detectChanges(); grid = fix.componentInstance.grid; @@ -1163,7 +1161,6 @@ describe('IgxGrid - Summaries #grid', () => { let fix; let grid; beforeEach(fakeAsync(/** height/width setter rAF */() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(SummariesGroupByTransactionsComponent); fix.detectChanges(); grid = fix.componentInstance.grid; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index f59827372f0..35b585ad7d3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts @@ -1016,7 +1016,6 @@ describe('IgxGrid Component Tests #grid', () => { it(`should render 10 records if height is 100% and parent container's height is unset and display density is changed`, async () => { - resizeObserverIgnoreError(); const fix = TestBed.createComponent(IgxGridWrappedInContComponent); fix.detectChanges(); @@ -1593,8 +1592,6 @@ describe('IgxGrid Component Tests #grid', () => { }); it('IgxTabs: should initialize a grid with correct width/height', async () => { - resizeObserverIgnoreError(); - const grid = fix.componentInstance.grid3; const tab = fix.componentInstance.tabs; expect(grid.calcHeight).toBe(510); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index 8c870292433..2e6476f5212 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -715,7 +715,6 @@ describe('IgxGrid - GroupBy #grid', () => { })); it('should allow grouping of already sorted column', async(() => { - resizeObserverIgnoreError(); const fix = TestBed.createComponent(DefaultGridComponent); const grid = fix.componentInstance.instance; fix.componentInstance.enableSorting = true; @@ -1407,7 +1406,6 @@ describe('IgxGrid - GroupBy #grid', () => { })); it('should update horizontal virtualization state correcly when data row views are re-used from cache.', async () => { - resizeObserverIgnoreError(); const fix = TestBed.createComponent(GroupableGridComponent); const grid = fix.componentInstance.instance; fix.detectChanges(); @@ -1834,7 +1832,6 @@ describe('IgxGrid - GroupBy #grid', () => { })); it('should reorder groups when reordering chip', async () => { - resizeObserverIgnoreError(); const fix = TestBed.createComponent(DefaultGridComponent); const grid = fix.componentInstance.instance; fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts index 9916f6c03fb..9f9e8ecb5f0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts @@ -9,7 +9,6 @@ import { IgxGridComponent } from './grid.component'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { wait } from '../../test-utils/ui-interactions.spec'; import { IgxNumberFilteringOperand } from '../../data-operations/filtering-condition'; -import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; import { GridFunctions } from '../../test-utils/grid-functions.spec'; describe('IgxGrid - Grid Paging #grid', () => { @@ -192,7 +191,6 @@ describe('IgxGrid - Grid Paging #grid', () => { })); it('change paging pages per page API', (async () => { - resizeObserverIgnoreError(); const fix = TestBed.createComponent(ReorderedColumnsComponent); fix.detectChanges(); @@ -306,7 +304,6 @@ describe('IgxGrid - Grid Paging #grid', () => { })); it('should change not leave prev page data after scorlling', (async () => { - resizeObserverIgnoreError(); const fix = TestBed.createComponent(PagingComponent); fix.componentInstance.perPage = 5; fix.componentInstance.grid.height = '300px'; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts index 90677228689..f28439576c8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts @@ -12,7 +12,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { wait } from '../../test-utils/ui-interactions.spec'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { DataType } from '../../data-operations/data-util'; -import { setupGridScrollDetection, resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; +import { setupGridScrollDetection } from '../../test-utils/helper-utils.spec'; describe('IgxGrid - search API #grid', () => { configureTestSuite(); @@ -834,7 +834,6 @@ describe('IgxGrid - search API #grid', () => { /* ScrollableGrid */ describe('', () => { beforeEach(async () => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(ScrollableGridSearchComponent); fix.detectChanges(); @@ -1009,7 +1008,6 @@ describe('IgxGrid - search API #grid', () => { /* GroupableGrid */ describe('', () => { beforeEach(fakeAsync(/** height/width setter rAF */() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(GroupableGridSearchComponent); fix.detectChanges(); 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 d6cd8b9a43a..418fcd2822f 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 @@ -21,7 +21,6 @@ import { IgxStringFilteringOperand } from '../../data-operations/filtering-condi import { IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxRowComponent } from '../hierarchical-grid'; import { IgxRowIslandComponent } from '../hierarchical-grid/row-island.component'; import { IgxTreeGridComponent, IgxTreeGridModule } from '../tree-grid'; -import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; import { GridSelectionMode } from '../common/enums'; @@ -70,7 +69,6 @@ describe('IgxGrid - Row Drag Tests #grid', () => { let dragRows: DebugElement[]; // configureTestSuite(); beforeEach(async(() => { - resizeObserverIgnoreError(); fixture = TestBed.createComponent(IgxGridRowDraggableComponent); grid = fixture.componentInstance.instance; dropArea = fixture.componentInstance.dropArea; @@ -404,7 +402,6 @@ describe('IgxGrid - Row Drag Tests #grid', () => { } } beforeEach(async(() => { - resizeObserverIgnoreError(); fixture = TestBed.createComponent(IgxGridFeaturesRowDragComponent); dragGrid = fixture.componentInstance.dragGrid; dropGrid = fixture.componentInstance.dropGrid; @@ -790,7 +787,6 @@ describe('IgxGrid - Row Drag Tests #grid', () => { })); it('should be able to drag row on every hiearchical level', (async () => { - resizeObserverIgnoreError(); // first level row let dragIndicatorElement: Element = dragIndicatorElements[1].nativeElement; let rowToDrag = dragGrid.getRowByIndex(0); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts index dd014678dcd..543183535b3 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts @@ -17,7 +17,6 @@ import { take } from 'rxjs/operators'; import { IgxHierarchicalTransactionServiceFactory } from './hierarchical-grid-base.component'; import { IgxIconModule } from '../../icon'; import { IgxHierarchicalGridCellComponent } from './hierarchical-cell.component'; -import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; import { GridSelectionMode } from '../common/enums'; import { GridFunctions } from '../../test-utils/grid-functions.spec'; @@ -515,7 +514,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { describe('Paging', () => { it('should work on data records only when paging is enabled and should not be affected by child grid rows.', (async() => { - resizeObserverIgnoreError(); hierarchicalGrid.paging = true; hierarchicalGrid.reflow(); fixture.detectChanges(); @@ -584,7 +582,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { })); it('should allow scrolling to the last row after page size has been changed and rows are expanded.', (async() => { - resizeObserverIgnoreError(); hierarchicalGrid.paging = true; hierarchicalGrid.perPage = 20; hierarchicalGrid.reflow(); @@ -678,7 +675,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { })); it('should corerctly hide/show vertical scrollbar after page is changed.', (async() => { - resizeObserverIgnoreError(); hierarchicalGrid.paging = true; hierarchicalGrid.perPage = 5; fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts index a57492403a0..eee95a72115 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts @@ -8,7 +8,7 @@ import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec'; import { IgxRowIslandComponent } from './row-island.component'; import { By } from '@angular/platform-browser'; import { IgxHierarchicalRowComponent } from './hierarchical-row.component'; -import { setupHierarchicalGridScrollDetection, resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; +import { setupHierarchicalGridScrollDetection } from '../../test-utils/helper-utils.spec'; describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => { configureTestSuite(); @@ -25,7 +25,6 @@ describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => { })); beforeEach(async(() => { - resizeObserverIgnoreError(); fixture = TestBed.createComponent(IgxHierarchicalGridTestBaseComponent); fixture.detectChanges(); hierarchicalGrid = fixture.componentInstance.hgrid; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index ce0c241b6c9..57835351bdb 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -13,7 +13,6 @@ import { DisplayDensity } from '../../core/displayDensity'; import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; import { IGridCellEventArgs } from '../grid'; import { GridSelectionMode } from '../common/enums'; -import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; describe('Basic IgxHierarchicalGrid #hGrid', () => { configureTestSuite(); @@ -30,7 +29,6 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { })); beforeEach(async(() => { - resizeObserverIgnoreError(); fixture = TestBed.createComponent(IgxHierarchicalGridTestBaseComponent); fixture.detectChanges(); hierarchicalGrid = fixture.componentInstance.hgrid; @@ -424,7 +422,6 @@ describe('IgxHierarchicalGrid Row Islands #hGrid', () => { })); beforeEach(async(() => { - resizeObserverIgnoreError(); fixture = TestBed.createComponent(IgxHierarchicalGridMultiLayoutComponent); fixture.detectChanges(); hierarchicalGrid = fixture.componentInstance.hgrid; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts index 85f2e4655a7..d2aaaaefa60 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts @@ -9,7 +9,7 @@ import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec'; import { FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand } from 'igniteui-angular'; import { By } from '@angular/platform-browser'; import { first, delay } from 'rxjs/operators'; -import { setupHierarchicalGridScrollDetection, resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; +import { setupHierarchicalGridScrollDetection } from '../../test-utils/helper-utils.spec'; describe('IgxHierarchicalGrid Virtualization #hGrid', () => { configureTestSuite(); @@ -32,7 +32,6 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { })); it('should retain expansion state when scrolling.', async () => { - resizeObserverIgnoreError(); const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; // first child of the row should expand indicator firstRow.nativeElement.children[0].click(); @@ -127,7 +126,6 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { }); it('should render correct data for child grid after scrolling and start index changes.', async() => { - resizeObserverIgnoreError(); const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; // first child of the row should expand indicator firstRow.nativeElement.children[0].click(); @@ -186,7 +184,6 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { }); it('should not lose scroll position after expanding a row when there are already expanded rows above.', async() => { - resizeObserverIgnoreError(); // Expand two rows at the top hierarchicalGrid.dataRowList.toArray()[2].nativeElement.children[0].click(); await wait(100); @@ -280,7 +277,6 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { }); it('should update scroll height after expanding/collapsing row in a nested child grid that has no height.', async () => { - resizeObserverIgnoreError(); fixture.componentInstance.data = [ { ID: 0, ChildLevels: 3, ProductName: 'Product: A0 ' }, { ID: 1, ChildLevels: 3, ProductName: 'Product: A0 ' }, @@ -325,7 +321,6 @@ it('should update scroll height after expanding/collapsing row in a nested child }); it('should update context information correctly for child grid container after scrolling', async() => { - resizeObserverIgnoreError(); // expand 3rd row const row = hierarchicalGrid.dataRowList.toArray()[3]; row.nativeElement.children[0].click(); @@ -385,7 +380,6 @@ describe('IgxHierarchicalGrid Virtualization Custom Scenarios #hGrid', () => { })); it('should show scrollbar after expanding a row with data loaded after initial view initialization', async() => { - resizeObserverIgnoreError(); const fixture = TestBed.createComponent(IgxHierarchicalGridNoScrollTestComponent); fixture.detectChanges(); await wait(); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts index 00f7e12f41e..ef48c294e99 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts @@ -15,7 +15,6 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { first } from 'rxjs/operators'; import { wait } from '../../test-utils/ui-interactions.spec'; import { IgxGridModule } from '../grid'; -import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; import { GridFunctions } from '../../test-utils/grid-functions.spec'; import { GridSelectionMode } from '../common/enums'; @@ -259,7 +258,6 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { }); it('should expand/collapse when using \'expandAll\' and \'collapseAll\' methods', async () => { - resizeObserverIgnoreError(); treeGrid.perPage = 50; await wait(); fix.detectChanges(); @@ -714,7 +712,6 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { }); it('should expand/collapse when using \'expandAll\' and \'collapseAll\' methods', () => { - resizeObserverIgnoreError(); let rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(3); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-search.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-search.spec.ts index 22f2823f212..032eb9a6411 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-search.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-search.spec.ts @@ -11,7 +11,6 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; import { SortingDirection } from '../../data-operations/sorting-expression.interface'; import { wait } from '../../test-utils/ui-interactions.spec'; -import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; const HIGHLIGHT_CLASS = 'igx-highlight'; const ACTIVE_CLASS = 'igx-highlight__active'; @@ -317,7 +316,6 @@ describe('IgxTreeGrid - search API #tGrid', () => { describe('Scrollable TreeGrid', () => { beforeEach(async() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(IgxTreeGridSummariesScrollingComponent); fix.detectChanges(); fixNativeElement = fix.debugElement.nativeElement; diff --git a/projects/igniteui-angular/src/lib/test-utils/configure-suite.ts b/projects/igniteui-angular/src/lib/test-utils/configure-suite.ts index 083497736f1..c77b746e7e7 100644 --- a/projects/igniteui-angular/src/lib/test-utils/configure-suite.ts +++ b/projects/igniteui-angular/src/lib/test-utils/configure-suite.ts @@ -1,4 +1,5 @@ import { TestBed, getTestBed, ComponentFixture } from '@angular/core/testing'; +import { resizeObserverIgnoreError } from './helper-utils.spec'; /** * Per https://github.com/angular/angular/issues/12409#issuecomment-391087831 @@ -11,6 +12,7 @@ export const configureTestSuite = () => { originReset = TestBed.resetTestingModule; // TestBed.resetTestingModule(); TestBed.resetTestingModule = () => TestBed; + resizeObserverIgnoreError(); }); afterEach(() => { diff --git a/projects/igniteui-angular/src/lib/test-utils/helper-utils.spec.ts b/projects/igniteui-angular/src/lib/test-utils/helper-utils.spec.ts index de66a93ef95..bd372af470e 100644 --- a/projects/igniteui-angular/src/lib/test-utils/helper-utils.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/helper-utils.spec.ts @@ -6,6 +6,7 @@ import { IgxGridBaseComponent } from '../grids/index'; import { IgxHierarchicalGridComponent } from '../grids/hierarchical-grid'; export function resizeObserverIgnoreError() { + jasmine.getEnv().allowRespy(true); const spy = spyOn(window, 'onerror').and.callFake((...args) => { if (args[0].toString().match('ResizeObserver loop limit exceeded')) { return; From c22b65dbe86d8613c2c6e142946a0fa32e575677 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 8 Oct 2019 16:21:03 +0300 Subject: [PATCH 23/48] fix(grid): edited text in row editing gets cut Closes #5902 --- .../src/lib/core/styles/components/grid/_grid-theme.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 599d0b49936..971e7e0c32a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -1189,6 +1189,7 @@ %grid-cell-text { font-style: italic; color: --var($theme, 'cell-edited-value-color'); + padding: 0 1px; } } From c989f5bb002e8891b0baf28407894a4fd7a5a10f Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 8 Oct 2019 16:34:13 +0300 Subject: [PATCH 24/48] fix(igxGrid): Fix ExpressionChangedAfterItHasBeenCheckedError when grid.isLoading is set runtime in AfterViewInit. --- .../igniteui-angular/src/lib/grids/grid-base.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index cbc146a7c32..414e541a6cf 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -890,7 +890,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements this._isLoading = value; this.evaluateLoadingState(); } - this.notifyChanges(); + Promise.resolve().then(() => { + // wait for the current detection cycle to end before triggering a new one. + this.notifyChanges(); + }); } /** From 4758df1fb429d9cdec839bfdef5b88b7ef818810 Mon Sep 17 00:00:00 2001 From: 3phase Date: Wed, 9 Oct 2019 14:21:45 +0300 Subject: [PATCH 25/48] fix(groupby): Resolves requested changes #5643 --- .../src/lib/grids/grid/grid.component.ts | 38 +++++++------------ .../src/lib/grids/grid/grid.directives.ts | 4 +- 2 files changed, 15 insertions(+), 27 deletions(-) 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 64eff611ed7..4382071ede0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -604,31 +604,6 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB this.notifyChanges(true); } - /** - * Checks whether `IgxColumnComponent` has an element without a `[field]`. - * Supports both single instance of the `ISortingExpression` and an array of elements. - * ```typescript - * this.grid.checkIfNoField({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); - * this.grid.checkIfNoField([ - { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false }, - { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true }, - { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false } - ]); - * ``` - * @memberof IgxGridComponent - */ - public checkIfNoField(expression: IGroupingExpression | Array | any): boolean { - if (expression instanceof Array) { - for (const singleExpression of expression) { - if (singleExpression.fieldName === undefined) { - return true; - } - } - return false; - } - return expression.fieldName === undefined; - } - /** * Clears all grouping in the grid, if no parameter is passed. * If a parameter is provided, clears grouping for a particular column or an array of columns. @@ -1020,4 +995,17 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB this.navigation.grid = this; } } + + public checkIfNoField(expression: IGroupingExpression | Array | any): boolean { + if (expression instanceof Array) { + for (const singleExpression of expression) { + if (!singleExpression.fieldName) { + return true; + } + } + return false; + } + return !expression.fieldName; + } + } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts index 4ea024889d1..ef30229b9ec 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts @@ -78,7 +78,7 @@ export class IgxGroupAreaDropDirective extends IgxDropDirective { } const grid = column.grid; const isGrouped = grid.groupingExpressions.findIndex((item) => item.fieldName === column.field) !== -1; - if (column.groupable && !isGrouped && !column.columnGroup && column.field !== undefined) { + if (column.groupable && !isGrouped && !column.columnGroup && !!column.field) { drag.icon.innerText = 'group_work'; this.hovered = true; } else { @@ -106,7 +106,7 @@ export class IgxGroupAreaDropDirective extends IgxDropDirective { } const grid = column.grid; const isGrouped = grid.groupingExpressions.findIndex((item) => item.fieldName === column.field) !== -1; - if (column.groupable && !isGrouped && !column.columnGroup && column.field !== undefined) { + if (column.groupable && !isGrouped && !column.columnGroup && !!column.field) { grid.groupBy({ fieldName: column.field, dir: SortingDirection.Asc, ignoreCase: column.sortingIgnoreCase, strategy: column.sortStrategy, groupingComparer: column.groupingComparer }); } From 764fbad1c5ce9e745d0095281daf4d2e71e37f8b Mon Sep 17 00:00:00 2001 From: 3phase Date: Wed, 9 Oct 2019 14:24:13 +0300 Subject: [PATCH 26/48] fix(groupby): Makes newly introduced method name not so general #5643 --- .../igniteui-angular/src/lib/grids/grid/grid.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 4382071ede0..fdb47aad8a6 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -592,7 +592,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB * @memberof IgxGridComponent */ public groupBy(expression: IGroupingExpression | Array): void { - if (this.checkIfNoField(expression)) { + if (this.checkIfNoColumnField(expression)) { return; } this.endEdit(true); @@ -996,7 +996,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB } } - public checkIfNoField(expression: IGroupingExpression | Array | any): boolean { + private checkIfNoColumnField(expression: IGroupingExpression | Array | any): boolean { if (expression instanceof Array) { for (const singleExpression of expression) { if (!singleExpression.fieldName) { From 8829ca75195bd2b0e8411b63973d3b8065786a29 Mon Sep 17 00:00:00 2001 From: Tacho Date: Wed, 9 Oct 2019 15:02:02 +0300 Subject: [PATCH 27/48] test(adv-filtering): add test for col-group #5886 --- .../grid/grid-filtering-advanced.spec.ts | 31 +++++++++++++++++++ .../src/lib/test-utils/grid-samples.spec.ts | 25 +++++++++++++++ 2 files changed, 56 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts index 14bdf57eb43..d0300c5fb62 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts @@ -13,6 +13,7 @@ import { changei18n, getCurrentResourceStrings } from '../../core/i18n/resources import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { FilteringLogic } from '../../data-operations/filtering-expression.interface'; import { + IgxGridAdvancedFilteringColumnGroupComponent, IgxGridAdvancedFilteringComponent } from '../../test-utils/grid-samples.spec'; import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; @@ -27,6 +28,7 @@ describe('IgxGrid - Advanced Filtering', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ + IgxGridAdvancedFilteringColumnGroupComponent, IgxGridAdvancedFilteringComponent ], imports: [ @@ -2662,6 +2664,35 @@ describe('IgxGrid - Advanced Filtering', () => { })); }); }); + + describe('', () => { + let fix, grid: IgxGridComponent; + beforeEach(fakeAsync(() => { + resizeObserverIgnoreError(); + fix = TestBed.createComponent(IgxGridAdvancedFilteringColumnGroupComponent); + grid = fix.componentInstance.grid; + fix.detectChanges(); + })); + + it('Should not display column groups in advanced filtering dialog.', fakeAsync(() => { + // Open dialog through API. + grid.openAdvancedFilteringDialog(); + fix.detectChanges(); + + // Click the initial 'Add And Group' button. + const addAndGroupButton = GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix)[0]; + addAndGroupButton.click(); + tick(100); + fix.detectChanges(); + + // Open column dropdown and verify that there are no column groups present. + GridFunctions.clickAdvancedFilteringColumnSelect(fix); + fix.detectChanges(); + const dropdownValues = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix).map((x: any) => x.innerText); + const expectedValues = ['ID', 'ProductName', 'Downloads', 'Released', 'ReleaseDate', 'Another Field']; + verifyEqualArrays(dropdownValues, expectedValues); + })); + }); }); diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 3d9ab102764..2a126fcbfa3 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -1198,6 +1198,31 @@ export class IgxGridAdvancedFilteringComponent extends BasicGridComponent { } } +@Component({ + template: ` + + + + + + + + + + ` +}) +export class IgxGridAdvancedFilteringColumnGroupComponent extends BasicGridComponent { + public customFilter = CustomFilter.instance(); + public resizable = false; + public filterable = true; + + public data = SampleTestData.excelFilteringData(); + public activateFiltering(activate: boolean) { + this.grid.allowFiltering = activate; + this.grid.cdr.markForCheck(); + } +} + @Component({ template: ` From b4117c9e842fa4eebaf17e5bba1b3961c48efd7d Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 9 Oct 2019 15:06:18 +0300 Subject: [PATCH 28/48] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8634d1855e5..163e3836296 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ All notable changes for each version of this project will be documented in this file. -## 8.2.1 +## 8.2.3 - `IgxTextHighlightDirective` - The default highlight directive styles have been moved to a Sass theme - `igx-highlight-theme`; You can modify the resting and active background and text color styles of the directive by passing the respective properties to the Sass theme. You can still pass your own CSS classes to the highlight directive via the cssClass and activeCssClass inputs. ## 8.2.0 From a549a60390e253c6cf0f72758ed461a50c20767a Mon Sep 17 00:00:00 2001 From: skrustev Date: Wed, 9 Oct 2019 15:45:50 +0300 Subject: [PATCH 29/48] fix(igxChip): Fix onSelection.originalEvent not returning correct value. #5940 --- CHANGELOG.md | 4 ++++ .../src/lib/chips/chip.component.html | 2 +- .../src/lib/chips/chip.component.ts | 10 ++++---- .../src/lib/chips/chip.spec.ts | 10 ++++++++ .../src/lib/chips/chips-area.component.ts | 22 +++++++++--------- .../src/lib/chips/chips-area.spec.ts | 23 ++++++++----------- .../drag-drop/drag-drop.directive.ts | 4 +++- 7 files changed, 43 insertions(+), 32 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 232dc500cb0..b762d6b0412 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes for each version of this project will be documented in this file. +## 8.2.3 +- `IgxChip` + - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` now provide the events passed from the `igxDrag` directive, which are the original events for the `igxChip` component events instead of the first events in the whole chain, which are usually PointerEvent, MouseEvent and etc. + ## 8.2.0 ### New theme Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system. diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.html b/projects/igniteui-angular/src/lib/chips/chip.component.html index 17b43bf0166..639a9e26d81 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.component.html +++ b/projects/igniteui-angular/src/lib/chips/chip.component.html @@ -7,7 +7,7 @@ (dragStart)="onChipDragStart($event)" (dragEnd)="onChipDragEnd()" (transitioned)="onChipMoveEnd($event)" - (click)="onChipDragClicked($event)" + (dragClick)="onChipDragClicked($event)" igxDrop (enter)="onChipDragEnterHandler($event)" (dropped)="onChipDrop($event)"> diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.ts b/projects/igniteui-angular/src/lib/chips/chip.component.ts index 887ec6daf62..25584835772 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.component.ts +++ b/projects/igniteui-angular/src/lib/chips/chip.component.ts @@ -24,7 +24,7 @@ import { IBaseEventArgs } from '../core/utils'; export interface IBaseChipEventArgs extends IBaseEventArgs { - originalEvent: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent | IDropBaseEventArgs; + originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent; owner: IgxChipComponent; } @@ -557,7 +557,7 @@ export class IgxChipComponent extends DisplayDensityBase { // Start chip igxDrag behavior public onChipDragStart(event: IDragStartEventArgs) { this.onMoveStart.emit({ - originalEvent: event.originalEvent, + originalEvent: event, owner: this }); event.cancel = !this.draggable || this.disabled; @@ -578,7 +578,7 @@ export class IgxChipComponent extends DisplayDensityBase { public onChipMoveEnd(event: IDragBaseEventArgs) { // moveEnd is triggered after return animation has finished. This happen when we drag and release the chip. this.onMoveEnd.emit({ - originalEvent: event.originalEvent, + originalEvent: event, owner: this }); @@ -592,14 +592,14 @@ export class IgxChipComponent extends DisplayDensityBase { */ public onChipDragClicked(event: IDragBaseEventArgs) { const clickEventArgs: IChipClickEventArgs = { - originalEvent: event.originalEvent, + originalEvent: event, owner: this, cancel: false }; this.onClick.emit(clickEventArgs); if (!clickEventArgs.cancel && this.selectable && !this.disabled) { - this.changeSelection(!this.selected, event.originalEvent); + this.changeSelection(!this.selected, event); } } // End chip igxDrag behavior diff --git a/projects/igniteui-angular/src/lib/chips/chip.spec.ts b/projects/igniteui-angular/src/lib/chips/chip.spec.ts index 365d60af69e..4f1e0977bac 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.spec.ts +++ b/projects/igniteui-angular/src/lib/chips/chip.spec.ts @@ -415,9 +415,19 @@ describe('IgxChip', () => { fix.detectChanges(); expect(secondChipComp.onSelection.emit).toHaveBeenCalled(); expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalled(); + expect(secondChipComp.onSelection.emit).not.toHaveBeenCalledWith({ + originalEvent: null, + owner: secondChipComp, + cancel: false, + selected: true + }); await wait(400); expect(secondChipComp.onSelectionDone.emit).toHaveBeenCalled(); + expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalledWith({ + originalEvent: null, + owner: secondChipComp + }); })); it('should not fire onSelection event when selectable is false', () => { 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 d7efddae3cd..b15fc34bb91 100644 --- a/projects/igniteui-angular/src/lib/chips/chips-area.component.ts +++ b/projects/igniteui-angular/src/lib/chips/chips-area.component.ts @@ -21,12 +21,12 @@ import { IChipEnterDragAreaEventArgs, IBaseChipEventArgs } from './chip.component'; -import { IDropBaseEventArgs } from '../directives/drag-drop/drag-drop.directive'; +import { IDropBaseEventArgs, IDragBaseEventArgs } from '../directives/drag-drop/drag-drop.directive'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; export interface IBaseChipsAreaEventArgs { - originalEvent: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent | IDropBaseEventArgs; + originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent; owner: IgxChipsAreaComponent; } @@ -152,7 +152,6 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy private modifiedChipsArray: IgxChipComponent[]; private _differ: IterableDiffer | null = null; - private selectedChips: IgxChipComponent[] = []; protected destroy$ = new Subject(); constructor(public cdr: ChangeDetectorRef, public element: ElementRef, @@ -166,11 +165,11 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy public ngAfterViewInit() { // If we have initially selected chips through their inputs, we need to get them, because we cannot listen to their events yet. if (this.chipsList.length) { - this.selectedChips = this.chipsList.filter((item: IgxChipComponent) => item.selected); - if (this.selectedChips.length) { + const selectedChips = this.chipsList.filter((item: IgxChipComponent) => item.selected); + if (selectedChips.length) { this.onSelection.emit({ originalEvent: null, - newSelection: this.selectedChips, + newSelection: selectedChips, owner: this }); } @@ -324,16 +323,17 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy * @hidden */ protected onChipSelectionChange(event: IChipSelectEventArgs) { - if (event.selected) { - this.selectedChips.push(event.owner); - } else if (!event.selected) { - this.selectedChips = this.selectedChips.filter((chip) => { + let selectedChips = this.chipsList.filter((chip) => chip.selected); + if (event.selected && !selectedChips.includes(event.owner)) { + selectedChips.push(event.owner); + } else if (!event.selected && selectedChips.includes(event.owner)) { + selectedChips = selectedChips.filter((chip) => { return chip.id !== event.owner.id; }); } this.onSelection.emit({ originalEvent: event.originalEvent, - newSelection: this.selectedChips, + newSelection: selectedChips, owner: this }); } diff --git a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts b/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts index 54529b6f8ec..13b8818d046 100644 --- a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts +++ b/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts @@ -386,7 +386,8 @@ describe('IgxChipsArea', () => { const firstChipComp = fix.componentInstance.chips.toArray()[1]; spyOn(firstChipComp.onClick, 'emit'); - firstChipComp.chipArea.nativeElement.click(); + firstChipComp.chipArea.nativeElement.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1})); + firstChipComp.chipArea.nativeElement.dispatchEvent(new PointerEvent('pointerup')); fix.detectChanges(); expect(firstChipComp.onClick.emit).toHaveBeenCalled(); @@ -857,26 +858,22 @@ describe('IgxChipsArea', () => { const chipAreaComp = fix.componentInstance.chipsArea; const secondChipComp = fix.componentInstance.chips.toArray()[1]; + const pointerDownEvt = new PointerEvent('pointerdown', { pointerId: 1 }); + const pointerUpEvt = new PointerEvent('pointerup', { pointerId: 1 }); spyOn(chipAreaComp.onSelection, 'emit'); fix.detectChanges(); - secondChipComp.chipArea.nativeElement.click(); + secondChipComp.chipArea.nativeElement.dispatchEvent(pointerDownEvt); fix.detectChanges(); - - expect(chipAreaComp.onSelection.emit).toHaveBeenCalledWith({ - originalEvent: null, - owner: chipAreaComp, - newSelection: [secondChipComp] - }); - - secondChipComp.chipArea.nativeElement.click(); + secondChipComp.chipArea.nativeElement.dispatchEvent(pointerUpEvt); fix.detectChanges(); - expect(chipAreaComp.onSelection.emit).toHaveBeenCalledWith({ + expect(chipAreaComp.onSelection.emit).toHaveBeenCalled(); + expect(chipAreaComp.onSelection.emit).not.toHaveBeenCalledWith({ originalEvent: null, owner: chipAreaComp, - newSelection: [] + newSelection: [secondChipComp] }); }); @@ -889,8 +886,6 @@ describe('IgxChipsArea', () => { fix.detectChanges(); const secondChipComp = fix.componentInstance.chips.toArray(); - - expect(chipAreaComp['selectedChips']).toEqual([secondChipComp[0], secondChipComp[1]]); expect(chipAreaComp.onSelection.emit).toHaveBeenCalledWith({ originalEvent: null, owner: chipAreaComp, 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 0c54471268b..a670da82696 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 @@ -1043,7 +1043,9 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { } } else { // Trigger our own click event because when there is no ghost, native click cannot be prevented when dragging. - this.dragClick.emit(eventArgs); + this.zone.run(() => { + this.dragClick.emit(eventArgs); + }); } } From 16c01a1ac97a5b6bb8454b12ae9e2cfd20de37fa Mon Sep 17 00:00:00 2001 From: skrustev Date: Wed, 9 Oct 2019 16:02:17 +0300 Subject: [PATCH 30/48] chore(*): Small update to the changelog to include all events changed. --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b762d6b0412..219558b6e30 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ All notable changes for each version of this project will be documented in this ## 8.2.3 - `IgxChip` - - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` now provide the events passed from the `igxDrag` directive, which are the original events for the `igxChip` component events instead of the first events in the whole chain, which are usually PointerEvent, MouseEvent and etc. + - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` and `onSelection` now provide the events passed from the `igxDrag` directive. The passed ones are the original events for the `igxChip` component events instead of the first events in the whole chain, which are usually PointerEvent, MouseEvent and etc. ## 8.2.0 ### New theme From 345b844477e66f4f569d6a2ef6855014656eb35d Mon Sep 17 00:00:00 2001 From: MPopov Date: Wed, 9 Oct 2019 16:18:37 +0300 Subject: [PATCH 31/48] fix(chip): Remove CSS "focus-within" since it is NOT supported by IE11 and Edge 18 Closes 5722 Signed-off-by: MPopov --- .../styles/components/chip/_chip-component.scss | 3 +-- .../core/styles/components/chip/_chip-theme.scss | 15 +++++++++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss index f27ca101f83..9abb087f1be 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss @@ -23,8 +23,7 @@ @extend %igx-chip__item--hover !optional; } - &:focus, - &:focus-within { + &:focus { @extend %igx-chip__item--focus !optional; } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index b546b1b2240..b45639fda32 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -402,9 +402,20 @@ display: none; } - &:focus-within { + // FIX IE11 and Edge focus styles. + // [focus-within] is not supported by IE & Edge. + &:focus { outline-style: none; - color: igx-color(map-get($theme, 'palette'), error); + + igx-icon { + color: igx-color(map-get($theme, 'palette'), error); + } + } + + igx-icon { + &:focus{ + outline-style: none; + } } [dir='rtl'] & { From 56834cd5b955d424968c36178cc1d7a4b4e0ac67 Mon Sep 17 00:00:00 2001 From: Tacho Date: Wed, 9 Oct 2019 16:32:01 +0300 Subject: [PATCH 32/48] fix(adv-filtering): exclude col-groups #5886 --- .../advanced-filtering/advanced-filtering-dialog.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts index 02e788ce7d6..63d65cda585 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts @@ -254,7 +254,7 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes } get filterableColumns(): IgxColumnComponent[] { - return this.grid.columns.filter((col) => col.filterable); + return this.grid.columns.filter((col) => !col.columnGroup && col.filterable); } public dragStart(dragArgs: IDragStartEventArgs) { From a5f044b621b22266b3601538ee257b48e3ec7582 Mon Sep 17 00:00:00 2001 From: 3phase Date: Wed, 9 Oct 2019 17:52:17 +0300 Subject: [PATCH 33/48] feat(grid): Exposes verticalScrollContainer elems as a public property #5069 --- .../src/lib/grids/grid/grid.component.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) 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 09a3d625277..4b177a29d66 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -340,6 +340,17 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB } } + /** + * Returns a complete list of the elements in the current vertical dataview. + * ```typescript + * const dataView = this.grid.dataView; + * ``` + * @memberof IgxGridComponent + */ + get dataView(): any { + return this.verticalScrollContainer.igxForOf; + } + /** *@hidden */ From 1e687698c80821acaf4ac3b36f0cc6f4380b7f23 Mon Sep 17 00:00:00 2001 From: skrustev Date: Wed, 9 Oct 2019 17:56:59 +0300 Subject: [PATCH 34/48] chore(*): Update failing test. --- .../src/lib/grids/grid/grid.groupby.spec.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index 055e4e79821..f27e0395978 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -1689,11 +1689,15 @@ describe('IgxGrid - GroupBy #grid', () => { expect(chips[1].querySelectorAll(CHIP_REMOVE_ICON).length).toEqual(1); // check click does not allow changing sort dir - chips[0].children[0].click(); + chips[0].children[0].dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 })); + tick(); + chips[0].children[0].dispatchEvent(new PointerEvent('pointerup')); tick(); fix.detectChanges(); - chips[1].children[0].click(); + chips[1].children[0].dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 })); + tick(); + chips[1].children[0].dispatchEvent(new PointerEvent('pointerup')); tick(); fix.detectChanges(); From 2ae94c7d3e8905a1bb6bd027c34ca41008fb7cf9 Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Thu, 10 Oct 2019 09:43:40 +0300 Subject: [PATCH 35/48] fix(grid): check if data is defined in the pagingPipe #5949 --- .../lib/grids/grid/grid.pagination.spec.ts | 35 ++++++++++++++++--- .../src/lib/grids/grid/grid.pipes.ts | 2 +- 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts index 9916f6c03fb..36f26b629c6 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts @@ -1,7 +1,12 @@ import { async, TestBed, fakeAsync, tick, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { IgxGridModule } from './index'; -import { ReorderedColumnsComponent, PagingAndEditingComponent, GridIDNameJobTitleComponent } from '../../test-utils/grid-samples.spec'; +import { + ReorderedColumnsComponent, + PagingAndEditingComponent, + GridIDNameJobTitleComponent, + GridWithUndefinedDataComponent +} from '../../test-utils/grid-samples.spec'; import { PagingComponent } from '../../test-utils/grid-base-components.spec'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; @@ -22,7 +27,8 @@ describe('IgxGrid - Grid Paging #grid', () => { ReorderedColumnsComponent, PagingComponent, PagingAndEditingComponent, - GridIDNameJobTitleComponent + GridIDNameJobTitleComponent, + GridWithUndefinedDataComponent ], imports: [IgxGridModule, NoopAnimationsModule] }).compileComponents(); @@ -64,7 +70,7 @@ describe('IgxGrid - Grid Paging #grid', () => { verifyGridPager(fix, 3, '1', '1 of 4', [true, true, false, false]); })); - it('should paginate data API', fakeAsync (() => { + it('should paginate data API', fakeAsync(() => { const fix = TestBed.createComponent(PagingComponent); fix.detectChanges(); @@ -283,7 +289,7 @@ describe('IgxGrid - Grid Paging #grid', () => { verifyGridPager(fix, 2, '9', '3 of 3', []); }); - it('activate/deactivate paging', fakeAsync(() => { + it('activate/deactivate paging', fakeAsync(() => { const fix = TestBed.createComponent(ReorderedColumnsComponent); const grid = fix.componentInstance.grid; fix.detectChanges(); @@ -465,6 +471,27 @@ describe('IgxGrid - Grid Paging #grid', () => { expect(gridElement.querySelector(PAGER_CLASS)).not.toBeNull(); })); + it('should not throw error when data is undefined', fakeAsync(() => { + let errorMessage = ''; + const fix = TestBed.createComponent(GridWithUndefinedDataComponent); + try { + fix.detectChanges(); + } catch (ex) { + errorMessage = ex.message; + } + expect(errorMessage).toBe(''); + const grid = fix.componentInstance.grid; + let paginator = grid.nativeElement.querySelector(PAGER_CLASS); + expect(paginator).toBeNull(); + expect(grid.rowList.length).toBe(0); + tick(305); + fix.detectChanges(); + + paginator = grid.nativeElement.querySelector(PAGER_CLASS); + expect(paginator).toBeDefined(); + expect(grid.rowList.length).toBe(11); + })); + function verifyGridPager(fix, rowsCount, firstCellValue, pagerText, buttonsVisibility) { const disabled = 'igx-button--disabled'; const grid = fix.componentInstance.grid; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts index b8e96f4b0c4..f3622f4afe6 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts @@ -105,7 +105,7 @@ export class IgxGridPagingPipe implements PipeTransform { index: page, recordsPerPage: perPage }; - DataUtil.correctPagingState(state, collection.data.length); + DataUtil.correctPagingState(state, collection.data ? collection.data.length : 0); const result = { data: DataUtil.page(cloneArray(collection.data), state), From c7f787b173119c0dbdcd63bd94bca48a12f141a8 Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Thu, 10 Oct 2019 09:58:17 +0300 Subject: [PATCH 36/48] chore(*): add missed component --- .../lib/grids/grid/grid.pagination.spec.ts | 2 +- .../src/lib/test-utils/grid-samples.spec.ts | 20 +++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts index ab234b8a05f..4fa54a3a0a9 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts @@ -486,7 +486,7 @@ describe('IgxGrid - Grid Paging #grid', () => { paginator = grid.nativeElement.querySelector(PAGER_CLASS); expect(paginator).toBeDefined(); - expect(grid.rowList.length).toBe(11); + expect(grid.rowList.length).toBe(5); })); function verifyGridPager(fix, rowsCount, firstCellValue, pagerText, buttonsVisibility) { diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 3d9ab102764..e86c5484d86 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -1500,3 +1500,23 @@ export class CellEditingScrollTestComponent extends BasicGridComponent { { firstName: 'Michael', lastName: 'Parker', age: 48, isActive: true, birthday: new Date('08/08/1970'), fullName: 'Michael Parker' } ]; } + +@Component({ + template: GridTemplateStrings.declareGrid( + ` [width]="width" [height]="height" [paging]="'true'" [perPage]="perPage" [primaryKey]="'ProductID'"`, + '', ColumnDefinitions.productBasicNumberID) +}) +export class GridWithUndefinedDataComponent implements OnInit { + @ViewChild(IgxGridComponent, { static: true }) + public grid: IgxGridComponent; + public data ; + public perPage = 5; + public width = '800px'; + public height = '600px'; + + public ngOnInit(): void { + setTimeout(() => { + this.data = SampleTestData.foodProductDataExtended(); + }, 300); + } +} From a2a92a89bcd52861f04fc4a19d702aa9b757fd52 Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Thu, 10 Oct 2019 10:48:39 +0300 Subject: [PATCH 37/48] chore(*): update sample columns --- .../igniteui-angular/src/lib/test-utils/grid-samples.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index e86c5484d86..95fd7b579ed 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -1504,7 +1504,7 @@ export class CellEditingScrollTestComponent extends BasicGridComponent { @Component({ template: GridTemplateStrings.declareGrid( ` [width]="width" [height]="height" [paging]="'true'" [perPage]="perPage" [primaryKey]="'ProductID'"`, - '', ColumnDefinitions.productBasicNumberID) + '', ColumnDefinitions.productBasic) }) export class GridWithUndefinedDataComponent implements OnInit { @ViewChild(IgxGridComponent, { static: true }) From 00b2e93f29d9d1537a4be2992bdd3316d9de166e Mon Sep 17 00:00:00 2001 From: 3phase Date: Thu, 10 Oct 2019 10:52:25 +0300 Subject: [PATCH 38/48] feat(grid): Moves dataView in grid-base and refactors all uses #5069 --- .../src/lib/grids/common/grid.interface.ts | 1 + .../src/lib/grids/grid-base.component.ts | 41 ++++++++++++------- .../lib/grids/grid-mrl-navigation.service.ts | 4 +- .../src/lib/grids/grid-navigation.service.ts | 14 +++---- .../grids/grid/grid-cell-selection.spec.ts | 8 ++-- .../lib/grids/grid/grid-keyBoardNav.spec.ts | 4 +- .../src/lib/grids/grid/grid-summary.spec.ts | 12 +++--- .../src/lib/grids/grid/grid.component.ts | 13 +----- .../src/lib/grids/grid/grid.groupby.spec.ts | 4 +- .../lib/grids/grid/groupby-row.component.ts | 2 +- .../hierarchical-grid-navigation.service.ts | 22 +++++----- .../hierarchical-grid.component.ts | 6 +-- .../hierarchical-grid.integration.spec.ts | 32 +++++++-------- .../hierarchical-grid.navigation.spec.ts | 8 ++-- .../hierarchical-grid.spec.ts | 4 +- .../hierarchical-grid.virtualization.spec.ts | 2 +- .../tree-grid-multi-cell-selection.spec.ts | 4 +- .../tree-grid/tree-grid-summaries.spec.ts | 2 +- .../grids/tree-grid/tree-grid.component.ts | 6 +-- 19 files changed, 95 insertions(+), 94 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index 6bae484aec3..733fdd66e6c 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -24,6 +24,7 @@ export interface GridType { pinnedColumns: any; summariesRowList: any; headerContainer: any; + dataView: any; rowInEditMode: any; rowEditTabs: any; diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index cbc146a7c32..a12c7f84461 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4630,8 +4630,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements public hasVerticalSroll() { if (this._init) { return false; } const isScrollable = this.verticalScrollContainer ? this.verticalScrollContainer.isScrollable() : false; - return !!(this.calcWidth && this.verticalScrollContainer.igxForOf && - this.verticalScrollContainer.igxForOf.length > 0 && + return !!(this.calcWidth && this.dataView && + this.dataView.length > 0 && isScrollable); } @@ -4997,6 +4997,17 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements return 0; } + /** + * Returns a complete list of the elements in the current vertical dataview. + * ```typescript + * const dataView = this.grid.dataView; + * ``` + * @memberof IgxGridComponent + */ + get dataView(): any { + return this.verticalScrollContainer.igxForOf; + } + /** * Get current selection state. * Returns an array with selected rows' IDs (primaryKey or rowData) @@ -5215,7 +5226,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements * If `headers` is enabled, it will use the column header (if any) instead of the column field. */ getSelectedData(formatters = false, headers = false) { - const source = this.verticalScrollContainer.igxForOf; + const source = this.dataView; return this.extractDataFromSelection(source, formatters, headers); } @@ -5284,12 +5295,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements * @memberof IgxGridBaseComponent */ public navigateTo(rowIndex: number, visibleColIndex = -1, cb: Function = null) { - if (rowIndex < 0 || rowIndex > this.verticalScrollContainer.igxForOf.length - 1 + if (rowIndex < 0 || rowIndex > this.dataView.length - 1 || (visibleColIndex !== -1 && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) { return; } this.wheelHandler(); - if (this.verticalScrollContainer.igxForOf.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) { + if (this.dataView.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) { visibleColIndex = -1; } if (visibleColIndex === -1 || this.navigation.isColumnFullyVisible(visibleColIndex)) { @@ -5325,7 +5336,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => a - b) : columns.map(editCol => editCol.visibleIndex).sort((a, b) => a - b); const nextCellIndex = colIndexes.find(index => index > curVisibleColIndex); - if (this.verticalScrollContainer.igxForOf.slice(currRowIndex, currRowIndex + 1) + if (this.dataView.slice(currRowIndex, currRowIndex + 1) .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && nextCellIndex !== undefined) { return { rowIndex: currRowIndex, visibleColumnIndex: nextCellIndex }; } else { @@ -5357,7 +5368,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => b - a) : columns.map(editCol => editCol.visibleIndex).sort((a, b) => b - a); const prevCellIndex = colIndexes.find(index => index < curVisibleColIndex); - if (this.verticalScrollContainer.igxForOf.slice(currRowIndex, currRowIndex + 1) + if (this.dataView.slice(currRowIndex, currRowIndex + 1) .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && prevCellIndex !== undefined) { return { rowIndex: currRowIndex, visibleColumnIndex: prevCellIndex }; } else { @@ -5400,24 +5411,24 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements private getPrevDataRowIndex(currentRowIndex): number { if (currentRowIndex <= 0) { return currentRowIndex; } - const prevRow = this.verticalScrollContainer.igxForOf.slice(0, currentRowIndex).reverse() + const prevRow = this.dataView.slice(0, currentRowIndex).reverse() .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData); - return prevRow ? this.verticalScrollContainer.igxForOf.indexOf(prevRow) : currentRowIndex; + return prevRow ? this.dataView.indexOf(prevRow) : currentRowIndex; } private getNextDataRowIndex(currentRowIndex): number { - if (currentRowIndex === this.verticalScrollContainer.igxForOf.length) { return currentRowIndex; } + if (currentRowIndex === this.dataView.length) { return currentRowIndex; } - const nextRow = this.verticalScrollContainer.igxForOf.slice(currentRowIndex + 1, this.verticalScrollContainer.igxForOf.length) + const nextRow = this.dataView.slice(currentRowIndex + 1, this.dataView.length) .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData); - return nextRow ? this.verticalScrollContainer.igxForOf.indexOf(nextRow) : currentRowIndex; + return nextRow ? this.dataView.indexOf(nextRow) : currentRowIndex; } private isValidPosition(rowIndex, colIndex): boolean { const rows = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).length; const cols = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0).length; if (rows < 1 || cols < 1) { return false; } - if (rowIndex > -1 && rowIndex < this.verticalScrollContainer.igxForOf.length && + if (rowIndex > -1 && rowIndex < this.dataView.length && colIndex > - 1 && colIndex <= this.unpinnedColumns[this.unpinnedColumns.length - 1].visibleIndex) { return true; } @@ -5614,11 +5625,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements if (delayScrolling) { this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => { this.scrollDirective(this.verticalScrollContainer, - typeof (row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row)); + typeof (row) === 'number' ? row : this.dataView.indexOf(row)); }); } else { this.scrollDirective(this.verticalScrollContainer, - typeof (row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row)); + typeof (row) === 'number' ? row : this.dataView.indexOf(row)); } this.scrollToHorizontally(column); diff --git a/projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts index 3eff15e7133..dac709b9091 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts @@ -249,7 +249,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService { moveNext = true; } const rowIndex = moveNext ? selectedNode.row + 1 : selectedNode.row; - if (rowIndex > this.grid.verticalScrollContainer.igxForOf.length - 1) { + if (rowIndex > this.grid.dataView.length - 1) { // end of rows reached. return; } @@ -469,7 +469,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService { } private _isGroupRecordAt(rowIndex: number) { - const record = this.grid.verticalScrollContainer.igxForOf[rowIndex]; + const record = this.grid.dataView[rowIndex]; return record.records && record.records.length; } diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index abaaeede32f..b1c12511d93 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts @@ -267,7 +267,7 @@ export class IgxGridNavigationService { (cells[cells.length - 1] as HTMLElement).focus(); } else { this.getFocusableGrid().nativeElement.focus({ preventScroll: true }); - this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1); + this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1); this.grid.verticalScrollContainer.onChunkLoad .pipe(first()).subscribe(() => { const cells = this.grid.nativeElement.querySelectorAll( @@ -315,7 +315,7 @@ export class IgxGridNavigationService { public navigateDown(rowElement, selectedNode: ISelectionNode) { const currentRowIndex = selectedNode.row; const visibleColumnIndex = selectedNode.column; - if (currentRowIndex === this.grid.verticalScrollContainer.igxForOf.length - 1 || + if (currentRowIndex === this.grid.dataView.length - 1 || (currentRowIndex === 0 && rowElement.tagName.toLowerCase() === 'igx-grid-summary-row')) { // check if this is rootSummary row return; @@ -389,7 +389,7 @@ export class IgxGridNavigationService { this.onKeydownEnd(rowIndex); } else { this.getFocusableGrid().nativeElement.focus({ preventScroll: true }); - this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1); + this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1); this.grid.verticalScrollContainer.onChunkLoad .pipe(first()).subscribe(() => { const rows = this.getAllRows(); @@ -405,7 +405,7 @@ export class IgxGridNavigationService { const verticalScroll = this.grid.verticalScrollContainer.getVerticalScroll(); if (verticalScroll.scrollHeight === 0 || verticalScroll.scrollTop === verticalScroll.scrollHeight - this.grid.verticalScrollContainer.igxForContainerSize) { - const rowIndex = this.grid.verticalScrollContainer.igxForOf.length - 1; + const rowIndex = this.grid.dataView.length - 1; const row = this.grid.nativeElement.querySelector(`[data-rowindex="${rowIndex}"]`) as HTMLElement; if (row && row.tagName.toLowerCase() === 'igx-grid-groupby-row') { row.focus(); @@ -414,10 +414,10 @@ export class IgxGridNavigationService { const isSummary = (row && row.tagName.toLowerCase() === 'igx-grid-summary-row') ? true : false; this.onKeydownEnd(rowIndex, isSummary); } else { - this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1); + this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1); this.grid.verticalScrollContainer.onChunkLoad .pipe(first()).subscribe(() => { - const rowIndex = this.grid.verticalScrollContainer.igxForOf.length - 1; + const rowIndex = this.grid.dataView.length - 1; const row = this.grid.nativeElement.querySelector(`[data-rowindex="${rowIndex}"]`) as HTMLElement; if (row && row.tagName.toLowerCase() === 'igx-grid-groupby-row') { row.focus(); @@ -447,7 +447,7 @@ export class IgxGridNavigationService { const rowEl = this.grid.rowList.find(row => row.index === rowIndex + 1) ? this.grid.rowList.find(row => row.index === rowIndex + 1) : this.grid.summariesRowList.find(row => row.index === rowIndex + 1); - if (rowIndex === this.grid.verticalScrollContainer.igxForOf.length - 1 && this.grid.rootSummariesEnabled) { + if (rowIndex === this.grid.dataView.length - 1 && this.grid.rootSummariesEnabled) { this.onKeydownHome(0, true); return; } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts index 28ca55b6fb9..4f36db382dc 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts @@ -293,7 +293,7 @@ describe('IgxGrid - Cell selection #grid', () => { GridSelectionFunctions.verifyCellSelected(firstCell); - grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); + grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1); await wait(100); fix.detectChanges(); @@ -514,7 +514,7 @@ describe('IgxGrid - Cell selection #grid', () => { expect(selectionChangeSpy).toHaveBeenCalledTimes(0); expect(grid.getSelectedData()).toEqual(expectedData); - grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); + grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1); await wait(100); fix.detectChanges(); @@ -538,7 +538,7 @@ describe('IgxGrid - Cell selection #grid', () => { expect(selectionChangeSpy).toHaveBeenCalledTimes(0); expect(grid.getSelectedData()).toEqual(expectedData); - grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); + grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1); await wait(100); fix.detectChanges(); @@ -1040,7 +1040,7 @@ describe('IgxGrid - Cell selection #grid', () => { GridSelectionFunctions.verifyCellsRegionSelected(grid, 0, 0, 0, 0); GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 0, 0); - grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); + grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1); await wait(100); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav.spec.ts index df5082eef47..d5326063aee 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav.spec.ts @@ -981,7 +981,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => { }); fix.detectChanges(); - grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); + grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1); await wait(100); fix.detectChanges(); @@ -1009,7 +1009,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => { }); fix.detectChanges(); - grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); + grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1); await wait(100); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts index 362e715bd4d..1c87838582e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts @@ -1389,7 +1389,7 @@ describe('IgxGrid - Summaries #grid', () => { }); fix.detectChanges(); - grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); + grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1); await wait(100); fix.detectChanges(); @@ -1455,7 +1455,7 @@ describe('IgxGrid - Summaries #grid', () => { ['Count', 'Earliest', 'Latest'], ['9', 'Dec 18, 2007', 'Dec 9, 2017']); GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Min', 'Max'], ['19', '50']); - grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); + grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1); await wait(50); fix.detectChanges(); @@ -1485,7 +1485,7 @@ describe('IgxGrid - Summaries #grid', () => { GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 0, 4, ['Min', 'Max'], ['19', '50']); GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 0, 5, ['Count'], ['9']); - grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); + grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1); await wait(50); fix.detectChanges(); GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 18, 5, ['Count'], ['1']); @@ -1548,7 +1548,7 @@ describe('IgxGrid - Summaries #grid', () => { GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 0, 2, ['Count'], ['8']); GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 0, 4, ['Min', 'Max'], ['19', '50']); - grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); + grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1); await wait(50); fix.detectChanges(); @@ -1617,7 +1617,7 @@ describe('IgxGrid - Summaries #grid', () => { GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 4, 2, ['Count'], ['3']); GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 4, 4, ['Min', 'Max'], ['19', '50']); - grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); + grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1); await wait(50); fix.detectChanges(); @@ -1757,7 +1757,7 @@ describe('IgxGrid - Summaries #grid', () => { expect(groupRows[0].groupRow.value).toEqual(-1); expect(groupRows[1].groupRow.value).toEqual(19); - grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); + grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1); await wait(50); fix.detectChanges(); 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 4b177a29d66..c56306be442 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -340,17 +340,6 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB } } - /** - * Returns a complete list of the elements in the current vertical dataview. - * ```typescript - * const dataView = this.grid.dataView; - * ``` - * @memberof IgxGridComponent - */ - get dataView(): any { - return this.verticalScrollContainer.igxForOf; - } - /** *@hidden */ @@ -990,7 +979,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB }; - this.verticalScrollContainer.igxForOf.forEach(process); + this.dataView.forEach(process); return this.extractDataFromSelection(source, formatters, headers); } else { return super.getSelectedData(formatters, headers); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index 8c870292433..c2c00c9ad9f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -905,10 +905,10 @@ describe('IgxGrid - GroupBy #grid', () => { // verify virtualization states - should be in last chunk const virtState = grid.verticalScrollContainer.state; - expect(virtState.startIndex).toBe(grid.verticalScrollContainer.igxForOf.length - virtState.chunkSize); + expect(virtState.startIndex).toBe(grid.dataView.length - virtState.chunkSize); // verify last row is visible at bottom - const lastRow = grid.getRowByIndex(grid.verticalScrollContainer.igxForOf.length - 1); + const lastRow = grid.getRowByIndex(grid.dataView.length - 1); expect(lastRow.nativeElement.getBoundingClientRect().bottom).toBe(grid.tbody.nativeElement.getBoundingClientRect().bottom); }); diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts index e8e96ecc011..33513cc53ef 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts @@ -274,7 +274,7 @@ export class IgxGridGroupByRowComponent { if (shift) { this.grid.navigation.performShiftTabKey(this.nativeElement, activeNode); } else { - if (this.index === this.grid.verticalScrollContainer.igxForOf.length - 1 && this.grid.rootSummariesEnabled) { + if (this.index === this.grid.dataView.length - 1 && this.grid.rootSummariesEnabled) { this.grid.navigation.onKeydownHome(0, true); } else { const orderedColumns = this.grid.navigation.gridOrderedColumns; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts index 4e5307a8b0a..160eb9d69a0 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts @@ -52,7 +52,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi return scrollHeight === 0 || Math.round(scrollTop + grid.verticalScrollContainer.igxForContainerSize) === scrollHeight; } private getIsChildAtIndex(index) { - return this.grid.isChildGridRecord(this.grid.verticalScrollContainer.igxForOf[index]); + return this.grid.isChildGridRecord(this.grid.dataView[index]); } public getCellElementByVisibleIndex(rowIndex, visibleColumnIndex, isSummary = false) { @@ -120,11 +120,11 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi super.navigateDown(rowElement, selectedNode); } } - } else if (currentRowIndex !== this.grid.verticalScrollContainer.igxForOf.length - 1) { + } else if (currentRowIndex !== this.grid.dataView.length - 1) { // scroll next in view super.navigateDown(rowElement, selectedNode); } else if (this.grid.parent !== null && - currentRowIndex === this.grid.verticalScrollContainer.igxForOf.length - 1) { + currentRowIndex === this.grid.dataView.length - 1) { // move to next row in sibling layout or in parent this.focusNext(visibleColumnIndex); } @@ -152,7 +152,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi public navigateBottom(visibleColumnIndex) { // handle scenario where last index is child grid // in that case focus cell in last data row - const lastIndex = this.grid.verticalScrollContainer.igxForOf.length - 1; + const lastIndex = this.grid.dataView.length - 1; if (this.getIsChildAtIndex(lastIndex)) { const targetIndex = lastIndex - 1; const scrTopPosition = this.grid.verticalScrollContainer.getScrollForIndex(targetIndex, true); @@ -189,7 +189,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi public goToLastCell() { // handle scenario where last index is child grid // in that case focus last cell in last data row - const lastIndex = this.grid.verticalScrollContainer.igxForOf.length - 1; + const lastIndex = this.grid.dataView.length - 1; if (this.getIsChildAtIndex(lastIndex)) { const targetIndex = lastIndex - 1; const scrTopPosition = this.grid.verticalScrollContainer.getScrollForIndex(targetIndex, true); @@ -269,7 +269,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi const isSummaryRow = selectedNode.isSummaryRow; const summaryRows = this.grid.summariesRowList.toArray(); const hasSummaries = summaryRows.length > 0; - const isLastDataRow = rowIndex === this.grid.verticalScrollContainer.igxForOf.length - 1; + const isLastDataRow = rowIndex === this.grid.dataView.length - 1; const nextIsDataRow = this.grid.dataRowList.find(row => row.index === rowIndex + 1); const isLastColumn = this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex === visibleColumnIndex; const isLastSummaryRow = hasSummaries && isSummaryRow; @@ -313,7 +313,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi const parentHasSummary = parent.summariesRowList.length > 0; const parentRowIndex = parseInt( this.getClosestElemByTag(currentRowEl, 'igx-child-grid-row').parentNode.getAttribute('data-rowindex'), 10); - const isLastRowInParent = parent.verticalScrollContainer.igxForOf.length - 1 === parentRowIndex; + const isLastRowInParent = parent.dataView.length - 1 === parentRowIndex; // check if next is sibling const childRowContainer = this.getChildGridRowContainer(this.grid); const nextIsSiblingChild = !!childRowContainer.nextElementSibling; @@ -404,7 +404,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi const gridElem = this.getLastGridElem(currentRowEl.previousElementSibling); this.performShiftTabIntoChild(gridElem, currentRowEl, rowIndex); } else if (visibleColumnIndex === 0 && isSummary) { - const lastRowIndex = this.grid.verticalScrollContainer.igxForOf.length - 1; + const lastRowIndex = this.grid.dataView.length - 1; if (lastRowIndex === -1) { // no child data if (this.grid.allowFiltering && this.grid.filterMode === FilterMode.quickFilter) { @@ -531,7 +531,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi visibleColumnIndex = Math.min(lastCellIndex, visibleColumnIndex); const isScrolledToBottom = this._isScrolledToBottom(childGrid); - const lastIndex = childGrid.verticalScrollContainer.igxForOf.length - 1; + const lastIndex = childGrid.dataView.length - 1; if (!isScrolledToBottom) { // scroll to end this.scrollGrid(childGrid, 'bottom', () => this.focusPrevChild(elem, visibleColumnIndex, grid)); @@ -609,7 +609,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi const verticalScroll = nextParentGrid.verticalScrollContainer.getVerticalScroll(); const parentState = nextParentGrid.verticalScrollContainer.state; const atLastChunk = parentState.startIndex + parentState.chunkSize === - nextParentGrid.verticalScrollContainer.igxForOf.length; + nextParentGrid.dataView.length; if (next) { if (nextIsSiblingChild) { this.focusNextChild(next, visibleColumnIndex, nextParentGrid); @@ -752,7 +752,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi } else { switch (target) { case 'top': grid.verticalScrollContainer.scrollTo(0); break; - case 'bottom': grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); break; + case 'bottom': grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1); break; case 'next': grid.verticalScrollContainer.scrollNext(); break; case 'prev': grid.verticalScrollContainer.scrollPrev(); break; } 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 122572f73b5..b6abff92f15 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 @@ -618,7 +618,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone $implicit: rowData, moveView: view, owner: tmlpOutlet, - index: this.verticalScrollContainer.igxForOf.indexOf(rowData) + index: this.dataView.indexOf(rowData) }; } else { const rowID = this.primaryKey ? rowData.rowID : this.data.indexOf(rowData.rowID); @@ -626,14 +626,14 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone return { $implicit: rowData, templateID: 'childRow-' + rowID, - index: this.verticalScrollContainer.igxForOf.indexOf(rowData) + index: this.dataView.indexOf(rowData) }; } } else { return { $implicit: rowData, templateID: 'dataRow', - index: this.verticalScrollContainer.igxForOf.indexOf(rowData) + index: this.dataView.indexOf(rowData) }; } } diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts index dd014678dcd..382e88a1ede 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts @@ -237,10 +237,10 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { }); fixture.detectChanges(); - hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); + hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1); await wait(100); fixture.detectChanges(); - hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); + hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1); await wait(100); fixture.detectChanges(); @@ -316,10 +316,10 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { // }); // fixture.detectChanges(); - // hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); + // hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1); // await wait(100); // fixture.detectChanges(); - // hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); + // hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1); // await wait(100); // fixture.detectChanges(); // const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); @@ -520,17 +520,17 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { hierarchicalGrid.reflow(); fixture.detectChanges(); - expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(15); + expect(hierarchicalGrid.dataView.length).toEqual(15); hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click(); fixture.detectChanges(); - expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(16); + expect(hierarchicalGrid.dataView.length).toEqual(16); hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); - expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(17); + expect(hierarchicalGrid.dataView.length).toEqual(17); - hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); + hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1); await wait(100); fixture.detectChanges(); @@ -549,7 +549,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expanded).toBeTruthy(); expect((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expanded).toBeTruthy(); - expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(17); + expect(hierarchicalGrid.dataView.length).toEqual(17); let childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); let childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; @@ -563,7 +563,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(hierarchicalGrid.dataRowList.toArray()[0].cells.first.value).toEqual('15'); expect((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expanded).toBeFalsy(); expect((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expanded).toBeFalsy(); - expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(15); + expect(hierarchicalGrid.dataView.length).toEqual(15); childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); expect(childGrids.length).toEqual(0); @@ -575,7 +575,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(hierarchicalGrid.dataRowList.toArray()[0].cells.first.value).toEqual('0'); expect((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expanded).toBeTruthy(); expect((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expanded).toBeTruthy(); - expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(17); + expect(hierarchicalGrid.dataView.length).toEqual(17); childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; @@ -605,7 +605,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(hierarchicalGrid.hasVerticalSroll()).toBeTruthy(); // scroll bottom - hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); + hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1); await wait(30); fixture.detectChanges(); @@ -620,7 +620,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { hierarchicalGrid.getRowByKey('1').nativeElement.children[0].click(); await wait(30); fixture.detectChanges(); - hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); + hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1); await wait(30); fixture.detectChanges(); @@ -635,7 +635,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { hierarchicalGrid.getRowByKey('2').nativeElement.children[0].click(); await wait(30); fixture.detectChanges(); - hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); + hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1); await wait(30); fixture.detectChanges(); @@ -650,7 +650,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { hierarchicalGrid.getRowByKey('3').nativeElement.children[0].click(); await wait(30); fixture.detectChanges(); - hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); + hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1); await wait(30); fixture.detectChanges(); @@ -665,7 +665,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { hierarchicalGrid.getRowByKey('4').nativeElement.children[0].click(); await wait(30); fixture.detectChanges(); - hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); + hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1); await wait(30); fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts index a57492403a0..27dd2958085 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts @@ -537,7 +537,7 @@ describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => { it('should retain focused cell when expand/collapse hierarchical row using ALT+Arrow Right/ALT+Arrow Left.', (async () => { // scroll to last row - const lastDataIndex = hierarchicalGrid.verticalScrollContainer.igxForOf.length - 2; + const lastDataIndex = hierarchicalGrid.dataView.length - 2; hierarchicalGrid.verticalScrollContainer.scrollTo(lastDataIndex); await wait(100); fixture.detectChanges(); @@ -877,7 +877,7 @@ describe('IgxHierarchicalGrid Complex Navigation #hGrid', () => { await wait(100); fixture.detectChanges(); const child = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; - const lastIndex = child.verticalScrollContainer.igxForOf.length - 1; + const lastIndex = child.dataView.length - 1; child.verticalScrollContainer.scrollTo(lastIndex); await wait(100); fixture.detectChanges(); @@ -956,7 +956,7 @@ describe('IgxHierarchicalGrid Multi-layout Navigation #hGrid', () => { const child1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; const child2 = hierarchicalGrid.hgridAPI.getChildGrids(false)[4]; - child1.verticalScrollContainer.scrollTo(child1.verticalScrollContainer.igxForOf.length - 1); + child1.verticalScrollContainer.scrollTo(child1.dataView.length - 1); await wait(100); fixture.detectChanges(); @@ -977,7 +977,7 @@ describe('IgxHierarchicalGrid Multi-layout Navigation #hGrid', () => { const child1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; const child2 = hierarchicalGrid.hgridAPI.getChildGrids(false)[4]; - child1.verticalScrollContainer.scrollTo(child1.verticalScrollContainer.igxForOf.length - 1); + child1.verticalScrollContainer.scrollTo(child1.dataView.length - 1); await wait(100); fixture.detectChanges(); const rowVirt = child1.dataRowList.toArray()[0].virtDirRow; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index ce0c241b6c9..96c9c5f2aa8 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -144,7 +144,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { fixture.detectChanges(); expect(row.expanded).toBe(true); // scroll to bottom - hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); + hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1); await wait(100); fixture.detectChanges(); // scroll to top @@ -622,7 +622,7 @@ describe('IgxHierarchicalGrid Row Islands #hGrid', () => { const child2 = children[1]; expect(child1._destroyed).toBeFalsy(); expect(child2._destroyed).toBeFalsy(); - hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); + hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1); await wait(100); fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts index 85f2e4655a7..4fc9cea09f9 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts @@ -252,7 +252,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { fixture.detectChanges(); await wait(100); // scroll to bottom - hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); + hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1); fixture.detectChanges(); await wait(100); fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-multi-cell-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-multi-cell-selection.spec.ts index 1d13b701893..0785e785487 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-multi-cell-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-multi-cell-selection.spec.ts @@ -127,7 +127,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { { ID: 17 } ]; - treeGrid.verticalScrollContainer.scrollTo(treeGrid.verticalScrollContainer.igxForOf.length - 1); + treeGrid.verticalScrollContainer.scrollTo(treeGrid.dataView.length - 1); await wait(30); fix.detectChanges(); @@ -169,7 +169,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { GridSelectionFunctions.verifyCellSelected(firstCell); - treeGrid.verticalScrollContainer.scrollTo(treeGrid.verticalScrollContainer.igxForOf.length - 1); + treeGrid.verticalScrollContainer.scrollTo(treeGrid.dataView.length - 1); await wait(200); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-summaries.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-summaries.spec.ts index ef6f1bcb8ac..35230a18b1e 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-summaries.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-summaries.spec.ts @@ -1391,7 +1391,7 @@ describe('IgxTreeGrid - Summaries #tGrid', () => { treeGrid.expandAll(); fix.detectChanges(); - treeGrid.verticalScrollContainer.scrollTo(treeGrid.verticalScrollContainer.igxForOf.length - 1); + treeGrid.verticalScrollContainer.scrollTo(treeGrid.dataView.length - 1); await wait(100); fix.detectChanges(); 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 47eade9b688..7950acc7628 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 @@ -697,11 +697,11 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent implements IGridD if (delayScrolling) { this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => { this.scrollDirective(this.verticalScrollContainer, - typeof(row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(record)); + typeof(row) === 'number' ? row : this.dataView.indexOf(record)); }); } else { this.scrollDirective(this.verticalScrollContainer, - typeof(row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(record)); + typeof(row) === 'number' ? row : this.dataView.indexOf(record)); } this.scrollToHorizontally(column); @@ -732,7 +732,7 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent implements IGridD source.push(record.data); }; - this.verticalScrollContainer.igxForOf.forEach(process); + this.dataView.forEach(process); return this.extractDataFromSelection(source, formatters, headers); } From 40a52c2985fdad3b3e1afd25d3210f2783937f27 Mon Sep 17 00:00:00 2001 From: 3phase Date: Thu, 10 Oct 2019 10:56:49 +0300 Subject: [PATCH 39/48] feat(grid): Fixes lint errors #5069 --- projects/igniteui-angular/src/lib/grids/grid-base.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index a12c7f84461..786bd76230d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4630,7 +4630,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements public hasVerticalSroll() { if (this._init) { return false; } const isScrollable = this.verticalScrollContainer ? this.verticalScrollContainer.isScrollable() : false; - return !!(this.calcWidth && this.dataView && + return !!(this.calcWidth && this.dataView && this.dataView.length > 0 && isScrollable); } From 992b3ba2e89be1937ce157ef6963fb24ad7b7e63 Mon Sep 17 00:00:00 2001 From: 3phase Date: Thu, 10 Oct 2019 11:01:10 +0300 Subject: [PATCH 40/48] feat(grid): Adds made changes to CHANGELOG #5069 --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 232dc500cb0..cdef589b23e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -75,6 +75,7 @@ For more information about the theming please read our [documentation](https://w - `isCellSelected` method has been deprecated. Now you can use `selected` property. - `rowSelectable` property has been deprecated. Now you can use `rowSelection` property to enable row selection and also you can show and hide the row selectors by setting `hideRowSelectors` property to true or false (which is the default value). - Removed deprecated event `OnFocusChange` + - Privately accessed method, `verticalScrollContainer.igxForOf`, is now publicly exposed as `dataView` - **Breaking Change** `igxExcelStyleSortingTemplate` directive is renamed to `igxExcelStyleSorting`. - **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`. - **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`. From d8f82281e9de302190fec4a44c08bd482a64fc4a Mon Sep 17 00:00:00 2001 From: 3phase Date: Thu, 10 Oct 2019 12:36:59 +0300 Subject: [PATCH 41/48] feat(grid): Resolves requested changes #5069 --- CHANGELOG.md | 2 +- .../igniteui-angular/src/lib/grids/common/grid.interface.ts | 2 +- projects/igniteui-angular/src/lib/grids/grid-base.component.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cdef589b23e..11ef6dc54c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -75,7 +75,7 @@ For more information about the theming please read our [documentation](https://w - `isCellSelected` method has been deprecated. Now you can use `selected` property. - `rowSelectable` property has been deprecated. Now you can use `rowSelection` property to enable row selection and also you can show and hide the row selectors by setting `hideRowSelectors` property to true or false (which is the default value). - Removed deprecated event `OnFocusChange` - - Privately accessed method, `verticalScrollContainer.igxForOf`, is now publicly exposed as `dataView` + - `IgxGridBaseComponent` exposes a new method, `dataView` that returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid - **Breaking Change** `igxExcelStyleSortingTemplate` directive is renamed to `igxExcelStyleSorting`. - **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`. - **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`. diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index 733fdd66e6c..43e978b0622 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -24,7 +24,7 @@ export interface GridType { pinnedColumns: any; summariesRowList: any; headerContainer: any; - dataView: any; + dataView: any[]; rowInEditMode: any; rowEditTabs: any; diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 786bd76230d..59d6a01ed42 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4998,7 +4998,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements } /** - * Returns a complete list of the elements in the current vertical dataview. + * Returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid. * ```typescript * const dataView = this.grid.dataView; * ``` From d38428d6a99e723cb7c2b5bf2e1927094dbe80bd Mon Sep 17 00:00:00 2001 From: Tacho Date: Thu, 10 Oct 2019 12:54:02 +0300 Subject: [PATCH 42/48] chore(*): address review comments #5886 --- .../src/lib/grids/grid/grid-filtering-advanced.spec.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts index d0300c5fb62..c0381285058 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts @@ -2690,7 +2690,7 @@ describe('IgxGrid - Advanced Filtering', () => { fix.detectChanges(); const dropdownValues = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix).map((x: any) => x.innerText); const expectedValues = ['ID', 'ProductName', 'Downloads', 'Released', 'ReleaseDate', 'Another Field']; - verifyEqualArrays(dropdownValues, expectedValues); + expect(expectedValues).toEqual(dropdownValues); })); }); }); @@ -2885,8 +2885,6 @@ function verifyContextMenuType(fix, shouldBeContextualGroup: boolean) { function verifyEqualArrays(firstArr: any[], secondArr: any[]) { expect(firstArr.length).toEqual(secondArr.length, 'Array lengths mismatch.'); - firstArr = firstArr.sort(); - secondArr = secondArr.sort(); // Verify sorted arrays have equal respective elements. const len = firstArr.length; for (let index = 0; index < len; index++) { From f5c0d8682a0c3bd0065e728d90098ab262067c9d Mon Sep 17 00:00:00 2001 From: Tacho Date: Thu, 10 Oct 2019 12:57:13 +0300 Subject: [PATCH 43/48] chore(*): remove resizeObserverIgnoreError #5886 --- .../src/lib/grids/grid/grid-filtering-advanced.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts index 3a5ec0fd7e4..2c37244b697 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts @@ -2666,7 +2666,6 @@ describe('IgxGrid - Advanced Filtering', () => { describe('', () => { let fix, grid: IgxGridComponent; beforeEach(fakeAsync(() => { - resizeObserverIgnoreError(); fix = TestBed.createComponent(IgxGridAdvancedFilteringColumnGroupComponent); grid = fix.componentInstance.grid; fix.detectChanges(); From be4b9ad172bf30544a7142abb87bc70657292a3a Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 10 Oct 2019 13:49:06 +0300 Subject: [PATCH 44/48] fix(grid): hovering selected row in dark theme is white Closes #5959 --- .../src/lib/core/styles/themes/schemas/dark/_grid.scss | 7 +++++++ .../src/lib/core/styles/themes/schemas/light/_grid.scss | 9 +++------ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss index baef7724404..3b336e03c23 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss @@ -13,6 +13,7 @@ /// @prop {Color} row-even-background [#222] - The background color of even rows. /// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #222] - The hover row background color. /// @prop {Map} row-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222] - The selected row background color. +/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 'A700'), rgba: .24, hexrgba: #222] - The selected row background color on hover. /// @prop {Color} row-selected-text-color [#fff] - The selected row text color. /// @prop {Color} ghost-header-background [#222] - The dragged header background color. /// @prop {Color} cell-editing-background [#222] - The background for the cell in editing mode. @@ -52,6 +53,12 @@ $_base-dark-grid: ( hexrgba: #222 ), + row-selected-hover-background: ( + igx-color: ('secondary', 'A700'), + rgba: .24, + hexrgba: #222 + ), + row-selected-text-color: #fff, ghost-header-background: #222, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss index 039642195c5..3e225c45bb0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss @@ -27,9 +27,9 @@ /// @prop {Color} row-even-background [#fff] - The background color of even rows. /// @prop {Color} row-odd-text-color [inherit] - The text color of odd rows. /// @prop {Color} row-even-text-color [inherit] - The text color of even rows. -/// @prop {Map} row-selected-background [igx-color: ('secondary', 50), hexrgba: #fff] - The selected row background color. +/// @prop {Map} row-selected-background [igx-color: ('secondary', 50)] - The selected row background color. /// @prop {Map} row-selected-text-color [igx-contrast-color: ('secondary', 50)] - The selected row text color. -/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 50), hexrgba: #fff] - The selected row hover background. +/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 50)] - The selected row hover background. /// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #fff] - The hover row background color. /// @prop {Map} row-hover-text-color [igx-contrast-color: ('grays', 200)] - The hover row text color. /// @prop {Map} row-border-color [igx-color: ('grays', 300)] - The row bottom border color. @@ -132,12 +132,10 @@ $_light-grid: extend( row-selected-background: ( igx-color: ('secondary', 50), - hexrgba: #fff ), row-selected-hover-background: ( igx-color: ('secondary', 50), - hexrgba: #fff ), row-selected-text-color: ( @@ -334,7 +332,7 @@ $_light-grid: extend( /// @prop {Map} row-selected-hover-background [igx-color: ('grays', 200), hexrgba: #fff] - The selected row hover background. /// @prop {Map} row-border-color [igx-color: ('grays', 100)] - The row bottom border color. /// @prop {Map} pinned-border-color [igx-color: ('grays', 200)] - The color of the pinned border. -/// @prop {Map} cell-active-border-color [igx-color: ('primary', 100), hexrgba: #fff] - The active(focused) cell border color. +/// @prop {Map} cell-active-border-color [igx-color: ('primary', 100)] - The active(focused) cell border color. /// @prop {Map} cell-selected-background [igx-color: ('grays', 300), hexrgba: #fff] - The selected cell background color. /// @prop {Map} grouparea-background [igx-color: 'surface'] - The grid group area background color. /// @prop {Map} group-row-background [igx-color: ('grays', 50), hexrgba: #fff] - The grid group row background color. @@ -385,7 +383,6 @@ $_fluent-grid: extend( cell-active-border-color: ( igx-color: ('primary', 100), - hexrgba: #fff ), cell-selected-background: ( From 5521a1f9b247004176ced9b897f4f464d6f85e29 Mon Sep 17 00:00:00 2001 From: 3phase Date: Thu, 10 Oct 2019 15:37:16 +0300 Subject: [PATCH 45/48] feat(grid): Resolves requested changes #5069 --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 11ef6dc54c8..dcfef97747a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -75,7 +75,7 @@ For more information about the theming please read our [documentation](https://w - `isCellSelected` method has been deprecated. Now you can use `selected` property. - `rowSelectable` property has been deprecated. Now you can use `rowSelection` property to enable row selection and also you can show and hide the row selectors by setting `hideRowSelectors` property to true or false (which is the default value). - Removed deprecated event `OnFocusChange` - - `IgxGridBaseComponent` exposes a new method, `dataView` that returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid + - `IgxGridBaseComponent` exposes a new property, `dataView` that returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid - **Breaking Change** `igxExcelStyleSortingTemplate` directive is renamed to `igxExcelStyleSorting`. - **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`. - **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`. From 108cd8c97b3dc9123328e25444c8a3413765534c Mon Sep 17 00:00:00 2001 From: Pepo <3phase@users.noreply.github.com> Date: Thu, 10 Oct 2019 15:52:17 +0300 Subject: [PATCH 46/48] Update grid-base.component.ts --- projects/igniteui-angular/src/lib/grids/grid-base.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 59d6a01ed42..8dc5fa29045 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -5004,7 +5004,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements * ``` * @memberof IgxGridComponent */ - get dataView(): any { + get dataView(): any[] { return this.verticalScrollContainer.igxForOf; } From 587edccd309125fb3ecbb046c543548d0962ca43 Mon Sep 17 00:00:00 2001 From: Pepo <3phase@users.noreply.github.com> Date: Thu, 10 Oct 2019 16:02:52 +0300 Subject: [PATCH 47/48] Removes unneeded full stop from changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7800ac0e2b0..88993dbc0a1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ All notable changes for each version of this project will be documented in this - `IgxTextHighlightDirective` - The default highlight directive styles have been moved to a Sass theme - `igx-highlight-theme`; You can modify the resting and active background and text color styles of the directive by passing the respective properties to the Sass theme. You can still pass your own CSS classes to the highlight directive via the cssClass and activeCssClass inputs. - `IgxChip` - - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` and `onSelection` now provide the events passed from the `igxDrag` directive. The passed original events are in other words the previous events that triggered the `igxChip` ones. They also have original events until a browser event is reached.. + - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` and `onSelection` now provide the events passed from the `igxDrag` directive. The passed original events are in other words the previous events that triggered the `igxChip` ones. They also have original events until a browser event is reached. ## 8.2.0 ### New theme From 6c78b92ef303f266e5c5c19caa02376a5f87de9a Mon Sep 17 00:00:00 2001 From: Pepo <3phase@users.noreply.github.com> Date: Thu, 10 Oct 2019 16:09:30 +0300 Subject: [PATCH 48/48] Updates changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 88993dbc0a1..4fae64cefcd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ All notable changes for each version of this project will be documented in this - `IgxTextHighlightDirective` - The default highlight directive styles have been moved to a Sass theme - `igx-highlight-theme`; You can modify the resting and active background and text color styles of the directive by passing the respective properties to the Sass theme. You can still pass your own CSS classes to the highlight directive via the cssClass and activeCssClass inputs. - `IgxChip` - - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` and `onSelection` now provide the events passed from the `igxDrag` directive. The passed original events are in other words the previous events that triggered the `igxChip` ones. They also have original events until a browser event is reached. + - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` and `onSelection` now provides the events, passed from the `igxDrag` directive. The passed original events are in other words the previous events that triggered the `igxChip` ones. They also have original events until a browser event is reached. ## 8.2.0 ### New theme