Merge branch '8.2.x' into astaev/issue6260-8.2.x

Author: DiyanDimitrov

projects/igniteui-angular/package.json

@@ -79,7 +79,7 @@
         "web-animations-js": "^2.3.2"
     },
     "devDependencies": {
-        "igniteui-cli": "~4.2.0"
+        "igniteui-cli": "~4.3.0"
     },
     "ng-update": {
         "migrations": "./migrations/migration-collection.json"

projects/igniteui-angular/src/lib/carousel/carousel.component.ts

@@ -12,7 +12,7 @@ import {
     Output
 } from '@angular/core';
 import { IgxIconModule } from '../icon/index';
-import { IBaseEventArgs } from '../core/utils';
+import { IBaseEventArgs, PlatformUtil } from '../core/utils';
 
 let NEXT_ID = 0;
 
@@ -202,7 +202,7 @@ export class IgxCarouselComponent implements OnDestroy {
     private _destroyed: boolean;
     private _total = 0;
 
-    constructor(private element: ElementRef) { }
+    constructor(private element: ElementRef, private platformUtil: PlatformUtil) { }
     /**
      *@hidden
      */
@@ -465,7 +465,7 @@ export class IgxCarouselComponent implements OnDestroy {
     private _restartInterval() {
         this._resetInterval();
 
-        if (!isNaN(this.interval) && this.interval > 0) {
+        if (!isNaN(this.interval) && this.interval > 0 && this.platformUtil.isBrowser) {
             this._lastInterval = setInterval(() => {
                 const tick = +this.interval;
                 if (this._playing && this.total && !isNaN(tick) && tick > 0) {

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -210,6 +210,14 @@ export class DataUtil {
         return data;
     }
 
+    public static parseValue(dataType: DataType, value: any): any {
+        if (dataType === DataType.Number) {
+            value = parseFloat(value);
+        }
+
+        return value;
+    }
+
     private static findParentFromPath(data: any[], primaryKey: any, childDataKey: any, path: any[]): any {
         let collection: any[] = data;
         let result: any;

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -181,6 +181,13 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     @Output()
     public onChunkLoad = new EventEmitter<IForOfState>();
 
+    /**
+     * @hidden @internal
+     * An event that is emitted when scrollbar visibility has changed.
+     */
+    @Output()
+    public onScrollbarVisibilityChanged = new EventEmitter<any>();
+
     /**
      * An event that is emitted after the rendered content size of the igxForOf has been changed.
     */
@@ -1155,10 +1162,11 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     protected _recalcScrollBarSize() {
         const count = this.isRemote ? this.totalItemCount : (this.igxForOf ? this.igxForOf.length : 0);
         this.dc.instance.notVirtual = !(this.igxForContainerSize && this.dc && this.state.chunkSize < count);
+        const scrollable = this.isScrollable();
         if (this.igxForScrollOrientation === 'horizontal') {
             const totalWidth = this.igxForContainerSize ? this.initSizesCache(this.igxForOf) : 0;
             this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
-            this.scrollComponent.nativeElement.children[0].style.width = totalWidth + 'px';
+            this.scrollComponent.size = totalWidth;
             if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
                 this.scrollPosition = 0;
             }
@@ -1170,6 +1178,10 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                 this.scrollPosition = 0;
             }
         }
+        if (scrollable !== this.isScrollable()) {
+            // scrollbar visibility has changed
+            this.onScrollbarVisibilityChanged.emit();
+        }
     }
 
     protected _calcHeight(): number {

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -18,6 +18,7 @@ import { takeUntil, first } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { KEYS } from '../../../core/utils';
 import { AbsoluteScrollStrategy, AutoPositionStrategy } from '../../../services/index';
+import { DataUtil } from './../../../data-operations/data-util';
 
 /**
  *@hidden
@@ -301,7 +302,7 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
         if (this.editedExpression) {
             this.editedExpression.expression.fieldName = this.selectedColumn.field;
             this.editedExpression.expression.condition = this.selectedColumn.filters.condition(this.selectedCondition);
-            this.editedExpression.expression.searchVal = this.searchValue;
+            this.editedExpression.expression.searchVal = DataUtil.parseValue(this.selectedColumn.dataType, this.searchValue);
 
             this.editedExpression.inEditMode = false;
             this.editedExpression = null;

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts

@@ -13,7 +13,7 @@ import { ExpressionUI } from '../grid-filtering.service';
 import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.component';
 import { IgxDropDownItemComponent, IgxDropDownComponent } from '../../../drop-down/index';
 import { IgxInputGroupComponent, IgxInputDirective } from '../../../input-group/index';
-import { DataType } from '../../../data-operations/data-util';
+import { DataType, DataUtil } from '../../../data-operations/data-util';
 import { IFilteringOperation } from '../../../data-operations/filtering-condition';
 import { OverlaySettings, ConnectedPositioningStrategy, CloseScrollStrategy } from '../../../services/index';
 import { KEYS, IBaseEventArgs } from '../../../core/utils';
@@ -167,7 +167,7 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
     }
 
     public onValuesInput(eventArgs) {
-        this.expressionUI.expression.searchVal = this.transformValue(eventArgs.target.value);
+        this.expressionUI.expression.searchVal = DataUtil.parseValue(this.column.dataType, eventArgs.target.value);
     }
 
     public onLogicOperatorButtonClicked(eventArgs, buttonIndex: number) {
@@ -207,14 +207,4 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
 
         event.stopPropagation();
     }
-
-    private transformValue(value): any {
-        if (this.column.dataType === DataType.Number) {
-            value = parseFloat(value);
-        } else if (this.column.dataType === DataType.Boolean) {
-            value = Boolean(value);
-        }
-
-        return value;
-    }
 }

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts

@@ -13,7 +13,7 @@ import {
     ChangeDetectionStrategy,
     ViewRef
 } from '@angular/core';
-import { DataType } from '../../data-operations/data-util';
+import { DataType, DataUtil } from '../../data-operations/data-util';
 import { IgxColumnComponent } from '../column.component';
 import { IgxDropDownComponent, ISelectionEventArgs } from '../../drop-down/index';
 import { IFilteringOperation } from '../../data-operations/filtering-condition';
@@ -100,7 +100,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
             this.expression.searchVal = null;
             this.showHideArrowButtons();
         } else {
-            this.expression.searchVal = this.transformValue(val);
+            this.expression.searchVal = DataUtil.parseValue(this.column.dataType, val);
             if (this.expressionsList.find(item => item.expression === this.expression) === undefined) {
                 this.addExpression(true);
             }
@@ -659,16 +659,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         });
     }
 
-    private transformValue(value): any {
-        if (this.column.dataType === DataType.Number) {
-            value = parseFloat(value);
-        } else if (this.column.dataType === DataType.Boolean) {
-            value = Boolean(value);
-        }
-
-        return value;
-    }
-
     private addExpression(isSelected: boolean) {
         const exprUI = new ExpressionUI();
         exprUI.expression = this.expression;

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -103,7 +103,7 @@ import { DeprecateProperty } from '../core/deprecateDecorators';
 import { IFilteringStrategy } from '../data-operations/filtering-strategy';
 import { IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective,
      IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective } from './grid/grid.directives';
-import { IgxRowDragGhostDirective  } from './row-drag.directive';
+import { IgxRowDragGhostDirective, IgxDragIndicatorIconDirective  } from './row-drag.directive';
 import { GridKeydownTargetType, GridSelectionMode, GridSummaryPosition, GridSummaryCalculationMode, FilterMode } from './common/enums';
 
 const MINIMUM_COLUMN_WIDTH = 136;
@@ -229,6 +229,7 @@ export interface IRowDragStartEventArgs extends CancelableEventArgs, IBaseEventA
 export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit {
     private _scrollWidth: number;
+    private _customDragIndicatorIconTemplate: TemplateRef<any>;
     protected _init = true;
     private _tick;
     private _cdrRequests = false;
@@ -1945,6 +1946,22 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @ContentChildren(IgxRowDragGhostDirective, { read: TemplateRef, descendants: false })
     public dragGhostCustomTemplates: QueryList<TemplateRef<any>>;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @ContentChildren(IgxDragIndicatorIconDirective, { read: TemplateRef, descendants: false })
+    public dragIndicatorIconTemplates: QueryList<TemplateRef<any>>;
+    /**
+    * The custom template, if any, that should be used when rendering the row drag indicator icon
+    */
+    public get dragIndicatorIconTemplate(): TemplateRef<any> {
+        return this._customDragIndicatorIconTemplate || this.dragIndicatorIconTemplates.first;
+    }
+
+    public set dragIndicatorIconTemplate(val: TemplateRef<any>) {
+        this._customDragIndicatorIconTemplate = val;
+    }
     /**
      * @hidden
      */
@@ -3017,9 +3034,19 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         });
 
         this.verticalScrollContainer.onDataChanging.pipe(destructor, filter(() => !this._init)).subscribe(($event) => {
-            this.calculateGridHeight();
-            $event.containerSize = this.calcHeight;
+            const shouldRecalcSize = this.isPercentHeight &&
+             ( !this.calcHeight || this.calcHeight === this.getDataBasedBodyHeight() ||
+              this.calcHeight === this.renderedRowHeight * this._defaultTargetRecordNumber);
+            if (shouldRecalcSize) {
+                this.calculateGridHeight();
+                $event.containerSize = this.calcHeight;
+            }
             this.evaluateLoadingState();
+        });
+
+        this.verticalScrollContainer.onScrollbarVisibilityChanged.pipe(destructor, filter(() => !this._init)).subscribe(() => {
+            // called to recalc all widths that may have changes as a result of
+            // the vert. scrollbar showing/hiding
             this.notifyChanges(true);
         });
 

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts

@@ -419,7 +419,7 @@ describe('IgxGrid - Advanced Filtering', () => {
             expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('Ignite UI for Angular');
         }));
 
-        it('Should correctly filter by a \'number\' column through UI.', fakeAsync(() => {
+        it('Should correctly filter by a \'Greater Than\' with \'number\' column through UI.', fakeAsync(() => {
             // Test prerequisites
             grid.height = '800px';
             fix.detectChanges();
@@ -461,6 +461,47 @@ describe('IgxGrid - Advanced Filtering', () => {
             expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
         }));
 
+        it('Should correctly filter by a \'Equals\' with \'number\' column through UI.', fakeAsync(() => {
+            // Test prerequisites
+            grid.height = '800px';
+            fix.detectChanges();
+            tick(50);
+
+            // Verify no filters are present.
+            expect(grid.filteredData).toBeNull();
+            expect(grid.rowList.length).toBe(8);
+            expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
+            expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
+
+            // Open Advanced Filtering dialog.
+            GridFunctions.clickAdvancedFilteringButton(fix);
+            fix.detectChanges();
+
+            // Click the initial 'Add And Group' button.
+            const addAndGroupButton = GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix)[0];
+            addAndGroupButton.click();
+            tick(100);
+            fix.detectChanges();
+
+            selectColumnInEditModeExpression(fix, 2); // Select 'Downloads' column.
+            selectOperatorInEditModeExpression(fix, 0); // Select 'Equals' operator.
+            const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+            sendInputNativeElement(fix, input, '127'); // Type filter value.
+
+            // Commit the populated expression.
+            GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+            fix.detectChanges();
+
+            // Apply the filters.
+            GridFunctions.clickAdvancedFilteringApplyButton(fix);
+            fix.detectChanges();
+
+            // Verify the filter results.
+            expect(grid.filteredData.length).toEqual(1);
+            expect(grid.rowList.length).toBe(1);
+            expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('NetAdvantage');
+        }));
+
         it('Should correctly filter by a \'boolean\' column through UI.', fakeAsync(() => {
             // Test prerequisites
             grid.height = '800px';
@@ -2388,6 +2429,9 @@ describe('IgxGrid - Advanced Filtering', () => {
                 // and verify that the root group and all of its children become selected.
                 let rootOperatorLine = GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix);
                 UIInteractions.simulateKeyDownEvent(rootOperatorLine, 'Enter');
+                fix.detectChanges();
+                await wait(200);
+                fix.detectChanges();
                 await wait(200);
                 fix.detectChanges();
                 verifyChildrenSelection(GridFunctions.getAdvancedFilteringExpressionsContainer(fix), true);
@@ -2397,6 +2441,9 @@ describe('IgxGrid - Advanced Filtering', () => {
                 // and verify that the root group and all of its children become unselected.
                 rootOperatorLine = GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix);
                 UIInteractions.simulateKeyDownEvent(rootOperatorLine, 'Enter');
+                fix.detectChanges();
+                await wait(200);
+                fix.detectChanges();
                 await wait(200);
                 fix.detectChanges();
                 verifyChildrenSelection(GridFunctions.getAdvancedFilteringExpressionsContainer(fix), false);

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -1251,14 +1251,15 @@ describe('IgxGrid - Filtering actions #grid', () => {
         fix.detectChanges();
 
         const firstMonth = calendar.querySelector('.igx-calendar__month');
+        const firstMonthText = (firstMonth as HTMLElement).innerText;
         firstMonth.dispatchEvent(new Event('click'));
         tick();
         fix.detectChanges();
 
         calendar = outlet.getElementsByClassName('igx-calendar')[0];
         const month = calendar.querySelector('.igx-calendar-picker__date');
 
-        expect(month.innerHTML.trim()).toEqual('Jan');
+        expect(month.innerHTML.trim()).toEqual(firstMonthText);
     }));
 
     it('Should correctly select year from year view datepicker/calendar component', fakeAsync(() => {
@@ -3319,23 +3320,30 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             fix.detectChanges();
 
             GridFunctions.applyFilter('a', fix);
-            await wait(16);
+            fix.detectChanges();
+            await wait(300);
+            fix.detectChanges();
             GridFunctions.applyFilter('e', fix);
-            await wait(16);
+            fix.detectChanges();
+            await wait(300);
+            fix.detectChanges();
             GridFunctions.applyFilter('i', fix);
-            await wait(16);
+            fix.detectChanges();
+            await wait(300);
+            fix.detectChanges();
             GridFunctions.applyFilter('o', fix);
             // wait for chip to be scrolled in view
-            await wait(200);
             fix.detectChanges();
-            await wait(100);
+            await wait(300);
+            fix.detectChanges();
             verifyMultipleChipsVisibility(fix, [false, false, false, true]);
 
             const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
             GridFunctions.removeFilterChipByIndex(3, filterUIRow);
             // wait for chip to be scrolled in view
             fix.detectChanges();
-            await wait(200);
+            await wait(300);
+            fix.detectChanges();
 
             verifyMultipleChipsVisibility(fix, [false, true, false]);
             let chips = filterUIRow.queryAll(By.directive(IgxChipComponent));
@@ -3344,7 +3352,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             GridFunctions.removeFilterChipByIndex(2, filterUIRow);
             // wait for chip to be scrolled in view
             fix.detectChanges();
-            await wait(200);
+            await wait(300);
+            fix.detectChanges();
 
             verifyMultipleChipsVisibility(fix, [true, false]);
             chips = filterUIRow.queryAll(By.directive(IgxChipComponent));