Merge branch 'master' into dkamburov/expose-totalItemCount

Author: ChronosSF

projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts

@@ -107,6 +107,8 @@ export class IgxTemplateOutletDirective implements OnChanges {
             this._viewContainerRef.insert(view, 0);
             this._updateExistingContext(this.igxTemplateOutletContext);
             this.onViewMoved.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
+        } else {
+            this._updateExistingContext(this.igxTemplateOutletContext);
         }
     }
     private _useCachedView() {

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -620,6 +620,16 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         if (this.editable && editMode && !this.row.deleted) {
             if (editableCell) {
                 this.gridAPI.update_cell(editableCell, editableCell.editValue);
+                /* This check is related with the following issue #6517:
+                 * when edit cell that belongs to a column which is sorted and press tab,
+                 * the next cell in edit mode is with wrong value /its context is not updated/;
+                 * So we reapply sorting before the next cell enters edit mode.
+                 * Also we need to keep the notifyChanges below, because of the current
+                 * change detection cycle when we have editing with enabled transactions
+                 */
+                if (this.grid.sortingExpressions.length && this.grid.sortingExpressions.indexOf(editableCell.column.field)) {
+                    this.grid.cdr.detectChanges();
+                }
             }
             crud.end();
             this.grid.notifyChanges();

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -549,7 +549,7 @@ describe('igxOverlay', () => {
             expect(overlayContentTransform).toEqual(secondTransform);
         }));
 
-        it('fix for #1690 - click on second filter does not close first one.', fakeAsync(() => {
+        it('#1690 - click on second filter does not close first one.', fakeAsync(() => {
             const fixture = TestBed.createComponent(TwoButtonsComponent);
             const button1 = fixture.nativeElement.getElementsByClassName('buttonOne')[0];
             const button2 = fixture.nativeElement.getElementsByClassName('buttonTwo')[0];
@@ -566,7 +566,7 @@ describe('igxOverlay', () => {
             expect(overlayDiv.children.length).toBe(1);
         }));
 
-        it('fix for #1692 - scroll strategy closes overlay when shown component is scrolled.', fakeAsync(() => {
+        it('#1692 - scroll strategy closes overlay when shown component is scrolled.', fakeAsync(() => {
             const fixture = TestBed.createComponent(SimpleDynamicWithDirectiveComponent);
             const overlaySettings: OverlaySettings = { scrollStrategy: new CloseScrollStrategy() };
             fixture.componentInstance.show(overlaySettings);
@@ -593,7 +593,7 @@ describe('igxOverlay', () => {
         }));
 
         // TODO: refactor utilities to include all exported methods in a class
-        it('fix for #1799 - content div should reposition on window resize.', fakeAsync(() => {
+        it('#1799 - content div should reposition on window resize.', fakeAsync(() => {
             const rect: ClientRect = {
                 bottom: 50,
                 height: 0,
@@ -635,7 +635,7 @@ describe('igxOverlay', () => {
             overlayInstance.hide(id);
         }));
 
-        it('fix for #2475 - An error is thrown for IgxOverlay when showing a component' +
+        it('#2475 - An error is thrown for IgxOverlay when showing a component' +
             'instance that is not attached to the DOM', fakeAsync(() => {
                 const fix = TestBed.createComponent(SimpleRefComponent);
                 fix.detectChanges();
@@ -656,7 +656,7 @@ describe('igxOverlay', () => {
                 expect(contentDiv.classList.contains(CLASS_OVERLAY_CONTENT_MODAL)).toBeTruthy();
             }));
 
-        it('fix for #2486 - filtering dropdown is not correctly positioned', fakeAsync(() => {
+        it('#2486 - filtering dropdown is not correctly positioned', fakeAsync(() => {
             const fix = TestBed.createComponent(WidthTestOverlayComponent);
             fix.debugElement.nativeElement.style.transform = 'translatex(100px)';
 
@@ -676,7 +676,7 @@ describe('igxOverlay', () => {
             expect(fix.componentInstance.customComponent.nativeElement.getBoundingClientRect().left).toBe(400);
         }));
 
-        it('fix for #2798 - Allow canceling of open and close of IgxDropDown through onOpening and onClosing events', fakeAsync(() => {
+        it('#2798 - Allow canceling of open and close of IgxDropDown through onOpening and onClosing events', fakeAsync(() => {
             const fix = TestBed.createComponent(SimpleRefComponent);
             fix.detectChanges();
             const overlayInstance = fix.componentInstance.overlay;
@@ -713,7 +713,7 @@ describe('igxOverlay', () => {
             expect(overlayInstance.onOpened.emit).toHaveBeenCalledTimes(1);
         }));
 
-        it('fix for #3673 - Should not close dropdown in dropdown', fakeAsync(() => {
+        it('#3673 - Should not close dropdown in dropdown', fakeAsync(() => {
             const fix = TestBed.createComponent(EmptyPageComponent);
             const button = fix.componentInstance.buttonElement;
             const overlay = fix.componentInstance.overlay;
@@ -749,7 +749,7 @@ describe('igxOverlay', () => {
             expect(overlayDiv.children[0].localName).toEqual('div');
         }));
 
-        it('fix for #3743 - Reposition correctly resized element.', () => {
+        it('#3743 - Reposition correctly resized element.', () => {
             const fixture = TestBed.createComponent(TopLeftOffsetComponent);
             fixture.detectChanges();
 
@@ -801,7 +801,7 @@ describe('igxOverlay', () => {
             document.body.removeChild(wrapperElement);
         });
 
-        it('Fix for #3988 - Should use ngModuleRef to create component', inject([ApplicationRef], (appRef: ApplicationRef) => {
+        it('#3988 - Should use ngModuleRef to create component', inject([ApplicationRef], (appRef: ApplicationRef) => {
             const fixture = TestBed.createComponent(EmptyPageComponent);
             const overlay = fixture.componentInstance.overlay;
             fixture.detectChanges();
@@ -825,6 +825,46 @@ describe('igxOverlay', () => {
             expect(appRef.attachView).toHaveBeenCalledWith('test');
             expect(overlay.getOverlayById(id).componentRef as any).toBe(mockComponent);
         }));
+
+        it('##6474 - should calculate correctly position', () => {
+            const elastic: ElasticPositionStrategy = new ElasticPositionStrategy();
+            const targetRect: ClientRect = {
+                top: 100,
+                bottom: 200,
+                height: 100,
+                left: 100,
+                right: 200,
+                width: 100
+            };
+            const elementRect: ClientRect = {
+                top: 0,
+                bottom: 300,
+                height: 300,
+                left: 0,
+                right: 300,
+                width: 300
+            };
+            const viewPortRect: ClientRect = {
+                top: 1000,
+                bottom: 1300,
+                height: 300,
+                left: 1000,
+                right: 1300,
+                width: 300
+            };
+            spyOn<any>(elastic, 'setStyle').and.returnValue({});
+            spyOn(Util, 'getViewportRect').and.returnValue(viewPortRect);
+            spyOn(Util, 'getTargetRect').and.returnValue(targetRect);
+
+            const element = jasmine.createSpyObj('HTMLElement', ['getBoundingClientRect'] );
+            spyOn(element, 'getBoundingClientRect').and.returnValue(elementRect);
+            element.classList = { add: () => {} };
+            element.style = { width: '', height: ''};
+            elastic.position(element, null, null, true);
+
+            expect(element.style.width).toBe('200px');
+            expect(element.style.height).toBe('100px');
+        });
     });
 
     describe('Unit Tests - Scroll Strategies: ', () => {
@@ -2617,7 +2657,7 @@ describe('igxOverlay', () => {
             tick();
         }));
 
-        // Test fix for #1883 #1820
+        // Test #1883 #1820
         it('It should close the component when esc key is pressed and there were other keys pressed prior to esc.', fakeAsync(() => {
             const fixture = TestBed.createComponent(EmptyPageComponent);
             const overlay = fixture.componentInstance.overlay;

projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts

@@ -50,7 +50,7 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy {
         const leftBorder = this.calculateLeft(
             connectedFit.targetRect, connectedFit.contentElementRect, flippedStartPoint, flippedDirection, 0);
         const rightBorder = leftBorder + connectedFit.contentElementRect.width;
-        return connectedFit.viewPortRect.left < leftBorder && rightBorder < connectedFit.viewPortRect.right;
+        return 0 < leftBorder && rightBorder < connectedFit.viewPortRect.width;
     }
 
     /**
@@ -65,7 +65,7 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy {
         const topBorder = this.calculateTop(
             connectedFit.targetRect, connectedFit.contentElementRect, flippedStartPoint, flippedDirection, 0);
         const bottomBorder = topBorder + connectedFit.contentElementRect.height;
-        return connectedFit.viewPortRect.top < topBorder && bottomBorder < connectedFit.viewPortRect.bottom;
+        return 0 < topBorder && bottomBorder < connectedFit.viewPortRect.height;
     }
 
     /**

projects/igniteui-angular/src/lib/services/overlay/position/base-fit-position-strategy.ts

@@ -38,8 +38,8 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
             connectedFit.horizontalOffset ? connectedFit.horizontalOffset : 0);
         connectedFit.right = connectedFit.left + connectedFit.contentElementRect.width;
         connectedFit.fitHorizontal = {
-                back: Math.round(connectedFit.left - connectedFit.viewPortRect.left),
-                forward: Math.round(connectedFit.viewPortRect.right - connectedFit.right)
+                back: Math.round(connectedFit.left),
+                forward: Math.round(connectedFit.viewPortRect.width - connectedFit.right)
             };
 
         connectedFit.top = this.calculateTop(
@@ -50,8 +50,8 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
             connectedFit.verticalOffset ? connectedFit.verticalOffset : 0);
         connectedFit.bottom = connectedFit.top + connectedFit.contentElementRect.height;
         connectedFit.fitVertical = {
-            back: Math.round(connectedFit.top - connectedFit.viewPortRect.top),
-            forward: Math.round(connectedFit.viewPortRect.bottom - connectedFit.bottom)
+            back: Math.round(connectedFit.top),
+            forward: Math.round(connectedFit.viewPortRect.height - connectedFit.bottom)
         };
     }
 

src/app/hierarchical-grid/hierarchical-grid.sample.html

@@ -109,8 +109,9 @@ <h4 class="sample-title">Sample three</h4>
     <h4 class="sample-title">Sample 4</h4>
     <div class="sample-actions">
         <button igxButton="raised" (click)='LoadMoreColumns()'>Change columns runtime</button>
+        <button igxButton="raised" (click)='changeData()'>Change data runtime</button>
     </div>
-    <igx-hierarchical-grid [data]="localData" [autoGenerate]="false" [height]="'600px'" [width]="'800px'" #hGrid2>
+    <igx-hierarchical-grid [data]="localData1" [autoGenerate]="false" [height]="'600px'" [width]="'800px'" #hGrid2>
             <igx-column field="ID" [resizable]="true" [pinned]="true" [filterable]='true'></igx-column>
             <igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
             <igx-column field="ProductName" hasSummary='true'></igx-column>

src/app/hierarchical-grid/hierarchical-grid.sample.ts

@@ -13,6 +13,9 @@ import {
 })
 export class HierarchicalGridSampleComponent {
     localData = [];
+    localData1 = [];
+    data1 = [];
+    data2 = [];
     isRowSelectable = false;
     firstLevelExpanded = false;
     rootExpanded = false;
@@ -48,6 +51,9 @@ export class HierarchicalGridSampleComponent {
             { label: 'comfortable', selected: this.density === 'comfortable', togglable: true }
         ];
         this.localData = this.generateDataUneven(100, 3);
+        this.data1 = this.localData.slice(0, 10);
+        this.data2 = this.localData.slice(10, 20);
+        this.localData1 = this.data1;
         this.localData[0].hasChild = false;
         this.localData[1].hasChild = false;
         this.localData[2].childData[0].hasChild = false;
@@ -139,4 +145,13 @@ export class HierarchicalGridSampleComponent {
         this.columns = ['Col1', 'Col2', 'Col3'];
         this.childColumns = ['ChildCol1', 'ChildCol2'];
     }
+
+    public changeData() {
+        debugger;
+        if (this.localData1 === this.data1) {
+            this.localData1 = this.data2;
+        } else {
+            this.localData1 = this.data1;
+        }
+    }
 }