Merge branch 'pivot-grid-master' of https://github.com/IgniteUI/igniteui-angular into mdragnev/feat-10713

Author: mddragnev

CHANGELOG.md

@@ -23,6 +23,9 @@ All notable changes for each version of this project will be documented in this
     ```
 - `IgxTabs` have full right-to-left (RTL) support.
 
+- `IgxExcelExporterService`
+    - Added support for exporting the grids' headers by default when the data is empty. This behavior can be controlled by the `alwaysExportHeaders` option of the IgxExcelExporterOptions object.
+
 ### General
 
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

projects/igniteui-angular/src/lib/combo/combo-item.component.html

@@ -1,4 +1,5 @@
 <ng-container *ngIf="!isHeader && !singleMode">
-    <igx-checkbox [checked]="selected" [disableRipple]="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="disableCheck($event)" class="igx-combo__checkbox"></igx-checkbox>
+    <!-- checkbox should not allow changing its state from UI click (that's why it should be readonly=true), becasue when cancelling the selectionChange event in the combo, then checkbox will still change state.-->
+    <igx-checkbox [checked]="selected" [readonly]="true" [disableRipple]="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="disableCheck($event)" class="igx-combo__checkbox"></igx-checkbox>
 </ng-container>
 <span class="igx-drop-down__inner"><ng-content></ng-content></span>

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -65,6 +65,8 @@ const CSS_CLASS_INPUT_COSY = 'igx-input-group--cosy';
 const CSS_CLASS_INPUT_COMPACT = 'igx-input-group--compact';
 const CSS_CLASS_INPUT_COMFORTABLE = 'igx-input-group--comfortable';
 const CSS_CLASS_EMPTY = 'igx-combo__empty';
+const CSS_CLASS_ITEM_CHECKBOX = 'igx-combo__checkbox';
+const CSS_CLASS_ITME_CHECKBOX_CHECKED = 'igx-checkbox--checked';
 const defaultDropdownItemHeight = 40;
 const defaultDropdownItemMaxHeight = 400;
 
@@ -1927,12 +1929,19 @@ describe('igxCombo', () => {
             combo = fixture.componentInstance.combo;
             input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
         });
-        const simulateComboItemCheckboxClick = (itemIndex: number, isHeader = false) => {
+        const simulateComboItemClick = (itemIndex: number, isHeader = false) => {
             const itemClass = isHeader ? CSS_CLASS_HEADERITEM : CSS_CLASS_DROPDOWNLISTITEM;
             const dropdownItem = fixture.debugElement.queryAll(By.css('.' + itemClass))[itemIndex];
             dropdownItem.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
             fixture.detectChanges();
         };
+        const simulateComboItemCheckboxClick = (itemIndex: number, isHeader = false) => {
+            const itemClass = isHeader ? CSS_CLASS_HEADERITEM : CSS_CLASS_DROPDOWNLISTITEM;
+            const dropdownItem = fixture.debugElement.queryAll(By.css('.' + itemClass))[itemIndex];
+            const itemCheckbox = dropdownItem.query(By.css('.' + CSS_CLASS_ITEM_CHECKBOX));
+            itemCheckbox.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+        };
         it('should append/remove selected items to the input in their selection order', () => {
             let expectedOutput = 'Illinois';
             combo.select(['Illinois']);
@@ -2028,7 +2037,7 @@ describe('igxCombo', () => {
             fixture.detectChanges();
 
             const selectedItem_1 = dropdown.items[1];
-            simulateComboItemCheckboxClick(1);
+            simulateComboItemClick(1);
             expect(combo.selection[0]).toEqual(selectedItem_1.value.field);
             expect(selectedItem_1.selected).toBeTruthy();
             expect(selectedItem_1.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
@@ -2046,7 +2055,7 @@ describe('igxCombo', () => {
                 });
 
             const selectedItem_2 = dropdown.items[5];
-            simulateComboItemCheckboxClick(5);
+            simulateComboItemClick(5);
             expect(combo.selection[1]).toEqual(selectedItem_2.value.field);
             expect(selectedItem_2.selected).toBeTruthy();
             expect(selectedItem_2.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
@@ -2065,7 +2074,7 @@ describe('igxCombo', () => {
 
             // Unselecting an item
             const unselectedItem = dropdown.items[1];
-            simulateComboItemCheckboxClick(1);
+            simulateComboItemClick(1);
             expect(combo.selection.length).toEqual(1);
             expect(unselectedItem.selected).toBeFalsy();
             expect(unselectedItem.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeFalsy();
@@ -2087,10 +2096,26 @@ describe('igxCombo', () => {
             combo.toggle();
             fixture.detectChanges();
 
-            simulateComboItemCheckboxClick(0, true);
+            simulateComboItemClick(0, true);
             expect(combo.selection.length).toEqual(0);
             expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(0);
         });
+        it('should prevent selection when selectionChanging is cancelled', () => {
+            spyOn(combo.selectionChanging, 'emit').and.callFake((event: IComboSelectionChangingEventArgs) => event.cancel = true);
+            combo.toggle();
+            fixture.detectChanges();
+
+            const dropdownFirstItem = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`))[0].nativeElement;
+            const itemCheckbox = dropdownFirstItem.querySelectorAll(`.${CSS_CLASS_ITEM_CHECKBOX}`);
+
+            simulateComboItemCheckboxClick(0);
+            expect(combo.selection.length).toEqual(0);
+            expect(itemCheckbox[0].classList.contains(CSS_CLASS_ITME_CHECKBOX_CHECKED)).toBeFalsy();
+
+            simulateComboItemClick(0);
+            expect(combo.selection.length).toEqual(0);
+            expect(itemCheckbox[0].classList.contains(CSS_CLASS_ITME_CHECKBOX_CHECKED)).toBeFalsy();
+        });
     });
     describe('Grouping tests: ', () => {
         configureTestSuite();

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -591,6 +591,14 @@
             @extend %igx-grid__tr-header-row !optional;
         }
 
+        @include e(tr-pivot, $m: 'columnDimensionLeaf') {
+            @extend %igx-grid__tr-pivot--columnDimensionLeaf !optional
+        }
+
+        @include e(tr-pivot, $m: 'columnMultiRowSpan') {
+            @extend %igx-grid__tr-pivot--columnMultiRowSpan !optional
+        }
+
         @include e(tr-pivot-toggle-icons) {
             @extend %igx-grid__tr-pivot-toggle-icons !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -2881,6 +2881,15 @@
         flex-direction: column;
     }
 
+    %grid-thead--virtualizationWrapper {
+        height: 100%;
+    }
+
+    %grid-thead--virtualizationContainer {
+        overflow: visible;
+        height: 100%;
+    }
+
     %igx-grid__tr-pivot {
         display: flex;
         align-items: center;
@@ -3004,6 +3013,22 @@
         display: inline-flex !important;
     }
 
+    %igx-grid__tr-pivot--columnDimensionLeaf {
+        box-shadow: none;
+
+        igx-grid-header {
+            border: none;
+        }
+    }
+
+    %igx-grid__tr-pivot--columnMultiRowSpan {
+        igx-grid-header {
+            > * {
+                visibility: hidden;
+            }
+        }
+    }
+
     %igx-grid__tr-header-row {
         igx-pivot-row-dimension-header-group {
             igx-pivot-row-dimension-header {

projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss

@@ -77,6 +77,14 @@
         @include m(pivot) {
             @extend %grid-thead--pivot !optional;
         }
+
+        @include m(virtualizationWrapper) {
+            @extend %grid-thead--virtualizationWrapper !optional;
+        }
+
+        @include m(virtualizationContainer) {
+            @extend %grid-thead--virtualizationContainer !optional;
+        }
     }
 
     @include b(igx-grid-th) {

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

@@ -1455,6 +1455,9 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         this.igxForOf = value;
     }
 
+    @Input()
+    public igxGridForOfUniqueSizeCache = false;
+
     public get igxGridForOf() {
         return this.igxForOf;
     }
@@ -1465,7 +1468,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
      */
     public get sizesCache(): number[] {
         if (this.igxForScrollOrientation === 'horizontal') {
-            if (this.syncService.isMaster(this)) {
+            if (this.igxGridForOfUniqueSizeCache || this.syncService.isMaster(this)) {
                 return this._sizesCache;
             }
             return this.syncService.sizesCache(this.igxForScrollOrientation);

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -639,6 +639,7 @@ export interface PivotGridType extends GridType {
     dimensionsChange: EventEmitter<IDimensionsChange>;
     valuesChange: EventEmitter<IValuesChange>;
     pivotKeys: IPivotKeys;
+    hasMultipleValues: boolean;
 }
 export interface GridSVGIcon {
     name: string;

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

@@ -1183,7 +1183,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     public footer: ElementRef;
 
     public get headerContainer() {
-        return this.theadRow?.headerContainer;
+        return this.theadRow?.headerForOf;
     }
 
     public get headerSelectorContainer() {
@@ -6758,7 +6758,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         // eslint-disable-next-line prefer-const
         for (let [row, set] of selectionMap) {
-            row = this.paginator && source === this.filteredSortedData ? row + (this.paginator.perPage * this.paginator.page) : row;
+            row = this.paginator && (this.pagingMode === GridPagingMode.Local && source === this.filteredSortedData) ? row + (this.paginator.perPage * this.paginator.page) : row;
             row = isRemote ? row - this.virtualizationState.startIndex : row;
             if (!source[row] || source[row].detailsData !== undefined) {
                 continue;
@@ -7027,7 +7027,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.gridScroll.emit(args);
     }
 
-    private horizontalScrollHandler(event) {
+    protected horizontalScrollHandler(event) {
         const scrollLeft = event.target.scrollLeft;
         this.headerContainer.onHScroll(scrollLeft);
         this._horizontalForOfs.forEach(vfor => vfor.onHScroll(scrollLeft));

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

@@ -65,7 +65,7 @@
         <ng-container *ngTemplateOutlet="column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}">
         </ng-container>
     </div>
-    <div class="igx-grid-thead__group">
+    <div class="igx-grid-thead__group" *ngIf='!grid.isPivot'>
         <ng-container *ngFor="let child of column.children">
             <igx-grid-header-group *ngIf="!child.hidden" class="igx-grid-thead__subgroup"
                 [ngClass]="child.headerGroupClasses"