Merge branch '7.3.x' into rkolev/fix-5232-7.3.x

Author: DiyanDimitrov

.travis.yml

@@ -22,7 +22,7 @@ script:
 - npm run build:style
 - if [ -z "${TRAVIS_TAG}" ]; then npm run test:lib; fi
 - if [ -z "${TRAVIS_TAG}" ]; then npm run test:schematics; fi
-# - if [ -z "${TRAVIS_TAG}" ] && [ "${TRAVIS_REPO_SLUG}" == "IgniteUI/igniteui-angular" ]; then cat ./coverage/lcov.info | coveralls; fi
+- if [ -z "${TRAVIS_TAG}" ] && [ "${TRAVIS_REPO_SLUG}" == "IgniteUI/igniteui-angular" ]; then cat ./coverage/lcov.info | coveralls; fi
 
 before_deploy:
 - npm run build:schematics

azure-pipelines.yml

@@ -24,11 +24,11 @@ steps:
   env:
     NODE_OPTIONS: "--max_old_space_size=4096"
 
-# - script: cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
-#   condition: and(succeeded(), eq(variables['system.teamProject'], 'igniteui-angular'))
-#   displayName: 'Code coverage @ Coveralls'
-#   env:
-#     COVERALLS_REPO_TOKEN: $(coveralls.repoToken)
+- script: cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
+  condition: and(succeeded(), eq(variables['system.teamProject'], 'igniteui-angular'))
+  displayName: 'Code coverage @ Coveralls'
+  env:
+    COVERALLS_REPO_TOKEN: $(coveralls.repoToken)
 
 - script: npm run test:schematics
   displayName: 'Run migrations & schematics'
@@ -39,8 +39,8 @@ steps:
     testRunner: 'JUnit'
     testResultsFiles: '**/TESTS-*.xml' 
 
-# - task: PublishCodeCoverageResults@1
-#   inputs:
-#     codeCoverageTool: Cobertura
-#     summaryFileLocation: '$(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml'
-#     reportDirectory: '$(System.DefaultWorkingDirectory)/coverage'
+- task: PublishCodeCoverageResults@1
+  inputs:
+    codeCoverageTool: Cobertura
+    summaryFileLocation: '$(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml'
+    reportDirectory: '$(System.DefaultWorkingDirectory)/coverage'

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

@@ -856,7 +856,8 @@ export class IgxDragDirective implements OnInit, OnDestroy {
         const viewPortY = pageY - window.pageYOffset;
         if (document['msElementsFromPoint']) {
             // Edge and IE special snowflakes
-            return document['msElementsFromPoint'](viewPortX, viewPortY);
+            const elements = document['msElementsFromPoint'](viewPortX, viewPortY);
+            return elements === null ? [] : elements;
         } else {
             // Other browsers like Chrome, Firefox, Opera
             return document.elementsFromPoint(viewPortX, viewPortY);

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -214,7 +214,6 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
 
     update_row(row: IgxRow, value: any) {
         const grid = this.grid;
-        const selected = grid.selection.is_item_selected(grid.id, row.id);
         const rowInEditMode = grid.crudService.row;
         const data = this.get_all_data(grid.transactions.enabled);
         const index = this.get_row_index_in_data(row.id);
@@ -249,6 +248,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
 
         this.updateData(grid, row.id, data[index], args.oldValue, args.newValue);
         const newId = grid.primaryKey ? args.newValue[grid.primaryKey] : args.newValue;
+        const selected = grid.selection.is_item_selected(grid.id, row.id);
         if (selected) {
             grid.selection.deselect_item(grid.id, row.id);
             grid.selection.select_item(grid.id, newId);

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

@@ -1980,8 +1980,6 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
         }
 
         this.children.forEach(child => {
-            child.disableHiding = true;
-            child.disablePinning = true;
             child.movable = false;
         });
     }

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-column-moving.component.ts

@@ -55,6 +55,9 @@ export class IgxExcelStyleColumnMovingComponent {
             }
         } else if (this.grid.unpinnedColumns.indexOf(this.column) === 0 && moveDirection === 0) {
             targetColumn = this.grid.pinnedColumns[this.grid.pinnedColumns.length - 1];
+            if (targetColumn.parent) {
+                targetColumn = targetColumn.topLevelParent;
+            }
             moveDirection = 1;
         } else {
             targetColumn = this.findColumn(moveDirection, this.grid.unpinnedColumns);

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

@@ -5659,6 +5659,44 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
             expect(pinButton.classList.contains('igx-excel-filter__actions-pin--disabled')).toBe(true,
                 'pinButton should be disabled');
         }));
+
+        it('Should pin column next to already pinned group by moving it to the left.', fakeAsync(() => {
+            // Test prerequisites
+            grid.width = '1000px';
+            fix.detectChanges();
+            tick(100);
+            // Adjust column widths, so their group can be pinned.
+            const columnFields = ['ID', 'ProductName', 'Downloads', 'Released', 'ReleaseDate', 'AnotherField'];
+            columnFields.forEach((columnField) => {
+                const col = grid.columns.find((c) => c.field === columnField);
+                col.width = '100px';
+            });
+            fix.detectChanges();
+            // Make 'AnotherField' column movable.
+            const column = grid.columns.find((c) => c.field === 'AnotherField');
+            column.movable = true;
+            fix.detectChanges();
+
+            // Pin the 'General Information' group by pinning its child 'ProductName' column.
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            fix.detectChanges();
+            GridFunctions.clickPinIconInExcelStyleFiltering(fix, false);
+            tick(200);
+            fix.detectChanges();
+
+            // Verify 'AnotherField' column is not pinned.
+            GridFunctions.verifyColumnIsPinned(column, false, 7);
+
+            // Try to pin the 'AnotherField' column by moving it to the left.
+            GridFunctions.clickExcelFilterIcon(fix, 'AnotherField');
+            fix.detectChanges();
+            GridFunctions.clickMoveLeftInExcelStyleFiltering(fix);
+            tick(200);
+            fix.detectChanges();
+
+            // Verify 'AnotherField' column is successfully pinned next to the column group.
+            GridFunctions.verifyColumnIsPinned(column, true, 8);
+        }));
     });
 });
 

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts

@@ -801,6 +801,21 @@ describe('IgxGrid - multi-row-layout Integration - ', () => {
 
             verifyDOMMatchesLayoutSettings(gridFirstRow, fixture.componentInstance.colGroups);
         });
+
+        it('should render unpin and hide column buttons into the excel style filter', () => {
+            const filterIcons = fixture.debugElement.queryAll(By.css('.igx-excel-filter__icon'));
+            expect(filterIcons.length).not.toBe(0);
+
+            filterIcons[0].nativeElement.click();
+            fixture.detectChanges();
+
+            const excelMenu = grid.nativeElement.querySelector('.igx-excel-filter__menu');
+            const unpinComponent = excelMenu.querySelector('.igx-excel-filter__actions-unpin');
+            const hideComponent = excelMenu.querySelector('.igx-excel-filter__actions-hide');
+
+            expect(unpinComponent).toBeDefined();
+            expect(hideComponent).toBeDefined();
+        });
     });
 
     describe('GroupBy ', () => {

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

@@ -25,10 +25,11 @@
         <div class="igx-grid__tr" role="row" [style.width.px]='calcWidth + 1'>
             <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left" class="igx-grid__scroll-on-drag-left"></span>
             <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left" class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
-                <div class="igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header" #headerHierarchyExpander [hidden]='!hasExpandableChildren || !hasVisibleColumns'[ngClass]="{
+                <div #headerHierarchyExpander [hidden]='!hasExpandableChildren || !hasVisibleColumns' [ngClass]="{
+                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header': hasExpandableChildren,
                     'igx-grid__hierarchical-expander--push': filteringService.isFilterRowVisible,
                     'igx-grid__hierarchical-expander--no-border': rowSelectable || rowDraggable
-                }">
+                    }">
                     <igx-icon role="button" fontSet="material" [isActive]='hierarchicalState.length > 0 && hasExpandableChildren' (click)="collapseAllRows()">unfold_less</igx-icon>
                 </div>
                 <ng-container *ngIf="rowDraggable">

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

@@ -459,7 +459,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
 
     protected onColumnsChanged(change: QueryList<IgxColumnComponent>) {
         this.updateColumnList();
-        const cols = change.filter(c => c.grid === this);
+        const cols = change.filter(c => c.gridAPI.grid === this);
         if (cols.length > 0) {
             this.columnList.reset(cols);
             super.onColumnsChanged(this.columnList);