Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into rkaraivanov/toolbar-resize-fix

Author: rkaraivanov

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes for each version of this project will be documented in this
 ## 12.1.0
 
 ### New Features
+- `igxGrid`
+    - New `additionalTemplateContext` column input:
+
+    ```html
+    <igx-column [additionalTemplateContext]="contextObject">
+      <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
+         {{ props }}
+      </ng-template>
+    </igx-column>
+    ```
 - `Toolbar Actions`
     - Exposed a new input property `overlaySettings` for all column actions (`hiding` | `pinning` | `advanced filtering` | `exporter`). Example below:
 
@@ -14,7 +24,6 @@ All notable changes for each version of this project will be documented in this
         <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
     </igx-grid-toolbar-actions>
     ```
-- `Exporters`'s `columnExporting` event now supports changing the index of the column in the exported file. 
 - `IgxPaginatorComponent`
     - Added `paging` and `pagingDone` events; `paging` event is cancellable and is emitted before pagination is performed, `pagingDone` event gives you information about the previous and the current page number and is not cancellable; Also `IgxPageSizeSelectorComponent` and `IgxPageNavigationComponent` are introduced and now the paginator components allows you to define a custom content, as it is shown in the example below:
     ```html
@@ -27,7 +36,6 @@ All notable changes for each version of this project will be documented in this
         </igx-paginator-content>
     </igx-paginator>
     ```
-
 - `Exporters`'s `columnExporting` event now supports changing the index of the column in the exported file.
     ```typescript
         this.excelExporterService.columnExporting.subscribe((col) => {
@@ -36,6 +44,9 @@ All notable changes for each version of this project will be documented in this
             }
         });
     ```
+- `IgxExcelExporterService`
+    - Added support for exporting the grids' multi-column headers to **Excel**. By default, the multi-column headers would be exported but this behavior can be controlled by the `ignoreMultiColumnHeaders` option off the IgxExcelExporterOptions object.
+    
 ### General
 - `IgxPaginatorComponent`
     - Deprecated properties `selectLabel` and `prepositionPage` are now removed;
@@ -83,6 +94,10 @@ All notable changes for each version of this project will be documented in this
         </igx-expansion-panel>
     ```
 
+### Themes
+- **Breaking Change**  - The `$color` property of the `igx-action-strip-theme` has been renamed as follows:
+    - `$color` -> `$icon-color`
+
 ## 12.0.3
 
 ### General

ROADMAP.md

@@ -5,17 +5,24 @@
 ## Milestone 17 (Due by July, 2021)
 
 1. Accordion component to Ignite UI for Angular [#9559](https://github.com/IgniteUI/igniteui-angular/issues/9559)
-2. Expose a column input for passing additional data/state in the template contexts of the column [#9020](https://github.com/IgniteUI/igniteui-angular/issues/9020)
+2. **[DONE]** Expose a column input for passing additional data/state in the template contexts of the column [#9020](https://github.com/IgniteUI/igniteui-angular/issues/9020)
 3. Expose a new cell-like object API for the data grids [#9555](https://github.com/IgniteUI/igniteui-angular/issues/9555)
-4. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
-5. Change the way igxGrid allows using the igxPaginator [#9097](https://github.com/IgniteUI/igniteui-angular/issues/9097)
-6. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554)
-7. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556)
+4. Change the way igxGrid allows using the igxPaginator [#9097](https://github.com/IgniteUI/igniteui-angular/issues/9097)
+5. **[DONE]** Tree Grid Grouping Pipe and Group Area [#9184](https://github.com/IgniteUI/igniteui-angular/issues/9184)
+6. **[DONE]** Grid Multi Column Headers to exported excel [#6288](https://github.com/IgniteUI/igniteui-angular/issues/6288)
+7. **[DONE]** Snackbar IToggleView [#9677](https://github.com/IgniteUI/igniteui-angular/issues/9677)
+8. **[DONE]** Allow for passing a positioning strategy to IgxGridToolbarHidingComponent [#9065](https://github.com/IgniteUI/igniteui-angular/issues/9065)
+9. **[DONE]** IgxPaginator Component should be templatable [#9587](https://github.com/IgniteUI/igniteui-angular/issues/9587)
+10. **[DONE]** Editable cell styling support [#9630](https://github.com/IgniteUI/igniteui-angular/issues/9630)
+11. **[DONE]** Excel Export Service - onColumnExport Allow to modify columnIndex Property [#8874](https://github.com/IgniteUI/igniteui-angular/issues/8874)
 
 ## Going down the road
 
 1. Scheduler component
 2. Grid Cell Merging
+3. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
+4. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554)
+5. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556)
 
 # Previous Milestone
 

projects/igniteui-angular/migrations/update-12_1_0/changes/theme-props.json

@@ -0,0 +1,10 @@
+{
+    "$schema": "../../common/schema/theme-props.schema.json",
+    "changes": [
+        {
+            "name": "$color",
+            "replaceWith": "$icon-color",
+            "owner": "igx-action-strip-theme"
+        }
+    ]
+}

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -513,6 +513,11 @@ export class IgxChipComponent extends DisplayDensityBase {
         return this.getComponentDensityClass('igx-chip__ghost');
     }
 
+    /** @hidden @internal */
+    public get nativeElement() {
+        return this.ref.nativeElement;
+    }
+
     /**
      * @hidden
      * @internal
@@ -525,7 +530,7 @@ export class IgxChipComponent extends DisplayDensityBase {
     protected _movedWhileRemoving = false;
     private _resourceStrings = CurrentResourceStrings.ChipResStrings;
 
-    constructor(public cdr: ChangeDetectorRef, public elementRef: ElementRef, private renderer: Renderer2,
+    constructor(public cdr: ChangeDetectorRef, private ref: ElementRef<HTMLElement>, private renderer: Renderer2,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
         super(_displayDensityOptions);
     }

projects/igniteui-angular/src/lib/chips/chip.spec.ts

@@ -382,7 +382,7 @@ describe('IgxChip', () => {
 
             spyOn(firstChipComp.selectedChanging, 'emit');
             spyOn(firstChipComp.selectedChanged, 'emit');
-            firstChipComp.elementRef.nativeElement.focus();
+            firstChipComp.nativeElement.focus();
 
             UIInteractions.triggerKeyDownEvtUponElem(' ', firstChipComp.chipArea.nativeElement, true);
             fix.detectChanges();

projects/igniteui-angular/src/lib/chips/chips-area.component.ts

@@ -273,18 +273,18 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
                 orderChanged = this.positionChipAtIndex(dragChipIndex, dragChipIndex - 1, false, event.originalEvent);
                 if (orderChanged) {
                     setTimeout(() => {
-                        this.chipsList.toArray()[dragChipIndex - 1].elementRef.nativeElement.focus();
+                        this.chipsList.get(dragChipIndex - 1).nativeElement.focus();
                     });
                 }
             } else if (event.originalEvent.key === 'ArrowRight' || event.originalEvent.key === 'Right') {
                 orderChanged = this.positionChipAtIndex(dragChipIndex, dragChipIndex + 1, true, event.originalEvent);
             }
         } else {
             if ((event.originalEvent.key === 'ArrowLeft' || event.originalEvent.key === 'Left') && dragChipIndex > 0) {
-                chipsArray[dragChipIndex - 1].elementRef.nativeElement.focus();
+                chipsArray[dragChipIndex - 1].nativeElement.focus();
             } else if ((event.originalEvent.key === 'ArrowRight' || event.originalEvent.key === 'Right') &&
                 dragChipIndex < chipsArray.length - 1) {
-                chipsArray[dragChipIndex + 1].elementRef.nativeElement.focus();
+                chipsArray[dragChipIndex + 1].nativeElement.focus();
             }
         }
     }

projects/igniteui-angular/src/lib/chips/chips-area.spec.ts

@@ -23,18 +23,18 @@ import { wait, UIInteractions } from '../test-utils/ui-interactions.spec';
     `
 })
 class TestChipComponent {
-    @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true  })
+    @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true })
     public chipsArea: IgxChipsAreaComponent;
 
-    @ViewChildren('chipElem', { read: IgxChipComponent})
+    @ViewChildren('chipElem', { read: IgxChipComponent })
     public chips: QueryList<IgxChipComponent>;
 
     public chipList = [
         { id: 'Country', text: 'Country', removable: false, selectable: false, draggable: false },
         { id: 'City', text: 'City', removable: true, selectable: true, draggable: true }
     ];
 
-    constructor(public cdr: ChangeDetectorRef) {}
+    constructor(public cdr: ChangeDetectorRef) { }
 }
 
 @Component({
@@ -56,8 +56,7 @@ class TestChipSelectComponent extends TestChipComponent {
 }
 
 @Component({
-    template:
-    `
+    template: `
         <igx-chips-area #chipsArea (reorder)="chipsOrderChanged($event)">
             <igx-chip #chipElem *ngFor="let chip of chipList" [id]="chip.id" [draggable]="true"
                 [removable]="true" [selectable]="true" (remove)="chipRemoved($event)">
@@ -68,10 +67,10 @@ class TestChipSelectComponent extends TestChipComponent {
     `
 })
 class TestChipReorderComponent {
-    @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true  })
+    @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true })
     public chipsArea: IgxChipsAreaComponent;
 
-    @ViewChildren('chipElem', { read: IgxChipComponent})
+    @ViewChildren('chipElem', { read: IgxChipComponent })
     public chips: QueryList<IgxChipComponent>;
 
     public chipList = [
@@ -81,7 +80,7 @@ class TestChipReorderComponent {
         { id: 'FirstName', text: 'First Name' },
     ];
 
-    constructor(public cdr: ChangeDetectorRef) {}
+    constructor(public cdr: ChangeDetectorRef) { }
 
     public chipsOrderChanged(event) {
         const newChipList = [];
@@ -197,11 +196,11 @@ describe('IgxChipsArea ', () => {
             const firstChipComp = fix.componentInstance.chips.toArray()[0];
             const secondChipComp = fix.componentInstance.chips.toArray()[1];
 
-            firstChipComp.elementRef.nativeElement.focus();
-            expect(document.activeElement).toBe(firstChipComp.elementRef.nativeElement);
+            firstChipComp.nativeElement.focus();
+            expect(document.activeElement).toBe(firstChipComp.nativeElement);
 
-            secondChipComp.elementRef.nativeElement.focus();
-            expect(document.activeElement).toBe(secondChipComp.elementRef.nativeElement);
+            secondChipComp.nativeElement.focus();
+            expect(document.activeElement).toBe(secondChipComp.nativeElement);
         });
 
         it('should focus on previous and next chips after arrows are pressed', () => {
@@ -211,22 +210,22 @@ describe('IgxChipsArea ', () => {
             const firstChipComp = fix.componentInstance.chips.toArray()[0];
             const secondChipComp = fix.componentInstance.chips.toArray()[1];
 
-            firstChipComp.elementRef.nativeElement.focus();
+            firstChipComp.nativeElement.focus();
             fix.detectChanges();
 
-            expect(document.activeElement).toBe(firstChipComp.elementRef.nativeElement);
+            expect(document.activeElement).toBe(firstChipComp.nativeElement);
 
             const rightKey = new KeyboardEvent('keydown', { key: 'ArrowRight' });
             firstChipComp.onChipKeyDown(rightKey);
             fix.detectChanges();
 
-            expect(document.activeElement).toBe(secondChipComp.elementRef.nativeElement);
+            expect(document.activeElement).toBe(secondChipComp.nativeElement);
 
             const leftKey = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
             secondChipComp.onChipKeyDown(leftKey);
             fix.detectChanges();
 
-            expect(document.activeElement).toBe(firstChipComp.elementRef.nativeElement);
+            expect(document.activeElement).toBe(firstChipComp.nativeElement);
         });
 
         it('should fire selectionChange event', () => {
@@ -328,17 +327,17 @@ describe('IgxChipsArea ', () => {
             selectedChip.selected = true;
             fix.detectChanges();
 
-            const selectedChipIconContainer = selectedChip.elementRef.nativeElement.children[0].children[0];
-            const unselectedChipIconContainer = unselectedChip.elementRef.nativeElement.children[0].children[0];
+            const selectedChipIconContainer = selectedChip.nativeElement.children[0].children[0];
+            const unselectedChipIconContainer = unselectedChip.nativeElement.children[0].children[0];
             expect(selectedChip.selected).toBe(true);
             expect(selectedChipIconContainer.children.length).toEqual(1);
             expect(selectedChipIconContainer.children[0].tagName).toEqual('IGX-ICON');
             // expect(selectedChip.elementRef.nativeElement.children[0].children[0].offsetWidth).not.toEqual(0);
-            expect(selectedChip.elementRef.nativeElement.children[0].children[0].className).toEqual(CHIP_SELECT_ICON);
-            expect(selectedChip.elementRef.nativeElement.children[0].children[0].className).not.toEqual(CHIP_SELECT_ICON_HIDDEN);
+            expect(selectedChip.nativeElement.children[0].children[0].className).toEqual(CHIP_SELECT_ICON);
+            expect(selectedChip.nativeElement.children[0].children[0].className).not.toEqual(CHIP_SELECT_ICON_HIDDEN);
             expect(unselectedChipIconContainer.children.length).toEqual(1);
             expect(unselectedChipIconContainer.children[0].tagName).toEqual('IGX-ICON');
-            expect(unselectedChip.elementRef.nativeElement.children[0].children[0].offsetWidth).toEqual(0);
+            expect(unselectedChip.nativeElement.children[0].children[0].offsetWidth).toEqual(0);
         });
 
         it('should fire only onSelection event for chip area when selecting a chip using spacebar', () => {
@@ -423,8 +422,8 @@ describe('IgxChipsArea ', () => {
 
         it('should reorder chips when shift + leftarrow and shift + rightarrow is pressed', () => {
             const chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
-            const firstChipAreaElem = chipComponents[0].componentInstance.elementRef.nativeElement;
-            const secondChipAreaElem = chipComponents[1].componentInstance.elementRef.nativeElement;
+            const firstChipAreaElem = chipComponents[0].componentInstance.nativeElement;
+            const secondChipAreaElem = chipComponents[1].componentInstance.nativeElement;
             const firstChipLeft = firstChipAreaElem.getBoundingClientRect().left;
             const secondChipLeft = secondChipAreaElem.getBoundingClientRect().left;
 
@@ -451,7 +450,7 @@ describe('IgxChipsArea ', () => {
                 chipArea = fix.componentInstance.chipsArea;
                 const chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
                 const targetChip = chipComponents[2].componentInstance;
-                const targetChipElem = targetChip.elementRef.nativeElement;
+                const targetChipElem = targetChip.nativeElement;
 
                 targetChipElem.focus();
                 fix.detectChanges();

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -9,7 +9,7 @@
 /// @param {Map} $palette [null] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
 ///
-/// @param {Color} $color [null] - The color used for the actions icons.
+/// @param {Color} $icon-color [null] - The color used for the actions icons.
 /// @param {Color} $background [null] - The color used for the action strip component content background.
 /// @param {Color} $actions-background [null] - The color used for the actions background.
 /// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.
@@ -30,7 +30,7 @@
 
     $background: null,
     $actions-background: null,
-    $color: null,
+    $icon-color: null,
     $delete-action: null,
     $actions-border-radius: null,
 ) {
@@ -49,16 +49,16 @@
         if($actions-border-radius, $actions-border-radius, map-get($action-strip-schema, 'actions-border-radius')), 0, 24px
     );
 
-    @if not($color) and $actions-background {
-        $color: text-contrast($actions-background);
+    @if not($icon-color) and $actions-background {
+        $icon-color: text-contrast($actions-background);
     }
 
     @return extend($theme, (
         name: $name,
         palette: $palette,
         background: $background,
         actions-background: $actions-background,
-        color: $color,
+        icon-color: $icon-color,
         delete-action: $delete-action,
         actions-border-radius: $actions-border-radius,
     ));
@@ -175,7 +175,7 @@
         justify-content: center;
         pointer-events: all;
         position: relative;
-        color: --var($theme, 'color');
+        color: --var($theme, 'icon-color');
         border-radius: --var($theme, 'actions-border-radius');
         background: --var($theme, 'actions-background');
         max-height: 36px;
@@ -185,12 +185,12 @@
         }
 
         igx-icon {
-            color: --var($theme, 'color');
+            color: --var($theme, 'icon-color');
         }
 
         [igxButton='icon'] {
             igx-icon {
-                color: --var($theme, 'color');
+                color: --var($theme, 'icon-color');
             }
 
             @if $variant == 'indigo-design' {