Merge branch 'rkaraivanov/ripple-animation-builder-71' of https://git…

…hub.com/IgniteUI/igniteui-angular into rkaraivanov/ripple-animation-builder-71

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

@@ -961,9 +961,12 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             } else {
                 arr.push(item);
                 length = dimension === this.igxForSizePropName ? arr.length + 1 : arr.length;
-                if (dimension === 'height' && sum - availableSize < parseInt(this.igxForItemSize, 10)) {
-                    // add one more for vertical smooth scroll
-                    length++;
+                if (dimension === 'height') {
+                    const maxItemSize = arr.reduce((pr, c) => Math.max(pr, this._getItemSize(c, dimension)), 0);
+                    if (sum - availableSize < maxItemSize) {
+                        // add one more for vertical smooth scroll
+                        length++;
+                    }
                 }
                 arr.splice(0, 1);
             }
@@ -1217,9 +1220,11 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         // if data has been changed while container is scrolled
         // should update scroll top/left according to change so that same startIndex is in view
         if (Math.abs(diff) > 0 && scr.scrollTop > 0) {
-            this.recalcUpdateSizes();
-            const offset = parseInt(this.dc.instance._viewContainer.element.nativeElement.style.top, 10);
-            scr.scrollTop = this.sizesCache[this.state.startIndex] - offset;
+            requestAnimationFrame(() => {
+                this.recalcUpdateSizes();
+                const offset = parseInt(this.dc.instance._viewContainer.element.nativeElement.style.top, 10);
+                scr.scrollTop = this.sizesCache[this.state.startIndex] - offset;
+            });
         }
     }
 

projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts

@@ -193,6 +193,37 @@ describe('IgxInput', () => {
         testRequiredValidation(inputElement, fixture);
     });
 
+    it('Should update style when required input\'s value is set.', () => {
+        const fixture = TestBed.createComponent(RequiredInputComponent);
+        fixture.detectChanges();
+
+        const igxInput = fixture.componentInstance.igxInput;
+        const inputElement = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
+
+        dispatchInputEvent('focus', inputElement, fixture);
+        dispatchInputEvent('blur', inputElement, fixture);
+
+        const inputGroupElement = fixture.debugElement.query(By.css('igx-input-group')).nativeElement;
+        expect(inputGroupElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(true);
+        expect(igxInput.valid).toBe(IgxInputState.INVALID);
+
+        igxInput.value = 'test';
+        fixture.detectChanges();
+
+        expect(inputGroupElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(false);
+        expect(igxInput.valid).toBe(IgxInputState.VALID);
+
+
+        igxInput.value = '';
+        fixture.detectChanges();
+
+        dispatchInputEvent('focus', inputElement, fixture);
+        dispatchInputEvent('blur', inputElement, fixture);
+
+        expect(inputGroupElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(true);
+        expect(igxInput.valid).toBe(IgxInputState.INVALID);
+    });
+
     it('Should style required input with two-way databinding correctly.', () => {
         const fixture = TestBed.createComponent(RequiredTwoWayDataBoundInputComponent);
         fixture.detectChanges();

projects/igniteui-angular/src/lib/directives/input/input.directive.ts

@@ -52,6 +52,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     @Input('value')
     set value(value: any) {
         this.nativeElement.value = value;
+        this.checkValidity();
     }
     /**
      * Gets the `value` propery.
@@ -144,9 +145,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
      */
     @HostListener('input')
     public onInput() {
-        if (!this.ngControl && this._hasValidators()) {
-            this._valid = this.nativeElement.checkValidity() ? IgxInputState.VALID : IgxInputState.INVALID;
-        }
+        this.checkValidity();
     }
     /**
      *@hidden
@@ -294,4 +293,10 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     public set valid(value: IgxInputState) {
         this._valid = value;
     }
+
+    private checkValidity() {
+        if (!this.ngControl && this._hasValidators()) {
+            this._valid = this.nativeElement.checkValidity() ? IgxInputState.VALID : IgxInputState.INVALID;
+        }
+    }
 }

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

@@ -29,6 +29,8 @@
             [type]="type"
             [readonly]="isUnaryCondition"
             (click)="onInputClick()"
+            (compositionstart)="onCompositionStart()"
+            (compositionend)="onCompositionEnd()"
             (keydown)="onInputKeyDown($event)"
             (keyup)="onInputKeyUp($event)"/>
             <igx-suffix *ngIf="value || value === 0" (keydown)="onClearKeyDown($event)" (click)="clearInput()" tabindex="0">

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

@@ -61,6 +61,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
     private chipAreaScrollOffset = 0;
     private _column = null;
     private isKeyPressed = false;
+    private isComposing = false;
 
     public showArrows: boolean;
     public expression: IFilteringExpression;
@@ -241,6 +242,10 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         }
 
         if (event.key === KEYS.ENTER) {
+            if (this.isComposing) {
+                return;
+            }
+
             this.chipsArea.chipsList.filter(chip => chip.selected = false);
 
             let indexToDeselect = -1;
@@ -286,6 +291,20 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         }
     }
 
+    /**
+     * Event handler for compositionstart on the input.
+     */
+    public onCompositionStart() {
+        this.isComposing = true;
+    }
+
+    /**
+     * Event handler for compositionend on the input.
+     */
+    public onCompositionEnd() {
+        this.isComposing = false;
+    }
+
     /**
      * Event handler for input click event.
      */

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-summaries.spec.ts

@@ -4,12 +4,14 @@ import { IgxTreeGridModule } from './index';
 import {
     IgxTreeGridSummariesComponent,
     IgxTreeGridSummariesKeyComponent,
-    IgxTreeGridCustomSummariesComponent
+    IgxTreeGridCustomSummariesComponent,
+    IgxTreeGridSummariesScrollingComponent
 } from '../../test-utils/tree-grid-components.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { HelperUtils } from '../../test-utils/helper-utils.spec';
 import { wait } from '../../test-utils/ui-interactions.spec';
 import { IgxNumberFilteringOperand } from 'igniteui-angular';
+import { IgxTreeGridRowComponent } from './tree-grid-row.component';
 
 describe('IgxTreeGrid - Summaries', () => {
     configureTestSuite();
@@ -18,7 +20,8 @@ describe('IgxTreeGrid - Summaries', () => {
             declarations: [
                 IgxTreeGridSummariesComponent,
                 IgxTreeGridSummariesKeyComponent,
-                IgxTreeGridCustomSummariesComponent
+                IgxTreeGridCustomSummariesComponent,
+                IgxTreeGridSummariesScrollingComponent
             ],
             imports: [
                 BrowserAnimationsModule,
@@ -685,6 +688,29 @@ describe('IgxTreeGrid - Summaries', () => {
         verifySummaryForRow847(fix, 6);
     });
 
+    it('should render rows correctly after collapse and expand', async() => {
+        const fix = TestBed.createComponent(IgxTreeGridSummariesScrollingComponent);
+        fix.detectChanges();
+        await wait(16);
+        const treeGrid = fix.componentInstance.treeGrid;
+
+        (treeGrid as any).scrollTo(23, 0, 0);
+        fix.detectChanges();
+        await wait(16);
+
+        let row = treeGrid.getRowByKey(15);
+        (row as IgxTreeGridRowComponent).expanded = false;
+        fix.detectChanges();
+        await wait(16);
+
+        row = treeGrid.getRowByKey(15);
+        (row as IgxTreeGridRowComponent).expanded = true;
+        fix.detectChanges();
+        await wait(16);
+
+        expect(treeGrid.dataRowList.length).toEqual(9);
+    });
+
     function verifySummaryForRow147(fixture, vissibleIndex) {
         const summaryRow = HelperUtils.getSummaryRowByDataRowIndex(fixture, vissibleIndex);
         HelperUtils.verifyColumnSummaries(summaryRow, 0, [], []);

projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts

@@ -945,6 +945,40 @@ export class SampleTestData {
         }
     ])
 
+    public static employeeScrollingData = () => ([
+        { 'Salary': 2500, 'employeeID': 0, 'PID': -1, 'firstName': 'Andrew', 'lastName': 'Fuller', 'Title': 'Vice President, Sales' },
+        { 'Salary': 3500, 'employeeID': 1, 'PID': -1, 'firstName': 'Jonathan', 'lastName': 'Smith', 'Title': 'Human resources' },
+        { 'Salary': 1500, 'employeeID': 2, 'PID': -1, 'firstName': 'Nancy', 'lastName': 'Davolio', 'Title': 'CFO' },
+        { 'Salary': 2500, 'employeeID': 3, 'PID': -1, 'firstName': 'Steven', 'lastName': 'Buchanan', 'Title': 'CTO' },
+        // sub of ID 0
+        { 'Salary': 2500, 'employeeID': 4, 'PID': 0, 'firstName': 'Janet', 'lastName': 'Leverling', 'Title': 'Sales Manager' },
+        { 'Salary': 3500, 'employeeID': 5, 'PID': 0, 'firstName': 'Laura', 'lastName': 'Callahan', 'Title': 'Inside Sales Coordinator' },
+        { 'Salary': 1500, 'employeeID': 6, 'PID': 0, 'firstName': 'Margaret', 'lastName': 'Peacock', 'Title': 'Sales Representative' },
+        { 'Salary': 2500, 'employeeID': 7, 'PID': 0, 'firstName': 'Michael', 'lastName': 'Suyama', 'Title': 'Sales Representative' },
+        // sub of ID 4
+        { 'Salary': 2500, 'employeeID': 8, 'PID': 4, 'firstName': 'Anne', 'lastName': 'Dodsworth', 'Title': 'Sales Representative' },
+        { 'Salary': 3500, 'employeeID': 9, 'PID': 4, 'firstName': 'Danielle', 'lastName': 'Davis', 'Title': 'Sales Representative' },
+        { 'Salary': 1500, 'employeeID': 10, 'PID': 4, 'firstName': 'Robert', 'lastName': 'King', 'Title': 'Sales Representative' },
+        // sub of ID 2
+        { 'Salary': 2500, 'employeeID': 11, 'PID': 2, 'firstName': 'Peter', 'lastName': 'Lewis', 'Title': 'Chief Accountant' },
+        { 'Salary': 3500, 'employeeID': 12, 'PID': 2, 'firstName': 'Ryder', 'lastName': 'Zenaida', 'Title': 'Accountant' },
+        { 'Salary': 1500, 'employeeID': 13, 'PID': 2, 'firstName': 'Wang', 'lastName': 'Mercedes', 'Title': 'Accountant' },
+        // sub of ID 3
+        { 'Salary': 1500, 'employeeID': 14, 'PID': 3, 'firstName': 'Theodore', 'lastName': 'Zia', 'Title': 'Software Architect' },
+        { 'Salary': 4500, 'employeeID': 15, 'PID': 3, 'firstName': 'Lacota', 'lastName': 'Mufutau', 'Title': 'Product Manager' },
+        // sub of ID 16
+        { 'Salary': 2500, 'employeeID': 16, 'PID': 15, 'firstName': 'Jin', 'lastName': 'Elliott', 'Title': 'Product Owner' },
+        { 'Salary': 3500, 'employeeID': 17, 'PID': 15, 'firstName': 'Armand', 'lastName': 'Ross', 'Title': 'Product Owner' },
+        { 'Salary': 1500, 'employeeID': 18, 'PID': 15, 'firstName': 'Dane', 'lastName': 'Rodriquez', 'Title': 'Team Leader' },
+        // sub of ID 19
+        { 'Salary': 2500, 'employeeID': 19, 'PID': 18, 'firstName': 'Declan', 'lastName': 'Lester', 'Title': 'Senior Software Developer' },
+        { 'Salary': 3500, 'employeeID': 20, 'PID': 18, 'firstName': 'Bernard', 'lastName': 'Jarvis', 'Title': 'Senior Software Developer' },
+        { 'Salary': 1500, 'employeeID': 21, 'PID': 18, 'firstName': 'Jason', 'lastName': 'Clark', 'Title': 'QA' },
+        { 'Salary': 1500, 'employeeID': 22, 'PID': 18, 'firstName': 'Mark', 'lastName': 'Young', 'Title': 'QA' },
+        // sub of ID 20
+        { 'Salary': 1500, 'employeeID': 23, 'PID': 20, 'firstName': 'Jeremy', 'lastName': 'Donaldson', 'Title': 'Software Developer' }
+    ])
+
     /* Small tree data: Every employee node has ID, Name, HireDate, Age and Employees */
     public static employeeSmallTreeData = () => ([
         {

projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts

@@ -441,3 +441,18 @@ export class IgxTreeGridWrappedInContComponent {
     }
 
 }
+
+@Component({
+    template: `
+    <igx-tree-grid #treeGrid [data]="data" primaryKey="employeeID" foreignKey="PID" width="900px" height="800px">
+        <igx-column [field]="'employeeID'" dataType="number"></igx-column>
+        <igx-column [field]="'firstName'"></igx-column>
+        <igx-column [field]="'lastName'"></igx-column>
+        <igx-column [field]="'Salary'" dataType="number" [hasSummary]="true" ></igx-column>
+    </igx-tree-grid>
+    `
+})
+export class IgxTreeGridSummariesScrollingComponent {
+    @ViewChild(IgxTreeGridComponent) public treeGrid: IgxTreeGridComponent;
+    public data = SampleTestData.employeeScrollingData();
+}